Create/update form with smart/dumb components — This article demonstrates how to build a reusable form component that supports add and edit modes. We do this by using the container and presentation components architecture. The goal is not about teaching forms, so we keep it as simple as possible using reactive forms. The form We create a simplified form…

In this article, we create a complete Breakout-style game. The HTML Canvas provides the game container where we draw graphics via JavaScript. After learning how to use the Canvas for graphics and animations, we go through the algorithms behind collisions using basic shapes like circles and rectangles. …

Or how my dreams of writing a game started by animating a square block… — I love playing games. And I love coding too. So, one day, I got thinking, why not use those coding skills to make a game? But it sounds hard. How would one even get started? With baby steps. 👣 In this article, we learn to draw and animate objects using…

In this article, I gathered some JavaScript tips and tricks that I believe can make you a better JavaScript developer. In no particular order, here are seven (?) JavaScript tricks! 1. Converting to numbers JavaScript is a loosely typed language, meaning we don’t have to explicitly specify types of variables. …

Solving synchronous problems with callbacks, promises, and async/await — In this article, we discover the problems with synchronous JavaScript and how we can solve them with the asynchronous techniques of callbacks, promises, and async/await. We go through the three ways one by one with examples to discover how JavaScript has evolved in this area in recent years. …

Discover the possibilities of Angular internationalization (i18n) and localization (l10n) — Angular i18n and the localizing of applications had an overhaul with version 9, enabled by the new rendering engine Ivy. In this article, we take a closer look at how this built-in package of Angular now works, while pointing out the benefits and drawbacks we find. We then set up…

After creating a game, it would be nice to save our best scores. If we only save the score in memory it will be gone the next time we play. Instead, we can save the scores in the browser’s local storage. This article steps through how to save high scores…

JavaScript version ES6 (ES2015) brought us a couple of useful features for arrays represented by three dots (…), the rest parameter, and the spread operator. And ES2018 introduced the same syntax for objects. It can be confusing to have one syntax represent two different uses. In this article, we will…

Introduced in 2015 with ECMAScript6, template literals let us dynamically construct strings of text and embedded expressions, even multi-line strings of text, in a more elegant way than concatenation. The syntax is not much different from the old one at first glance: const newWay = `is cool`; Can you spot…