🔥 There are 453 Hot Tips!!
Hot tips are spicy lil' nuggets related to web development and tooling that I share on my twitter account. I've logged them here to make them easier to find.
Tile Buddy
Tile Buddy is a little app for sizing and exporting repeatable patterns. I use it to create background images for my videos, but it's also great for wallpapers!
Can you render video with Emojis?
I made a photobooth that renders an entire video feed using only emojis. It works by drawing the video to canvas, slicing it into a grid of cells, figuring out the dominant color of each cell, and then matching it to the closest emoji by color. The more grid cells you use, the higher the resolution — but it takes a bit more to render each frame. Writing the emojis to canvas instead of DOM elements keeps it performant.
HTML in Canvas API is Nuts!
The new HTML in Canvas API lets you render regular HTML applications inside of a canvas element. Because it's inside canvas, you can apply any canvas transformations to live, interactive HTML — stylistic effects, physics, shattering, you name it. The HTML still works as normal (inputs, inspect element, etc.), but now you can do wild creative things to the canvas
Claude Code leaked their source map, effectively giving you a look into the codebase.
I immediately went for the one thing that mattered: spinner verbs
There are 187.
export const SPINNER_VERBS = [
'Accomplishing',
'Actioning',
'Actualizing',
'Architecting',
'Baking',
'Beaming',
"Beboppin'",
'Befuddling',
'Billowing',
'Blanching',
'Bloviating',
'Boogieing',
'Boondoggling',
'Booping',
'Bootstrapping',
'Brewing',
'Bunning',
'Burrowing',
'Calculating',
'Canoodling',
'Caramelizing',
'Cascading',
'Catapulting',
'Cerebrating',
'Channeling',
'Channelling',
'Choreographing',
'Churning',
'Clauding',
'Coalescing',
'Cogitating',
'Combobulating',
'Composing',
'Computing',
'Concocting',
'Considering',
'Contemplating',
'Cooking',
'Crafting',
'Creating',
'Crunching',
'Crystallizing',
'Cultivating',
'Deciphering',
'Deliberating',
'Determining',
'Dilly-dallying',
'Discombobulating',
'Doing',
'Doodling',
'Drizzling',
'Ebbing',
'Effecting',
'Elucidating',
'Embellishing',
'Enchanting',
'Envisioning',
'Evaporating',
'Fermenting',
'Fiddle-faddling',
'Finagling',
'Flambéing',
'Flibbertigibbeting',
'Flowing',
'Flummoxing',
'Fluttering',
'Forging',
'Forming',
'Frolicking',
'Frosting',
'Gallivanting',
'Galloping',
'Garnishing',
'Generating',
'Gesticulating',
'Germinating',
'Gitifying',
'Grooving',
'Gusting',
'Harmonizing',
'Hashing',
'Hatching',
'Herding',
'Honking',
'Hullaballooing',
'Hyperspacing',
'Ideating',
'Imagining',
'Improvising',
'Incubating',
'Inferring',
'Infusing',
'Ionizing',
'Jitterbugging',
'Julienning',
'Kneading',
'Leavening',
'Levitating',
'Lollygagging',
'Manifesting',
'Marinating',
'Meandering',
'Metamorphosing',
'Misting',
'Moonwalking',
'Moseying',
'Mulling',
'Mustering',
'Musing',
'Nebulizing',
'Nesting',
'Newspapering',
'Noodling',
'Nucleating',
'Orbiting',
'Orchestrating',
'Osmosing',
'Perambulating',
'Percolating',
'Perusing',
'Philosophising',
'Photosynthesizing',
'Pollinating',
'Pondering',
'Pontificating',
'Pouncing',
'Precipitating',
'Prestidigitating',
'Processing',
'Proofing',
'Propagating',
'Puttering',
'Puzzling',
'Quantumizing',
'Razzle-dazzling',
'Razzmatazzing',
'Recombobulating',
'Reticulating',
'Roosting',
'Ruminating',
'Sautéing',
'Scampering',
'Schlepping',
'Scurrying',
'Seasoning',
'Shenaniganing',
'Shimmying',
'Simmering',
'Skedaddling',
'Sketching',
'Slithering',
'Smooshing',
'Sock-hopping',
'Spelunking',
'Spinning',
'Sprouting',
'Stewing',
'Sublimating',
'Swirling',
'Swooping',
'Symbioting',
'Synthesizing',
'Tempering',
'Thinking',
'Thundering',
'Tinkering',
'Tomfoolering',
'Topsy-turvying',
'Transfiguring',
'Transmuting',
'Twisting',
'Undulating',
'Unfurling',
'Unravelling',
'Vibing',
'Waddling',
'Wandering',
'Warping',
'Whatchamacalliting',
'Whirlpooling',
'Whirring',
'Whisking',
'Wibbling',
'Working',
'Wrangling',
'Zesting',
'Zigzagging',
]
🔥 Someone on reddit posted a demo where CSS truncates text from the middle. They didn't post the code, so here is my shot at it with Flexbox.
Super handy for GUIDs or other long strings that you want to truncate from the middle.
<p class="truncate-text"><span>2brb5e796-6c5e-4bc4-871b-f3afd469</span><span>-1c1e</span></p>
<p class="truncate-text"><span>2bb5e796-6c5e-4bc4-871b-</span><span>f3af-d469-1c1e</span></p>
<p class="truncate-text"><span>2bb5e796-6c5e-4bc4</span><span>-871b-f3af-d469-1c1e</span></p>
.truncate-text {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
padding: 0 10px;
border-radius: 5px;
display: flex;
span {
overflow: hidden;
flex: 0 1 auto;
}
span:nth-child(1) {
flex-shrink: 1;
background: red;
text-overflow: ellipsis;
}
span:nth-child(2) {
background: green;
min-width: fit-content;
flex: 1;
}
}
Hot tip for anyone doing AI dev:
Use Ollama to easily run models like Deepseek-r1 or Gemma locally on your machine. It downloads them and spins up a server with an OpenAI SDK compatible API
The smaller models are fast and good enough to work on new features or debug streaming without having to pay for API requests