#web-components

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.

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.

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.

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

<calc-input>, a custom input element that accepts mathematical formulas

Calc-input là một custom element mở-source cho phép tạo form field chấp nhận công thức toán học như '2 + 3' hoặc '(2 + 3) * 4'. Thành phần này sử dụng parser đệm quy mô an toàn (không dùng eval()) để hỗ trợ các toán tử tiêu chuẩn, ngoặc đơn và hàm toán học thông dụng. Nguyên nhân kỹ thuật là do component render 3 text input trong Light DOM để đảm bảo tính tương thích với form submission và constraint validation của HTML. Hệ quả là người dùng thấy công thức khi focus và kết quả tính toán khi blur, với option cấu hình để gửi formula, result hoặc cả hai. Điều đáng học là thành phần sử dụng display: contents cho phép CSS cascade đến các input inner, và có thể tích hợp qua npm hoặc CDN.

Lập trình viên nên đọc bài này để tìm hiểu cách tạo thành phần tùy chỉnh <calc-input> cho phép người dùng nhập công thức toán học và tự động tính kết quả.

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.

Pseudo-pseudo-classes for maximum interactive demos!

Have you ever wanted to display all variants of a Button next to each other in your Storybook like your designer did in Figma? But then you come to a screeching halt when you realize :hover, :active, :focus don’t work without user-interaction? Blergh. Whatever can we do?

Theme Switching Made Easy

My <theme-switcher> web component builds on <form-multi-switch> to offer explicit System, Light, and Dark choices, remember preferences, and support additional custom themes.

There Can Be Only One, Redux

Building on my HTMHell piece about “choose one” fields, I created <form-multi-switch> to turn radio buttons into a more compact switch control.

Alchemy 8.4 released

Alchemy 8.4 removes jQuery, rails-ujs and Select2 from the admin interface, continuing a long rebuild on web components, ES modules and Turbo. Select2 is replaced by Tom Select, and the remaining remote forms and links use Turbo. The release adds a broad security hardening pass, including an opt-in Content Security Policy for the admin, an upload file type allowlist, and escaping for CSV exports and preview text. Caching gets finer control, with per-element and per-page-layout cache-control headers and a cached XML sitemap. TinyMCE is updated to 8.9 and PostgreSQL 18 joins the test matrix.

Polaris 2.0 is now stable

Shoppy vừa công bố Polaris 2.0 đạt trạng thái ổn định sau quá trình phát triển. Thay đổi này cập nhật các thành phần React, bao gồm việc nâng cấp từ version 15 lên version 18 và tích hợp hệ thống thiết kế mới. Việc sử dụng Polaris 2.0 giúp các ứng dụng Shopify có giao diện nhất quán và trải nghiệm người dùng cải thiện rõ rệt. Lập trình viên nên cập nhật để tận dụng các component mới và cải thiện hiệu năng ứng dụng. Đặc biệt, bản cập nhật này hỗ trợ tốt hơn với tính accessibility và responsive design trên nhiều thiết bị.

Lập trình viên nên đọc bài này để cập nhật những thay đổi mới nhất trên nền tảng Shopify và khai thác các cơ hội phát triển ứng dụng.

I’ve Changed My Mind About CSS Variables

An email from Eric Meyer prompted me to revisit my 2014 argument against CSS variables: what I missed, how I use them now, and why fallbacks still matter.

A reusable tooltip built with a custom element

Trong bối cảnh cần giải pháp tooltip linh hoạt và khả năng tiếp cận cao, bài trình bày custom element <tool-tip> chỉ yêu cầu lượng JavaScript tối thiểu. Nguyên nhân kỹ thuật là nhờ tận dụng sức mạnh của custom element API và Shadow DOM cho tooltip tự động định vị và tuân thủ WCAG. Hệ quả là giải pháp này hoạt động độc lập, không phụ thuộc vào framework hay thư viện bên ngoài, đồng thời giảm đáng kể code phải viết. Điều đáng học là cách tiếp cận component-first này minh họa rõ lợi thế của Web Components trong việc xây dựng UI tái sử dụng mà không cần phức tạp hóa dự án.

Lập trình viên nên đọc bài này để học cách tạo tooltip có thể tái sử dụng với ít JavaScript nhất có thể.

Sortable Tables with Progressive Enhancement :: Aaron Gustafson

Nhiều năm trước, tác giả đã tạo một jQuery plugin tên là Easy Sortable Tables để cho phép người dùng sắp xếp bảng bằng cách nhấp vào tiêu đề cột. Xu hướng hiện nay là không sử dụng jQuery nữa, do tác giả đã modernize công cụ này thành một web component có tên <table-sortable> để thích ứng với sự phát triển của web platform. Việc chuyển từ jQuery sang web component giúp giảm kích thước bundle và tăng tính tái sử dụng component. Lập trình viên nên đọc bài gốc để hiểu cách implement Progressive Enhancement cho table sorting mà không phụ thuộc vào jQuery.

Bài này giúp bạn cập nhật kỹ thuật tạo bảng có khả năng sắp xếp bằng cách chuyển từ jQuery sang web component phù hợp với tiêu chuẩn web hiện đại.

Shopify Upgrades Checkout Blocks to Polaris Web Components, Cutting Bundle Sizes up to 85%

Shopify đã nâng cấp ứng dụng Checkout Blocks, chuyển đổi 5 tiện ích UI checkout có lưu lượng truy cập cao sang sử dụng remote-dom với Preact và Polaris web components. Việc viết lại mã nguồn này giúp giảm kích thước bundle lên đến 85%, một cải tiến đáng kể về hiệu năng. Nguyên nhân kỹ thuật chính là việc chuyển từ kiến trúc cũ sang sử dụng TypeScr và các component web, giúp tải code hiệu quả hơn. Điều đáng học hỏi là cách Shopify tối ưu hóa trải nghiệm người dùng bằng cách giảm thiểu tải trọng mà vẫn duy trì được các tính năng quan trọng, cho thấy hiệu quả khi áp dụng các công nghệ web component hiện đại.

Đọc bài này để hiểu cách Shopify tối ưu hóa kích thước bundle lên đến 85% khi nâng cấp Checkout Blocks lên Polaris Web Components.

Astro Tutorial: Make a Static Site with Interactive Components

Bài viết hướng dẫn xây dựng blog tương tác với file-based routing và content collections. Sử dụng islands architecture giúp giảm JavaScript chỉ còn 4.5KB khi chỉ có 3 trong số 12 component cần interactivity. Kết quả tạo ra static site có hiệu năng cao với lượng JavaScript tối thiểu. Đây là giải pháp lý tưởng cho dự án cần cân bằng giữa tốc độ load và trải nghiệm người dùng.

Bài hướng dẫn này giúp bạn tạo trang tĩnh với thành phần tương tác hiệu quả bằng kiến trúc islands.

Tabbed Interface: The Web Component :: Aaron Gustafson

I keep coming back to tabbed interfaces.

I Put a Neural Network Inside a TypeScript File to Kill the Cron Expression

I Put a Neural Network Inside a TypeScript File to Kill the Cron Expression A 75,000-parameter model, a few hundred lines of grammar, and the stubborn rule that the AI is never allowed to write the …

Polaris 2.0 release candidate

Shoppy vừa ra mắt Polaris 2.0 release candidate, bản cập nhật quan trọng cho hệ thống UI framework của nền tảng thương mại điện tử này. Bản cập nhật này tập trung vào việc cải thiện performance, giảm 40% thời gian load components so với phiên bản trước nhờ tối ưu hóa re-rendering mechanism. Sự thay đổi này ảnh hưởng trực tiếp đến trải nghiệm người dùng cuối và thời gian phát triển ứng dụng trên Shopify. Lập trình viên nên cân nhắc nâng cấp sớm để tận dụng các API mới như Stack Layout và improved theming system.

Bài viết cung cấp thông tin cập nhật quan trọng về các thay đổi mới nhất trên nền tảng Shopify, giúp lập trình viên nắm bắt cơ hội phát triển và tối ưu ứng dụng.

Chris’ Corner: Web Components

Dave Rupert đã phát triển MicroLighter - một công cụ syntax highlighter mới với kích thước chỉ 2 KB. Công nghệ này tối ưu hóa giao dịch giữa tính năng và hiệu suất, phù hợp cho các công việc highlight syntax ít tần số. Sự đánh đổi đáng giá này giúp giảm đáng kể kích thước bundle trong khi vẫn đảm bảo chức năng cốt lõi. Đây là một case study thú vị về cách tối ưu hóa hiệu năng trong JavaScript libraries, đặc biệt hữu ích cho các dự án cần sự cân bằng giữa nhẹ nhàng và đủ tính năng.

Bài giới thiệu về MicroLighter cung cấp phân tích sâu về sự đánh đổi kỹ thuật giúp bạn hiểu cách tối ưu hóa hiệu suất cho công cụ highlight syntax.

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

Edge và Chromium vừa bổ sung nhiều API mới cho nhà phát triển như OpaqueRange, referenceTarget, aria-actions và window-drag nhằm cải thiện trải nghiệm người dùng. Các tính năng này giúp tạo component mạnh mẽ hơn và chuẩn bị cho tương lai của agent-ready với WebMCP. Hệ quả là người dùng có thể kéo cửa sổ ứng dụng dễ dàng hơn, đồng thời các công cụ như Profiler marker mới sẽ hỗ trợ tốt hơn cho debug hiệu năng. Bài viết đáng học hỏi vì cung cấp hướng dẫn thực tế về cách sử dụng API mới để tối ưu hóa ứng dụng web.

Bài viết giới thiệu các API mới trong Edge giúp lập trình viên tạo thành phần tốt hơn và chuẩn bị trang web cho tương tác với agent.