Resilient Import Maps - Better Theme Development and Beyond (2025) - Shopify
Resilient Import Maps - Better Theme Development and BeyondImport maps are great for both performance and developer experience, but their original limitations made them hard to use, especially at Shopify’s scale. We stepped up and pushed changes across the HTML spec, Chromium and WebKit to fix these issues at the web platform level. Now, developers can interleave JavaScript modules and multiple im
Introducing command and commandfor | Blog | Chrome for Developers
Published: March 7, 2025 Buttons are essential to making dynamic web applications. Buttons open menus, toggle actions, and submit forms. They provide the foundation of interactivity on the web. Making buttons simple and accessible can lead to some surprising challenges. Developers building micro-frontends or component systems can encounter solutions that become more complex than necessary. While f
GitHub - WebReflection/uhtml: A micro HTML/SVG render
uhtml as default { Hole, render, html, svg, attr } with smart auto-keyed nodes - read keyed or not ? paragraph to know more uhtml/keyed with extras { Hole, render, html, svg, htmlFor, svgFor, attr }, providing keyed utilities - read keyed or not ? paragraph to know more uhtml/node with same default exports but it's for one-off nodes creation only so that no cache or updates are available and it's
HTML Web Components Can Have a Little Shadow DOM, As A Treat | Scott Jehl, Web Designer/Developer
HTML Web Components Can Have a Little Shadow DOM, As A Treat Aug 5, 2024 By Scott Jehl Well, I swore myself off blogging until I get this course launched and sure enough, here I am again. But a little idea about HTML Web Components has been squatting in my brain for a little while and I needed a place to put it. There's been a lot of great writing about HTML Web Components in the past year, and as
YouTube Embeds are Bananas Heavy and it’s Fixable – Frontend Masters Blog
TL;DR: YouTube Embeds are like 1.3MB in size with no shared resources between multiple embeds. Using a <lite-youtube> Web Component is more like 100k, does share resources, and sacrifices no functionality. You can put a YouTube video on any website. They help you do it. Under the Share menu right on youtube.com there is an option to <> Embed and you’ll see bit of HTML with an <iframe> in it. <ifra
lamplightdev - Streaming HTML out of order without JavaScript
Updated Sep 29 2024 to add further information about support in Safari, and updated information about support in Firefox. Let's start with a demo: https://ooo.lamplightdev.workers.dev: This is a simple page that renders a list of 10 items. Try it with and without JavaScript enabled in your browser. There's a few things to notice: The 'app shell' renders first - you see the header and the footer, b
Get All That Network Activity Under Control with Priority Hints
Get All That Network Activity Under Control with Priority Hints The browser is very good at prioritizing resources requests on its own. But it's not always great. Priority hints makes it easy to provide explicit instructions as to how and in what network activity occurs. Open up the browser's network tab and you'll see a lot of activity. Assets are being downloaded, information's being submitted,
What does the image decoding attribute actually do?
Err... thanks for the technical explanation. But what does this actually mean in real life? Which setting should you use? Does it even matter? And if it does, why don't those clever browser engineers just set it to the best setting? Well recently I ranted on Twitter about this (as I am often want to do!) in a long thread that really should have been a blog post. So here is that blog post. Some mis
Declarative Shadow DOM | web.dev
Declarative Shadow DOM Stay organized with collections Save and categorize content based on your preferences. Declarative Shadow DOM is a standard web platform feature, which has been supported in Chrome from version 90. Note that the specification for this feature changed in 2023 (including a rename of shadowroot to shadowrootmode), and the most up to date standardized versions of all parts of th
Intl.Segmenter で和文の改行をいい感じにしてみる
tl;dr ブラウザで文字列を表示する場合画面幅に応じて自動で改行されることがあります。英文などは分かち書きされているためブラウザは単語の区切りなどで改行することができますが、和文は文節が明確ではなく単語の途中で改行されてしまうことがあります。 この記事では、ECMA402 の Intl.Segmenter を用いて和文を分かち書きし、ブラウザに改行可能箇所を教えることでより読みやすいレイアウトを目指します。 (2023/04/14 追記) NPM package として公開しました 🚀 背景 ラテン文字を使用する多くの言語では語と語が空白で区切られていますが(以降分かち書き)、通常、日本語や中国語は分かち書きされていません。 一般的なブラウザでは表示領域(横幅)に対して表示させたい文字列が一行に収まらない場合自動で改行するような挙動になっています。英語のように既に分かち書きされた文の場
Building a dialog component | Articles | web.dev
In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here's a YouTube version of this post: Overview The <dialog> element is great for in-page contextual information or action
Mutation XSS via namespace confusion - DOMPurify < 2.0.17 bypass - research.securitum.com
In this blogpost I’ll explain my recent bypass in DOMPurify – the popular HTML sanitizer library. In a nutshell, DOMPurify’s job is to take an untrusted HTML snippet, supposedly coming from an end-user, and remove all elements and attributes that can lead to Cross-Site Scripting (XSS). This is the bypass:
The Making Of An Animated Favicon | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It’s the first thing your eyes look for when you’re switching tabs. That’s one way of explaining what a favicon is. The tab area is a much more precious screen real-estate than what most assume. If done right, besides being a label with icon, it can be the perfect billboard to represent what
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
`document.currentScript` is more useful than I thought.
GitHub - thepassle/swtl: A Service Worker Templating Language (swtl) for component-like templating in service workers. Streams templates to the browser as they're being parsed, and handles rendering iterables/Responses in templates by default.
A Better Way to Work With Number and Date Inputs in JavaScript
WICG、mXSS攻撃に対抗する新たなHTML Sanitizer APIプロポーザルを公開
Extracting Text from Content Using HTML Slot, HTML Template and Shadow DOM | CSS-Tricks
GitHub - mykolaharmash/hyntax: Straightforward HTML parser for JavaScript
GitHub - posthtml/posthtml: PostHTML is a tool to transform HTML/XML with JS plugins
