CSS nesting and `:has()` are two months away from being Baseline Widely Available (i.e. available in Chrome/Edge/Firefox/Safari for 30 months).
Posts by Kevin Powell
"If you are planning a project today, what’s the launch date? [..] that might be six months to a year from now. Rather than tying yourself to what’s Widely available today, you can probably include anything that will be Widely available on that date."
rachelandrew.co.uk/archives/202...
Kevin Powell presenting Smart layout patterns with modern CSS at Smashing Conference Amsterdam
A live demo on one use case of container queries by Kevin Powell at Smashing Conference Amsterdam
4th talk - Smart layout patterns with modern CSS by @kevinpowell.co 💅
A new of looking to @ container queries of all kinds. A call-out to use them more in production! Let’s obey 🙏
youtu.be/9XKWnvpdSlU?... by @kevinpowell.co
Somehow I forgot to mention that I'm speaking at @cssday.nl in Amsterdam. I can't wait to be blown away by the sheer amount of knowledge. Look at the line-up, it's once again ridiculous!
The ticket price goes up on May 14th, so better buy your ticket now!
cssday.nl/attendees.html
Tomorrow!
Smashing Conference Amsterdam stage Welcome slide.
Let's take a look back at the amazing @smashingconf.com I attended in Amsterdam over the past two days!
Day 1 started at a lovely venue ✨Theater Tuschinski ✨, with even better people organising it 🤩
Kevin Powell standing on stage in front of a large screen which shows some css which reads: .my-website { all: ai; }
Shortest talk ever on CSS layout.
@kevinpowell.co at @smashingconf.com.
I appreciate the dark hair colour, even if I'm not sure it's accurate 😆
Lovely sketch notes as always!
We should all use more container queries to make smarter layouts. Talk by @kevinpowell.co
Looking out from the stage during a tech check
Little over an hour I'll be right here, but with a lot more people in the audience... Bright lights, though, so I probably won't see them 😅
She said to say hi back to you 😊
I will! And we all miss you Sara, such a shame you can't be here. Hopefully we'll have a chance to see each other again soon 😊
A slide showing the usual path from design to production, with a simple start in the plan and design, which then hits the spec, before splintering into design docs, figma assets, code, and code docs, which then all has to come back together to publish the project.
Looking at the different ways and types of data we can get from Figma, with the API output, default output, the way variants look, and the metadata.
A slide looking at the purpose of what he's talking about, which is using scheme, types, a figma plugin, and CLI to generate and manage component specs.
Asking the question "Where is truth?", with the logos of Figma, Loveable, Cursor, Android, React, and iOS.
And the next talk of #smashingconf is Nathan Curtis with a cool look at some cool ways to ease the transition between Figma and Code, with the help of some scripts and a bit of AI.
A slide with a 7 x 7 grid of fabricated eyes. Some are opened, others closed. During the presentation, it was a video where they were opening and closing.
dina looking at a slide with three iamges. One is an unrganized pile of lots of small objects, all piled together. A second image is a very neatly arranged set of lego pieces, and the third is what looks like a strange contraption that she has put together.
A behind-the-scenes look at Dina creating a stop motion, where she is looking over her shoulder, as she looks at a camera, which is looking at a figure she constructed out of a disassembled leather phone case.
A slide with some of dina's general takeaways: There is always an idea. Tools do not make you more creative. 30 small projects is better than one massive one. Building projects under a theme is more powerful. Limitations are essential.
First talk of day two of #smashingconf is the mystery speaker dina Amin with an inspirational talk of her journey into being a stop motion artist, with some really amazing work.
Chris introducing his talk
A slide with the text "what's going on?" and a meme of an office in total diaaster
Chris with a wall of cardboard boxes on the stage, with words like legal, inertia, language, hubris, and history.
"a complex system that works evolved from a simple system that worked" - gall"a law - 1975
And to wrap up the first day of #smashingconf, Chris Kolb with a great talk on complex design for stupid people.
... and we can announce our final three speakers:
@meyerweb.com the father of CSS testing and documenting
@jakearchibald.com (Mozilla), returning to conferences near you
@csswizardry.com, who's going to talk about his recent article about containment
See you there!
cssday.nl
Nick introducing his talk
AI: personalized. Writer: Personal
AI: digital world. Writer: Real world
AI: powerful. Writer: thoughtful
Nick DiLallo is up next at #smashingconf, with a great talk on UX writing for AI interfaces
Manuel on the stage with the title of his talk, 19.5 things you didn't know about accessibility in HTML and CSS on the screen.
Manuel explaining popovers
A slide looking at the new geolocation element
Manuel explaining how to add alt text to pseudo elements
And now @matuzo.at is on stage at #smashingconf, with 19.5 things we don't know about accessibility in html and CSS.
The two of us taking a selfie on stage with the audience in the back.
@kevinpowell.co and I are on stage at #smashingconf Amsterdam to talk about CSS, HTML, and accessibility 🔥 😺
TJ introducing his talk AI without the Chaos
Slide showing the lifecycle of designing and creating components
Slide looking at the pain we already know, mentioning broken handoffs, siloed tooling, lost metadata, designers and developers not understanding one another
The Figma Lint plugin finding hard coded border radius values
Next up is @tpitre.bsky.social diving into a pretty cool, AI-powered Figma Linting plugin to help find and fix hard coded values and other issues, and some cool stuff you can do with Figma's MCP
#smashingconf
Thanks so much Manuel! Had a blast chatting as well. And now we get to do it again, but for an audience 😅
Coming to Firefox 151! 🥳
Christine on the stage
Christine talking a out the differences between flex and grid
Christine showing the newer Grid feature in Figma
Christine showing how we can provide more context in Figma, using the component configuration description to provide details, like using grid, and breakpoint info and sizes
First talk of the day, with @christinevallaure.bsky.social trying to help bridge the divide between devs and designers
#smashingconf
Giant screen with Welcome! And the smashing cat eating some cheese
About to kick off day 1 of #SmashingConf!
Wonder if they were inspired by Tron as well 😅
Selfie as I stand in front of a canal in Amsterdam
Hello Amsterdam!
The left panel is titled AI - MASTER OF ENGINE & CREATION and features a sophisticated, human-like android robot with detailed internal circuits and a glowing brain. Floating text around the robot says - REWRITING GAME ENGINES with a small video screen, GENERATING REALISTIC VIDEO/IMAGES with code on a screen, and CONFIDENCE - 100%. The right panel is titled AI - FRONT-END CSS FAIL and shows a cluttered desk with a distressed small robot next to a frustrated human man pointing aggressively at a computer screen. The computer displays a chaotic webpage full of broken layout elements and a giant black void called a gaping hole. The small robot has a speech bubble that says - I'M DONE! THE FEATURE IS COMPLETE. Floating text phrases on the right side are - BESPOKE INTERACTION NIGHTMARE, CSS IS HARD, YOU'RE ABSOLUTELY RIGHT, CAN'T RENDER, LLM CAN'T MATH. The human has a mug with </> and nerdy.dev written on it.
Why does AI suck at front-end?
🗑️ trained on garbage
👀 it can't see
❓ it doesn't know why
🏞️ no environmental control
there's no human v20.2.1 to target. we're a LLM combinatorial explosion
⤷ nerdy.dev/why-ai-sucks...