每一個可以努力的日子,都是一份厚禮。
JavaScript
使用 GitHub / GitLab 的 Webhooks 進行網站自動化部署
2015 1月 19th
老早就想寫這個話題了,今天正好有機會研究了一下 git 的自動化部署。最終做到的效果就是,每當有新的 commit push 到 master 分支的時候,就自動在測試/生產服務器上進行 git pull 拉取最新的代碼,免去了程序猿兼職運維 ssh 上去拉代碼部署的重複性工作。我們也要 Agile development 不是?什麼敏捷開發啊,極限編程啊,快速迭代啊,持續集成啊,精益創業啊,口號怎麼高端怎麼來,最後就是寫了個自動化腳本……
Firefox 版 Unblock Youku 插件終於發布啦!
2014 3月 19th
廣受信賴深受好評的 Chrome 瀏覽器擴展 Unblock Youku 目前已經擁有 230 萬用戶了。港澳台同胞、海外留學生、華僑華人們紛紛表示:“能看國內視頻網站實在太給力了”,“追劇讓生活煥發了生機”,“沒有 Unblock Youku 簡直活不下去”……
但是這麼好用的插件卻只能在 Chrome 下使用,我習慣的 Firefox 瀏覽器有沒有類似功能的插件捏?於是,在用戶的翹首期盼千呼萬喚下,Unblock Youku 終於被移植到 Firefox 瀏覽器啦!!(火狐黨鼓掌撒花~~)
Unblock Youku 在 Chrome Web Store 下架
2013 11月 23rd
Update:
修改描述並重新提交後,Unblock Youku 終於通過審核在 Chrome 官方應用商店重新上架。請之前下載 crx 文件安裝過臨時的版本的同學先卸載臨時版本,再安裝新版,以獲取自動更新功能以及解鎖更多網站。
- 打開 chrome://extensions 頁面,卸載掉之前安裝的 Unblock Youku
- 去 Chrome Web Store 直接安裝正式的版本,地址為 http://uku.im/chrome
以下內容為歷史記錄。
AngularJS 全局消息通告 service
2013 10月 15th
在 AngularJS 中,Controller 之間可以共用的代碼我們通常抽出來寫成一個 Service。全局 Alert 消息系統就是一個很好的例子,比如“用戶註冊成功”、“添加商品成功”,每個 Controller 都有機會發出通告,這一部分功能應該寫成獨立模塊。
Angular-UI Bootstrap 項目提供了一系列的模塊,將 Bootstrap 中的 component 轉換為原生的 Angular directives,如果你正在同時使用 Bootstrap 和 AngularJS,那麼強烈建議你使用它。
深入理解 AngularJS 的 Scope
2013 7月 28th
AngularJS 最佳實踐
2013 7月 1st
AngularJS 是一個 Web 應用框架,它實現了前端的 MVC 架構,能讓開發人員很方便地實現業務邏輯。
舉個栗子,要做到下面的效果,以前可能需要寫一連串的 JavaScript 代碼綁定 N 多事件。而使用 AngularJS 框架,一句 JavaScript 都不用寫就能實現了,神奇吧?查看演示。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <div data-ng-app> 單價: <input type="number" min=0 ng-model="price" ng-init="price = 299"> <br> 數量: <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"> <br> 總價: {{ quantity * price }} </div> |
這得益於 AngularJS 中的雙向數據綁定特性(Two Way Data-Binding),將 Model 和 View 自動關聯了起來,在更複雜的業務場景下,還有代碼分離的好處,將 DOM 操作和應用邏輯解耦,非常實用。
基於 RESTful 接口的前端 MVC 架構
2013 6月 7th
寫一個 jQuery 插件
2013 1月 6th
工作中發現,我的很多時間都在為前端頁面交互編寫 JavaScript 代碼。相比較而言,由於有 MVC 框架的各種約定,後端的 PHP 代碼寫起來顯得比 JavaScript 要優雅很多。雖然也有 jQuery 這樣的利器(得益於良好的跨瀏覽器兼容特性和簡潔的使用接口,jQuery 幾乎已經成了 JavaScript 的代名詞),但我用到的只是它的選擇器,以及別人寫的一些插件而已。我深知要透徹地理解一門語言,就應該去用它做一個小項目,帶着目標學習需用到的東西才能有的放矢。正好遇到一個交互需求找不到已有解決方案,於是摒棄以前那樣簡單粗暴的寫 js 代碼,我決定自己實現一個 jQuery 插件來搞定它。
Chosen:用戶友好的 select 下拉框列表組件
2012 11月 22nd
用戶體驗真是一門很深的學問。為了讓網頁用起來更方便舒服,很多時候我們都要花費額外的功夫去做原生 HTML 組件無法完成的效果。
比如 <select>
標籤,默認情況下它會在瀏覽器顯示一個下拉選擇框。當選擇項過多的時候,比如下面“選擇國家”的例子(全世界有 200 多個國家),下拉框會很長,並且會出現滾動條,用戶不得不去滾動鼠標費力尋找自己需要的選項,這無形間就造成了操作阻礙。很明顯,下面右圖的方式通過一個搜索輸入框,簡化了尋找的過程,極大方便了用戶,提升了體驗。
轉換 HTML 與 PDF 格式文檔的神器
2012 10月 31st
企業 Web 項目開發中經常會有生產 PDF 格式文檔的需求,例如 PDF 賬單下載,月末生成各種統計報表等等。我們要幫助企業實現自動化,也就是說無需人工干預,程序能夠按需從 DB 中拿數據自主生成。
項目使用 PHP 開發,於是調研了一下 PHP 的 PDF 類庫,有 dompdf,TCPDF 之流,總的來說,各個項目主頁上自誇的成分居多,基本思想都是類似的,即先用 HTML 寫一個模板,每次往模板里填上數據,就可以轉成 PDF 輸出。但真正用起來就會發現各種毛病各種坑爹,部分 CSS 屬性不支持啦,中文亂碼啦,諸如此類。最終讓我們拋棄 dompdf 的貌似是分頁的一個大坑,據說一個表格 <table> 標籤在跨頁的情況下,dompdf 就直接崩潰了……