đŸ”„ There are 451 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 →

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

This is a CSS performance problem I see all too often.

The React website has some jank due to their use of transition.

Here is how to find what causes it and how to fix it

78730
88520K
1628204
1K772860880K

This Lando Norris website is insane

I dove into the code and broke it all down. Some really neat 3D effects along with scrolling and next level animations

4.2K309602.1K437K
1.9K34K
71664
← Prev 10 please

Page 1 of 46

10 More please →