From e29a3b9268878a1a38c7a9a439e3cfd27db6a4a2 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Fri, 13 Mar 2026 15:42:19 +0700 Subject: [PATCH] feat(content): add Newsletter #88 Add new newsletter post with: - A Broken Heart: Safari bug with Noto Color Emoji - Wrapping Code Comments: relative column width - How I Use Claude Code: research-plan-implement workflow - 6 system design images + 1 video in Bonus --- content/post/2026/03/13/index.md | 64 ++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 content/post/2026/03/13/index.md diff --git a/content/post/2026/03/13/index.md b/content/post/2026/03/13/index.md new file mode 100644 index 0000000..c0b9742 --- /dev/null +++ b/content/post/2026/03/13/index.md @@ -0,0 +1,64 @@ +--- +title: "Newsletter #88" +date: 2026-03-13 +tags: ["AI-Assisted"] +categories: ["Newsletter"] +--- + +*Mời bạn thưởng thức Newsletter #88.* + +## [A Broken Heart](https://allenpike.com/2026/a-broken-heart/) + +Allen Pike chia sẻ một câu chuyện debug thú vị khi dashboard của ứng dụng web đột nhiên chậm đi 10 lần - từ 1 giây lên 10 giây. Sau khi loại trừ React (vốn bị nghi ngờ đầu tiên), anh phát hiện ra Safari đang dành 94% CPU cho... Layout? + +Bằng phương pháp binary search với sự hỗ trợ của Claude, anh tìm ra thủ phạm: một emoji trái tim ❤️ trong nút "Send Feedback". Hóa ra font **Noto Color Emoji** của Google - được sử dụng để render emoji nhất quán trên các nền tảng - gây ra bug nghiêm trọng trong Safari, khiến mỗi lần layout mất 1600ms thay vì 2ms bình thường. + +Điều thú vị là bug này chỉ ảnh hưởng một số emoji cụ thể (❤️, 🤯) trong khi các emoji khác (🧺, 🫠) vẫn render nhanh bình thường. Giải pháp tạm thời: liệt kê "Apple Color Emoji" trước Noto Color Emoji trong font-family. + +**Điểm chính:** +- Font Noto Color Emoji sử dụng COLRv1 spec, fallback sang SVG trên Safari +- Bug nằm trong CoreSVG của Apple, đã được báo cáo cho WebKit team +- Coding agent giúp tạo minimal repro case nhanh hơn nhiều so với thủ công +- Câu chuyện thú vị về cách AI vừa là nguyên nhân (gợi ý dùng font này) vừa là giải pháp (giúp debug) + +## [Wrapping Code Comments](https://matklad.github.io/2026/02/21/wrapping-code-comments.html) + +Một bài viết ngắn nhưng thú vị từ matklad về việc wrap code và comments. Tác giả nhận ra rằng code và comments nên được wrap ở độ rộng khác nhau: code ở khoảng 100 cột (để vừa 2 editor cạnh nhau), nhưng nội dung comments nên wrap ở 60-70 cột để dễ đọc hơn. + +Điều quan trọng là comments nên wrap **tương đối** so với vị trí bắt đầu của comment, không phải tuyệt đối. Ví dụ: comment ở top-level có thể rộng, nhưng comment lồng sâu trong code nên hẹp hơn nhưng vẫn giữ độ rộng nội dung giống nhau. + +**Điểm chính:** +- Giới hạn code ở 100 cột, nội dung comments ở 60-70 cột +- Comments nên wrap tương đối theo vị trí, không tuyệt đối +- VS Code và Emacs đều không hỗ trợ tốt relative wrapping +- Soft-wrapping không thể wrap đúng nếu không hiểu ý nghĩa text (ví dụ markdown lists) + +## [How I Use Claude Code](https://boristane.com/blog/how-i-use-claude-code/) + +Boris Tane chia sẻ workflow 9 tháng sử dụng Claude Code với nguyên tắc cốt lõi: **không bao giờ để Claude viết code cho đến khi đã review và approve plan**. Workflow gồm 3 phase: + +**Phase 1 - Research:** Yêu cầu Claude đọc sâu codebase và viết báo cáo vào `research.md`. Từ khóa quan trọng: "deeply", "in great details", "intricacies" - để Claude không chỉ đọc hời hợt. + +**Phase 2 - Planning:** Tạo `plan.md` chi tiết, sau đó thêm inline notes để sửa, reject approaches, thêm constraints. Chu trình annotation này lặp 1-6 lần với guard "don't implement yet". + +**Phase 3 - Implementation:** Khi plan đã sẵn sàng, một prompt duy nhất: "implement it all. mark completed in plan. don't stop until done." + +**Điểm chính:** +- File markdown là shared mutable state giữa human và AI +- Annotation cycle inject domain knowledge mà Claude không có +- Single long session tốt hơn split sessions - context được build dần +- Implementation nên boring - creative work đã xong ở planning phase +- "I want implementation to be boring" - tất cả decisions đã được validate + +### Bonus + +**Images:** +![RabbitMQ vs Kafka vs Pulsar](https://substackcdn.com/image/fetch/$s_!h2M_!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1d6d88ea-4355-4f29-96fa-9770907beebb_2360x2960.png) +![REST vs GraphQL](https://substackcdn.com/image/fetch/$s_!8P-v!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6039d506-e02f-4313-ab97-2c04f8c94d90_2360x2960.png) +![Eventual Consistency in Modern Databases](https://substackcdn.com/image/fetch/$s_!yela!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ac3310f-e380-48c2-93ff-051f7606b533_2250x2624.png) +![Strong Consistency In Databases](https://substackcdn.com/image/fetch/$s_!vB9v!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbc02c74f-e91f-438a-8ad8-d5ba6831e7f0_2250x2624.png) +![PostgreSQL versus MySQL](https://substackcdn.com/image/fetch/$s_!h8d0!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc5f67fe5-0efa-4fc6-98da-d176b60b1a92_2508x3000.jpeg) +![Network Protocols Explained](https://substackcdn.com/image/fetch/$s_!_roW!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdbdb9cae-3bda-4a62-9077-3f9d1e13fede_2360x2960.jpeg) + +**Videos:** +[Video: What Is Redis Really About? - ByteByteGo](https://www.youtube.com/watch?v=z_NbVtbgBJw)