🔧tools

JS

• VSCode (web)

CSS

• Flexbox Froggy ⭐

• Grid Garden ⭐

JSON

• JSONView (Chrome plug-in)

🛠 工具

• Web Sequence Diagrams (demo)

• Web Platform Tests (wpt.live)

• bonsai - web browser for research

素材

• lorem.space - placeholder images

• Lorem Picsum - Lorem Ipsum for photos.

• IFN (illustration-free.net) - free icons

字體

• 麥當勞薯條體：介紹、產生器、下載

• 麥克雞塊體：介紹、產生器下載

💎 資源

name	type	notes
Octotree	chrome add-on	GitHub code tree
Wappalyzer	chrome add-on	shows you what websites are built with.
Web Developer	chrome add-on	a toolbar with various web developer tools.
Window Resizer	chrome add-on	emulate various screen resolutions.
WhatFont	chrome add-on	identify fonts on web pages.
ColorZilla	chrome add-on	Eyedropper, Color Picker, Gradient Generator
CSSViewer	chrome add-on	CSS property viewer
Pesticide	chrome add-on	outlining each element on the page.
Method Draw Vector Editor	online app	SVG editor
favicon.cc	online app	favicon generator

📗 參考

• Chrome Extensions Every Developer Should Have