2017年10月超實用前端乾貨大合集

對於前端而言,快速發展的技術,逐步更新的工具,對於實際開發工作而言,有著巨大的影響。服務框架的小改進可能會讓整個開發速度上一個台階,新工具的誕生,可能會讓某個環節進度更為迅速。諸如微軟、蘋果、谷歌這樣的大型企業都為基礎的開發工具和編程語言添磚加瓦,從根本上一點點改變我們今天所面對的整個數字世界。在這一期的前端乾貨當中,我們會看到很多基礎服務和工具的轉變與提升,一些看起來並不顯著的提升,都是向著未來前進的契機。接下來我們一起來看看這次的乾貨都有哪些吧。

Essential Image Optimization

 

這是一篇由 Addy Osmani 所撰寫的關於網頁圖片優化和處理的文章,內容極為詳盡,涵蓋了主要的技術和背後所涵蓋的科學知識,此外還推薦幾款頗為實用的工具。

PHP 7.2

 

這是關於全新的 PHP 7.2 的參考手冊。其中除了介紹了新增的PHP 程序的性能變化和功能更新之外,還對已經被廢除的舊的特性進行了明確的說明。在 PHP 7.2 當中,有兩個函數將會被飛起,即create_function() 和 __autoload(),如果你是開發人員請務必注意這一點。比如許多Wordpress 插件都使用了這兩個函數,如果更新了PHP 7.2,會導致這些插件失效。請注意。

Web Share API

 

說實話我真沒有想到,真有人會開發這個API。我們在網路上的行為,分享佔據了一大半,而借助這個API,開發人員可以更輕鬆地構建分享服務,尤其是在移動端平台上。這款API 目前僅僅適用於 Google Chrome 的桌面端和Android版,隨後應該會逐漸擴展開來。

Image Async Attribute

 

這是影響到網頁技術發展的另一革新,img 元素的 async 屬性。這篇文章涵蓋了圖片非同步載入的方法以及牽涉到 JavaScript 的一些小技巧。

Firefox Quantum

 

Mozilla 一直致力於 Firefox 瀏覽器的更新,而今天我們看到的代號為 Project Quantum 無疑意味著火狐瀏覽器的下一個更新。Firefox Quantum 中包含了一個名名為 Quantum CSS 的全新的CSS渲染引擎,全新的UI和新的DevTools。

MS Edge for iOS and Android

 

微軟剛剛宣布,自家的Edge 瀏覽器發布了Android 和 iOS版本,這意味著你又多了一個可供測試網站的移動端瀏覽器。

Gutenberg

 

這個名為Gutenberg 的項目源於 WordPress,這個項目中開發人員使用 Javascript 寫了幾乎完整的 WordPress 編輯器。Gutenberg 目前是使用 React 編寫的,項目組正在考慮使用另外一個框架來進行編寫,比如 Preact 或者 Vue。

FoitFout

 

FoitFout 是一款非常方便的工具,用來對比名為 FOIT和FOUT 兩種方法,以便在網頁中載入自定義字體。使用這一工具能夠幫你更好地確定你的網站適合哪種方法。

Vuera

 

Vuera 是一款 JS 庫,讓你可以同時使用 Vue 和 React,簡而言之 就是在Vue中使用 React 組件,在React 中使用 Vue 組件。

Draggable

 

Draggable是一個來自 Shopify 的有趣的庫,它是建立在一個支持瀏覽器內托拽的API之上的,你可以將它輕鬆地應用到其他的地方,甚至可以編寫自定義的模塊對它進行拓展。

FlowchartJS

 

顧名思義,FlowshartJS是一個用來構建類似PPT中流程度的JS庫,在它的基礎上,你可以創建各種形狀的圖形。

FrontEnd Checklist

 

這個用來構建HTML頁面的清單是根據多年的經驗總結出來的。這個清單涵蓋了網頁設計的一些基本的策略和技巧,比如頁頭,CSS,JS,可訪問性和SEO等。

QuickBill

 

這是一個用來創建發票的輕量級的Web應用。

Mocka

 

Mocka是一個創建網站原型的時候用來生成內容佔位符的工具,它只有500位元組,但是功能很完善,你可以通過Sass mixin 輕鬆地將它納入到你的CSS文件當中。為了創建不同的多媒體佔位符,它提供了許多CSS類。

VueStar

 

VueStar 是一個Vue 組件用來生成圖標閃爍的效果,類似Twitter 點贊時候的特效。

Grid Playground

 

Grid Playground 是一個源自於 Mozilla 的計劃,用來測試並推廣 CSS Grid,即使是Firefox 的新的DevTools 當中都包含了相應的柵格布局工具。

Snippet Manager

 

Snippet Manager 是一個用來儲存和管理代碼的簡單應用。

IBM Plex

 

這是IBM 所設計的全新的字體系列,名為IBM Plex,目前已經被納入到IBM自身的風格指南當中,其中所涵蓋的三種字體分別為為襯線體、非襯線體和等寬字體。

Tabbed Interface

 

這裡介紹了如何盡可能少的使用JS來創建漸進和良好可訪問性的標籤導航系統,對於想要了解可訪問性設計的開發人員而言,是個不錯的素材。

SwissInCSS

 

SwissinCSS 展示了如何使用純CSS來構建經典的瑞士海報設計。源代碼在 CodePen中可用。

Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化