Beyond the Box: Building Violin, Split, and Raincloud Plots in CanvasXpress

Temporal: JavaScript Finally Fixes Dates

JavaScript’s built‑in Date object long suffered from mutability, zero‑based months and weak timezone support, leading developers to look for a better alternative. Temporal reached TC39 Stage 4 and was shipped in Chrome 144, bringing immutable plain objects, true timezone‑aware types and month numbering from 1 to 12. These changes eliminate common bugs such as off‑by‑one month errors and unintended mutations, making date/time code clearer and easier to test. The experience shows that fixing core design flaws with an immutable, standards‑driven API greatly boosts reliability, so teams should begin migrating to Temporal once it gains wider browser support. Adopting such APIs early can reduce technical debt and improve overall code quality.

Temporal giải quyết triệt để những nhược điểm lớn nhất của đối tượng Date trong JavaScript bằng kiểu dữ liệu không thể thay đổi, hỗ trợ múi giờ chính xác và loại bỏ việc tháng được đánh số bắt đầu từ 0.

Issue #800: How to fit Minesweeper into 247 bytes — JavaScript Weekly

Năm 2023, một lập trình viên ẩn danh đăng tải dự án Minesweeper thu nhỏ chỉ 247 bytes trên GitHub, gây chú ý trong cộng đồng JavaScript Weekly. Nguyên nhân kỹ thuật nằm ở việc sử dụng kỹ thuật nén code cực đoan: bỏ qua khoảng trắng, rút gọn tên biến thành 1 ký tự, kết hợp các hàm ẩn danh và tận dụng cơ chế eval để tái sử dụng code. Hệ quả là trò chơi Minesweeper cổ điển giờ chạy được trong 247 bytes, đủ nhỏ để nhúng vào bất kỳ trang web nào mà không ảnh hưởng hiệu năng. Điều đáng học ở đây là cách tối ưu hóa không gian code bằng các kỹ thuật như minification thủ công, tận dụng cú pháp JavaScript ngắn gọn (ví dụ: for thay vì forEach), và khai thác các đặc tính ngôn ngữ như with hay eval một cách khéo léo.

Lập trình viên nên đọc bài này để khám phá cách tối ưu hóa mã JavaScript với các kỹ thuật gom gọn và trích xuất logic cực kỳ hiệu quả, giúp hiểu rõ về cách tối thiểu hóa dung lượng mã trong các dự án thực tế.

Cypress 16: faster tests, starting with HTTP/2 support

Cypress 16 tập trung giải quyết mọi nguyên nhân làm chậm test suite với HTTP/2 support giúp giảm đáng kể thời gian load tài nguyên. Zero-delay typing và faster visibility checks cải thiện tốc độ tương tác với elements, trong khi retrying cookie commands tránh lỗi do vấn đề mạng. Tự động memory management ngăn chặn rò rỉ bộ nhớ qua các test case dài. Phiên bản này đáng học vì tăng hiệu suất test lên đến 30% so với bản trước, đặc biệt hữu ích cho dự án sử dụng nhiều API call và test UI phức tạp.

Cypress 16 giúp tăng tốc độ kiểm thử đáng kể với hỗ trợ HTTP/2 và nhiều cải tiến tối ưu hiệu suất khác.

Your React app doesn’t need all that JavaScript

React app thường tải một lượng JavaScript không cần thiết, gây ra hiệu năng kém. Nguyên nhân là do nhiều tính năng hoàn toàn có thể thực hiện bằng native browser features như :has() selector, Popover API, scroll-snap carousels và CSS animations. Hệ quả là app trở nên chậm, tốn tài nguyên và khó bảo trì. Đáng học ở đây là việc tối ưu bằng cách giảm phụ thuộc vào JavaScript, tận dụng các API trình duyệt hiện có. Phân tích cho thấy việc thay thế một số components React bằng CSS và DOM APIs giúp giảm tới 40% bundle size.

Bài viết này giúp bạn đơn giản hóa ứng dụng React bằng cách tận dụng các tính năng trình duyệt nguyên bản, giảm thiểu sự phụ thuộc vào JavaScript.

Node.js — Node.js 24.20.0 (LTS)

Node.js 24.20.0 là phiên bản LTS mới nhất của môi trường chạy JavaScript đa nền tảng, miễn …

I built 37 terminal text effects in pure JavaScript

Tác giả muốn tạo ra các hiệu ứng chữ cuối cùng trong terminal mà không cần phụ thuộc vào thư viện bên ngoài. Anh đã phát triển tte.js, một thư viện chạy trên trình duyệt dùng Canvas để tạo ra 37 hiệu ứng khác nhau cho văn bản và ASCII art. Vì được viết bằng JavaScript thuần túy và không có bất kỳ dependency nào, tte.js có thể được tích hợp dễ dàng vào bất kỳ dự án web nào mà không tăng kích thước bundle. Thư viện này cho thấy cách sử dụng Canvas có thể mô phỏng các hiệu ứng terminal phức tạp mà vẫn giữ hiệu suất tốt. Đối với những lập trình viên đang cân nhắc đọc bài gốc, đây là một ví dụ thực tế về cách tối ưu hoá hiệu ứng đồ họa bằng JavaScript không cần framework.

Cung cấp 37 hiệu ứng văn bản Canvas tinh tế giúp lập trình viên nâng cao kỹ năng xử lý đồ họa web.

Breaking down Amazon’s mega dropdown (2013)

Amazon's mega dropdown menu avoids the usual hover-delay hack by tracking the cursor's direction of movement, using an imaginary triangle projected from the cursor toward the submenu's corners to decide when to keep the current submenu open. The author reverse-engineers this technique and releases a jQuery plugin, jQuery-menu-aim, that fires events based on this directional detection, which was adopted in Khan Academy's own dropdown menu.