In 2010 I drank the single page application cool aid. I thought they provided the most optimal UX. But having implemented a few I realised that they often provide slow and inaccessible experiences. Here’s why: adamsilver.io/blog/the-probl…

We were planning to ship the customizable <selectlist> as a new element, not we're reusing the <select> element. What should we call this to differentiate it from the current <select> when talking about it? [POLL]

The code for anchor positioning has had a major ✨glow up✨ since I first started working with/on it! Here is all the code you need to get a basic anchor now: .tooltip { bottom: calc(anchor(top)); position-try-options: flip-block; justify-self: anchor-center; } pic.twitter.com/7YZKKT7KQ6

Steal this code to add a little progressively-enhanced entry/exit animation to your popovers or dialogs /* IS-OPEN */ [popover]:popover-open { translate: 0 0; } /* EXIT*/ [popover] { transition: translate 0.5s ease-out, display 0.5s ease-out allow-discrete; translate: 0… twitter.com/i/web/status/1… pic.twitter.com/VnzX3NfguJ

Kinda wild to think that CSS can do all this color stuff for you now 🚀 Want to make a color lighter? Want to mix a color? No problem 😎 Can even mix and match the color formats 🥲 pic.twitter.com/NJWwP2SXFE x.com/jh3yy/status/1…

CSS-only dark mode toggle using :has() – no JavaScript needed! tymekdev.github.io/no-js-dark-mod… pic.twitter.com/enQL2lkYCQ

Did you know: The form attribute on an input element can be used to emulate nested forms, or to place it outside a form but still be posted with it. twitter.com/i/web/status/1… pic.twitter.com/G5aUFlJkzf

Temporal, the upcoming new Date / Time API JavaScript will make working with leap years a piece of cake pic.twitter.com/6RyNW0rONt

“Switches are a popular control on mobile platforms as well as in a large variety of UI frameworks, but until now they were not built into the web platform. Seeing the widespread need for this control we decided to change that.” webkit.org/blog/15054/an-…

TIL the anchor positioning CSS proposal allows you to anchor to pseudo-elements aswell as "real" elements. Meaning you can build a tooltip for a range input's value really easily. You'll need Chrome with experimental web platform features flag to try it jsfiddle.net/rqdy693w/

You're doing tailwind `text` size wrong 😤 pic.twitter.com/TVMwFnOYtq

So good. This here is the level of self awareness all technical people should aspire to. It takes introspection like this to actually improve computers, since most people who happily tolerate esoteric tools usually forget how much pain they went through to become proficient.… twitter.com/i/web/status/1… pic.twitter.com/EEM0QH31wI twitter.com/todepond/statu…

#HTML tip for today: <ol> element has `start` and `reversed` attributes! Where it can be useful: `start` → paginated results `reversed` → "top 10 best ... " lists pic.twitter.com/cexO6YW8iJ

htmx is a recent discovery for me and I'm amazed. I think about it as "HTML pro", because it lets HTML be so useful and such a central part in how we build Web Applications. Without adding any complexity at all, with a declarative approach. What HTML could have been.

Virtually every #nobuild front end made with vanilla HTML and CSS within the last thirty years still runs as designed in modern browsers. And requires no upkeep, no version thrashing. It’s an incredible achievement. Bet on the browser when you can. twitter.com/mscccc/status/…

Skewed infinite carousel w/ vignette effect ✨ Built entirely with @tailwindcss – zero JavaScript required. Live demo & code 👇 pic.twitter.com/nJE8gjaKSZ

This is weird but I'm starting to like making web stuff with just HTML/CSS and vanilla JavaScript No packages No webpack No typescript

Web development has lost its way. The world is mired in a swamp of complex tools and patterns created by those who refuse to see how simple the web could be. It’s so bad that we refuse to see a way out. I want to build a web that’s rooted in the fundamentals.

Here’s a helpful graphic for when you hear “modal” or “dropdown” yet another time 💀 pic.twitter.com/E7zzmUhyQo

Can we just go back to raw HTML, CSS, and Javascript?

CSS Anchor + popover attribute = Magic🧙🏻 1️⃣Auto-follow the tooltip in `input type=range` 2️⃣Avoids being cropped by `overflow:hidden` Now the only thing we're missing is how to trigger the popover on the input without using JS. github.com/whatwg/html/is… Demo codepen.io/yisi/pen/jOJWL… pic.twitter.com/HGPL9f4Mb2

@htmx_org Since I started using HTMX i foubd myself more time reading about HTML and CSS than reading docs if fandom frameworks. It feels closer to the web and I like it!

It’s been a long time since I was able to really dive into CSS and HTML and JS *as a developer* and can I just say OMG it has become so AMAZING. Stuff that was hard is MAGICAL and FUN. Any doubts I had about spending the last 5 1/2 years making browsers have melted away. 🤩😍💪🏻 pic.twitter.com/6IeV8MCpGa

The ability to darken and lighten any color using just CSS is such a powerful feature. Do we really need all those colors in our systems, or could the tokens be defined perceived lightness intervals instead? pic.twitter.com/gi84hp5Gze

How am I just learning about this? pic.twitter.com/2RfxInzHKN

How am I just learning about this? pic.twitter.com/2RfxInzHKN

Wait what? Safari introduced a <input type=checkbox switch> in the latest TP? (via indieweb.social/@anthony/11161…)

Vertical centering used to be one of the biggest CSS layout headaches, but now the display: block element can be vertically centered by align-content: center. Which has been implemented in Chrome Canary and WebKit Nightly. Thanks @fantasai and tkent. github.com/WebKit/WebKit/… pic.twitter.com/bW6WNXUdWa

Just turned off the import map shim for ONCE #1. It's just not needed on the browsers we target, as it's now natively supported in Safari, Chrome, Firefox. Amazing progress in just a few years. HUGE kudos to @guybedford for bridging us to the future with es-module-shims 🤘🙏

Instead of complaining about the rapidly changing Rails front end ecosystem (stimulus/turbo/morph?), I'm going to dive in and really learn it. First real world struggle - I want a grid of radio boxes that respond to user input by adding an .svg and changing the border color.… twitter.com/i/web/status/1… pic.twitter.com/b3oy85QmNR