DEV Community

JavaScript Should Be Your Last Resort

Olavi Haapala on March 02, 2021

JS Is Your Hammer When working on modern frontend web development, using your favorite framework of choice, it can be sometimes tempting...

Read full post

ronca85 • Mar 2 '21

i see job posts saying react is a must-know thing now. meanwhile i almost never see html or css listed in job listings, as if they don't matter. they do matter, and they're more important than js. understand the basics really well first. people skip all this noob basic stuff and then i end up with people that know a little react but everything on the page is a div and the task on the table is make this website 100% accessible. aaaaaaaaaaaaaaaaaaa!!!!!!!!!

raddevus • Mar 2 '21 • Edited

I am so glad to hear someone say that. I think the same thing. Learn the foundations first. Learn what each thing was created for HTML (document structure) CSS (document styling) JavaScript (document automation). That's why I start out with the foundational basics in my book, Learn HTML, CSS & JavaScript : Launch Your Dev Career. If your interested in the book reply to me and I'll provide a link for a free copy.

Great post and reply. Thanks

Henwheat • Mar 3 '21

Heard the same that fitzedin, actually I'm trying to teach myself the basics from front end, but with only English content, because here in Brazil things are a little bit difficult to find hahahah. Would love to have your book!

raddevus • Mar 3 '21

I am and I'm glad to provide a copy to you. You have to follow me here on Dev (i've already followed you) so I can DM you the link. When you follow me, I'll send you a link to the PDF download.

Agoro, Adegbenga. B • Mar 5 '21

Hi, interested in your book

raddevus • Mar 6 '21

I sent you the link in Chat. Thanks

Florent Malo • Mar 3 '21

J'ai personnellement mis du temps à comprendre le CSS, plus quand j'ai abordé le Sass holalala, l'émerveillement et aussi toute la beauté d'un langage.
Et j'avoue que jusqu'à présent c'est une toujours une découverte.
Intéressé de découvrir votre livre sur ces sujets.
Merci d'avance

raddevus • Mar 3 '21

Thanks for your interest in my book. Please follow me here on Dev.to so I can Chat and send you the link to your free copy. Thanks

Florent Malo • Mar 3 '21

\o/ ça serait avec joie

Jamie Sajdak • Mar 3 '21

I did exactly this, now I'm going back and learning the basics properly! I'd love a link to the book! Thank you :)

raddevus • Mar 3 '21

I've followed you. Please just follow me here at dev.to so I can Chat (DM) and send you the link. thanks

Anoop Sivadas • Mar 5 '21

Can I please get a copy

raddevus • Mar 5 '21

Happy to send you the link, but please follow me here on Dev.to so I can send you the link in Chat. Thanks

Anoop Sivadas • Mar 6 '21

Yes just did

Momir Despotović • Mar 5 '21

Please send a copy

raddevus • Mar 5 '21

Please follow me here on Dev.to so I can send you a DM in Chat. Then I'll send you the link to the free PDF. thanks

raddevus • Mar 7 '21

I sent you the link in Chat.

Jacob Andersen • Mar 5 '21

i would love a copy of your book to complement my javascript studies. i am very much a subscriber to the bite size lessons approach!

raddevus • Mar 5 '21

I sent you a copy in Chat. 😊

sid • Mar 18 '21

Would love to have your book thanks!

raddevus • Mar 18 '21

Thanks, I sent you the link in Chat.

Exhale Words • Mar 5 '21

Interested in your book. Just followed you also. May I have a free copy please

raddevus • Mar 5 '21

I sent you the link in chat.

Alakowe • Mar 4 '21

Hi Raddevus,
I am a newbie webdev, I'm interested in book.
Thanks.

raddevus • Mar 4 '21

I sent you the link in Chat. 😊

raddevus • Mar 5 '21

I sent you the book in chat.

raddevus • Mar 5 '21

I sent you the book in Chat.

McCall • Mar 4 '21

Hello pls I need a copy of your book

raddevus • Mar 4 '21

I sent you the link in Chat. Thanks

Ntando • Mar 3 '21

Hi, I'm interested in your book. May I please have a copy? 🤗

raddevus • Mar 3 '21

Please follow me here on dev.to and I will Chat you and send you the link to the free book. thanks

NTJ • Mar 3 '21

Hi, I have started learning HTML and CSS, just talking baby steps. Would love to get a copy of your book. I am following you already. Thanks :)

raddevus • Mar 3 '21

I sent the link to you in Chat. 😊

Catherine Shiver • Mar 3 '21

I would like a copy, as well, please. Thank you

raddevus • Mar 3 '21

Please follow me here on Dev.to so I can Chat you and send you a link to my book. thanks

raddevus • Mar 16 '21

I sent you a copy in Chat.

Neoplatonist • Mar 3 '21

Hey, I am interested in your book as well! Thanks in advance!

raddevus • Mar 3 '21

Please follow me here on dev.to and I'll send you a link to the PDF book in Chat. Thanks

amack112 • Mar 3 '21

Thanks so much for offering the book, would love to get a copy amackp@gmail.com cheers!!

raddevus • Mar 3 '21

Please follow me so I can Chat you and send you the link to my book. thanks

Egbowon Daniel • Mar 3 '21

I just started learning html and CAD. I would love a copy of the book

Egbowon Daniel • Mar 3 '21

I meant CSS.

raddevus • Mar 3 '21

Sure, please just follow me here on Dev.to and I will send you the link. I've already followed you, but we have to follow each other to send Chat / DMs

Jibbs Carlington • Mar 8 '21

Hey can I get the book please. I've followed you

raddevus • Mar 9 '21

I sent you a copy in Chat.

fitzedin • Mar 3 '21

heard you're giving away a book ..

raddevus • Mar 3 '21

I am and I'm glad to provide a copy to you. You have to follow me here on Dev (i've already followed you) so I can DM you the link. When you follow me, I'll send you a link to the PDF download.

Dayo • Mar 6 '21

Hello, I am interested in your book and would love to get a link as well, thank you.

raddevus • Mar 6 '21

I sent the link in Chat.

Kevin Patrick Fleming • Mar 8 '21

Would love a link to your book and thanks in advance!

Kofsaku • Mar 6 '21

Hi! I am new here but I feel the needs of more understanding of front end recently. I am really interested in your book.

d • Mar 4 '21

Hi, I would love a copy of your book, thanks!

raddevus • Mar 4 '21

Glad to provide the link to the book. Please follow me here on dev.to (I'm following you) then I can Chat you here and send you the link. It's just the way dev.to works. We both have to follow each other. thanks

d • Mar 4 '21

Following!

raddevus • Mar 5 '21

I sent you the book in Chat.

Deniz_shelby • Mar 3 '21

Very intrested!

raddevus • Mar 3 '21

Please follow me here on Dev.to so I can Chat you and send you the link to the free book. thanks

Niklas Vatn • Mar 3 '21 • Edited

Hi, I would very much appreciate a copy :)

raddevus • Mar 3 '21

Please follow me here on Dev.to and I can send book link via Chat. thx

raddevus • Mar 3 '21

I sent it to you in Chat. Thanks

Trey • Dec 17 '21

Hi, I'm just getting started in trying to self learn front end dev. Is it too late to get a copy of your book? Is it good as a beginner resource? Thank you so much

flyinPanda69 • Mar 3 '21

Hello raddevus,
I would love to read the book and understand the concept. Could you please provide the link. rarockin002@gmail.com is my email.
Thank you.

raddevus • Mar 3 '21

If you will please follow me here on dev.to I will send link via chat

Yaser Al-Najjar • Mar 2 '21

Well, this might indicate to a larger problem in the industry... recruiters who have no idea about the tech basics, but the fancy tech names (React, Docker, AWS... you name it).

This problem might be worth shedding light on.

Tim Carey • Mar 6 '21

Part of the reason is the clever programmer react videos use all divs LOL it sucks because I got sucked into that as a n00b. It's tough being a beginner learning on your own. There is a lot of information out there but a lot of it is not so good information. When you don't know anything, you can't tell what is good or bad. Especially when the code works, it's even HARDER to tell what code is good and what code is garbage.

fdutey-simfinity • Mar 5 '21

It's because we assume that it's such a basic that you can't do react without html and a minimum of css

Florent Malo • Mar 3 '21

Absolument d'accord, maîtriser du html et du CSS la base.

btlm • Mar 3 '21

Very important comment. It's a kind of plague nowadays.

Daniel Kaiser • Mar 3 '21

Blasphemy!! Get 'em!!!

Olavi Haapala • Mar 2 '21

I totally agree! And sadly know what you're talking about 🤷‍♂️

GrahamTheDev • Mar 2 '21 • Edited

I get oh so happy seeing posts like this - have a ❤ and 🦄

This problem will never go away but I really hope you get through to one person, React, Angular, Vue.js are fantastic...for very complex interfaces, if you are building a mostly static page please please just use HTML, CSS and a sprinkling of vanilla JS, your load performance and conversion rates will thank you.

Olavi Haapala • Mar 2 '21

Thanks ☺️

Erebos Manannán • Mar 4 '21

The worst thing is how often JavaScript developers reinvent the wheel and break accessibility, common shortcuts such as Ctrl+Clicking or middle-clicking on links to open things in a new tab because the navigation is implemented as onclick handlers instead of <a href="">, or really the worst common issue is making your custom dropdown which does not support the same keyboard selection as a normal dropdown does. Why? So it looks marginally better?

Olavi Haapala • Mar 4 '21

I generally think there's nothing wrong with the browser default styles for input elements. Why can't we often stick with those and avoid wasting time re-inventing the wheel?

Médéric Burlet • Mar 4 '21

YES YES YES YES AND YES
The amount of people I met that call themselves web-developers because they can make a react component but then don't even know that you can do animations in CSS or even the difference between absolute and relative positions.

Bradley Morgan Clonan • Mar 2 '21

While agree many solutions can be solved with html/css rather than js. At the end of the day, the benefit of using js over html/css is js is far more reusable. More often than not tech companies aren't just building one product, and they aren't tied into just one style guide. You can tell Js to do something and it will do it regardless of legacy code bases, poorly structured style files etc.

Otto Rask • Mar 5 '21

I don't get your point. HTML is way more resilient than JS and it keeps doing what you tell it to do even when you partly get it wrong?

Reusability is good with just HTML and CSS as well, or are you talking about installing shit with a package manager?

Bradley Morgan Clonan • Mar 6 '21 • Edited

When your starting with a fresh or very well defined code base sure, you can federated your class names, your animations, your style libraries etc. Though that's rarely the case, what I am saying is with js if you write a function to do something like apply (for simplicities sake) display:none to a Dom element on the fly you can carry that function with you to every project, no worries about conflicts, and if there is a conflict like repeated function names etc it's very easyto debug, more often than not the browser will immediately tell you. If you create a class named .hidden { display:none;} and you hop into a legacy code base, or one that's using x style framework trying to use your little utility class and it doesn't work your going to spend far more time digging to find the conflicting class name. Of course this is a very simple and mostly impractical example but apply it to far more involved things. My comment primarily applies to css, html is what it is whether it's written in jsx, handlebars, dynamically loaded in through a api call whatever. The unfortunate Dom is, the unfortunate dom.

Otto Rask • Mar 6 '21

What would happen if you took your JS display:none function to a legacy project with a x style JS framework that has certain kinds of tools to style DOM elements? You seem to know exactly what happens with CSS in this case so I expect you to know the answer to JS things as well.

if there is a conflict like repeated function names etc it's very easyto debug, more often than not the browser will immediately tell you

How about you press F12 right now, open the console, and declare two JS functions with the same name into the window. Let me know what the error message says.

Bradley Morgan Clonan • Mar 7 '21 • Edited

So I tried it, and JS is alot easer to debug than css.

<!DOCTYPE html>
<html>
<style>

#pageHeading {
display : none;
}


#pageHeading {
display : block;
}
</style>
<body>

<h1 id="pageHeading">Hide Me Now</h1>

<button onclick="myHideDomElementFunction('#pageHeading')">Try it</button>

<script>

const myHideDomElementFunction = targetElement => document.querySelector(targetElement).style.display = "none";

const myHideDomElementFunction = targetElement => document.querySelector(targetElement).style.display = "none";

</script>

</body>
</html>

Otto Rask • Mar 8 '21

Easier how? I am not certain how that example should be read or executed to validate your point?

Ivan Pozderac • Mar 4 '21

I see what you did there!

Working with SPAs, PWAs and hybrid apps I cannot escape using JS/TS, but you have valid point there. For a static site there are several approaches but the one I like the most is the idea and concept behind 11ty as its output is as 'pure' as it can be.

Never do things with JS if you can do it with CSS - that's both sane decision as well as using technologies the way they are intended to be used.

Also, I would add -> use HTML tags as they should be used, div is okay, but too many apps and pages are suffering from div-itis.

Olavi Haapala • Mar 4 '21

Yeah, totally agree, but can't fit everything in one post. I could write another post about the importance of semantic HTML.

Meanwhile you can read this amazing post by my colleague Eevis: dev.to/eevajonnapanula/ode-to-sema...

Otto Rask • Mar 5 '21

PWA can be a regular HTML + CSS + req/res looped website with just the service worker thing installing the PWA, no need to go "all in" with JS/TS there either.

Ivan Pozderac • Mar 5 '21

I totally agree that you should strip everything you don't need and that mostly depends from project to project. PWAs I was working on were mostly data driven apps and were interactive. Can't have real time graph without at least some JS on client considering there was no SSR mechanism included.

Florian Hehlen • Mar 4 '21

Reading the first sentence I thought this was going to be a framework v. vanilla article and was ready to be critical! Having read through I couldn't agree more. But I would go further and say that you don't have to use React if some simple vanilla JS will do.

Olavi Haapala • Mar 4 '21

Thanks! Yeah, I agree. But this was based on my current project(s) where React is used, and that won't change in the near future. It's easier to change how you use the framework instead of rewriting everything. Also, it's good to keep in mind the actual impact on the end users.
There are even solutions that use React on the server, but have no runtime JS – so the end users don't get punished for your choice of framework.

Florian Hehlen • Mar 4 '21

I have had to do a lot of React lately. I think there is also some arguments to be made about how much you use it. For example there is a tendency to break everything down into micro components which gets excessive. I think the functional and stateless dogma leads often to heavy to execute and unreadable code.... which is funny because that is exactly what React wants to solve.

Olavi Haapala • Mar 4 '21

I think this is also a problem that is not React specific. This problem will occur in every project that grows large enough.

Florian Hehlen • Mar 4 '21

For sure! I have seen this in other languages and with all sorts of frameworks over the years. It is very tempting as a developer to look at any DX improvement as an improvement for the universe.

Lakshya Singh • Mar 3 '21

I also started using Frontend Frameworks because it seems so cool and everyone is doing it. I later realized that I missed on so many cool parts of HTML5 and CSS3 that are more performant and easy to work on be it the use of semantic HTML, Grids and Flex box in CSS or even selectors everything is important its not just JS.

Olavi Haapala • Mar 3 '21 • Edited

Yeah, and one thing that comes to my mind is simple stuff like numbered list. Some people might render a list as <ul> and add the index +1 as the number on the left side of the item because they might not know about <ol> and everything you can do with CSS.

Also CSS counters, pseudo content etc. etc.

Guilherme Taffarel Bergamin • Mar 3 '21

I have been a backend developer for most of my career. That suddenly changed 2 years ago when a lack of workforce with experience on Angular in my company hit hard (the details are unimportant) and I was from one day to the other assigned a front-end role.

My first months on it were a bit of a pain, having to learn HTML, CSS, TS and Angular on the go without a tutor, but I got the hang of it and now I'm mainly working with Angular here on several projects. One thing became very clear to me after I finished that first project. I made a lot more stuff in TS than I should have.

Now I understand much better the role of each layer and I know the "vocabulary" and "grammar" of HTML and CSS a lot more. Beforehand I used to despise TypeScript after such a long time working with backend only, but now I see it's flaws are actually inherited from JS, and TS is actually a wonderful tool if well used. It's easier to work with than Java in some aspects and it reminds me of Kotlin sometimes (even though I would still prefer Kotlin over Java or TS)

HTML in Angular is a lot more easy to deal with and SCSS helps a lot with those variables. I still struggle with CSS though. It has a lot of hidden peculiarities and a little slip makes the whole page to crumble sometimes...

Anyway, what I was saying is that when you realise the role of each layer, all of what this article says becomes second nature.

Olavi Haapala • Mar 3 '21

Thanks for the comment! Perhaps you could write a blog post about your experience?

Guilherme Taffarel Bergamin • Mar 3 '21

Thanks for the suggestion, I may think about it. BTW, about the client-side PC not being as fast as your dev PC, I overcome that by using an old Android phone that used to be a entry/mid-range phone 5 years ago with a tiny screen to test my Angular apps. A Motorola Moto E2.

With it I can test both performance issues and UI on a small screen (DevTools mobile mode doesn't give the real feel. Also, I had to tackle some problems caused by the address bar on mobile, which isn't present in DevTools mobile mode).

Andrei Dascalu • Mar 6 '21

"This way of thinking is not about what is easiest for you as a developer" - ok, but this is what makes it a losing way.
All other things being equal with respect to the outcome given business requirements, things should go with what's easiest for a developer.
Easiest for a developer (as long as architecture is respected) translates into quicker time to market and lower development costs. Long term costs should be addressed by architecture and other business constraints (such as hiring market, other costs, etc).
Unless there's a significant impact to the end result for that business requirement, I see no reason to go against a developers toolset.

Olavi Haapala • Mar 8 '21

But you should always consider the cost from the end-user point-of-view. Think about accessibility or browser support for example. It's not fun or easy for you as a developer, but it makes it possible for your (possibly paying) users to use your service!

Andrei Dascalu • Mar 8 '21

I disagree. You don't. That's a business decision that depends on how the product was defined to target and support. What you (eg: developer / architect) should do is present the options and constraints to business to make a decision.
Doing in this way means a certain time-to-market and development costs but it may leave out or otherwise impact users.
Doing it the other way may come with extra costs in terms of development but may results in other advantages.
Middle way: we could start one way but there may be extra overhead to design it in a way that allows a reasonable time to change later on.
Then the business decides. It's perfectly reasonable to knowingly limit browser support for example if it's cost effective to market earlier. It's not a development decision.

Bram Vandenbon • Mar 4 '21 • Edited

You can set font and font-size, alignment and borders in HTML, and it's a really bad idea. (not to mention poorly supported ones like blink) So, "don't use CSS for what you can do in HTML" is a really incomplete statement.
HTML should be about structure, CSS about styling. Don't try to style with HTML.

Aaron Reese • Mar 10 '21

Not mentioned in 115 comments is the cost of reshaping API data in js. Pulling down more records than are practically required, or more fields, or having to nest related items (e.g. customer.order.item) using .map.filter is computational cost better suited to the server or data store layers. GraphQLcan help but it is often worth re-specifying the API response or implementing partial datasets and a fetch-ahead policy to prevent UX delays on progressing down the list.
An example of this is Jobserve.co.uk where they prefetch the next 20 jobs in the list; if you scroll quickly you can catch it out.

Nico Zerpa (he/him) • Mar 9 '21

Great article Olavi! Yeah, JavaScript is fantastic, but if you overuse it, it's worse for the end-user, in terms of performance but also accessibility.

If you reimplement in JavaScript or React something that HTML alone already does, you'll probably break something and the element is no longer accessible. Don't reinvent the wheel.

J.D Nicholls • Mar 25 '21

In some cases, you have more control with JS, example with animations: github.com/proyecto26/animatable-c...
And if you use that as a web component, it's easier to use for Designers and Developers :)

Reaper • Mar 7 '21

I realised this last year, got into learning other languages that I could randomly switch to.
Got into Go and have been building simple template based websites while avoiding as much JS as I can just for a change.

A recent project was
commitlog-web
source

I did write a bit on a similar topic but that involves a few controvertial statements but if anyone would like to go through it.

reaper.im/blog/06012020-Getting-be...

jmarshall9120 • Mar 6 '21 • Edited

"Client-side JS is the single biggest problem when it comes to web performance" - why do you think this?

Olavi Haapala • Mar 8 '21

Hey, thanks for the question! I in fact forgot to mention where I got this idea from. It's from Steve Souders' keynote at performance.now() conf in 2018.

Direct quote actually is:

JavaScript is the biggest problem for web performance today.

You can watch the talk here:
youtube.com/watch?v=RwSlubTBnew

Russell Bateman • Mar 6 '21

Terve ! Interesting article and, on the surface, I agree with much you have said though I'm a backend (Java) guy--not a frontend guy and deserve no voice here. However, I have been doing HTML and CSS for a couple of decades, I do almost zero JS.

Zen • Mar 3 '21

I got inspiration from this post and I'll do my projects with only PHP. But, interactivity is better with Svelte than PHP (without JavaScript)

Olavi Haapala • Mar 3 '21

Nice to hear 🎉

Eduard Vidal i Tulsà freedom 4 Julian Assange • Mar 3 '21

I just use js only for know data about client screen. Some one tell me I'm very legacy programmer. I'm glad to be not the only one that don't trust in client cpu.