Don't Use JS for That: Moving Features to CSS and HTML by Kilian Valkhof
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- If you've been building websites for a while you ""know"" that some things require JS and that's just the way it is. Turns out, spec writers and browser makers both are working hard to find common JS patterns and implementing them in CSS and HTML. Things like accordions, auto-suggest, smooth scrolling, dialogs are all available without JS. Looking a little ahead, things like parallax scrolling, styleable selects and component-dependent styling are expected to make their CSS-debut as well.
In this talk I go through common patterns, explain how they can be implemented in CSS and HTML, how that's better and what accessibility implications they have, both for features available today and feature available soon™️.
jsconfbp.com/s...
Kilian is a front-end developer with over 20 years of experience that switched from building websites to building apps to build websites with. He is interested in modern web development, desktop app development and new technologies, and regularly speaks about topics like responsive websites, design systems and Electron. Kilian is a frequent open source contributor.
![[DRIP] ‘Love, Maybe’ PREVIEW](http://i.ytimg.com/vi/U7hwHp95m1k/mqdefault.jpg)
This felt like a somewhat quick summary of the past 6 months of kevin powell YT, and i liked it !
how ? could you explain more
@@Ibrahim-ui1ns Kevin Powell is a famous CSS youtuber and most of the tips and tricks showcased in this talk have been already seen on his channel for the past 6months (up to probably a couple years ago to be honest). The biggest drawback of new CSS features usually being the browser support on one hand, learning a new way to do the same thing on the other hand. It's a brave fight, cuz yes it is a fight.
Except actually good.
True
Okay, the scroll driven animation being just three lines of css insted of three boattled files is purely art.
Uhh, can we stop with the scroll animations. Nobody but UI designers like them.
@@JohnSmith-op7ls forreal, its a website not a powerpoint lol
@@JohnSmith-op7ls i hate scroll smoothing
And it's not yet a standard API.
@@berthold64 I love it, makes it feel smooth to use lol no pun intended but I am tired only word I can think to use lol
I like how summary/details is still considered a new thing 10 years after it got released
Also and Popover API.
Those two are a brand new but all the browsers has implemented them since at least two or three years.
My students spilt the jaw on the floor when they learn to build a native with two lines of HTML and just 3 or 4 lines of CSS.
They came from YT tutorials with dozens of lines of HTML and another dozens of CSS.
My mistake: Previously I mentioned as an HTML tag but the correct form to name it is Popover API: a couple of techniques applied by attributes in any HTML tag to launch a or another HTML tag as a popover tag or toast tag.
Thanks to @Venyl for detecting and notifying me about my mistake. A mobile screen is not proper to write or respond this kind of messages.
CSS appearance property is fully supported in Safari only since version 15.4 (2022). It really doesn’t matter when new features are added to the standards. More important is when it becomes fully supported by the majority of browsers.
@@fernandolunadev there's no element I think, you meant the attribute?
@@fernandolunadevTakes a good 3 years or so to hit that 90% adoption that most are waiting on.
Bigger companies often want to see more like 98-99% for anything public facing.
Blame the W3C for not standardizing most of this stuff two decades ago when MS was getting hate for daring to go off the horribly limited standards because they actually wanted to make things possible before the next ice age.
@@Venyl Yes of course, You have right and thanks for detecting my mistake. ✅
I'll correct my previous post to clarify my bad.
JS should always be the sprinkle on top for functionality you can't accomplish with HTML + CSS. That said, there was stuff in here that was new to me! Well done!
How do you build a word processor, whiteboard app, drawing tool, or 3d app with "sprinkles" of JavaScript?
99% of websites don't fall into these categories lol
@@majorhumbert676 you don't. Get your C#/GO/C++ toolbox and make it as proper desktop app
@@codecruz @codecruz used the word "always".
Even if it is 99% (which I don't buy), it's not where 99% of the effort lies.
Underrated talk, less javascript is better
Wish the audience had gotten the hang of how cool and important this is in order to make pages more performant and save devs a lot of time writing code and debugging
AMAZING KEYNOTE! 👏👏👏 (standing ovation!)
As a web development professor deeply involved and focused in JS, I started a couple of years ago to encourage students to research and track the evolution of CSS and HTML, so that they can take responsibility away from JS in certain design situations.
I explain that this, in turn, helps to make JS cleaner and simpler to understand when other people should read your code, but also contributes to the rendering processing speed since all HTML and CSS handled from JS will always be slower.
Congrats for the keynote!
20 minutes of this video has just saved me about 2 hours of research and implementation 😅
Absolutely amazing. I love JavaScript and it feels good to let html and css do more of the work.
In fact C++ 😀
My rule is to always keep it as simple as possible and this is just a great example of it
Wow, that was good! Really interesting! CSS & HTML has evolved. Checkboxes (used to hate checkboxes!), the accordian, modal, in fact all of it. Fairly straightforward too in these simple demos. It's making me realise I need to get out of my old ways & do some research & updating to make life easier, faster & nicer too. Great job Killian! thanks 👍
Only took 3 decades for the W3C to implement features people were clamoring for 3 decades ago, and desktop apps have had for 4 decades.
Imagine how advanced this all would be if the W3C wasn’t so slow and incompetent
This is precisely why as a React Native developer I never really felt React for web was a good idea. We as a community try to force the creation of what is a really simple concept of HTML and CSS with an overly complex layer of JavaScript.
I also love JS and sometimes React has a purpose but I wish we would all go back to more pure standards. Even on the server side I just don’t see Node ever taking off with 99% of users the way PHP did. Node is nice but the fact that free shared hosting is a lot more complex and expensive means it will likely never replace something like PHP.
I’m now trying to put as little JS into websites as possible.
This is like telling my coworkers that you can submit and validate forms without libraries and style them using pseudo classes in css. They have no idea 😅
The caveat with form validation, is you want your validation to be the same on client and server and it leaves room for bugs if you implement it two different ways.
@@TheNeonRaven Ive ran into this a lot and notice it to be a pain point in other teams as a well. What are some common ways to fix this?
@@italktocomputers1901 The easiest, is if you have a JS backend, you can use the same validation libraries on the front end as you do on the backend - there are some good lightweight libraries like valibot. If you're using something else for a backend, you can mostly re-use regexes wherever you can (though there can be some differences in implementations), or if you can find a library that generates the JS code as well as does the server validation. If you don't find anything that works well with your tech stack, you can certainly roll your own, and validate that both the server and client produce the same results through unit testing.
I used half of these, the other half is new for me. I can't wait try them.
PS - I'm noticing more of these snappy short YT demos & I'm a big fan. Probably because back in the day I wasn't as able as I am at working out the detail, after only watching a short demo on a topic.
The more you brute force something, the worse it performs. Pretty straightforward philosophy.
That is very cool introduction about the modern of web. That all we need of the complex system. Keep everything original and simple. I think.
It’s sad that 40 year old software UI functionality is considered modern in the browser
@@JohnSmith-op7ls I believe there is a future for us. Keep everything simple until there is no more complex.
Tough crowd, they are probably in awe bc this is incredible
i’ve always taken into consideration solutions that take care of weight lifting and improved performance. This is a very insightful keynote! 🔥🔥
The dialog got me..
Great stuff, thanks for that!
field-sizing: content was the thing I really needed!
position: sticky; top: 0; on that stuck-to-the-top header for 20:30 will typically do the trick fine and you don't need to figure out some arbitrary pixel value to set as a scroll margin.
more features less work! really interesting and nicely presented
Video is gem
Clicked because I agreed with the premise in the title. Really would prefer to build web pages and use JavaScript to provide only extra non-UI functionality/processing.
No one in the audience got the joke he set up in the beginning where he said he loved HTML but the slide said JSX so he edited it on the fly. Very clearly setup to be a joke and no one laughed.... What a shame.
Crowd was full of C devs😂
No, they were cab drivers graduated from bootcamp
Tbh if you didn't catch that it changed it would be easy to think he was talking about JSX when referring to html since they're basically the "same thing" (well not rly but you know what I mean)
Nah, the rule of least power, as he said it. He even spent the first 3 minutes explaining it. I love how smart you think you are, compared to the room of devs. That confidence is remarkable.
They also forgot to laugh when he said "I know all of you write semantic HTML"
I don't want this video to end... ❤
Oh god my ears at the end lol,
This was a really great one.
I've used summary, details and data-collapse for Accordians and it's all fun and games until you've 20 images loading in network tab even when the accordion is collapsed.
Not sure, why this happened for me even when image show was set to lazy load but had to go with a js option just to prevent this.
Do let me if there's a way to fix this without js.
Tech Stack: NextJs and Tailwind
Would also recommend using a component library when possible (Angular Material is amazing), gives you a great springboard that can be tweaked to fit your desired needs and style. No need to reinvent the wheel.
Yea but then everything looks so angular materialy
@@DEBO5 You can tweak pretty much every style of Material with CSS (I use tailwind and it plays nicely with Material) if you want to make it look unique
I really enjoyed this video. Thanks a lot for sharing such amazing content!
I think the audience was heavily backend developers :/
It wasn't a JS conference, it was a NodeJS conference 😢
The, field-sizing: content, is amazing
technically correct would be "don't use the DOM API for that" because the DOM library is not part of the JavaScript language.
DOM API is not part of the javascript spec but its very much javascript, when i do HTMLElement.prototype am writing javascript.
@@ffffoundit3198 yes but you would be surprised how many people don't know this.
Great stuff right here!!!
this is amazing 🎉🚀
goodbye me ears at the end though 💀💀
I always think that if something is well done in HTML + CSS, is not worth to do it in JS.
Why the heck hasn't switch been added to html!?! This should be old, not a fancy single browser feature. I don't get it! This is the lowest of low hanging fruits.
Does it add any semantics? Isn't it presentational? Presentational stuff doesn't belong in HTML. That stuff belongs in CSS.
@@patrickjreid HTML is just a markup language for writing articles. What's next, switch statements in markdown?
I was excited for the data list example but the downside is you can't style it via css
Keep up the great work.
While dialogs are great, I think popover is even better :)
marker is a game changer but do i want my stuff to jump up maybe that was just a demo this is great information I don't use most of this stuff but now I see I can and I can probably use marker open with some transitions :)
This was an amazing talk!
This was really cool!
Would be awesome to do the :had with WebKit scroll bar to adjust width without JS
Can I use more htmx because of this ?
Yes, and with MPA View transition you can even use less HTMX, but it does not solve the problem of losing state of scroll and inputs
The smart man at night shows how to make an opening animation for a dialog, but this is while there is no option to make a closing animation, which means it is not possible to do it without JS.
hook
Legends say they are still clapping 👏
Loved the talk
loved the tips , great vid
Well, I'll just keep using frameworks and hope that they use the most recent supported mechanism when it doesn't need a polyfill. 🧠
1:39 could this also mean we may get back into Table-HTML Layouts, yay 🎉 I remember the good old days of layout with tables.. still works perfectly in backward compatibility; the reason to why not use it (?) Google SEO(?) ..
The reason not to use it is because we have better solutions now with flexbox, grids, etc.
Accessibility is one reason, a table is only a semantic element if it holds tabular data, if holds the entire page it makes no sense semantically.
Then you have to scale the table and all it's columns, rows, and cells to device screen sizes.
Best take away is with CSS/HTML first dev, copy and paste work wonder
nice talk, potato salad in styles 🤠
That cover flow demo is really laggy on my device
full stack and manage code base for financial reporting app…being only dev that knows what’s going on…I can’t help but ask if you think it’s okay to move some of this behavior to css and remove from js. I could see it being a maintainability nightmare when everyone expects this behavior to be in the JS code
I'd been in such a place, worthless enterprise trying to convince non-coders to invest time in shifting codebase - forget it. "It's works, duh, why should we do that?"..
I get error with this because it says that $$ not define then when I take them out it says it is not a function is there something more I need to know?
The $$ represents something like jquery, the vanilla correct way of doing this is "document.querySelector('dialog').showModal()"
cool stuff! thank you!
Awesome tips 👌🏼
some unlearning relearning is vital!
Brilliant!
I build browser using Electron, not mentioning Chromium is wild.
While dialog is great, I think popover is even better :)
thank you for this!
Didn't watch the video but here are some counterpoints to general "use CSS over JS" arguments:
- compatibility is a non-issue: you should be using either progressive enhancement or graceful degradation anyways, and for the fancy stuff supporting older browsers is easier to do in JS/DOM than CSS
- performance varies on a case by case basis, it's not as simple as "CSS is faster than JS"
- development time: some features are just way easier to implement in JS than trying to do tricks and hacks in CSS
man : ) watch the video, seriously.
great talk!
I hate media queries, I wish to learn more about css clamp.
media queries can be a PITA to debug. I agree. And the more programmatic code there is in CSS the harder a site is to maintain (especially when you aren't the original author).
what is that modern day lorem ipsum
Will it work on IE6?
Too bad safari even Technology Preview still has the pseudo selectors behind flags
It's a security risk if a web page picks a color but its 'standard' if a browser has access to my system...😅
you trust the browser to provide you with a safe environment, that's the whole point.
same reason someone might work in a VM, you're trusting the VM author to provide you with a sandbox that the programs running inside it can't eacape
You didn't understand this (security risk), so change your smile emoji to something sad.
Actually, there is an EyeDropper API to do exactly that, and also the built-in color picker is very bad (for instance you can't copy the hex code of a color in Chrome, and it looks widely different depending on the browser).
You've got to be kitten me!
nice!
React devs making button components for every new site/page they work on, completely confused by this talk.
Just use firefox and noscript to feel the web without js, disclaimer... Its broken for 98% of websites😂
Uhm... the focus/focus-visible does not work... at all, in any up to date browser, even in Chrome (on MacOS latest). It's weird giving examples that do not work. Basically last given value is used for both kbd AND mice (i.e. if I put color on focus-visible and It is defined after styles for focus - focus-visible wins over focus, if I put focus last - it wins, they overwrite each other, also color transparent just makes Firefox and Safari use the OS colors, it uses transparent on Chrome only and it applies it both for kbd and mice sooo... yeah, it does not work as suggested).
I'm not sure what you're doing but I'm on the latest stable Edge on Windows (i.e. Chrome by any other name) and putting :focus-visible first and then :focus afterwards and having them affect the same property (e.g. background-color) works exactly as expected for me, i.e. for mouse the :focus wins, for keyboard :focus-visible wins.
It doesn’t work on text fields, because by their very nature, you need a keyboard to type into a text field. It works everywhere else and has for years now.
I use tauri
nihil novi
why no one laughed at this 1:17 :-'|
VALKHOF -- Netherlands , Duch! VAL -- verified identity - but not here, in America!
1. He be -- very dumb! K= many pitfals - identity key! HOF= Someone helped, with that, policeman -- in that fight! You caused - many problemz - then -- by "Personal venue!"
logic in css is the thing I hate, everything else was dope
Better yet, don't use JS