2018年10月前端開發者乾貨大合集
和其他的行業不同,網頁的設計開發正處於一個極度快速的發展階段,幾乎每天都會誕生一些新的工具、方法和框架,以迎合目前整個行業的需求。
今天的前端乾貨合集就是在這樣的語境下誕生的,其中許多工具正是為了當下的網頁設計和開發而準備的。最新的PHP框架,符合 W3C 可訪問性標準的配色工具,新鮮出爐的 Vue.js 擴充套件等等。接下來我們看看這次的合集裡面都包含了哪些素材吧。
ofollow,noindex">Keyframes App
這是基於Web 的應用程式,提供了頗為不俗的 GUI元件來幫你製作 CSS 動畫,在時間軸等元件的加持之下,讓動畫更加視覺化地製作出來。由於 CSS 關鍵幀並不是整個製作過程中最難的部分,這也催生了這款 Keyframes APP。
Symfony Panther
Symfony Panther 是一款頗為驚人的 PHP 框架,用來執行 E2E (端到端)測試。它內建了Web 伺服器,利用計算機中所安裝的 Chrome 瀏覽器來執行 E2E 測試。此外,它還支援 JavaScript,能截圖,可以自定義 Selenium 驅動程式,支援 Chrome 和 Firefox 客戶端。
TrendyPalettes
TrendyPalettes 提供數以千計的配色方案,這些手工挑選出來的精緻配色素質非常高。你可有直接在 TrendyPalettes 中選取配色,還可以安裝 Chrome 外掛,更加便捷地呼叫它的功能。
Eagle.js
Eagle.js 是一個用來基於 Vue.js 的的框架,它可以用來建立和定製輪播圖元件。這個框架支援鍵盤和滑鼠導航,自定義樣式、主題以及各種互動小元件。它是 Reveal.js 的良好替代品,如果你熟悉 Vue.js,上手就更快了。
Grape.js
GrapeJS 是一個開源的 Web 構建器,藉助它你可以通過託拽快速構建 Web 頁面。它提供了最為常見的元件,包括文字框、圖片、視訊、分欄、地圖、引用等等。你可以將創建出來的東西最終匯出為 HTML 和 CSS 程式碼,輸出的程式碼非常簡潔。
Vapid
Vapid 是一個使用Node.js 來構建的全新的CMS(內容管理系統),它非常有趣,且足夠獨特。絕大多數的CMS系統,會將預設好的內容元件放置到儀表盤當中,但是 Vapid 則不同,你可以進行完全的自定義,並且最終生成到儀表盤區域當中。
WP CLI Notification
WP CLI Notification 這個名字足以說明這款工具的屬性,它是一個自定義的 WP-CLI 程式包,執行完畢之後會顯示系統通知,效果非常帶感。
CSSGr.id
CSSGr.id 是一款基於 Web 的應用程式,用來幫你生成 CSS 柵格。你可以輕鬆配置柵格的行列數目,每個專案支架你的距離和範圍都可以進行輕鬆定義,並且輸出 HTML 和 CSS 程式碼。
Scroll Hint
ScrollHint 是一個 JS 庫,它可以幫你在頁面或者元件頂部生成說明,標示出這個元件是否可以滾動。如果你的網頁中有橫向滾動的元素,那麼它會非常有用。因為絕大多數的使用者會下意識地左右滾動。
PristineJS
PristineJS 是一個進行輸入內容驗證的JavaScript 庫。 HTML5 當中附帶了一些型別驗證,諸如 type = email 以及 type = number 等,都是這樣的型別驗證。在沒有 HTML5 型別驗證的地方,PristineJS 這樣的元件就會發揮作用。
SelectionJS
絕大多數的使用者可能已經熟知了如何在電腦中選中多個檔案或者資料夾,但是在網頁當中,有的時候並不具備類似的選中、託拽、移動的操作,這個時候可以藉助 SelectionJS 這樣的元件來幫你實現類似的選中、移動的功能。
Webdash
Webdash 是一個可以將專案現實到 GUI 介面中的工具。它通過計算機中的package.json 檔案來連線,因此,它可以現實 NPM 包的列表、更新包、註冊的指令碼、執行的指令碼,甚至可以直接從 Webdash 預覽 Readme 文件,非常棒!
CanJS
CanJS 是一個用來構建 Web 介面的 JavaScript 框架。它類似於添加了附加功能的 React.js,並且具有上手即用的路由、DOM Utilities 和 AJAX 功能。目前 CanJS 有著非常完善的社群支援。
CheerioJS
CheerioJS 是一個用於伺服器端的 JS 庫,結合jQuery 核心規範用來實現 DOM 。如果你使用 Node.js 還喜歡使用 addClass(),attr() 和 find() 的話,那麼它絕對是為你所準備的。
Colorbox
Colorbox 是 Lyft 所推出的配色工具,其生成的配色方案擁有著良好的可訪問性,藉助智慧的演算法,生成更合理的配色。
Typed Properties in PHP 7.4
正如同我們在上一期中所提到的,PHP 7.3 即將釋出,而PHP 7.4 也已經在計劃中了。在諸多的新特性中,最引人注意的是 Typed Property 這一功能。有了它就意味著開發者能夠在PHP類中編寫出類似 public int $id; 的程式碼,這絕對是一個巨大的變化。
StencilJS
Stencil 是一個JavaScript 編譯器,能夠輕鬆建立具有最新標準的 Web元件,最重要的是,StencilJS 還加入了一些現代的Web開發方法,包括 JSX支援,反應性、路由和外掛狀態管理等功能。
Vue Infinite Loading
Vue Infinite Loading 是一個用來建立無限滾動頁面的 Vue 擴充套件,它非常適合移動端裝置,相容任何可滾動的元素,還支援兩個不同的滾動方向,幫助開發者節省大量的時間。
V Clipboard
V Clipboard 是一款 Vue.js 外掛,可以輕鬆地建立「複製」按鈕,開發者只需要在按鈕上新增 v-clipboard 屬性就可以。
Vue Select
Vue Select 同樣是 Vue.js 元件,提供與 Select2類似的功能,它專門為 Vue.js 所設計,可以與 Vuex、Custom Templating 以及其他的 Vue.js 衍生品聯動。