Web Totals
hunghg.blog

Blog / Series

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

Đọ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

00Học từ mã nguồn các web lớn: đọc code production của 28 trang web

Phần 1: trải nghiệm người dùng

01Học từ web lớn #1: Dark mode không nháy trắng khi tải trang (Gatsby)02Học từ web lớn #2: useValueByMedia, giá trị JS theo breakpoint (Toptal)03Học từ web lớn #3: Idle, exit-intent và lắc chuột (Toptal, InVision)04Học từ web lớn #4: Validate form thân thiện (Udacity, Pipedrive)05Học từ web lớn #5: Magic number, EXIF và dán ảnh khi upload (Ello)06Học từ web lớn #6: Cuộn xa vẫn nhanh với fastSmoothScroll (Telegram)07Học từ web lớn #7: Countdown có time-travel và tombstone giỏ hàng (Best Buy)

Phần 2: hiệu năng và đo lường

08Học từ web lớn #8: Hàng đợi requestAnimationFrame 3ms mỗi frame (Apple)09Học từ web lớn #9: srcset cho artwork và preconnect tự động (Apple)10Học từ web lớn #10: Quick-fetch, gọi API song song lúc tải bundle (HubSpot)11Học từ web lớn #11: Performance span và long task (Postman, Calibre)12Học từ web lớn #12: Gọi Web Worker như một hàm async (Telegram)13Học từ web lớn #13: Đếm giờ xem, giữ nhạc khớp hình (Skillshare, Simplified)

Phần 3: nhiều tab, phiên đăng nhập, cập nhật

14Học từ web lớn #14: Bầu một tab chủ cho thông báo (HubSpot, Telegram)15Học từ web lớn #15: Đồng bộ đăng nhập giữa tab, dọn cookie (Elastic, InVision)16Học từ web lớn #16: SPA tự cập nhật (Trello, Zappos, Facebook, Elastic)

Phần 4: kiến trúc

17Học từ web lớn #17: Reverse portal, đổi chỗ không remount (Zappos)18Học từ web lớn #18: Page behaviors, gắn hành vi cho trang từ CMS (Intercom)19Học từ web lớn #19: Giới hạn tần suất hiện khảo sát bằng bitmask (Outlook)20Học từ web lớn #20: Chuyển REST sang GraphQL dần dần (Coursera)

Phần 5: soạn thảo và hiển thị nội dung

21Học từ web lớn #21: Autocomplete ngay tại con trỏ (Ello, Telegram)22Học từ web lớn #22: Dark mode cho email HTML bằng CIELAB (Outlook)23Học từ web lớn #23: Thu nhỏ bảng rộng cho vừa khung đọc (Outlook)24Học từ web lớn #24: Cảnh báo quên đính kèm file (Outlook)25Học từ web lớn #25: Cắt chữ nhiều dòng chính xác (Pipedrive, Apple, Toptal)26Học từ web lớn #26: Parse ngày giờ gõ tay khoan dung (Outlook, Elastic)

Phần 6: tương tác

27Học từ web lớn #27: menuAim, rê chéo vào submenu không bị đóng (Udemy)28Học từ web lớn #28: Kéo, vuốt chung cho chuột và cảm ứng (Telegram)29Học từ web lớn #29: Phím tắt theo phạm vi, IME và bàn phím Nga (Trello)30Học từ web lớn #30: Nội suy màu khi đổi theme, khi cuộn (Telegram, Anchor)31Học từ web lớn #31: Đường gióng hút cạnh và undo/redo (Simplified)32Học từ web lớn #32: Giả lập mù màu cho cả app bằng feColorMatrix (Trello)33Học từ web lớn #33: Vạch thước theo zoom và cấp màu cho biểu đồ (Anchor, Similarweb)

Phần 7: mạng, dữ liệu và async

34Học từ web lớn #34: Ô tìm kiếm chuẩn production (Similarweb, Udemy, Pipedrive)35Học từ web lớn #35: Điều phối async kiểu latest-wins, single-flight (Glitch, Toptal)36Học từ web lớn #36: Polling thưa dần và debounce động (Trello)37Học từ web lớn #37: Cache client theo version (Similarweb, Telegram, Udemy)38Học từ web lớn #38: Upload file lớn theo lát (Outlook, Tribe)39Học từ web lớn #39: Phát video qua service worker (Telegram, Outlook)

Phần 8: hiệu năng và vận hành

40Học từ web lớn #40: TTI governor, hoãn việc phụ lúc khởi động (Outlook)41Học từ web lớn #41: Tự đo LCP, CLS, TBT và chọn bản nhẹ cho máy yếu (Udemy)

Phần 9: thuật toán và dữ liệu phía client

42Học từ web lớn #42: Three-way merge ngay trên trình duyệt (Postman)43Học từ web lớn #43: Dọn cache GraphQL bằng đếm tham chiếu (Outlook)44Học từ web lớn #44: LRU cache theo 3 cách (Apple, Similarweb, Outlook)45Học từ web lớn #45: Lọc tăng dần trong Web Worker (Similarweb)46Học từ web lớn #46: Xếp hạng gợi ý trên client, so ngầm với server (Outlook)47Học từ web lớn #47: Nối OT với editor, undo và chặn echo (Glitch)48Học từ web lớn #48: Markup riêng dịch hai chiều với HTML (Coursera)

Phần 10: thời gian, ngôn ngữ, định dạng

49Học từ web lớn #49: Xử lý giờ mùa hè không cần thư viện (Udemy, Pipedrive)50Học từ web lớn #50: Intl thực chiến cho app đa ngôn ngữ (Apple, Outlook)51Học từ web lớn #51: Kiểm tra WebVTT và bôi chọn transcript (Udemy, Coursera)

Phần 11: tương tác và giao diện

52Học từ web lớn #52: Kéo-thả trên lịch, không lệch ngày đổi giờ (Pipedrive)53Học từ web lớn #53: Focus stack cho popup lồng nhau (Outlook)54Học từ web lớn #54: Copy, cut, dán có kiểm soát (Trello, Anchor, Tribe)55Học từ web lớn #55: Khôi phục vị trí cuộn khi trang đang tải (Apple, Zappos)56Học từ web lớn #56: Lấy màu từ ảnh, chọn màu chữ (Telegram, Apple, Trello)57Học từ web lớn #57: JS đọc breakpoint từ CSS, nhận ra PWA (Ello, Apple)

Phần 12: media

58Học từ web lớn #58: Tin nhắn thoại, waveform và nén 5 bit (Telegram)59Học từ web lớn #59: Chụp frame video, canvas bị taint (Coursera, Outlook)

Phần 13: đo lường, bảo mật, vận hành

60Học từ web lớn #60: Đo màn hình đầu hiện xong, kể cả trong SPA (Zappos)61Học từ web lớn #61: Buffer analytics chờ SDK, phát hiện adblock (Best Buy)62Học từ web lớn #62: Proof-of-work trên client để chặn API ẩn danh (Udemy)63Học từ web lớn #63: Prefetch không làm sai số liệu, cờ dạng bit (Outlook)64Học từ web lớn #64: Ghép micro-frontend (Similarweb, InVision, HubSpot)