body { LLM(
"You are an expert web designer, completely fluent in CSS.
Create styling for this commerce website which is both
eye-catching yet professional looking, while being engaging.
Ensure it conforms to accessibility standards."
) }
> Note: This step will become much easier and concise when the sibling-index() and sibling-count() functions gain support (and they’re really neat). I’m hardcoding the indexes with inline CSS variables in the meantime.
The inline links there go to https://css-tricks.com/almanac/functions/s/sibling-index/, which is pretty nifty honestly.
.container:nth-child(1) {--i: 1}
.container:nth-child(2) {--i: 2}
...
In your CSS. Still not all that ideal given you need to ensure you have enough entries for all the entries you might have... but at least a more dynamic and self-contained option until the `sibling-index()` feature they mention roles out.I just checked with some code that I wrote a while back to rotate a faux-3D pyramid, to see how I did it. The trigonometry was the easy part, it was the backface culling that was the hard part. Anyway, I decorated my elements with CSS variables in script and used lots of Math.sin/cos/tan. Also present were lots of radian conversion things and the fun that goes with animating things the 'right way'. Basically oodles of extra stuff that took me the best part of a week to do, to result in something that memory leaks if left running for a few hours.
Now I have seen this article, I might just have to mix and match JS and CSS, so I build out the elements in code and add the CSS variables to them, for everything else to be done in CSS. I will obviously need an intersection observer to trigger the CSS rather than my JS, and so it goes on!
Either way, the trigonometry is the easy part, fixing that memory leak the hard part, but CSS is the way to go because that will work perfectly, unlike with JS.
Oh and I guess negative b plus or minus b squared something something four a c over two a. I think there’s a square root to shove most of that into.
"Spitfire or Hurricane come and hurry to our aid"
This works for me as the order of the functions matches the order shown on my trusty FX82A. Your version is kind of messed up.
I am giving this AI thing a wide birth, however, could we ask a LLM to invent a new aide memoire for this? We have got the silent generation and the boomers covered, but is there something we can do for kids today? Maybe it references Cinnamoroll, Hello Kitty or Octonauts characters that actual kids know, without it being ultra-violent.
I guess this is the version we use in Australia.
Translation: I'm not handsome, if I were handsome, Tipah (our principal) would like me"
25 years ago and I still remember it clearly. Also it was middle school education on how to solve problems in a different space; this one solving math in a second language space lol
swyx•1h ago
what's up with the magazine in general... is it doing ok?
spartanatreyu•19m ago
The css-tricks website was basically dormant for a few years.
Chris (the original creator of css-tricks) sick of seeing his creation stagnate tried to get Digital Ocean to get the website going again but it looked like Digital Ocean didn't know enough about the site to resume posting.
At some point the website's editor (Geoff) who had been let go as part of the layoff came back to work on the website and their was much rejoicing.
---
You can read more about it here: https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-...
---
CSS-trick's content had a bit rocky at the start of its comeback, but it's feels much better now than it did when it first resumed.
The vibe is a little bit different now, but I think that's because so many webdev writers are experimenting and writing in the open on mastodon before posting on their own blogs and larger platforms like css-tricks.
We didn't get as much of a peak behind the curtain before.