Last active
January 23, 2026 22:42
-
-
Save ringmaster/c72f6cbc8f7c32faa62e0335818caa1f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>YAML</title> | |
| <link href="/style.css" rel="stylesheet" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script> | |
| <style> | |
| /* Hide words initially to prevent flash */ | |
| #y-word, #a-word, #m-word, #l-word { | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>--- # YAML</h1> | |
| <ul> | |
| <li id="y-word">YAML</li> | |
| <li id="a-word">Ain't</li> | |
| <li id="m-word">Markup</li> | |
| <li id="l-word">Language</li> | |
| </ul> | |
| <script> | |
| // Paired options for first two words | |
| const phrasePairs = [ | |
| { y: 'YAML', a: "Ain't" }, | |
| { y: 'Yet', a: 'Another' } | |
| ]; | |
| // Animate text change by cycling through random characters | |
| function animateTextChange(element, targetText, duration = 500) { | |
| const startText = element.textContent; | |
| const maxLength = Math.max(startText.length, targetText.length); | |
| const startTime = Date.now(); | |
| // Make element visible | |
| element.style.opacity = 1; | |
| const interval = setInterval(() => { | |
| const elapsed = Date.now() - startTime; | |
| const progress = Math.min(elapsed / duration, 1); | |
| // Build new text character by character | |
| let newText = ''; | |
| for (let i = 0; i < maxLength; i++) { | |
| // If we've progressed past this character position, use target | |
| if (progress > i / maxLength) { | |
| newText += targetText[i] || ''; | |
| } else { | |
| // Otherwise show random letter | |
| const randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 26)); | |
| newText += randomChar; | |
| } | |
| } | |
| element.textContent = newText; | |
| // Finish animation | |
| if (progress >= 1) { | |
| clearInterval(interval); | |
| element.textContent = targetText; | |
| } | |
| }, 30); // Update every 30ms | |
| } | |
| async function loadAndReplace() { | |
| // Select random phrase pair | |
| const pair = phrasePairs[Math.floor(Math.random() * phrasePairs.length)]; | |
| // Instead of using a timestamp to URL to prevent browser caching: | |
| const response = await fetch('/yaml.yaml', { | |
| cache: 'no-cache' // Revalidate with server before using cached version | |
| }); | |
| // Get the raw YAML text from the response | |
| const yamlText = await response.text(); | |
| // Parse YAML into JavaScript object with M and L arrays | |
| const data = jsyaml.load(yamlText); | |
| // Select random word from M array | |
| const randomM = data.M[Math.floor(Math.random() * data.M.length)]; | |
| // Select random word from L array | |
| const randomL = data.L[Math.floor(Math.random() * data.L.length)]; | |
| // Animate all text changes | |
| animateTextChange(document.getElementById('y-word'), pair.y); | |
| animateTextChange(document.getElementById('a-word'), pair.a); | |
| animateTextChange(document.getElementById('m-word'), randomM); | |
| animateTextChange(document.getElementById('l-word'), randomL); | |
| } | |
| // Run on page load | |
| loadAndReplace(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment