πŸ”₯ There are 433 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.

'πŸ”₯'.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
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

πŸ”₯ 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

Here are a couple VS Code kickflips that I often get asked about when I do them in videos.

1252
26324107742K

πŸ”₯ Select ranges of elements in CSS with multiple nth-child selectors and negative n values

35546710643K
753
43319117.9K

πŸ”₯ 4 TypeScript tips in context of when you would use them. as const, typeof, keyof and template string types

1104
43347413156K
642221615K

πŸ”₯ Here’s what the new TypeScript 4.9 Satisfies Operator is for

953
53571812476K

πŸ”₯ CSS Container Queries allow us to style elements based on their containers size. Drops in Firefox Feb 14th, and then all browsers will have support!

49159610367K
1255
1.2K992420K

πŸ”₯ CLI tip: Get a list of files with ESLint issues and open in VS Code

Pipe eslint β†’ grep β†’ xargs code.

Also handy for opening all files with merge conflicts

614
1672164233K