Front-end Navigation
CDN(cdn)
- unpkg -
- cdnjs - 應有盡有
- Cloudflare -
- GoogleCDN -
- raw.githack.com -
- jsDelivr -
- MicrosoftCDN -
HTTP(http)
原型設計(prototype)
API(api)
- overAPI - 各種API
- DevDocs - 各種API
- The Web platform - 瀏覽器技術總覽
團隊合作(team-work)
佔位圖(placeholder-images)
- dummyimage -
- placekitten - 都是貓
- lorempixum -
- placehold.it -
- placebeard.it - 鬍子！鬍子！
- PlaceIMG -
影像最佳化(image-optimize)
- ImageMagick - 整合多功能（命令列程式）
- pngquant - PNG最佳化（命令列程式）
- libjpeg - jpeg最佳化（命令列程式）
- PNGGauntlet - PNG最佳化
- TinyPNG - 線上最佳化
- SVGO - svg 優化
字型(fonts)
- Google Fonts - 免費網路字型
- Font Squirrel - 免費字型下載
- Adobe Edge Web Fonts -
- justfont - 就是字
- 字蛛 - 中文字型壓縮器
Icon Font(icon-font)
- Font Awesome - Bootstrap的好朋友
- Fontello -
- Github Octicons - Github的icon
- IcoMoon -
- Noun Project - 全世界的icon
- Entypo -
- CSS ICON - 純CSS
- Icon Font - svg-icon
- Simple Line Icons - 美美的線性 icon
- Vivid.js -
JS框架(js-framework)
- React -
- Vue.js -
- Svelte -
- Angular -
- Marko -
- Preact - 3kB alternative to React
- Backbone.js -
- Knockout.js -
- Ember.js -
函式庫(library)
CSS框架(css-framework)
- Bootstrap -
- Foundation -
- Flat UI -
- Semantic UI -
- Susy -
CSS預處理器(css-preprocessor)
Mocking(mocking)
- JSON Server - fake REST API
- Faker.js - 假資料
- Sinon.js -
編輯器(editor)
- VIM - 編輯器之神
- VSCode -
- Sublime Text -
- Atom -
- Xcode -
- Aptana -
- Notepad++ - 台灣製造
- Brackets -
- Emacs - 神之編輯器
- spacemacs -
- Coda -
- Kate -
- Micro - 終端機新選擇
- Xi - Google 開發
IDE(ide)
- Visual Studio -
- WebStorm -
- Cloud9 -
- Dreamweaver -
- UEditor -
- TextMate -
程式碼分享(playground)
JS轉譯器(js-transpiler)
- Babel - ES6轉譯為ES5
- CoffeeScript - 讓JS更簡潔
- TypeScript - Angular 2官方推薦
- JSX - React官方推薦
自動化構建(automation)
模組化管理(module-bundler)
套件管理(package-manager)
JS品質管理(js-quality)
單元測試(unit-test)
E2E測試(e2e)
- cypress -
- Puppeteer -
- Nightwatch.js - 自動化測試
- WebDriver.io -
- TestCafe -
- Intern -
- CodeceptJS -
- Appium - 行動裝置專用
- Selenium -
- Protractor - For Angular
CI/CD(ci-cd)
錯誤追蹤(error-tracking)
環境(enviroment)
- Node.js -
兼容性(compatibility)
- Can I use? - 查詢瀏覽器支援度
- Modernizr -
- Polyfill.io -
- Browserhacks - 瀏覽器hack速查
兼容性測試(c-testing)
- Browser Sandbox - 瀏覽器環境測試
- IETester -
- BrowserShots -
- Manymo emulators -
Debugging(debugging)
效能(performance)
- PageSpeed -
- showslow -
- webpagetest -
- pingdom -
- Neustar Web Performance -
- load impact -
- GTmetrix -
安全性(safety)
- Retire Insecurity Today - 檢測js函式庫漏洞
- Websecurify -
- x5s - 檢測XSS漏洞
- Skipfish -
- OWASP WebScarab Project -
- SSL Labs -
跨平台(cross-platform)
- Electron - 進攻桌面
- NW.js - 進攻桌面
- React Native - 進攻手機
- Meteor -
- Node-RED - 視覺化IOT開發
- Ionic -
- Titanium -
- PhoneGap -
- Cordova -
- Proton Native - React Native 桌面應用框架
瀏覽器附加工具(addons)
- ColorZilla - 網頁拾色
- Page Ruler - 快速量尺寸
- One Tab - 覺得分頁太多可以試試
- Vimium - Geek不需要滑鼠(chrome)
- cVim - Geek不需要滑鼠(chrome)
- Vimperator - Geek不需要滑鼠(firefox)
- Live HTTP Headers -
- HttpFox - HTTP分析(firefox)
- Postman - HTTP模擬
- AlloyDesigner - 幫助確認視覺稿
- WebMaker - 離線playground
- Visual Inspector - 畫面調整溝通
RWD(rwd)
- Google Resizer - 線上RWD畫面測試
瀏覽器(browser)
- Chrome - （Blink）
- Firefox - （Gecko）
- Edge - （EdgeHTML）
- Safari - （Webkit）
- Opera - （Blink）
- IE - 刪掉它（Trident）
- Blisk - 網頁開發導向（Webkit）
- Vivaldi - 易於自訂（Blink）
- Brave - （Blink）
- Next -
純文字瀏覽器(browser-text)
爬蟲(crawler)
- CasperJS - 基於PhantomJS
無障礙(a11y)
- accessibilityjs - 無障礙測試
其它工具(tool)
- Emmet - 速寫神器
- npm trends -
- CSS Validator - CSS語法檢測
- Markup Validator - HTML語法檢測
- Nightmare - 瀏覽器自動化腳本
- ngrok - 發布測試站
- PutsMail - 電子報測試
- Lighthouse - 網頁性能測試
- ipify - IP API
- Markdown Here - 用markdown寫信
- SONAR - 微軟開源的檢測工具
- Is it maintained? - 開源專案維護分析
- BuiltWith - 網站分析
- JavaScript Visualizer -
電子報(newsletter)
- CodeTengu - 碼天狗
- 奇舞周刊 -
- TechBridge -
- FrontEnd Focus -
- JavaScript Weekly -
- 码农周刊 -