Tag: plugin

Sublime Text: Slugify Plugin

Posted by – November 8, 2014

之前曾經寫過將文字轉換成 slug 形式的方法和用途。最近在要將一些程式碼中的文字改成 slug,但是要一段一段 copy 出來改也太麻煩了,身為一個懶墮的工程師,想當然會找一下有沒有 Sublime Text 用的轉換工具。

果不其然,已經有人寫出來了,這個名為 Slugify 的套件。

Slugify readme.md

這個名字有點可愛的套件,用法也很簡單,用 Sublime Text 的 Package Control 安裝即可。

sublime_text_2_install_slugify

使用方式是將要轉換成 slug 的文字選取起來,按下 shift + command + p,輸入 slugify,Enter。接下方會出現輸入框,詢問要使用的連字符號,預設是橫線 (-),有需要也可以換成底線 (_)。

sublime_text_2_using_slugify

很方便哦。要注意的是如果轉換的文字中包含中文與符號,轉換後可能會出現符號沒有刪除乾淨的小 bug。

Bookmark: Photoshop Plugin Logn Shadow Generator

Posted by – October 11, 2013

近來因為 Flat Design 的流行,flat 風格常出現的元素也開始被重視,其中長長的斜 45 度陰影便是其中之一。這個 Photoshop plugin 可以方便地製作出長陰影的效果。

Photoshop plugin Logn Shadow Generator

http://lab.rayps.com/lsg/

Bookmark: Jcrop

Posted by – September 12, 2013

最近一個專案需求,要讓使用者可以在網站上選取照片、裁切,然後做為相簿封面。最重要的是前台讓使用者操作的畫面必須簡單好用,一樣是來自同事推薦的 jQuery 套件 Jcrop。可以簡單地呼叫出裁切畫面,設定與事件都很容易使用。

完成裁切後,呼叫 Jcrop 回傳座標,Ajax 傳回主機,接著我用 PHP image-moo 套件完成實際的影像處理,再把圖片回傳前端,使用者就能看到一張即時的封面圖片了,相當簡便。

Jcrop landing page

Use Click to Play in Firefox to Enhance Security and Performance

Posted by – June 4, 2013

Firefox 從 14 版開始導入了名為 "Click to Play" 的安全機制。這個機制預設停用網頁上所有的外掛 (plug-ins),需由使用者手動執行外掛。這麼做的好處主要有兩個,一是節省記憶體,如果你跟我一樣常在瀏覽器開一堆頁面的話,瀏覽器光是 Flash Player 可能就佔掉數 GB 的記憶體。第二個好處是減少被惡意攻擊的機會,不論是 Flash Player 或是 Java VM 都有許多安全漏洞,可能被有心人士用作攻擊的管道,預設關掉就比較不用擔心了。

不過 Firefox 雖然有些機制,但沒啟動它,需由使用者手動開啟。這個選項也不存在 Firefox Preference 裡.... 不曉得開發團隊為什麼不直接做個開關就好了

More

WordPress: Function add_user_to_blog() Can Not Specify Blog

Posted by – November 30, 2011

最近在開發 WordPress Network 的 plugin,其中有一功能是讓使用者取得特定部落格的特定身分。翻找了 WordPress CODEX,找到了 add_user_to_blog() 這個 function。

More

WordPress: Fix Syntax Highlighter MT Vertical Scrollbars in Chrome/Webkit/Opera

Posted by – September 21, 2011

本部落格有裝了一個 WordPress plugin: Syntax Highligter MT,用來顯示程式碼片段,效果很好。不過自從某次更新後,在 Chrome 和 Opera 瀏覽器裡卻會出現垂直的捲軸,這並不影響使用,但是明明沒有多餘的內容要顯示,卻硬生生多了 scrollbar,實在是有礙觀瞻。

More

jQuery Validation plugin: How to Use Regex as Rule?

Posted by – September 2, 2011

在網頁程式中,表單的處理一直是很繁瑣的一環,client 端要用 Javascript 先對使用者的輸入進行初步過濾,資料送到了 server 端還是要再過濾一次。「永遠不要信任使用者輸入的資料」是表單程式的準則。

為了網站的安全不可少的 SOP,結果便是程式設計師要為此付出許多時間撰寫過濾程式。為了減緩程式設計師的腦細胞死亡速度,借助第三方程式的功能也是很重要的課題。在網頁前端常會用 jQuery Validation plugin 來對使用者輸入的資料進行前處理,這個套件內建一些基本規則,像是必填 (required)、電子郵件 (email)、網址 (url)、數字 (digits) 等等,但偶爾還是需要自訂特殊規則。

還好 jQuery 這個套件提供開放的接口可以自訂功能,透過簡單的幾行程式就能用正規表達式 (regular expression, regex) 來指定規則。

// 建立名為 'regex' 的自訂規則
$.validator.addMethod("regex", function(value, element, param) {
     // 強制加上 ^ 與 $ 符號限制整串文字都要符合
     return value.match(new RegExp("^" + param + "$"));
});

$("#myForm").validate({
    rules: {// 定義規則
        username : {
            required: true,
            regex   : "[A-Za-z0-9]+" // 寫法請參考 Regex
        },
        onlyUppercase: {
            required: true,
            regex   : "[A-Z]+"
        }
    },
    messages: {// 自定訊息
        username : {
            required: '必填',
            regex   : '只能使用英數字'
        },
        onlyUppercase : {
            required: '必填',
            regex   : '只能使用大寫英文字母'
        }
    }
});

如此一來便能自行撰寫 regex 來設定各種進階規則以及提示文字了,即使是有多組規則也沒問題。

關於正規表達式的使用方法,請參考 石頭閒語: Regular Expression (RegExp) in JavaScript