# tools

{% tabs %}
{% tab title="JS" %}
* [VSCode](https://vscode.dev/) (web)
{% endtab %}

{% tab title="CSS" %}
* [Flexbox Froggy](https://flexboxfroggy.com/) :star:&#x20;
* [Grid Garden](https://cssgridgarden.com/) :star:&#x20;
{% endtab %}

{% tab title="JSON" %}
* [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related) (Chrome plug-in)
{% endtab %}

{% tab title="🛠 工具" %}
* [Web Sequence Diagrams](https://www.websequencediagrams.com/) ([demo](https://www.websequencediagrams.com/cgi-bin/cdraw?lz=YnJvd3Nlci0-c2VydmVyOiBIVFRQIEdFVCBodHRwczovL3N0dWRpZXMuY3MuaGVsc2lua2kuZmkvZXhhbXBsZWFwcC9ub3RlcwoAOwYtLT4ATAc6IEhUTUwtY29kZQoAIkRtYWluLmNzAFUUABIJAB9JagBOGWpzCgpub3RlIG92ZXIgAIFkCACBWgggc3RhcnRzIGV4ZWN1dGluZyBqcwCBfQZ0aGF0IHJlcXVlc3RzIEpTT04gZGF0YSBmcm9tIACCdwYgCmVuZCBub3RlCgCBbUVkYXRhLmpzb24AgwkTW3sgY29udGVudDogIkhUTUwgaXMgZWFzeSIsIGRhdGU6ICIyMDE5LTA1LTIzIiB9LCAuLi5dAIFeHQCBbgZlcyB0aGUgZXZlbnQgaGFuZGxlcgCBdQhuZGVycwCBXAVzIHRvIGRpc3BsYXkAgWwK\&s=default))
* [Web Platform Tests](https://web-platform-tests.org/) ([wpt.live](https://wpt.live/))
* [bonsai](https://bonsaibrowser.com/) - web browser for research
{% endtab %}

{% tab title="素材" %}
* [lorem.space](https://lorem.space/) - placeholder images
* [Lorem Picsum](https://picsum.photos/) - Lorem Ipsum for photos.
* [IFN](https://illustration-free.net/) (illustration-free.net) - free icons
{% endtab %}

{% tab title="字體" %}
* 麥當勞薯條體：[介紹](https://www.bnext.com.tw/article/65888/mcdonalds-fonts)、[產生器](https://andyh0913.github.io/FrenchFries-Font-Converter/)、[下載](https://github.com/mcdtaiwan/McDonalds_Fries_Font)
* 麥克雞塊體：[介紹](https://www.shoppingdesign.com.tw/post/view/6007)、[產生器](https://andyh0913.github.io/ChickenMcNuggets-Font-Converter/)[下載](https://github.com/mcdtaiwan/Chicken_McNuggets)
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="💎 資源" %}
| name                                                                                                                             | type          | notes                                        |
| -------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------- |
| [Octotree](https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc/related)         | chrome add-on | GitHub code tree                             |
| [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg/related?hl=en)                | chrome add-on | shows you what websites are built with.      |
| [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)                        | chrome add-on | a toolbar with various web developer tools.  |
| [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en)                | chrome add-on | emulate various screen resolutions.          |
| [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)                            | chrome add-on | identify fonts on web pages.                 |
| [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)                              | chrome add-on | Eyedropper, Color Picker, Gradient Generator |
| [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en)                          | chrome add-on | CSS property viewer                          |
| [Pesticide](https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi/related?hl=en)  | chrome add-on | outlining each element on the page.          |
| [Method Draw Vector Editor](https://editor.method.ac/)                                                                           | online app    | SVG editor                                   |
| [favicon.cc](https://www.favicon.cc)                                                                                             | online app    | favicon generator                            |
{% endtab %}

{% tab title="📗 參考" %}
* [Chrome Extensions Every Developer Should Have](https://dev.to/developerkaren/chrome-extensions-every-developer-should-have-doh)
{% endtab %}
{% endtabs %}
