Front-end Navigation

CDN(cdn)

HTTP(http)

HttpWatch - 各項通訊偵測
Fiddler - 各項通訊偵測
HTTPie - HTTP cli

原型設計(prototype)

Proto.io -
Framer - 製作動態原型
Origami - 由Facebook開發
Form - Google已併購
ProtoPie -

API(api)

overAPI - 各種API
DevDocs - 各種API
The Web platform - 瀏覽器技術總覽

團隊合作(team-work)

Slack - 適合團隊的即時通訊
Trello - 專案管理平台
Asana -
JIRA -
ZenHub -
Waffle.io -
Airtable -
Notion - 適合整理控

佔位圖(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)

Ramda - Functional Programming
Lodash -
Underscore -
jQuery -
jQuery UI -
YUI -

CSS框架(css-framework)

CSS預處理器(css-preprocessor)

Sass -
Less -
PostCSS -
Skeleton -
Myth -

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)

程式碼分享(playground)

JS轉譯器(js-transpiler)

Babel - ES6轉譯為ES5
CoffeeScript - 讓JS更簡潔
TypeScript - Angular 2官方推薦
JSX - React官方推薦

自動化構建(automation)

Yeoman -
Gulp -
Grunt -

模組化管理(module-bundler)

Webpack -
rollup -
Parcel - 開箱即用
FuseBox -
@pika/pack - npm package building
CommonJS -
AMD -

套件管理(package-manager)

Yarn - 比npm更快
NPM - Node.js內建
Bower -
Homebrew -

JS品質管理(js-quality)

單元測試(unit-test)

AVA -
Mocha -
Chai -
Jasmine -
Karma -
Tape -
Jest -
Buster.js -

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)

jsconsole -
whistle - HTTP(S), WebSocket debugging proxy

效能(performance)

安全性(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)

Browsh -
PhantomJS - 虛擬瀏覽器（Webkit）
Links -
Lynx -
w3m -

爬蟲(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)