https://github.com/akccakcctw/frontend-navigation
Front-end Navigation
https://github.com/akccakcctw/frontend-navigation
front-end tools web webdev
Last synced: 10 months ago
JSON representation
Front-end Navigation
- Host: GitHub
- URL: https://github.com/akccakcctw/frontend-navigation
- Owner: akccakcctw
- License: mit
- Created: 2016-10-16T15:36:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T00:06:09.000Z (over 3 years ago)
- Last Synced: 2025-04-21T12:57:20.263Z (about 1 year ago)
- Topics: front-end, tools, web, webdev
- Language: JavaScript
- Homepage: https://akccakcctw.github.io/frontend-navigation/
- Size: 394 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [Front-end Navigation](https://akccakcctw.github.io/frontend-navigation/)
## [CDN(cdn)](https://akccakcctw.github.io/frontend-navigation/#cdn)
- [unpkg](https://unpkg.com/) -
- [cdnjs](https://cdnjs.com/) - 應有盡有
- [Cloudflare](https://www.cloudflare.com/zh-tw/) -
- [GoogleCDN](https://developers.google.com/speed/libraries/) -
- [raw.githack.com](https://raw.githack.com/) -
- [jsDelivr](https://www.jsdelivr.com/) -
- [MicrosoftCDN](https://www.asp.net/ajax/cdn) -
## [HTTP(http)](https://akccakcctw.github.io/frontend-navigation/#http)
- [HttpWatch](https://www.httpwatch.com/) - 各項通訊偵測
- [Fiddler](https://www.telerik.com/fiddler) - 各項通訊偵測
- [HTTPie](https://httpie.org/) - HTTP cli
## [原型設計(prototype)](https://akccakcctw.github.io/frontend-navigation/#prototype)
- [Proto.io](https://proto.io/) -
- [Framer](https://framerjs.com/) - 製作動態原型
- [Origami](https://facebook.github.io/origami/) - 由Facebook開發
- [Form](http://www.relativewave.com/form/) - Google已併購
- [ProtoPie](https://www.protopie.io/) -
## [API(api)](https://akccakcctw.github.io/frontend-navigation/#api)
- [overAPI](http://overapi.com/) - 各種API
- [DevDocs](https://devdocs.io/) - 各種API
- [The Web platform](https://platform.html5.org/) - 瀏覽器技術總覽
## [團隊合作(team-work)](https://akccakcctw.github.io/frontend-navigation/#team-work)
- [Slack](https://slack.com/) - 適合團隊的即時通訊
- [Trello](https://trello.com) - 專案管理平台
- [Asana](https://asana.com/) -
- [JIRA](https://www.atlassian.com/software/jira) -
- [ZenHub](https://www.zenhub.com/) -
- [Waffle.io](https://waffle.io/) -
- [Airtable](https://airtable.com/) -
- [Notion](https://www.notion.so/) - 適合整理控
## [佔位圖(placeholder-images)](https://akccakcctw.github.io/frontend-navigation/#placeholder-images)
- [dummyimage](https://dummyimage.com) -
- [placekitten](https://placekitten.com/) - 都是貓
- [lorempixum](https://lorempixel.com/) -
- [placehold.it](https://placehold.it/) -
- [placebeard.it](https://placebeard.it/) - 鬍子！鬍子！
- [PlaceIMG](https://placeimg.com/) -
## [影像最佳化(image-optimize)](https://akccakcctw.github.io/frontend-navigation/#image-optimize)
- [ImageMagick](https://www.imagemagick.org/) - 整合多功能（命令列程式）
- [pngquant](https://pngquant.org/) - PNG最佳化（命令列程式）
- [libjpeg](http://libjpeg.sourceforge.net/) - jpeg最佳化（命令列程式）
- [PNGGauntlet](https://pnggauntlet.com/) - PNG最佳化
- [TinyPNG](https://tinypng.com/) - 線上最佳化
- [SVGO](https://github.com/svg/svgo) - svg 優化
## [字型(fonts)](https://akccakcctw.github.io/frontend-navigation/#fonts)
- [Google Fonts](https://fonts.google.com/) - 免費網路字型
- [Font Squirrel](https://www.fontsquirrel.com/) - 免費字型下載
- [Adobe Edge Web Fonts](https://edgewebfonts.adobe.com/) -
- [justfont](https://www.justfont.com/) - 就是字
- [字蛛](http://font-spider.org/) - 中文字型壓縮器
## [Icon Font(icon-font)](https://akccakcctw.github.io/frontend-navigation/#icon-font)
- [Font Awesome](http://fontawesome.io/) - Bootstrap的好朋友
- [Fontello](http://fontello.com/) -
- [Github Octicons](https://octicons.github.com/) - Github的icon
- [IcoMoon](https://icomoon.io/) -
- [Noun Project](https://thenounproject.com/) - 全世界的icon
- [Entypo](http://www.entypo.com/) -
- [CSS ICON](http://cssicon.space/) - 純CSS
- [Icon Font](https://leungwensen.github.io/svg-icon/) - svg-icon
- [Simple Line Icons](http://simplelineicons.com/) - 美美的線性 icon
- [Vivid.js](https://webkul.github.io/vivid/) -
## [JS框架(js-framework)](https://akccakcctw.github.io/frontend-navigation/#js-framework)
- [React](https://facebook.github.io/react/) -
- [Vue.js](https://vuejs.org/) -
- [Svelte](https://svelte.dev/) -
- [Angular](https://angularjs.org/) -
- [Marko](https://markojs.com/) -
- [Preact](https://preactjs.com/) - 3kB alternative to React
- [Backbone.js](http://backbonejs.org/) -
- [Knockout.js](http://knockoutjs.com/) -
- [Ember.js](http://emberjs.com/) -
## [函式庫(library)](https://akccakcctw.github.io/frontend-navigation/#library)
- [Ramda](http://ramdajs.com/) - Functional Programming
- [Lodash](https://lodash.com) -
- [Underscore](http://underscorejs.org) -
- [jQuery](https://jquery.com/) -
- [jQuery UI](https://jqueryui.com/) -
- [YUI](http://yuilibrary.com/) -
## [CSS框架(css-framework)](https://akccakcctw.github.io/frontend-navigation/#css-framework)
- [Bootstrap](https://getbootstrap.com/) -
- [Foundation](https://foundation.zurb.com/) -
- [Flat UI](https://designmodo.github.io/Flat-UI/) -
- [Semantic UI](http://semantic-ui.com/) -
- [Susy](http://susy.oddbird.net/) -
## [CSS預處理器(css-preprocessor)](https://akccakcctw.github.io/frontend-navigation/#css-preprocessor)
- [Sass](http://sass-lang.com/) -
- [Less](http://lesscss.org/) -
- [PostCSS](http://postcss.org/) -
- [Skeleton](http://getskeleton.com/) -
- [Myth](http://www.myth.io/) -
## [Mocking(mocking)](https://akccakcctw.github.io/frontend-navigation/#mocking)
- [JSON Server](https://github.com/typicode/json-server) - fake REST API
- [Faker.js](https://github.com/marak/Faker.js/) - 假資料
- [Sinon.js](http://sinonjs.org/) -
## [編輯器(editor)](https://akccakcctw.github.io/frontend-navigation/#editor)
- [VIM](http://www.vim.org/) - 編輯器之神
- [VSCode](https://code.visualstudio.com/) -
- [Sublime Text](https://www.sublimetext.com/) -
- [Atom](https://atom.io/) -
- [Xcode](https://developer.apple.com/xcode/) -
- [Aptana](http://www.aptana.com/) -
- [Notepad++](https://notepad-plus-plus.org/) - 台灣製造
- [Brackets](http://brackets.io/) -
- [Emacs](https://www.gnu.org/software/emacs/) - 神之編輯器
- [spacemacs](http://spacemacs.org/) -
- [Coda](https://panic.com/coda/) -
- [Kate](https://kate-editor.org/) -
- [Micro](https://micro-editor.github.io/) - 終端機新選擇
- [Xi](https://google.github.io/xi-editor) - Google 開發
## [IDE(ide)](https://akccakcctw.github.io/frontend-navigation/#ide)
- [Visual Studio](https://www.visualstudio.com/) -
- [WebStorm](https://www.jetbrains.com/webstorm/) -
- [Cloud9](https://c9.io/) -
- [Dreamweaver](https://www.adobe.com/tw/products/dreamweaver.html) -
- [UEditor](http://ueditor.baidu.com/website/) -
- [TextMate](https://macromates.com/) -
## [程式碼分享(playground)](https://akccakcctw.github.io/frontend-navigation/#playground)
- [CodePen](https://codepen.io/) -
- [jsdo.it](https://jsdo.it) -
- [JS Bin](https://jsbin.com/) -
- [JSFiddle](https://jsfiddle.net/) -
- [Codepad](https://codepad.co) -
- [CODEPLY](https://www.codeply.com/) -
- [Codepad](https://codepad.co/) -
- [Gist](https://gist.github.com/) -
## [JS轉譯器(js-transpiler)](https://akccakcctw.github.io/frontend-navigation/#js-transpiler)
- [Babel](https://babeljs.io/) - ES6轉譯為ES5
- [CoffeeScript](http://coffeescript.org/) - 讓JS更簡潔
- [TypeScript](https://www.typescriptlang.org/) - Angular 2官方推薦
- [JSX](https://facebook.github.io/jsx/) - React官方推薦
## [自動化構建(automation)](https://akccakcctw.github.io/frontend-navigation/#automation)
- [Yeoman](http://yeoman.io/) -
- [Gulp](http://gulpjs.com/) -
- [Grunt](http://gruntjs.com/) -
## [模組化管理(module-bundler)](https://akccakcctw.github.io/frontend-navigation/#module-bundler)
- [Webpack](https://webpack.github.io/) -
- [rollup](http://rollupjs.org/) -
- [Parcel](https://parceljs.org) - 開箱即用
- [FuseBox](https://fuse-box.org/) -
- [@pika/pack](https://github.com/pikapkg/pack) - npm package building
- [CommonJS](http://www.commonjs.org/) -
- [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) -
## [套件管理(package-manager)](https://akccakcctw.github.io/frontend-navigation/#package-manager)
- [Yarn](https://yarnpkg.com/) - 比npm更快
- [NPM](https://www.npmjs.com/) - Node.js內建
- [Bower](https://bower.io/) -
- [Homebrew](http://brew.sh/) -
## [JS品質管理(js-quality)](https://akccakcctw.github.io/frontend-navigation/#js-quality)
- [ESLint](http://eslint.org/) -
- [JSHint](http://jshint.com/) -
- [JSLint](http://www.jslint.com/) -
## [單元測試(unit-test)](https://akccakcctw.github.io/frontend-navigation/#unit-test)
- [AVA](https://github.com/avajs/ava) -
- [Mocha](https://mochajs.org/) -
- [Chai](http://chaijs.com/) -
- [Jasmine](https://jasmine.github.io/) -
- [Karma](https://karma-runner.github.io/) -
- [Tape](https://github.com/substack/tape) -
- [Jest](https://facebook.github.io/jest/) -
- [Buster.js](http://docs.busterjs.org/) -
## [E2E測試(e2e)](https://akccakcctw.github.io/frontend-navigation/#e2e)
- [cypress](https://www.cypress.io/) -
- [Puppeteer](https://pptr.dev/) -
- [Nightwatch.js](http://nightwatchjs.org/) - 自動化測試
- [WebDriver.io](http://webdriver.io) -
- [TestCafe](https://devexpress.github.io/testcafe/) -
- [Intern](https://theintern.io/) -
- [CodeceptJS](http://codecept.io/) -
- [Appium](https://appium.io/) - 行動裝置專用
- [Selenium](http://www.seleniumhq.org/) -
- [Protractor](http://www.protractortest.org/) - For Angular
## [CI/CD(ci-cd)](https://akccakcctw.github.io/frontend-navigation/#ci-cd)
- [Travis CI](https://travis-ci.org/) -
- [Jenkins](https://jenkins.io/) -
- [GitLab CI](https://about.gitlab.com/features/gitlab-ci-cd/) -
- [BuildBot](https://buildbot.net/) -
- [Drone](https://github.com/drone/drone) -
- [Concourse](https://concourse.ci/) -
## [錯誤追蹤(error-tracking)](https://akccakcctw.github.io/frontend-navigation/#error-tracking)
- [Sentry](https://sentry.io/) -
- [Rollbar](https://rollbar.com/) -
- [LogRocket](https://logrocket.com/) -
## [環境(enviroment)](https://akccakcctw.github.io/frontend-navigation/#enviroment)
- [Node.js](https://nodejs.org/) -
## [兼容性(compatibility)](https://akccakcctw.github.io/frontend-navigation/#compatibility)
- [Can I use?](http://caniuse.com/) - 查詢瀏覽器支援度
- [Modernizr](https://modernizr.com/) -
- [Polyfill.io](https://polyfill.io) -
- [Browserhacks](http://browserhacks.com/) - 瀏覽器hack速查
## [兼容性測試(c-testing)](https://akccakcctw.github.io/frontend-navigation/#c-testing)
- [Browser Sandbox](https://turbo.net/browsers) - 瀏覽器環境測試
- [IETester](http://www.my-debugbar.com/wiki/IETester/) -
- [BrowserShots](https://browsershots.org/) -
- [Manymo emulators](https://www.manymo.com/emulators) -
## [Debugging(debugging)](https://akccakcctw.github.io/frontend-navigation/#debugging)
- [jsconsole](https://jsconsole.com/) -
- [whistle](https://github.com/avwo/whistle) - HTTP(S), WebSocket debugging proxy
## [效能(performance)](https://akccakcctw.github.io/frontend-navigation/#performance)
- [PageSpeed](https://developers.google.com/speed/pagespeed/) -
- [showslow](https://www.showslow.com/) -
- [webpagetest](https://www.webpagetest.org/) -
- [pingdom](https://tools.pingdom.com/) -
- [Neustar Web Performance](https://www.neustar.biz/resources/tools/free-website-performance-test) -
- [load impact](https://loadimpact.com/) -
- [GTmetrix](https://gtmetrix.com/) -
## [安全性(safety)](https://akccakcctw.github.io/frontend-navigation/#safety)
- [Retire Insecurity Today](http://retire.insecurity.today/) - 檢測js函式庫漏洞
- [Websecurify](https://www.websecurify.com/) -
- [x5s](https://xss.codeplex.com/) - 檢測XSS漏洞
- [Skipfish](https://code.google.com/p/skipfish/) -
- [OWASP WebScarab Project](https://www.owasp.org/index.php/Category:OWASP_WebScarab_Project) -
- [SSL Labs](https://www.ssllabs.com/ssltest/) -
## [跨平台(cross-platform)](https://akccakcctw.github.io/frontend-navigation/#cross-platform)
- [Electron](http://electron.atom.io/) - 進攻桌面
- [NW.js](https://nwjs.io) - 進攻桌面
- [React Native](https://facebook.github.io/react-native/) - 進攻手機
- [Meteor](https://www.meteor.com/) -
- [Node-RED](https://nodered.org/) - 視覺化IOT開發
- [Ionic](https://ionicframework.com/) -
- [Titanium](https://www.appcelerator.com/mobile-app-development-products/) -
- [PhoneGap](http://phonegap.com/) -
- [Cordova](https://cordova.apache.org/) -
- [Proton Native](https://proton-native.js.org/) - React Native 桌面應用框架
## [瀏覽器附加工具(addons)](https://akccakcctw.github.io/frontend-navigation/#addons)
- [ColorZilla](http://www.colorzilla.com/) - 網頁拾色
- [Page Ruler](https://github.com/wrakky/page-ruler) - 快速量尺寸
- [One Tab](https://www.one-tab.com/) - 覺得分頁太多可以試試
- [Vimium](https://vimium.github.io) - Geek不需要滑鼠(chrome)
- [cVim](https://github.com/1995eaton/chromium-vim) - Geek不需要滑鼠(chrome)
- [Vimperator](http://www.vimperator.org/) - Geek不需要滑鼠(firefox)
- [Live HTTP Headers](https://addons.mozilla.org/zh-TW/firefox/addon/live-http-headers/) -
- [HttpFox](https://addons.mozilla.org/zh-TW/firefox/addon/httpfox/) - HTTP分析(firefox)
- [Postman](https://www.getpostman.com/) - HTTP模擬
- [AlloyDesigner](https://alloyteam.github.io/AlloyDesigner/) - 幫助確認視覺稿
- [WebMaker](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh) - 離線playground
- [Visual Inspector](https://www.canvasflip.com/visual-inspector/) - 畫面調整溝通
## [RWD(rwd)](https://akccakcctw.github.io/frontend-navigation/#rwd)
- [Google Resizer](https://design.google.com/resizer/) - 線上RWD畫面測試
## [瀏覽器(browser)](https://akccakcctw.github.io/frontend-navigation/#browser)
- [Chrome](https://www.google.com.tw/chrome/) - （Blink）
- [Firefox](https://www.mozilla.org/zh-TW/firefox/new/) - （Gecko）
- [Edge](https://www.microsoft.com/zh-tw/windows/microsoft-edge) - （EdgeHTML）
- [Safari](https://www.apple.com/tw/safari/) - （Webkit）
- [Opera](https://www.opera.com/) - （Blink）
- [IE](https://support.microsoft.com/zh-tw/help/17621/internet-explorer-downloads) - 刪掉它（Trident）
- [Blisk](https://blisk.io/) - 網頁開發導向（Webkit）
- [Vivaldi](https://vivaldi.com/) - 易於自訂（Blink）
- [Brave](https://brave.com/) - （Blink）
- [Next](https://next.atlas.engineer/) -
## [純文字瀏覽器(browser-text)](https://akccakcctw.github.io/frontend-navigation/#browser-text)
- [Browsh](https://www.brow.sh/) -
- [PhantomJS](http://phantomjs.org/) - 虛擬瀏覽器（Webkit）
- [Links](http://links.twibright.com) -
- [Lynx](https://lynx.invisible-island.net/) -
- [w3m](http://w3m.sourceforge.net/) -
## [爬蟲(crawler)](https://akccakcctw.github.io/frontend-navigation/#crawler)
- [CasperJS](http://casperjs.org/) - 基於PhantomJS
## [無障礙(a11y)](https://akccakcctw.github.io/frontend-navigation/#a11y)
- [accessibilityjs](https://github.com/github/accessibilityjs) - 無障礙測試
## [其它工具(tool)](https://akccakcctw.github.io/frontend-navigation/#tool)
- [Emmet](http://emmet.io/) - 速寫神器
- [npm trends](https://www.npmtrends.com/) -
- [CSS Validator](https://jigsaw.w3.org/css-validator/) - CSS語法檢測
- [Markup Validator](https://validator.w3.org/) - HTML語法檢測
- [Nightmare](http://www.nightmarejs.org/) - 瀏覽器自動化腳本
- [ngrok](https://ngrok.com/) - 發布測試站
- [PutsMail](https://putsmail.com/) - 電子報測試
- [Lighthouse](https://github.com/GoogleChrome/lighthouse) - 網頁性能測試
- [ipify](https://www.ipify.org/) - IP API
- [Markdown Here](http://markdown-here.com/) - 用markdown寫信
- [SONAR](https://sonarwhal.com/) - 微軟開源的檢測工具
- [Is it maintained?](https://isitmaintained.com) - 開源專案維護分析
- [BuiltWith](https://builtwith.com) - 網站分析
- [JavaScript Visualizer](https://tylermcginnis.com/javascript-visualizer/) -
## [電子報(newsletter)](https://akccakcctw.github.io/frontend-navigation/#newsletter)
- [CodeTengu](http://weekly.codetengu.com/) - 碼天狗
- [奇舞周刊](https://weekly.75team.com/) -
- [TechBridge](http://weekly.techbridge.cc/) -
- [FrontEnd Focus](http://frontendfocus.co/) -
- [JavaScript Weekly](http://javascriptweekly.com/) -
- [码农周刊](http://weekly.manong.io/) -