Gulp 筆記:安裝、撰寫 Task、監看、例外錯誤處理和套件使用

Gulp 是一套任務管理工具,讓前端的工作能自動化處理,例如:js 和 css 最小化、瀏覽器檢視、通知、檔名變更、加入版號等等。這裡做一些簡單筆記。

gulp


T3: 構建大型網站的 JavaScript 框架

T3 是一個 JavaScript UI Framework,主要的功能是讓程式碼更結構化。如果網站內的程式碼很雜亂的話,很適合用來整理散落在各處的程式碼(尤其是針對年紀大需要翻新的大型網站)。

javascript


Hubot x Slack,製作自動回話與工作的機器人

Hubot x Slack 串接紀錄。

Slack Hubot


DNS Prefetching:預先做 DNS 解析,幫助網頁載入速度更快

預先做 DNS 解析(domain name resolution),將人類可理解的 domain name,轉為 IP address。瀏覽器載入頁面和資源時需做 DNS 解析,但若等到瀏覽該頁或要下載資源時才做 DNS 解析就太遲了(使用者需要等待一段時間),因此可預先執行。

Resource Hints 效能調校 前端效能 系列文


結構化資料之「商品」範例 - 使用 JSON-LD

假設想在搜尋結果頁上對單一商品呈現更為吸引人的 Rich Snippet 效果,例如出現星等、評論數(如下圖),就需要利用結構化資料(Structured Data)來達成。

SEO structured data rich snippets json-ld 結構化資料


jQuery 的陣列操作:$.map() 與 $.grep()

這陣子在整理系統內的程式碼,發現自己曾經使用一些過時的方法(例如:native javascript 操作陣列),而非使用 jQuery 提供的 API 來撰寫。以下整理並比較這兩種方法的差異。

jQuery javascript


三天內學會 CSS3 動畫

一直以來我對 CSS3 動畫這件事情並沒有特別專注研究(如果需要也是用 JavaScript 完成 XD),直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。

css3 animations css