urn:uuid:0bb5f840-72ba-5581-bdf1-08f92a138f21 Topic: HTML – Ctrl blog Daniel Aleksandersen https://www.daniel.priv.no/ Copyright © 2021 Daniel Aleksandersen. https://www.ctrl.blog/assets/favicon/favicon.svg 2021-06-11T12:06:00Z weekly 10 urn:uuid:43b52f2e-9771-46fa-9d65-42587d288097 2021-06-11T12:06:00Z 2021-06-11T12:06:00Z Best method for embedding dark-mode friendly SVG in HTML A comparison of the many different methods for embedding SVG into HTML webpages. Which work best with light/dark-mode, client cacheing, 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#src=feed">Read more …</a></p> urn:uuid:e05b5664-4197-4bf8-bc85-27aa8426ef92 2021-02-15T10:22:00Z 2021-02-15T10:22:00Z Don’t be shady, deploy your JavaScript source maps 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#src=feed">Read more …</a></p> urn:uuid:1c44958b-a118-4d0e-9fcb-0a96a9f15ff9 2020-08-16T07:54:00Z 2020-08-16T07:54:00Z The difference between RDFa’s property and rel attributes The difference between RDFa’s <code translate="no">property</code> and <code translate="no">rel</code> attributes 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#src=feed">Read more …</a></p> urn:uuid:4b157f0f-8927-40b2-b3ac-dcde3fb5912f 2020-05-20T14:16:00Z 2020-05-20T14:16:00Z Make native lazy-loading images load more eagerly 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#src=feed">Read more …</a></p> urn:uuid:737e0dd5-f566-4311-95cc-b431a6dc4e5b 2020-05-18T18:29:00Z 2020-05-18T18:29:00Z Everything you need to know about Night mode in Samsung Internet Night mode in Samsung browser explained. How it breaks page contrast and accessibility, pastelify SVG colors, and why web developers can’t do anything about it. <p>As a web developer, you may be familiar with the <code>prefer-color-scheme</code> Cascading Stylesheet (CSS) media query. It allows web developers to create separate stylesheets for light and dark color schemas. Web browsers apply one of these color schemes usually following the operating system’s color scheme preference.</p> <p><a href="https://www.ctrl.blog/entry/samsung-internet-night-mode.html#src=feed">Read more …</a></p>