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

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

Keyframes App

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

Symfony Panther

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

TrendyPalettes

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

Eagle.js

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

Grape.js

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

Vapid

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

WP CLI Notification

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

CSSGr.id

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

Scroll Hint

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

PristineJS

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

SelectionJS

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

Webdash

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

CanJS

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

CheerioJS

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

Colorbox

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

Typed Properties in PHP 7.4

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

StencilJS

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

Vue Infinite Loading

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

V Clipboard

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

Vue Select

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

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