I love this stuff. I automatically support anyone who advocates avoiding JS when unnecessary. JS has its place, and is kinda wasted on stuff HTML & CSS can already do. Some notes: 8:45 Like @cswwolf said, you don't even need JS to have only one __ open at a time, just use the _name_ attribute (this was new to me). 11:55 You can add error messages without JS by predicating their visibility on the relevant input's _:invalid_ state. Better yet, the _:user-invalid_ selector depends on user interaction (so an input won't trigger the error message until the user _made_ it invalid). 24:07 You can just add the _checked_ attribute to make one of these selected by default and entirely skip the extra CSS. 26:04 This whole thing could be so much simpler with a _checkbox_ input instead of two _radio_ inputs, and would still showcase the same features. It would also be using the element for its intended purpose. I had some other opinions but it felt like going too far into nitpicking territory. Most of those could be done more simply. My point is to support the claim that HTML & CSS can achieve the same functionality JS is overused for, *without* becoming more complex and confusing in their own right.
It's using either the browsers logic vs your own. I like the idea of the browser doing the work! I'm deff not looking forward to having to learn a JS framework.
Well... Some CSS tricks are so convoluted that JS seems like a better option just for maintability. Just because something *can* be done doens't means it should.
I second this opinion. When you put behaviour, through functions and mathematics/logic operators, inside Cascading STYLE sheets, you're making it something other than CSS. It would actually have been better to get browsers to agree on implementing a group of common UI controls in HTML (accordian, range selector, tabbed dialogs, autocomplete, etc), and use CSS to style them, seeing as CSS is STYLE sheets.
@@anandsharma7430 opinion noted, but you and OP are not the gatekeeper of what is sensible. I've done a lot of necessary styling in JavaScript, but it is a PROGRAMMING language. The fact there are CSS pre-processors (Sass comes to mind) enabling designers and front-end devs to write such terse code smarter evolved out of pure necessity. I applaud the W3C consortium for pushing these logical changes to the web ecosystem. Doing basic arithmetic for dimensions, colors, scaling and margins ... you know ... _styling stuff_ ... doesn't make it a full-blown programming language. But the pseudo-selectors and especially _has()_ are immensely useful for traversing the DOM which coincidentally is, in fact _the only logic CSS concerns itself with_ . Talking about CSS like it is beneath true programming and couldn't benefit from a bit of logic is just ridiculous. And halve of the examples you list _are_ common UI controls, she just gave examples on how to _create_ or _style_ them natively rather than reaching for yet another accordion script (YaAS).
It's been about 10 years since I've done anything serious in frontend. Seeing the advancement of CSS made me want to do some personal project to update myself. Great talk.
Pseudo elements (::before, ::after) should be using double colon (::) in their notation. Double colons (::) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use a single colon (:) in their notation.
Thanks for the talk. Looking at some of the HTML and CSS presented, this seems like it would be an absolute nightmare to test, maintain and support. I don't use enough JavaScript to have an opinion as to whether Javascript would make things easier for the next person who would need to sit down and maintain and build the kinid of functionality that was demonstrated but it seems that the support burden may then just fall on a non-tradiitonal programming type developer who would need to be very well versed in using the extended features of HTML and CSS. It's good to have options, you just need to find the right mix.
Given the setting I was expecting some demos with unexpected ways to use Blazor for actions that would normally require JS. I think the HTML tags were good to highlight but I feel there are bigger wins possible with CSS these days like dynamic changes on a site now possible with just CSS by using a combination of custom properties / variables and the :has() selector. But the target audience seemed to be very new developers or those that haven't built a website in a long while.
I've been looking for a one file webpage solution for offline use, this is great, although how do one present content at first load? Like, perhaps, the first section. The sections are all hidden and not yet targeted.
But you must also validate your requests on the server again. These HTML features are just a helper, it's still your responsibility to not get invalid requests.
But you must also validate your requests on the server again. These HTML features are just a helper, it's still your responsibility to not get invalid requests.
Why would someone who, I assume works freelance based on some of the things she said, not have things templated out already? I can understand not enjoying creating a carousel. After building a few of them wouldn't you have that control at the ready for the next client that is adamant that they need an image carousel? Same thing goes for the accordion. These are pretty common things that if you've already built in the past you shouldn't have to keep building from scratch for each customer. Aspects of this question rely on my ignorance of front-end dev.
There are always talks like these and then they show just basic sites and experiences. Please list down websites that have extremely quick interactions like apps while having no js!
I have taken an in person workshop with her years ago, I honestly cannot see myself ever watching one of her talks or videos again. It was a huge waste of time.
The reason examples are simple in talks is that complicated example winds up with a lot that won't be relevant to you, so you really just can't teach with a complicated example. In a real application, the code is only a small fraction of the knowledge required to understand a business. The application is only a model of real life processes, and those modeled processes are also missing a lot of real life nuance because it would be impossible to include all complexity of the real problem. In fact, on a mature software team with good code quality, it could still take half a year to a year for new developers to reach full productivity. This is due to needing enormous amounts of contextual knowledge that you gain by collaborating with other engineers. Trying to use this for a demo would be counterproductive and probably not helpful for the specific problem you actually want to solve. The problem you want to solve will be complicated as well, but it will be a much different problem.
I wrote a PlayStation one emulator in pure JavaScript that runs games at full speed at 20% cpu on my macbook. All in a single thread. I can assure you that JavaScript is not slow.
Was this really this year ? I swear I've seen this talk years ago (like when the pandemic started). The examples are mostly the same. And worst of all, it's still "accordians" instead of "accordion" AAAAAAARRRGH my brain melts. Edit: I remember the browser support slides. One of them was wrong. Which it seems has been fixed since. But they still completely lack what they're about. I mean, she is speaking what it's about, but it's really basic accessibility to have it written on the slide too, to have something like "Browser support for :has pseudoselector" as a title above the browser icons. Other than that, I like the examples provided. Of course the idea is to remove or reduce JS where you can, not to fixate on buliding full websites completely void of JS. I mean, that's a thing too, especially for those that are nuts about security + privacy and disable JS by default on the websites they visit.
At the count-the-children-via-css-declarations this video lost me. Fun sandbox demo, maybe. But IRL (even without legacy code)? Pfff. Let's suppose I write it, who's gonna maintain it after I get hit by the bus? You? CSS transitions instead of js, sure, that is the way to go. Counting by what could be, rather politely and euphemistically, described as inlining+unwinding, must be a joke. "Programming" in CSS must also be a joke, and oddly enough it reminds me of none other than microsoft internet explorer.
You take it too seriously, like many others in comments. She just shown how it's possible to have a modern SPA with JS turned off. It doesn't mean you don't have to write anything from backend side. You can actually count the children from backend and generate the needed static HTML with zero JS line of code. It's just brilliant.
That’s not what she’s saying lol. The basic premise is, you don’t have to reach for JavaScript to accomplish every single thing you need in your app. A lot of simple functions can be achieved with simple html/css.
I have been programming since 1988 and started on JS in Netscape Navigator. Javascript is an excellent language because it ripped off excellent languages, like Lua and C. It got amazing closures from Lua, and conciseness from C. Javascript is pretty close to the best language in existence for asynchronous programming, because we have Javascript engines with millions of dollars worth of optimizations.
This is literally useless talk, javascript can do all that in just react with a clean readable code , compare to just using just html and css like she said , using a css with every html make you not isolate the file and make it unreadable if the page is so big with huge lines , so react.js is much usefull with it converting html to javascript with its function components, and Virtual DOM for easy render Also you really need node js for making it deploy in production and make ORM and authentication for secured data , that Css and HTML cant do I feel like this woman is stereotyping a javascript What you really not need to overuse is the CSS animation that hurt the CPU of the users because website only purpose its in how it works not to make the user not use it, making everything so slow by having too much animation
![[MV] A leap of faith...ความเชื่อใจครั้งสุดท้าย (From "Petrichor the series")](http://i.ytimg.com/vi/U1piZH2CNXA/mqdefault.jpg)
The tag has a name attribute, which allows you to only have one open at a time without JS
I love this stuff. I automatically support anyone who advocates avoiding JS when unnecessary. JS has its place, and is kinda wasted on stuff HTML & CSS can already do.
Some notes:
8:45 Like @cswwolf said, you don't even need JS to have only one __ open at a time, just use the _name_ attribute (this was new to me).
11:55 You can add error messages without JS by predicating their visibility on the relevant input's _:invalid_ state. Better yet, the _:user-invalid_ selector depends on user interaction (so an input won't trigger the error message until the user _made_ it invalid).
24:07 You can just add the _checked_ attribute to make one of these selected by default and entirely skip the extra CSS.
26:04 This whole thing could be so much simpler with a _checkbox_ input instead of two _radio_ inputs, and would still showcase the same features. It would also be using the element for its intended purpose.
I had some other opinions but it felt like going too far into nitpicking territory. Most of those could be done more simply. My point is to support the claim that HTML & CSS can achieve the same functionality JS is overused for, *without* becoming more complex and confusing in their own right.
It's using either the browsers logic vs your own. I like the idea of the browser doing the work! I'm deff not looking forward to having to learn a JS framework.
I use ruby on rails and inside of that I don't need javascript!
just remember css+html are turning complete.
Well... Some CSS tricks are so convoluted that JS seems like a better option just for maintability. Just because something *can* be done doens't means it should.
I second this opinion. When you put behaviour, through functions and mathematics/logic operators, inside Cascading STYLE sheets, you're making it something other than CSS. It would actually have been better to get browsers to agree on implementing a group of common UI controls in HTML (accordian, range selector, tabbed dialogs, autocomplete, etc), and use CSS to style them, seeing as CSS is STYLE sheets.
@@anandsharma7430 opinion noted, but you and OP are not the gatekeeper of what is sensible. I've done a lot of necessary styling in JavaScript, but it is a PROGRAMMING language. The fact there are CSS pre-processors (Sass comes to mind) enabling designers and front-end devs to write such terse code smarter evolved out of pure necessity. I applaud the W3C consortium for pushing these logical changes to the web ecosystem.
Doing basic arithmetic for dimensions, colors, scaling and margins ... you know ... _styling stuff_ ... doesn't make it a full-blown programming language. But the pseudo-selectors and especially _has()_ are immensely useful for traversing the DOM which coincidentally is, in fact _the only logic CSS concerns itself with_ . Talking about CSS like it is beneath true programming and couldn't benefit from a bit of logic is just ridiculous.
And halve of the examples you list _are_ common UI controls, she just gave examples on how to _create_ or _style_ them natively rather than reaching for yet another accordion script (YaAS).
It's been about 10 years since I've done anything serious in frontend. Seeing the advancement of CSS made me want to do some personal project to update myself.
Great talk.
I got very excited in learning about the `:target` pseudo-class and how we can use it to display specific divs in the page. Thank you very much!
The css code look complex for what it does. Would somebody else or even yourself in the future be able to read and modify these code later ?
Yes.
Pseudo elements (::before, ::after) should be using double colon (::) in their notation.
Double colons (::) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use a single colon (:) in their notation.
Using years instead of browser version numbers. A stroke of genius.
Is this lady the CEO of htmx?
No. I am.
We all are
I am the CEO of htmx
@@BigBlueRabbit I am the CEO of htmx, and so is my wife
Thanks for the talk. Looking at some of the HTML and CSS presented, this seems like it would be an absolute nightmare to test, maintain and support. I don't use enough JavaScript to have an opinion as to whether Javascript would make things easier for the next person who would need to sit down and maintain and build the kinid of functionality that was demonstrated but it seems that the support burden may then just fall on a non-tradiitonal programming type developer who would need to be very well versed in using the extended features of HTML and CSS. It's good to have options, you just need to find the right mix.
There is 'checked' attribute that you can use on first element. No need to simulate it.
Nesting CSS looks so clean!
Given the setting I was expecting some demos with unexpected ways to use Blazor for actions that would normally require JS. I think the HTML tags were good to highlight but I feel there are bigger wins possible with CSS these days like dynamic changes on a site now possible with just CSS by using a combination of custom properties / variables and the :has() selector. But the target audience seemed to be very new developers or those that haven't built a website in a long while.
I feel old seeing how those features are now default in new versions of browsers. Back in my days it was just Javascript :D.
Your website does not need css btw 😂
Nice talk. Curious to know are there any website just with HTML & CSS without JS?
Are the breaches due to Javascript or mistakes by the devs using Javascript? =).
isn't this what DaisyUI has been doing? no JavaScript, just HTML and pure CSS
I've been looking for a one file webpage solution for offline use, this is great, although how do one present content at first load? Like, perhaps, the first section. The sections are all hidden and not yet targeted.
Maybe using `:not`
5:26 das is ja really cool. muss ich mal ausprobieren. keep it simple is the best way. frameworks suck.
@11:04
Unless the user edits the html and submits it either way, or does a queryBySelector(selector).submit()
But you must also validate your requests on the server again. These HTML features are just a helper, it's still your responsibility to not get invalid requests.
But you must also validate your requests on the server again. These HTML features are just a helper, it's still your responsibility to not get invalid requests.
correct
Why would someone who, I assume works freelance based on some of the things she said, not have things templated out already? I can understand not enjoying creating a carousel. After building a few of them wouldn't you have that control at the ready for the next client that is adamant that they need an image carousel? Same thing goes for the accordion. These are pretty common things that if you've already built in the past you shouldn't have to keep building from scratch for each customer. Aspects of this question rely on my ignorance of front-end dev.
There are always talks like these and then they show just basic sites and experiences. Please list down websites that have extremely quick interactions like apps while having no js!
I have taken an in person workshop with her years ago, I honestly cannot see myself ever watching one of her talks or videos again. It was a huge waste of time.
The reason examples are simple in talks is that complicated example winds up with a lot that won't be relevant to you, so you really just can't teach with a complicated example. In a real application, the code is only a small fraction of the knowledge required to understand a business. The application is only a model of real life processes, and those modeled processes are also missing a lot of real life nuance because it would be impossible to include all complexity of the real problem. In fact, on a mature software team with good code quality, it could still take half a year to a year for new developers to reach full productivity. This is due to needing enormous amounts of contextual knowledge that you gain by collaborating with other engineers. Trying to use this for a demo would be counterproductive and probably not helpful for the specific problem you actually want to solve. The problem you want to solve will be complicated as well, but it will be a much different problem.
@@DanWolf-codeNerd yap
I love this video. This is the way.
Interesting choice of topics for someone who's using JS on her personal site with a few pictures and some text.
Exactly
my dream.create web without JS . i hate webdev because javascript weirdness, slow as hell
Webassembly/blazor.
Slow websites are a skill issue.
I wrote a PlayStation one emulator in pure JavaScript that runs games at full speed at 20% cpu on my macbook. All in a single thread. I can assure you that JavaScript is not slow.
If Js is slow then you should get checked
js zealots.. keep defendin their shit. ive been using js 20 years+ and the gen z js zealots is summoned to defend the shitiest language ever 😂
I wouldn't trust this form validation with users. I as one would break it for fun
Automatically closing expandables are just wrong, why would anyone write such things!?
Was this really this year ? I swear I've seen this talk years ago (like when the pandemic started). The examples are mostly the same.
And worst of all, it's still "accordians" instead of "accordion" AAAAAAARRRGH my brain melts.
Edit: I remember the browser support slides. One of them was wrong. Which it seems has been fixed since. But they still completely lack what they're about. I mean, she is speaking what it's about, but it's really basic accessibility to have it written on the slide too, to have something like "Browser support for :has pseudoselector" as a title above the browser icons.
Other than that, I like the examples provided. Of course the idea is to remove or reduce JS where you can, not to fixate on buliding full websites completely void of JS.
I mean, that's a thing too, especially for those that are nuts about security + privacy and disable JS by default on the websites they visit.
it does, bye.
🤫Nobody tell her that I do all my CSS in JavaScript
😂 your website. Not mine.
😂😂😂😂😂😂😂
At the count-the-children-via-css-declarations this video lost me. Fun sandbox demo, maybe. But IRL (even without legacy code)? Pfff. Let's suppose I write it, who's gonna maintain it after I get hit by the bus? You?
CSS transitions instead of js, sure, that is the way to go. Counting by what could be, rather politely and euphemistically, described as inlining+unwinding, must be a joke. "Programming" in CSS must also be a joke, and oddly enough it reminds me of none other than microsoft internet explorer.
You take it too seriously, like many others in comments. She just shown how it's possible to have a modern SPA with JS turned off. It doesn't mean you don't have to write anything from backend side. You can actually count the children from backend and generate the needed static HTML with zero JS line of code.
It's just brilliant.
pattern is utterly worthless
What so bad about JS that we should avoid it? 😂
It's always overused today. LinkedIn Facebook all this sites generates huge amount of JS juste for make possible to show a simple content.
That’s not what she’s saying lol. The basic premise is, you don’t have to reach for JavaScript to accomplish every single thing you need in your app. A lot of simple functions can be achieved with simple html/css.
@@nezudev whats her and your web dev experience
I have been programming since 1988 and started on JS in Netscape Navigator. Javascript is an excellent language because it ripped off excellent languages, like Lua and C. It got amazing closures from Lua, and conciseness from C. Javascript is pretty close to the best language in existence for asynchronous programming, because we have Javascript engines with millions of dollars worth of optimizations.
This is literally useless talk, javascript can do all that in just react with a clean readable code , compare to just using just html and css like she said , using a css with every html make you not isolate the file and make it unreadable if the page is so big with huge lines , so react.js is much usefull with it converting html to javascript with its function components, and Virtual DOM for easy render
Also you really need node js for making it deploy in production and make ORM and authentication for secured data , that Css and HTML cant do
I feel like this woman is stereotyping a javascript
What you really not need to overuse is the CSS animation that hurt the CPU of the users because website only purpose its in how it works not to make the user not use it, making everything so slow by having too much animation
How does it feel to be wrong?
How?
First
damn...