ztrehagem/frontend_knowledge.md

## frontend_knowledge.md

      
    Raw
  

              frontend_knowledge.md
            
          
    MDN


mdn

IE, Safari


Can I use
大抵のものは polyfill があるので、自前実装する前に調べる
互換性の維持には polyfill を活用し、なるべく Web 標準から離れないようにしよう

CSS


Custom Properties
cssdb
dark mode
safe area

メタ CSS


PostCSS
Sass, Less, Stylus

CSS アーキテクチャ


BEM
コンポーネントに margin をつけるな

メディアクエリ


matchMedia
(hover: hover)

SEO


title
canonical
h1-6
構造化データ

多言語化 (internationalization, i18n)


<link hreflang="">
<html lang="">

OGP


https://ogp.me/

アクセシビリティ (accessibility, a11y)


ARIA
キーボード, マウス, タッチディスプレイ
読み上げ機能

CMS


動的CMS, 静的CMS
データベース

SPA, SSR, SSG


SPA (Single Page Application)

JSによる仮想的なページ遷移や、部分的にHTMLを書き換えることで動作するサイト


SSR (Server Side Rendering)

サーバがHTMLを出力すること
対してブラウザ上でJSによってHTMLを生成することを CSR (Client Side Rendering) という


SSG (Static Site Generation)

静的な HTML, CSS, JS をあらかじめ生成しておくこと。そのまま Web サーバに配置することで Web サイトとして動作する。


HTTP


HTTP/1.1
HTTP/2
HTTP/3, QUIC
WebSocket

暗号化


HTTPS
証明書, 認証局
公開鍵暗号
E2EE

API


API (Application Programming Interface)

Web フロントエンドの文脈では、バックエンドとの接点のことを言う。


RESTful API
GraphQL

ログイン, 認証


一般的なセッション
JWT
OpenID
OAuth
WebAuthn

Cookie


3rd party cookie
SameSite

Resource Loading


preload
defer, async

ストレージ


LocalStorage
SessionStorage
IndexedDB

Web Components


Shadow DOM
Custom Elements

Background Process


Web Workers
Service Worker
PWA
Push API

ネットワーク


CORS
CDN, Edge Computing

トランスパイル


Babel

ビルド・バンドル


Webpack
Rollup
Snowpack, Vite

ES Modules


Tree Shaking

型システム


TypeScript

アーキテクチャ


MVC
MVVM
Flux

ランタイム


Node.js
Deno

入力


<input>

type="*"
オートコンプリート


<button>

type="button"
type="submit"


<form novalidate>

UIコンポーネント


モーダル
トースト
カルーセル
アコーディオン
プルダウン

iframe


iframe でできること、できないこと
<iframe srcdoc="">

GTM, GA

favicon, ショートカットアイコン

アドレスバーカラー (Android)