🔥 There are 446 Hot Tips!!

I am so happy this is being implemented.

If every tab being named page in Next.js/Sveltekit folder based routing makes you go loopy, this new VS Code feature is going to be a life saver!

I can't believe you can do this in JavaScript! In the browser. With local AI models. 🤯

Raw dog your CSS selectors with @scope

Running Promises concurrently - but not too many at once!

p-map is a nice balance between Promise.all() and sequential await when working with compute heavy functions.

Love the use of mix-blend-mode: difference; on the site logo for this striped t-shirt

I did it! Gutted an old iPad 3, and stuck a $20 driver board to turn the high resolution display into an external monitor. Pretty fun project!

Here are 10 hot tips for using CSS :has() 👉🏻

1: CSS :has() Basics Select an element based on its children. Handy when you want to style a parent differently when it contains media.

2: The anywhere selector! When The body has a checkbox checked, you can grab literally any other element in the body and style it. Useful for toggling settings without JS.

3: The Previous Element Selector! Grab the item before the selected item. Never before (heh) possible!

4: Layout Targeting! I use this in my slide decks. Based on the contents of the slide, I can create a few commonly used layouts.

Adding or removing elements will automatically change the layout.

5. Form Validation Styling. Style the label, fieldset or wrapping element based on the validation of the input.

You can pair this with the previous element selector as well if your label and inputs are siblings.

6. All Siblings! When you are hovering a child, select all the siblings, but not the hovered one. Useful if you want to focus or scale up an element while dimming the rest. Works well table rows too!

7. Quantity Queries. When a parent has more than 5 children, style it differently.

Perhaps you want to add CSS mask and fade out the rest of the items.

8. Empty Children Select the parent when it's children are empty.

Maybe you want to show skeleton loaders, or flag an element for debugging?

9. Nested dropdown navs. Add a ↓ when there is a dropdown available.

10. Attribute Selectors! Style the parent based on it's child file type!

auto-growing <textarea> without JavaScript!

CSS is getting field-sizing: content; to size inputs by their contents.

Dropped in Chrome Canary today, demo here:

Suuuper handy new CSS:

:user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with

Just landed in Chrome + Safari, been in Firefox for years.