Frontend

GTA.js, a reimplementation of the 1997 Grand Theft Auto engine in JavaScript and WebGL

Dự án GTA.js tái tạo lại engine của game Grand Theft Auto năm 1997 bằng JavaScript và …

CSS-Tricks has a new owner!

CSS-Tricks vừa có chủ sở hữu mới sau 12 năm hoạt động. …

How to Build Passkey Authentication with WebAuthn, Next.js and NestJS

Việc triển khai passkey authentication bằng WebAuthn, Next.js và NestJS giúp giải quyết vấn đề mật khẩu gây đau đầu cho cả người dùng và nhà cung cấp dịch vụ. Nguyên nhân kỹ thuật là do người dùng gặp khó khăn trong việc nhớ mật khẩu và nguy cơ phishing, tái sử dụng mật khẩu cao trên nhiều website. Hệ quả là giải pháp này giúp loại bỏ hoàn toàn mật khẩu, tăng cường bảo mật bằng cách sử dụng xác thực sinh trắc học và khóa công khai/riêng tư. Điều đáng học là bài viết hướng dẫn chi tiết cách tích hợp WebAuthn API vào ứng dụng Next.js cho frontend và NestJS cho backend với các bước xác thực an toàn. Lợi ích là cải thiện trải nghiệm người dùng đồng thời giảm thiểu rủi ro bảo mật liên quan đến mật khẩu truyền thống.

Bài hướng dẫn này giúp bạn xây dựng xác thực passkey an toàn hơn mật khẩu truyền thống và ngăn chặn tấn công lừa đảo hiệu quả.

15 apps you can vibe code instead of subscribing

Bối cảnh: Bài viết giới thiệu 15 ứng dụng bạn có thể tự code thay vì đăng ký dịch vụ trả phí như Slack, Notion, Calendly. Nguyên nhân kỹ thuật: Các hướng dẫn đi kèm prompts AI có phạm vi cụ thể, ước tính build thực tế và tính năng nhỏ để bắt đầu. Hệ quả: Bạn tiết kiệm chi phí đăng ký hàng tháng và có quyền kiểm soát hoàn toàn hệ thống. Điều đáng học: Cách tiếp cận phân chia dự án thành các phần nhỏ có thể thực hiện trong thời gian ngắn với phạm vi rõ ràng, giúp giảm độ phức tạp ban đầu.

Bài viết này giúp lập trình viên tiết kiệm chi phí bằng cách tự xây dựng các công cụ thay vì đăng ký trả tiền.

What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More

Chào bạn! Đây là số phát hành sau kỳ nghỉ dài của What's !important, tập trung vào các tính năng CSS mới thú vị. Bài viết trình bày hiệu ứng refraction trong CSS - một hiệu ứng quang học được tạo ra bằng cách kết hợp với backdrop-filter và transform. Một điểm đáng chú ý là scroll state queries cho phép truy vấn trạng thái cuộn trang mà không cần JavaScript, giúp tối ưu hiệu suất trang web. Ngoài ra, @custom-media cho phép định nghĩa media queries tùy chỉnh giúp quản lý breakpoint trong thiết kế responsive linh hoạt hơn. Nếu bạn đang tìm kiếm các kỹ thuật CSS hiện đại để nâng cao giao diện người dùng, số này không nên bỏ qua.

Bài này cung cấp cập nhật những tính năng CSS mới nhất và kỹ thuật nâng cao giúp lập trình viên tối ưu hóa hiệu ứng giao diện và tương tác người dùng.

LittleJS is 2D and 3D now

LittleJS, engine HTML5 nhỏ không phụ thuộc dependency, vừa cập nhật lớn với renderer 3D hoàn chỉnh, cho phép render 2D và 3D cùng canvas với shared physics, children, và timers. Engine được tối ưu với batched WebGL2 sprites, instanced 3D drawing, và mới benchmark với PixiJS, Three.js, PlayCanvas, Phaser, Babylon.js cho thấy hiệu năng vượt trội. Các công cụ AI mới gồm LittleJS AI toolkit, Claude Code plugin, LittleJS GPT cho no-code game building, cùng 50+ game mẫu open-source. Trang littlejsengine.com demo tất cả tính năng, và game jam thứ 3 diễn ra từ 2/10 đến 2/11.

LittleJS hiện hỗ trợ cả 2D và 3D với công cụ AI mạnh mẽ sẽ mang lại cho lập trình viên game giải pháp phát triển đa năng và hiệu quả.

Color Names

Dự án cung cấp không gian chứa 31,970 tên màu, mỗi cái tên được chọn bởi một cá nhân. …

The Future of CSS ✨ • Josh W. Comeau

Josh Comeau phân tích dự án Interop nơi các trình duyệt cùng phát triển tính năng HTML/CSS/JS mới. Họ đang phát triển nhiều tính năng CSS hứa hẹn như container queries, cascade layers, và subgrid. Những tính năng này sẽ cho phép các nhà phát triển tạo giao diện linh hoạt và mạnh mẽ hơn. Container queries cho phép components tự điều chỉnh kích thước dựa trên container của chúng, không chỉ viewport. Cascade layers giúp quản lý CSS phức tạp hơn mà không lo xung đột specificity. Đây là cơ hội để chuẩn bị kỹ năng cho tương lai frontend.

Bài viết này giúp lập trình viên nắm bắt những tính năng CSS sắp ra mắt để chuẩn bị cho tương lai phát triển web.

JavaScript Microtasks vs Tasks: What Runs First?

JavaScript xử lý tasks và microtasks trong Event Loop, với tasks như setTimeout được đặt trong Macrotask Queue còn Promises và queueMicrotask() vào Microtask Queue. Microtasks luôn được thực thi trước tasks ngay sau mỗi kết thúc của call stack, giúp xử lý các tác vụ quan trọng trước. Ví dụ: Promise.resolve().then() sẽ chạy trước setTimeout() dù được gọi sau, tạo ra thứ tự thực thi không như dự kiến nếu không hiểu rõ cơ chế. Quan trọng là hiểu rằng microtasks có thể gây block nếu quá nhiều, như trường hợp 1000 promises chained sẽ được xử lý trước khi bất kỳ timeout nào thực thi.

Bài này giúp lập trình viên hiểu rõ cơ chế thực thi JavaScript để tối ưu hiệu năng và tránh lỗi bất đồng bộ.

No more tech debt

Trải nghiệm hoàn thành thành công migration của design system trong sự nghiệp của tác giả mang lại niềm vui lớn khi áp dụng các phương pháp tính toán mới cho các dự án rewrite lớn. Sự thay đổi này cho rằng việc quản lý technical debt có thể được kiểm soát hiệu quả khi áp dụng các phương pháp tiếp cận có hệ thống. Các dự án rewrite lớn trước đây thường bị cho là quá rủi ro và tốn kém, nhưng bây giờ có thể được tính toán chi tiết hơn. Bài viết này cung cấp góc nhìn thực tế về cách tiếp cận và toán học đằng sau các quyết định rewrite, điều mà các lập trình viên nên tham khảo để tối ưu hóa chiến lược kỹ thuật.

Bài chia sẻ này sẽ mang lại góc nhìn mới về cách tiếp cận dự án lớn và chiến lược giảm thiểu nợ kỹ thuật hiệu quả.

Introducing Motion UI Gallery

Motion UI Gallery là một thư viện UI cho React với 8 bố cục 2D và 3D, các chi tiết view và gesture chuyển tiếp mượt mà. Thư viện này giải quyết nhu cầu tạo giao động hình học phức tạp mà không cần code thủ công. Các hiệu ứng này giúp nâng cao trải nghiệm người dùng và tạo ra cảm giác ứng dụng hiện đại, sống động. Đối với lập trình viên, đây là giải pháp tiết kiệm thời gian triển khai animation chất lượng cao. Bạn sẽ tiết kiệm đáng kể thời gian phát triển so với việc tự implement các transition phức tạp từ đầu.

Motion UI Gallery cung cấp tám hiệu ứng 2D và 3D chuyển tiếp mượt mà giúp nâng cao trải nghiệm người dùng trong ứng dụng React của bạn.

Microsoft.UI.Reactor: a C#-first way to build WinUI apps

Microsoft.UI.Reactor là một framework C# để phát triển ứng dụng WinUI, ra mắt tại …

From Tailwind to StyleX

Tác giả đã thử nghiệm chuyển một dự án từ Tailwind sang StyleX để đánh giá cách tiếp cận rõ ràng hơn của StyleX có tương tác tốt hơn với LLM hay không. Mặc dù Tailwind vẫn nhanh hơn khi viết code thủ công, StyleX giúp nhận ra giá trị của việc biểu diễn trực tiếp CSS properties, tokens, variants và quy ước styling component trong code. Bài viết tập trung vào những đánh đổi giữa hai công nghệ và tại sao sự dài dòng thêm của StyleX giờ đây không còn là vấn đề khi LLM đảm nhận phần lớn việc gõ code cơ học.

Bài viết này giúp lập trình viên hiểu được sự đánh đổi khi chuyển từ Tailwind sang StyleX trong kỷ nguyên AI, nơi công cụ tạo nội dung có thể hỗ trợ viết mã hiệu quả hơn.

When you just need to build a tiny desktop app: TinyJS

TinyJS là JavaScript runtime mới cho phép xây dựng ứng dụng desktop nhỏ gọn (dưới 6MB) trên macOS, Linux và Windows, sử dụng WebView gốc thay vì bundling browser engine như Electron. Được xây dựng trên txiki.js, TinyJS cho phép code bằng JavaScript thuần, HTML, CSS mà không cần biên dịch, và hỗ trợ các framework như React, Vue, Svelte mà không cần Node.js. So với Electron (có thể lên đến 150MB) hay Tauri (yêu cầu Rust), TinyJS mang đến giải pháp nhẹ nhàng hơn. Tác giả đã tạo app store với 25 mẫu ứng dụng như bản sao Winamp 7.4MB, đồng hồ thế giới và trình soạn thảo markdown, dù một số ứng dụng vẫn gặp lỗi trên Windows trong quá trình thử nghiệm.

TinyJS cho phép tạo ứng dụng desktop cỡ nhỏ dưới 6MB với JavaScript thuần túy mà không cần Node.js, giải pháp thay thế hiệu quả cho Electron.

TanStack Charts 1.0

TanStack Charts 1.0 là thư viện charting hiện đại, cung cấp giải pháp thay thế cho các framework cũ như D3.js hay Chart.js. Được xây dựng trên nền tảng React hooks, nó mang đến hiệu suất vượt trội với thời gian render chỉ 16ms cho dataset 10,000 điểm dữ liệu. Thư viện này hỗ trợ cả React và vanilla JS, phù hợp với mọi dự án từ nhỏ đến lớn. Đáng chú ý, TanStack Charts cho phép tùy biến linh hoạt mà không cần phụ thuộc vào các UI framework cụ thể, giúp tránh được vấn đề vendor lock-in.

TanStack Charts 1.0 mang đến giải pháp biểu đồ linh hoạt giúp bạn phát triển ứng dụng mà không cần thay đổi thư viện.

JavaScript Event Loop Explained: Queue Tracing and Debugging Guide

Event Loop trong JavaScript hoạt động khác biệt giữa browser và Node.js, đặc biệt với cách xử lý microtask queue và callback queue. Bài viết cung cấp bảng trace chi tiết giúp dự đoán thứ tự thực thi async code, phát hiện tình trạng microtask starvation khi có quá nhiều Promise. Các ví dụ code minh họa rõ ràng khác biệt giữa process.nextTick() trong Node.js và setTimeout() trong browser. Bạn sẽ học được kỹ thuật debug bằng cách theo dõi từng bước trong event loop stack, giúp tối ưu performance khi xử lý nhiều async operation.

Bài viết giúp lập trình viên JavaScript dự đoán và gỡ lỗi hiệu quả hành vi bất đồng bộ bằng cách phân tích chi tiết hàng đợi và vòng lặp sự kiện.

Terminal Text Editor: Like VS Code But in Linux Terminal

Terminal Text Editor (TTT) mang lại trải nghiệm chỉnh sửa hiện đại với giao diện GUI ngay trong terminal Linux mà không cần cấu hình phức tạp. Thay vì cố gắng bắt chước các trình soạn thảo terminal truyền thống, TTT sử dụng thư viện React cho giao diện người dùng và Node.js cho logic xử lý. Trình soạn thảo này hỗ trợ đa nền tảng chạy trên macOS, Windows và Linux với kích thước chỉ khoảng 10MB. Đây là lựa chọn hoàn hảo cho các lập trình viên muốn có trải nghiệm chỉnh sửa hiện đại mà không cần thoát khỏi terminal, với tốc độ khởi động nhanh chóng và khả năng tương tác với CLI liền mạch.

TTT mang đến trải nghiệm chỉnh sửa GUI hiện đại trong terminal mà không cần cấu hình phức tạp.

Omarchy Gets The Web Browser Launching Faster By Avoiding XDG Overhead

Omarchy 4.0.5, bản phân phối Arch Linux dựa trên Hyprland, tăng tốc khởi trình trình duyệt web bằng cách thay thế lời gọi xdg-settings chậm bằng công cụ tùy chỉnh. Việc sử dụng omarchy-cmd-default-browser giúp xác định trình duyệt mặc định trong khoảng 10ms, nhanh hơn đáng kể so với 72ms của xdg-settings do chuỗi script POSIX shell phức tạp. Công cụ này ưu tiên kiểm tra cấu hình Hyprland trước, sau đó mới fallback đến xdg-settings và xdg-mime khi chưa được thiết lập. Tối ưu hóa riêng này cũng giúp giảm thời gian khởi động thanh trạng thái của Omarchy từ khoảng 20 giây xuống còn 15 giây trên hệ thống 6 màn hình với nhiều widget.

Omarchy giúp khởi trình trình duyệt web nhanh hơn đáng kể nhờ loại bỏ lớp xdg-settings chậm và thay bằng công cụ trợ giúp tùy chỉnh.

SPA vs server-side rendering: which should you choose?

Khi xây dựng ứng dụng web, bạn cần cân nhắc giữa Single Page Application (SPA) và server-side rendering dựa trên đặc điểm navigation của ứng dụng. SPA phù hợp cho các ứng động có tính tương tác cao với navigation phức tạp trong khi server-side rendering tối ưu hóa thời gian tải trang ban đầu (initial page load) và SEO. Shared state management trong SPA dễ dàng hơn nhưng server-side rendering giảm thiểu thời gian loading bằng cách trả về HTML hoàn chỉnh từ server. Cuối cùng, hãy xem xét yếu tố bảo trì - SPA đòi hỏi kiến thức sâu về JavaScript framework còn server-side rendering có thể đơn giản hóa việc triển khai khi nhóm chưa quen với các công cụ frontend hiện đại.

Bài viết này giúp lập trình viên hiểu rõ cách lựa chọn giữa Single-Page App và server-side rendering dựa trên nhu cầu cụ thể của dự án.

Show HN: Spotatui, a Spotify TUI/GUI without web API rate limits

Spotatui là một ứng dụng trình phát nhạc terminal tự viết bằng Rust, kết nối trực tiếp với Spotify mà không cần qua web API, tránh giới hạn rate limits. Công nghệ này sử dụng thư viện librespot và nghe được nhiều nguồn nhạc như Spotify, local files, Subsonic, radio, Qobuz và YouTube trong một giao diện terminal. Người dùng không còn lo về giới hạn API của Spotify mỗi khi muốn phát nhạc. Với việc tự build protocol, Spotatui cung cấp trải nghiệm nghe nhạc mượt mà mà không phụ thuộc vào REST API. Đáng học hỏi ở đây là cách tiếp cận reverse engineering để tự xây dựng client thay vì phụ thuộc vào API chính thức của nền tảng.

Một lập trình viên nên đọc bài này vì Spotatui mang lại trải nghiệm nghe nhạc Spotify trực tiếp trong terminal mà không bị giới hạn API.

Engineers are coding out loud

Các lập trình viên đang áp dụng voice coding để phát triển phần mềm mà không cần gõ bàn phím. Công cụ như GitHub Copilot và Tabnine hỗ trợ phát triển code thông qua lệnh nói tự nhiên. Phương pháp này giúp tăng tốc độ coding lên 30-40% theo nghiên cứu của MIT. Tuy nhiên, voice coding đòi hỏi học cách sử dụng câu lệnh chính xác và hiệu chỉnh khi công nghệ nhận diện sai. Đây là xu hướng đáng chú ý cho các lập trình viên muốn tối ưu hóa quy trình làm việc.

Bài viết này giúp bạn khám phá cách lập trình bằng voice coding - xu hướng đang thay đổi cách làm việc của các kỹ sư phần mềm.

Dark Mode CSS Variables: Theme Systems with light-dark()

Bối cảnh: Xây dựng toggle dark mode không nhấp nháy bằng CSS và JS nguyên bản. Nguyên nhân kỹ thuật: Sử dụng CSS variables kết hợp với hàm light-dark() và thuộc tính color-scheme, đồng thời lưu lựa chọn vào localStorage. Hệ quả: Tạo hệ thống theme mượt mà với fallback hỗ trợ trình duyệt cũ. Điều đáng học: Cách triển khai đơn giản nhưng hiệu quả, không cần framework phức tạp.

Bài hướng dẫn này giúp bạn tạo toggle dark mode không có nháy nháy với CSS variables và light-dark() kèm lưu trữ lựa chọn của người dùng.

DankMaterialShell Becomes Dux Shell as Dank Linux Rebrands to Dux Labs

DankMaterialShell đổi tên thành Dux Shell khi Dank Linux rebrand thành Dux Labs. Tên mới bao gồm shell, greeter, search, system monitor, calendar, và file manager trong DMS 2.0. Việc đổi tên này nhằm tạo ra nhận diện thương hiệu thống nhất cho toàn bộ bộ công cụ của dự án. Đối với lập trình viên quan tâm đến desktop environment trên Linux, DMS 2.0 cung cấp giải pháp hoàn chỉnh từ giao diện đến các ứng dụng tiện ích. Sự thay đổi này cho thấy dự án đang phát triển mạnh mẽ và chuyên nghiệp hơn với lộ trình rõ ràng.

Lập trình viên nên đọc bài này để nắm bắt thông tin về sự tái định thương thành Dux Labs và các thành phần mới được phát hành trong phiên bản DMS 2.0.

C# now beats Rust on WASM size

Dự án NetWasm cho phép biên dịch C# và .NET CIL thành WebAssembly (WASM) cỡ nhỏ với WASI, sử dụng biên dịch ahead-of-time (AOT) kèm runtime và garbage collector (GC) tối ưu. Kỹ thuật này đạt hiệu quả đáng kinh ngạc với kích thước file output chỉ 1.1MB cho ứng dụng ASP.NET Core phức tạp, nhỏ hơn đáng kể so với Rust khi cùng triển khai WASM. Sự khác biệt chủ yếu đến từ cách .NET runtime được tinh chỉnh và GC được tối ưu hóa đặc biệt cho môi trường WASM. Đây là minh chứng rõ ràng cho thấy .NET có thể cạnh tranh sòng phẳng với các ngôn ngữ thường được coi là tối ưu cho WebAssembly về mặt kích thước.

Lập trình viên nên đọc bài này để biết cách tối ưu hóa kích thước WASM cho ứng dụng C#/.NET bằng NetWasm.

Do web components have a future if nobody is writing them?

Bối cảnh của bài viết là sự tranh luận về tương lai của Web Components sau bài viết trước tác giả đăng về "sử dụng nền tảng". Nguyên nhân kỹ thuật là Web Components cung cấp các tính năng như Shadow DOM, Custom Elements và HTML Templates giúp tái sử dụng code nhưng adoption rate vẫn thấp. Hệ quả là việc thiếu Web Components trong thực tế tạo ra vòng luẩn quẩn: ít người viết nên ít người sử dụng và ngược lại. Điều đáng học là sự thành công của một công nghệ phụ thuộc không chỉ vào ưu điểm kỹ thuật mà còn vào hệ sinh thái và động lực thực tế thị trường, bất kể nó có tiềm năng kỹ thuật như thế nào.

Bài viết phân tích triển vọng của Web Components khi số lượng lập trình viên sử dụng còn hạn chế, giúp bạn hiểu được xu hướng công nghệ và quyết định đầu tư học hỏi hay không.

DESIGN.md vs. Design System MCP: Which Does What?

DESIGN.md mang lại tài liệu thiết kế có thể hoạt động trên mọi công nghệ stack, trong khi Design System MCP (Model Context Protocol) cung cấp API thực tế của component cho các agents. Sự kết hợp giữa DESIGN.md và Design System MCP giúp giải quyết vấn đề đồng bộ giữa tài liệu thiết kế và implementation thực tế. Khi kết hợp cả hai, DESIGN.md cung cấp bối cảnh tổng quan, còn Design System MCP đảm bảo các agent có thể truy cập chính xác thông tin API để implement chính xác component. Điều này tạo ra một hệ sinh thái mà ở đó thiết kế và development tự động đồng bộ, giảm thiểu sai lệch giữa tài liệu và code.

Bài viết này giúp lập trình viên hiểu rõ sự khác biệt và vai trò bổ trợ giữa DESIGN.md và Design System MCP để cải thiện quy trình phát triển và hệ thống component.

PaperPilot – Zero-Cloud, Pure-Rust PDF Engine with WASM and MCP

PaperPilot là một AI copilot chạy local cho tài liệu PDF, được phát triển hoàn toàn bằng ngôn ngữ programming Rust. Điểm đặc biệt của dự án là nó hoạt động không cần kết nối cloud (zero-cloud) và tận dụng WebAssembly (WASM) cùng với Model Context Protocol (MCP) để xử lý tài liệu. Dự án này giải quyết vấn đề bảo mật và tốc độ khi xử lý tài liệu nhạy cảm trên máy người dùng. Với việc code nguồn mở trên GitHub, lập trình viên có thể tham khảo cách triển khai Rust hiệu quả và tích hợp WASM trong các ứng dụng xử lý tài liệu.

PaperPilot cung cấp lập trình viên một giải pháp xử lý PDF hiệu quả, local-first với công nghệ Rust và WASM.

Next.js 16.4

Next.js 16.4 giới thiệu lazy compilation giúp tăng tốc độ khởi động ứng dụng. Phiên bản này tạo ra output nhỏ hơn với Turbopack và tích hợp sẵn các tính năng React 19.3. Cache Components được cải tiến để tối ưu hiệu năng lưu trữ. Các công cụ dành cho developer cũng được cập nhật để nâng cao trải nghiệm làm việc. Các lập trình viên nên đọc bài gốc để hiểu chi tiết về những thay đổi này và cách triển khai chúng vào dự án.

Next.js 16.4 mang đến nhiều cải tiến quan trọng về hiệu suất và trải nghiệm phát triển với lazy compilation, Turbopack tối ưu hơn, tính năng React 19.3 và công cụ developer tooling mới.

Xenia — Xenia v0.1.1

Xenia là thư viện kết nối các package JavaScript với Phoenix LiveView mà không cần viết hook thủ công cho từng thư viện riêng biệt, đi kèm 16 adapter chính thức như Monaco, Chart.js, D3, Tabulator, FullCalendar, Leaflet, xterm.js và Uppy. Thư viện giúp giảm đáng kể lượng code cần viết, ví dụ adapter Xenia cho Monaco chỉ cần 21 dòng thay vì 58 dòng hook viết tay. Xenia cung cấp tính năng routing dựa trên file, cho phép định tuyến trong page.ex với tham số được đánh dấu bằng [id]. Ngoài ra, thư viện còn tích hợp generators và câu lệnh mix xenia.install để thiết lập ban đầu.

Xenia giúp lập trình viên JavaScript tích hợp package với Phoenix LiveView mà không cần viết hook thủ công, tiết kiệm thời gian và công sức.

GitHub - uzaydurdu/xenia: Keep Phoenix in charge, let JavaScript do what it does best: any JS library in LiveView with one small adapter.

Bối cảnh: Xenia là một thư nhỏ cho phép tích hợp bất kỳ thư viện JavaScript nào vào LiveView của Elixir mà không cần tạo component riêng. Nguyên nhân kỹ thuật: Thay vì ép buộc JS library tuân theo vòng đời LiveView, Xenia cung cấp một adapter nhỏ cho phép JS library chạy độc lập với chỉ một API bridge. Hệ quả: Giảm 70% thời gian phát triển khi tích hợp JS library vào ứng dụng Phoenix, giữ nguyên sức mạnh của cả hai thế hệ công nghệ. Điều đáng học: Xenia minh họa cách tiếp cận linh hoạt trong kết hợp backend Elixir/Phoenix với frontend JavaScript mà không hy sinh ưu điểm của từng nền tảng.

Bài này giúp bạn tích hợp bất kỳ thư viện JavaScript nào vào Phoenix LiveView một cách dễ dàng với bộ điều hợp nhỏ.

Build a Streaming React Chat with Microsoft Foundry Responses

Bài hướng dẫn xây dựng giao diện chat React sử dụng Microsoft Foundry Responses streams, xử lý sự kiện SSE an toàn và cập nhật văn bản theo từng delta. Tác giả triển khai kỹ thuật parsing SSE events để tách dữ liệu stream và xử lý text deltas, đảm bảo hiển thị nội dung thực sự từ server. Phần quan trọng nhất là xử lý các trường hợp ngắt kết nối bằng cách implement cơ chế suppression mechanism loại bỏ output lỗi thời khi user logout. Bài viết cung cấp code ví dụ cụ thể với implementation chi tiết, rất hữu ích cho developer cần tích hợp streaming response vào React app.

Tài hướng dẫn này giúp bạn xây dựng giao diện chat React với streaming Microsoft Foundry Responses, xử lý SSE an toàn và kiểm soát hiển thị nội dung.

Chrome for Developers

Chrome đang tích hợp responsively-sized iframes giúp điều chỉnh kích thước iframe linh hoạt theo thiết bị. Tính năng này sử dụng CSS scroll-marker-group modes và text-decoration-inset để tối ưu hiển thị nội dung lồng. Thay đổi này giải quyết vấn đề các iframe không responsive trên thiết bị di động. Lập trình viên nên tìm hiểu để tối ưu giao diện web, đặc biệt khi làm việc với nội dung nhúng. Các API mới này sẽ cải thiện trải nghiệm người dùng trên mọi thiết bị mà không cần JavaScript phức tạp.

Chrome for Developers cập nhật những tính năng mới nhất giúp bạn tối ưu trải nghiệm người dùng và tăng tốc quá trình phát triển web.

React 19.3 – React

React 19.3 đã chính thức phát hành, ổn định hóa hai API thử nghiệm là View Transitions và Fragment Refs. Component mới <ViewTransition> cho phép animate các phần tử vào, ra, di chuyển hoặc thay đổi kích thước bằng API View Transition của trình duyệt, với hỗ trợ animation tùy chỉnh qua addTransitionType và tích hợp Suspense để đồng bộ fallback, images và fonts. Fragment Refs cho phép gắn behaviors DOM vào nhóm sibling elements mà không cần wrapper div bằng cách truyền ref vào Fragment. React DOM bổ sung API browser() để loại bỏ components khỏi server-side rendering khi chúng phụ thuộc vào browser APIs, cùng với Trusted Types support để chống XSS. Server Components giờ có thể render Context trực tiếp từ module 'use client' mà không cần wrapper Provider.

React 19.3 mang đến hai API ổn định View Transitions và Fragment Refs giúp cải thiện hiệu năng và trải nghiệm người dùng khi làm việc với các giao động và xử lý DOM.

Git Worktree Guide: Parallel Branches and Claude Code

Git worktree cho phép quản lý nhiều branch song song với mỗi branch trong một thư mục riêng biệt, giải quyết vấn đề chuyển đổi branch liên tục. Công nghệ này sử dụng lệnh git worktree add để tạo workspace mới mà không ảnh hưởng đến các branch hiện tại. Tính năng đặc biệt Claude Code có thể chạy song song trên nhiều worktree, tăng hiệu suất xử lý đến 30% so với cách truyền thống. Bạn có thể liệt kê tất cả worktree hiện tại bằng git worktree list và dọn dẹp không cần thiết với git worktree prune. Điều đáng học là cách tận dụng worktree để tối ưu hóa workflow khi làm việc với nhiều feature hoặc bug fix cùng lúc.

Hướng dẫn này giúp lập trình viên làm việc hiệu quả hơn với Git worktree và tối ưu hóa quy trình phát triển song song bằng Claude Code.

A faster, lighter C# Dev Kit

C# Dev Kit 11.0, phát hành cùng .NET 11, đã được tái thiết kế để cải thiện đáng kể thời gian tải, tốc độ build và sử dụng bộ nhớ. Sáu quy trình được quản lý được gộp thành một single Native AOT-compiled native executable, giúp giảm 180x thời gian tải solution và 39x thời gian build incremental trên các codebase lớn như Aspire (407 projects) và Orleans (155 projects). Project caches mới tồn tại qua các lần tải và có thể commit vào version control để cung cấp công cụ tức thì trong fresh clones hoặc git worktrees. Phiên bản này cũng hỗ trợ ngôn ngữ phong phú cho các file .csproj, .props, và .targets với completions, diagnostics, go-to-definition và cảnh báo lỗ hổng trên packages, cùng tính năng mới 'C# Doctor' chẩn đoán các vấn đề môi trường như SDK bị thiếu hoặc package restore thất bại.

C# Dev Kit 11.0 cải thiện đáng kể hiệu suất với thời gian tải nhanh hơn 180 lần, thời gian build tăng tốc 39 lần và giảm sử dụng bộ nhớ, cùng với các tính năng hỗ trợ phát triển mới.

This is a modern motherfucking website

Bối cảnh là sự phức tạp ngày càng tăng của các website hiện đại với nhiều thành phần phụ thuộc. Nguyên nhân kỹ thuật là việc sử dụng quá nhiều frameworks như React, Vue.js, và libraries làm cho trang web trở nên nặng nề, đôi khi chỉ để hiển thị nội dung đơn giản. Hệ quả là thời gian tải trang chậm hơn đáng kể (từ 2-5 lần so với một trang HTML thuần), sử dụng nhiều bandwidth hơn và gây khó khăn cho người dùng có kết nối internet yếu. Điều đáng học là một trang web hiện đại không nhất thiết phải phức tạp - đôi khi việc sử dụng HTML, CSS thuần túy có thể tạo ra hiệu suất tốt hơn nhiều so với việc áp dụng công nghệ phức tạp không cần thiết.

Bài viết này cung cấp giải pháp toàn diện để xây dựng website hiện đại với tất cả các tính năng tiên tiến trong một tệp HTML duy nhất.

Headless Experience Layer Widget Formulas: Math and Logic with JSON

Trong Salesforce Experience Cloud, các widget HXL cho phép sử dụng công thức trong biểu thức {!…} với toán tử toán học và hàm IF, CASE thay vì các Apex fields đã được tính toán sẵn. Việc này giúp giảm thiểu việc tạo và duy trì các precomputed fields trong backend, cải thiện hiệu năng hệ thống. Công thức JSON-based này có thể xử lý logic phức tạp tại client-side, giảm tải cho server và tăng tốc độ rendering UI. Lập trình viên nên cân nhắc sử dụng tính năng này khi xử lý logic đơn giản để tối ưu hóa hiệu năng ứng dụng, đặc biệt với các kịch bản không cần truy cập dữ liệu phức tạp.

HXL widgets giúp thay thế các trường Apex đã tính toán sẵn bằng logic nội tuyến mạnh mẽ thông qua công thức IF, CASE và toán tử toán học.

Bootstrap 6 Alpha

Bootstrap 6 Alpha vừa được phát hành với bản alpha đầu tiên, đánh dấu một lần tái cấu trúc lớn cho dự án. Phiên bản này hiện đại hóa và mở rộng một trong những dự án nguồn mở phổ biến nhất. Bootstrap 6 chuyển sang sử dụng CSS Native variables thay vì SCSS variables, hỗ trợ CSS Grid và cho phép custom dễ dàng hơn. Bản alpha này cần được test kỹ trước khi ra mắt chính thức, do vẫn có thể thay đổi đáng kể. Lập trình viên nên thử nghiệm để hiểu rõ các thay đổi về performance và compatibility với các dự án hiện có.

Bootstrap 6 Alpha mang đến bản cập nhật lớn với hiện đại hóa và mở rộng dự án nguồn mở phổ biến nhất.

Websites Should Be Printable

Bối cảnh: Trong kỷ nguyên số hóa, nhiều website hiện đại bỏ qua tính năng in ấn, gây khó khăn cho người dùng muốn lưu trữ thông tin. Nguyên nhân kỹ thuật: Các nhà phát triển sử dụng CSS display và positioning phức tạp, không tối ưu cho print media query, đồng thời thiếu cấu trúc HTML ngữ nghĩa phù hợp. Hệ quả: Người dùng gặp phải layout vỡ, nội dung hiển thị sai vị trí, hoặc font chữ quá nhỏ khi cố gắng in trang web. Điều đáng học: Brennen Puth trong blog cá nhân của mình nhấn mạnh tầm quan trọng của việc triển khai print stylesheet riêng và sử dụng thẻ <media> để tối ưu trải nghiệm in ấn mà không ảnh hưởng đến giao diện trực tuyến.

Bài viết này giúp lập trình viên hiểu tầm quan trọng của việc thiết kế website có thể in ấn để tăng tính tiếp cận.

Optimizing objects with null prototypes

V8 engine gặp vấn đề khi đối tượng với __proto__: null bị mắc kẹt ở dictionary mode. Nguyên nhân kỹ thuật nằm ở cách V8 xử lý prototype chain khi prototype được đặt thành null. Hệ quả là hiệu năng giảm đáng kể, như test case cho thấy WebStreams throughput chỉ đạt 500MB/s. Điều đáng học là thay thế literal object bằng classes hoặc Object.setPrototypeOf giúp tăng hiệu năng lên 2x, đạt 1GB/s throughput trong Node core.

Tìm hiểu cách tối ưu hiệu suất bằng cách loại bỏ nguyên mẫu null để tăng gấp đôi throughput trong Node.js.