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-02-15T10:22:00Z weekly 10 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> urn:uuid:5739b9a2-460a-44dd-8825-18a2c9c3b620 2020-03-19T14:49:00Z 2020-03-19T14:49:00Z Take precautions when linking to outdated or incorrect information Take some simple precautions when referencing outdated, incorrect, or misinformation via a link. Label it for human and machine readers. <p>The web is a wonderful tool for learning everything there is to know about anything and nothing. It’s also full of articles based on factual misunderstandings and misrepresentations, outright lies and misinformation, and there’s tons of outdated information.</p> <p><a href="https://www.ctrl.blog/entry/label-low-quality-links.html#src=feed">Read more …</a></p>