和其他的行業(yè)不同，網(wǎng)頁的設(shè)計開發(fā)正處于一個極度快速的發(fā)展階段，幾乎每天都會誕生一些新的工具、方法和框架，以迎合目前整個行業(yè)的需求。

今天的前端干貨合集就是在這樣的語境下誕生的，其中許多工具正是為了當(dāng)下的網(wǎng)頁設(shè)計和開發(fā)而準(zhǔn)備的。最新的PHP框架，符合 W3C 可訪問性標(biāo)準(zhǔn)的配色工具，新鮮出爐的 Vue.js 擴(kuò)展等等。接下來我們看看這次的合集里面都包含了哪些素材吧。

Keyframes App

這是基于Web 的應(yīng)用程序，提供了頗為不俗的 GUI組件來幫你制作 CSS 動畫，在時間軸等組件的加持之下，讓動畫更加可視化地制作出來。由于 CSS 關(guān)鍵幀并不是整個制作過程中最難的部分，這也催生了這款 Keyframes APP。

Symfony Panther

Symfony Panther 是一款頗為驚人的 PHP 框架，用來執(zhí)行 E2E （端到端）測試。它內(nèi)置了Web 服務(wù)器，利用計算機(jī)中所安裝的 Chrome 瀏覽器來執(zhí)行 E2E 測試。此外，它還支持 JavaScript，能截屏，可以自定義 Selenium 驅(qū)動程序，支持 Chrome 和 Firefox 客戶端。

TrendyPalettes

TrendyPalettes 提供數(shù)以千計的配色方案，這些手工挑選出來的精致配色素質(zhì)非常高。你可有直接在 TrendyPalettes 中選取配色，還可以安裝 Chrome 插件，更加便捷地調(diào)用它的功能。

Eagle.js

Eagle.js 是一個用來基于 Vue.js 的的框架，它可以用來創(chuàng)建和定制輪播圖組件。這個框架支持鍵盤和鼠標(biāo)導(dǎo)航，自定義樣式、主題以及各種交互小組件。它是 Reveal.js 的良好替代品，如果你熟悉 Vue.js，上手就更快了。

Grape.js

GrapeJS 是一個開源的 Web 構(gòu)建器，借助它你可以通過托拽快速構(gòu)建 Web 頁面。它提供了最為常見的組件，包括文本框、圖片、視頻、分欄、地圖、引用等等。你可以將創(chuàng)建出來的東西最終導(dǎo)出為 HTML 和 CSS 代碼，輸出的代碼非常簡潔。

Vapid

Vapid 是一個使用Node.js 來構(gòu)建的全新的CMS（內(nèi)容管理系統(tǒng)），它非常有趣，且足夠獨特。絕大多數(shù)的CMS系統(tǒng)，會將預(yù)設(shè)好的內(nèi)容組件放置到儀表盤當(dāng)中，但是 Vapid 則不同，你可以進(jìn)行完全的自定義，并且最終生成到儀表盤區(qū)域當(dāng)中。

WP CLI Notification

WP CLI Notification 這個名字足以說明這款工具的屬性，它是一個自定義的 WP-CLI 程序包，執(zhí)行完畢之后會顯示系統(tǒng)通知，效果非常帶感。

CSSGr.id

CSSGr.id 是一款基于 Web 的應(yīng)用程序，用來幫你生成 CSS 柵格。你可以輕松配置柵格的行列數(shù)目，每個項目支架你的距離和范圍都可以進(jìn)行輕松定義，并且輸出 HTML 和 CSS 代碼。

Scroll Hint

ScrollHint 是一個 JS 庫，它可以幫你在頁面或者組件頂部生成說明，標(biāo)示出這個組件是否可以滾動。如果你的網(wǎng)頁中有橫向滾動的元素，那么它會非常有用。因為絕大多數(shù)的用戶會下意識地左右滾動。

PristineJS

PristineJS 是一個進(jìn)行輸入內(nèi)容驗證的JavaScript 庫。 HTML5 當(dāng)中附帶了一些類型驗證，諸如 type = email 以及 type = number 等，都是這樣的類型驗證。在沒有 HTML5 類型驗證的地方，PristineJS 這樣的組件就會發(fā)揮作用。

SelectionJS

絕大多數(shù)的用戶可能已經(jīng)熟知了如何在電腦中選中多個文件或者文件夾，但是在網(wǎng)頁當(dāng)中，有的時候并不具備類似的選中、托拽、移動的操作，這個時候可以借助 SelectionJS 這樣的組件來幫你實現(xiàn)類似的選中、移動的功能。

Webdash

Webdash 是一個可以將項目現(xiàn)實到 GUI 界面中的工具。它通過計算機(jī)中的package.json 文件來連接，因此，它可以現(xiàn)實 NPM 包的列表、更新包、注冊的腳本、運行的腳本，甚至可以直接從 Webdash 預(yù)覽 Readme 文檔，非常棒！

CanJS

CanJS 是一個用來構(gòu)建 Web 界面的 JavaScript 框架。它類似于添加了附加功能的 React.js，并且具有上手即用的路由、DOM Utilities 和 AJAX 功能。目前 CanJS 有著非常完善的社區(qū)支持。

CheerioJS

CheerioJS 是一個用于服務(wù)器端的 JS 庫，結(jié)合jQuery 核心規(guī)范用來實現(xiàn) DOM 。如果你使用 Node.js 還喜歡使用 addClass()，attr() 和 find() 的話，那么它絕對是為你所準(zhǔn)備的。

Colorbox

Colorbox 是 Lyft 所推出的配色工具，其生成的配色方案擁有著良好的可訪問性，借助智能的算法，生成更合理的配色。

Typed Properties in PHP 7.4

正如同我們在上一期中所提到的，PHP 7.3 即將發(fā)布，而PHP 7.4 也已經(jīng)在計劃中了。在諸多的新特性中，最引人注意的是 Typed Property 這一功能。有了它就意味著開發(fā)者能夠在PHP類中編寫出類似 public int $id; 的代碼，這絕對是一個巨大的變化。

StencilJS

Stencil 是一個JavaScript 編譯器，能夠輕松創(chuàng)建具有最新標(biāo)準(zhǔn)的 Web組件，最重要的是，StencilJS 還加入了一些現(xiàn)代的Web開發(fā)方法，包括 JSX支持，反應(yīng)性、路由和插件狀態(tài)管理等功能。

Vue Infinite Loading

Vue Infinite Loading 是一個用來創(chuàng)建無限滾動頁面的 Vue 擴(kuò)展，它非常適合移動端設(shè)備，兼容任何可滾動的元素，還支持兩個不同的滾動方向，幫助開發(fā)者節(jié)省大量的時間。

V Clipboard

V Clipboard 是一款 Vue.js 插件，可以輕松地創(chuàng)建「復(fù)制」按鈕，開發(fā)者只需要在按鈕上添加 v-clipboard 屬性就可以。

Vue Select

Vue Select 同樣是 Vue.js 組件，提供與 Select2類似的功能，它專門為 Vue.js 所設(shè)計，可以與 Vuex、Custom Templating 以及其他的 Vue.js 衍生品聯(lián)動。

原文：https://www.hongkiat.com/blog/designers-developers-monthly-10-2018/