1<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Hi, my name is Brecht, software engineer | utilitybend</title><meta name="language" content="en"><meta name="description" content="Software engineer from Belgium with a passion for HTML, CSS, UI, UX, accessibility and developer happiness"><meta name="keywords" content="brecht, de ruyte, belgium, software engineer, HTML, CSS, SVG, UI, UX"><link href="https://www.linkedin.com/in/utilitybend" rel="author"><meta property="og:url" content="https://utilitybend.com/"><meta property="og:title" content="Hi, my name is Brecht, software engineer | utilitybend"><meta property="og:type" content="website"><meta property="og:description" content="Software engineer from Belgium with a passion for HTML, CSS, UI, UX, accessibility and developer happiness"><meta property="og:image" content="/_astro/facebook-card.6iC9hZwr_ZkJiHe.webp"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://utilitybend.com/"><meta name="twitter:title" property="og:title" content="Hi, my name is Brecht, software engineer | utilitybend"><meta name="twitter:image:src" content="https://utilitybend.com/_astro/twitter-card.UuQclW6D_ZIOqE6.webp"><meta name="twitter:site" content="@utilitybend"><meta name="referrer" content="origin-when-cross-origin"><link rel="sitemap" href="/sitemap-index.xml"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v7.0.7"><link href="https://github.com/brechtDR" rel="me"><link rel="webmention" href="https://webmention.io/utilitybend.com/webmention"><link rel="pingback" href="https://webmention.io/utilitybend.com/xmlrpc"><link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-TileColor" content="#ffffff"><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#161420" media="(prefers-color-scheme: dark)"><link rel="alternate" type="application/rss+xml" href="https://utilitybend.com/rss.xml"><link rel="preload" href="/assets/fonts/inter-latin-variable.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/assets/fonts/young-serif-latin-400.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/assets/fonts/source-code-pro-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin><!--
1<script--><!-- async--><!-- src="https://www.googletagmanager.com/gtag/js?id=G-Q26SJZWBFR"--><!-- type="text/plain"--><!-- data-c-script="marketing"></script>
1--><!--
1<script type="text/plain" data-c-script="marketing">--><!-- window.dataLayer = window.dataLayer || [];--><!-- function gtag() {--><!-- dataLayer.push(arguments);--><!-- }--><!-- gtag("js", new Date());--><!-- gtag("config", "G-Q26SJZWBFR");--><!--</script>
1-->
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1G-Q26SJZWBFR
vendor: 34 bytes, line 1
1" type="text/javascript"></script>
1<script type="text/javascript"> 2
vendor: 195 bytes, lines 2-8
2window.dataLayer = window.dataLayer || []; 3 function gtag() { 4 dataLayer.push(arguments); 5 } 6 gtag("js", new Date()); 7 8 gtag("config", "
8G-Q26SJZWBFR
vendor: 12 bytes, lines 8-9
8"); 9
9</script>
9<script type="text/javascript"> 10 function applyTheme() { 11 var mode = localStorage.theme || "system"; 12 var isDark = mode === "dark" || 13 (mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches); 14 document.documentElement.setAttribute("data-theme", mode); 15 document.documentElement.classList.toggle("dark", isDark); 16 document.documentElement.classList.toggle("light", mode === "light"); 17 var metas = document.querySelectorAll('meta[name="theme-color"]'); 18 if (metas.length) { 19 var color = isDark ? "#161420" : "#ffffff"; 20 metas.forEach(function(m) { m.setAttribute("content", color); }); 21 } 22 } 23 applyTheme(); 24 document.addEventListener("pagereveal", applyTheme); 25 window.matchMedia("(prefers-color-scheme: dark)") 26 .addEventListener("change", function() { if (!localStorage.theme) applyTheme(); }); 27 </script>
27<script type="text/javascript"> 28 const depth = (url) => 29 new URL(url).pathname.replace(/\/$/, '').split('/').length; 30 31 document.addEventListener('pageswap', (e) => { 32 if (!e.viewTransition || !e.activation) return; 33 const fromDepth = depth(document.location.href); 34 const toDepth = depth(e.activation.entry.url); 35 36 if (e.activation.navigationType === 'traverse') { 37 e.viewTransition.types.add('back'); 38 } else if (toDepth > fromDepth) { 39 e.viewTransition.types.add('forward'); 40 } else if (toDepth < fromDepth) { 41 e.viewTransition.types.add('back'); 42 } else { 43 e.viewTransition.types.add('same-level'); 44 } 45 }); 46 </script>
46<script type="speculationrules"> 47 { 48 "prerender": [ 49 { 50 "source": "document", 51 "where": { 52 "and": [ 53 { "href_matches": "/*" }, 54 { "not": { "href_matches": "/rss.xml" } } 55 ] 56 }, 57 "eagerness": "moderate" 58 } 59 ] 60 } 61 </script>
61<link rel="stylesheet" href="/_astro/Layout.BRsgPYN7.css"></head><body itemscope itemtype="https://schema.org/WebPage"><meta itemprop="accessibilityControl" content="fullKeyboardControl"><meta itemprop="accessibilityControl" content="fullMouseControl"><meta itemprop="accessibilityHazard" content="noSoundHazard"><meta itemprop="accessibilityAPI" content="ARIA"><svg class="grain" aria-hidden="true"><filter id="grain-filter"><feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="4" stitchTiles="stitch"></feTurbulence></filter><rect width="100%" height="100%" filter="url(#grain-filter)"></rect></svg><dialog id="site-preferences" class="preferences-dialog-wrap" data-c-view="manage" aria-labelledby="preferences-title"><div class="preferences-dialog"><h2 class="h3 preferences-title" id="preferences-title">Site Preferences</h2><p>This website stores the browser data needed to provide a better experience and to analyze how the site is used. We do not use marketing tools, only Google Analytics to better understand our audience.</p><div class="my-3" hidden><div class="form-check"><input data-c-check="necessary" class="form-check-input" type="checkbox" value="" id="pref-essential"><label class="form-check-label" for="pref-essential">Necessary</label></div><div class="form-check"><input data-c-check="marketing" data-c-check-default="true" class="form-check-input" type="checkbox" value="" id="marketing"><label class="form-check-label" for="marketing">Analytics</label></div></div><div class="button-group"><button data-c-action="necessary" class="btn-link flex-fill ms-1" id="btn-essential-only">Necessary only</button><button data-c-action="all" class="btn btn-primary flex-fill" id="btn-confirm-all">Accept all</button></div></div></dialog><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 0; height: 0; visibility: hidden; position: absolute;" aria-hidden="true"><symbol fill="none" id="icon-tag" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5a1.99 1.99 0 011.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol><symbol id="icon-search" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></symbol><symbol viewBox="0 0 24 24" id="icon-chevron-down"><path d="M5.97 8.97a.75.75 0 00-.073.976l.073.084 5 5a.75.75 0 00.976.073l.084-.073 5-5a.75.75 0 00-.976-1.133l-.084.073-4.47 4.469-4.47-4.47a.75.75 0 00-.976-.072l-.084.073z" fill="currentColor" fill-rule="evenodd"></path></symbol><symbol viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" id="icon-external">
61<path stroke-linecap="round" fill="var(--s-color-bg)" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></symbol><symbol id="bluesky"><title>Bluesky</title><path d="M12 11.388c-.906-1.761-3.372-5.044-5.665-6.662c-2.197-1.55-3.034-1.283-3.583-1.033C2.116 3.978 2 4.955 2 5.528c0 .575.315 4.709.52 5.4c.68 2.28 3.094 3.05 5.32 2.803c-3.26.483-6.157 1.67-2.36 5.898c4.178 4.325 5.726-.927 6.52-3.59c.794 2.663 1.708 7.726 6.444 3.59c3.556-3.59.977-5.415-2.283-5.898c2.225.247 4.64-.523 5.319-2.803c.205-.69.52-4.825.52-5.399c0-.575-.116-1.55-.752-1.838c-.549-.248-1.386-.517-3.583 1.033c-2.293 1.621-4.76 4.904-5.665 6.664" fill="currentColor"></path></symbol><symbol id="mastodon"><title>Mastodon</title><path d="M20.94 14c-.28 1.41-2.44 2.96-4.97 3.26c-1.31.15-2.6.3-3.97.24c-2.25-.11-4-.54-4-.54v.62c.32 2.22 2.22 2.35 4.03 2.42c1.82.05 3.44-.46 3.44-.46l.08 1.65s-1.28.68-3.55.81c-1.25.07-2.81-.03-4.62-.5c-3.92-1.05-4.6-5.24-4.7-9.5l-.01-3.43c0-4.34 2.83-5.61 2.83-5.61C6.95 2.3 9.41 2 11.97 2h.06c2.56 0 5.02.3 6.47.96c0 0 2.83 1.27 2.83 5.61c0 0 .04 3.21-.39 5.43M18 8.91c0-1.08-.3-1.91-.85-2.56c-.56-.63-1.3-.96-2.23-.96c-1.06 0-1.87.41-2.42 1.23l-.5.88l-.5-.88c-.56-.82-1.36-1.23-2.43-1.23c-.92 0-1.66.33-2.23.96C6.29 7 6 7.83 6 8.91v5.26h2.1V9.06c0-1.06.45-1.62 1.36-1.62c1 0 1.5.65 1.5 1.93v2.79h2.07V9.37c0-1.28.5-1.93 1.51-1.93c.9 0 1.35.56 1.35 1.62v5.11H18V8.91Z" fill="currentColor"></path></symbol></svg><a href="#page-main" class="sr-only sr-only-focusable"> Skip to content</a><div class="header-container"><header class="header"><div class="wrapper"><a href="/" class="logo"><span class="sr-only">Return to homepage</span><svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" width="280" height="71" aria-hidden="true" viewBox="0 0 263.16 67.67"><defs><linearGradient id="linear-gradient" x1="2.57" x2="64.01" y1="-197.89" y2="-221.25" gradientTransform="matrix(1 0 0 -1 0 -175.94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c26cab"></stop><stop offset=".34" stop-color="#b7519e"></stop><stop offset="1" stop-color="#92268b"></stop></linearGradient></defs><g id="Layer_1-2"><path fill="currentColor" d="M78.96 24.4c0-.41.33-.74.74-.74h3.06c.41 0 .78.33.78.74v11.15c0 3.39.87 5.62 3.92 5.62 2.52 0 4.91-2.15 4.91-4.05V24.4c0-.41.33-.74.74-.74h3.06c.41 0 .78.33.78.74v13.92c0 1.94.04 3.68.08 5.33.04.41-.33.74-.74.74h-1.82c-.45 0-.87-.29-1.03-.7l-.66-2.23c-1.53 2.02-3.63 3.34-6.94 3.34-4.29 0-6.9-2.56-6.9-8.71V24.4ZM100.39 27c-.37 0-.7-.33-.7-.74l.17-1.69c0-.41.37-.78.78-.78l2.02-.12.29-4.01c.04-.41.41-.83.83-.91l2.52-.54c.37-.08.74.21.74.58v4.87h4.38c.37 0 .7.33.7.74l-.17 1.86c0 .41-.37.74-.78.74h-4.13v10.16c0 3.18 1.32 3.84 2.93 3.84.58 0 .99-.08 1.36-.12.41-.08.74.25.74.62l.04 1.98c.04.41-.33.83-.7.95-.91.21-2.19.37-3.39.37-3.92 0-5.53-2.23-5.53-7.14V27.01h-2.11ZM120.17 17.01c0 1.49-1.2 2.6-2.68 2.6s-2.6-1.12-2.6-2.6 1.16-2.64 2.6-2.64 2.68 1.16 2.68 2.64Zm-1.16 6.52c.45-.04.78.29.78.7v19.41c0 .41-.33.74-.78.74H116c-.41 0-.78-.33-.78-.74V24.4c0-.41.37-.74.78-.78l3.01-.08ZM128.22 13.5c.45-.04.78.29.78.7v29.44c0 .41-.33.74-.78.74h-3.01c-.41 0-.78-.33-.78-.74V14.36c0-.41.37-.74.78-.78l3.01-.08ZM138.62 17.01c0 1.49-1.2 2.6-2.68 2.6s-2.6-1.12-2.6-2.6 1.16-2.64 2.6-2.64 2.68 1.16 2.68 2.64Zm-1.16 6.52c.45-.04.78.29.78.7v19.41c0 .41-.33.74-.78.74h-3.01c-.41 0-.78-.33-.78-.74V24.4c0-.41.37-.74.78-.78l3.01-.08ZM141.64 27c-.37 0-.7-.33-.7-.74l.17-1.69c0-.41.37-.78.78-.78l2.02-.12.29-4.01c.04-.41.41-.83.83-.91l2.52-.54c.37-.08.74.21.74.58v4.87h4.38c.37 0 .7.33.7.74l-.17 1.86c0 .41-.37.74-.78.74h-4.13v10.16c0 3.18 1.32 3.84 2.93 3.84.58 0 .99-.08 1.36-.12.41-.08.74.25.74.62l.04 1.98c.04.41-.33.83-.7.95-.91.21-2.19.37-3.39.37-3.92 0-5.53-2.23-5.53-7.14V27.01h-2.11ZM170.21 41.45c-1.53 2.02-3.59 3.34-6.9 3.34-4.3 0-6.9-2.56-6.9-8.71V24.39c0-.41.33-.74.74-.74h3.06c.41 0 .78.33.78.74v11.15c0 3.39.87 5.62 3.92 5.62 2.52 0 4.91-2.15 4.91-4.05V24.39c0-.41.33-.74.74-.74h3.06c.41 0 .78.33.78.74v19.08c0 7.31-3.84 10.65-9.99 10.65-2.06 0-4.42-.33-6.11-1.03-.37-.17-.7-.62-.66-1.03l.17-1.98c.04-.41.45-.62.83-.5 1.44.54 3.47.91 5.24.91 3.47 0 6.28-1.69 6.28-6.81l.04-2.23ZM189.45 44.8c-2.6 0-4.58-.87-6.15-3.01l-.74 1.9c-.17.41-.58.7-1.03.7h-1.78c-.41 0-.78-.33-.78-.74.08-1.65.12-3.88.12-5.2V14.36c0-.41.37-.74.78-.78l3.01-.08c.45-.04.78.29.78.7l.04 12.14c1.32-1.82 3.3-3.1 6.28-3.1 5.37 0 8.47 4.34 8.47 10.41 0 6.98-3.88 11.15-9 11.15Zm-5.78-7.93c0 2.11 1.69 4.34 4.79 4.34 3.8 0 5.33-3.3 5.33-7.31 0-4.71-2.15-7.1-5.2-7.1-2.11 0-4.01 1.28-4.91 3.3v6.77ZM210.55 23.16c6.4 0 9 5.2 8.26 11.07-.04.37-.45.74-.87.74h-12.76c.04 4.38 2.68 6.32 6.36 6.32 2.06 0 3.76-.33 5.24-.83.33-.12.74.12.83.58l.21 1.78c.04.37-.21.91-.62 1.03-1.65.54-3.92.95-6.44.95-6.52 0-10.12-4.01-10.12-10.49s3.47-11.15 9.91-11.15Zm-.29 3.34c-3.1 0-4.71 2.52-5 5.2h9.33c.04-.17.04-.41.04-.58 0-2.15-1.03-4.63-4.38-4.63ZM240.45 43.64c0 .41-.37.74-.78.74h-3.06c-.41 0-.74-.33-.74-.74v-11.4c0-3.1-.87-5.33-3.8-5.33-2.19 0-4.09 1.4-5.16 3.22v13.5c0 .41-.33.74-.78.74h-3.01c-.41 0-.78-.33-.78-.74V29.55c0-1.9-.04-3.55-.08-5.16-.04-.41.33-.74.74-.78l2.48-.08c.41-.04.78.29.83.7l.33 2.27c1.49-1.73 3.76-3.34 6.86-3.34 4.09 0 6.98 2.68 6.98 8.63v11.85ZM252.75 23.16c2.77 0 4.5 1.12 5.66 2.56l.04-11.36c0-.41.37-.74.78-.78l3.01-.08c.41-.04.78.29.78.7v24.57c0 1.32.04 3.34.12 4.87 0 .41-.29.74-.78.74h-1.73c-.41 0-.87-.29-1.03-.7l-.7-2.23c-1.4 2.02-3.55 3.34-6.52 3.34-5.24 0-8.59-4.38-8.59-10.53 0-6.61 3.63-11.11 8.96-11.11Zm5.7 6.57c-.95-2.02-2.89-2.97-4.67-2.97-3.76 0-5.33 3.51-5.33 7.39 0 4.75 2.27 7.06 5.2 7.06s4.79-2.27 4.79-4.17v-7.31Z" class="cls-3"></path><circle cx="33.84" cy="33.84" r="33.84" style="stroke-width:0;fill:url(#linear-gradient)"></circle><path d="M47.67 13.99c-.57-1.03-2.07-2.56-2.64-2.69-.04 0-.02 1.2.04 2.67s.07 2.72.03 2.76c-.06.06-3.03 1.95-3.09 1.96-.03 0-.98-.53-2.36-1.31l-.96-.54-.12-2.74c-.11-2.7-.12-2.74-.27-2.66-.53.26-1.63 1.42-2.06 2.16-1.84 3.19-.81 7.47 2.27 9.39l.43.27v16.5c0 5.38-2.09 8.14-6.08 8.14s-5.94-3-5.94-8.14V20.39c0-.53-.41-.95-.95-.95h-4.63c-.53 0-.97.44-.97.97v19.02c0 9.43 4.52 13.8 12.35 13.8 8.71 0 12.77-5 12.77-14.8v-15.3c2.93-1.7 3.95-5.93 2.19-9.14h-.01ZM24.8 23.22c-.08.7-.71 1.2-1.42 1.11-.7-.08-1.2-.71-1.11-1.42.08-.7.71-1.2 1.42-1.11s1.2.71 1.11 1.42Z" style="fill:#f8fafb;stroke-width:0"></path></g></svg><!--<svg--><!-- xmlns="http://www.w3.org/2000/svg"--><!-- width="280"--><!-- height="71"--><!-- viewBox="0 0 460.87 118"--><!-- aria-hidden="true"--><!-->--><!-- <g id="Layer_2-2" data-name="Layer 2">--><!-- <circle cx="59" cy="59" r="59" fill="var(--logo-bg)"></circle>--><!-- <path--><!-- class="logo-tool"--><!-- fill="currentColor"--><!-- d="M86 23c-1-1.89-3.79-4.69-4.85-4.93-.06 0 0 2.19.07 4.9s.13 5 .06 5.07-5.55 3.57-5.66 3.59-1.79-1-4.31-2.41l-1.76-1-.21-5c-.21-4.95-.22-5-.5-4.88a13.36 13.36 0 00-3.78 4 13 13 0 004.15 17.2L70 40v30.23c0 9.85-3.82 14.91-11.12 14.91-7 0-10.88-5.49-10.88-14.91V34.74A1.72 1.72 0 0046.26 33h-8.48A1.78 1.78 0 0036 34.78v34.84c0 17.27 8.27 25.29 22.62 25.29C74.57 94.91 82 85.75 82 67.79v-28c5.36-3.13 7.24-10.89 4-16.79zM44.13 39.92a2.33 2.33 0 11-2-2.59 2.32 2.32 0 012 2.59zM139.68 42.54a1.29 1.29 0 011.3-1.29h5.32a1.35 1.35 0 011.37 1.29V62c0 5.91 1.51 9.8 6.84 9.8 4.4 0 8.57-3.75 8.57-7.06v-22.2a1.29 1.29 0 011.3-1.29h5.33a1.34 1.34 0 011.36 1.29v24.27c0 3.38.08 6.41.15 9.29a1.25 1.25 0 01-1.3 1.29h-3.17a2 2 0 01-1.8-1.22l-1.15-3.89c-2.66 3.53-6.33 5.83-12.09 5.83-7.49 0-12-4.46-12-15.19zM177.05 47.08a1.28 1.28 0 01-1.23-1.3l.29-3a1.42 1.42 0 011.37-1.37l3.53-.21.5-7a1.91 1.91 0 011.49-1.52l4.39-.94a1.08 1.08 0 011.3 1v8.5h7.63a1.28 1.28 0 011.23 1.29l-.29 3.24a1.36 1.36 0 01-1.37 1.3h-7.2v17.72c0 5.55 2.3 6.7 5.11 6.7a18.31 18.31 0 002.38-.22 1.09 1.09 0 011.3 1.08l.07 3.46a1.77 1.77 0 01-1.23 1.65 28.37 28.37 0 01-5.9.65c-6.84 0-9.65-3.89-9.65-12.45V47.08zM211.54 29.65a4.56 4.56 0 01-4.68 4.54 4.47 4.47 0 01-4.54-4.54 4.53 4.53 0 014.54-4.65 4.61 4.61 0 014.68 4.65zm-2 11.38a1.21 1.21 0 011.37 1.22V76.1a1.31 1.31 0 01-1.37 1.29h-5.26a1.34 1.34 0 01-1.36-1.29V42.54a1.47 1.47 0 011.36-1.37zM225.57 23.53a1.22 1.22 0 011.37 1.23V76.1a1.3 1.3 0 01-1.37 1.29h-5.25A1.35 1.35 0 01219 76.1V25a1.46 1.46 0 011.37-1.36zM243.72 29.65a4.56 4.56 0 01-4.72 4.54 4.48 4.48 0 01-4.54-4.54A4.54 4.54 0 01239 25a4.61 4.61 0 014.72 4.65zM241.7 41a1.21 1.21 0 011.37 1.22V76.1a1.31 1.31 0 01-1.37 1.29h-5.25a1.35 1.35 0 01-1.37-1.29V42.54a1.48 1.48 0 011.37-1.37zM249 47.08a1.28 1.28 0 01-1.22-1.3l.29-3a1.41 1.41 0 011.36-1.37l3.53-.21.51-7a1.91 1.91 0 011.44-1.58l4.39-.94a1.07 1.07 0 011.29 1v8.5h7.64a1.27 1.27 0 011.22 1.29l-.29 3.24a1.35 1.35 0 01-1.36 1.3h-7.21v17.78c0 5.55 2.31 6.7 5.12 6.7a18 18 0 002.37-.22 1.09 1.09 0 011.3 1.08l.07 3.46a1.76 1.76 0 01-1.22 1.65 28.55 28.55 0 01-5.91.65c-6.84 0-9.65-3.89-9.65-12.45V47.08zM298.8 72.28c-2.67 3.53-6.27 5.83-12 5.83-7.49 0-12-4.46-12-15.19V42.54a1.28 1.28 0 011.2-1.29h5.33a1.35 1.35 0 011.37 1.29V62c0 5.91 1.51 9.8 6.84 9.8 4.39 0 8.57-3.75 8.57-7.06v-22.2a1.29 1.29 0 011.3-1.29h5.32a1.35 1.35 0 011.37 1.29v33.27c0 12.74-6.69 18.58-17.42 18.58a29.93 29.93 0 01-10.66-1.8 2 2 0 01-1.15-1.8l.29-3.46a1.06 1.06 0 011.44-.86 28.41 28.41 0 009.14 1.58c6.05 0 11-3 11-11.88zM332.35 78.11c-4.54 0-8-1.51-10.73-5.25l-1.3 3.31a1.94 1.94 0 01-1.8 1.22h-3.09a1.35 1.35 0 01-1.37-1.29c.14-2.88.22-6.77.22-9.08V25a1.45 1.45 0 011.36-1.36l5.26-.15a1.22 1.22 0 011.37 1.23l.07 21.17a12.77 12.77 0 0111-5.4c9.36 0 14.76 7.56 14.76 18.14-.05 12.21-6.82 19.48-15.75 19.48zm-10.08-13.82c0 3.67 3 7.56 8.35 7.56 6.63 0 9.29-5.76 9.29-12.75 0-8.21-3.74-12.38-9.07-12.38a9.43 9.43 0 00-8.57 5.76zM369.14 40.38c11.16 0 15.7 9.07 14.4 19.3A1.61 1.61 0 01382 61h-22.22c.07 7.63 4.68 11 11.09 11a28.13 28.13 0 009.13-1.45 1.16 1.16 0 011.44 1l.36 3.1a1.8 1.8 0 01-1.08 1.8 37.6 37.6 0 01-11.23 1.65c-11.38 0-17.64-7-17.64-18.29.01-11.08 6.06-19.43 17.29-19.43zm-.5 5.83c-5.4 0-8.21 4.4-8.72 9.08h16.28a4.91 4.91 0 00.07-1c0-3.76-1.8-8.08-7.63-8.08zM421.27 76.1a1.35 1.35 0 01-1.37 1.29h-5.33a1.28 1.28 0 01-1.29-1.29V56.22c0-5.4-1.52-9.29-6.63-9.29-3.82 0-7.13 2.45-9 5.62V76.1a1.3 1.3 0 01-1.37 1.29H391a1.35 1.35 0 01-1.37-1.29V51.54c0-3.31-.07-6.19-.15-9a1.36 1.36 0 011.3-1.37l4.32-.14a1.35 1.35 0 011.44 1.22l.58 4a15.61 15.61 0 0112-5.83c7.13 0 12.17 4.68 12.17 15zM442.72 40.38a11.86 11.86 0 019.87 4.47l.07-19.85a1.46 1.46 0 011.34-1.32l5.25-.15a1.26 1.26 0 011.37 1.23V67.6c0 2.3.07 5.83.22 8.5a1.27 1.27 0 01-1.37 1.29h-3a2 2 0 01-1.8-1.22l-1.23-3.89a13.2 13.2 0 01-11.37 5.83c-9.15 0-15-7.63-15-18.36.03-11.52 6.36-19.37 15.65-19.37zm9.94 11.45a9 9 0 00-8.14-5.18c-6.55 0-9.29 6.12-9.29 12.89 0 8.28 4 12.31 9.08
6112.31 5 0 8.35-4 8.35-7.27z"--><!-- ></path></g--><!-- >--><!--</svg>--></a><div class="nav-wrapper"><nav class="nav-primary nav-desktop" role="navigation" aria-label="Navigation" itemscope="" itemtype="https://schema.org/SiteNavigationElement"><ul class="nav-list"><li class="nav-item"><a itemprop="url" class="nav-link active" href="/"><span>home</span></a></li><li class="nav-item"><a itemprop="url" class="nav-link" href="/blog"><span>blog</span></a></li><li class="nav-item"><a itemprop="url" class="nav-link" href="/about"><span>about</span></a></li><li class="nav-item"><a itemprop="url" class="nav-link" href="/contact"><span>contact</span></a></li></ul></nav><nav popover="auto" id="mobile-nav" class="nav-primary nav-mobile" role="navigation" aria-label="Mobile navigation"><button class="btn-menu-close" popovertarget="mobile-nav" popovertargetaction="hide" aria-label="Close menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button><ul class="nav-list"><li class="nav-item"><a class="nav-link active" href="/"><span>home</span></a></li><li class="nav-item"><a class="nav-link" href="/blog"><span>blog</span></a></li><li class="nav-item"><a class="nav-link" href="/about"><span>about</span></a></li><li class="nav-item"><a class="nav-link" href="/contact"><span>contact</span></a></li></ul></nav><button class="btn-menu-toggle" popovertarget="mobile-nav" aria-label="Menu"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button><button id="switchTheme" class="switch-theme"><span class="sr-only">Theme: <span id="theme-name">system</span>. Click to switch.</span><svg class="icon-sun icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon-moon icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon-system icon" viewBox="0 0 20 20" aria-hidden="true"><g fill="var(--s-color-icon-sun)" transform="translate(1.5 1.5) scale(0.45)"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></g><line x1="3" y1="17" x2="17" y2="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><g fill="var(--s-color-icon-moon)" transform="translate(9.5 9.5) scale(0.45)"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></g></svg></button></div></div></header></div><div class="page-main" id="page-main"><main class="homepage-sections h-card" id="homepage-sections"><div class="atmosphere-glow" aria-hidden="true"></div><section class="home-hero" id="home-hero"><div class="wrapper home-hero-grid"><div class="sidebar-about"><div class="img-holder"><picture><source srcset="/_astro/brecht-de-ruyte.mN1VlMkI_ZKIPzk.avif 200w, /_astro/brecht-de-ruyte.mN1VlMkI_ZWlLwS.avif 400w" type="image/avif" sizes="160px"><source srcset="/_astro/brecht-de-ruyte.mN1VlMkI_8lkRM.webp 200w, /_astro/brecht-de-ruyte.mN1VlMkI_Z3gA4L.webp 400w" type="image/webp" sizes="160px"><img src="/_astro/brecht-de-ruyte.mN1VlMkI_1i89P6.jpg" srcset="/_astro/brecht-de-ruyte.mN1VlMkI_Z23FwAd.jpg 200w, /_astro/brecht-de-ruyte.mN1VlMkI_Z2fisxL.jpg 400w" sizes="160px" alt="Brecht De Ruyte - software engineer | utilitybend" loading="lazy" decoding="async" width="160" height="160" class="img-fluid u-photo"></picture></div><h1 class="lead p-name-intro">Hi, I'm <span class="p-name">Brecht<span class="sr-only"> De Ruyte</span></span></h1><p class="p-note">Self-taught software engineer and Google Developer Expert from Belgium. After more than a decade in tech, I blog about HTML, CSS and JS with an eye on accessibility and UX.</p><div hidden><a href="https://utilitybend.com" class="u-url" itemprop="sameAs">my website</a><a href="https://front-end.social/@utilitybend" target="_blank" class="mastodon u-url" rel="noreferrer" itemprop="sameAs">my mastodon</a></div></div><div class="section-header home-hero-header"><h2 class="h1">Latest articles</h2><a class="btn" href="/blog"><span><span class="home-hero-btn-label">Articles </span>overview</span></a></div><div class="home-hero-articles"><div class="home-articles"><article class="article-preview card-clickable" itemscope itemtype="https://schema.org/BlogPosting"><header class="article-preview-header"><h2 class itemprop="name headline" data-vt="post-title-5-years-of-blogging-on-utilitybend"><a href="/blog/5-years-of-blogging-on-utilitybend" class="card-action" itemprop="mainEntityOfPage url">5 years of blogging on utilitybend!</a></h2><span itemprop="author" itemscope="itemscope" itemtype="https://schema.org/Person"><meta itemprop="name" content="Brecht De Ruyte"><meta itemprop="url" content="https://utilitybend.com/about"></span>
61<time datetime="2026-09-16T08-00-00Z" class="article-preview-date" itemprop="datePublished" data-vt="post-date-5-years-of-blogging-on-utilitybend">16 Sep 2026</time><meta itemprop="dateModified" content="2026-09-16T08-00-00Z"><span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="utilitybend"><span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://utilitybend.com/assets/share-defaults/utilitybend-logo.png"><meta itemprop="width" content="1200"><meta itemprop="height" content="675"></span></span></header><figure class="article-preview-image" data-vt="post-img-5-years-of-blogging-on-utilitybend"><a href="/blog/5-years-of-blogging-on-utilitybend" tabindex="-1" aria-hidden="true"><picture><source srcset="/_astro/visual.DUIpWrBH_1ST7Sj.avif 375w, /_astro/visual.DUIpWrBH_ZH3U1V.avif 480w, /_astro/visual.DUIpWrBH_WaQEv.avif 680w, /_astro/visual.DUIpWrBH_1CCPTp.avif 800w, /_astro/visual.DUIpWrBH_14Yi6W.avif 980w, /_astro/visual.DUIpWrBH_2l3TCx.avif 1024w" type="image/avif" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw"><source srcset="/_astro/visual.DUIpWrBH_Z1WKlwq.webp 375w, /_astro/visual.DUIpWrBH_vsJmg.webp 480w, /_astro/visual.DUIpWrBH_2aHw3H.webp 680w, /_astro/visual.DUIpWrBH_Z2e1Cvk.webp 800w, /_astro/visual.DUIpWrBH_2ivWv9.webp 980w, /_astro/visual.DUIpWrBH_ZrUHBP.webp 1024w" type="image/webp" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw"><img src="/_astro/visual.DUIpWrBH_Z1gvJS3.jpg" srcset="/_astro/visual.DUIpWrBH_6hzdY.jpg 375w, /_astro/visual.DUIpWrBH_Z2uFsGg.jpg 480w, /_astro/visual.DUIpWrBH_ZPqFYO.jpg 680w, /_astro/visual.DUIpWrBH_Z9XGJU.jpg 800w, /_astro/visual.DUIpWrBH_ZHCfxn.jpg 980w, /_astro/visual.DUIpWrBH_Z2v1JFh.jpg 1024w" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw" alt="A white cake with a purple U logo beneath a popping lid, a yellow number five, and colourful stars." loading="lazy" decoding="async" width="160" height="90" class="img-fluid"></picture></a><span itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"><meta itemprop="url" content="/_astro/visual.DUIpWrBH_1vpgni.webp"><meta itemprop="width" content="1200"><meta itemprop="height" content="675"></span></figure></article><article class="article-preview card-clickable" itemscope itemtype="https://schema.org/BlogPosting"><header class="article-preview-header"><h2 class itemprop="name headline" data-vt="post-title-container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css"><a href="/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css" class="card-action" itemprop="mainEntityOfPage url">Container style queries and advanced attr(): rethinking how to wire up my components in CSS</a></h2><span itemprop="author" itemscope="itemscope" itemtype="https://schema.org/Person"><meta itemprop="name" content="Brecht De Ruyte"><meta itemprop="url" content="https://utilitybend.com/about"></span><time datetime="2026-09-08T10-30-00Z" class="article-preview-date" itemprop="datePublished" data-vt="post-date-container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css">8 Sep 2026</time><meta itemprop="dateModified" content="2026-09-08T10-30-00Z"><span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="utilitybend"><span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://utilitybend.com/assets/share-defaults/utilitybend-logo.png"><meta itemprop="width" content="1200"><meta itemprop="height" content="675"></span></span></header><figure class="article-preview-image" data-vt="post-img-container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css"><a href="/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css" tabindex="-1" aria-hidden="true"><picture><source srcset="/_astro/visual.OrjLuofZ_Z1YJRkc.avif 375w, /_astro/visual.OrjLuofZ_1MOjbs.avif 480w, /_astro/visual.OrjLuofZ_mMIQI.avif 680w, /_astro/visual.OrjLuofZ_27Iufv.avif 800w, /_astro/visual.OrjLuofZ_1iABJL.avif 980w, /_astro/visual.OrjLuofZ_1Fc96A.avif 1024w" type="image/avif" sizes="(max-width: 575px) 100v
61w,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw"><source srcset="/_astro/visual.OrjLuofZ_hrDem.webp 375w, /_astro/visual.OrjLuofZ_Z10aj3U.webp 480w, /_astro/visual.OrjLuofZ_Z2qbSnE.webp 680w, /_astro/visual.OrjLuofZ_ZFg7YR.webp 800w, /_astro/visual.OrjLuofZ_Z1uo0uB.webp 980w, /_astro/visual.OrjLuofZ_1dLacM.webp 1024w" type="image/webp" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw"><img src="/_astro/visual.OrjLuofZ_ZswRbT.jpg" srcset="/_astro/visual.OrjLuofZ_Z1KDnO5.jpg 375w, /_astro/visual.OrjLuofZ_21UMGz.jpg 480w, /_astro/visual.OrjLuofZ_ATdmP.jpg 680w, /_astro/visual.OrjLuofZ_2lOXKC.jpg 800w, /_astro/visual.OrjLuofZ_1wH6fS.jpg 980w, /_astro/visual.OrjLuofZ_Z1jT8HI.jpg 1024w" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw" alt="Card components showing different density modes: compact, comfortable, and spacious" loading="lazy" decoding="async" width="160" height="90" class="img-fluid"></picture></a><span itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"><meta itemprop="url" content="/_astro/visual.OrjLuofZ_1uyB8N.webp"><meta itemprop="width" content="1200"><meta itemprop="height" content="675"></span></figure></article><article class="article-preview card-clickable" itemscope itemtype="https://schema.org/BlogPosting"><header class="article-preview-header"><h2 class itemprop="name headline" data-vt="post-title-modern-web-guidance-antigravity-and-my-own-design-token-skills"><a href="/blog/modern-web-guidance-antigravity-and-my-own-design-token-skills" class="card-action" itemprop="mainEntityOfPage url">Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS</a></h2><span itemprop="author" itemscope="itemscope" itemtype="https://schema.org/Person"><meta itemprop="name" content="Brecht De Ruyte"><meta itemprop="url" content="https://utilitybend.com/about"></span><time datetime="2026-08-27T11-00-00Z" class="article-preview-date" itemprop="datePublished" data-vt="post-date-modern-web-guidance-antigravity-and-my-own-design-token-skills">27 Aug 2026</time><meta itemprop="dateModified" content="2026-08-27T11-00-00Z"><span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="utilitybend"><span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://utilitybend.com/assets/share-defaults/utilitybend-logo.png"><meta itemprop="width" content="1200"><meta itemprop="height" content="675"></span></span></header><figure class="article-preview-image" data-vt="post-img-modern-web-guidance-antigravity-and-my-own-design-token-skills"><a href="/blog/modern-web-guidance-antigravity-and-my-own-design-token-skills" tabindex="-1" aria-hidden="true"><picture><source srcset="/_astro/visual.BwikRLXp_ZE1QsQ.avif 375w, /_astro/visual.BwikRLXp_Z1VDNL8.avif 480w, /_astro/visual.BwikRLXp_1HvJI4.avif 680w, /_astro/visual.BwikRLXp_Z1BJCH5.avif 800w, /_astro/visual.BwikRLXp_Z2qRvcO.avif 980w, /_astro/visual.BwikRLXp_2vXq9M.avif 1024w" type="image/avif" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw"><source srcset="/_astro/visual.BwikRLXp_1CaE5H.webp 375w, /_astro/visual.BwikRLXp_kxGMq.webp 480w, /_astro/visual.BwikRLXp_Z15sRwj.webp 680w, /_astro/visual.BwikRLXp_ErRQt.webp 800w, /_astro/visual.BwikRLXp_Z9EYDg.webp 980w, /_astro/visual.BwikRLXp_24xrfY.webp 1024w" type="image/webp" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw"><img src="/_astro/visual.BwikRLXp_Rb8Er.jpg" srcset="/_astro/visual.BwikRLXp_ZpUmWJ.jpg 375w, /_astro/visual.BwikRLXp_Z1Hxkg1.jpg 480w, /_astro/visual.BwikRLXp_1VCeeb.jpg 680w, /_astro/visual.BwikRLXp_Z1nD9bX.jpg 800w, /_astro/visual.BwikRLXp_Z2cL1GH.jpg 980w, /_astro/visual.BwikRLXp_Zt7QEw.jpg 1024w" sizes="(max-width: 575px) 100vw,(max-width: 767px) 100vw,(max-width: 991px) 50w,100vw" alt="A white line-art icon of an open book with CSS curly braces on its pages, three stacked layers beside it, and a dark badge reading SKILLS, on a blue and cyan gradient background" loading="lazy" decoding="async" width="160" height="90" class="img-fluid"></picture></a><span itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"><meta itemprop="url" content="/_astro/visual.BwikRLXp_2lkSc0.webp">
61<meta itemprop="width" content="1200"><meta itemprop="height" content="675"></span></figure></article></div></div></div></section><section class="home-bluesky" id="home-bluesky"><div class="wrapper"><div class="section-header bluesky-section-header"><h2><svg class="bluesky-icon" viewBox="0 0 568 501" aria-hidden="true"><path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 189.089 552.227 210.829C534.688 276.233 463.17 291.916 399.278 280.089C511.833 299.263 543.478 375.359 484.35 451.454C373.728 593.576 313.498 392.897 295.002 331.587C292.168 322.444 290.908 317.672 284 317.672C277.092 317.672 275.832 322.444 272.998 331.587C254.502 392.897 194.272 593.576 83.6497 451.454C24.5223 375.359 56.1672 299.263 168.722 280.089C104.83 291.916 33.3125 276.233 15.7729 210.829C9.94525 189.089 0 75.2916 0 57.9464C0 -28.9064 76.1338 -1.61183 123.121 33.6637Z" fill="currentColor"></path></svg>Bluesky</h2><a href="https://bsky.app/profile/utilitybend.com" target="_blank" rel="noopener noreferrer" class="bluesky-follow-link">@utilitybend.com</a></div><div class="bluesky-feed" data-bluesky-feed data-actor="utilitybend.com" data-limit="10"><div class="scroll-fade scroll-fade-start" aria-hidden="true"></div><ol class="bluesky-posts"></ol><div class="scroll-fade scroll-fade-end" aria-hidden="true"></div></div></div></section><section class="home-photo-reel" id="home-photo-reel"><div class="wrapper"><div class="section-header photo-reel-header"><h2>Photography hobby corner</h2><a class="btn" href="/photography"><span>View all photos</span></a></div><div class="photo-reel-carousel"><div class="scroll-fade scroll-fade-start" aria-hidden="true"></div><div class="photo-reel-scroll"><div class="photo-reel-item"><picture><source srcset="/_astro/P1040196.0LgZi98E_1TBVTb.avif 375w, /_astro/P1040196.0LgZi98E_Z2s7Cbw.avif 480w, /_astro/P1040196.0LgZi98E_HW5EQ.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1040196.0LgZi98E_1sbX0n.webp 375w, /_astro/P1040196.0LgZi98E_2aDwIB.webp 480w, /_astro/P1040196.0LgZi98E_gw6L3.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1040196.0LgZi98E_Z2efjYL.jpg" srcset="/_astro/P1040196.0LgZi98E_Z15tkU8.jpg 375w, /_astro/P1040196.0LgZi98E_Zn1LbT.jpg 480w, /_astro/P1040196.0LgZi98E_Z2h9c9s.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="Steep Madeira cliffside dropping to a pebble beach, with a narrow path, a few small houses and bright turquoise Atlantic water" loading="lazy" decoding="async" width="768" height="1024" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/P1040268.b4k3EAQ1_Z2npBct.avif 375w, /_astro/P1040268.b4k3EAQ1_ZQmmXQ.avif 480w, /_astro/P1040268.b4k3EAQ1_260Bax.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1040268.b4k3EAQ1_2flxHE.webp 375w, /_astro/P1040268.b4k3EAQ1_Z1iMlRE.webp 480w, /_astro/P1040268.b4k3EAQ1_1DzCgJ.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1040268.b4k3EAQ1_1eGw62.jpg" srcset="/_astro/P1040268.b4k3EAQ1_ZijKcQ.jpg 375w, /_astro/P1040268.b4k3EAQ1_1dIt0L.jpg 480w, /_astro/P1040268.b4k3EAQ1_ZT5FDL.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="Straight road crossing a green Madeiran highland plateau with a row of white wind turbines along the ridge" loading="lazy" decoding="async" width="1024" height="768" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/P1040293.6jnFrEN__Z1MHSTt.avif 375w, /_astro/P1040293.6jnFrEN__Z15gkbf.avif 480w, /_astro/P1040293.6jnFrEN__25NnF8.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1040293.6jnFrEN__Z2f8RNh.webp 375w, /_astro/P1040293.6jnFrEN__Z1wGj53.webp 480w, /_astro/P1040293.6jnFrEN__1DnoLk.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1040293.6jnFrEN__ZQo1Yu.jpg" srcset="/_astro/P1040293.6jnFrEN__hmW59.jpg 375w, /_astro/P1040293.6jnFrEN__YOvNn.jpg 480w, /_astro/P1040293.6jnFrEN__ZThT9b.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="Gnarled laurel trees standing in thick fog on a grassy hillside in Fanal Forest, Madeira" loading="lazy" decoding="async" width="768" height="1024" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/P1040375.CrFH8xn1_Z1HgIP4.avif 375w, /_astro/P1040375.CrFH8xn1_Z1dfjlr.avif 480w, /_astro/P1040375.CrFH8xn1_Kv5PD.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1040375.CrFH8xn1_Z29GHIR.webp 375w, /_astro/P1040375.CrFH8xn1_Z1EFiff.webp 480w, /_astro/P1040375.CrFH8xn1_j56VP.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1040375.CrFH8xn1_ZLSPrl.jpg" srcset="/_astro/P1040375.CrFH8xn1_mO79y.jpg 375w, /_astro/P1040375.CrFH8xn1_QPwDb.jpg 480w, /_astro/P1040375.CrFH8xn1_Z2eAbXF.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="White chapel tower topped with a cross on a forest-covered Madeiran hilltop under a heavy grey sky" loading="lazy" decoding="async" width="769" height="1024" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/P1040598.BFpQy4zv_Z6OVEl.avif 375w, /_astro/P1040598.BFpQy4zv_1pdhyh.av
61if 480w, /_astro/P1040598.BFpQy4zv_ZHAR6g.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1040598.BFpQy4zv_ZyfUy9.webp 375w, /_astro/P1040598.BFpQy4zv_WMiEt.webp 480w, /_astro/P1040598.BFpQy4zv_Z1a1Q04.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1040598.BFpQy4zv_t26t1.jpg" srcset="/_astro/P1040598.BFpQy4zv_1XfTkh.jpg 375w, /_astro/P1040598.BFpQy4zv_Z1zS0g2.jpg 480w, /_astro/P1040598.BFpQy4zv_1mtXSm.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="Close-up of a teal-green Madeiran lizard resting on a rock, its head emerging from the shade of a boulder" loading="lazy" decoding="async" width="1024" height="768" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/amsterdam-street.DY9Fs7iW_Z1jexrf.avif 375w, /_astro/amsterdam-street.DY9Fs7iW_Z2vjdpJ.avif 480w, /_astro/amsterdam-street.DY9Fs7iW_ZKJfwl.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/amsterdam-street.DY9Fs7iW_1cclP0.webp 375w, /_astro/amsterdam-street.DY9Fs7iW_7FQv.webp 480w, /_astro/amsterdam-street.DY9Fs7iW_1JGDJT.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/amsterdam-street.DY9Fs7iW_ZGN7Yw.jpg" srcset="/_astro/amsterdam-street.DY9Fs7iW_ZqabRE.jpg 375w, /_astro/amsterdam-street.DY9Fs7iW_Z1CeQQ9.jpg 480w, /_astro/amsterdam-street.DY9Fs7iW_7k62f.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="A person with a backpack walking down a brick-paved Amsterdam street, with classic tall Dutch buildings, overhead tram cables, and bicycles in the background under a cloudy sky" loading="lazy" decoding="async" width="768" height="1024" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/amsterdam-canal.CeIGc2uU_1S7Bi9.avif 375w, /_astro/amsterdam-canal.CeIGc2uU_15oLT2.avif 480w, /_astro/amsterdam-canal.CeIGc2uU_ZUftTf.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/amsterdam-canal.CeIGc2uU_Zk0Vnw.webp 375w, /_astro/amsterdam-canal.CeIGc2uU_Z17IKLD.webp 480w, /_astro/amsterdam-canal.CeIGc2uU_1VN6e1.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/amsterdam-canal.CeIGc2uU_2uvpeV.jpg" srcset="/_astro/amsterdam-canal.CeIGc2uU_Z2liaIg.jpg 375w, /_astro/amsterdam-canal.CeIGc2uU_1Vb8Gy.jpg 480w, /_astro/amsterdam-canal.CeIGc2uU_Z4t86I.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="A striking black corner building in Amsterdam with an outdoor staircase, next to a sunlit tree-lined canal with a couple of people walking in the dappled sunlight" loading="lazy" decoding="async" width="768" height="1024" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/P1030496.CRh2dlrN_17FSSd.avif 375w, /_astro/P1030496.CRh2dlrN_106bgY.avif 480w, /_astro/P1030496.CRh2dlrN_YalCN.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1030496.CRh2dlrN_2r4Su7.webp 375w, /_astro/P1030496.CRh2dlrN_2juaRS.webp 480w, /_astro/P1030496.CRh2dlrN_2iyleH.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1030496.CRh2dlrN_1GI2Ma.jpg" srcset="/_astro/P1030496.CRh2dlrN_ZnUxVC.jpg 375w, /_astro/P1030496.CRh2dlrN_ZvvgxQ.jpg 480w, /_astro/P1030496.CRh2dlrN_Zwr6c2.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="Historic Prague buildings in warm tones framing a vivid blue sky from a low-angle street view" loading="lazy" decoding="async" width="768" height="1024" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/P1030665.DJAixZi6_1YJazF.avif 375w, /_astro/P1030665.DJAixZi6_oWukI.avif 480w, /_astro/P1030665.DJAixZi6_Z1nh8nn.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1030665.DJAixZi6_Z1L3XCm.webp 375w, /_astro/P1030665.DJAixZi6_1IltVC.webp 480w, /_astro/P1030665.DJAixZi6_Z3S8Lt.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1030665.DJAixZi6_eL9WP.jpg" srcset="/_astro/P1030665.DJAixZi6_t7HJP.jpg 375w, /_astro/P1030665.DJAixZi6_Z16DWu7.jpg 480w, /_astro/P1030665.DJAixZi6_2bixAI.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="Panoramic view of the Vltava River in Prague with bridges, boats, and historic skyline under clear skies" loading="lazy" decoding="async" width="1024" height="576" class="img-fluid"></picture></div><div class="photo-reel-item"><picture><source srcset="/_astro/P1030693.DZe_5Z6__Z2kVakr.avif 375w, /_astro/P1030693.DZe_5Z6__2oj7dM.av
61if 480w, /_astro/P1030693.DZe_5Z6__uQHy3.avif 680w" type="image/avif" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><source srcset="/_astro/P1030693.DZe_5Z6__Z11xaIx.webp 375w, /_astro/P1030693.DZe_5Z6__Z1mu1Yf.webp 480w, /_astro/P1030693.DZe_5Z6__1OfH9W.webp 680w" type="image/webp" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw"><img src="/_astro/P1030693.DZe_5Z6__jzEUV.jpg" srcset="/_astro/P1030693.DZe_5Z6__1dDvDE.jpg 375w, /_astro/P1030693.DZe_5Z6__RGEnW.jpg 480w, /_astro/P1030693.DZe_5Z6__Z10JJgM.jpg 680w" sizes="(max-width: 575px) 80vw, (max-width: 1023px) 45vw, 30vw" alt="Prague riverside street with old architecture, tram tracks, and a stone tower beside the water" loading="lazy" decoding="async" width="1024" height="768" class="img-fluid"></picture></div><div class="photo-reel-cta"><a href="/photography" class="photo-reel-cta-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg><span>View all</span></a></div></div><div class="scroll-fade scroll-fade-end" aria-hidden="true"></div></div></div></section><section class="home-categories" id="home-categories"><div class="wrapper"><div class="section-header"><h2>What I write about...</h2></div><nav role="navigation" aria-label="Categories" itemscope="" itemtype="https://schema.org/SiteNavigationElement"><ul class="nav-list"><li class="nav-item"><a href="/category/css" itemprop="url" class="badge badge-usp badge-css">CSS</a></li><li class="nav-item"><a href="/category/general" itemprop="url" class="badge badge-usp badge-general">General</a></li><li class="nav-item"><a href="/category/accessibility" itemprop="url" class="badge badge-usp badge-accessibility">Accessibility</a></li><li class="nav-item"><a href="/category/html" itemprop="url" class="badge badge-usp badge-html">HTML</a></li><li class="nav-item"><a href="/category/javascript" itemprop="url" class="badge badge-usp badge-javascript">JavaScript</a></li><li class="nav-item"><a href="/category/ux" itemprop="url" class="badge badge-usp badge-ux">UX</a></li><li class="nav-item"><a href="/category/ai" itemprop="url" class="badge badge-usp badge-ai">AI</a></li></ul></nav></div></section></main>
61<script type="module">function e(e){return e.replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`).replace(/"/g,`"`)}function t(e){return e.replace(/"/g,`"`).replace(/'/g,`'`)}function n(e){let t=Math.floor((Date.now()-new Date(e).getTime())/1e3);for(let[e,n]of[[31536e3,`y`],[2592e3,`mo`],[604800,`w`],[86400,`d`],[3600,`h`],[60,`m`]]){let r=Math.floor(t/e);if(r>=1)return`${r}${n}`}return`now`}function r(e,t){return`https://bsky.app/profile/${t}/post/${e.split(`/`).pop()}`}function i(n,r){if(!r||r.length===0)return e(n);let i=new TextEncoder,a=new TextDecoder,o=i.encode(n),s=[...r].sort((e,t)=>e.index.byteStart-t.index.byteStart),c=``,l=0;for(let n of s){let r=Math.max(0,n.index.byteStart),i=Math.min(o.length,n.index.byteEnd);if(i<=r||r<l)continue;c+=e(a.decode(o.slice(l,r)));let s=a.decode(o.slice(r,i)),u=n.features?.[0];if(!u){c+=e(s),l=i;continue}u.$type===`app.bsky.richtext.facet#link`?c+=`<a href="${t(u.uri)}" target="_blank" rel="noopener noreferrer">${e(s)}</a>`:u.$type===`app.bsky.richtext.facet#mention`?c+=`<a href="https://bsky.app/profile/${t(u.did)}" target="_blank" rel="noopener noreferrer">${e(s)}</a>`:u.$type===`app.bsky.richtext.facet#tag`?c+=`<a href="https://bsky.app/hashtag/${t(u.tag)}" target="_blank" rel="noopener noreferrer">${e(s)}</a>`:c+=e(s),l=i}return c+=e(a.decode(o.slice(l))),c}function a(a){let o=r(a.uri,a.author.handle),s=i(a.record.text,a.record.facets),c=n(a.record.createdAt),l=``,u=a.embed?.$type||``;if(u===`app.bsky.embed.images#view`&&a.embed.images?.length){let e=a.embed.images[0];l=`<img class="bluesky-post-thumb" src="${t(e.thumb)}" alt="${t(e.alt||``)}" loading="lazy" decoding="async">`}else if(u===`app.bsky.embed.external#view`&&a.embed.external){let n=a.embed.external;l=`<div class="bluesky-post-card${n.thumb?``:` no-thumb`}">${n.thumb?`<img src="${t(n.thumb)}" alt="" loading="lazy" decoding="async">`:``}<span class="bluesky-post-card-title">${e(n.title)}</span></div>`}let d=a.likeCount>0?`<span class="bluesky-stat" title="Likes"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="currentColor"/></svg>${a.likeCount}</span>`:``,f=a.repostCount>0?`<span class="bluesky-stat" title="Reposts"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" fill="currentColor"/></svg>${a.repostCount}</span>`:``,p=document.createElement(`li`);return p.className=`bluesky-post`,p.innerHTML=` 62 <div class="bluesky-post-inner"> 63 <div class="bluesky-post-body"> 64 <div class="bluesky-post-text">${s}</div> 65 ${l} 66 </div> 67 <div class="bluesky-post-meta"> 68 <a href="${t(o)}" target="_blank" rel="noopener noreferrer" class="bluesky-post-permalink"> 69 <time datetime="${t(a.record.createdAt)}">${c}</time> 70 </a> 71 <span class="bluesky-post-stats"> 72 ${d} 73 ${f} 74 </span> 75 </div> 76 </div> 77 `,p}async function o(){let e=document.querySelector(`[data-bluesky-feed]`);if(!e)return;let t=e.dataset.actor||`utilitybend.com`,n=parseInt(e.dataset.limit||`10`,10),r=e.querySelector(`.bluesky-posts`);if(r)try{let i=await fetch(`https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${encodeURIComponent(t)}&filter=posts_no_replies&limit=${n*2}`);if(!i.ok)return;let o=(await i.json()).feed.filter(e=>!(e.reason||(e.post?.embed?.$type||``).includes(`record`))).map(e=>e.post).slice(0,n);r.innerHTML=``;for(let e of o)r.appendChild(a(e));o.length===0&&e.closest(`.home-bluesky`)?.remove()}catch{}}document.addEventListener(`DOMContentLoaded`,o);</script>
77</div><footer class="footer-primary" itemscope="" itemtype="https://schema.org/Organization"><div class="wrapper"><div class="social-icons"><p><strong>©2026 <span itemprop="name"><a href="https://utilitybend.com/" class="footer-home-link u-url" rel="home" itemprop="url">utilitybend</a></span></strong><span class="footer-separator"> -</span><span class="footer-rights">All rights reserved</span></p><meta itemprop="logo" content="https://utilitybend.com/assets/share-defaults/utilitybend-logo.png"><meta itemprop="url" content="https://utilitybend.com/"><a href="https://bsky.app/profile/utilitybend.com" target="_blank" class="bluesky u-url" rel="noreferrer" itemprop="sameAs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 600 530"><path fill="currentColor" d="M135.72 44.03C202.216 93.951 273.74 195.17 300 249.49c26.262-54.316 97.782-155.54 164.28-205.46C512.26 8.009 590-19.862 590 68.825c0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.38-3.69-10.832-3.708-7.896-.017-2.936-1.193.516-3.707 7.896-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.45-163.25-81.433C20.15 217.613 9.997 86.535 9.997 68.825c0-88.687 77.742-60.816 125.72-24.795z"></path></svg><span class="sr-only">Follow me on Bluesky</span></a><a href="https://front-end.social/@utilitybend" target="_blank" class="mastodon u-url" rel="noreferrer" itemprop="sameAs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 27 27" aria-hidden="true"><path fill="currentColor" d="M15.938 4.031c-3.021.013-6.02.396-7.58 1.115 0 0-3.358 1.529-3.358 6.735 0 6.197-.005 13.98 5.563 15.484 2.131.573 3.965.697 5.439.612 2.675-.151 3.998-.971 3.998-.971l-.09-1.977s-1.734.611-3.88.541c-2.128-.075-4.369-.234-4.718-2.89a5.64 5.64 0 0 1-.046-.746c4.507 1.119 8.35.487 9.408.359 2.954-.359 5.525-2.211 5.853-3.904.514-2.668.471-6.508.471-6.508 0-5.206-3.352-6.735-3.352-6.735-1.645-.768-4.688-1.127-7.709-1.115zm-3.233 3.971c1.035.028 2.058.49 2.688 1.469l.609 1.035.607-1.035c1.265-1.967 4.1-1.845 5.45-.323 1.244 1.448.966 2.383.966 8.852v.002h-2.447v-5.629c0-2.635-3.36-2.737-3.36.365V16h-2.43v-3.262c0-3.102-3.358-3.002-3.358-.367V18H8.977c0-6.474-.273-7.415.966-8.852.68-.766 1.727-1.174 2.762-1.146z"></path></svg><span class="sr-only">Follow me on Mastodon</span></a><!--<a--><!-- href="https://twitter.com/utilitybend"--><!-- target="_blank"--><!-- class="twitter u-url"--><!-- rel="noreferrer"--><!-- itemprop="sameAs"--><!-->--><!-- <svg--><!-- xmlns="http://www.w3.org/2000/svg"--><!-- xmlns:xlink="http://www.w3.org/1999/xlink"--><!-- version="1.1"--><!-- width="24"--><!-- height="24"-->
77<!-- viewBox="0 0 24 24"--><!-- xml:space="preserve"--><!-- fill="currentColor"--><!-- ><path--><!-- d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"--><!-- ></path></svg--><!-- >--><!-- <span class="sr-only">Follow me on X (Twitter)</span>--><!--</a>--><a href="https://www.linkedin.com/in/utilitybend/" target="_blank" class="linkedin" rel="noreferrer" itemprop="sameAs"><svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg><span class="sr-only">Follow me on LinkedIn</span></a><a href="https://codepen.io/utilitybend/" target="_blank" class="codepen" rel="noreferrer" itemprop="sameAs"><svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031a.443.443 0 01-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739a.58.58 0 01.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12z"></path></svg><span class="sr-only">Follow me on Codepen</span></a><a href="https://open.spotify.com/user/1142342505" target="_blank" class="spotify" rel="noreferrer" itemprop="sameAs"><svg role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"></path></svg><span class="sr-only">Follow me on Spotify</span></a><a href="https://sessionize.com/brecht-de-ruyte/" target="_blank" class="sessionize" rel="noreferrer" itemprop="sameAs"><svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 0c6.628 0 12 5.372 12 12v10c0 1.097-.903 2-2 2h-7.5l-.001-.169c-.049-2.894-1.347-4.902-3.709-5.96L24 12l-.32-.109c-2.858-.999-5.251-2.462-7.18-4.391-1.928-1.928-3.392-4.322-4.391-7.181L12 0 4 18c0 .667.167 1.167.5 1.5.334.334.834.5 1.5.5l.187.001c3.771.04 5.313 1.295 5.313 3.999H2c-1.097 0-2-.903-2-2V2C0 .903.903 0 2 0h10Zm7.207 4.793c-.781-.781-1.73-1.097-2.121-.707-.39.39-.074 1.34.707 2.121.781.781 1.731 1.098 2.121.707.391-.39.074-1.34-.707-2.121Z"></path></svg><span class="sr-only">View my speaker profile on Sessionize</span></a><a href="/rss.xml" target="_blank" class="rss"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg><span class="sr-only">Add to your RSS feed</span></a></div><nav class="footer-nav"><button type="button" class="btn btn-link" id="open-preferences">Preferences</button></nav></div></footer>
77<script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.BRqg2awi.js"></script>
77</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.