<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Personal blog about frontend web development and some other thoughts.">
		<meta name="generator" content="Eleventy v3.1.5">
		<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">

		<link rel="alternate" type="application/atom+xml" href="/feed.xml" title="F. Knüssel">
		<link rel="canonical" href="https://fedknu.com/sitemap.xml">
		<meta property="og:title" content="F. Knüssel">
		<meta property="og:description" content="Personal blog about frontend web development and some other thoughts.">
		<meta property="og:url" content="https://fedknu.com/sitemap.xml">
		<meta property="og:type" content="website">
		<meta name="twitter:card" content="summary">

		<title>
			F. Knüssel
		</title>

		<script>
			(function() {
	let savedTheme = null;
	try {
		savedTheme = localStorage.getItem('theme');
	} catch (e) {}

	const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
	const theme = savedTheme || systemTheme;
	
	document.documentElement.style.setProperty('color-scheme', theme);
})();

		</script>

		
		
		<style>
			:where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:0.67em;margin-block-start:0.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}:root{--token-font-family-sans-serif:-apple-system,system-ui,"Segoe UI",Roboto,Noto,Oxygen-Sans,Ubuntu,Cantrell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--token-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Monaco,"Cascadia Mono",Consolas,"Liberation Mono","Courier New",monospace;--token-color-black:#172b4d;--token-color-black-muted:#18171f;--token-color-gray-dark:#344563;--token-color-gray-medium:#526b8d;--token-color-gray-light:#e1e1e1;--token-color-gray-extra-light:#f7f7f7;--token-color-white:#fff;--token-color-white-muted:#dcd7ba;--token-color-yellow:#f9ca5e;--token-color-orange:#ffa066;--token-color-red:#ed615a;--token-color-crimson:#dd1144;--token-color-blue:#0572e6;--token-color-graphite:#2c2c2e;--token-color-charcoal:#23222d;color-scheme:light dark;--color-bg:light-dark(var(--token-color-white), var(--token-color-black-muted));--color-bg-alt:light-dark(var(--token-color-gray-extra-light), var(--token-color-charcoal));--color-text:light-dark(var(--token-color-black), var(--token-color-white-muted));--color-text-muted:light-dark(var(--token-color-gray-dark), var(--token-color-gray-light));--color-heading:light-dark(var(--token-color-black), var(--token-color-white));--color-border:light-dark(var(--token-color-gray-light), var(--token-color-gray-dark));--color-accent:light-dark(var(--token-color-blue), var(--token-color-orange));--color-accent-alt:light-dark(var(--token-color-yellow), var(--token-color-orange));--color-accent-text:light-dark(var(--token-color-white), var(--token-color-black));--color-focus:light-dark(var(--token-color-red), var(--token-color-orange));--color-code:light-dark(var(--token-color-crimson), var(--token-color-white));--color-code-bg:light-dark(var(--token-color-gray-extra-light), var(--token-color-graphite));--token-spacing-xxs:0.25rem;--token-spacing-xs:0.5rem;--token-spacing-sm:1rem;--token-spacing-md:1.5rem;--token-spacing-lg:2rem;--token-spacing-xl:3rem;--token-spacing-xxl:4rem;--token-font-size-xs:0.875rem;--token-font-size-sm:1.125rem;--token-font-size-md:1.375rem;--token-font-size-lg:1.875rem;--token-font-size-xl:2.5rem;--token-font-weight-light:300;--token-font-weight-normal:400;--token-font-weight-bold:600;--token-line-height-sm:1;--token-line-height-md:1.5;--token-line-height-lg:2;--token-breakpoint-sm:768px;--token-breakpoint-lg:1024px;--token-border-radius-default:3px}*,::after,::before{box-sizing:border-box}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--token-font-family-sans-serif);font-size:16px;margin:0}.common-main-title{font-size:var(--token-font-size-xl);font-weight:var(--token-font-weight-bold);line-height:var(--token-line-height-md);margin:0 0 var(--token-spacing-md)}.common-main-content ol,.common-main-content p,.common-main-content td,.common-main-content th,.common-main-content ul,.common-paragraph{font-size:var(--token-font-size-md);font-weight:var(--token-font-weight-light);line-height:var(--token-line-height-lg)}.common-main-content b,.common-main-content strong{font-weight:var(--token-font-weight-bold)}.common-link,.common-main-content a{border-bottom:1px solid var(--color-accent);color:var(--color-accent);padding-bottom:1px;text-decoration:none;word-break:break-word}.common-link:hover,.common-main-content a:hover{border-bottom:3px solid var(--color-accent)}.common-focus-ring:focus,.common-link:focus,.common-main-content a:focus{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:1px;border-bottom-style:none}.common-link:focus:hover,.common-main-content a:focus:hover{border-bottom-style:none}h1,h2,h3,h4,h5,h6{color:var(--color-heading)}.common-main-content h1{display:none}.common-main-content h2{font-size:var(--token-font-size-lg);margin:var(--token-spacing-xl) 0 0}.common-main-content h3{font-size:var(--token-font-size-md);margin:var(--token-spacing-xl) 0 0}.common-main-content picture{display:block;text-align:center;margin:var(--token-spacing-xxl) 0}.common-main-content td,.common-main-content th{padding:var(--token-spacing-xs);text-align:center}.common-main-content th{background-color:var(--color-bg-alt);font-weight:var(--token-font-weight-bold)}.common-main-content table{border-collapse:collapse}.common-main-content table,.common-main-content td,.common-main-content th{border:1px solid var(--color-border)}.common-main-content blockquote{border:1px solid var(--color-border);background-color:var(--color-bg-alt);padding:var(--token-spacing-sm) var(--token-spacing-md);margin:var(--token-spacing-xl) var(--token-spacing-xxl);box-shadow:var(--token-spacing-xs) var(--token-spacing-xs) 0 1px var(--color-border)}.common-main-content blockquote p{color:var(--color-text);margin:0}.common-main-content code:not(:where(pre code)){background-color:var(--color-code-bg);border-radius:var(--token-border-radius-default);font-size:var(--token-font-size-sm);margin:0;padding:var(--token-spacing-xxs) var(--token-spacing-xs);overflow-wrap:break-word;color:var(--color-code);font-weight:var(--token-font-weight-normal)}.common-main-content a code{color:inherit}.visually-hidden{border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.layout-skip-link{--skip-link-height:var(--token-spacing-xl);--skip-link-margin:var(--token-spacing-xs);align-items:center;background-color:var(--color-accent);border-radius:var(--token-border-radius-default);color:var(--color-accent-text);display:inline-flex;font-size:var(--token-font-size-sm);font-weight:var(--token-font-weight-light);height:var(--skip-link-height);left:0;margin:var(--skip-link-margin);outline-offset:var(--token-spacing-xxs);padding:0 var(--token-spacing-sm);position:fixed;top:0;transform:translateY(calc(-1 * (var(--skip-link-height) + var(--skip-link-margin))));z-index:10}.layout-skip-link:focus-visible{transform:translateY(0)}.layout-header{background-color:var(--color-bg-alt);border-bottom:1px solid var(--color-border)}.layout-header::before{height:3px;background-color:var(--color-accent-alt);content:"";display:block;width:100%}.layout-header__site-name__link{display:flex;align-items:center;margin-right:var(--token-spacing-xl);text-decoration:none}.layout-header__site-name__emoji{height:32px;margin-right:var(--token-spacing-sm);width:32px}.layout-header__site-name__container{white-space:nowrap}.layout-header__site-name__title{color:var(--color-text);font-weight:var(--token-font-weight-bold);font-size:var(--token-font-size-sm)}.layout-header__site-name__tagline{font-weight:var(--token-font-weight-light);color:var(--color-text-muted);font-size:var(--token-font-size-xs);margin-top:var(--token-spacing-xxs)}.layout-header__theme-toggle{background:0 0;border:none;cursor:pointer;padding:var(--token-spacing-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--token-border-radius-default);color:var(--color-text);transition:background-color .2s ease}.layout-header__theme-toggle:hover{background-color:var(--color-bg)}.layout-header__theme-toggle span{display:flex;align-items:center;justify-content:center}.layout-header__theme-toggle svg{width:20px;height:20px;display:block;transition:fill .2s ease}.layout-header__navigation{align-items:center;display:flex;justify-content:space-between;font-size:var(--token-font-size-sm);line-height:var(--token-line-height-sm);padding:var(--token-spacing-sm) var(--token-spacing-md);overflow-x:auto}@media screen and (min-width:768px){.layout-header__navigation{margin:0 auto;max-width:var(--token-breakpoint-lg);overflow-x:hidden}}.layout-header__navigation__list{display:flex;align-items:center;justify-content:flex-end;margin:0;padding-left:0}.layout-header__navigation__list-item{display:inline-block;list-style-type:none;margin-right:var(--token-spacing-lg)}.layout-header__navigation__link{color:var(--color-text);padding-block:var(--token-spacing-xs);text-decoration:none}.layout-header__navigation__link::after{content:"";display:block;height:2px;background:currentColor;transition:width .3s;width:0}.layout-header__navigation__link--active::after,.layout-header__navigation__link:hover::after{width:100%}.layout-header__navigation__link:focus::after{display:none}@media (prefers-reduced-motion:reduce){.layout-header__navigation__link::after{transition:none}}.layout-content{margin:0 auto;max-width:var(--token-breakpoint-lg);padding:var(--token-spacing-lg) var(--token-spacing-md) var(--token-spacing-xl)}
		</style>
	</head>
	<body>

		<a href="#main" class="layout-skip-link">
        	Skip to main content
      	</a>

		<header class="layout-header">
			<nav class="layout-header__navigation" aria-label="Site">
				<a href="/" class="layout-header__site-name__link common-focus-ring">
					<img class="layout-header__site-name__emoji" src="/assets/engineer.svg" alt="" eleventy:ignore/>
					<span class="layout-header__site-name__container">
						<div class="layout-header__site-name__title">
							F. Knüssel<span class="visually-hidden">: </span>
						</div>
						<div class="layout-header__site-name__tagline">Frontend Developer</div>
					</span>
				</a>

				<ul class="layout-header__navigation__list">
						<li class="layout-header__navigation__list-item">
							<a href="/about/"
							   class="layout-header__navigation__link common-focus-ring "
							   
							   >
								About
							</a>
						</li>
						<li class="layout-header__navigation__list-item">
							<a href="/"
							   class="layout-header__navigation__link common-focus-ring "
							   
							   >
								Blog
							</a>
						</li>
						<li class="layout-header__navigation__list-item">
							<a href="/uses/"
							   class="layout-header__navigation__link common-focus-ring "
							   
							   >
								Uses
							</a>
						</li>
						<li class="layout-header__navigation__list-item">
							<a href="/now/"
							   class="layout-header__navigation__link common-focus-ring "
							   
							   >
								Now
							</a>
						</li>
						<li class="layout-header__navigation__list-item">
							<a href="https://github.com/fed"
							   class="layout-header__navigation__link common-focus-ring "
							   
							   target="_blank" rel="noopener noreferrer">
								GitHub<span class="visually-hidden"> (external link)</span>
							</a>
						</li>
						<li class="layout-header__navigation__list-item">
							<a href="/feed.xml"
							   class="layout-header__navigation__link common-focus-ring "
							   
							   >
								Feed
							</a>
						</li>
					<li class="layout-header__navigation__list-item">
						<button id="theme-toggle" class="layout-header__theme-toggle common-focus-ring" aria-label="Toggle dark mode" aria-pressed="false">
							<span id="theme-toggle-dark-icon" style="display: none;" aria-hidden="true">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="1em" height="1em">
    <path fill="currentColor" fill-rule="evenodd" d="M8.009 4.549C8.003 4.699 8 4.849 8 5c0 6.075 4.925 11 11 11 .151 0 .302-.004.451-.01l1.962-.078-1.09 1.633A9.993 9.993 0 0 1 12 22C6.477 22 2 17.523 2 12a9.993 9.993 0 0 1 4.455-8.323l1.633-1.09-.08 1.962Zm-1.911 2.05A7.97 7.97 0 0 0 4 12a8 8 0 0 0 13.4 5.901C11.5 17.177 6.821 12.5 6.098 6.6Z" clip-rule="evenodd"></path>
    <path fill="currentColor" d="m17 4 1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2Z"></path>
</svg>

							</span>
							<span id="theme-toggle-light-icon" style="display: none;" aria-hidden="true">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="1em" height="1em">
	<path fill="currentColor" d="M13 22h-2v-3h2v3Z"></path>
	<path fill="currentColor" d="m6.343 16.242.707.708.708.707-2.122 2.121-1.414-1.414 2.12-2.122Z"></path>
	<path fill="currentColor" d="m17.657 16.242 2.121 2.122-1.414 1.414-2.122-2.12.708-.708.707-.708Z"></path>
	<path fill="currentColor" fill-rule="evenodd" d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z" clip-rule="evenodd"></path>
	<path fill="currentColor" d="M5 13H2v-2h3v2Z"></path>
	<path fill="currentColor" d="M22 13h-3v-2h3v2Z"></path>
	<path fill="currentColor" d="m5.636 4.222 2.122 2.12-.708.708-.707.708-2.121-2.122 1.414-1.414Z"></path>
	<path fill="currentColor" d="m18.364 4.222 1.414 1.414-2.12 2.122-.708-.708-.708-.707 2.122-2.121Z"></path>
	<path fill="currentColor" d="M13 5h-2V2h2v3Z"></path>
</svg>
							</span>
						</button>
					</li>
				</ul>
			</nav>
		</header>

		<main class="layout-content" id="main">
			
<h1 class="common-main-title">
	
</h1>

<div class="common-main-content">
	<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<url>
		<loc>https://fedknu.com/blog/web-frontend-resources/</loc>
		<lastmod>2016-08-03</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/wrapping-things-in-bacon/</loc>
		<lastmod>2016-09-17</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/event-streams-vs-properties/</loc>
		<lastmod>2016-09-21</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/manipulating-event-streams/</loc>
		<lastmod>2016-12-27</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/making-sense-out-of-context/</loc>
		<lastmod>2016-12-30</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/inner-workings-of-redux/</loc>
		<lastmod>2017-02-01</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/arrays-objects-and-mutations/</loc>
		<lastmod>2017-03-06</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/dom-bom-revisited/</loc>
		<lastmod>2017-08-06</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/simple-observable-implementation/</loc>
		<lastmod>2017-08-06</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/getting-clever-with-array-reduce/</loc>
		<lastmod>2017-09-06</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/dom-traversal-manipulation/</loc>
		<lastmod>2018-05-08</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/async-testing/</loc>
		<lastmod>2019-01-09</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/focusable-elements-macos/</loc>
		<lastmod>2019-10-19</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/focusing-skipping-tests/</loc>
		<lastmod>2020-01-23</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/code-reviewing-checklist/</loc>
		<lastmod>2020-03-12</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/jira-search-engine/</loc>
		<lastmod>2020-04-21</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/web-frontend-devtools/</loc>
		<lastmod>2021-11-28</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/sublimetext-prettier-eslint/</loc>
		<lastmod>2022-03-12</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/links-vs-buttons/</loc>
		<lastmod>2024-03-05</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/migration-gastsby-to-11ty/</loc>
		<lastmod>2025-07-09</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/defaults/</loc>
		<lastmod>2025-07-19</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/mental-model-elm-architecture/</loc>
		<lastmod>2025-07-22</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/blocking-distracting-sites-mac/</loc>
		<lastmod>2025-09-19</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/engineering-to-pure-maths-self-study-roadmap/</loc>
		<lastmod>2026-01-06</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/blog/using-sublime-text-in-2026/</loc>
		<lastmod>2026-04-03</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/404.html</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/about/</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
	<url>
		<loc>https://fedknu.comfalse</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
	<url>
		<loc>https://fedknu.comfalse</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/now/</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/uses/</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
	<url>
		<loc>https://fedknu.com/feed.xml</loc>
		<lastmod>2026-04-29</lastmod>
	</url>
</urlset>

</div>

		</main>

		<script>
			(function () {
	const toggle = document.getElementById('theme-toggle');
	const darkIcon = document.getElementById('theme-toggle-dark-icon');
	const lightIcon = document.getElementById('theme-toggle-light-icon');

	if (!toggle || !darkIcon || !lightIcon) {
		return;
	}

	function updateIcons(theme) {
		const isDark = theme === 'dark';
		if (isDark) {
			darkIcon.style.display = 'none';
			lightIcon.style.display = 'flex';
		} else {
			darkIcon.style.display = 'flex';
			lightIcon.style.display = 'none';
		}
		
		toggle.setAttribute('aria-pressed', isDark);
		toggle.setAttribute('aria-label', `Switch to ${isDark ? 'light' : 'dark'} mode`);
	}

	// Initialise icons based on current color scheme
	const currentTheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme').trim() || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
	
	// Re verify from localStorage or style if set in head
	const appliedTheme = document.documentElement.style.getPropertyValue('color-scheme') || currentTheme;
	
	updateIcons(appliedTheme);

	toggle.addEventListener('click', () => {
		const isDark = document.documentElement.style.getPropertyValue('color-scheme') === 'dark';
		const newTheme = isDark ? 'light' : 'dark';
		
		document.documentElement.style.setProperty('color-scheme', newTheme);
		try {
			localStorage.setItem('theme', newTheme);
		} catch (e) {}
		updateIcons(newTheme);
	});
})();

		</script>
	</body>
</html>
