panphora · November 28, 2025 11:48
diff --git a/password-strength-vanilla.html b/password-strength-vanilla.html
 <!doctype html><html lang="en" style="color-scheme: dark light;">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>
 Vanilla HTML + CSS (+ JS) "password strength" app
 </title>
 <style>
 form
 { width: max-content
 ; padding: 1em
 ; margin: 1em
 ; box-shadow: 0 0 1ex color-mix(in srgb, currentcolor, transparent)
 }
 li
 { &::marker { content: '☐ ' / 'Missing:' }
 ; &:has(:valid)
  { color: selectedItemText
  ; background-color: selectedItem
  ; &::marker
    { content: '☑ ' / 'OK: '
    ; color: selectedItem
    }
  }
 }
 ul { padding: 0 1em }
 [pattern] { display: none }
 </style>
 <body>
 <form action="">
 <input type="password" oninput="[...form.elements].forEach(_=>_.value=value)" placeholder="placeholder is not label!!!1!">
 <ul>
 <li><input required pattern=".{8,}"> 8+ characters
 <li><input required pattern=".{12,}"> 12+ characters
 <li><input required pattern=".*[a-z].*"> Lowercase letter
 <li><input required pattern=".*[A-Z].*"> Uppercase letter
 <li><input required pattern=".*\d.*"> Number
 <li><input required pattern=".*[^a-zA-Z0-9].*"> Special character
 </ul>
 </form>

 <plaintext style="white-space: pre-wrap">

 Variation of https://backbonenotbad.hyperclay.com/ using just the "platform" for funsies.
 So no external resource. No React. No Backbone. No Tailwind.
 Admittedly cutting corners quite brutally.
 Replicates most flaws of the original(s):
 - Accessibility disaster: no labels, no aria-live regions, no clear indication what is going on.
 -- (Added a feeble attempt with CSS content "alt"s, but I doubt any current SR would catch them.)
 - Resilience disaster: no features detection, no graceful degradation.
 - Will break in any fairly outdated user agent.
 - Will not work without JS, just like the original, but now even worse, rendering non-functional UI instead of nothing.
 -- ***There should be server-side fallback anyway*** and this should be just a progressive enhancement for that.
	<!doctype html><html lang="en" style="color-scheme: dark light;">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
	Vanilla HTML + CSS (+ JS) "password strength" app
	</title>
	<style>
	form
	{ width: max-content
	; padding: 1em
	; margin: 1em
	; box-shadow: 0 0 1ex color-mix(in srgb, currentcolor, transparent)
	}
	li
	{ &::marker { content: '☐ ' / 'Missing:' }
	; &:has(:valid)
	{ color: selectedItemText
	; background-color: selectedItem
	; &::marker
	{ content: '☑ ' / 'OK: '
	; color: selectedItem
	}
	}
	}
	ul { padding: 0 1em }
	[pattern] { display: none }
	</style>
	<body>
	<form action="">
	<input type="password" oninput="[...form.elements].forEach(_=>_.value=value)" placeholder="placeholder is not label!!!1!">
	<ul>
	<li><input required pattern=".{8,}"> 8+ characters
	<li><input required pattern=".{12,}"> 12+ characters
	<li><input required pattern=".[a-z]."> Lowercase letter
	<li><input required pattern=".[A-Z]."> Uppercase letter
	<li><input required pattern=".\d."> Number
	<li><input required pattern=".[^a-zA-Z0-9]."> Special character
	</ul>
	</form>

	<plaintext style="white-space: pre-wrap">

	Variation of https://backbonenotbad.hyperclay.com/ using just the "platform" for funsies.
	So no external resource. No React. No Backbone. No Tailwind.
	Admittedly cutting corners quite brutally.
	Replicates most flaws of the original(s):
	- Accessibility disaster: no labels, no aria-live regions, no clear indication what is going on.
	-- (Added a feeble attempt with CSS content "alt"s, but I doubt any current SR would catch them.)
	- Resilience disaster: no features detection, no graceful degradation.
	- Will break in any fairly outdated user agent.
	- Will not work without JS, just like the original, but now even worse, rendering non-functional UI instead of nothing.
	-- *There should be server-side fallback anyway* and this should be just a progressive enhancement for that.
No results found