Your website does not need JavaScript - Amy Kapernick - Copenhagen DevFest 2023

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ก.ย. 2024
  • When we build a website these days, there’s a 110% chance that it’s got some form of JavaScript on it. Whether it’s a full framework, for animations, to trigger a popup or as a tracking script, JavaScript is all around us.
    But what if I told you that you didn’t have to use JavaScript at all? Not even as a build process? Thanks to updates in browser technologies, there’s now a plethora of native browser features that allow building modern, functional websites, sans JavaScript.
    So together, we’ll build out a completely static website, a collection of HTML and CSS files, no tracking, no scripting, no servers, no third-party resources. Let’s build a website the way we used to (but no marquees).

ความคิดเห็น • 281

  • @BryonLape
    @BryonLape ปีที่แล้ว +111

    I'm old enough to remember when no website had Javascript. I also remember when CGI via forms was added to HTML.

    • @arcanernz
      @arcanernz ปีที่แล้ว +5

      I still miss the days of programming C++ CGIs.

    • @smbs47
      @smbs47 ปีที่แล้ว +26

      I'm old enough to remember when there were no websites.

    • @a4d9
      @a4d9 ปีที่แล้ว +20

      I'm old enough to remember when there was no internet.

    • @JorgeMartinez-xb2ks
      @JorgeMartinez-xb2ks 11 หลายเดือนก่อน +13

      I'm old enough to remember Fortran on punched cards and PDP-11 with no screen.

    • @arcanernz
      @arcanernz 11 หลายเดือนก่อน +5

      @@JorgeMartinez-xb2ks we should bring back punch cards. Sadly I never got the chance to drop punch cards on the floor and spending the rest of the time reordering it.

  • @avidrucker
    @avidrucker 11 หลายเดือนก่อน +26

    Great talk! Useful tips and great high speed catch up talk on the state of CSS and HTML and their supported techniques in 2023

  •  ปีที่แล้ว +51

    If you dont want javascript in your frontend there are awesome javascript frameworks that does that :)

    • @muskyoxes
      @muskyoxes 11 หลายเดือนก่อน +9

      And if you load in a megabyte-size js library bundle, you can have really small and lightweight front end code

    • @iooosef6006
      @iooosef6006 11 หลายเดือนก่อน +4

      it's htmx is it

    • @ivanjermakov
      @ivanjermakov 11 หลายเดือนก่อน +1

      You know the difference between "amount of JS I wrote" and "amount of JS I sent to the user", right?

  • @Linuxdirk
    @Linuxdirk 11 หลายเดือนก่อน +91

    Please, for the sake of your web app's security: do not rely on client side form validation! Those are hints and do not prevent a client to send whatever it wants.

    • @ZeDlinG67
      @ZeDlinG67 11 หลายเดือนก่อน +17

      without backend validation it would be a very bad idea indeed (except maybe for some special cases I don't know about);
      but if you are just giving hint to the user, you might as well not use js for it, if you don't need to

    • @ZeDlinG67
      @ZeDlinG67 11 หลายเดือนก่อน +1

      @basicallyhumanyou don't have to validate them one-byone; jsut the full phonenumber :D

    • @fokthewef
      @fokthewef 11 หลายเดือนก่อน +9

      I do both. Client side and server side. Never trust the user, that's always been my moto

    • @zanderwohl
      @zanderwohl 11 หลายเดือนก่อน +19

      I don't think the point is that you can replace the server side validation with html attributes. It was that you can replace the clientside validation and messages.

    • @ZeDlinG67
      @ZeDlinG67 11 หลายเดือนก่อน +2

      @@zanderwohl exactly

  • @Pipe42
    @Pipe42 ปีที่แล้ว +7

    Some great tips in here. Off to try now. But boy, some of that CSS got pretty gnarly!

    • @KristopherNoronha
      @KristopherNoronha 11 หลายเดือนก่อน

      that's IMO part of the problem. if the JS is easier to read and works, use JS instead.

  • @sergeynosov8180
    @sergeynosov8180 ปีที่แล้ว +34

    A lot of these techniques may trigger search engine negative ranking rules. If search engine performance is important to you, then try to stay away from display: none, color: transparent, font-size: 1px, and similar devices.
    Great talk, love JS-less CSS! Thank you.

    • @sergeynosov8180
      @sergeynosov8180 ปีที่แล้ว +1

      2005 SEO is the best SEO there is!

    • @philadams9254
      @philadams9254 11 หลายเดือนก่อน +4

      "may"
      Please provide a source for your info. I'm not aware of anything like this.

    • @sergeynosov8180
      @sergeynosov8180 11 หลายเดือนก่อน

      @@philadams9254 Just think about it. If you were a black-hat, and you wanted to stuff a web page with a lot of text for search engines to see and index, but do not want that content to be visible to human visitors; how would you do it?
      Search engines try to make decisions whether your intent is malicious or not, but they can make mistakes. As such these techniques are risky.

  • @a4d9
    @a4d9 ปีที่แล้ว +50

    15:48 client-side validation is good for direct feedback to the user, but you ALWAYS need to validate the value on the server before accepting it. The 'placeholder' attribute can be used to specify which format is expected.
    CSS nesting? Wow, finally! 20+ years ago I wondered why CSS couldn't be written this way.

    • @jarnalyrkar
      @jarnalyrkar 11 หลายเดือนก่อน +1

      CSS nesting doesn't work with the BEM naming convention, though - if that's something you're using.

    • @christianbarnay2499
      @christianbarnay2499 11 หลายเดือนก่อน +2

      I fully agree on server side validation. If all your validation is client side then any attacker can send any invalid data to your server directly with a curl or any other direct request tool. Using the form is just a convenience for honest non technical users.
      The only thing that you are almost 100% in control of is the server. Any bit of data that reaches it must be checked and sanitized. The client side must at all times be considered unsafe.

    • @nikkehtine
      @nikkehtine 11 หลายเดือนก่อน +4

      Server-side validation is a requirement. I can't imagine anyone writing a server that accepts any input willy-nilly and pushing it to production. Or at least not without getting scolded by everyone else after.

    • @nickryan3417
      @nickryan3417 11 หลายเดือนก่อน +1

      @@nikkehtine I can seeing as there were apparently fools in the audience thinking that input from users can be trusted, and that's aside from seeing production code and the easily avoidable mistakes that should have ever been made - for example generating SQL code programmatically rather than using a static code block and parameters.

    • @gjermundification
      @gjermundification 11 หลายเดือนก่อน

      @@jarnalyrkar The BEM Convention: BEM uses block, element, and modifier names to construct CSS class names, separated by double underscores (__) and hyphens (-). It is based on the idea of breaking down a web page into smaller, reusable blocks of code.

  • @tonywtyt
    @tonywtyt 10 หลายเดือนก่อน +1

    The project I've worked under has never has a wizard at the front end. In fact, virtually all our pages used "style" on almost every single tag. I manage update my pages to use sheets for these. When we upgraded everything, Bootstrap was chosen, and jQuery was used for some things. We moved validation to the back end, because we used to have a lot of custom JS for that on the frontend. So, that reduces the JS to some degree, but substituted that with the less visible jQuery provisions. I never had the opportunity or the time to learn conditional CSS constructs and this demystified the topic for me. Thanks!

  • @DavidLindes
    @DavidLindes 10 หลายเดือนก่อน +2

    16:00 - for what it's worth, a nice way to improve this part of the user experience (see error at 14:56) is to add a _title_ attribute to the _input_ tag. e.g., based on her example but extending it (and replacing _[0-9]_ with _\d_ because I find it simpler and more legible):

    • @ender2034
      @ender2034 10 หลายเดือนก่อน

      You can actually give them that hint without a title, using the placeholder tag. if you add placeholder="XXX-XXX-XXXX" it will display that in light grey in the input field while its empty

    • @DavidLindes
      @DavidLindes 10 หลายเดือนก่อน

      @@ender2034 Yes, placeholder is good. However, it's only useful before they start typing. If they've already typed something (or had it auto-filled by their browser), they won't see it anymore. Having both is, it seems to me, best practice.
      [also, about to fix a typo in my op... oops.]

  • @swedishpsychopath8795
    @swedishpsychopath8795 11 หลายเดือนก่อน +7

    Finally!!! Thank you!!!! I've been fighting the war with the angular / vue / react / node / typescript / etc / ++ / SPA - crazies for 6 years. The libraries / frameworks keeps changing from one day to the next. They aren't wery difficult to use but MAN oh MAN is there a lot of programming / setup to do for even the simplest of things. I won't even mention state management here since that is horrendously over-engineered. What happened to the good old page / session / application context from the servlet world? The client-side typescript / react crazies are the same kind of people that thinks the Spring framework is a god sent gift. Keep it simple! At most I'm willing to use websockets and asynchronous calls to handle communication both ways between the client and the server. I kind of like javascript, but not for using frameworks / libraries. Only for simple pushing of fields from forms, etc, to / from the backend initiated by websocket events or submit events from the browser.

    • @tldw8354
      @tldw8354 11 หลายเดือนก่อน +1

      to be honest, I never used those fancy libs, and hopefully never will. I like to take control on my own and reduce dependancies amap. Althou I get the idea and use for those libs, I dont like to use or rely on them. just like I never use css boilerplate or similar stuff. I dont know if I am doing a whole shit load of dirtcoding with this, but untill now it works ok.

    • @swedishpsychopath8795
      @swedishpsychopath8795 11 หลายเดือนก่อน +3

      @@tldw8354 EXACTLY - I would buy you a caffe latte if I ever met you. My kind of programmer! Keep it as simple as possible. After all 99.99999% of the user interfaces are 2D and not 3D and should be as simple as possible to implement. The users don't care about vue / express / node / react / routers / state and all the other crazyness. They want a simple page to query or update stuff. To make a web-page should be a 2-hour task for a person with general programming knowledge. Now you have to spend weeks after weeks to get the SPA / react mindset and spend a lot of time to keep up with the changes / refactor your codebase while the GUI visually looks the same to the end users.

    • @disgruntledtoons
      @disgruntledtoons 11 หลายเดือนก่อน +2

      Managers get sold on JS frameworks because they enable the rapid initial development of a web-based application. What they often neglect is that no framework does everything. The developer still needs to know JS in order to implement all of the work-arounds that will be required. Your tech stack is bigger, and future development costs more. For each change, your developer must first determine if the framework supports the desired end result (and it may take days to discover whether this is the case) and then determine how to get the framework to do it or how to get the base tech to do it. You also need developers who know both the framework and the base tech, so when a developer gets hit by a bus, the replacement needs to know a deeper tech stack, which means waiting longer or paying more for the replacement.

    • @cjreeve79
      @cjreeve79 11 หลายเดือนก่อน

      I totally agree. A lot of good ideas and practises are being lost by young cowboy developers throwing JS at everything. The result is more bugs, more flakey tests and more complicated debugging.
      I still value CoffeeScript for a scattering of JS with as few lines of code as possible.
      For anything more responsive I like Turbo with Ruby on Rails. It's magic without getting your hands dirty with ugly awkward JS code.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน +2

      Yeah, I'm in the same camp. I like (liked?) JS as a language, and realized I don't like any frameworks. Though, to be honest, I haven't used one in years, since I'm a backend dev. jQuery was/is the only well built, well designed piece of JS. And it's what it should be - just a library, not a framework.
      I'm still baffled that some simple websites go to the hassle of having Angular or Vue or React. If you have A LOT of reactive (is this the word ?) elements, then, maybe. Something like a facebook page, I guess would be quite the work with only jQuery. But maan, there's a lot of websites that are over engineered with these modern JS frameworks.

  • @jarnalyrkar
    @jarnalyrkar 11 หลายเดือนก่อน +10

    3:28 When she said "link tag", i was sure she was referring to , as in importing stylesheets, but no - she was referring to the anchor tag. Confusing use of language.

    • @stevekent3991
      @stevekent3991 11 หลายเดือนก่อน +1

      She lost credibility when I saw that, can understand a newbie/trainee saying LINK tag instead of A tag but not a presenter talking about HTML elements.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      Yeah, that confused the heck out of me too.

  • @maacpiash
    @maacpiash ปีที่แล้ว +24

    Great talk, really enjoyed the presentation. Although I like to adhere to semantic HTML, I could see myself using some of these hacks, such as using form elements outside a form, which she specifically mentioned.
    The red cross over the Node.js logo is a bit misleading, though 😁

    • @PiyushJain-ct2qq
      @PiyushJain-ct2qq ปีที่แล้ว +14

      The red cross is on "de" so it says no js

    • @maacpiash
      @maacpiash ปีที่แล้ว +2

      ​@@PiyushJain-ct2qq oh, I see! Well, thanks for the explanation 😁

    • @shrin210
      @shrin210 11 หลายเดือนก่อน +1

      Also, if Js is not useful for Frontend then it should not be used for Backend as well (NodeJS)
      😂

    • @kahnfatman
      @kahnfatman 11 หลายเดือนก่อน

      View bait - they say 😝

  • @musicforlife4571
    @musicforlife4571 11 หลายเดือนก่อน +10

    Totally agree with the title of the video. What too many devs forget to do is "use the tech NEEDED for the job" rather than the one's you just "like" to use. If you NEED js, then sure, use JS, but don't use JS just because you can or just because you feel like it, that's just stupid and makes you a bad dev.

    • @tldw8354
      @tldw8354 11 หลายเดือนก่อน

      I often see new tecs that are quite common and old, I just didn't know of them. Like in this presentation. Actually I made a lot of cool websites, but still I lack knowing some way too simple solutions that are allready invented :) the fun part is to me, that every year it gets easier because I don't have to rely on overly complicated solutions that I made in the past.

    • @Raccoon5
      @Raccoon5 10 หลายเดือนก่อน +1

      Well, you should use typescript, but that is another topic.
      Good developers use tools that scale and are widely used by the community, so that projects can be maintained. Yes, you can make a website in pure CSS, but good luck scaling and debugging it. Not to mention you actually do need server side validation and processing for anything meaningful, but that is another topic.
      JS frameworks allow huge websites to operate with reusable components, testable systems, and code which is easily readable.

  • @SurenEnfiajyan
    @SurenEnfiajyan 11 หลายเดือนก่อน +3

    Oftentimes in registration forms you see both password and password confirmation field. Is it possible to check if passwords match without javascript without server side validation?

  • @mrmagnetic927
    @mrmagnetic927 11 หลายเดือนก่อน +4

    @3:36 the HTML Link tag is not the same as the Anchor tag loads stylesheets and links change browser urls

    • @avidrucker
      @avidrucker 11 หลายเดือนก่อน +1

      I also thought that was ambiguous, though, I figured the odds were she was referring to clickable links versus file imports/references

    • @mihaimanole2643
      @mihaimanole2643 11 หลายเดือนก่อน

      functions as a link and as an anchor. Though the functionality of anchors is diminished by the id attribute.

  • @jhonyhndoea
    @jhonyhndoea ปีที่แล้ว +8

    I already code like this. But at the end what matters is if the website is useful to people, does it provide any value? How you did it matters a lot less than what its tying to achieve and does it achieve it.

    • @tldw8354
      @tldw8354 11 หลายเดือนก่อน

      @basicallyhuman absolutely correct. my newest goal is to acheeve a 14kb otf site section somewhere in the future :)

  • @HaraldEngels
    @HaraldEngels 11 หลายเดือนก่อน +6

    The "target" trick is neat. That was new for me. Thank you.

  • @freeworld_freeworld
    @freeworld_freeworld 9 หลายเดือนก่อน

    What about Ajax? How to use asynchronous requests to server without JS(XmlHTTPRequest)?

  • @mytech6779
    @mytech6779 11 หลายเดือนก่อน +2

    On a tangent, accordions are way overused by outfits big and small. They really degrade the UX when used where not needed, just pointless extra clicking and page shifting.

  • @Tassaczek
    @Tassaczek 11 หลายเดือนก่อน +2

    I need JS to be needed. I do not want to lose my job xD

  • @AlexDaniel-h3t
    @AlexDaniel-h3t 11 หลายเดือนก่อน +2

    The UK Government has some interesting research (see their github) on the accessiblity of date pickers, and inputting telephone numbers. Their research seems to contradict what the Amy Kapernick says. Nontheless she makes some good points.

    • @tldw8354
      @tldw8354 11 หลายเดือนก่อน +2

      could you be more specific please and provide an example? thanks!

    • @AlexDaniel-h3t
      @AlexDaniel-h3t 11 หลายเดือนก่อน

      @@tldw8354 Certainly. Regarding date pickers: date pickers are useful when the user benefits from knowing the context of the date, like booking a flight. For other uses, like asking for dates of birth, simple text inputs are more accessible. designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/
      Alice Barlett also gave a lecture which included the rationale. th-cam.com/video/CUkMCQR4TpY/w-d-xo.html

  • @defaultdefault812
    @defaultdefault812 11 หลายเดือนก่อน +4

    Perfect promotional video for JS. Well done.

  • @RoamingAdhocrat
    @RoamingAdhocrat ปีที่แล้ว +4

    I like where this is going…

  • @magicsmoke0
    @magicsmoke0 11 หลายเดือนก่อน +3

    How would you call an API using only HTML? All modern website with data has their data in a database, with a web service API in between.

    • @MaakBow
      @MaakBow 11 หลายเดือนก่อน +1

      many websites operate without databases. Flat file sites can have reasonabley decent functionality for content. Display, filtering, searching etc...not necessarily jsbfrwe tho.

    • @magicsmoke0
      @magicsmoke0 11 หลายเดือนก่อน

      @@MaakBowNot denying that those sites exists, but I was specifically calling out sites with data, sites that millions of people use daily like Facebook, Google, Amazon, etc. Evan small companies sites have data. Lots of sites have data. Without JS, you can't get that data, cause you're not hardcoding it in html.

  • @kahnfatman
    @kahnfatman 11 หลายเดือนก่อน

    I'm gonna build a website with only HTML and CSS and C... what am I doing with C? Build a W3C compatible browser for my interactive/dynamic website of course!!!

  • @EgorDemeshko
    @EgorDemeshko 11 หลายเดือนก่อน

    css nesting is on;y 1.96% ready, so i would say it's not supported yet. and kmh, and if we are using css modules or narrow components, who needs nesting?
    p.s oh. i agree, pseudo classes) i got it.

  • @albx79
    @albx79 11 หลายเดือนก่อน +1

    some of the later examples really show why JavaScript is useful! That being said, I dislike it with a passion and any trick to avoid it is welcome, so thank you!

  • @jarrodhroberson
    @jarrodhroberson 11 หลายเดือนก่อน

    How many people raised their hands both times?

  • @arcanernz
    @arcanernz ปีที่แล้ว +9

    JavaScript is overused anyhow it's great to see some html and css again.

  • @baxiry.
    @baxiry. 11 หลายเดือนก่อน +4

    Glory to Jquery

    • @valera924
      @valera924 11 หลายเดือนก่อน

      Heretic!

  • @kausikanpanneerselvam5718
    @kausikanpanneerselvam5718 11 หลายเดือนก่อน

    you have the source-code of the examples ?

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      Just visit her website that's mentioned at 56:44

  • @dawnrazor
    @dawnrazor 11 หลายเดือนก่อน +1

    Hi Amy great presentation. Is css/html auto testable in the same way JavaScript is. If not I think approach is unpractical.

    • @carlerikkopseng7172
      @carlerikkopseng7172 10 หลายเดือนก่อน

      Of course? Such a weird thing to ask

  • @adjbutler
    @adjbutler 11 หลายเดือนก่อน +1

    htmx is next!

  • @xozuhanjan
    @xozuhanjan 11 หลายเดือนก่อน

    Hmm... JavaScript has already escaped the browser or web technical boundaries, and it think, the declarative-(language)-only approach, if possible, that may eliminate the diversitive possibilities of huma imperfective versabilities from us. but i think also HTML and CSS has a ball to improve themselve. It's there tern.

  • @MaxHeadro0m
    @MaxHeadro0m 11 หลายเดือนก่อน

    when browser tells you it's the wrong format without saying the expected one? 😬

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน +1

      You can't really show the client a regex pattern, nor can you expect the browser to translate that. It's up to you, the developer, to show that somehow somewhere. Like using the very-supported placeholder attribute that she totally forgot about.
      To be frank, most examples could've been done better.

  • @Yupppi
    @Yupppi 11 หลายเดือนก่อน

    So does this CSS do engineering math and reading from a file in specific ways and then process the data? If so, I'll be ok to not use javascript (not a huge fan of it anyway). Sure, buttons and forms are nice on the website, but most of the time they bring no value to the usefulness of the site.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      Of course CSS doesn't do engineering math. That's not the point of this talk. The point is that many clients will ask for some fancy stuff, and the idea is that there's quite many of them that can be done without JS. And knowing when not to use JS is useful, maybe you can have multiple pages or the whole website without JS. That doesn't mean you shouldn't use it when it's clearly the way to go.

  • @anon_y_mousse
    @anon_y_mousse 11 หลายเดือนก่อน +3

    Yep, JavaScript is garbage and overused. This also perfectly illustrates why we need to get rid of HTML/CSS and JavaScript all. The syntax of all of that CSS was disgusting and unless you took years studying it all like Amy, it's not human readable, and it really should be regardless of how good WSIWYG editors are. What we need is to merge all three into one super language and make the browser more of a portal toolkit program. I'm sure every programmer has at one point or another used a toolkit to do anything with a GUI, and especially if you're on Linux, and surely we all recognize how much easier it is to do things with the right toolkit. I also know that it'll never be more than a dream because it would require rewriting the entire web, and next to no one would ever make that move even if it was better, but I'm still going to attempt implementing it and hoping that others use it.

    • @doublesushi5990
      @doublesushi5990 11 หลายเดือนก่อน +1

      agreed, CSS spaghetti.

    • @martiruda
      @martiruda 11 หลายเดือนก่อน

      this is rubbish. css is a great encapsulation of a layer. Tell me about one programming language that apart from making you happy also does make happy the other 99% of the devs. IMPOSSIBLE.

    • @anon_y_mousse
      @anon_y_mousse 11 หลายเดือนก่อน

      @@martiruda So it doesn't make everyone happy, therefore don't bother replacing it with something that might?

  • @michawhite7613
    @michawhite7613 11 หลายเดือนก่อน

    I'm gonna spread this like gospel

  • @dagorgonzoladotco
    @dagorgonzoladotco 11 หลายเดือนก่อน +1

    HeychTML ©️

  • @pratikkore7947
    @pratikkore7947 11 หลายเดือนก่อน

    12:35 Depends WHEN you are😂 before the towers or after the towers

  • @b213videoz
    @b213videoz 8 หลายเดือนก่อน

    Yeah, my web site needs Macromedia FLASH 🤪

  • @atlantic_love
    @atlantic_love 11 หลายเดือนก่อน +1

    She thickk
    She know programming trikk
    Lovely 🌹

  • @mirvids5036
    @mirvids5036 11 หลายเดือนก่อน

    Haytch....argh.
    That said, some very interesting info.

  • @thanatosor
    @thanatosor 11 หลายเดือนก่อน

    What sorcery is that 😂 CSS 🎉

  • @disgruntledtoons
    @disgruntledtoons 11 หลายเดือนก่อน +1

    My problem with web page development is that HTML and CSS layout follows logic that is unpredictably arcane. Getting page elements aligned in a specific way requires careful editing of the CSS that is often breaks when the slightest change is required.

  • @DanielPradoBurgos
    @DanielPradoBurgos 11 หลายเดือนก่อน

    Oh yeah? Well... My JS does not need your website! How do you like them cookies?

  • @matasbi
    @matasbi ปีที่แล้ว

    After such like coding everyone be afraid to touch something… and probably I’ll be hide from other devs who needs to deal with that… Thanks god it isn’t in Asembler… :)

  • @garyblake9665
    @garyblake9665 ปีที่แล้ว +2

    Wtf? How am I going to get any analytics? How am I going to make the site interesting?

  • @se6369
    @se6369 11 หลายเดือนก่อน

    It might not need CSS either

  • @kasrabaghernezhad9610
    @kasrabaghernezhad9610 11 หลายเดือนก่อน

    You are definitely a Senior Principal HTML Software Architect.

  • @mattlyxd
    @mattlyxd ปีที่แล้ว +4

    Can I just be the first to say, please design by project requirements. Some websites absolutely can be built and satisfy consumers without JavaScript and deliver an experience to the end client. JavaScript is a requirement of the web in the same way CSS is - this is like saying "You can build a website with just HTML, who needs CSS?" Well...everyone who expects to deliver a certain experience to their clients will need it. Let's be real here, even WebAssembly uses JavaScript to initiate.We shouldn't fight JavaScript we should just use it responsibly, the same way we think about CSS in relation to HTML can be applied to JS.

    • @christianbarnay2499
      @christianbarnay2499 11 หลายเดือนก่อน +6

      And that's exactly her conclusion. Question the javascript you use to see if you actually need it or if you just copy-pasted it because of laziness. A good way of designing web sites should be to first do everything you can without javascript. Then add javascript just to complete the missing bits and polish the visual. This is especially important to give a better experience to users with handicap that use assisting devices like text-to-speech or braille reader and vocal or eye tracking input. Their everyday life is already a nightmare because of all the hurdles they need to overcome in the physical world. If we can help make their digital experience slightly better they will appreciate that.

    • @mattlyxd
      @mattlyxd 11 หลายเดือนก่อน +1

      @@christianbarnay2499 I agree, to a certain point. We can't just toss JavaScript frameworks out the window either. React, Express, VueJS, they all have their place. Design by Requirements, don't just lock yourself into a particular "good way of designing websites" your "good way" may not be another's

    • @shrin210
      @shrin210 11 หลายเดือนก่อน +1

      ​@@mattlyxdReactjs, Express, VueJS are the examples that are not meant to do with JS.

  • @karthikpuvvula
    @karthikpuvvula 5 หลายเดือนก่อน

    Me(after watching this for 15mins): Why you do not need to watch this talk.

  • @girlswithgames
    @girlswithgames 9 หลายเดือนก่อน

    tbh there is a big group of people (including devs!!!) that just made static website without JS when they needed a static website without JS. kinda crazy to me that it's seen as novel now

  • @elvispalace
    @elvispalace 11 หลายเดือนก่อน +1

    How to build Figma without JavaScript (or web assembly)

  • @amaurylemal5816
    @amaurylemal5816 11 หลายเดือนก่อน +1

    Accordians 🤣😂

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน +1

      Yeah, that triggered me too. So confidently wrong :))

  • @FlorianRagossnig
    @FlorianRagossnig 11 หลายเดือนก่อน +2

    Please, fellow Devs, don't listen to a person who thinks that HTML and CSS is a programming language, HTML form hints is "form validation" and presents a 1990s webpage as a use-case we would have in 2023. Good luck with SSO, basically any modern form of security or any form data(!) which comes from a server...
    Yes, JS is overused in many cases, JS is debatable as being a "real" language but it certainly has it's spot in modern web development.
    However, thumbs up for some CSS/HTML tricks which could most definitely replace some unnecessary JS in some modern day projects!

  • @OeHomestead
    @OeHomestead ปีที่แล้ว +9

    Good riddance to JS and npm. I've made a few apps using Blazor and I didn't have to write a single line of JS.

    • @jackjackcarey
      @jackjackcarey ปีที่แล้ว +6

      You don’t have to write it… because Microsoft already has. For client-side Blazor, they are doing a lot of work with JS

    • @katrinabryce
      @katrinabryce ปีที่แล้ว

      Maybe, but you are writing in C# and compiling to Javascript. Which is even worse than just writing in Javascript, unless, of course, the alternative is to write in Javascript and compile to different Javascript.

    • @mileswhitener4173
      @mileswhitener4173 ปีที่แล้ว +4

      @@katrinabrycedoesn't blazor compile to Web Assembly?

    • @usedtobe672
      @usedtobe672 ปีที่แล้ว +3

      ​@@katrinabryce Blazor is Web Assembly. It is not transpiling to JavaScript. Altough, you can interop with JavaScript with you want.

    • @doc8527
      @doc8527 ปีที่แล้ว +1

      It seems like currently there is no way to do DOM manipulation without javascript browser api.
      Hence, as long as you involve some dom activities. You still need to do the javascript at the end.
      Then the thing matters is the cost of execution before the dom manipulation, for 90% of web applications, it doesn't matter, since most of the times we are just updating the DOM, and the heavy part is indeed the DOM re-rendering.
      Even C# itself is faster, transpiling to wasm, the performance will be terrible in general comparing to just using a random js framework. It's quite counter-intuitive right?
      Nowadays rust web frameworks are also not faster than (even slower than) many js frameworks, opposite to non-web devs would imagine. Though there are more important perspectives like type-safety from the language itself, memory cost, etc..
      Unless browsers support them natively.

  • @jarrodhroberson
    @jarrodhroberson 11 หลายเดือนก่อน +1

    TL;DR she writes logic that would normally be in JS in experimental and unsupported CSS; except for one visibility thing.

  • @nightking4615
    @nightking4615 11 หลายเดือนก่อน +2

    Clearly this is a talk by someone who hasn't really built any dynamic user-facing application before. Sounds like one of those kids who go to bootcamp to learn programming and thinks they don't need a CS degree to be a software engineer. LOL

  • @laughingvampire7555
    @laughingvampire7555 11 หลายเดือนก่อน

    "H" is pronounced aitch, not haitch.

  • @TesterAnimal1
    @TesterAnimal1 11 หลายเดือนก่อน

    Try creating a Gantt with no JavaScript…

  • @NathanaCentauri
    @NathanaCentauri ปีที่แล้ว +1

    Loved it! Excellent presentation, useful productive and hopefully appreciated in a world full of script.
    NICE sAAS!! ;-)
    AND THE HTML WAS ALMOST AS PRETTY AS YOUR CSS TOO!!
    ..
    JS ;-)

    • @realmrfart
      @realmrfart ปีที่แล้ว

      😐

    • @duemez618
      @duemez618 11 หลายเดือนก่อน

      i hope this is sarcasm

    • @NathanaCentauri
      @NathanaCentauri 11 หลายเดือนก่อน

      @duemez618 you didn't think she had a pretty HTML? I thought it was awesome!!! Maybe you're not into W3C's. It's cool, just be yourself..
      I liked it but I'ma totally straight programmer that appreciates good syntax.. You should give it a try you might actually like it. :-)

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      @@NathanaCentauri The presentation was good, not excellent. Just the browser support slides alone, that have no mention what they're about is enough to not be able to call this presentaiton "excellent". There were other small issues too. I mean, overall it got the point across, but it can certainly be improved upon.
      And personally, I think she overly complicated the CSS, when the focus was on different things. That CSS was frankly a bit off-putting. The examples should've been simpler, with more focus on the actual important stuff, like the "has()" selector.

    • @NathanaCentauri
      @NathanaCentauri 11 หลายเดือนก่อน

      @@Winnetou17 hey thanks man for letting me know why I should never have ever thought this was excellent. I knew I should have thought about everything you said it lacked and man wow all those points you made about the CSS being off putting just made me realize how I'ma need you to help me decide why I shouldn't love my eggs over easy and I'll definitely count on you to tell me how my girlfriend should cook them next time. Do you think I shouldn't wear pink with black im just totally lost without your critiquing my opinion and this video. I can't tell you how much your idea of programming without JavaScript helped me figure this use of the word excellent might be needed to be approved by you the next time I like a video..
      What languages do you normally code in?
      Thanks again I'm new to this stuff but I learn a lot about people very quick.

  • @firstname4337
    @firstname4337 11 หลายเดือนก่อน +2

    LOL @ thinking javascript is worse than CSS

    • @doublesushi5990
      @doublesushi5990 11 หลายเดือนก่อน

      same exact thing that came to mind.

  • @najorg2023
    @najorg2023 11 หลายเดือนก่อน

    0:42 Why Hating JS ? JS its own purpose!!!

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      Because it's DEFINITELY overused, and that's exactly what she said in the presentation.

  • @justhebigidea
    @justhebigidea ปีที่แล้ว +11

    Most developers haven’t heard of JS? Those aren’t developers.

    • @seethruhead7119
      @seethruhead7119 ปีที่แล้ว +15

      she literally said the opposite

    • @NathanaCentauri
      @NathanaCentauri ปีที่แล้ว +1

      I think she was implying that real developers don't require the handicaps of JS. But there's plenty of coders full of scripts.

    • @DylanFunk-l7p
      @DylanFunk-l7p 11 หลายเดือนก่อน +2

      "Most developers have at least heard of"

    • @justhebigidea
      @justhebigidea 11 หลายเดือนก่อน +1

      We’ll next time I’ll listen while I’m not mowing the lawn. Lol. Sorry!

  • @cipheroth
    @cipheroth 10 หลายเดือนก่อน

    Long live to Node in the server and the client ! wtf is the title of this nonsense

  • @charlymaiden
    @charlymaiden 11 หลายเดือนก่อน +1

    This girl just wants attention. Maybe her parents ignored her?

  • @lerneninverschiedenenforme7513
    @lerneninverschiedenenforme7513 11 หลายเดือนก่อน

    content good, but the pronounciation is quite annoying.

  • @ogcurated
    @ogcurated 11 หลายเดือนก่อน +5

    How I code without javascript and why you don’t need to. Should be the title…

  • @EskoLuontola
    @EskoLuontola 11 หลายเดือนก่อน +11

    40:20 Ten lines of CSS to avoid writing 😅
    P.S. It has been around since at least HTML 2.0 (1995).

  • @PieJee1
    @PieJee1 11 หลายเดือนก่อน +8

    after seeing this I'd like to get a talk about "Your website does not need CSS"

  • @Naruto_D_Ruffy_SSJ4
    @Naruto_D_Ruffy_SSJ4 11 หลายเดือนก่อน +10

    I generally like the idea of using html and css only, mostly i still prefer sass, maybe even dart-sass since it's incredibly powerful.
    I learned a few things, but the toggle killed me a little, it's way more easy to just use a checkbox instead of 2 radios, because a checkbox brings 2 states out of the box ;)
    Overall a lot more awesome features are coming for css, but browser support is always an issue. But in the long run we will have more ways of doing things like this, without the need or JS for sure. However, JS also improves and nothing beats it's power, especially when it comes to tailwind-css and such it's still not to bad to have some dependencies.
    But for simple tasks or for the matter of a challenge, it's a nice thing to try to get something to work without JS at all for sure :D

  • @cadinsordacovale
    @cadinsordacovale ปีที่แล้ว +4

    Any chance that you'd share those slides with a link here on TH-cam as well?

  • @larryczerwonka5125
    @larryczerwonka5125 11 หลายเดือนก่อน +5

    I love JavaScript! And I will see if this talk addresses how you do an Ajax call without JavaScript.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      If the page is very light and the backend is also very fast, simply reloading the page with the changes done can actually be a solution. Not for EVERYTHING, but it can still be a very usable and modern website.

    • @larryczerwonka5125
      @larryczerwonka5125 11 หลายเดือนก่อน

      @@Winnetou17 not if the area you wish to refresh is below the fold. Which is hard to know where that is with all the different screens these days.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน +2

      @@larryczerwonka5125 huh ? What I said is to physically reload the page. Like visiting another page. It's the most basic thing, it works perfectly on ALL browsers and ALL devices and screens.

    • @larryczerwonka5125
      @larryczerwonka5125 11 หลายเดือนก่อน +1

      @@Winnetou17 I will assume that "below the fold" is a term you have not heard (it simply means the users has scrolled down the page so whatever was seen when the page loaded is now off the screen). So, having scrolled down, if the user performed some action that needs to update the page, and the page was reloaded, they would then need to scroll down to where they had been or you would need to include an anchor to get them down there. Using Ajax that can all be done more efficiently and without the screen blinking. For what it's worth i have been creating website since 1995, and writing code since 1985.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      @@larryczerwonka5125 Oh ok, that makes sense, thanks for the explanation. Yeah, didn't knew about the "below the fold" term.
      Technically it can be done with a # in URL to automatically scroll into view. But it can get cumbersome fast, if you have a lot of places to take care of.

  • @MikheilGhvinianidze
    @MikheilGhvinianidze 11 หลายเดือนก่อน +2

    I was already using Details, and i figured it out you could make it in to expendable navigation button easy breezy(I hate hover ones, so perfect for me.)
    I just implemented target display. Works perfect. I will try to implement dark and light mode, but I do not think that would be possible. because of android's webview will frustrate users with refreshes per screen rotation.

  • @weho_brian
    @weho_brian 11 หลายเดือนก่อน +1

    We all know javascript is evil, but also I need my six figure yob

  • @bjarnenilsson80
    @bjarnenilsson80 11 หลายเดือนก่อน +2

    The phone number question is interpreting because it's a bit context dependent (at least for me) If the rest of the form requires me to input a country and the pgone number field dse not allow me to start the number with a + (not all countries have the same international prefix (00 in most of Europe)) i just input my number and assume that the people using the form data are intelligent enough to look up the contrycode for (in my case norway). If there is no comtry indication and the phone number field allows the + I put it +47xxxxxxxx (i might even format it correctly to indicate that it's a cell phone and not a landline) if the field only allows numbers I input 47xxxxxxxx. at any rate my examoles ar based on a really bad form, if you expect people to input phone international phone numbers include a dropdown where people can select the country (this ensures that you have a greater chance of getting the correct prefix or any at all). But I digress

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      This can simply be split with a for the country code, in which you can display the flag of the country and the prefix, and then the phone field with the country-less phone number, using the pattern. The idea with a select + input I've seen it already on some websites, though I can't tell which, I don't remember.
      Edit: oh, sorry, now I see you mentioned having a dropdown at the end :)

  • @ArnaudMEURET
    @ArnaudMEURET 11 หลายเดือนก่อน +2

    I really did not see accordions coming when she announced accordians 😂

  • @ephilihp
    @ephilihp 11 หลายเดือนก่อน +2

    12:45 YYYY-MM-DD is the only correct date format.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน

      Amen!

  • @laughingvampire7555
    @laughingvampire7555 11 หลายเดือนก่อน +1

    the main problem is how HTML has been standardize and the architecture of most browsers, reloading pages is done natively in a terrible way by browsers, I have a monster machine and even with that my browser can barely work with this website.

  • @Moronicsmurf
    @Moronicsmurf 11 หลายเดือนก่อน +1

    I just love how these 30 somethings thinks they invented the wheel.. This is how it was done in the early days.. and still are in some households. :D

  • @amadexi
    @amadexi 11 หลายเดือนก่อน +4

    Of course you don't need JS if all you have is a 1990's website.

  • @theloniousMac
    @theloniousMac 11 หลายเดือนก่อน +2

    She is doing God's work.

    • @DavidLindes
      @DavidLindes 10 หลายเดือนก่อน

      I mean, I don't believe any gods exist, but she's definitely doing good and important work. :)

  • @yorailevi6747
    @yorailevi6747 11 หลายเดือนก่อน +1

    I saw your indentation colors, i was not aware of "indent-rainbow" thanks!

  • @saltech2024
    @saltech2024 9 หลายเดือนก่อน

    You also don't need JavaScript to build SPAs like LinkedIn, Facebook, TH-cam and other social media platforms
    Change my mind
    😃

  • @philip9677
    @philip9677 9 หลายเดือนก่อน

    cant believe i wrote a whole bunch of js just to validate the phone number in that format, could have used one line of html with pattern, but good to know for next time

  • @lanesawyer1491
    @lanesawyer1491 4 หลายเดือนก่อน

    Firefox shipped support for :has in December 2023 🎉

  • @orlovsskibet
    @orlovsskibet 11 หลายเดือนก่อน +5

    Just a heads up - to, do form validation client side, does NOT mean that you don't have to do it server side. Never trust the client. (They could use an old browser or the entire post request could come from other stuff than a browser)

  • @mosesnandi
    @mosesnandi 11 หลายเดือนก่อน +1

    My biggest revelation was when I found out you could code a whole web app with database and everything and use absolutely zero JavaScript.

    • @carlerikkopseng7172
      @carlerikkopseng7172 10 หลายเดือนก่อน +3

      You mean, like everyone did for the first fifteen years of the web?

    • @fullfungo
      @fullfungo 9 หลายเดือนก่อน

      @@carlerikkopseng7172Not everyone was of website-writing age during the first fifteen years of the web.

  • @aianshu
    @aianshu 11 หลายเดือนก่อน +1

    Really helpful

  • @ihsantore4813
    @ihsantore4813 11 หลายเดือนก่อน

    HTML and CSS free JavaScript is the best.

  • @szirsp
    @szirsp 10 หลายเดือนก่อน

    You know its's desperation when you see someone writing programs in a non-programming language just to avoid JavaScript...
    Please don't write pages of css just to count elements.
    Yes, JavaScript is horrible, but this is worse. :(

    • @szirsp
      @szirsp 10 หลายเดือนก่อน

      I was thinking that the web is doomed if this is what we need to just display testimonials...
      Then I thought "You know what would be better than using JS or CSS to display testimonials? "
      To not use any of this!
      Why are you hiding information from the user/reader?
      Why are you making them click buttons?
      Do you want them to read this or not?
      You know what has good browser support?
      Plain HTML!
      You know what HTML has?
      Infinite real-estate! You can scroll. If you have large enough screen you don't even need to scroll and can just read all the testimonials without having to click on confusing radio buttons...
      We had this technology for decades!
      Just put the testimonials onto a separate page so people who care can read it. Your site will load faster (for people who don't care) because you don't have to transfer text that is hidden and the large unnecessary CSS that hides the text, pictures.

  • @xcoder1122
    @xcoder1122 11 หลายเดือนก่อน +5

    JS is a horrible language by so many definitions of what makes a language horrible. TypeScript makes it somewhat less horrible but it's still no match for any other scripting language out there, maybe except for shell scripting. The only reason why it is used on the web is that there is no better alternative that would have an equally wide browser support.

    • @doublesushi5990
      @doublesushi5990 11 หลายเดือนก่อน

      indeed.

    • @illegalsmirf
      @illegalsmirf 11 หลายเดือนก่อน

      Shell scripting is not to be compared to JavaScript lol

    • @xcoder1122
      @xcoder1122 11 หลายเดือนก่อน

      @@illegalsmirf Why not? POSIX Shell Scripting is a well defined language. And while you need to call a lot of external tools (like grep, sed, awk, etc.), all of those tools are also well defined by POSIX. Just imagine those external tools to be language API; which they sometimes are ("[" can be a symlink to the "test" binary and shells can just call it, but most shells won't really use that, they have a built-in test implementation they will use instead). So in theory you can write a shell interpreter, that has all those tools built-in and instead of calls to external binaries just makes internal API calls. Actually Busybox already does that, it contains all the binaries that POSIX requires to be present, including a POSIX shell interpreter and all of that can be built into a single binary that requires nothing except for a libC library and even that one can be statically linked into the binary.

    • @Winnetou17
      @Winnetou17 11 หลายเดือนก่อน +1

      JS is not a horrible language, the frameworks are. Pure JS + jQuery can be very beautiful. And powerful.

    • @xcoder1122
      @xcoder1122 11 หลายเดือนก่อน +1

      @@Winnetou17 JS is untyped and auto converts type, which are both the source for millions of bugs that would have never happened in a typed language. Why do you think so many people prefer TypeScript over JS, which is basically just strongly typed-JS and add features like enums. Also classes were an afterthought and only added to the language in 2015 (20 years after the language was born). Before that there was not even a concept of a class and a constructor, you had to build your objects by hand. It has no separation of code and data. An object is in fact just an assoc array and the same as a data array. Under the hood things are getting even worse than that, the true nastiness is just hidden today by construct wrapped on top of crap but no matter how nicely you gonna decorate a pile of chunk, it's still a pile of chunk.

  • @szirsp
    @szirsp 10 หลายเดือนก่อน

    Yeah, don't use JS (so much)
    ... but also just don't validate phone numbers this strictly... or at all !
    Have a more robust validation on server side that is much more flexible and forgiving. And communicate well to users... preferably before they even submit the form.
    Use a placeholder example with the proper format you happened to be thinking about when you wrote the pattern which you yourself might forget a day later (as shown here).
    Remember, just because you are used to a pattern doesn't mean everyone else is. Especially if you are putting things on the Internet for users to access World Wide. ;)

  • @abytebit
    @abytebit 11 หลายเดือนก่อน

    Of course, if you would like to walk from Dallas to Atlanta, just start your journey. You don't have to tell every person you meet on the road that the airplane is useless.

  • @muskyoxes
    @muskyoxes 11 หลายเดือนก่อน

    No tracking?? So this has zero business relevance, because they can't survive without seven separate layers of tracking

  • @MyFedora
    @MyFedora 11 หลายเดือนก่อน

    Yeah, maybe when Chrome doesn't trigger and permanently de-sync CSS animations on page load occasionally, or when the animation debugger doesn't affect how animations play out. Sorry, but it's still far too easy to write HTML and CSS where browsers behave in an inconsistent way, and the easy solution to slap on some JavaScript that fixes the state of the website.

  • @klex3905
    @klex3905 11 หลายเดือนก่อน

    your website doesn't need HTML either. But it helps. Sill talk, even if JS is a shit show.

  • @rolandfisher
    @rolandfisher 11 หลายเดือนก่อน +3

    "Full disclosure, you shouldn't do this stuff. Yeah, this is all useless if you want to develop a good site."

  • @goldnutter412
    @goldnutter412 10 หลายเดือนก่อน

    "so many data breaches" 😂 understatement of the century. Web 1 was horrifying