# fav

🔸 [Code](#code) ┊ [CSS](#css) ┊ [Design](#design) ┊ [Help](#help) ┊ [Materials](#resources)

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

## Code

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

| JS                                                                       | DOM                                                                                    | Componet                                                                                      | Others                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [常用函數](https://lochiwei.gitbook.io/web/master/broken-reference)          | [$(), $all()](https://lochiwei.gitbook.io/web/browser/dom/querying-elements/dom) ⭐️    | [\<my-log>](https://lochiwei.gitbook.io/web/component/examples/less-than-my-log-greater-than) | [Keyboard events](https://omatsuri.app/events-keycode)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| [ES Modules](https://lochiwei.gitbook.io/web/js/module/es#cheatsheet) ⭐️ | [Hierarchy](https://lochiwei.gitbook.io/web/browser/dom/hierarchy)                     |                                                                                               | [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()](https://lochiwei.gitbook.io/web/js/val/prim/str/method/escapehtml) |   |   |
| {% 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](https://lochiwei.gitbook.io/web/css/font/font-awesome) 使用方法
  {% 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](https://lochiwei.gitbook.io/web/css)

| 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](https://lochiwei.gitbook.io/web/css/rules/css-reset) |
| [CSS Selectors](https://lochiwei.gitbook.io/web/css/selectors)   |                                                             |                                               |                                                                  |
| {% 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="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mh7O_YmExIh5_NLx37W%2F-Mh7PpH4lBoGHtOql8gb%2Fcolor_wheel.png?alt=media&#x26;token=454db2e5-d47a-4bfe-9f41-f19fcbf83d55" alt="" data-size="original"> | <p></p><p><a href="../css/values/colors/hsl">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](https://lochiwei.gitbook.io/web/css/font/font-awesome) 使用方法)
  {% endtab %}

{% tab title="圖示" %}

* [Font Awesome Icons](https://fontawesome.com/v5.15/icons?d=gallery\&p=2) (👉🏻 [Font Awesome](https://lochiwei.gitbook.io/web/css/font/font-awesome) 使用方法)
  {% 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="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mkj11J3TvNXLDCQlF6a%2F-Mkj4wQWPnJM1I-9OCCO%2Fhaikei.png?alt=media&#x26;token=511becd4-4fbb-4366-b394-274e8c81326a" 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="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mkj6P5UeEOiibKYAUrV%2F-Mkj7rNMiP_j0E2xfvCN%2Fomatsuri.png?alt=media&#x26;token=7301efb1-0e16-41c1-ab40-cfa106b55898" alt="" data-size="original"> </p> | <p><strong>Omatsuri</strong><br>🔸 <a href="https://papago.naver.com/?sk=ja&#x26;tk=zh-TW&#x26;st=%E3%81%8A%E3%81%BE%E3%81%A4%E3%82%8A">おまつり</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 %}