Event delegation is a powerful concept in JavaScript that often remains underutilized or misunderstood by many developers. Yet, it can significantly enhance the efficiency and performance of your web applications while keeping your code clean and organized. In this post, we will explore why event delegation is important and provide useful examples to help you grasp this concept effectively. Why Event Delegation Matters Event delegation is a JavaScript technique where a single event handler is used to manage events for multiple elements by taking advantage of event propagation (bubbling).

Iterators are a way to process each item of a collection. They were introduced in ES6 and bring the concept of iteration directly into the language. We are going see what JavaScript iterators are how we can use them to customize the iteration logic. Iterable objects The concept of iterable object is fundamental to understand iterators. An iterable object is an object that defines the behavior for each iteration. In other words an object is iterable if it provides the values that are looped over in a for.

What are they about? In TypeScript there are two ways of assigning a value to a variable and giving it a type: Type declaration Type assertion We will talk about what they are and which one is better. Example Say we have an interface Person 1 2 3 interface Person { name: string; } We can give the Person type to a variable by declaring it:

Say you have simple object like the following: 1 2 3 4 const obj = { foo: 'foo', bar: 10 } If we wanted to iterate over that objet properties in JavaScript we could simply do the following: 1 2 3 for (const property in obj) { console.log(`${property}: ${obj[property]}`); } Unfortunately, in TypeScript that would give the following error. Error obj[property]: Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{ foo: string; bar: string; }’.

Duck and structural typing When we talk about duck typing or structural typing we are talking about the compatibility that different types may or may not have in a given programming language. JavaScript is a duck typed language. What does it mean? If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck. Following that precept, it means that rather than try to determine whether an object can be used for a purpose according to its type, in duck typing, an object’s suitability is determined by the presence of certain properties.

JavaScript, known for its versatility and dynamic nature, relies heavily on a concept called prototypal inheritance. Understanding this concept is key to mastering JavaScript, so let’s embark on a journey to explore its intricacies. The Prototype Chain: A Hierarchical Web of Objects At its core, prototypal inheritance is a mechanism for objects to inherit properties and methods from other objects, forming a hierarchical chain known as the “prototype chain.” In JavaScript, every object has a prototype, except for the base object, often referred to as Object.

What is currying? Currying is one of those concept that is easier to show than to define but let’s give it a try In functional programming, currying is the process of spreading multiple arguments of a function across a sequence of nested functions. Now that I attempted to give a definition let’s see what it actually means in practice. The starting point for currying is a function that accepts multiple arguments.

In object oriented programming (OOP), according to the composition over inheritance principle, code should be re-used by composing classes containing instances of other classes that implement the desired functionality, rather than inheritance from a base or parent class. What’s wrong about inheritance? One of the biggest problems about inheritance is that it creates a hierarchy of classes really hard to maintain when it starts to grow. Let me show you what I mean by that.

A factory function is a function that creates objects and returns them. Factory functions are useful because they allow to yield objects without using classes and the new keyword, which it’s better to avoid in JavaScript when possible. Why avoiding classes JavaScript has no idea what classes are because it is not an object-oriented language. Yes, everything in JavaScript is an object but they are very different from the ones used in real OO languages such as Java or C#.

Introduction First class functions and higher order functions. Terms that if you are new to JavaScript or functional programming may sound scary. No need to worry, it’s enough to understand a couple of simple concepts and they will soon be your friends. Sometimes, people talk about them as if they were the same thing but they are not. They are closely related but there is a subtle difference and this usually generates some confusion.

Immutability is one the fundamental concept of functional programming (FP) and not only. Here we are going to see what it is about, why it is important and how it can be applied in JavaScript programming. TL;DR You cannot change an immutable data, you need to make a copy of that, then update the new one. Functional Programming typically avoids using mutable state. What does immutability mean? When we talk about mutating the state we mean an alteration of the value of a variable or of the structure of an object.

Let’s say we have an array of people and we want to find out how many people are older than 30.

A simple way would be filtering the array first and then get its length.

What are pure functions? Here we are going to talk about another fundamental concept of functional programming, pure functions. First of all let’s try defining what pure functions are. A pure function is a function that is deterministic and has no side effects. Now, let’s see what this actually means. What is a deterministic function? The word deterministic may sound intimidating but it should not because in the end all boils down to the concept that given the same input, the function will always return the same output.

If you update .gitignore to ignore a file that you previously committed to the repository you might expect that the file gets automatically removed but it won’t happen. If the files are in the repositories you have to remove them manually first. Here is how you can do it. Note First commit or discard any outstanding code changes, and then, run the following commands: Removes the files from the staging area (index): All files in the current directory

Nuxt on lempNuxt on lemp " Nuxt on lemp Introduction Nuxt.js is a minimal framework for creating Vue.js applications with server side rendering (SSR). In this tutorial, we will cover setting up a production-ready Nuxt.js application on a LEMP stack server. This server will run the application as service managed by PM2, and provide users with secure access to the application through an Nginx reverse proxy. The Nginx server will offer HTTPS, using a free certificate provided by Let’s Encrypt.

IDEs and editors usually offer nice refactoring functionalities but renaming files and folders in batch still feels like a hard task. Here is a bash command to find each occurrence of ‘foo’ and replace it with ‘bar’, for all files and folders contained in the given path. 1 find . -depth -name '*foo*' -execdir bash -c 'mv -i "$1" "${1//foo/bar}"' bash {} \; Should you need something more sophisticated, you may give the Renamer node module a try.