Well not really. I understand all the obsession with Linux simplicity and Unix systems in general but if you stop being a fanboy of all *nix systems you realise that the dev experience under Windows is quite amazing and these days is smooth as fuck (I personally use Windows, Linux and Apple machines on a daily basis so I know what I am talking about). Let me show you how to create and add an SSH key to your GitHub account on a Windows machine. What is an SSH key? Well just google it but basically you will be able…

Today I woke up positive. I made a cup of coffee and thought to write a medium post. Then reality struck and I could not stop myself writing a bit of a rant post. So take some pinches of Himalayan salt when reading this and take home what applies to you.

I spent decades on building web apps and user interfaces for small and large companies, private and public. I worked for governments, database companies as well as famous fashion brands or games. In my humble experience there were endless times when I encountered a lack of reasoning when we…

What if I tell you that is not that hard to achieve data binding in vanilla JavaScript? Wait whaaat? Is that even possible without a framework like Vue or React or Angular? Of course it is. Let me show you and introduce you to the Proxy object.

Overview

The way I like to bind things together in JavaScript world is by making independent components that react to data changes. I like to build highly cohesive, loosely coupled components so I don’t end up with messy monoliths. …

Hello folks, here we are with another short story from the frontend world. We are going to learn how to add and remove multiple CSS classes from a DOM node, in our case a div.

The boring way 🤢

To add a CSS class all you have to do is to add some string with the class name on the node inside the value of the class attribute. Basically here:

<div class='ADD HERE YOUR CLASSES'></div>

Now, to do this, we will be using a special method called setAttribute. Let’s assume we have the DOM node saved in the myNode variable.

myNode.setAttribute('class', 'my-special-css-class');

But that…

Creating and deleting DOM Nodes

Hello folks, here we are with another quick tutorial. We will learn how to create a function that generates DOM nodes for us and one that deletes them. In this frontend world we often need to create and delete nodes so why not create our own set of tools to do this tedious job.
Also, just to be fancy, let’s create a class for the sake of it. If you don’t know what is a class, don’t worry, I don’t know either. Let’s assume a class is a way to group common functionality and values. So, we will define a class…

Hello folks, this is short post so by the time you finish your cup of tea, you will know how to efficiently render a bunch of nodes on the screen without causing much refresh of flickering unicorns on your screen.

Let’s get going. First, let me introduce you to the a special node that is a document fragment. A document fragment is like an invisible shopping bag that you can use to collect nodes you wanna put on the screen at a later time. So, to create one, all you need to do is:

const docFrag = document.createDocumentFragment();

Now that…