Thomas Puppe thomaspuppe

thomaspuppe / perf-blogpost-preload-mediaquery.html

Created September 17, 2024 17:33

	<link rel="preload" href="kitten.png" as="image" media="(max-width: 767px)" />
	<link rel="preload" href="cat.png" as="image" media="(min-width: 768px)" />

thomaspuppe / perf-blogpost-preload.html

Created September 17, 2024 17:33

	<head>
	…
	<link rel="preload" href="hero.avif" as="image" type="image/avif" />
	</head>

thomaspuppe / perf-blogpost-lazyload.js

Created September 16, 2024 07:14

	// HTML

	<img data-src="lamas.webp" alt="Lamas!" />

	// JavaScript

	const images = document.querySelectorAll( 'img[data-src]');
	const options = { rootMargin: 'Opx', threshold: 0.5 };
	const observer = new IntersectionObserver((entries, observer) => {
	entries. forEach (entry => {

thomaspuppe / perf-blogpost-picture-srcset.html

Created September 16, 2024 07:10

	<picture>
	<source
	media="(max-width: 480px)"
	srcset="cute-dog__480x480__mobile.avif, cute-dog__480x480__mobile__scale_2.avif 2x"/>
	<source
	media="(max-width: 767px)"
	srcset="cute-dog__767x767__mobile.avif, cute-dog__767x767_mobile__scale_2.avif 2x"/>
	<source
	media="(max-width: 900px)"
	srcset="cute-dog__900x506__desktop.avif, cute-dog__900x506__desktop__scale_2.avif 2x"/>

thomaspuppe / perf-blogpost-srcset.html

Created September 16, 2024 07:08

	<img
	src="lama.png"
	alt="A description of the image."
	srcset="small-image.png 300w, medium-image.png 600w, large-image.png 1200w"
	>

thomaspuppe / perf-blogpost-form-validation-regex.html

Created September 16, 2024 07:08

	<input id="lowercaseFoodWithB" type="text"
	required
	minlength="4"
	maxlength="20"
	pattern="b[a-z]" />

	<input name="pin" type="password"
	required
	pattern="\d{4,4}" />

thomaspuppe / perf-blogpost-form-validation-range.html

Created September 16, 2024 07:06

	<input type="number" min="0" step="5" max="100">

	<style>
	input:invalid:out-of-range:before {
	content: "This is not 'Nam, this is bowling. There are rules!"
	}
	</style>

thomaspuppe / perf-blogpost-form-validation-required.html

Created September 16, 2024 07:06

thomaspuppe / perf-blogpost-dialog.css

Created September 16, 2024 07:05

	// Styling des Dialog-Elements
	dialog {}
	dialog[open] {}

	// Styling des halbtransparenten Sperr-Hintergrunds
	dialog:backdrop {}

thomaspuppe / perf-blogpost-dialog.js

Created September 16, 2024 07:04

	// Element selektieren
	const dialog = document. querySelector( 'dialog');

	// Dialog als Modal zeigen (Hintergrund sperren)
	dialog. showModal();

	// Dialog als nicht-Modal zeigen (Hintergrund bleibt erreichbar)
	dialog. show();

	// Dialog schließen