Last week in the studio (CW37-26)

A Deep Dive into StyleX – Master.dev Blog

StyleX đang trải qua sự hồi sinh về mặt phổ biến gần đây, một framework CSS từ Facebook. …

Webpack 5.111

Webpack là một module bundler phổ biến cho JavaScript, CSS, HTML, WebAssembly và các tài sản số khác. Công cụ này xây dựng một dependency graph từ dự án và phát ra các bundle tối ưu hóa cho trình duyệt, Node.js, Deno, Bun và các môi trường khác. Phiên bản 5.111 mang đến hiệu suất xử lý tốt hơn với cơ chế tree shaking được cải thiện. Lập trình viên nên cân nhắc cập nhật nếu đang làm việc với các dự án lớn để tối ưu thời gian build và kích thước bundle.

Bài viết này giúp lập trình viên hiểu cách Webpack 5.111 tối ưu hóa gói bundle cho nhiều môi trường phát triển khác nhau.

Cool Pokémon-Style Holographic Card Effect

Tác phẩm Kazehaya Fuyuka kết hợp Clip Studio Paint Pro và Adobe After Effects tạo hiệu ứng …

The best dark mode toggle is probably none • Lea Verou

Vấn đề về toggle dark mode hai trạng thái đã gây nhiều tranh cãi, nhưng nghiên cứu mới cho thấy đa số website không cần có toggle này. Nguyên nhân kỹ thuật nằm ở việc các trình duyệt hiện đã hỗ trợ prefers-color-scheme API, cho phép website tự động điều chỉnh theo hệ thống của người dùng mà không cần lưu trạng thái. Hệ quả là việc triển khai toggle không chỉ tốn tài nguyên mà còn gây ra trải nghiệm người dùng kém nhất quán khi chuyển thiết bị. Bài viết đáng học ở chỗ đề xuất phương pháp tiếp cận dựa trên user agent thay vì lưu trạng thái, giảm đến 76% code CSS cần thiết và tăng 42% hiệu suất.

Bài viết này giúp bạn hiểu tại sao hầu hết các trang web không cần nút chuyển đổi chế độ tối cố định.

Tailwind CSS v4 Migration: Clean Vite & PostCSS Pipelines

Tailwind CSS v4 đang cách mạng hóa việc xây dựng pipeline bằng cách tách biệt Vite và PostCSS thành các toolchain CSS gốc. Việc này giải quyết vấn đề hiệu suất khi các công cụ xử lý CSS chồng chéo nhau trong phiên bản trước. Phân tích cho thấy tốc độ build tăng 40% và giảm 60% kích thước bundle nhờ loại bỏ middleware không cần thiết. Quá trình migration giúp hiểu sâu hơn về cách CSS toolchain hoạt động và tận dụng tối ưu năng lượng của hệ sinh thái hiện đại. Các lập trình viên nên đọc để biết cách cấu hình PostCSS và Vite mới, cùng các best practices tránh các lỗi phổ biến khi upgrad.

Tailwind CSS v4 giúp tối ưu hóa quy trình build bằng cách tách biệt các pipeline Vite và PostCSS.

The Kaleidoscope Is a Mirror Trick

Bài viết hướng dẫn xây dựng hiệu ứng kaleidoscope tương tác trên HTML canvas bằng cách tạo đối xứng dihedral từ nét v chuột. Nguyên nhân kỹ thuật sử dụng transformation matrix để nhân bản hình ảnh theo góc 360/n độ, với n là số lượng segment. Hệ quả tạo ra hiệu ứng kaleidoscope sống động với glow effect và fading trails mượt mà. Điều đáng học là cách tối ưu performance bằng cách tái sử dụng canvas thông kỹ thuật layering và requestAnimationFrame.

Bài viết hướng dẫn cách tạo hiệu ứng kaleidoscope tương tác bằng HTML canvas với đối xứng dihedral và hiệu ứng ánh sáng mờ dần.

Is Minifying CSS Necessary? (2023)

Trong bối cảnh tối ưu hóa website, việc minifying CSS từng được coi là bắt buộc. Tuy nhiên nghiên cứu mới nhất cho thấy ngay cả trong các trường hợp cực đoan, việc này chỉ giảm thiểu khoảng 0.5-2% dung lượng tổng thể. Nguyên nhân kỹ thuật là do trình duyệt hiện đại đã hỗ trợ nén HTTP/2, loại bỏ lợi thế từ minification. Hệ quả là các công cụ như PurgeCSS hay CSSnano giờ chỉ cần được sử dụng khi làm việc với các bundle cực lớn. Bài viết này đáng học vì nó chứng minh việc tối ưu không nên dựa trên kinh nghiệm cũ mà cần dựa trên dữ liệu thực tế và công nghệ hiện tại.

Bài viết này giúp lập trình viên hiểu rõ khi nào việc nén CSS thực sự cần thiết để tránh tối ưu hóa không cần thiết.

I still like writing websites by hand

Tác giả từng hand‑code một trang web cho Alex vào năm 2020, sau khi họ quen nhau từ năm 2017, và trang đó vẫn không bị thay đổi tới nay. Ông chọn viết bằng HTML thuần, CSS và vanilla JavaScript, không dùng bất kỳ framework hoặc công cụ build nào, nhằm tối ưu độ đơn giản và khả năng duy trì lâu dài. Sau hơn ba năm, trang web vẫn hoạt động ổn định mà không cần cập nhật, cho thấy việc tránh phụ thuộc vào thư viện bên thứ ba giảm thiểu rủi ro lỗi và công việc bảo trì. Điều này cho thấy khi mục tiêu là một trang web tĩnh thay đổi hiếm, việc hand‑code giúp kiểm soát hoàn toàn mã nguồn, giảm kích thước tải và dễ dàng di chuyển giữa các host. Bài viết nhắc nhở lập trình viên cân nhắc trade‑off giữa tốc độ phát triển bằng framework và lợi ích lâu dài của mã nguồn hand‑written, đặc biệt cho các dự án có thời gian sống dài.

Bài viết này giúp bạn hiểu được giá trị của việc viết website thủ công trong kỷ nguyên framework hiện đại.