Web開發者須知:9個流行于GitHub上的存儲庫
GitHub網站上包含了目前所有與web開發相關的內容,提供一站式服務。這里有框架,有演示,包羅萬象,可能沒有什么是你找不到的。但這也是問題所在——其中有很多有趣的東西,但也許你永遠不會知道,原因就在于GitHub上可用的存儲庫實在太多。
所以,小芯決定在此介紹一些GitHub上比較流行的存儲庫,其中每個存儲庫都至少擁有30000顆星星。
1、 Realworld
首先要推薦的存儲庫是Realworld,其創造者稱之為“演示應用程序之母”。這個說法自然很大膽,但卻不夸張。
Realworld是Medium.com的一個典型翻版(沒錯,可能就是你正在瀏覽的這個平臺!)。不僅如此,Realworld允許開發者在不同的前端和后端實現之間進行選擇,甚至可以將兩者結合。
Vue.js+Node/Express或React/Redux+Rust,都能搞定!
通過Realworld,開發者會發現,同一個社交軟件卻可以用任何不同的流行語言或框架進行建構,這不神奇嗎?
2、You Don’t Know JS Yet
這一存儲庫實際上是一套十分流行的系列叢書,作者為Kyle Simpson,以筆名Getify廣為人知。這套書深入探討了JavaScript的機制,涵蓋了以下內容:
- 開始著手
- 作用域和閉包
- 對象和類
- 類型和語法
- 同步和異步
- ES.Next及其他
這套書的優點在于對讀者完全開放!這絕對是關于JavaScript最好的系列叢書之一,它也幫助筆者理解了JavaScript的真正含義。即使你認為自己很懂JavaScript,也應該好好讀這套書,你一定會得到意外的收獲!
3、 Airbnb JavaScript Style Guide
學習JavaScript最合理的途徑
Airbnb JavaScript Style Guide是最常見也比較流行的風格指南之一,可以幫助開發者編寫更好的JS代碼,在團隊合作中或者在與ESLint結合時特別實用。
下面是來自文件中的一個示例,使用了const而非var:
- // bad
- var a = 1;
- var b = 2;
- // good
- const a = 1;
- const b = 2;
4、 Storybook
Storybook 是一個用于UI組件的開發環境。它允許開發者瀏覽組件庫,查看每個組件的不同狀態,并交互式地開發和測試組件,同時支持React、Vue、Angular、React Native、Ember、Web等眾多組件!
Storybook的運行獨立于應用程序。這就允許開發者單獨開發UI組件,從而提高組件的重用性、可測試性和開發速度。開發者可以快速構建,而不必擔心與特定應用程序之間的依賴關系。
5、HTML5 Boilerplate
HTML5Boilerplate是一個專業的前端模板,也是網絡上比較流行的前端模板之一。它可以幫助開發者建立快速、耐用、適應性強的網站或應用程序,微軟、NASA和耐克等公司都在使用。
以下是HTML5 Boilerplate的一些重要特征:
- 配置HTML5。
- 設計時考慮到漸進增強。
- 包括:Normalize.css、jQuery和Modernizer。
- 通過配置提高網站的性能和安全性。
- 占位符CSS媒體查詢。
- 默認打印樣式,性能優化。
- 谷歌通用分析工具平臺的優化版本。
6、Node.js Best Practices
這一存儲庫廣泛整合了有關Node.js開發的各種優秀實踐,它目前由80多個優秀實踐、樣式指南和架構技巧組成。
其中包含以下內容:
- 項目結構實踐
- 錯誤處理實踐
- 代碼風格實踐
- 測試和總體質量實踐
- 投入生產實踐
- 安全性實踐
- 效果實踐
這無疑是一個優秀的存儲庫,包含了眾多信息。如果想嘗試Node.js開發,這一存儲庫會是不錯的選擇!
7、Front-End Checklist
在啟動web應用程序之前,你是否問過自己其中需要包含哪些東西?需要進行哪些測試?Front-End Checklist中就涵蓋了這些!
以下所列對大多數項目來說都是必須的,其架構方式如下:
- 標題
- HTML
- 網絡字體
- CSS
- 圖像
- JavaScript
- 安全
- 性能
- 可實現性
- SEO
- 翻譯
以下是來自蘋果網站應用MetaData的示例:
- <!-- Apple Touch Icon (atleast 200x200px) -->
- <link rel="apple-touch-icon" href="/custom-icon.png">
- <!-- To run web application in full-screen -->
- <meta name="apple-mobile-web-app-capable"content="yes">
- <!-- Status Bar Style (see Supported Meta Tags below for available values)-->
- <!-- Has no effect unless you have the previous meta tag -->
- <meta name="apple-mobile-web-app-status-bar-style"content="black">
8、NW.js
NW.js是一個基于Chromium和node.js的應用程序運行時。在NW.js上,開發者可以用HTML和JavaScript編寫本地應用程序。它還允許開發者直接從DOM調用Node.js模塊,形成一種編寫本地應用程序的新方法,對任何Web技術都適用。
以下為它的主要功能:
- 使用現代HTML5、CSS3、JS和WebGL編寫應用程序。
- 完全支持Node.js API及其所有第三方模塊。
- 性能良好:Node和WebKit運行在同一線程中。
- 易于打包和分發應用程序。
- 可在Linux、Mac OS X和Windows上使用。
9、fullPage.js
Alvaro Trigo提供的fullPage.js是一個簡單易用的存儲庫,它允許開發者創建SPA(單頁應用程序)和橫向滑塊,可用于Vue、React和Angular,對移動設備完全響應。
開發者可在開源項目中自由使用這一存儲庫,但如果想在商業環境中使用,則必須購買許可證。
這一存儲庫非常酷炫,值得一看!
希望大家能夠在自己的項目中或在其他地方使用以上存儲庫。