❤️fav

🔸 Code ┊ CSS ┊ Design ┊ Help ┊ Materials

• Global Functions, helper functions ⭐️, getter/setter

• DOM ⟩ $(), $all() ⭐️

• CSS ⟩ Layout, style.prop(), Color Names

• String ⟩ .escapeHTML(), .kebabToCamelCase(), .capitalize()

Code

JS

JS	DOM	Componet	Others
常用函數	$(), $all() ⭐️	<my-log>	Keyboard events
ES Modules ⭐️	Hierarchy		TS Playground
	type definitions

String
escapeHTML()

module

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

JSON

• Omatsuri ⟩ Fake data

快速鍵

• Emmet

🛠 工具

• DownGit - Download from GitHub

• Dooble Ipsum - lorem ipsum of illustrations. 👉 compare:

📗 參考

• Font Awesome Icons - Font Awesome 使用方法

💾 程式

💾 box-shadow

CSS

置中

/* centered element */
.centered-element {

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

陰影

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

font

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

reset

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

box-sizing

/* :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;
}

FA

/* ⭐️ 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);
}

📗 參考

• CSS

CSS Tools
List Style Recipes	box-shadow	Smooth Shadow ❤️	CSS reset
CSS Selectors

Design

🛠 工具

• Omatsuri - web design tools ❤️

• Tiny Helpers - web design (lots of) tools 😲

顏色

	HSL

SVG

• Haikai - SVG shapes, backgrounds, patterns (🔸 はいけい - 背景)

• Tiny helpers ⟩ SVG

• FA Icons - Font Awesome Icons

字型

• Font Awesome Icons (👉🏻 Font Awesome 使用方法)

圖示

• Font Awesome Icons (👉🏻 Font Awesome 使用方法)

符號

• Omatsuri ⟩ Symbols

• CopyChar

• Emoji Finder

🌇 截圖

Site	Note
Haikei	Haikei 🔸 はいけい - 背景： SVG shapes, backgrounds, patterns
Omatsuri	Omatsuri 🔸 おまつり - お祭り：節日慶典、嘉年華 web design tools

📗 參考

• CSSTricks ⟩ So many little design helper sites!

Help

📘 手冊

• 📗 DevDocs.io

• 📘 MDN

• 📘 TypeScript Handbook

📙 重要

• CSS Tricks

• javascript.info

素材

⭐️

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

格子

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

檔案結構

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

數學

∆ △√∞╱°

分類	符號
運算	+−⨉÷ ± √
關係	≈≠≡∈∉
集合	∪∩

圖庫

• PNG Repo

資源	說明
css.gg	免費圖示
Font Awesom icons	CSS 圖庫
flaticon	free vector icon
giphy.com	animated GIF
icon-icons

臨時工作區

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