樣板小抄
- README.md https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
- Licenses http://choosealicense.com/licenses/
- Awesome Cheatsheet https://github.com/detailyang/awesome-cheatsheet
- Devhints - Cheatsheet collection https://devhints.io/
- JS Way - 手把手帶你學 Javascript https://github.com/bpesquet/thejsway
- Pure Bash Bible https://github.com/dylanaraps/pure-bash-bible
色彩處理
- 吸色 https://itunes.apple.com/us/app/sip/id507257563?mt=12
- 混色漸層 http://colinkeany.com/blend/
- 推薦漸層 https://webgradients.com
- Hex to RGBA http://hex2rgba.devoth.com/
- RGBA to ARGB https://beijingyoung.com/articles/rgba-argb-converter/
jQuery || bootstrap
- 你不需要 jQuery https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md
- jQuery Coding Style http://lab.abhinayrathore.com/jquery-standards/
- 所見即所得編輯器 http://summernote.org/
- 日期時間選取 https://eonasdan.github.io/bootstrap-datetimepicker/
- 檔案上傳 http://plugins.krajee.com/file-input
- 分頁 http://esimakin.github.io/twbs-pagination/
CSS
- 各裝置的 Media Queries https://gist.github.com/chrisjlee/5832418
- HTML 符號表 http://brajeshwar.github.io/entities/
- 區別瀏覽器的寫法 http://browserhacks.com/
- pre 自動換行 https://css-tricks.com/snippets/css/make-pre-text-wrap/
- Tocas UI https://tocas-ui.com/
- flex http://flexbox.help/
- flexboxfroggy http://flexboxfroggy.com/
- gridgarden http://cssgridgarden.com/
- Google 字型 https://www.google.com/fonts/earlyaccess
- 思源黑體 http://www.google.com/get/noto/#sans-hant
- Stitches - An HTML5 sprite sheet generator https://draeton.github.io/stitches/
實例展示
- 進度條 http://codepen.io/tpai/pen/ZWezgK
- 加減鈕 http://codepen.io/tpai/pen/XXQdaw
- Radio, Checkbox, 和 On-Off 開關 http://codepen.io/tpai/pen/mVMGwx
- 彩帶條邊框 https://jsfiddle.net/4qypuono/
- Drag n Drop Blocks http://jsbin.com/tomufar
- File & Blob Convertion http://jsbin.com/kekasuj/edit?js,console,output
- Speech Bubbles http://jsbin.com/fozulay/edit?css,js,output
- React Slick http://jsbin.com/xabepo/edit?html,js,output
- CKEditor http://jsbin.com/ligoji/edit?js,output
- TinyMCE http://jsbin.com/vuhevos/edit?js,output
- Center middle image and maintain aspect ratio http://output.jsbin.com/yefeju http://codepen.io/CSSKing/pen/XJEZeG
- MobX http://jsbin.com/varimeviza/edit?js,output
Mac Apps
- Android 手機畫面投射 http://www.vysor.io/
- 應用快捷鍵表 https://www.mediaatelier.com/CheatSheet/
- Nativefier https://github.com/jiahaog/nativefier
線上服務
- Gist 投影片 http://gistdeck.github.io/
- ASCII 流程圖 http://asciiflow.com/
- What's My DNS https://www.whatsmydns.net
- Markdown Deck https://github.com/jxnblk/mdx-deck https://github.com/pomber/code-surfer
Chrome Extensions
- input === vi 才是真男人 https://github.com/akahuku/wasavi
- vimium - Hacker's Browser https://github.com/philc/vimium
- github 資料夾樹 https://github.com/buunguyen/octotree
- github 立體條狀貢獻圖表 https://github.com/jasonlong/isometric-contributions
- Json 格式化 https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
- React Perf Tools https://github.com/crysislinux/chrome-react-perf
設計靈感
- Awwwards http://www.awwwards.com/
- The Best Designs https://www.thebestdesigns.com/
- Android Layout http://androidniceties.tumblr.com/
自適應/優化
- 優質範例參考 http://mediaqueri.es/
- Laptop, Pad 以及 Mobile Phone 適應畫面 http://design.google.com/resizer/
- Webpage Test http://www.webpagetest.org/
- Test My Site (Mobile) https://testmysite.thinkwithgoogle.com/
- Sizzy http://sizzy.co/
NPM
- md2googleslides https://github.com/googlesamples/md2googleslides
- HTML5 Plyr https://github.com/selz/plyr
- Desktop Notification https://github.com/Nickersoft/push.js
- Snackbar https://github.com/egoist/biu
- react-motion https://github.com/chenglou/react-motion
- react-mention https://github.com/effektif/react-mentions
- react-slick https://github.com/akiran/react-slick
- react-cropper https://github.com/roadmanfong/react-cropper
- react-avatar-editor https://github.com/mosch/react-avatar-editor
- react-sortable https://github.com/danielstocks/react-sortable
- react-dropzone https://github.com/okonet/react-dropzone
- react-color https://github.com/casesandberg/react-color
- Unique String ID https://github.com/ai/nanoid
- Touch gesture https://hammerjs.github.io/
- 3D touch, force touch and pointer gesture https://pressurejs.com/
開發相關
- Forward public traffic to private url https://ngrok.com/
- Carbon (paste code to image) https://carbon.now.sh
- node.green (ES support for Node.js) http://node.green/
- caniuse (features in each browser compatibility) https://caniuse.com
- transform now (json to proptypes, html to jsx) https://transform.now.sh/
- glitch (great community for creating app) https://glitch.com/
- codesandbox (online react playground) https://codesandbox.io
- webpackbin (webpack code sandbox) https://www.webpackbin.com
- react.run (quick launch react app) http://react.run/
- JSON Mock Data - Lorem ipsum http://jsonplaceholder.typicode.com/posts
- JSON Mock Data - TV Show http://api.tvmaze.com/search/shows?q=superman
- JSON Diff Patch http://benjamine.github.io/jsondiffpatch/demo/
- <table> 匯出 Excel http://bl.ocks.org/insin/1031969
- KeyCode Info http://keycode.info/
- 正規表示式視覺化 https://regexper.com/
- 正規表示式測試 http://regex101.com
- Fake Image Please http://fakeimg.pl/
- 高清大圖 https://unsplash.it/1920/1080
- HTML Minifier https://kangax.github.io/html-minifier/
- 貼 Code https://www.refactor.io/
- gZip Compressed Size https://closure-compiler.appspot.com/home
- Found the cost of npm package to your bundle https://bundlephobia.com/
- API documentation platform https://apiary.io/
- 資料視覺化函式庫 http://ui.toast.com/tui-chart/
遊戲相關
- Battle.net 啟動器在 iMac 上無法正常啟動 https://us.battle.net/support/en/article/6767
疑難雜症
- tinyMCE 在 Modal 中開啟後無法正常使用 http://stackoverflow.com/questions/26836103/textbox-not-clickable-in-tinymce-modal-box