2017 年 4 月:前端與設計資源集

在本月的資源合集中,我們將與大家分享有關前端與設計類的新工具、代碼片段以及酷炫的字體,這些資源能夠大大提升你的開發與設計工作效率。

這個列表中也包含了一些我很喜歡的工具,例如免費的任務管理應用程序、易用的網站構建器,以及能夠幫助你清理 GitHub 上冗餘 forks 的工具。當然,這些資源大多都是免費的。那麼,一起來 Enjoy 吧!

1. FREEPHOTOS

FreePhotos 是一個免費的創意圖片共享網站,它通過搜索引擎抓取了一些高品質、可商用的優質圖片,供大家下載使用。圖片的分類也很詳細,涉及了景觀、技術、商業、自然、幻想、人物等圖像。你可以任意下載圖片,並將它們用在你的項目上。

網站地址:【傳送門】

2. GOOGLE INVISIBLE RECAPTCHA

自 No CAPTCHA reCAPTCHA 推出以來,數以百萬的互聯網用戶只需點擊一下便可證明他們是正常的用戶,這一驗證系統被稱為無懈可擊的 CAPTCHA 。目前它正在進一步的迭代,正常的用戶將看不到「我不是機器人」複選框,而對於那些黑客和機器人程序,無疑將是個更大的挑戰。

網站地址:【傳送門】

3. GRID GARDEN

這可能是一款目前最容易讓你上癮的在線遊戲,通過編寫 CSS 代碼來挑戰 24 個胡蘿蔔花園關卡。在愉悅的互動式學習中,你會輕鬆的掌握 CSS Grid 布局。前端er, Have a try!

網站地址:【傳送門】

4. WAYBACK MACHINE DOWNLOADER

想看一看某個網站在過去是什麼樣子嗎?這個工具可以幫助你下載任何網站的任意歷史版本,而你僅需要點擊兩次就可以完成時光的穿越。

網站地址:【傳送門】

5. WEB LOAD SPEED TEST

你的網站載入速度有多快?Test load speeds 能幫助你一次性測試 6 個地區的載入速度,以確保你的網站正常的工作。

網站地址:【傳送門】

6. JSON WEB CONTAINER

JSON Web Container 是 Jasonette 框架的一個不錯的補充,你可以使用 HTML / JavaScript / CSS 將其轉換為原生組件,並可將 JSON 單個標記。

網站地址:【傳送門】

7. BURST

Burst 是一個擁有超過 1000 張圖片的高清圖庫,並且每周更新。這些圖片可以免費使用在你的項目上。

網站地址:【傳送門】

8. GORILLASTACK AWS CLOUDTRAIL LISTENER (SLACK)

GorillaStack 是專為 Slack 打造的聊天機器人。如果你使用 Amazon Web Services 的話,它會讓你的使用過程更加的便捷。你可以定製並管理實時工作流,以便在 Slack 內監控 AWS CloudTrail,而你僅需要一分鐘就可以搞定它的安裝。

網站地址:【傳送門】

9. TIPPY.JS

Tippy 是一個輕量級的純 JavaScript 工具提示庫。它具備眾多不同的交互方式,並且適用於各種常見的瀏覽器。

網站地址:【傳送門】

10. SHOUTEM

這款工具可以輕鬆的創建原生的跨平台應用程序。你只需要利用相應的模版,就能夠完成 Android 或 iOS 應用程序的創建,而無需任何的 APP 開發經驗。如果你著急趕項目,或許它是一個不錯的選擇。

網站地址:【傳送門】

11. SKETCH STARTER DESIGN TEMPLATE

打算學習 Sketch 嗎?這是一個免費的 Sketch 入門學習模版,它包含了基礎的網頁設計工具與模版的使用介紹。它將為你的 Sketch 入門學習之旅保駕護航。

網站地址:【傳送門】

12. MALINA SEAMLESS PATTERNS

這套無縫圖案為各類項目提供了完美的背景素材。圖案包含了 20 種不同的樣式,便於你應用於網頁和列印項目,並具備 EPS,PNG 和 JPG 格式。 (另外,矢量圖也是可編輯的。)

網站地址:【傳送門】

13. REACTOUR

這個工具將以遊戲的畫風,指導你了解 React 組件的方方面面,從而幫助你了解 React 組件的功能以及掌握如何使用它。

網站地址:【傳送門】

14. ALCAMY

這是一個幫助你提高技能和職業生涯的開源學習平台。在這裡,你不僅可以學習如何創建聊天機器人模塊的相關知識,還能夠了解區塊鏈、技術驅動的閃電式擴張、機器學習等前沿技術。

網站地址:【傳送門】

15. ANIMISTA

這個工具可以幫助你在瀏覽器中創建 CSS 動畫。 雖然它仍處於測試階段,但它淺顯易懂、易於使用,並且有大量的選項可以指導你完成動畫的製作。

網站地址:【傳送門】

16. ANYMAP

只需要一些 JavaScript 和 HTML5 編程技巧,你就可以創建出基於數據的互動式地圖。同時,你可以將天氣、結果報告、統計數據等信息與其結合使用,來增強數據的可視化效果。當然,這款工具也是製作互動式儀錶盤和並行式報告的最佳選擇。

網站地址:【傳送門】

17. CREATE-DMG

利用這個工具,你僅需要幾秒鐘便可為 macOS 應用程序創建出一個好看的 DMG。

網站地址:【傳送門】

18. BASH GUIDE

想學習 Bash 嗎?Bash 腳本是由一系列命令組成的計劃文本文件,而本指南將幫助你更好地了解、掌握這些命令的使用方法。

網站地址:【傳送門】

19. ADLANTA

Adlanta 是一個簡單、美麗的圓角風格的無襯線字體,它包含了一套完整的字符集,涉及常規的標點符號以及偏細的字體樣式。

網站地址:【傳送門】

20. BOMBA STOUT TYPEFACE

Bomba Stout 是一個免費的手工字體。由於大膽與俏皮的風格,它將帶你置身於視頻遊戲的回憶中。它有兩種樣式供你選擇:圓潤平滑的字體邊緣以及具備強有力稜角的字體邊緣。

網站地址:【傳送門】

21. EDUARDO AND AURELIA

Eduardo 和 Aurelia 是一款特殊的字體,包含大寫與小寫兩種樣式。無論你選擇了它們中的哪一種字體樣式,都可以讓你的項目充滿著個性的色彩。

網站地址:【傳送門】

22. ELARIS SERIF

Elaris 是一個具備經典設計風格的全大寫的襯線字體。它常用在標題、Logo 上,而免費版本包括四個字體重量,即常規、半粗體、粗體和黑體。

網站地址:【傳送門】

23. SOURCE HAN SERIF

這是一款由 Adobe 與谷歌聯合推出的思源宋體字體。目前支持四種不同的東亞語言,包括:繁體中文、簡體中文、日文和韓文,每一種字體都包含了 65,535 個字元以及 7 種字重。

網站地址:【傳送門】

24. VERDE SANS

Verde Sans 是一款厚重、有趣的標識字體。它包含了一整套大小寫的字元與數字。

網站地址:【傳送門】

25. ZILAP SLEEP

Zilap Sleep 是一款粗糙、沉重的新穎字體。字符集包含了大寫字元和一些字形,可用於強調主題背景的排版。

網站地址:【傳送門】

感謝你的閱讀。若你有所收穫,歡迎點贊與分享。

註:

  1. 本文版權歸原作者所有,僅用於學習與交流;
  2. 若出現打不開網頁的情況,請自備梯子;
  3. 如需轉載譯文,煩請按下方註明出處信息,謝謝!

英文原文:What』s New for Designers, April 2017

作者:Ben Dowling

譯者:IT程序獅

譯文地址:zhuanlan.zhihu.com/p/26

歡迎在我的微信公眾帳號【IT程序獅】上獲取最新的IT乾貨資料。

推薦閱讀:

(譯)關於響應式的另一種思考
2017 年了,這麼多前端框架,你會怎樣選擇?
精讀《最佳前端面試題》及面試官技巧
前端工具鏈課(二)—— 模塊化工具及組件化思想

TAG:前端开发 | 设计工具 | 字体 |