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

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

Keyframes App

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

Symfony Panther

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

TrendyPalettes

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

Eagle.js

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

Grape.js

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

Vapid

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

WP CLI Notification

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

CSSGr.id

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

Scroll Hint

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

PristineJS

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

SelectionJS

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

Webdash

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

CanJS

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

CheerioJS

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

Colorbox

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

Typed Properties in PHP 7.4

正如同我們?cè)谏弦黄谥兴岬降?，PHP 7.3 即將發(fā)布，而PHP 7.4 也已經(jīng)在計(jì)劃中了。在諸多的新特性中，最引人注意的是 Typed Property 這一功能。有了它就意味著開發(fā)者能夠在PHP類中編寫出類似 public int $id; 的代碼，這絕對(duì)是一個(gè)巨大的變化。

StencilJS

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

Vue Infinite Loading

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

V Clipboard

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

Vue Select

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

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