全端開發學習資源

Blog

• 阮一峰的個人網站
• TypeScript 使用指南
• Will 保哥部落格
• 若川的博客
• 烤雞堡的筆記
• Pjchender Dev
• @tienyulin - hackmd
• Robotkang 部落格

Frontend

• Juejin 掘金
• zoo.team 前端期刊
• 書棧網
• Patterns for Frontend

Javascript

• JavaScript 教程
• 書棧網-阮一峰 ECMAScript 6 (ES6)標準入門第三版
• Dev to
• Learn-Git-in-30-days
• Javascript 事件迴圈
• H5 喚醒APP URL:schema小記
• ES2020
• js 36個手寫練習
• js prototype, proto 詳解
• 正則表達式
• js 頭號難題之一 this
• 用 JavaScript 做數獨
• 手寫 call, apply, bind 方法
• 在 Browser 下載檔案並壓縮為 Zip
• ES2016 - ES2023
• What, Why and How Static Initialization Blocks
• 簡化大量 import
• AbortController 的使用

Typescript

• TypeScript 教程
• TypeScript 巢狀物件解構類型
• Typescript Decorator
• Typescript Decorators Demo
• 基於Typescript 實現 IoC & DI
• Linting with Type Information

Web API

• matchMedia 瀏覽器相容
• Preload Prefetch Preconnect 效能優化手段
• Chrome 用 js set Cookie，只能包含 name, value, expires
• session、cookie、token、jwt的不同使用場景
• Native Web Share Files
• WebXR Device API
• MessageChannel - MDN
• BroadcastChannel - MDN
• WebAuthn 無密碼驗證-網頁上使用指紋、安全金鑰來認證
• 使用 SimpleWebAuthn 實現 Passkeys 無密碼登入
• 原生 Web 任務優先級 schedular
• Screen Wake Lock API
• CompressionStream API 壓縮檔案gzip
• CSS Custom Highlight API
• Trusted Types API 客製化編譯規則
• Web Popover API
• URL Pattern API
• Barcode Detection API
• Read clipboard with ClipboardItem

DOM

• DOM 監聽屬性變化
• Viewport width and height
• HTML 原生 Dialog 彈窗元素
• Disable HTML form/input autocomplete-autofill
• Cross Browser Autofill Form — Selected Fields
• HTML Input 限制手機彈出純數字鍵盤
• Passive event listeners 優化 scroll, touch 事件
• Viewport does not resize on iOS when showing keyboard
• MDN - ScrollTimeline
• 原生轉場動畫 View Transition

Canvas

• Canvas 庫大全 awesome-canvas
• 28款好用Canvas 庫
• p5, matterjs Examples
• requestAnimationFrame
• Live2D/CubismWebSamples
• Live2d Helper
• Live2d Widget
• Live2d Model 1
• Live2d Model 2
• MarioHtml5
• Canvas 圖片 Hover 粒子動畫
• html2canvas gray background issue

Svg

• Lottie 使用介紹
• Lottie Files 開源動畫素材

WebComponent

• Web Component 監聽屬性變化

Promise

• Promise A+ 原理
• 淺談 Promise 與 setTimeout

SideProject

• JS 消消樂

Nodejs

• 原來串接 Google Sheet API 那麼簡單?

NPM

• yarn & npm 指令對照表
• Renovate - Automated dependency updates
• Renovate - postupgradetasks 解決 dependency 衝突問題
• pnpm 安裝 vue 時使用 shamefully-hoist，修正 node_modules 安裝依賴找不到 module 的問題

Koa2

• Koa2 實戰總結教學

Express

• Express爬蟲
• Express&Koa2 中間層實踐的差別
• Parse Server 後端快速開發框架-兼容 GraphQL

Redis

• Redis 常見快取方案

Babel

• Babel 詳細入門解說

FTP

• nodejs連接ftp上傳下載

GraphQL

• GraphQL 教學系列
• Apollo Client - non-paginated read functions 預設 cache 全拿
• Apollo Client - cache read functions for paginated fields 只拿部分 cache
• Apollo Client - remove cache with "cache.evict"
• Apollo Client - remove cache with "cache.modify"
• Apollo Client - useReactiveVar not rerender UI

Audio

• Libsvm-js vector machine (aka SVM) classification and regression
• Meyda-JavaScript audio feature extraction library

WebRTC MediaStream

• Peer.js
• How To Create A Video Chat App With WebRTC
• Peer issue - switch from video/audio streaming
• WebRTC: Add audio later or disable microphone using peerJS
• WebRTC: How to replace tracks
• How to choose device camera
• OpenRelay Free WebRTC Turn Server
• Switch Media Devices Demo

Prisma

• Query by a relation exists or not
• SQLite implement "createMany"

CSS

• CSS Trick
• CSS Inspiration
• 30個重要 CSS Selector
• HTML table表格tr, td 的高度與寬度概念
• RWD Table 實現
• css scroll snap 滾動斷點
• 2022 幾個好用的 CSS 屬性
• CSS 容器查詢
• CSS 樣式架構方案
• CSS 100vh in ISO Safari overlapping handling
• Viewport Units 詳細講解 - lvh, lvw, svh, svw, dvh, dvw
• 支援在 JS 中獲取 Android, IOS 裝置瀏覽器 safe area
• @starting-style 搭配 transition-behavior: allow-discrete 讓 display: none 支援動畫
• Clipping Masking CSS
• CSS Wrapped 2024
• 用 Vue 3 打造了一套像素風組件庫，支援自訂 Paint Worklet
• css-houdini-pixel-box

Animation

• visualization-collection 一個專注於前端視覺效果的集合應用，包含CSS動效、Canvas動畫、人工智能應用等上百個案例
• CSS 曲線動畫製作教學解釋
• CSS 骰子
• @property 實現漸變背景動畫
• 鴻蒙系統 O 特效實現

TailwindCSS

• Huli - 淺談 Atomic CSS 的發展背景與 Tailwind CSS
• Atomic CSS-in-JS
• Patching Vite HMR with Tailwind-JIT(old explain of touching files in Vite)
• Gulp with tailwindcss
• Disable preflight feature for React Antd

SCSS

• Sass parent selector
• sass functions 解說

PostCSS

• PostCSS 100vh fix
• PostCSS viewport height

Git

• Git 教程
• 客製化 Git hooks with Nodejs
• Git Stash 詳細教學
• .netrc 自動部署 Git 驗證

Markdown

• CommonMark 教學
• Notion 當成 Database

Django

• django 學習指南

GO

• 30 天導入 Golang
• go 的 [] rune 和 [] byte 區別

SQL

• 50道SQL練習題及答案與詳細分析

Nginx

• Nginx 入門到實踐

Web Assembly

• StackBlitz Web Container
• container to wasm
• WebAssembly：無需容器就能運行 Docker

Traefik

• 基礎理論
• Docker 範例
• 配置介紹
• Routing 介紹
• HTTPS & TLS
• Dashboard

Vue

• Vuejs MVVM 原理實作解析
• Vue2 作者講解
• Vue Composition 練習
• Vue3 ref 提案
• Vue3 12 種通訊方式
• 教你使用 koa2 + vite + ts + vue3 + pinia 構建前端 SSR 基礎
• 解析 snabbdom 源碼
• Vue Test Utils
• Vue Test Hooks
• Awesome Vite - templates
• Vue3 directive, nav guard 權限控制範例
• Making the Virtual DOM. Faster.
• Keep alive 的坑

React

原理

• React 18
• React 入門到進階
• React VS Vue
• React.js 性能快的真正原因
• 「react進階」一文吃透react-hooks原理
• React與Vue狀態更新原理對比
• React Diff 算法
• React Life Cycle
• React源碼 commit階段詳解
• React useEffect 深入重複調用問題
• 有react fiber，为什么不需要vue fiber
• 手寫 React16 原始碼
• React18 — useSyncExternalStore
• React Suspense 運作原理
• React Server Component - Demo
• How React Server Component Work?
• React Server Component 實作教學範例

實作

• Import Svg into Next.js
• Svgo Configuration
• React setState 最新值獲取
• 為執行細節寫下測試-翻譯
• React Memo 使用範例
• React I18n - Trans component 在字串中插入自定義組件
• useImperativeHandle 與子組件互動
• Framer-Motion 動態元素高度動畫
• Zustand computed getter 討論
• 為什麼 Redux Toolkit 就是今天如何使用 Redux
• 用 Vite 打造一個 React component library

Nextjs

• Next.js Styled-JSX Sass Plugin
• getInitialProps vs. getServerSideProps
• MSW with Nextjs mocking issue
• Strongly Typed Google Analytics V4 with Next.js
• Next.js Automatic Static Optimization 自動靜態壓縮處理
  • 此行為預設讓頁面以 static 方式壓縮，提升效能，但會無法在 client side 拿到 publicRuntimeConfig
• Redirect to another page toaster not come
• Environment variables are in-lined to next.config.js at build time
• Fun With Next.js 13 Server Components
• Next.js Standalone Output with Docker - example
• Next.js with Echartjs unexpect token export
• Next13 with Apollo Client
• Cannot pass objects to <Trans> with React 18 type definitions
• Next13 app dir with I18next
• Next13 use @svgr/webpack
• Next getServerSideProps Cache

Vinxi

• Building React metaframework with Vinxi

Webpack

• 手寫 Webpack 核心原理

Github

• github page 靜態部署教學
• Probot - deploy Github APP with Nodejs
• Github Action - Publish Packages
• Github Action - Output(Environment Files)
• Act - Run your GitHub Actions locally
• Github action composite feature
• Github Copilot code review

LIFF

• Liff app redirect flow

Browser

• Chrome - override user agent
• 現代 Browser 已針對 resize event 進行 debounced, 無需再用 requestAnimationFrame 包裹
• URL末尾加不加”/“有什麼差別？

Computer

• 作業系統考題
• 資料結構與演算法
• 用 JS 學習演算法
• Quick Sort
• 密碼學中的三兄弟 — Encode、Encrypt 跟 Hash
• Signal 創始人：開發了兩個 dApps 後，我發現 Web3 可能是偽命題
• IPFS 服務與工具
• Unix Cron time format
• lightweight DNS server - dnsmasq
• LIFF local 測試方法
• Useful Linux Commands
• Linux Ubuntu環境(docker : Ubuntu 18.04)報錯libc.so.6：version GLIBC_2.28 not found
• Rewrite previous commit username or email
• What is ADR(architecture-decision-record)?
• Web 回流與重繪

Leetcode

• Leetcode 題解
• Leetcode 75 Questions
• Leetcode 75 Questions Details
• Patterns

Eslint/Prettier

• Prettier好用屬性介紹

Terminal

• Command line tool 教學（zsh）
• Windows & ZSH

Deploy

• Ngrok
• Render
• Cyclic
• GCP - cloud run cloud SQL demo
• Terraform 自動化的基礎架構介紹
• Alpine, Slim, Bullseye, Bookworm, Noble — Differences in Docker Images Explained

Code tracing, security

• Opentelemetry
• Sonarcube
• LighthouseCI
• Sentry
• Grafana
• Grafana - Faro Web SDK
• sentry/next cause NextJS productionBrowserSourceMaps: false not work

Vscode

• Code Snippet
• 官方 Visual Studio Code 快速鍵一覽表
• VSCode Server

Blockchain

• What is Uniswap?

Drawing

• 二次元Q版人物動作姿勢大全
• 24种萌萌的Q版人物动态画法

ChatGPT

• frequency-vs-presence-penalty

職場相關

• 職場霸凌事前、事後，雇主馬虎不得！律師告訴你處理重點
• 如何辨識-自戀型人格障礙(NPD)
• 非暴力溝通四步驟

The Great Reset

• 王大師大重置分享會內容