đŸ”„ 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.

← Prev 10 please

Page 1 of 46

10 More please →

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!

4012881
5000
32001.3K
141478
00

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.

29316194619K
399131812K
636121K

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

319182012020K
88232.3K
202
69150

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',
]
8.9K6112972.1K417K
1900133
47995
100
11032

đŸ”„ 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;
  }
}
35310186.4K
1.5K98301.1K103K
70616K
1.3K24
855101

There is something off about this design - it's the vertical text alignment

This new CSS feature just made aligning text 100x easier

I used text-box: trim-both cap alphabetic; to align the text to the top and bottom of the container.

820472848445K
74218K
1.8K1254341K
111182

These displays are so good.

Been running the 4:3 BenQ for about a year and they just sent me the 32" to replace my big bezel LG 32"

Colours are great and text is super crispy.

35672215348K
28614K
555103.2K

GitHub contribution graph IRL

134295.3K

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

1.9K130732K153K
70421
48716
77920K
617281614K

Here is how to get the FPS meter and a few other handy tools running in your browsers dev tools

3079.1K
39270
59443913K
32214922926K
← Prev 10 please

Page 1 of 46

10 More please →