urn:uuid:0bb5f840-72ba-5581-bdf1-08f92a138f21 Daniel Aleksandersen https://www.daniel.priv.no/ Copyright © 2021 Daniel Aleksandersen. https://www.ctrl.blog/assets/favicon/favicon.svg 2021-09-18T09:19:00Z weekly 10 urn:uuid:28322e08-039b-4443-939b-bc460fef9229 2021-09-18T09:19:00Z 2021-09-18T09:19:00Z

Web browsers don’t yet support (text-wrap: balance). Adobe and the NYTimes have offer free JavaScript alternatives. I improved the latter to suit my needs.

<p>I looked into options to improve the breaking points for line wrapping on the web. I found a few “text balancer” programs that use different methods to even out the number of words per line on the fewest number of lines possible. I wasn’t happy with any of them, but ended up improving on the New York Times’ text balancer to get something useable. It wasn’t how I imagined spending my weekend.</p> <p><a href="https://www.ctrl.blog/entry/text-wrap-balance.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><a></code> or <code><link></code> element.</p> <p><a href="https://www.ctrl.blog/entry/rdfa-link-attributes.html">Read more …</a></p> urn:uuid:4b157f0f-8927-40b2-b3ac-dcde3fb5912f 2020-05-20T14:16:00Z 2020-05-20T14:16:00Z

A tutorial on how to load native lazy-loading images earlier in Safari and Firefox. Speed up page loading while keeping visitors from seeing loading images.

<p>Firefox recently joined Chrome and added support for native lazy-loading images (NLLI). NLLI delays loading images until they’re needed to speed up page load times, and reduce the data needed to display just what’s immediately needed to display a page.</p> <p><a href="https://www.ctrl.blog/entry/eager-lazy-loading.html">Read more …</a></p>