這個(gè)月我們已經(jīng)為設(shè)計(jì)師專(zhuān)門(mén)推送了不少設(shè)計(jì)工具了，而這個(gè)合集是專(zhuān)門(mén)給前端開(kāi)發(fā)同學(xué)所準(zhǔn)備的素材和工具合集。其中包含有各種代碼合集、開(kāi)發(fā)框架，有的是 React 拓展，還有一些基于 PHP 的應(yīng)用程序。除了非常實(shí)用、面向生產(chǎn)的實(shí)用工具之外，還有懷舊向的 CSS 庫(kù)，還有幫你提升開(kāi)發(fā)和設(shè)計(jì)技能的學(xué)習(xí)資料。
近期其他干貨：
《2019年11月設(shè)計(jì)圈超實(shí)用干貨大合集》
《不學(xué)代碼如何實(shí)現(xiàn)功能？28款最新設(shè)計(jì)工具合集，快來(lái)看看吧！》
《圖庫(kù)樣機(jī)神器應(yīng)有盡有！11 月份精選設(shè)計(jì)干貨大合集》
下面是完整的推薦內(nèi)容：
FreeForDev 是一個(gè)令人驚艷的免費(fèi)服務(wù)列表，列表中匯集的內(nèi)容范圍很廣，包括云服務(wù)供應(yīng)商、Web 托管、源代碼回購(gòu)、代碼質(zhì)量服務(wù)等等。我敢肯定，許多做開(kāi)發(fā)同學(xué)會(huì)發(fā)現(xiàn)它們非常有用，特別是在預(yù)算有限的情況下。
TinaCMS 是一個(gè)新的內(nèi)容管理系統(tǒng)，它是基于如今最閃亮的堆棧服務(wù) React、Gatsby、Next.js。這套內(nèi)容管理系統(tǒng)可以輕松管理文本、圖片、日期、配色等多種字段。如果你不喜歡 React.js，那么你還可以使用 Vue.js、Gridsome 和 Nuxt.js 。
正如同這個(gè)工具的名字所暗示的，它是 Laravel 和 Vue.js 構(gòu)建單頁(yè)應(yīng)用（SPA）的一個(gè)框架，它可以和 Laravel 6.0 一起使用，Laravel 6.0 是最新的版本，還帶有 Socialite，讓你可以將 Twitter 和 Github 等網(wǎng)站服務(wù)集成到一起。
BookStackAPP 同樣是一個(gè)自托管的 CMS 系統(tǒng)，用來(lái)組織和存儲(chǔ)信息，這是一個(gè)發(fā)布文檔、注釋或者制作 Wiki 的理想平臺(tái)。它是免費(fèi)的，代碼開(kāi)源，使用 Laravel 構(gòu)建，可以完全自定義，你也可以使用最低5美元的 DigitalOcean VPS 來(lái)托管它。
這是一個(gè)自托管的內(nèi)容管理系統(tǒng)，用來(lái)讀取 RSS 源。它對(duì)于 PHP 環(huán)境的要求非常低，F(xiàn)reshRSS 是 Feedly 的良好替代品，使用它你可以自行存儲(chǔ)所有的數(shù)據(jù)，你可以選擇托管在一些便宜的 Web 服務(wù)商那里，也可以安裝在具有 MAMP 或者 WAMP 的本地主機(jī)當(dāng)中。
NES.css 是一套用于構(gòu)建任天堂8位復(fù)古風(fēng)格的UI組件的框架，其中包含各種不同的組件樣式，包括按鈕、表單和輸入。
這是一套用來(lái)檢查域注冊(cè)的命令行實(shí)用工具。它的執(zhí)行速度很快，和基于網(wǎng)絡(luò)的 Whois 網(wǎng)站檢測(cè)工具相比，它更加便捷，沒(méi)有彈出廣告和 Captcha 驗(yàn)證。
Protractor 是一個(gè) 專(zhuān)門(mén)為 Angluar 和 AngularJS 類(lèi)應(yīng)用所構(gòu)建的端到端測(cè)試框架。在它幫助下，你可以在真實(shí)的的瀏覽器中運(yùn)行一系列的測(cè)試，并且像普通用戶(hù)一樣同應(yīng)用進(jìn)行交互，確保 Angular 應(yīng)用能夠按照預(yù)期一樣運(yùn)行。
Sortable 是一個(gè) JavaScript 庫(kù)，可以用來(lái)創(chuàng)建課排序的界面。它是使用純粹的 JavaScirpt 來(lái)構(gòu)建的，沒(méi)有附加任何額外的依賴(lài)庫(kù)，這讓它可以無(wú)縫集成到其他的各種框架當(dāng)中，比如 React.js 和 Vue.js。
TSDX 是為了改善開(kāi)發(fā)過(guò)程中 TypeScript 項(xiàng)目中開(kāi)發(fā)人員體驗(yàn)而創(chuàng)建的項(xiàng)目。你只需要啟動(dòng)它就可以立即在項(xiàng)目當(dāng)中使用，而無(wú)需設(shè)置 TypeScript、Rollup 或者 Jest 等其他配置。
這是 2019 年 JAMStack Conf 視頻的合集，這其中包含很多精彩的演講，以及當(dāng)下網(wǎng)絡(luò)行業(yè)的發(fā)展?fàn)顩r。
Bash 是我最喜歡的語(yǔ)言之一，但是我現(xiàn)在才知道，它一樣可以使用 Bats 來(lái)進(jìn)行自動(dòng)測(cè)試，與其他的編程語(yǔ)言（PHP 和 JS）一樣，自動(dòng)測(cè)試可以幫助我們確保整個(gè)程序按照預(yù)期來(lái)運(yùn)行。
這是一個(gè)用于 React.js 的 JavaScirpt 庫(kù)，可以用來(lái)構(gòu)建一致可用的定制化 UI 界面。
Rough Charts 是一個(gè) React.js 組件，它可以用來(lái)繪制粗略的圖表。這是一個(gè)響應(yīng)式的組件，支持多中不同的常見(jiàn)圖表類(lèi)型，包括餅狀圖、條形圖和折線(xiàn)圖等。
Butter Cake 是一個(gè)基于 CSS Flexbox 的現(xiàn)代CSS框架，它自帶許多預(yù)定義的 UI 組件，比如 按鈕、輪播圖、面包屑、導(dǎo)航、表單等等。
如果使用 ElasticSearch 并且想構(gòu)建一致的UI搜索頁(yè)面，那么可以試試 Reactive Search。這套組件包含有建議搜索列表，以及搜索過(guò)濾器，你可以結(jié)合 React.js、Vue.js 和 React Native 一起使用。
這是一個(gè)使用 Styled System 構(gòu)建的 React 組件合集，常用的組件都包含其中，比如 按鈕、標(biāo)題、表單等常用的樣式。Styled System 讓你可以更加深度地定義 React 當(dāng)中組件的屬性，讓自定義設(shè)計(jì)更容易實(shí)現(xiàn)，也更加統(tǒng)一。
這是一個(gè)用于 React.js 的 UI 組件沙盒。你可以隔離并呈現(xiàn) UI 組件，用來(lái)測(cè)試每個(gè) UI 組件的屬性，與之交互，看它在不同視圖下不同大小和細(xì)節(jié)。
ProgressBar 是一個(gè) JavaScript 庫(kù)，讓你可以更加便捷快速地創(chuàng)建精美的進(jìn)度條，你可以在其中找到經(jīng)典的直線(xiàn)進(jìn)度條，也可以生成心型或者其他造型的形狀。
這是一個(gè)用來(lái)編寫(xiě) CSS-in-JS 的 JavaScript 庫(kù)的工具。Treat 的運(yùn)作機(jī)制和其他的 CSS-in-JS 略有不同，它在構(gòu)建的時(shí)候就直接編譯 CSS，而不是到瀏覽器當(dāng)中再實(shí)時(shí)編譯，因此從某種意義上上來(lái)說(shuō)，它在技術(shù)上更加類(lèi)似于 CSS 預(yù)處理器，比如Sass 和 LESS。
如果上面這些前端干貨沒(méi)有你想要的，可以看看近期的其他的設(shè)計(jì)類(lèi)的干貨：
《2019年11月設(shè)計(jì)圈超實(shí)用干貨大合集》
《不學(xué)代碼如何實(shí)現(xiàn)功能？28款最新設(shè)計(jì)工具合集，快來(lái)看看吧！》
《圖庫(kù)樣機(jī)神器應(yīng)有盡有！11 月份精選設(shè)計(jì)干貨大合集》
復(fù)制本文鏈接 文章為作者獨(dú)立觀(guān)點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話(huà)題
發(fā)評(píng)論！每天贏(yíng)獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 753 位幸運(yùn)星
發(fā)表評(píng)論 為下方 1 條評(píng)論點(diǎn)贊，解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓