TypeScript Express tutorial #2. MongoDB, models and environment variables

In this part of the Express TypeScript tutorial, we cover using a MongoDB database. To do that properly, we also learn the concept of environment variables . Since we follow the MVC pattern, we introduce the idea of a model . Just as in the previous ... more

TypeScript Express tutorial #1. Middleware, routing, and controllers

Hello! In this new series, we build a RESTful application with TypeScript Express . The course is going to cover the fundamental concepts of the express framework and tools like MongoDB . Some basic knowledge of TypeScript would be useful, as we focus ... more

Using recursion to traverse data structures. Execution context and the call stack

Hello! Today we tackle a very interesting topic, which is recursion. The article describes its main principles and dives deeper to uncover how does it work under the hood of the language, covering execution context and the call stack. Let’s go! JavaScript ... more

Is eval evil? Just In Time (JIT) compiling

There is a high chance that you’ve stumbled across the JavaScript eval function. It is a common knowledge that in JavaScript, eval is something that is a bad practice. Have you ever wondered how it works and why exactly a lot of people discourage it? ... more

Handling errors in JavaScript with try…catch and finally

Mistakes happen. That’s a given. According to Murphy’s law, whatever can go wrong, will go wrong. Your job, as a programmer, is to be prepared for that fact. You have a set of tools that are prepared to do precisely that. In this article, we go through ... more

Cross-Origin Resource Sharing. Avoiding Access-Control-Allow-Origin CORS error

In this article, we explain what Cross-Origin Resource Sharing ( CORS ) is and how to avoid errors associated with it and the Access-Control-Allow-Origin header. This includes describing it both from the viewpoint of the frontend and the backend. CORS: ... more

Comparing working with JSON using the XHR and the Fetch API

Nowadays, JavaScript is often used to make Ajax requests. There are a lot of libraries that can do that for us, for example, axios or jQuery . Both of them use XMLHttpRequest ( XHR ). It differs from the relatively new Fetch API that was introduced a ... more

Concatenating strings with template literals. Tagged templates

In this article, we cover ways to join strings. Even though it includes old methods of concatenating strings, we focus on template literals. Here you can learn how they work and how to expand their functionality with tags. Let’s go! Before template literals ... more

Explaining the JavaScript array. Sparse and dense arrays.

The array is a popular concept across many programming languages. At first glance, arrays work in the same way, but the JavaScript array differs from languages like C++. The article explains the basics of how JavaScript arrays work under the hood. It ... more

Fundamentals of storing data in the browser with IndexedDB

IndexedDB is another API meant for client-side storage. It is good for storing a significant amount of data, including files. IndexedDB is more suitable than WebStorage suitable for keeping structured data, and definitely more adequate for that than ... more

Object property descriptors. Getters and setters

With the properties of objects, you can set more than just their values. In this article, you can learn what is the property descriptor and what you can achieve with it. Among other things, you can use getters and setters and the article also explains ... more

Introduction to WebSockets. Creating a Node.js server and using WebSocket API in the browser

WebSocket is a protocol that makes two-way communication in real-time between the user and the server possible. A common use cases are chats and online multiplayer games. Today we cover implementing it both on frontend and backend. Let’s go! Explaining ... more

JavaScript testing tutorial – part four. Mocking API calls and simulating React components interactions

Today we test our React components further. It involves simulating component interactions and mocking the API calls. You will learn how to do both, so let’s go! Mocking A common thing is for our application to fetch some data from the API. A problem ... more

JavaScript testing tutorial – part three. Testing props, the mount function and snapshot tests.

Hello! In the previous part of the tutorial, we’ve covered the very basics of testing React components with Enzyme. Today we will dig a bit deeper and learn how to test props, how (and why) use the mount function and what are the snapshot tests. Let’s ... more

JavaScript testing tutorial – part two. Introducing Enzyme and testing React components

At the previous part of the tutorial, we’ve briefly covered the basics of unit testing. This time we will go further and start testing React with the Enzyme library. Thanks to the that, your application will be more reliable and it will be easier to ... more

JavaScript testing tutorial – part one. Explaining types of tests. Basics of unit testing with Jest

Hello! Today we start another big series, which is about JavaScript testing. There are various different types of tests and we will start by explaining some of them. In the beginning, we will cover the basics of unit testing , which is testing individual ... more

Webpack 4 course – part eight. Dynamic imports with prefetch and preload

In the first article of this Webpack 4 course series, we’ve covered imports and exports. This time we will dig deeper into dynamic imports because they deserve a separate article. We will explain what they are and how to use them. Let’s start! Webpack ... more

Webpack 4 course – part seven. Decreasing the bundle size with tree shaking

In this part of our webpack 4 course, we will take the idea of optimization even further. We will learn what the tree shaking is and how to use it. You will find out what requirements you need to meet in order for the Webpack 4 tree shaking to work and ... more

Webpack 4 course – part six. Increasing development experience

Today we will cover the development value of the mode property. It will automatically set the webpack configuration for you to make the development easier. Aside from that, we will also cover the wepback-dev-server and webpack-serve – Hot Module Replacement ... more

Webpack 4 course – part five. Built-in optimization for production

In this part of the Webpack 4 course, we will focus on increasing the experience of users of your application by making our output smaller. This will mean handling the code in a different way in the production environment. Today we will explain the built-in ... more

Webpack 4 course – part three. Working with plugins

Hello! Today we introduce the concept of plugins. They differ from loaders in a way that they can perform a wider range of tasks. Basically, they do anything else, that loaders can’t do. While loaders are tied to a certain type of files, plugins can ... more

Webpack 4 course – part two. Using loaders to handle scss, image files and transpile JS

Today we continue our webpack 4 tutorial. After walking through the basic concepts of webpack, it is time to go deeper. This time we will cover something that is a great strength of webpack: loaders. First, we will learn how to use loaders that are available. ... more

Webpack 4 course – part one. Entry, output and ES6 modules

Hello! Today we begin a webpack 4 course. We will start with the basic concepts of Webpack, with every part of the course going deeper. This time we will learn the basics of module bundling using ES6 modules. Webpack 4 provide default configuration, ... more

Diving deeper into the Event object. Creating and using custom events

In the previous article, we’ve learned what events are and how to work with them. This time we will dive a bit deeper into them, explaining in more details how do they work. We will go through the event object and create our own, custom events. We will ... more

Understanding events. Bubbling and capturing

JavaScript is a language, where events play a big role. In this article, we will talk about how they work. It includes different ways of listening to them and how they propagate. On the way we will cover some of mechanics from under the hood of JavaScript ... more

Understanding memory management and the garbage collector.

In JavaScript, the memory taken by the values held by the variables is automatically freed when they are not used anymore. This is done by the garbage collector to free up space. How can we benefit from knowing how it works and therefore how to write ... more

Cookies: explaining document.cookie and the Set-Cookie header.

In the previous article, we’ve talked about WebStorage API that you can nowadays use to store data in the browser. LocalStorage and sessionStorage were introduced in the HTML5. Does that mean that before we could not save data on the client side? Not ... more

Web Storage API: localStorage and sessionStorage

Web Storage API is used to store data in the browser and was introduced in HTML5. It brought us localStorage and sessionStorage. At the first glance, they seem similar. There are some important differences between them though, which is what we will talk ... more

Code splitting with SplitChunksPlugin in Webpack 4

Webpack 4 brought us some changes. Among things like faster bundling, it introduced SplitChunksPlugin , which made CommonsChunksPlugin obsolete. In this article, you will learn how to split your output code to improve the performance of our application. ... more

Diving into functions. Passing by reference is a lie!

Functions are one of the most basic features of JavaScript. Have you ever wondered how exactly do they work? After all, they are just a special kind of objects. If you are curious, dig into them with me in this article! The basics of functions Speaking ... more