7 ms·

The "most hated" CSS feature: cos() and sin()

101 points by rapawel 1y ago

deleted 1y ago
[deleted]
swyx 1y ago
oh wow first css tricks i've seen post acquisition what's up with the magazine in general... is it doing ok?
- spartanatreyu 1y ago
  Post-acquisition the Digital Ocean ran it for a little while with the same staff, then they let a whole bunch of people go (both digital ocean and css-tricks staff). 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-tricks-thing/ 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.
  - swyx 1y ago
    great recap!
drivingmenuts 1y ago
Is it just me or did none of the examples show up in Codepen? The code was there, but nothing showed in the display.
- zamadatix 1y ago
  Hmm, worked for me on macOS, Linux, and Windows across Chrome/Firefox/Safari.
- muzani 1y ago
  It didn't work for me the first time I opened it, but did after the second.
tasty_freeze 1y ago
I can't wait for the LLM() function to drop. 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." ) }
- deleted 1y ago
  [deleted]
- falcor84 1y ago
  I actually am really looking forward to a future where we have better tooling for a true "user agent" that knows my preferences and can style every page automatically just ust the way I like it (and letting me override anything by asking it once and having it remember). I'm so tired of UX designers choosing things for me assuming I'm a 5-year old.
  - ponooqjoqo 1y ago
    It seems far more likely that we'll end up in a state where you won't be able to override CSS at all. You'll be allowed to use only the most modern version of Google Chrome because all the websites will simply require a private auth key that only Chrome possesses, and commands like cURL will no longer function properly. The devtools console will be locked behind a key that you must petition Google to get, and if you use it for anything other than what they want, your permissions will be revoked without further recourse.
    - notpushkin 1y ago
      It’s a very sad future, but totally plausible at this point. We’ve got to fight this.
    - politelemon 1y ago
      I've had similar thoughts but replacing Google with Apple who I could easily seeing doing parts of this. They have the platform stranglehold and abusive history to support the behaviour and current browser "enforcement", with little to nothing in the way of consequences.
recursive 1y ago
This seems like the type of thing that I'd want to like. But the necessity of inline assigning the `--i` CSS variables to each element bothers me. I have to use some template system or manually keep these variables in sync in my markup. Doing those things seems worse than doing this kind of layout arithmetic in javascript, loathe though I am to admit it.
- mhink 1y ago
  He does mention at one point that sometime soon it won't be necessary: > 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/ https://css-tricks.com/almanac/functions/s/sibling-index/, which is pretty nifty honestly.
- zamadatix 1y ago
  Inlining isn't necessarily a requirement for how it's used here. E.g. you could put something like: .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.
- Theodores 1y ago
  Agreed. 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.
deleted 1y ago
[deleted]
Sohcahtoa82 1y ago
Surprises me when people hate on trigonometry. I enjoyed trig in high school so much that I made it my internet alias.
- cratermoon 1y ago
  I find it conceptually cool, but I struggled in school with learning the identities, memorization being one of my weak areas.
  - Sohcahtoa82 1y ago
    If you know your trig well enough, you can derive the identities. For example, knowing that cosine and sine are the exact same wave, just 90 degrees out of phase, it's trivial to know that sin(angle) = cos(angle + 90) cos(a)^2 + sin(a)^2 = 1 is easy to show, too. If you use a=0, it's trivial. But try using 45 degrees. It turns into (sqrt(2)/2)^2 + (sqrt(2)/2)^2 which simplifies to 0.5 + 0.5 = 1. Many of the others can be derived by just manipulating the Law of Sines or Law of Cosines. Fun fact: The Pythagorean Theorem is actually just a special case of the Law of Cosines: c^2 = a^2 + b^2 - 2*a*b*cos(C) Recall that in the Law of Cosines as I've written it, the lowercase letters are the sides, and the large C is the angle opposite that side. So if you choose your hypotenuse to be c, then the opposite angle, C, is 90 degrees. cos(90) is 0, so that whole last term gets cancelled out and you're left with the equation known as the Pythagorean Theorem. I really wasn't kidding when I said I enjoyed trig.
    - Sohcahtoa82 1y ago
      Too late to edit now, but wanted to add a note: Knowing that cos(45) == sqrt(2)/2 seems like something you would need to memorize, but if you just draw an isosceles right triangle with sides equal to 1 and use the Pythagorean Theorem you'll find that the hypotenuse is sqrt(2)/2.
- untilted 1y ago
  Obligatory xkcd: https://xkcd.com/809/ https://xkcd.com/809/
lyu07282 1y ago
[flagged]
raldi 1y ago
Mods, new title suggestion: "CSS's cos() and sin() features"
- geor9e 1y ago
  I would wholeheartedly support the mods rewriting every clickbait headline on HN (there are just so many…)
  - dairylee 1y ago
    But it's not really a clickbait title. If it was clickbait it wouldn't say what the 'most hated' css feature is to bait you into clicking it to find out what the feature is. > The “Most Hated” CSS Feature > The “Most Hated” CSS Feature: cos() and sin()
    - ghtbircshotbe 1y ago
      It's still baiting you - why are they hated? The article is a good presentation and tutorial on this particular feature which is itself interesting, but the current title could mean many different things and isn't very clear. Is it a list of hated features? Is it a rant about CSS?
egypturnash 1y ago
brb gonna see how much of DOC’s Demons Are Forever can be collapsed into simple css animations (https://m.youtube.com/watch?v=3tSI8gw_yUQ https://m.youtube.com/watch?v=3tSI8gw_yUQ)
alekratz 1y ago
When I loaded up the page, something like 5 empty HTML files downloaded automatically, did this happen to anyone else? Firefox Linux
- F3nd0 1y ago
  No such incident here. Firefox on GNU. Also using uBlock Origin, though.
lifthrasiir 1y ago
CSS trig functions, combined with mod() and friends, effectively enable seeded random noise functions as they did in shaders. Interesting times.
- bawolff 1y ago
  They are also planning to add random() although no browsers support it yet. filter also had some randomness support (via svg <feTurbulance>
stevage 1y ago
It's a shame that sin and cos get lumped in with all the other trigonometry that you don't need to know, because the two basic formulas are incredibly useful and easy to learn: x = distance * cos(angle) y = distance * sin(angle) Screw the rest. I learnt these as a kid writing a 2D computer game years before coming across them in high school maths.
- ViscountPenguin 1y ago
  Nah, the rest is pretty great aswell. Lest you go to gamedev hell by saying you dislike atan2
regnull 1y ago
"What I find funny about cos() and sin()— and also why I think there is confusion around them — is the many ways we can describe them. We don’t have to look too hard. A quick glance at this Wikipedia page has an eye-watering number of super nuanced definitions." I don't even know how to begin parsing this sentence.
- haskellshill 1y ago
  That's three sentences, none of which are particularly difficult to parse
etbebl 1y ago
It's crazy to me that a significant number of people know "cos" and "sin" primarily though CSS. Is that really what this is implying? Or maybe people just find them hard in general, but it seems odd to think of them as features you dislike, rather than attributing the dislike to the underlying math, if you've ever taken a trig class before.
- zamadatix 1y ago
  I take it as the second assumption, as in people who think "CSS has already gotten too complex, now this complicated trig shit is part of it too?". Keep in mind it's only 9.1%, or 1 in 11, that actually had a "negative opinion" of it. This makes the phrasing/focus on "hated" seem a bit forced.
LinAGKar 1y ago
So why do people hate CSS's trigonometry implementation?
chuckadams 1y ago
I would have thought the most-hated feature would be the `float` property. I guess alternatives have been around long enough that people just ignore it rather than nurture an eternal smouldering hatred for it.
- thoughtpalette 1y ago
  Personally have not seen a float used in the wild since flex-box gained traction. And a simple .clear-float utility class usually addressed the most common float issue.

101 points by rapawel 1y ago

deleted 1y ago

[deleted]

swyx 1y ago

oh wow first css tricks i've seen post acquisition what's up with the magazine in general... is it doing ok?

spartanatreyu 1y ago
Post-acquisition the Digital Ocean ran it for a little while with the same staff, then they let a whole bunch of people go (both digital ocean and css-tricks staff). 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-tricks-thing/ 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.
- swyx 1y ago
  great recap!

drivingmenuts 1y ago

Is it just me or did none of the examples show up in Codepen? The code was there, but nothing showed in the display.

zamadatix 1y ago
Hmm, worked for me on macOS, Linux, and Windows across Chrome/Firefox/Safari.
muzani 1y ago
It didn't work for me the first time I opened it, but did after the second.

tasty_freeze 1y ago

I can't wait for the LLM() function to drop. 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." ) }

deleted 1y ago
[deleted]
falcor84 1y ago
I actually am really looking forward to a future where we have better tooling for a true "user agent" that knows my preferences and can style every page automatically just ust the way I like it (and letting me override anything by asking it once and having it remember). I'm so tired of UX designers choosing things for me assuming I'm a 5-year old.
- ponooqjoqo 1y ago
  It seems far more likely that we'll end up in a state where you won't be able to override CSS at all. You'll be allowed to use only the most modern version of Google Chrome because all the websites will simply require a private auth key that only Chrome possesses, and commands like cURL will no longer function properly. The devtools console will be locked behind a key that you must petition Google to get, and if you use it for anything other than what they want, your permissions will be revoked without further recourse.
  - notpushkin 1y ago
    It’s a very sad future, but totally plausible at this point. We’ve got to fight this.
  - politelemon 1y ago
    I've had similar thoughts but replacing Google with Apple who I could easily seeing doing parts of this. They have the platform stranglehold and abusive history to support the behaviour and current browser "enforcement", with little to nothing in the way of consequences.

recursive 1y ago

This seems like the type of thing that I'd want to like. But the necessity of inline assigning the `--i` CSS variables to each element bothers me. I have to use some template system or manually keep these variables in sync in my markup. Doing those things seems worse than doing this kind of layout arithmetic in javascript, loathe though I am to admit it.

mhink 1y ago
He does mention at one point that sometime soon it won't be necessary: > 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/ https://css-tricks.com/almanac/functions/s/sibling-index/, which is pretty nifty honestly.
zamadatix 1y ago
Inlining isn't necessarily a requirement for how it's used here. E.g. you could put something like: .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.
Theodores 1y ago
Agreed. 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.

deleted 1y ago

[deleted]

Sohcahtoa82 1y ago

Surprises me when people hate on trigonometry. I enjoyed trig in high school so much that I made it my internet alias.

cratermoon 1y ago
I find it conceptually cool, but I struggled in school with learning the identities, memorization being one of my weak areas.
- Sohcahtoa82 1y ago
  If you know your trig well enough, you can derive the identities. For example, knowing that cosine and sine are the exact same wave, just 90 degrees out of phase, it's trivial to know that sin(angle) = cos(angle + 90) cos(a)^2 + sin(a)^2 = 1 is easy to show, too. If you use a=0, it's trivial. But try using 45 degrees. It turns into (sqrt(2)/2)^2 + (sqrt(2)/2)^2 which simplifies to 0.5 + 0.5 = 1. Many of the others can be derived by just manipulating the Law of Sines or Law of Cosines. Fun fact: The Pythagorean Theorem is actually just a special case of the Law of Cosines: c^2 = a^2 + b^2 - 2*a*b*cos(C) Recall that in the Law of Cosines as I've written it, the lowercase letters are the sides, and the large C is the angle opposite that side. So if you choose your hypotenuse to be c, then the opposite angle, C, is 90 degrees. cos(90) is 0, so that whole last term gets cancelled out and you're left with the equation known as the Pythagorean Theorem. I really wasn't kidding when I said I enjoyed trig.
  - Sohcahtoa82 1y ago
    Too late to edit now, but wanted to add a note: Knowing that cos(45) == sqrt(2)/2 seems like something you would need to memorize, but if you just draw an isosceles right triangle with sides equal to 1 and use the Pythagorean Theorem you'll find that the hypotenuse is sqrt(2)/2.
untilted 1y ago
Obligatory xkcd: https://xkcd.com/809/ https://xkcd.com/809/

lyu07282 1y ago

[flagged]

raldi 1y ago

Mods, new title suggestion: "CSS's cos() and sin() features"

geor9e 1y ago
I would wholeheartedly support the mods rewriting every clickbait headline on HN (there are just so many…)
- dairylee 1y ago
  But it's not really a clickbait title. If it was clickbait it wouldn't say what the 'most hated' css feature is to bait you into clicking it to find out what the feature is. > The “Most Hated” CSS Feature > The “Most Hated” CSS Feature: cos() and sin()
  - ghtbircshotbe 1y ago
    It's still baiting you - why are they hated? The article is a good presentation and tutorial on this particular feature which is itself interesting, but the current title could mean many different things and isn't very clear. Is it a list of hated features? Is it a rant about CSS?

egypturnash 1y ago

brb gonna see how much of DOC’s Demons Are Forever can be collapsed into simple css animations (https://m.youtube.com/watch?v=3tSI8gw_yUQ https://m.youtube.com/watch?v=3tSI8gw_yUQ)

alekratz 1y ago

When I loaded up the page, something like 5 empty HTML files downloaded automatically, did this happen to anyone else? Firefox Linux

F3nd0 1y ago
No such incident here. Firefox on GNU. Also using uBlock Origin, though.

lifthrasiir 1y ago

CSS trig functions, combined with mod() and friends, effectively enable seeded random noise functions as they did in shaders. Interesting times.

bawolff 1y ago
They are also planning to add random() although no browsers support it yet. filter also had some randomness support (via svg <feTurbulance>

stevage 1y ago

It's a shame that sin and cos get lumped in with all the other trigonometry that you don't need to know, because the two basic formulas are incredibly useful and easy to learn: x = distance * cos(angle) y = distance * sin(angle) Screw the rest. I learnt these as a kid writing a 2D computer game years before coming across them in high school maths.

ViscountPenguin 1y ago
Nah, the rest is pretty great aswell. Lest you go to gamedev hell by saying you dislike atan2

regnull 1y ago

"What I find funny about cos() and sin()— and also why I think there is confusion around them — is the many ways we can describe them. We don’t have to look too hard. A quick glance at this Wikipedia page has an eye-watering number of super nuanced definitions." I don't even know how to begin parsing this sentence.

haskellshill 1y ago
That's three sentences, none of which are particularly difficult to parse

etbebl 1y ago

It's crazy to me that a significant number of people know "cos" and "sin" primarily though CSS. Is that really what this is implying? Or maybe people just find them hard in general, but it seems odd to think of them as features you dislike, rather than attributing the dislike to the underlying math, if you've ever taken a trig class before.

zamadatix 1y ago
I take it as the second assumption, as in people who think "CSS has already gotten too complex, now this complicated trig shit is part of it too?". Keep in mind it's only 9.1%, or 1 in 11, that actually had a "negative opinion" of it. This makes the phrasing/focus on "hated" seem a bit forced.

LinAGKar 1y ago

So why do people hate CSS's trigonometry implementation?

chuckadams 1y ago

I would have thought the most-hated feature would be the `float` property. I guess alternatives have been around long enough that people just ignore it rather than nurture an eternal smouldering hatred for it.

thoughtpalette 1y ago
Personally have not seen a float used in the wild since flex-box gained traction. And a simple .clear-float utility class usually addressed the most common float issue.