5 ms·

I'm not a web developer, but I've built toy websites (without frameworks) and can do basic things in a few web frameworks. I remember when CSS was "invented".

• ckocagil 2y ago
  Performance. JS would need to run 60 times a second without hiccups. But JS is single-threaded, therefore any time something clogs your main thread you'll skip a frame. Plus, as incredible as modern JS engines are they're still not as efficient as the native code, which leads to extra CPU usage and that spells trouble for battery life.
  • ativzzz 2y ago
    The way animations are done in react native for instance, is that you use JS to define the animation and send it to the native code which actually executes it. JS should just do the same in the browser instead of relying on an arcane language not designed for this
    • Arisaka1 2y ago
      Whether a language is arcane or not depends on the levels of comfort one is familiar with the language, or how approximately familiar someone is with similar languages.
    • ARCarr 2y ago
      Good news! You can with the Web Animations API.
      • MisterKent 2y ago
        Which are CSS animations underneath
        • nfw2 2y ago
          Yes, but you define them with Javascript rather than in CSS which is a key difference since the syntax is more intuitive for some (myself included)
          • chefandy 2y ago
            So since the original comment was questioning the necessity of animations in CSS, and JS is essentially using CSS animations for many things, I'd say the answer is yes. It's also a great way for UI designers to use subtle movement to hint at actions/status/next steps/etc without having to execute any JavaScript. When you've got a purely visual task, I'd say involving a general purpose programming tool is the unnecessary part— like using sed or the like vs opening up a repl in Python or whatever.
        • ARCarr 2y ago
          Shhh, don't tell him that.
        • mattgperry 2y ago
          No - CSS and JavaScript are two ways of defining the same thing, an animation. Safari runs its accelerated animations with CoreAnimation - is CoreAnimation a CSS animation?
      • armandososa 2y ago
        Just recently I had to code a little but complex animation and I ended up using the web animations API. It's nice, it was a lot less code than the css counterpart. But, if I* have to write this same animation in two years and @property is widely available, I'll reach up for that first. *To be honest, it will be 100% an LLM that writes it for me.
    • MisterKent 2y ago
      JS animation libraries let you declaratively define and hook into CSS animations. "Arcane language" not only is CSS one of the core languages of the web, but also if you find this arcane I wonder what you think of the "native" code that react native is generating for the animations. CSS as an animation engine is completely acceptable, and it's limitations (like the one in TFA) are slowly being pushed back.
      • Jerrrrrrry 2y ago
        >"Arcane language" >"native" code that react native is generating for the animations. >CSS as an animation engine is completely acceptable, and it's limitation >TFA No way that pun is intended, but CSS is kinda a Tunable/Timed Finite Automaton; but being of a lower class of technically-capable expression than Javacscript, which is of a higher set of class of automata.
    • taco_emoji 2y ago
      It explicitly is designed for this, what are you talking about
  • nitwit005 2y ago
    Also just moving problems to the graphics card. The common rotate, transform, and so on, are all classic graphics hardware tasks.
    • shepherdjerred 2y ago
      You still need the CPU to tell the GPU what to do
      • colordrops 2y ago
        Right, so you have simple statically defined optimized routines written in c/c++ calling the GPU, like any high performance graphics engine.
• foresto 2y ago
  > Can't this be done with Javascript? I welcome opportunities to avoid javascript in my sites, even if it's more work for me. It makes life easy for visitors who prefer to disable javascript, thereby avoiding many of the exploits, trackers, etc. that plague the web today. By the same token, I appreciate sites that do not require javascript.
  • outlore 2y ago
    Is there a future where CSS’ expanding surface area leads to exploits and tracking? For instance, some time ago I saw an article about how font face rules can be used to fingerprint users
    • Jerrrrrrry 2y ago
      https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and... They try to sandbox it. There are more clever ways now. Like... everything you interact with is a binary search into a projection of your (2^n-interaction) "guess"-ed/history. If you interact with it, then it is assumed that you can see it. Even detecting if the room is generally lit or not via the Ambient Light API can be paired with bright and dark elements to ping flashes off your face, in a dark room, to read whether or not elements were of that certain color. But lets scrap :Visited and use arcane browser implementations and user behaviors; even something as innocuous as zooming slightly in or out is a session-persistent signal. The browsers explicit and even _inferred_ zoom level can be leveraged. A few irrational numbers and difference in spec implementations and your zoom level on Compromised_Site_A can identify you exactly from Compromised_Site_B even without Javascript. But let's reset zoom between domains. Easy? sure. But something still has to get painted to the page, like images, that could be cached....depending on how long they have been visited, and from what domain, and from what order. And the timing between all those are almost certainly unique to few, and sensitive to all. If you load a thumbnail from Bad_site_a within 100ms in a country that blocked the original resource....thats a paddlin. Those are just the first few, I could go on.
      • 2y ago
• bjarneh 2y ago
  You said what we were all thinking. There was a lot of debate when CSS introduced these animation properties; I didn't have too strong opinions about it. But is has morphed into something rather complex...
  • EugeneOZ 2y ago
    No, it's not what we all are thinking. Moving work from JS to the browser’s native, polished, tested implementation with optimized performance is the right thing to do.
    • tgv 2y ago
      It does add another hurdle for Servo and Ladybird, probably intentionally.
      • half-kh-hacker 2y ago
        It's needlessly conspiratorial to ascribe intention here, especially when the Servo community have already expressed interest in supporting upcoming (difficult!) standards like CSSOM
      • marcellus23 2y ago
        Are you seriously suggesting that the primary motivation for this feature to be added to CSS is to make life harder for new browser engines?
        • tgv 2y ago
          The thought had crossed my mind, yes. Do you think Google does anything from the kindness of their hearts, without considering Chrome's position? It's one of their most valuable assets.
    • bjarneh 2y ago
      > Moving work from JS to the browser’s native, polished, tested implementation with optimized performance is the right thing to do. Of course, not disagreeing with that. It is just done in a way that is complex and cumbersome IMO. CSS is often handled by people with very little programming experience as well. I have worked for companies which gave me HTML templates, and CSS files, and my job as the developer was basically do add dynamic behavior by fetching stuff from their DB and looping over some data here and there to fill out lists/tables with actual content. To me that was very pleasant; but the guy handing me the CSS and HTML templates, had zero programming experience. I think webdesign already is a copy-n-paste bonanza, where people find something they like, and copy it; if it gets very complicated as well. Developers are often last resort in terms of finding out why something does not work, and I fear complicated CSS after a few rounds of copy-n-paste is going painful to unwrap.
• valbis 2y ago
  Needing a full feature programming language for things purely related to the page aesthetic is not a great idea. The reasoning: some hosting platforms allow you to personalize your personal page changing the HTML and CSS bits, but not the JS - for security reason, obviously. Itch.io is an exmaple of that, where you can personalize your game and profile. By using CSS animations I can create cool effects without any of the security concern that allowing access to JS gives me. It makes sense and it's nice to be able to do so.
  • Cthulhu_ 2y ago
    Counterpoint; anywhere but the web, using the same application programming language to define styling and visuals is normal. I get your point though, JS is still an all-or-nothing thing in most use cases.
• azangru 2y ago
  > I remember when CSS was "invented". After a small amount of time, I could reasonably fit all of it in my head without needing to look anything up. I looked at the CSS for the first codepen example, and it looks like gibberish to me. Should we really have a mini animations programming language in the styling system? I don't understand this sentiment. If you are not a web developer, and in particular not a frontend web developer, then you probably aren't building html elements with these fancy effects. And if so, then why does it matter what advanced things CSS is capable of? > Can't this be done with Javascript? You can totally do this with javascript. You can plop in a canvas, and use webgl to program this effect on the GPU, like a real graphics programmer. You would have to recreate all accessibility features of the html button on your own. Is it going to be easier? I doubt it. But you certainly can.
  • zerkten 2y ago
    You aren't the only one thinking this. The surface area and possibilities with CSS amaze me as one of those web developers who had a solid understanding years ago and have returned it recently. The sentiment is a response to feeling overwhelmed and a sense of reduced competence. You can accept it and learn or rail against it. The latter often happens for a while first. With web development, I've always thought that there is an element missing for many devs: design acumen and appreciation (I need better terms.) Just look at the site linked from this post and you see an attractive personal site. Most devs struggle with these aesthetic elements. Desktop development is fairly constrained. As an example, devs can make good or bad decisions around use of the toolkit, but it's less of an open canvas than the web. A lot of the expanded scope of CSS can be more easily exploited if you appreciate the design aspects or have designers creating some target design for you. Putting these capabilities in front of devs without those elements doesn't lead to much success which is another factor driving sentiment.
    • ficklepickle 2y ago
      It's like designers are the very first corner to cut. Or the dev is expected to also be a designer. It's a very different skill set. I'll build your mock-ups, or copy the look and feel of something else, but I can't design my way out of a paper bag. My brain just doesn't seem to work that way.
• yungporko 2y ago
  welcome to modern web dev in a nutshell
• whostolemyhat 2y ago
  Right, so you don't really understand the problem area and don't know the syntax, so think that something that you can't immediately understand must be a negative change.
  • cyanydeez 2y ago
    Reminds me of the rust into linux debacl3
• hellohello2 2y ago
  What you will be animating are styles. The programmatic aspects of animation are fairly straightforward. It just makes sense for it to be in CSS no?
• mrzimmerman 2y ago
  There are still great use cases for using JS to handle animations instead of CSS, such as creating novel, dynamic images or 3D models in a canvas element (particularly when you want it to be interactive in anyway) or to animate SVGs. My understanding of CSS animations is that they are particularly optimized to run more efficiently and it’s also helpful that it runs outside of the JS runtime, which frees it from any errors in the JS or it adding to the CPU load that may already be chugging along on the page. Additionally (and this is old info so it may be outdated), using things like `translate3D()` instead of just `translate()` in your CSS will engage the GPU to handle whatever your instructions are, making everything smoother and further unburdening the CPU. This is from my own memory of things I read more than 10 years ago, so it’s possible that even more CSS functions use the GPU at this point, but I’ve not looked it up since. Anyway, tl;dr: there are performance benefits to using CSS instead of JS for animations.
• consultSKI 2y ago
  Great feedback IMNSHO. But the key is CSS (cascading STYLE sheets)... You and I are NOT designers if I may be so bold. In 1996 I was one of about 100 people on new and MAJOR website/application build. From scratch. My role: Billing Lead. As a "full stack dev" only my eCommerce insights were needed from me. It is called FOCUS. As a StartupBus alumnus of three treks the model was brilliant: Build teams from three skill sets: Devs, Designers, and BizDevs. Focus. I love that the examples will not be gibberish to the designers of our day.