Web Totals
hunghg.blog

Web Developer · Hanoi, Vietnam

Xin chào, mình là Hùng 👋

Mình viết về Web development, JavaScript, React và System design — những gì học được từ việc xây dựng sản phẩm thực tế.

Đọc blog Github
Blogs262Bài viết chuyên sâu về frontend & system design.Issues43Custom hooks, design & rendering patterns, Git.Javascript16Câu hỏi JavaScript kèm giải thích chi tiết.ToolsPlugin & thư viện mã nguồn mở.

Bài viết mới nhất

Xem tất cả →

Series 106 bài

Học từ mã nguồn Facebook

Đọc bundle JavaScript của facebook.com, rút ra 105 kỹ thuật frontend và viết lại bằng React + TypeScript, mỗi bài có demo chạy ngay trong bài.

  • Mở đầu
  • Phần 1: hạ tầng chạy ngầm#1–#8
  • Phần 2: giao diện và SPA#9–#20
  • Phần 3: đi sâu vào bundle#21–#37
  • Phần 4: Messenger và realtime#38–#42
  • Phần 5: sản phẩm (composer, thanh toán, quảng cáo, Pages)#43–#50
  • Phần 6: hạ tầng sâu#51–#57
  • Phần 7: video và upload#58–#62
  • Phần 8: thuật toán và cấu trúc dữ liệu#63–#70
  • Phần 9: thời gian, chuỗi và URL#71–#74
  • Phần 10: hạ tầng, bảo mật và hình học#75–#82
  • Phần 11: kết nối và realtime#83–#86
  • Phần 12: bên trong Relay#87–#91
  • Phần 13: trình phát video#92–#95
  • Phần 14: Messenger và văn bản#96–#100
  • Phần 15: canvas, bản đồ và các bug kinh điển#101–#105
Xem cả series Đọc bài đầu tiên

Series 65 bài

Học từ mã nguồn các web lớn

Đọc code production của Telegram, Apple, HubSpot, Trello, Zappos, Outlook… rút ra 64 kỹ thuật frontend dùng được ngay, mỗi bài có code viết lại và demo chạy trong bài.

  • Mở đầu
  • Phần 1: trải nghiệm người dùng#1–#7
  • Phần 2: hiệu năng và đo lường#8–#13
  • Phần 3: nhiều tab, phiên đăng nhập, cập nhật#14–#16
  • Phần 4: kiến trúc#17–#20
  • Phần 5: soạn thảo và hiển thị nội dung#21–#26
  • Phần 6: tương tác#27–#33
  • Phần 7: mạng, dữ liệu và async#34–#39
  • Phần 8: hiệu năng và vận hành#40–#41
  • Phần 9: thuật toán và dữ liệu phía client#42–#48
  • Phần 10: thời gian, ngôn ngữ, định dạng#49–#51
  • Phần 11: tương tác và giao diện#52–#57
  • Phần 12: media#58–#59
  • Phần 13: đo lường, bảo mật, vận hành#60–#64
Xem cả series Đọc bài đầu tiên

Series 25 bài

Học từ mã nguồn Telegram

Đi sâu vào Telegram Web A: gửi tin lạc quan, lịch sử tin nhắn, store tự viết, animation FLIP, bố cục album, thumbnail 100 byte… mỗi bài có code viết lại và demo chạy trong bài.

  • Mở đầu
  • Phần 1: dữ liệu và đồng bộ#1–#5
  • Phần 2: animation và giao diện#6–#10
  • Phần 3: media, mobile, thông báo#11–#14
  • Phần 4: soạn tin, media, chi tiết UI#15–#24
Xem cả series Đọc bài đầu tiên

Series 21 bài

Học từ mã nguồn Udemy

Đi sâu frontend của Udemy: DRM đa hệ, video và tiến độ học, bài thi có giờ, preview code, ProseMirror, file .ics, pipeline tracking… mỗi bài có code viết lại và demo chạy trong bài.

  • Mở đầu
  • Phần 1: video và học bài#1–#6
  • Phần 2: bài tập, bài thi, lab#7–#10
  • Phần 3: editor và nội dung#11–#14
  • Phần 4: hạ tầng và trải nghiệm#15–#20
Xem cả series Đọc bài đầu tiên

Series 19 bài

Học từ mã nguồn WhatsApp Web

Đọc bundle WhatsApp Web 2020: giải mã JPEG progressive có HMAC, kho media tự co theo quota, render tin nhắn theo cửa sổ, emoji trie, chống homograph… mỗi bài có code viết lại và demo chạy trong bài.

  • Mở đầu
  • Phần 1: media và mã hoá#1–#4
  • Phần 2: lưu trữ trên trình duyệt#5–#7
  • Phần 3: danh sách tin nhắn#8–#10
  • Phần 4: soạn tin và chữ#11–#14
  • Phần 5: realtime và tiện ích#15–#18
Xem cả series Đọc bài đầu tiên
•csscoloroklch

OKLCH: Không Gian Màu "Hiểu" Mắt Người Và Cách Dùng Trong CSS Hiện Đại

Giải thích OKLCH là gì, ý nghĩa của L/C/H, vì sao nó dễ làm việc hơn HEX/RGB/HSL, cách dựng palette, gradient, dùng oklch(), color-mix(), relative color syntax và fallback cho trình duyệt cũ

Đọc bài
•architecturemicroservicesmonolith

Modular Monolith vs Microservices: Chọn Kiến Trúc Nào Cho Đội Của Bạn?

So sánh modular monolith và microservices dưới góc nhìn thực tế: cách giữ ranh giới module, deploy, scale, quy mô team, tính nhất quán dữ liệu, chi phí vận hành, debug, khi nào chọn cái nào và cách tách dần sang microservices với ví dụ TypeScript/Node

Đọc bài
•system-designapi-gatewayrate-limiting

API Gateway & Rate Limiting Trong Production: Làm Thế Nào Sống Sót Qua Một Cuộc Tấn Công DDoS 500 Gbps

Hướng dẫn toàn diện về bảo vệ API của bạn khỏi traffic spikes, bot attacks, và ngăn chặn hóa đơn AWS $15K

Đọc bài
•system-designdatabasepostgresql

Mở Rộng Database Trong Production: Từ 1 Server Đến 500 Replicas

Cách Instagram, GitHub, và Shopify scale PostgreSQL cho hàng tỷ người dùng (kèm hướng dẫn triển khai hoàn chỉnh)

Đọc bài
•system-designmicroservicesmonolith

Microservices Trong Production: Khi Nào Tách, Cách Tách, Tại Sao Hầu Hết Đội Làm Sai

Hướng dẫn toàn diện về kiến trúc microservices — trade-offs thực tế, migration patterns, chiến lược giao tiếp, và sự thật phũ phàng về khi nào KHÔNG nên dùng

Đọc bài
•system-designload-balancinghorizontal-scaling

Load Balancing & Horizontal Scaling Trong Production: Từ Một Server Đến Scale Không Giới Hạn

Hướng dẫn toàn diện về load balancing algorithms, horizontal scaling patterns, auto-scaling strategies và kiến trúc high-availability

Đọc bài