🔥 When implementing dark mode, don’t throw away the visual cues in the light version by naively inverting the color scheme. Close elements should still be lighter and distant elements should still be darker – even in a dark UI.

Third-party bloat is one of the biggest issues affecting web performance today. We have ways to minimize unneeded polyfills in our application code, but how do we do the same for third-party packages? Gary Chew wrote a proposal that explores this 🌟 dev.to/garylchew/brin…

Tip: Chrome DevTools now supports CSS-in-JS! Unlocks using the Styles pane to edit CSS added via CSS-in-JS libraries & tools: bit.ly/dt-css-in-js

I didn't invite the <div></div> to the fancy party because they have no class

Oh this will come in handy. Create a line break while maintaining inline status. .inline-element::after { content: '\A'; white-space: pre; } Thanks Andy Bell! ❤️ piccalil.li/quick-tip/crea…

Vanilla JS .animate() function CodePen.IO codepen.io/aaroniker/pen/… Support ✅ caniuse.com/#feat=web-anim…

#JavaScript tip for today: When "console-logging" several variables, you can wrap them in curly brackets to better see which value belongs to which variable. A small thing, but hey.

🥳 Just released Tailwind CSS v1.8.0! 🦑 New `font-variant-numeric` utilities 🐠 New grid alignment utilities (place-items!) 🐳 Even smaller file sizes 🌒 Experimental dark mode support Check out the release notes for all the details 👉 github.com/tailwindlabs/t…

Codepen demonstrating this effect codepen.io/pxco/pen/PoNOL…

🎉 Chrome DevTools can now debug CSS Grid *way* better! Try it in Chrome 87 & read the guide goo.gle/devtools-grid by @JecelynYeen

With `window.showOpenFilePicker()` you can now make a text editor that reads and writes to a local(!) file in 12 lines of JavaScript. That is insane. (+ a couple lines for handling shortcuts)

#HTML/#UX tip for today: Setting `autocomplete="one-time-code"` will allow your user to fill the input field with the auth code they've just received - without the need to manually copy it from a message.

Wait a minute, weird Tailwind classes work with Emmet in VS Code now? 🤯

Today I'm launching Theatre.js, a hackable animation library with visual tools. It helps you to: - Help you craft detailed motion - Apply the motion to #threejs, HTML, SVG, or any JS value - Build custom visual tooling for your own libraries and workflow Some highlights 🧵👇

Tip: Chrome DevTools has a CSS Shadow Editor!

1 line of CSS to make your problems disappear 👇

Quick HTML tip: I just discovered that `li` elements support a `value` attribute to configure the start of an ordered list.

Chrome 108+ has experimental support for CSS Toggles, and now you can implement components like Tree views, Tabs, Carousels, and more with CSS. Without the input `:checked` hack. Make CSS great again!🥳 Demo: codepen.io/yisi/pen/RwydJ… Una 🇺🇦 jhey ʕ•ᴥ•ʔ Adam Argyle

DevTools now shows inactive CSS properties. Hovering explains why the rule has no visible effect. So nice.

Had to do these toggles in CSS 🫠 CodePen.IO: cdpn.io/mdomqGR