hackernews client

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

79 pointsposted 12 hours ago

50 Comments

tasty_freeze

10 hours 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."
   ) }

garbagepatch

3 hours ago

That's already the present. The result is just cached.

ww520

7 hours ago

That's what a LLM based template engine looks like.

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

8 hours 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.

politelemon

a minute 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.

notpushkin

7 hours ago

It’s a very sad future, but totally plausible at this point. We’ve got to fight this.

verandaguy

7 hours ago

Two counterpoints to this.

- A good designer will be able to produce a page whose looks are appropriately engaging, complementary to the content, unique, and easy on the eyes. For every abrasive CSS (or lack thereof) justfuckingusehtml.com, there's a masterpiece like acko.net, many of which just aren't in the mainstream.

- If everything ends up looking the same wouldn't that get... boring? I get the desire to avoid obnoxious design choices, but those obnoxious design choices are part of the web, and they should be embraced as part of the decision-making process about if and how you want to keep reading a site. A bit of friction is, IMO, a good thing when browsing the web. It's the minimum level of keeping the web an interactive medium rather than just a content pipe.

That said, you do you. You're well within your rights to browse the web how you want, up to and including using automation to re-style sites with extreme prejudice.

dalmo3

6 hours ago

> asking it once and having it remember

Uhhh, that reminds me of the super duper helpful way YouTube automatically enables dubbing and/or subtitles based on the last video I watched, my browser language, my account language, where I am in the world, phase of the moon, the colour of my shirt...

dgfitz

9 hours ago

hallucinates ‘fluent’ and draws a net to catch eyes

Sohcahtoa82

9 hours ago

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

Waterluvian

9 hours ago

Did you learn it as “sign on highway, cozy at home, tan on arm”? That’s basically the only high school math that stuck with me.

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.

cameronh90

9 hours ago

I always thought sohcahtoa itself was quite memorable. Sounds like a war cry!

bombcar

9 hours ago

Or something those wordy math textbooks would have had - the Sohcahtoa Indians who dealt in triangles …

jcalvinowens

2 hours ago

It would get him fired today... but my trig teacher showed up to this lesson shirtless in a floor length native American headdress, and ran into class yelling "I am Chief SohCahToa! Never forget my name!!".

And by God, I never have. Thanks Mr. Wilkinson.

jihadjihad

7 hours ago

It sounded to me like something some colonists would carve into a fence, like CROATOAN.

SOHCAHTOA.

muzani

8 hours ago

We made this up in school: "saya tak hensem, kalau saya hensem, tentu Tipah suka" [opposite = tentang, adjacent = sebelah, cos = kos]

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

spartanatreyu

9 hours ago

I learned it as: Some old hags, can't always hide, their old age.

I guess this is the version we use in Australia.

NoboruWataya

8 hours ago

For us it was "Some officers have curly auburn hair 'til old age". Never seemed like a good mnemonic given that you have to shorten "until" to make it work and none of us had any idea what "auburn" was, but I still remember it 20 years later so...

rndmio

9 hours ago

In the UK it was “Attack Henry Cooper, outside his shop, on a Tuesday” no idea why the random violence but I never forgot it

gerdesj

8 hours ago

For me, UK, posh school, 1980s it was just "sohcahtoa" - easy enough to be its own mnemonic. No need to gild a lily.

Your order is cosine, sine, tangent - CST. A quick look at the other examples here seem to prefer SCT - as do I but only because that is what I was taught.

I also note your mnemonic is very different to the one I learned in having the function name last. So AHC vs CAH.

There is no right or wrong here but I'm sure we can agree that there are loads of mnemonics for these basic trig formulae and nationality isn't involved.

kimixa

22 minutes ago

UK, state school, late 90s/early 2000s, also just "sohcahtoa" - pronounced as a single word mostly. It never felt like it needed more than that?

Theodores

9 hours ago

Allegedly your grandpa, armed with his slide rule, has even more random violence:

"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.

cratermoon

7 hours ago

I find it conceptually cool, but I struggled in school with learning the identities, memorization being one of my weak areas.

memset

8 hours ago

Some Old Horse Caught Another Horse Taking Oats Away

rmonvfer

9 hours ago

This made my day. Great alias!

untilted

9 hours ago

Obligatory xkcd: https://xkcd.com/809/

chris_wot

9 hours ago

You think they hate trigonometry, then you tell them about radians and they really hate trigonometry. Which is... crazy really.

stevage

7 hours 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

7 hours ago

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

etbebl

3 hours 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.

LinAGKar

26 minutes ago

So why do people hate CSS's trigonometry implementation?

raldi

9 hours ago

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

geor9e

9 hours ago

I would wholeheartedly support the mods rewriting every clickbait headline on HN (there are just so many…)

recursive

10 hours 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

9 hours 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/, which is pretty nifty honestly.

zamadatix

9 hours 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

8 hours 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.

regnull

7 hours 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

3 hours ago

That's three sentences, none of which are particularly difficult to parse

lifthrasiir

8 hours ago

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

bawolff

7 hours ago

They are also planning to add random() although no browsers support it yet.

filter also had some randomness support (via svg <feTurbulance>

alekratz

8 hours ago

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

F3nd0

8 hours ago

No such incident here. Firefox on GNU. Also using uBlock Origin, though.

egypturnash

9 hours 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)

swyx

10 hours ago

oh wow first css tricks i've seen post acquisition

what's up with the magazine in general... is it doing ok?

spartanatreyu

9 hours 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-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.