#web-components

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.

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.

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ả.

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.

The harness is all you need (mostly)

Quy trình thực tế với GitHub Copilot giúp lập kế hoạch, triển khai, rà soát phần mềm hiệu quả mà không cần theo đuổi mọi công cụ AI mới.

Là người viết mã hàng ngày, bạn nên đọc bài này để khám phá cách sử dụng GitHub Copilot như một công cụ tích hợp, thay vì phụ thuộc vào các công cụ AI riêng biệt, giúp tối ưu hóa thời gian phát triển từ giai đoạn thiết kế đến review mà không mất thời gian tìm hiểu các công nghệ mới.

Progressive Web Components

Elena là thư viện nhỏ gọn giúp xây dựng Progressive Web Components.

Lập trình viên nên đọc bài này để khám phá cách tạo các Progressive Web Component đơn giản và hiệu quả với Elena, một thư viện nhỏ gọn giúp tối ưu hóa phát triển ứng dụng web tiến bộ mà không cần phụ thuộc vào các công cụ phức tạp.

Getting started with implementing my music collection

Đang chuyển đổi bộ sưu tập nhạc hiện có sang định dạng mới sử dụng Astro, bằng cách tích hợp markdown và front matter.

Lập trình viên nên đọc bài này để chuyển đổi từ cách quản lý tập nhạc truyền thống sang Astro, một công cụ hiện đại giúp tích hợp dễ dàng với các trang web hiện đại, tối ưu hóa hiệu suất và mở rộng khả năng tương tác với dữ liệu âm nhạc một cách hiệu quả.

Microfrontends from First Principles

Bài viết "Microfrontends from First Principles" do Andrew Redican xuất bản.

Lập trình viên nên đọc bài này để hiểu cách xây dựng các ứng dụng lớn hiệu quả bằng cách chia nhỏ thành các module độc lập, tối ưu hóa khả năng phát triển và bảo trì mà không cần phải thay đổi toàn bộ hệ thống.

Jelly UI — Soft Web Components

Jelly UI là thư viện Web Components không phụ thuộc vào bất kỳ thư viện nào khác, được thiết kế cho giao diện sản phẩm mượt mà với các tính năng như vật lý soft-body, điều khiển form thực tế, chế độ tối, hỗ trợ RTL và tiêu chuẩn WCAG AA.

Lập trình viên muốn xây dựng giao diện người dùng tương tác, thân thiện và tuân thủ tiêu chuẩn dễ dàng hơn với Jelly UI, một thư viện Web Components không phụ thuộc vào các công cụ bên ngoài, hỗ trợ vật lý mềm, kiểm soát hình thức thực tế và tính năng đa ngôn ngữ.

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.

The shopify-account component for customer accounts is now a Theme Store requirement

Shopify yêu cầu tất cả theme trong Theme Store phải tích hợp component shopify-account cho tài khoản khách hàng. Thay đổi này được cập nhật trong changelog dành cho nhà phát triển.

Lập trình viên cần đọc để cập nhật kiến thức về yêu cầu mới của Shopify về Shopify Account Component trong Theme Store, giúp tối ưu hóa thiết kế và tuân thủ tiêu chuẩn cho các ứng dụng bán hàng trên nền tảng này.

Same Name; Different Component with Scoped Custom Element Registries – Master.dev Blog

Chrome 146 bổ sung tính năng scoped custom element registry, giúp các phiên bản khác nhau của custom elements có thể chia sẻ cùng tên thẻ (tag name) mà không cần dùng chung namespace toàn cục.

Lập trình viên cần hiểu về scoped custom element registry để tránh xung đột tên tag khi phát triển ứng dụng đa môđun hoặc tích hợp các thư viện Web Components, giúp dự án bảo mật và dễ quản lý hơn.

How to build an Astro integration

Hướng dẫn xây dựng một Astro integration từ đầu bằng cách sử dụng hooks, cập nhật cấu hình, chèn routes/scripts, metadata package và kiểm thử cục bộ.

Một lập trình viên muốn mở rộng khả năng của Astro bằng cách tạo các plugin hoặc extensions riêng cho dự án của mình sẽ tìm hiểu cách xây dựng một integration Astro từ cơ bản đến nâng cao.

Show HN: Writemark, a dependency free web component for inline Markdown editing

Writemark là một web component không phụ thuộc vào thư viện nào, hỗ trợ chỉnh sửa Markdown nội tuyến theo thời gian thực, hiển thị kết quả ngay khi gõ nhưng vẫn lưu trữ dưới dạng Markdown thô. Nó cung cấp các chế độ xem source, split, preview, hỗ trợ lệnh slash, bảng, danh sách tác vụ, khối code cùng tích hợp form gốc, tất cả trong một tệp JavaScript duy nhất.

Nếu bạn đang tìm kiếm giải pháp đơn giản, hiệu quả để tích hợp chỉnh sửa Markdown trực tuyến mà không cần phụ thuộc vào các framework phức tạp, Writemark là lựa chọn lý tưởng để tránh sự phức tạp của textarea thông thường và tối ưu hóa trải nghiệm cho cả lập trình viên và người dùng.

Issue #751: Rebuilding the World Cup table with CSS Subgrid — Frontend Focus

Frontend Focus Issue #751: Rebuilding the World Cup table with CSS Subgrid

Full-stack capabilities to power app analytics

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

Building a Web Component: : A Step-by-Step Guide

Learn to build a reusable Web Component from scratch using Custom Elements, Shadow DOM, attributes, slots, and events.

Project Prototype Series

Project Prototype Series Signature pad. “The Webapp UI Component Series contains many modules with basic webapp functionality and style attributes. The purpose of this Series is to organize Webapp …

Webapp UI Component Series

Bài viết giới thiệu loạt bài về UI Component cho webapp, tập trung vào cách xây dựng component dưới dạng class kết hợp với các hàm riêng biệt hoặc dưới dạng các script độc lập.

Lập trình viên nên đọc để hiểu cách tối ưu hóa thiết kế UI trong webapp bằng cách phân chia logic và UI thành các lớp riêng biệt, giúp code dễ bảo trì, tái sử dụng và mở rộng hiệu quả.

Use cases for aria-expanded

Without reading dry documentation, finding the correct use for aria roles can be a challenge, so Steve Frenzel is here to break down the often mis-used aria-expanded.

If you want to create a button from scratch, you must first create the universe

Việc sử dụng các thành phần HTML sẵn có thay vì thêm ARIA vào các phần tử tùy chỉnh sẽ giúp đảm bảo tính tương thích và khả năng truy cập tốt hơn.

Lập trình viên nên đọc bài này để hiểu cách thiết kế giao diện web hiệu quả hơn bằng cách xây dựng từ cơ sở HTML nguyên sinh, thay vì phụ thuộc vào các thuộc tính ARIA chỉ để cải thiện khả năng tương tác cho người dùng có nhu cầu đặc biệt.

adam bien's blog

Dự án bce.design đã loại bỏ toàn bộ hệ thống build bằng cách thay thế Redux Toolkit bằng reduction.js (70 dòng) dùng structuredClone, và tích hợp trực tiếp lit-html từ npm qua curl. Chỉ còn dependency duy nhất là lit-html, được quản lý qua import map trong HTML, kết hợp với Navigation API và URLPattern thay thế router library, giúp xóa bỏ Node.js, npm, rollup và lockfiles, giảm tới 777 dòng code.

Lập trình viên nên đọc bài này để khám phá cách tối ưu hóa dự án web bằng các giải pháp đơn giản, hiệu quả mà không cần phụ thuộc vào hệ thống build phức tạp, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

adam bien's blog

Adam Bien demonstrates that the BCE (Boundary-Control-Entity) architectural pattern, previously shown in Java CLI applications, translates directly to browser-based frontend development. Using web components and lit-html with no build step or framework, the project organizes code into feature directories each containing boundary (custom element), control (action dispatcher), and entity (state/reducer) layers. The dependency direction mirrors the Java convention: boundary calls control, control updates entity through the store. This cross-technology consistency means Java developers can navigate the frontend codebase and vice versa, illustrating the value of fixed naming conventions across platforms.

How to Build Custom Security UI with Turbine Widgets and AI

Turbine Widgets are custom web components built with the Lit framework that extend the Swimlane Turbine security platform UI on case records and dashboards. There are three ways to build them: import a ready-made widget from the Swimlane CDN with a single line, code one from scratch by extending SwimlaneElement, or describe the desired widget in plain language to Hero AI which generates the code and shows a live preview. The widget catalog includes over 100 examples with full source code, including an ROI Calculator, Case Summary, and MITRE ATT&CK Heatmap widget.

Build a changelog widget (with Perron)

A tutorial on building a self-hosted changelog widget similar to Headway or Beamer using Perron's Embed Content custom element. The component fetches JSON from any endpoint, renders changelog entries, tracks unread state via a last-read-at timestamp, and displays an unread badge. The guide covers setup, JSON feed configuration, dropping the custom element into HTML with the appropriate attributes, and styling via CSS custom properties. The JSON feed can come from Perron, a Rails endpoint, or any headless CMS.

Nested forms in Nette Forms 3.3 – Nette Blog

Nette Forms 3.3 bổ sung thẻ template {form detached} để giải quyết hạn chế HTML khi không thể lồng thẻ <form>, sử dụng thuộc tính form của HTML5 giúp các phần tử input/button tham chiếu form qua ID bất kể vị trí trong DOM. Ngoài ra, phiên bản này cũng giới thiệu {form scope} thay thế thống nhất cho {formContext} và {formContainer}, hỗ trợ render các đoạn form riêng lẻ hoặc AJAX snippet mà không tạo thẻ <form> mới.

Lập trình viên nên đọc bài này để hiểu cách giải quyết vấn đề hạn chế của HTML khi cố gắng đặt nhiều bên trong nhau và tìm hiểu về các tính năng mới như và trong Nette Forms 3.3 để tối ưu hóa giao diện và xử lý dữ liệu form hiệu quả.

Alchemy 8.3 released

AlchemyCMS 8.3 has been released with a completely redesigned admin dashboard featuring configurable, lazy-loaded widgets. New wildcard URL support allows dynamic content routing via URL pattern matching. The release also replaces the custom select web component with Tom Select (removing a jQuery dependency), updates TinyMCE to 8.6.0, adds automatic element cache invalidation on related object changes, and includes several developer ergonomics improvements. Breaking changes include removal of the AlchemyHTMLElement base class and soft-removal of Ruby 3.2 from the test matrix. Upgrading requires bumping the gem version and running the built-in upgrader.

Issue #747: CSS that picks its own readable text color — Frontend Focus

Frontend Focus issue #747 covers CSS techniques for readable text color selection, Astro 7.0's release with a Rust-powered compiler and 15–61% faster builds, Mozilla's PACT proposal for privacy-preserving bot rate-limiting, accessibility pitfalls of CSS Grid Lanes and WCAG 2.4.3 compliance, animating the dialog element with View Transitions API, AI coding agents' poor accessibility output, and several tools including a lightweight Web Component framework, an accessible HTML5 media player, and a browser fingerprinting demo page.

Embeddable Widgets with Vite, React, Tailwind 4 & Web Components

A practical walkthrough of building embeddable widgets using React, Tailwind 4, Vite, and Web Components delivered as a single JS file. Two significant browser limitations are uncovered and solved: Tailwind 4's heavy reliance on CSS @property rules which Shadow DOM doesn't fully support, and @font-face declarations not working inside Shadow Roots. The @property issue is addressed with a custom PostCSS plugin (~300 lines) that transforms Tailwind's property registrations into concrete CSS variable declarations scoped to the shadow host. The font issue is handled by a runtime font loader using the FontFace API that attaches fonts to the parent document instead of the Shadow Root.