Blog

Bài viết262

Chia sẻ kinh nghiệm về frontend, JavaScript, React và thiết kế hệ thống trong môi trường production.

Series

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 8 bài

System Design trong production

Từ thiết kế API và database tới caching, mở rộng database, load balancing, rate limiting, message queue và chọn giữa microservices hay modular monolith.

Nền tảng: API và database
Tăng tốc và mở rộng dữ liệu#2–#3
Mở rộng lưu lượng#4–#5
Bất đồng bộ và kiến trúc#6–#8

Xem cả series Đọc bài đầu tiên

Series 3 bài

AI cho lập trình viên

Làm việc với AI agent khi viết code (verification, trust ladder, để agent tự merge) và đưa model AI chạy thẳng trong trình duyệt.

Làm việc với AI agent#1–#2
AI ngay trong trình duyệt

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

Bài viết khác

Oct 23, 2026•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ũ

Series

Học từ mã nguồn Facebook

System Design trong production

AI cho lập trình viên

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

Học từ mã nguồn Telegram

Học từ mã nguồn Udemy

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

Bài viết khác

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

Instance Hook Pattern

Tìm hiểu về Tree shaking trong JavaScript

Tìm hiểu về require và import trong javascript

SVG icon with pure css

React Provider Hell

Example Callstack And Event loop

Centering in CSS

Vscode extensions useful

Convert svgs file to jsx by one script

HTML Input Type

Scroll Restoration in Nextjs

Xử lý form với Ant Design (Phần 1)

The Most Popular Build Tools for Front-end Developers in 2023

Markdown Content