#web-components

Show keystrokes on a website with the <show-keystrokes> custom element

Đối với các nhà làm screencast và live demo, thành phần web mở nguồn <show-keystrokes> giúp hiển thị phím tắt và phím điều hướng ngay trên màn hình, giải quyết vấn đề các ứng dụng macOS bị chặn bởi chính sách bảo mật doanh nghiệp. Component này sử dụng Popover API và CSS Anchor Positioning để render ở lớp top-layer và theo dõi con trỏ, tự động đảo vị trí khi cần thiết. Với kích thước chỉ 1.9kB sau minify, <show-keystrokes> có thể nhúng qua một script tag và tự điều chỉnh nhãn phím modifier giữa macOS/Windows/Linux cùng theme sáng/tối. Đáng chú ý là dự án còn cung cấp bookmarklet và extension Chrome cho phép inject vào mọi site, kể cả những site có CSP strict.

Lập trình viên nên đọc bài này để tìm hiểu về thành phần web tùy chỉnh <show-keystrokes> giúp hiển thị phím tắt màn hình một cách linh hoạt cho các bài trình diễn và video hướng dẫn.

Prop For That

Thư viện Prop For That của Adam Argyle cung cấp các CSS custom properties động, cho phép truy cập vào những thuộc tính CSS thông thường không thể truy xuất như vị trí con trỏ, tốc độ cuộn, trạng thái form hay thời gian hiện tại. Nhà phát triển chỉ cần thêm thuộc tính data vào HTML, sau đó sử dụng trực tiếp các biến CSS này trong stylesheet mà không cần viết JavaScript.

Lập trình viên nên đọc bài này để khám phá cách Prop For That giúp tối ưu hóa giao diện người dùng bằng cách kết nối trực tiếp CSS với dữ liệu động từ HTML mà không cần JavaScript, mở rộng khả năng tùy biến UI một cách đơn giản và hiệu quả.

Why Vanilla JS

Một nhà phát triển chia sẻ kinh nghiệm xây dựng ứng dụng web phức tạp hoàn toàn bằng JavaScript thuần (vanilla JS) và Web Components, lập luận rằng các framework hiện đại như React, Angular, Vue hay Svelte tạo ra sự phức tạp không cần thiết khi tước quyền kiểm soát khỏi nhà phát triển. Tác giả nhấn mạnh rằng trình duyệt vốn đã là một framework, và các công nghệ web bản địa (HTML, CSS, JS) đã đủ mạnh để xây dựng ứng dụng vững chắc mà không cần pipeline build, TypeScript hay các lớp trừu tượng state reactive.

Là người phát triển muốn tối ưu hiệu suất và kiểm soát toàn bộ quy trình xây dựng ứng dụng mà không phụ thuộc vào các framework bên ngoài, bài viết này sẽ giúp bạn khám phá cách xây dựng ứng dụng mạnh mẽ bằng JavaScript nguyên sinh và Web Components, cùng các công cụ tự phát triển để giải quyết những vấn đề thực tế mà các framework hiện đại thường mang lại.

Elena, a library for building Progressive Web Components

Elena là một thư viện nhỏ gọn, đơn giản để xây dựng Progressive Web Components.

Elena là giải pháp tối ưu cho việc xây dựng các thành phần web tiến bộ với kích thước nhẹ và dễ sử dụng, giúp bạn tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng web hiện đại.

worthy of study

Tôi giao nhiệm vụ nghiên cứu cho một AI agent để phát triển một sản phẩm mới, sau đó dừng mọi hướng dẫn để quan sát cách nó tự xử lý.

Một lập trình viên nên đọc bài này để hiểu cách hiệu quả xử lý sai sót và phản ứng với kết quả của mô hình AI khi không tuân thủ yêu cầu ban đầu, giúp cải thiện kỹ năng điều khiển và tư duy logic trong việc phát triển sản phẩm.

Introducing <mermaid-element>, a custom element to display Mermaid diagrams

<mermaid-element> là web component zero-config, không phụ thuộc dependency, render diagram Mermaid trong Shadow DOM. Component tự tải Mermaid phiên bản 12 khi cần qua jsDelivr, hỗ dụng ghìm phiên bản hoặc endpoint tùy chỉnh qua thuộc tính mermaid, và cache tải xuống bộ nhớ để chỉ fetch Mermaid một lần dù nhiều diagram trên trang. Apps đã bundle Mermaid có thể gán bản sao riêng vào MermaidElement.defaultMermaid để bỏ yêu cầu CDN. Component hiện có trên npm kèm playground tương tác và tài liệu.

Lập trình viên nên đọc bài viết này để biết cách sử dụng <mermaid-element> hiển thị biểu đồ Mermaid một cách đơn giản mà không cần cấu hình phức tạp.

New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog

Ngôn ngữ nền tảng của web đang nhận được nhiều sự quan tâm gần đây. Mặc dù HTML phát triển chậm hơn CSS và JavaScript, đây thực sự là điểm tích cực. Bài viết không đề cập đến các tính năng cơ bản như <article> đã xuất từ năm 2009. Thay vào đó, nó tập trung vào các cập nhật và tính năng mới của HTML trong nửa đầu năm 2026. Nếu bạn là lập trình viên web, việc cập nhật những thay đổi này sẽ giúp bạn tối ưu hóa performance và enhance trải nghiệm người dùng hiệu quả hơn.

Bài viết này giúp bạn cập nhật những tính năng HTML mới nhất giữa năm 2026 để duy trì lợi thế công nghệ trong ngành lập trình web.

The HTML dialog tag

Thẻ HTML <dialog> cung cấp giải pháp native cho modal truy cập được, với các tính năng như showModal, close, hỗ trợ form method, styling backdrop, vượt trội hơn so với modal dựa trên <div>.

Là người phát triển web, bạn nên đọc bài này để khám phá cách sử dụng HTML5 Dialog—một giải pháp chuẩn, thân thiện với người dùng và SEO hơn so với các modal bằng div, giúp cải thiện trải nghiệm tương tác và tuân thủ tiêu chuẩn web.

Google Releases Angular v22 with Stable Signal Forms, OnPush by Default and Experimental WebMCP

Google phát hành Angular v22 với nhiều cải tiến quan trọng như Signal Forms ổn định, chế độ OnPush mặc định, cùng hỗ trợ thử nghiệm WebMCP. Phiên bản mới tập trung vào API ổn định, template tối ưu và công cụ tích hợp AI.

Lập trình viên Angular nên đọc để cập nhật về Signal Forms ổn định và mặc định, giúp tối ưu hóa quản lý dữ liệu trong ứng dụng với sự đơn giản hóa và hiệu suất cao hơn, đồng thời chuẩn bị sẵn sàng cho các tính năng tương lai như tích hợp AI thông qua các cải tiến mới trong framework.

Chris’ Corner: Web Components

Dave Rupert has a new syntax highlighter: MicroLighter. He wrote about the why. There are a bunch of trade-offs with all the technologies that do this job. The trade-offs here seem pretty worth it for a relatively lightweight, infrequent syntax highlighting job. I mean 2 KB as a base library is pretty amazing, with the…

Polaris CDN 1.1 is now stable

Shopify’s developer changelog documents all changes to Shopify’s platform. Find the latest news and learn about new platform opportunities.

New in Edge for developers – Create better components and make your site agent-ready

An overview of recent web platform additions to Edge and Chromium aimed at developers, covering new APIs such as OpaqueRange, referenceTarget, aria-actions, and window-drag, plus WebMCP for agent-readiness and new Profiler markers for performance debugging.

Icon Fall Web Component—zachleat.com

A post by Zach Leatherman (zachleat)

Code Snacks – Master.dev Blog

Love these little animations (“code snacks”) from Lauren Basser that illustrate basic technological concepts. Check out the ones for Working Directory and Shadow DOM — not the easiest concepts to illustrate as simply as this!

Table of Contents Web Component—zachleat.com

A post by Zach Leatherman (zachleat)

Introducing <rich-input>, a GitHub-like search/filter text input to embed on your site

Một Web Component mới tên <rich-input> mô phỏng thanh tìm kiếm có cấu trúc của GitHub, hỗ trợ văn bản tự do kết hợp với bộ lọc key:value, tự động hoàn thành kép, đánh dấu tùy chọn với hình ảnh, xác thực với gạch chân sóng và tích hợp form gốc. Thành phần này sử dụng OpaqueRange API (Chrome 152+) để lấy tọa độ phạm vi văn bản chính xác và áp dụng CSS Custom Highlights bên trong input gốc mà không cần mirror-div, với fallback dựa trên contenteditable cho trình duyệt không hỗ trợ. Tác giả xây dựng thành phần này với sự hỗ trợ của Google Antigravity (Gemini), chia sẻ prompt đầy đủ và lưu ý AI tự động thêm các tính năng như nút xóa và điều hướng bàn phím. Hiện <rich-input> có sẵn qua npm và jsDelivr CDN.

Thành phần <rich-input> mang lại trải nghiệm tìm kiếm nâng cấp như GitHub với xác thực và tự động hoàn thiện cho trang web của bạn.

light mode toggle Web Component)—zachleat.com

Bối cảnh của bài viết là implementation một light mode toggle Web Component cho trang web. Nguyên nhân kỹ thuật là vì việc sử dụng localStorage và window.matchMedia API cho phép theo dõi preference người dùng hiệu quả. Hệ quả của component này là nó hỗ trợ cả 3 chế độ: light, dark và theo hệ thống (system) với code ngắn gọn. Điều đáng học là cách tác giả xử lý logic toggle bằng CSS custom properties và sự kiện storage event để đồng bộ trạng thái giữa các tab. Component này chỉ khoảng 70 dòng code nhưng đủ để triển khai tính năng dark mode hoàn chỉnh trên các dự án web.

Bài viết hướng dẫn tạo toggle light mode dễ dàng bằng Web Component.

Release 0.15.0 · woylie/doggo

Headless UI components for Phoenix. Contribute to woylie/doggo development by creating an account on GitHub.

Code Snack

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

Introducing <hic-pageflip>: A Pageflip/Flipbook Custom Element powered by HTML-in-Canvas

A new open-source web component called <hic-pageflip> recreates the classic Flash-era pageflip/flipbook effect using the experimental HTML-in-Canvas API in Chrome, letting real HTML content (selectable text, clickable links, accessible DOM nodes) be rendered inside true 3D conical/cylindrical page curls via WebGL shaders, or a simpler 2D canvas engine. The component requires enabling a Chrome flag, is installable via npm or CDN, and comes with a demo site and source code on GitHub. It was built in under two hours as a prototype and then refined with the help of Google Antigravity.

Polaris CDN 1.1 release candidate

Shopify’s developer changelog documents all changes to Shopify’s platform. Find the latest news and learn about new platform opportunities.

The Polaris CDN is adopting semantic versioning

Shopify’s developer changelog documents all changes to Shopify’s platform. Find the latest news and learn about new platform opportunities.

Chris’ Corner: Remember <me>

Sometimes we gotta take matters into our own hands, am I right? I was reading Aaron Gustafson's Never Lose Form Progress Again which is just a wonderful idea for a Web Component. Basically you wrap a <form> in <form-saver> and it saves the data a person types into a form to localStorage so they don't…

Design Systems + Horizontal @layer – Master.dev Blog

My post Thinking Horizontally in CSS @layer got Stuart Robson thinking about how to pull it off at a bigger scale. Stu is right that our components are essentially hand-written, whereas with a more enterprise-scale design system, design tokens are more likely to come from a build pipeline. That got Dave Rupert thinking about how […]

Design Tokens, Web Components, and CSS @layer

Các nhóm phát triển UI đang tìm cách thống nhất thiết kế qua design tokens trong khi vẫn muốn tận dụng khả năng đóng gói của web component Shadow DOM. Bài viết hướng dẫn trích xuất siêu dữ liệu từ các token (màu, khoảng cách, font…) và chuyển đổi chúng thành quy tắc CSS :host cho trạng thái mặc định và :defined để áp dụng khi component được khai báo. Khi áp dụng, mọi thay đổi trong file token sẽ tự động truyền lan tới tất cả component mà không cần chỉnh sửa từng file CSS, đồng thời sử dụng CSS @layer để kiểm soát độ ưu tiên giữa các lớp cơ bản và lớp tùy chỉnh. Điều này cho thấy việc kết hợp siêu dữ liệu token với các pseudo‑class của Shadow DOM và cascade layer giúp giảm thiểu mã CSS trùng lặp và tăng khả năng bảo trì cho hệ thống thiết kế. Đối với lập trình viên đang cân nhắc áp dụng design token trong dự án web component, bài viết cung cấp một ví dụ cụ thể về quy trình sinh mã và lợi ích thực tế mà có thể tham khảo ngay.

Bài viết này giúp bạn kết hợp Design Tokens, Web Components và CSS @layer một cách hiệu quả để quản lý styles trong Shadow DOM.

Introducing Microlighter

I made a smol client-side syntax highlighter that uses the CSS Custom Highlights API called MicroLighter. I’ll talk about why I made it in a bit but first I wanted to… ahem… highlight… some of the features.

Shadow-piercing local component variables

Bài viết bàn về cách giảm độ ưu tiên (specificity) cho các biến CSS cấp component bằng cách sử dụng @layer và metadata token, nhằm giải quyết vấn đề mở rộng hệ thống thiết kế. Nội dung phản hồi trước đó của Stuart Robson về CSS @layer được đề cập như một giải pháp hữu ích cho vấn đề tương tự mà tác giả đang gặp phải.

Một lập trình viên nên đọc bài này để giải quyết vấn đề quản lý và tối ưu hóa tính năng layering trong CSS với các biến thiết kế (design tokens) ở cấp thành phần địa phương, giúp tránh tình trạng xung đột và làm cho mã CSS trở nên sạch đẹp hơn trong các hệ thống thiết kế lớn.

A little progressive enhancement as a treat

Áp dụng progressive enhancement để xử lý API bị giới hạn rate, khối lượng nội dung lớn và duy trì mục tiêu phát triển.

Lập trình viên nên đọc bài này để hiểu cách tối ưu hóa ứng dụng của mình bằng cách kết hợp tương thích cơ bản với các tính năng nâng cao, giúp hệ thống hoạt động hiệu quả hơn với API giới hạn và dữ liệu lớn mà không cần phụ thuộc vào công nghệ phức tạp.

Should a Dialog Close When Clicked Outside?

Việc đóng hộp thoại khi nhấp ngoài hay nhấn Esc phụ thuộc vào ngữ cảnh: nếu người dùng phải hoàn thành nhiệm vụ bắt buộc trong hộp thoại, không nên cho phép đóng tạm thời.

Lập trình viên nên đọc bài này để hiểu cách thiết kế giao diện người dùng (UI) hiệu quả, tránh tình trạng làm mất trải nghiệm khi dialog tự động đóng khi người dùng không hoàn thành yêu cầu chính.

Am I neglecting my open source projects?—zachleat.com

Bài viết của Zach Leatherman bày tỏ nỗi lo lắng về việc có đang bỏ bê các dự án open source của mình hay không, đồng thời chia sẻ những thách thức và suy nghĩ cá nhân xung quanh vấn đề duy trì các dự án mã nguồn mở.

Một lập trình viên nên đọc bài này để hiểu cách đánh giá hiệu quả và động lực của các dự án mở nguồn của riêng mình, tránh tình trạng bỏ quên mà vẫn giữ được sự liên kết với cộng đồng và giá trị thực tế của công việc.

adam bien's blog

Web framework truyền thống hướng tới nhà phát triển con người, nhưng agent AI có thể viết code trực tiếp trên nền tảng web, giảm thiểu phụ thuộc (package.json, bundler, transpiler) và sử dụng import map thay thế. Custom Elements đang được các nền tảng lớn (GitHub, YouTube, Photoshop) sử dụng, trong khi React 19 bổ sung hỗ trợ chính thức, cho thấy xu hướng frameworks tiến gần hơn tới tiêu chuẩn web.

Lập trình viên nên đọc bài này để hiểu cách web platform đang thay đổi cách phát triển ứng dụng, cho phép các công cụ AI hoặc mã nguồn trực tiếp tối ưu hóa hiệu suất và tính linh hoạt mà các framework truyền thống không thể cung cấp.

Vibe Check №43

Mùa hè vừa trôi qua nhanh chóng với lịch trình bình thường: trẻ em tham gia trại hè, gia đình đi nghỉ dưỡng, tài khoản ngân hàng cũng "cạn kiệt" theo.

Lập trình viên nên đọc bài này để khám phá cách cân bằng giữa sự hăng hái công việc và thời gian cá nhân trong mùa hè, giúp họ tránh tình trạng mệt mỏi và duy trì năng suất lâu dài.

adam bien's blog

Các framework web vốn hướng tới nhà phát triển con người, nhưng các tác nhân AI không cần những yếu tố đó. Viết trực tiếp trên nền tảng web giúp loại bỏ các công cụ phụ trợ (package.json, bundlers, transpilers) và tận dụng lợi thế của custom elements, vốn ổn định và được hỗ trợ rộng rãi, giúp mã nguồn bền vững hơn trước sự thay đổi của framework.

Nếu bạn là lập trình viên muốn tìm hiểu cách AI có thể thay đổi cách phát triển web hiệu quả hơn bằng cách sử dụng trực tiếp nền tảng web thay vì các framework phức tạp.

adam bien's blog

Adam Bien cho rằng các web framework đang trở nên lỗi thời trước hai xu hướng: các tác nhân (agent) dựa trên LLM không cần các lớp trừu tượng dễ đọc hay đường cong học tập ngắn, và nền tảng web đang thu hẹp khoảng cách với tiêu chuẩn native nhờ các API sẵn có như Custom Elements, Shadow DOM, ES modules, Navigation API, CSS nesting. Chỉ còn lỗ hổng về khả năng render gián đoạn cho các UI nặng, vốn không phổ biến.

Những lập trình viên muốn hiểu cách tương lai của web sẽ thay đổi khi các công nghệ mới như LLM và nền tảng browser tự động hóa lại các quy tắc truyền thống, từ đó giúp họ tối ưu hóa kiến trúc dự án và chọn lựa công cụ phù hợp với nhu cầu thực tế.

adam bien's blog

Sử dụng các đặc tả tiêu chuẩn của nền tảng web (HTML, DOM, CSS, ECMAScript, ARIA) làm cơ sở giúp các tác nhân AI tạo ra mã đáng tin cậy hơn so với việc kết hợp từ hướng dẫn, tài liệu framework và câu trả lời trên Stack Overflow. Tính tương thích ngược chặt chẽ của nền tảng web đảm bảo mã cũ và mới không mâu thuẫn, giảm thiểu lỗi như nhầm lẫn hành vi Chrome-specific là tiêu chuẩn hay sử dụng API không tồn tại.

Lập trình viên nên đọc bài này để tránh nhầm lẫn giữa các khái niệm chuẩn Web Platform với các tính năng cụ thể của framework hay browser, từ đó viết mã hiệu quả, bền vững và không phụ thuộc vào các nguồn thông tin không chính xác.

Why we built EGP Code, an HTML-based AI editor for landing pages

Nhóm phát triển tại Merpay xây dựng EGP Code, một trình soạn thảo AI dựa trên HTML dành cho landing page, nhằm tối ưu hóa quy trình thiết kế và phát triển.

Lập trình viên nên đọc bài này để khám phá cách kết hợp công nghệ AI với thiết kế landing page bằng HTML, giúp tối ưu hóa hiệu suất phát triển và tạo ra giao diện web nhanh chóng, hiệu quả hơn.

Four Mechanisms Behind EGP Code, an AI-Powered Landing Page Editor

EGP Code là một trình biên tập landing page chạy bằng AI do Merpay phát triển, sử dụng bốn cơ chế chính để tối ưu hóa hiệu suất.

Lập trình viên frontend nên đọc bài này để hiểu cách AI tự động hóa thiết kế trang web thông qua bốn cơ chế cơ bản, giúp tiết kiệm thời gian và nâng cao hiệu quả trong việc xây dựng UI/UX với công cụ hiện đại.