> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/master/fav.md).

# fav

🔸 [Code](/web/master/fav.md#code) ┊ [CSS](/web/master/fav.md#css) ┊ [Design](/web/master/fav.md#design) ┊ [Help](/web/master/fav.md#help) ┊ [Materials](/web/master/fav.md#resources)

* [Global Functions](/web/appendix/custom.md), [helper functions](/web/appendix/custom/helper-functions.md) ⭐️, [getter/setter](/web/js/val/class/member/getter-setter.md)
* DOM ⟩  [$(), $all()](/web/browser/dom/querying-elements/dom.md) ⭐️
* CSS ⟩ [Layout](/web/css/layout/system.md#versions), [style.prop()](/web/browser/dom/type/cssstyledeclaration.md), [Color Names](https://www.w3schools.com/colors/colors_names.asp)
* String ⟩ [.escapeHTML()](/web/js/val/prim/str/method/escapehtml.md), [.kebabToCamelCase()](/web/js/val/prim/str/method/.kebabtocamelcase.md), [.capitalize()](/web/js/val/prim/str/method/.capitalize.md)

## Code

{% tabs %}
{% tab title="JS" %}

| JS                                               | DOM                                                                                    | Componet                                                              | Others                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------------ | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [常用函數](broken://pages/-MjURf8KklL0F8uTZVTs)      | [$(), $all()](/web/browser/dom/querying-elements/dom.md) ⭐️                            | [\<my-log>](/web/component/examples/less-than-my-log-greater-than.md) | [Keyboard events](https://omatsuri.app/events-keycode)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| [ES Modules](/web/js/module/es.md#cheatsheet) ⭐️ | [Hierarchy](/web/browser/dom/hierarchy.md)                                             |                                                                       | [TS Playground](https://www.typescriptlang.org/play?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCoASMFmgY7p7ehCTkVOle4jUMdRLYTqCc8LEZzCZmoNJODPHFZZXVtZYYkAAeRJTInDQS8po+rf40gnjbDKv8LqD2jpbYoACqAEoAMsK7sUmxkGSCc+VVQQuaTwVb1UBrDYULY7PagbgUZLJH6QbYmJAECjuMigZEMVDsJzCFLNXxtajBBCcQQ0MwAUVWDEQNUgADVHBQGNJ3KAALygABEAAkYNAMOB4GRogLFFTBPB3AExcwABT0xnM9zsyhc9wASmCKhwDQ8ZC8iElzhB7Bo3zcZmY7AYzEg-Fg0HUiS58D0Ii8AoZTJZggFSRxAvADlQAHJhAA5SASAVBFQAeW+ZF2gldWkgx1QjgUrmkeFATgtOlGWH0KAQiBhwiudokkuiIgMHBx3RYbC43CCJSAA) |
|                                                  | [type definitions](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts) |                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

| String                                                    |   |   |
| --------------------------------------------------------- | - | - |
| [escapeHTML()](/web/js/val/prim/str/method/escapehtml.md) |   |   |
| {% endtab %}                                              |   |   |

{% tab title="module" %}

```markup
<!-- ⭐️ external module script -->
<script type="module" src="script.js"></script>
```

{% endtab %}

{% tab title="JSON" %}

* Omatsuri ⟩ [Fake data](https://omatsuri.app/fake-data-generator)
  {% endtab %}

{% tab title="快速鍵" %}

* [Emmet](https://docs.emmet.io/cheat-sheet/)
  {% endtab %}

{% tab title="🛠 工具" %}

* [DownGit](https://minhaskamal.github.io/DownGit/#/home) - Download from GitHub
* [Dooble Ipsum](https://doodleipsum.com/) - lorem ipsum of illustrations. 👉 compare:&#x20;
  {% endtab %}

{% tab title="📗 參考" %}

* [Font Awesome Icons](https://fontawesome.com/v5.15/icons?d=gallery\&p=2) - [Font Awesome](/web/css/font/font-awesome.md) 使用方法
  {% endtab %}

{% tab title="💾 程式" %}
💾 [box-shadow](https://replit.com/@pegasusroe/box-shadow#style.css)
{% endtab %}
{% endtabs %}

## CSS

{% tabs %}
{% tab title="置中" %}

```css
/* centered element */
.centered-element {

  margin: 0;
  
  /* ⭐️  child 跟隨 parent 的坐標系   */
  position: absolute;
  
  /* ⭐️  垂直水平置中   */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

{% endtab %}

{% tab title="陰影" %}

```css
/* ⭐️ inset shadow */
box-shadow: 2px 2px 5px 0px #404040 inset;
```

{% endtab %}

{% tab title="font" %}

```css
:root { 
    font-size: calc(1rem + 0.5vw);     /* ⭐️ 字體隨螢幕變大 */
}
```

{% endtab %}

{% tab title="reset" %}

```css
/* reset */
* {
    padding: 0;
    margin: 0;
}
```

{% endtab %}

{% tab title="box-sizing" %}

```css
/* :root = html (with higher specificity) */
:root { 
    box-sizing: border-box; 
}

/* "*" doesn't include pseudo-elements */
*, ::before, ::after {
    /* box-sizing isn’t normally an inherited property, */
    /* use `inherit` to force it.                       */
    box-sizing: inherit;
}
```

{% endtab %}

{% tab title="FA" %}

```css
/* ⭐️ import Font Awesome */
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css");

/* -- custom styling for all icons -- */
.fas, .fab {
    border: 1px solid black;
    font-size: 48px;
    background-color: white;
    color: black;
}

/* -- custom styling for specific icons -- */
.fa-facebook {
    color: rgb(59, 91, 152);
}
```

{% endtab %}

{% tab title="📗 參考" %}

* [CSS](/web/css.md)

| CSS Tools                                                        |                                                             |                                               |                                          |
| ---------------------------------------------------------------- | ----------------------------------------------------------- | --------------------------------------------- | ---------------------------------------- |
| [List Style Recipes](https://css-tricks.com/list-style-recipes/) | [box-shadow](https://observablehq.com/@lochiwei/box-shadow) | [Smooth Shadow](https://shadows.brumm.af/) ❤️ | [CSS reset](/web/css/rules/css-reset.md) |
| [CSS Selectors](/web/css/selectors.md)                           |                                                             |                                               |                                          |
| {% endtab %}                                                     |                                                             |                                               |                                          |
| {% endtabs %}                                                    |                                                             |                                               |                                          |

## Design

{% tabs %}
{% tab title="🛠 工具" %}

* [Omatsuri](https://omatsuri.app/) - web design tools ❤️
* [Tiny Helpers](https://tiny-helpers.dev/) - web design (lots of) tools 😲
  {% endtab %}

{% tab title="顏色" %}

|                                                                     |                                                             |
| ------------------------------------------------------------------- | ----------------------------------------------------------- |
| <img src="/files/-Mh7PpH4lBoGHtOql8gb" alt="" data-size="original"> | <p></p><p><a href="/pages/-Mh7NQJR11I73xLHYblO">HSL</a></p> |
| {% endtab %}                                                        |                                                             |

{% tab title="SVG" %}

* [Haikai](https://app.haikei.app/) - SVG shapes, backgrounds, patterns (🔸 [はいけい](http://naver.me/FJHKfMhV) - 背景)
* Tiny helpers ⟩ [SVG](https://tiny-helpers.dev/svg/)
* [FA Icons](https://faicons.dev/?ref=tiny-helpers) - Font Awesome Icons
  {% endtab %}

{% tab title="字型" %}

* [Font Awesome Icons](https://fontawesome.com/v5.15/icons?d=gallery\&p=2) (👉🏻 [Font Awesome](/web/css/font/font-awesome.md) 使用方法)
  {% endtab %}

{% tab title="圖示" %}

* [Font Awesome Icons](https://fontawesome.com/v5.15/icons?d=gallery\&p=2) (👉🏻 [Font Awesome](/web/css/font/font-awesome.md) 使用方法)
  {% endtab %}

{% tab title="符號" %}

* Omatsuri ⟩ [Symbols](https://omatsuri.app/html-symbols)
* [CopyChar](https://copychar.cc/symbols/)
* [Emoji Finder](https://emojifinder.com/)
  {% endtab %}

{% tab title="🌇 截圖" %}

|                                                              Site                                                              | Note                                                                                                                                                           |
| :----------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><a href="https://app.haikei.app/">Haikei</a></p><p><img src="/files/-Mkj4wQWPnJM1I-9OCCO" alt="" data-size="original"> </p> | <p><strong>Haikei</strong><br>🔸 <a href="http://naver.me/FJHKfMhV">はいけい</a> - 背景：<br></p><p>SVG shapes, backgrounds, patterns </p>                            |
| <p><a href="https://omatsuri.app/">Omatsuri</a></p><p><img src="/files/-Mkj7rNMiP_j0E2xfvCN" alt="" data-size="original"> </p> | <p><strong>Omatsuri</strong><br>🔸 <a href="https://papago.naver.com/?sk=ja&#x26;tk=zh-TW&#x26;st=おまつり">おまつり</a> - お祭り：節日慶典、嘉年華<br></p><p>web design tools</p> |
|                                                          {% endtab %}                                                          |                                                                                                                                                                |

{% tab title="📗 參考" %}

* CSSTricks ⟩ [So many little design helper sites!](https://css-tricks.com/so-many-little-design-helper-sites/)
  {% endtab %}
  {% endtabs %}

## Help <a href="#help" id="help"></a>

{% tabs %}
{% tab title="📘 手冊" %}

* 📗 [DevDocs.io](https://devdocs.io/)
* 📘 [MDN](https://developer.mozilla.org/en-US/)
* 📘 [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
  {% endtab %}

{% tab title="📙 重要" %}

* [CSS Tricks](https://css-tricks.com/)
* [javascript.info](https://javascript.info/intro?map)
  {% endtab %}
  {% endtabs %}

## 素材 <a href="#resources" id="resources"></a>

{% tabs %}
{% tab title="⭐️" %}

```
⋯ «» 
╭──⭐️──╮  // ╮
╰──⭐️──╯  // ⭐️
       // ╯
```

{% endtab %}

{% tab title="格子" %}

```
┌──────┐
│ text │
└──────┘
```

{% endtab %}

{% tab title="檔案結構" %}

```
root
  ├ index.html
  ├ style.css
  ├ calc-app.js
  ├ calc-app-styles.css
  └ Calculator.js
  
root
  ├ index.html
  ├ style.css
  ├ calc-app ──┬ calc-app.js
  │            ├ calc-app-styles.css
  │            └ Calculator.js
  └ calc-app ──┬ calc-app.js
               ├ calc-app-styles.css
               └ Calculator.js
```

{% endtab %}

{% tab title="數學" %}
∆ △√∞╱°&#x20;

| 分類           | 符號       |
| ------------ | -------- |
| 運算           | +−⨉÷ ± √ |
| 關係           | ≈≠≡∈∉    |
| 集合           | ∪∩       |
| {% endtab %} |          |

{% tab title="圖庫" %}

* [PNG Repo](https://www.pngrepo.com/)

| 資源                                                                              | 說明               |
| ------------------------------------------------------------------------------- | ---------------- |
| [css.gg](https://css.gg/app)                                                    | 免費圖示             |
| [Font Awesom](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free) icons | CSS 圖庫           |
| [flaticon](https://www.flaticon.com/)                                           | free vector icon |
| [giphy.com](https://giphy.com/)                                                 | animated GIF     |
| [icon-icons](https://icon-icons.com/)                                           |                  |
| {% endtab %}                                                                    |                  |

{% tab title="臨時工作區" %}

```
root
  ├ index.html
  ├ style.css
  ├ calc-app.js
  ├ calc-app-styles.css
  └ Calculator.js
  
root
  ├ index.html
  ├ style.css
  └ calc-app ──┬ calc-app.js
               ├ calc-app-styles.css
               └ Calculator.js
```

{% endtab %}
{% endtabs %}