DEV Community: Nico Zerpa (he/him)

What you have to learn before React

Nico Zerpa (he/him) — Thu, 13 Apr 2023 16:34:30 +0000

Learning front-end development is often overwhelming for beginners. Many of them want to learn React, but this question often keeps them from tackle the library.

While you should be comfortable with some basic JS concepts, you don't necessarily need to be a JavaScript expert to learn React (or any other UI library). Actually, you can learn React as you continue learning JavaScript.

You should have a good understanding of the fundamentals of JavaScript:

Variables and data types
Conditionals (in particular the ternary operator)
Loops
Functions
Objects and arrays (note: in JavaScript, arrays are a type of object)

These syntatic aspects of the language are particularly important:

You should also be aware of these more advance topics:

It's also important to remember that you also need some knowledge of HTML and CSS. Again, you don't have to be an expert, but the more you know, the better.

Become a Better JavaScript Developer! Easy, actionable steps to level up your JavaScript skills, right to your inbox. Click here to subscribe!

Small trick to understand the `this` keyword

Nico Zerpa (he/him) — Mon, 13 Feb 2023 15:00:00 +0000

The this keyword is one of the biggest headaches for anyone learning JavaScript. In this article, I won't go too deep into how the keyword works, but I will give you a quick tip to make it easier to handle.

As a general rule, the this keyword represents what's left of the dot when you're calling the method. Let's see an example:

class Capybara {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        return `My name is ${this.name}`;
    }
}

const capyDavid = new Capybara("David");
const capyArianna = new Capybara("Arianna");

capyDavid.sayName();
// ☝️ "this" is `capyDavid`,
//    returns "My name is David"

capyArianna.sayName();
// ☝️ "this" is `capyArianna`,
//   returns "My name is Arianna"

In JavaScript, functions are values. That is, you can pass functions as arguments, or assign them to variables. But when you do it, things get tricky:

const sayDavidName = capyDavid.sayName;
sayDavidName();
// ☝️ It fails! There's nothing "left of the dot"
//   because there's no dot.

function quoteCapybara(sayNameFuntion) {
    return `A capybara says: "${sayNameFuntion()}"`;
}
quoteCapybara(capyArianna.sayName);
// ☝️ It fails too

In the last example (the quoteCapybara function), why does it fail when you correctly passed the function as capyArianna.sayName? Because the function is executed inside the quoteCapybara function. There, it's run as sayNameFunction, so there's nothing "left of the dot".

In those cases, the most recommended solution is to change quoteCapybara so that it receives the capybara object as the parameter.

Become a Better JavaScript Developer
Easy, actionable steps to level up your JavaScript skills, right to your inbox. Click here to subscribe

Don't add or change methods in built-in JavaScript objects

Nico Zerpa (he/him) — Wed, 08 Feb 2023 16:11:33 +0000

It is possible to add and modify properties and methods to JavaScript classes and prototypes using the prototype property of the class or constructor function.

class Dog {
    bark() {
        return "Woof!";
    }
}

// Add a new method to the Dog class
Dog.prototype.howl = function() {
    return "Ooowhooooooo!!!";
};

Even though it is possible to use this to add more properties or methods to built-in objects (i.e. Array, String, etc.), it's generally a bad idea to do it.

The problem is, when you make changes to a native object, you could cause weird bugs across the entire codebase, even in external libraries that your project uses.

When you add a new method to a native object, there is the chance of name collisions: a native method with the same name might be added in the future.

Those kinds of errors are very hard to find, especially if the developer who found the bug is not the one who changed the native object. They might assume that built-in objects were never modified (which if often the case) and they would take hours trying to debug.

As I've read on other websites: built-in objects aren't your objects, they are everyone's objects. When you make changes to them, you also change everyone's code.

What are the alternatives?

There are a couple of alternatives to modifying built-in objects. If you add a small number of methods, you can simply create a regular function that takes the object instance as an argument.

Another alternative is to create a new class that inherits from the built-in object. For example:

class ShufflableArray extends Array {
    // This method randomizes the elements in an array
    shuffle() {
        const copy = [...this];

        let index = 0;
        while (copy.length > 0) {
            const copyIndex = Math.floor(Math.random() * copy.length);
            this[index] = copy.splice(copyIndex, 1)[0];
            index++;
        }
    }
}

const array = new ShufflableArray(1, 2, 3, 4, 5);
array.shuffle();
console.log(array); // Outputs [4, 1, 3, 5, 2]

Become a Better JavaScript Developer! Easy, actionable steps to level up your JavaScript skills, right to your inbox. Click here to subscribe

Why I don't like front-end developer roadmaps

Nico Zerpa (he/him) — Fri, 06 Jan 2023 16:11:59 +0000

Development roadmaps are very common among those who want to become front-end developers. However, they are freaking intimidating! Look at this one, for example.

While the authors of those roadmaps have the best intentions, they may actually scare people and deter them from actually starting their learning journey.

Another problem is that it makes people think that it's a completely linear process (i.e. that you have to master one topic before moving on to the next one). In many cases, that's not true.

It's OK to learn a topic only partially and then move on to learn another language or technology. Every piece of knowledge is a tool: the more tools/knowledge you have, the more things you'll be able to do. But this also means that you can already build things with the knowledge/tools you already have.

For those who are in their very early stages and want to become a front-end developer: I'd suggest to learn the basics of the following languages, tools, and libraries:

HTTP
HTML and CSS
JavaScript
Git
A front-end library or framework, preferably React because it's more widely used (and that means, there are more job offers)

Free JavaScript Newsletter! Every other Monday, easy and actionable steps to level up your JavaScript skills. Click here to subscribe

Can "Don't reinvent the wheel" be bad advice?

Nico Zerpa (he/him) — Thu, 24 Nov 2022 15:59:37 +0000

A very common programming tip is "Don't reinvent the wheel". If there's already a library that already does the task you need, why don't you just use that library instead of writing your own solution?

Many times, it's a sensitive thing to do: importing third-party libraries lets you focus on other tasks. Also, if you're using a popular library that has been stable for years, it probably does the task better than you! However, using third-party components have drawbacks.

The authors might deprecate the library or even delete it. Or the library (or any of their dependencies) might have a security problem and you have to wait until the authors fix it. Or they might even decide not to fix the security issue.

In 2016, there was an NPM JS package called "left-pad", which was used as a dependency for thousands of projects. One day, the original author deleted it and broke every single project that depended on it.

Another drawback may happen when your project changes after you used an external library. You may need to add new functionality that doesn't work with the library you added. Generally, this kind of problem can be solved, but it adds complexity to your project.

I think "don't reinvent the wheel" is a good approach, but you have to be careful every time you add an external library to your project:

If the library you're adding is very big and you need a small part of it: it's probably a better idea to do it yourself or look for a smaller library.
If the library has been popular for a long time, that's good. If you run into problems, you'll have a lot of documentation and help online.
If the task is small or simple, it's a better idea to implement it yourself.
If the task is very complex, looking for a library might be a good thing to do.
If you have to do tasks involving security (cryptography, passwords, hashes, etc) it's very recommended to use a trustworthy, third-party library. Cyber security is a very complex field, if you try to create your own security-related tasks, it will be insecure.

To sum up: can "don't reinvent the wheel" be bad advice? The answer, as always, is: "it depends".

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter

10 beginner-friendly JavaScript projects

Nico Zerpa (he/him) — Wed, 02 Nov 2022 15:58:09 +0000

Programming is a skill and you need to practice if you want to become better at it. Creating your own projects is a fantastic way to practice your skill.

However, many beginners don't know exactly what projects to create. That's why I created this list of 10 projects so that you can start coding.

1. Coin Toss

For this project, you'll create a virtual coin that will display either "head" or "tails" randomly. Create a button "Toss the coin" that, well, tosses a coin 😅.

When the user presses that button, use the method Math.random() to determine whether to display "Heads" or "Tails" to the user.

2. Change background color (three inputs)

In this project, the user will be able to change the page background color. Create three numeric inputs with the labels red, green, and blue. Also, add a button with the text "Change background color".

The user should enter a number between 0 and 255 for the three inputs. And when they press the button, the background will change. It will take the red-green-blue values from what the user wrote.

3. World Clock

Create a text input and a submit button. There, the user should write the name of a time zone (Here's a list, look for the column "TZ database name").

When the user presses the button, you should display the user the date and time in that time zone. You'll probably use a Date object and its method toLocaleString.

4. Article table of contents

Pick up any article which has subtitles (like this one!) Copy the article and make sure that the subtitles have the <h2> HTML tag.

When the page loads, it should search for all the <h2> tags in the page and create the list of all the subtitles. Add that list at the top of the page.

5. Calculator

Create a basic calculator that can add, substract, multiply or divide numbers. Ideally, create the keys for the numbers and the operations.

6. Shopping cart

Create a list of products, each of them with an "Add to Cart" button. Then, add another button "View Cart" that hides the list of products and lists only what you have in the cart.

When you're viewing the cart contents, each item should have a "Remove from cart" button.

7. Pokedex

If you're a Pokémon fan, create a Pokedex that displays a picture, the Pokedex number (i.e. the ID), the type, and abilities of a Pokémon.

Create a text input where the user can write either the ID/National Pokedex number or lowercase name of a Pokémon.

Then, use the PokéAPI web service to get the information about the Pokémon and display the information on screen.

8. Actually build the To Do app

If you're learning a JavaScript framework which has a todo app in the documentation, try to replicate it yourself! You can also create it using Vanilla JavaScript, even though it might be a little harder.

9. Currency Converter

For this project, you can use one of these two web services: https://fixer.io/, https://exchangeratesapi.io/. These services are generally paid, but both have a free tier that you can use.

The user should be able to select the currency of origin and write the amount to convert. Add a second select to let the user choose the destination currency.

Add a button that calls the web services to convert the amount from the origin currency to the destination currency.

10. Clone your favorite web page/social network

Pick any website you like and try to replicate its basic functionality.

I have a Free JavaScript Newsletter with easy and actionable steps to level up your JavaScript skills. Subscribe here: https://nicozerpa.com/

TypeScript: why static typing matters

Nico Zerpa (he/him) — Thu, 15 Sep 2022 16:34:28 +0000

The biggest feature that TypeScript brings to the table is static types. But, what are the advantages of static types over the dynamic typing in regular JavaScript?

A very common type of bug in JavaScript and dynamic languages happens when you pass a variable with the wrong type or the wrong structure. Those kind of errors are hard to catch before running the code. Also, the more complex the code is, the hardest it is to find those bugs.

Strict typing practically eliminate the entire category of bugs. When you create methods and functions, it forces you to specify the data types for the parameters and you'll get errors if you call those functions using parameters with the wrong data types. In most code editors and IDEs, you'll get the error messages as you type.

It also makes the code more "self-documented", as the type information makes it easier to understand how functions, classes and other structures work. If you have to refactor code or remove technical debt, this makes the task easier.

Another advantage of static typing is that it integrates better with autocomplete tools, making them more accurate and reliable. That makes you write code faster. Static-typed code is easier to read for humans and for robots!

However, if you've never used a statically typed language before, it takes time to get used. At the beginning, it may feel limiting because you lose some flexibility. For example, you can't combine variables with two different data types that easily. But you can get used to it with enough practice.

Why are there so many JavaScript frameworks?

Nico Zerpa (he/him) — Mon, 22 Aug 2022 16:01:19 +0000

Angular, React, Vue.js, Svelte... Next.js, Nuxt.js, Astro... Redux, Recoil, Zustand, MobX... the front-end JavaScript ecosystem is riddled with frameworks and libraries. And every time you have to create a new project, you have to decide which ones to use. A daunting task, but why?

The main problem is that it's hard to build and maintain complex front-end applications with vanilla JavaScript only. That kind of apps has a lot of moving parts, and you, as the developer, have to take care of all those parts. Here's where the difficulty lies.

Front-end libraries and frameworks were created to make building front-end apps easier. These take care of many of those moving parts, so that you have less on your plate. The thing is, these frameworks often have problems of their own.

And that's why new frameworks emerge, they try to solve the problems created by older frameworks. In general, newer libraries and frameworks are technically better than older ones.

On the other hand, older frameworks/libraries have better ecosystems (i.e. more libraries and plugins), bigger communities and more documentation.

It's a good idea to try new frameworks, but if you're creating a professional project, I recommend to rely on the most known ones, like React or Vue.js.

JavaScript can speak! Using the Speech Synthesis API

Nico Zerpa (he/him) — Wed, 03 Aug 2022 16:01:05 +0000

A very underutilized feature in browsers is text-to-speech. With the Speech Synthesis API, you can use JavaScript to "make the browser talk". Here's an example:

const message = new SpeechSynthesisUtterance(
    "Hi! This is an example of the Speech Synthesis API"
);
message.lang = "en-US";

const voices = speechSynthesis
    .getVoices()
    .filter(voice => voice.lang === "en-US");
message.voice = voices[0];

speechSynthesis.speak(message);

View example live: https://jsfiddle.net/holanicozerpa/4h2sf9gL/6/

As you can see in the example, one of the key parts of the Speech Synthesis API is the SpeechSynthesisUtterance class. An object of this class represents the text that the browser will later read aloud.

The other key part is the speechSynthesis object. It's a global object that serves as the controller. This object, among other things, has a list of available voices. It also has the crucial speak method.

When you create the SpeechSynthesisUtterance, you can set the text in two ways. The first one is to put the text in the constructor (like in the example), and the second one is to use the text property.

While it's not required, you should also set the language. This is to prevent international users listen to the text in the wrong language and incorrect pronunciation.

In Firefox and Chrome, setting the text and the language is enough. If you use the speechSynthesis.speak method, sending the utterance as a parameter, you will hear the text. But that probably won't work on Safari. You should also set which voice to use.

Fortunately, you can use the speechSynthesis.getVoices() method to get the list of available voices. It returns an array of SpeechSynthesisVoice objects. Each of this object has a lang property, and you should pick a voice with the same language as the utterance object.

Lastly, you can associate the voice to the utterance object using the voice property. Once you do that, speech synthesis will also work in Safari.

Strict mode in JavaScript

Nico Zerpa (he/him) — Thu, 07 Jul 2022 16:20:04 +0000

JavaScript wasn't originally created as a full-fledged programming language. It's original purpose was to add some interactivity to web pages. It was created as a very flexible language, forgiving to those who are new at programming.

However, the language started to be use in more complex contexts, that "sloppiness" started to become a problem. Complex software requires language to be more restricted because it makes it easier to maintain.

For that reason a new mode was introduced to the language, this is the strict mode.

How to access strict mode

One way to enable strict mode is by putting the string "use strict"; in the first line of the JavaScript file.

Another way is to use native JavaScript modules. If you're using Node.js, modules are JS files with the filename extension .mjs rather than .js. In the browser, you should add the attribute type="module" to the <script> tag.

Code inside classes is always under strict mode too.

What changes under strict mode

Under the previous mode (often called "sloppy mode", but it's not an official name), you can create variables without declaring them with const, let, or var:

name = "Stephanie";
console.log(`Her name is ${name}`);

In the old sloppy mode, the first line is correct, it creates a new variable called name. But under strict mode, it throws an error.

The problem with creating variables without declaring is that if you reassign an existing variable but you add a typo, you end up creating a new variable without realizing.

Under sloppy mode, many errors were swept under the rug. They didn't work, but the code continued running as if nothing happened. For example:

var undefined = true;
var NaN = 25;
delete Object.prototype;

In the examples above, you're messing with built-in objects and keywords of the language. You can't change or delete them, but in sloppy mode, these changes are ignored. If you run this code under strict mode, it will throw errors.

Another big difference occurs with the this keyboard. When you're calling a function which is not a method of any object, in strict mode the value of this is undefined. Under "sloppy mode", the value of this was the global object (i.e. in the browser, the window object.)

"use strict";
function logThis() {
    console.log(this);
}
logThis(); // Outputs undefined

// sloppy mode
function logThis() {
    console.log(this);
}
logThis(); // Outputs [object Window]

When to use it

Nowadays, it's highly recommended that you always use strict mode. The only caveat is that if you are dealing with older code that doesn't use it, you shouldn't necessarily switch to strict mode until you fix all possible errors.

Should you use semicolons in JavaScript?

Nico Zerpa (he/him) — Wed, 22 Jun 2022 16:12:57 +0000

It's a topic that could seem trivial at first sight, but it actually causes some controversy among JavaScript developers. Semicolons, yes or no?

The syntax of JavaScript, just like many other languages, is based on the C programming language. In that language, semicolons are necessary to end a statement (i.e. an instruction.)

But JavaScript interpreters use Automatic Semicolon Insertion, a system that "inserts" semicolons before a line break in some circumstances. It doesn't literally insert it in the code, the interpreter acts as if there were a semicolon where ASI decides to.

For example, In the following code:

const myName = "Nico"
const myLastName = "Zerpa"
console.log(`My full name is ${myName} ${myLastName}`)

The ASI system will add semicolons after "Nico" on line 1, after "Zerpa" on line 2, and after the closing parenthesis on line 3.

The exact rules of automatic semicolon insertion can be found on the official JavaScript/ECMAScript specification.

The problem is that omitting semicolons can lead to ambiguous code in some cases where ASI doesn't work as you may expect. Here's an example of this:

function getData() {
  return
  {
    name: "Mel",
    age: 49,
    favoriteFood: "Pizza"
  }
}

const melData = getData()
console.log(`Her name is ${melData.name},
  she's ${melData.age}
  and she loves ${melData.food}`)

The code above doesn't work because ASI insert semicolons in an unexpected place: after the return keyword on the second line. On top of that, the JS interpreter gets confused. Due to the added semicolon, it mistakenly thinks the object is a block of code. That triggers a syntax error.

Those kind of problems could be solved if you simply learn when ASI inserts a semicolon. However, coding is almost always a team work. Even if you know the ASI rules by heart, other developers may not, and they could not read the code properly.

For that reason, I decided to use semicolons. It's clearer for everyone, even for the JS interpreter.

JavaScript closures, explained

Nico Zerpa (he/him) — Wed, 25 May 2022 12:26:27 +0000

Closures are a concept that puzzle many JavaScript developers, even after reading the zillion articles that have been written about the topic. Yes, this is just one of those zillion articles 😄, but I'll do my best to explain it.

To explain what a closure is, first we have to explain the concept of scope.

The scope indicates in which places a given variable is available. Global variables (i.e. those not inside a function or block) are available everywhere in the code.

If you create a new variable inside a function, the scope of that variable is the function itself, it's not available outside. And if you create one function inside another, the inner function can access the parent's variables.

And if you create a variable using const and let inside a block of code enclosed in curly braces ({ and }), those variables exist inside that block only.

In JavaScript, functions can return another functions. When that happens, the new function can access the variable from its parent. For example:

function createLuckyNumberFunction(name) {
    const luckyNumber = parseInt(10000 * Math.random());

    return function() {
        return `${name}'s lucky number is ${luckyNumber}`;
    }
}

const mikesLuckyNumber = createLuckyNumberFunction("Mike");
console.log(mikesLuckyNumber());
// 👆 Outputs "Mike's lucky number is 3220"

const juliasLuckyNumber = createLuckyNumberFunction("Julia");
console.log(juliasLuckyNumber());
// 👆 Outputs "Julia's lucky number is 1449"

The function createLuckyNumberFunction (from now on, I'll call it the "parent function") create another function (the "child function") and returns it.

The child function can access the variables from the parent, with the values they had when the child function was created.

For example, the function that we get from the first call to createLuckyNumberFunction has access to the variables name = "Mike" and luckyNumber = 3220. And the function from the second call can read the following variables: name = "Julia" and luckyNumber = 1449.

A closure is a combination between a function and its surrounding variables. In this example, the closures are made of the inner function and the variables name and luckyNumber.

Closures are useful when you want to hide variables and prevent them from being modified externally. In the examples above, nobody can change the lucky number after it was created.

Another use is when the function will be executed in a different context (i.e. as a callback), but the function needs variables that may not be available at call time.

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/