A snapshot of the video containing memories made for Lucy (suffers amnesia) in 51st dates she can watch each morning

Agent soulmd files feeling a little like

claudialnathan's Bracket | March Mad CSS Check out claudialnathan's bracket picks!

Obsessed with this roster and the pickings are next level… hard one to decide but let’s gooo @nerdy.dev FTW!!

madcss.com/bracket/clau...

the sheer number of web apps I've not paid for bc I couldn't do this—let the users make these decisions or they'll soon be generating their own instead

thought I'd test doing a prototype build in @v0.dev pretty impressed! needs some aesthetic tweaks but overall fast and some very nice .tsx bts

been experimenting with UI for genAI—a progressive disclosure approach to create a separation of concerns (where we decompose the build into a sequence of narrow, high-context steps) feels like a step in the right direction

built with @shadcn.com and some custom tweaking

It also works very nicely for icons, and seems like it could be a quasi workaround for text-box-edge and trim (until they become baseline) in some use cases? keen to hear anyone else's pedantic thoughts or css typography hacks

cap gives us a stable vertical anchor, one we can see and (at least to me) is a good gauge of how it's going to scale across screen and font sizes. It's not the most objectively pretty one (1cap on a paragraph is a nono) but when you find the right value it seems to have much better visual parity.

ch — the width of the '0' (zero) glyph, neater than expected given its an hz unit
ex — the height of a lowercase 'x', isn't that reliable because x height varies pretty significantly across fonts
cap — the distance from the baseline to the top of flat capital letters (like H or I)

Type designers bake it in to prevent accents and descenders from colliding, which ensures legibility of that particular font but doesn't bode well where we want values to work across multiple families. So em is box-model. But units like ch, ex and cap are 'glyph-model'

Line-height is the web version of print's 'leading height', but they actually behave differently. When we use em-based values the browser uses the line-box not the glypha, which is a little invisible block around the text we can't see, creating a kind of padding (called internal leading)

I was messing around with this earlier and decided to try a few literal values that use glyph-based calcs, and was pleasantly surprised by the results the 'cap' unit was giving me

I've been using calc(1em + 0.45rem) which is pretty neat, but felt a little like over-engineering for the sake of being fancy? unitless objectively make the most sense bc inheritance and they give us nice rhythm out of the box, but it varies a lot across different font families

Visual representation of line-heights for 1, 1ex, 1ch and 1cap CSS units

I'm big on fluid #CSS but I'm also kinda lazy and want 1 value to do 100 things. I find the visual parity of relative units in typography when scaling can be a little unpredictable. It's a small pedantic thing but I'm lazy AND pedantic sue me see comments (sorry for format I'm thinking out loud)

Brand New Layouts with CSS Subgrid • Josh W. Comeau Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful conven...

✨ I just published a new post, and it’s all about one of the most mind-blowing new CSS features: subgrid.

Honestly, when I first heard about subgrid, I figured it’d be a convenient little utility. I had no idea it would solve one of the most longstanding issues I’ve had with CSS. 😮

Check it out:

Experimenting with new & old CSS in Webflow and have made a cloneable that includes animating the dialog with starting-style & allow-discrete, the light-dark() function (with a workaround for a bug in Webflow’s compiler) and more!

Site: css-modal.webflow.io
Cloneable: webflow.com/made-in-webf...

Joy for JavaScript Developers Grab both of my flagship courses — CSS for JavaScript Developers and The Joy of React — in one delightful bundle 😄

🎈 The Black Friday sale of my two flagship courses has officially begun!

The best deal is on the “Joy for JavaScript Developers” bundle, which is a whopping $500 off during this sale. 😄

I’m also running sales on each course individually, they’re both ~40% off. ✨

More info in-thread. 🧵

Yes the forums are gold! Should’ve gone there first 😂

—included some style references for color and photography styles
—music credits to Rockot on Pixabay, check out his work it's 💯

"An abstract shot of a man in a suit falling through the sky with an electric guitar. It feels like an iconic Nike shot or old 80s Vogue campaign. 35mm grainy film photography, the man is abstracted by motion and light. The shot is ambient and suave, colors are muted but clear and bright."

There's a lot of 'prompt templates' and guides out there, but I've found the less I try prompt like everyone else, the more interesting the output is. Have dropped one below from the video, message me if you want to see others or workshop around this idea with me!

I feel like with AI the work stays mine, the decisions stay mine, but the thinking and iteration is faster, sharper, more willing to explore dead ends because the cost of exploration drops to zero.

Experimenting in web design and development often costs time and creative freedom. We have to build something to know if it works—specify all the details that create constraints before we really know what we're trying to do.

I recognize there's a lot of mixed opinions about Al in creative fields, but the more I tinker with it the more it starts feeling like how creativity feels offline.

Decided to really dive into creative asset generation with Midjourney for some spec work for the latest Webflow x Contra challenge and am pretty impressed with how quickly you can get output close to what you were imagining—(see comments)

#WebflowChallenge #Webflow #Contra #Midjourney

Decided to start posting all my front-end flops for anyone else out there still learning 👉 took me ~2 full days, ~1b rage-googles, ~1b fights with LLMs (plural) to figure out this scroll-attached svg path with CSS + JS.

Turns out I could've just.... drawSVG: true 🫠 ty @gsap-greensock.bsky.social

Yes! I use css transitions and set different styles for different html elements when I’m procrastinating lol

css code using where, not, wildcard, child and containing selectors with container query index inside of clamp.

Modern CSS is cool and all but I've gotten to a point where if I break concentration everything becomes an ancient dialect no one's ever seen before 🫠

#css #moderncss #css4 #frontend #webdesign #webdev #fluidcss #fluidresponsive #containerqueries

CSSWG are so real for this one wiki.csswg.org/ideas/mistakes

Are we slapping just another copilot on this or can we consider utilizing LLMs ourselves to improve the speed, quality and efficacy of the product we promised our users

Thank u it’s nice to see some that are actually alive

💐