🔥 There are 449 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.

🔥 Not into TypeScript Enums?

Generate types from an object with as const!

33751109953K
1134
149773.2K
38311K

🔥 CSS: Use gradients with mask-image to fade out parts of an element

690831732586K
1987
47112K
3518106.6K

🔥 JavaScript import maps are now in all the browsers! Here is how they work with ES modules.

1.2K17919209130K
774493015K
80313K
2818

Github Copilot Voice - why would you want to code with your voice?

I'm very interested in seeing it evolve as a possible third input device alongside your keyboard and mouse.

31837165477K
645103.4K
59914K
1235

🔥 Re-map your CapsLock key to a Hyper key!

It sends ⇧⌥^⌘ and opens up a whole new world for custom keyboard shortcuts.

Some examples I use →

304301513458K
663
43713K
1.3K822834K

🔥 Lots of talk about Web Streams in the framework space: React, Remix, Next.js, Sveltekit, and more.

Here is a quick 60 second explanation + demo.

31232210682K
4519219.1K
67817K

'🔥'.length is 2. '👨‍👨‍👦‍👦'.length is 11.

Use the Intl.Segmenter() API to count number of perceived characters in a string with emojis in them. Also handy for counting words and sentences!

537631512086K
93218K
905
690261413K

Dipping into NFC tags for my home assistant setup.

1640164477K
565232744K

Really cool CSS gradient border effect I recreated after seeing it on the warp website.

Demo: https://htmlpreview.github.io/?https://raw.githubusercontent.com/wesbos/hot-tips/main/warp-card.html

Code: https://github.com/wesbos/hot-tips/blob/main/warp-card.html

1.7K21020811187K
23310
1.1K23K
4132187.6K

🔥 If you find yourself digging through massive github threads to find an answer, install the GitHub Issue Reactions extension to quickly jump to the ones with the most 👍

594681311882K
1071
77316K