顯示具有 GitHub 標籤的文章。 顯示所有文章
顯示具有 GitHub 標籤的文章。 顯示所有文章

2014年9月22日 星期一

在 Blogger 上顯示 GitHub Ribbon

首先,到 GitHub Ribbons 挑選喜歡的配色,抄下其中 srcdata-canonical-src (非必要) 屬性。

在部落格的「版面配置」中,捲動到最後面,找到「新增小工具」,確認它是在「網誌文章」的後面,點選後,選擇「HTML/JavaScript」,然後插入下面程式碼:

  <script>
//<![CDATA[
/* Add GitHub Ribbons */
(function(options) {
  var el, href, pos;

  if (location.pathname==='/') {
    href = options.home;
  }
  else {
    el = document.querySelector('*[data-forkme]');
    if (el) {
      href = el.getAttribute('data-forkme');
    }
  }
  pos = options.position || 'right';
  if (href) {
    el = document.createElement('div');
    el.innerHTML = '<a href="' + href + '"><img style="display: block; position: fixed; top: 0; ' + pos + ': 0; border: 0; background:none; border-radius:0; box-shadow:none; padding:0; z-index: 9999;" src="' + options.src + '" alt="Fork me on GitHub" data-canonical-src="' + options.canonicalSrc + '"></a>';
    el.style.cssText = 'padding:0; margin:0; background-color:none;';
    document.body.appendChild(el);
  }
})({
  home: 'https://github.com/amobiz',
  src: 'https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67',
  canonicalSrc: 'https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png',
  position: 'right'
});
//]]>
</script>

記得將最後面的 home 改為你自己的 GitHub 的個人頁面,並且分別填入剛剛抄下的 srcdata-canonical-srcsrccanonicalSrc 屬性中。彩帶預設放在右邊,如果挑選的彩帶必須放在左邊,則要加上 position: 'left' 屬性。

這樣設定之後,在部落格的首頁就會出現「Fork me on GitHub」的彩帶,點擊後會連到你的 GitHub 個人首頁。

預設在文章中不顯示彩帶。若要在文章中連到個人首頁或特定的專案,只要在文章的任意 HTML 標籤中,埋入 data-forkme 屬性,即可顯示彩帶:

  <div data-forkme="https://github.com/amobiz/lazy-umd.js"></div>

2014年9月20日 星期六

Lazy-umd.js - 懶人 UMD (Universal Module Definition)

最近在整理過去寫的程式庫,想要統一支援 script loader,同時又很貪心地想要:

1.同時支援 AMD(RequireJS)、CommonJS(node.js) 及 browser,解決不同語法差異。
2.模組套用時,避免修改 script loader 程式碼的需要。

研究了一下,發現 Addy Osmani 已經寫了 UMD。UMD 可以滿足第一點,但是應該是為了避免 script loader 程式碼擁腫,所以套用的時候,一定要修改 script loader 的部分。所以我自己整理出兩種做法,放在 GitHub 供大家參考:

2014年8月5日 星期二

為什麼我要開發 Regular Expression Generator - RegexGen.js

RegexGen.js is a JavaScript Regular Expression Generator that helps to construct complex regular expressions.

如同我在 Regular Expression 學習筆記 所說明的:「學習 regular expression 的關鍵,不在於記憶簡寫符號,而是對引擎匹配原理的掌握。」最佳的 regular expression 學習方法,就是先學習正則引擎的匹配原理。想要快速查閱重點的話,可以參考前三篇學習筆記: (1), (2), (3),如果有充足的時間的話,當然還是建議詳閱 Mastering Regular Expressions 這本書。

然而,畢竟正則表達式的語法相當緊湊,想要一眼看懂複雜的表達式,幾乎是不可能的。首先必須熟悉正則表達式的 meta-character (元字元),然後一步一步拆解。雖然有 RegexBuddy 這樣的軟體可以幫忙拆解,但即使能正確的拆解,也可能無法了解作者 (通常是自己) 原本的思考邏輯,或者要避免的問題。

2014年7月4日 星期五

Open Sourced my JavaScript Regular Expression Generator - RegexGen.js

Hi there, I've open-sourced my new library, RegexGen.js, a JavaScript regular expression generator, please give it a try. Comments and issue reports are welcome. Thank you!

RegexGen.js - JavaScript Regular Expression Generator

RegexGen.js is a JavaScript Regular Expression Generator that helps to construct complex regular expressions, inspired by JSVerbalExpressions.

RegexGen.js is basically designed for people who know how the regular expression engine works, but not working with it regularly, i.e., they know how to make the regex works but may not remember every meta-characters that constructs the regex.

RegexGen.js helps people don't have to remember: meta-characters, shortcuts, what characters to escape and tricks about corner cases.

RegexGen.js helps reusing regex patterns. (checkout the [Matching an IP Address] example bellow.)

The Problems

RegexGen.js try to ease two problems.

  1. While creating a regular expression, it's hard to remember the correct syntax and what characters to escape.
  2. After done creating a regular expression, it's hard to read and remember what the regex do.

The Goals

RegexGen.js is designed to achieve the following goals.

  1. The written codes should be easy to read and easy to understand.
  2. The generated code should be as compact as possible, e.g., no redundant brackets and parentheses.
  3. No more character escaping reguired (except '\', or if you use regex overwrite.)
  4. If the generated code is not good enougth, bad parts can be easily replaced directly in the written codes.

Getting Started

The generator is exported as a regexGen() function.

To generate a regular expression, pass sub-expressions as parameters to the regexGen() function.

Sub-expressions as parameters which are separated by comma are concatenated together to form the whole regular expression.

Sub-expressions can either be a string, a number, a RegExp object, or any values generated by the owned functions of the regexGen() function object, i.e., the regex-generator() as the following informal BNF syntax.

Strings passed into the regexGen(), the text(), the maybe(), the anyCharOf() and the anyCharBut() functions, are always escaped as necessary, so you don't have to worry about which characters to escape.

The result of calling the regexGen() function is a RegExp object.

The basic usage can be expressed as the following informal BNF syntax.

  
RegExp object = regexGen( sub-expression [, sub-expression ...] [, modifier ...] )

sub-expression ::= string | number | RegExp object | term

term ::= regex-generator() [.term-quantifier()] [.term-lookahead()]

regex-generator() ::= regexGen.startOfLine() | regexGen.endOfLine()
    | regexGen.wordBoundary() | regexGen.nonWordBoundary()
    | regexGen.text() | regexGen.maybe() | regexGen.anyChar() | regexGen.anyCharOf() | regexGen.anyCharBut()
    | regexGen.either() | regexGen.group() | regexGen.capture() | regexGen.sameAs()
    | regex() | ... (see regexGen.js for all termGenerator()s.)

term-quantifier() ::= .term-quantifier-generator() [.term-quantifier-modifier()]

term-quantifier-generator() ::= term.any() | term.many() | term.maybe() | term.repeat() | term.multiple()

term-quantifier-modifier() ::= term.greedy() | term.lazy() | term.reluctant()

term-lookahead() ::= term.contains() | term.notContains() | term.followedBy() | term.notFollowedBy()

modifier ::= regexGen.ignoreCase() | regexGen.searchAll() | regexGen.searchMultiLine()

Please check out regexgen.js and wiki for API documentations, and check out test.js for more examples.