Clever Geek Handbook

A bit of simple Javascript is capable of much

I've never worked as a professional front-end developer, and although I've been writing HTML / CSS / JS for 15 years for small side projects, the projects were all pretty small. It happens that I don’t write Javascript for many years between these projects, and often I’m not sure that I’m doing everything right.



This is partly why I used libraries a lot! Ten years ago, I used jQuery, and since 2017, I've been using vue.js a lot for my small projects (you can check out the little sapper game I made as an introduction to Vue).



But last week, for the first time in a long time, I wrote simple Javascript without a library, and it was fun, so I wanted to talk a little about it!



Experimenting with plain Javascript



I really like Vue. But last week, when I started developing https://questions.wizardzines.com , I had slightly different restrictions than usual - I wanted to use the same HTML to create a PDF file (with Prince ) and create an interactive version questions.



I really didn't see how this is possible with Vue (because Vue wants to create all the HTML on its own) and since it was a small project I decided to try writing it in plain Javascript without libraries - just write some HTML / CSS and add one <script src="js/script.js"> </script>.



I haven't done this for a while, and along the way I learned a few things that would make the process easier than I thought when I started.



Do almost everything, adding and removing CSS classes



I decided to implement almost all of the UI just by adding and removing CSS classes and using CSS transitions if I want to animate the transition.



Here is a small example where clicking a button nextfor a question adds a class doneto the parent div. 



div.querySelector('.next-question').onclick = function () {
    show_next_row();
    this.parentElement.parentElement.classList.add('done');
}


It worked pretty well. My CSS, as always, is a bit chaotic, but seems manageable.



Adding / Removing CSS Classes Using .classList



I started with classes editing as follows: x.className = 'new list of classes'. It's a bit messy though and I wondered if there is a better way. And he was!



CSS classes can be added like this: 



let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');


element.classList.remove('hi') Is much cleaner than my previous method.



Find items using document.querySelectorAll



When I started learning jQuery, I remember I thought that if you need to easily find something in the DOM, you need to use jQuery (for example, $('.class')). I just found out this week that you can just write instead document.querySelectorAll('.some-class'), and then you don’t need to depend on any library!



I got curious when it was introduced querySelectorAll. I googled a bit and it looks like the Selectors API was built sometime between 2008 and 2013 - I found a post from a jQuery author discussing a proposed implementation in 2008, and a blog post from 2011 that said that it was in all major browsers at a time, so it may not have existed when I started using jQuery, but it has definitely been around for quite some time :)



Install .innerHTML



In one place, I wanted to change the HTML content of a button. Creating DOM elements with is document.createElementpretty tedious, so I tried to keep the work to a minimum and instead set the .innerHTMLHTML line I needed: 



  button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
    <object data="/confetti.svg" width="30" height = "30"> </object>
    `;


Scrolling a page using .scrollIntoView



The last funny thing I found out about is this .scrollIntoView. I wanted to automatically scroll to the next question when someone clicks the “Next Question” button. It turns out this is just one line of code: 



row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});


Another vanilla JS example: peekobot



Another small example of a simple JS library that I found good is peekobot , which is a small chatbot interface made up of 100 lines of JS / CSS.



As you can see from its Javascript , it uses several similar patterns - a lot .classList.add, some adding elements to the DOM, some .querySelectorAll.



From the peekobot source, I learned about the .closest element , which finds the closest ancestor that matches a given selector. It looks like it would be a good way to get rid of some .parentElement.parentElementI wrote in my Javascript that seemed a little fragile.



Simple Javascript can do a lot!



I was very surprised at how much work could be done using simple JS. As a result, I wrote about 50 lines of JS that did everything I wanted to do, and a little more to collect some anonymous indicators about user training.



As usual with my front-end posts, this doesn't have to be serious front-end development advice. My goal is to write small websites with less than 200 lines of Javascript that mostly work. If you are also in the frontend world, I hope this helps a little!


More articles:


All Articles