html

Bilingual

The Difference Between a Button and a Link
2 months ago
- The Triptych Project proposes adding 'action' and 'method' attributes to HTML buttons, called Button Actions.
- Links represent destinations that can be re-contextualized (opened in new tab, bookmarked, etc.), while buttons trigger actions in a fixed context without those affordances.
- Buttons are often needed for navigations (e.g., logout, search) but lack the ability to trigger them without being inside a form, leading to the anti-pattern of styling links as buttons.
- Button Actions would allow buttons to navigate to views directly, reusing existing routes and supporting state transitions without JavaScript.
- The proposal addresses common use cases like DELETE requests for comments or likes, improving simplicity, safety, and accessibility.
Every JavaScript bundler handles inline script tags wrong
2 months ago
- JavaScript can be included in web pages via external files (using <script> tag with src attribute) or inline within <script> tags.
- Inline <script> tags are increasingly used for self-contained apps and HTML artifacts, but contain pitfalls like the string '</script>' prematurely ending the script.
- The HTML specification includes a 'script data double escaped state' loophole where sequences like <!-- followed by <script> prevent normal script termination.
- JavaScript build tools and minifiers often fail to correctly handle escaping of problematic strings (</script>, <!--) in literals and expressions for inline <script> tags.
- ESBuild performs best among tested tools but still fails to escape <!-- in literals; other tools like Terser, SWC, Oxc, Bun, UglifyJS, Closure Compiler, and minify also fail in various ways.
- No JavaScript build tool currently correctly handles all cases for inline <script> tags, highlighting the need for better awareness and handling of these edge cases.
The <Usermedia> HTML Element
2 months ago
- Chrome 151 introduces the <usermedia> HTML element, part of the Capability Elements suite, which transitions from generic permission prompts to targeted, declarative controls for camera and microphone access.
- The element improves security and user experience by reducing boilerplate code, providing clear user intent through physical interaction, and enabling seamless recovery for previously denied permissions.
- Real-world data from an Origin Trial shows significant improvements: Cisco saw permission grant rates jump from 10% to over 65%, Zoom reported a 46.9% decrease in capture errors, and Google Meet noted a 17% drop in 'mic not working' feedback.
- Implementation involves adding the <usermedia> tag to HTML, using setConstraints() for hardware preferences, and handling events like 'stream', 'error', and 'cancel' for successful access, failures, or user dismissals.
- The element enforces styling restrictions for legibility, sizing, and visual integrity to prevent deceptive designs and supports progressive enhancement with fallbacks to legacy getUserMedia() API for unsupported browsers.

The Difference Between a Button and a Link

Every JavaScript bundler handles inline script tags wrong

The <Usermedia> HTML Element