urn:uuid:0bb5f840-72ba-5581-bdf1-08f92a138f21 Daniel Aleksandersen https://www.daniel.priv.no/ Copyright © 2022 Daniel Aleksandersen. https://www.ctrl.blog/assets/logo/logo-square.svg 2022-03-11T08:26:00Z weekly 10 urn:uuid:213d130c-548b-4a3b-b4ef-a3d7523ed937 2022-03-11T08:26:00Z 2022-03-11T08:26:00Z

The HTML Standard is vague on whether the attributes are inclusive. Firefox, Safari, and Chrome have behave differently. Here’s my workaround.

<p>I recently found a use for the <code>&lt;meter&gt;</code> element: an element to represent a scalar measurement within a known range. (That’s the unappealing language the HTML Standard uses to describe a horizontal gauge bar.) However, I was dismayed to discover that different web browsers have vastly different interpretations of a vaguely defined aspect of the <code>&lt;meter&gt;</code> element. Here’s what I found and the workaround to get the same behavior in all browsers.</p> <p><a href="https://www.ctrl.blog/entry/html-meter-segment-boundaries.html">Read more …</a></p> urn:uuid:e8e40f3f-9903-40e9-9770-4b168cbf32f9 2021-10-28T11:18:00Z 2021-10-28T11:18:00Z

The HTML standard doesn’t provide web authors the tools required to embed small video files in a screen and bandwidth responsive way. This needs to change.

<p>We’ve had the HTML <code>&lt;video&gt;</code> element for over a decade. Yet, everyone still defaults to embedding YouTube frames instead of hosting their own videos. The underlying problem is that the <code>&lt;video&gt;</code> element isn’t suitable for embedding short video files on webpages.</p> <p><a href="https://www.ctrl.blog/entry/html-responsive-video.html">Read more …</a></p> urn:uuid:43b52f2e-9771-46fa-9d65-42587d288097 2021-06-11T12:06:00Z 2021-06-11T12:06:00Z

A comparison of the many different methods for embedding SVG into HTML webpages. Which work best with light/dark-mode, client caching, interactive mode, and more.

<p>In this article, you’ll learn about the different methods for embedding Scalable Vector Graphic (SVG) images onto webpages. I’ll discuss which methods support the various security and processing modes in SVG, which methods support dark mode using <code>@media</code> queries, and which are the most caching friendly. I’ll also touch on why the most backward-compatible embedding method is the worst for perceived performance and has the most accessibility bugs.</p> <p><a href="https://www.ctrl.blog/entry/svg-embed-dark-mode.html">Read more …</a></p> urn:uuid:e05b5664-4197-4bf8-bc85-27aa8426ef92 2021-02-15T10:22:00Z 2021-02-15T10:22:00Z

Source code minification is beneficial, but the resulting obfuscation reduces trust and transparency. Source maps can help restore these and let people learn.

<p>JavaScript source code minification is a beneficial tool for reducing download file sizes. However, the resulting obfuscation makes the code difficult to read, and reduces trust and transparency. Public source maps will help restore code readability and transparency. As a bonus, it enables others to learn from your code.</p> <p><a href="https://www.ctrl.blog/entry/deploy-javascript-source-maps.html">Read more …</a></p> urn:uuid:1c44958b-a118-4d0e-9fcb-0a96a9f15ff9 2020-08-16T07:54:00Z 2020-08-16T07:54:00Z

You can easily get unexpected HTML+RDFa Lite parsing results by unknowingly using it with RDFa Core attributes that just happens to also be HTML attributes.

<p>I’ve talked about HTML link metadata in the past. In that earlier article, I glanced over one detail that gave me a serious headache this week. That issue was the difference between the <code>property</code> and <code>rel</code> attributes, and how the two interoperate when used on the same <code>&lt;a&gt;</code> or <code>&lt;link&gt;</code> element.</p> <p><a href="https://www.ctrl.blog/entry/rdfa-link-attributes.html">Read more …</a></p>