工具(前端)
建構工具(前端)
HTML
https://html2jade.org/
JADE
／
PUG
產生器
設定
createapp - webpack/Parcel/Snowpack boilerplate generator
自動產生
webpack
、
Parcel
等工具的config檔案
排版
CSS Layout Generator
https://cdn-ak.f.st-hatena.com/images/fotolife/p/paiza/20220824/20220824151850.jpg
Flexbox(CSS)
Grid(CSS)
Interactive CSS Grid Generator | Layoutit Grid
Griddy
linear-gradient(CSS)
https://www.colorzilla.com/gradient-editor/
animation(CSS)
Animista CSS Animations on demand
Keyframes.app
text-shadow(CSS)
CSS text-stroke generator (text-shadow hack)
圖示
https://fonts.google.com/icons
Fontello
Fontello - icon fonts generator
700+ CSS Icons, Customizable, Retina Ready & API
iconmonstr - Free simple icons for your next project
Potlab Icons — Animated SVG icons for web projects
Tabler Icons: over 4200 vector icons for web design
icongram
Icônes
loader
格式轉換
Transform
如
JSX
、
JSON
、
YAML
各種格式的轉換工具
Frontend Toolkit
Productivity is key
轉換HTML成SCSS、LESS或CSS結構
extractCSS - Online CSS Extractor
取出HTML裡的class、id、行內樣式
Browserslist
CSS Shrink
Wappalyzer
瀏覽器擴充功能
JavaScript
loupe
將JavaScript執行時的先後時序
可視化
js-code-to-svg
將JavaScript執行時的邏輯程序圖像化