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 HTML5 Canvas and JavaScript before we optimize for performance.
“Animation is not the art of drawings that move but the art of movements that are drawn.” — Norman McLaren
Introduction
Apple introduced Canvas in 2004 to power applications and the Safari browser. A few years later it was standardized by the…
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. JavaScript also freely type-converts values into a type depending on the context of their use.
Converting values to numbers, especially strings to numbers, is a common requirement and many methods can be used.
Unary + operator
The most concise method for type-converting strings into numbers is the unary + operator:
+"42" // 42A unary operation is…
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. However, before looking into these techniques, let’s look into the difference between synchronous and asynchronous code.
Synchronous code
JavaScript is a single-threaded programming language, which means only one thing can happen at a time. While a single thread simplifies writing and reasoning about code, this also has some drawbacks.
Imagine we do a long-running…
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 an application with Angular internationalization and go through the complete process from marking texts for translation, extracting them to translation files, and how we manage these files to get the application deployed and maintained while keeping users all over the world happy with our translations.
Internationalization and localization
It’s easy to get confused…
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 in local storage and then how to present them on the screen for the player. If you want to read about the game that inspired this article you can read about it here:
Local storage
With local storage, we can store data in the browser in the…
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 try to clear up the confusion and look into the two ways of using Javascript’s three dots.
In short we could say that:
- spread operator unpacks elements.
- rest parameter packs elements.
Definitions
argument— An argument is a value passed to a function.parameter— A Parameter is a variable used…
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 the difference? Instead of single '’ or double "” quotes we use backticks ``.
String Interpolation
In ES5 you had string concatenation:
const name = 'Jack';
const old = 'My name is '+ name + '.';Using + for both addition and concatenation can be confusing and even lead to unexpected bugs:
JavaScript proxies were introduced in 2015 with ECMAScript 6. They allow us to intercept and override operations such as object property lookup and assignment. A Proxy object wraps another object and acts as a middleman.
The two most used data structures in JavaScript are Object and Array. The destructuring assignment introduced in ECMAScript 2015 is a shorthand syntax that allows us to extract array values or object properties into variables. In this article, we go through the syntax of both data structures and give examples when you can use them.
Destructuring Arrays
In ES5 you could access items in an array by index:
With ES6 destructuring, the code becomes simpler:
const [apple, banana, kiwi] = fruit;Sometimes you might want to skip over items in the array being destructured:
const [,,kiwi] = ['apple', 'banana', 'kiwi'];Or…
One of the most popular new features in ECMAScript 2015 is arrow functions. Is it because of the new cleaner syntax or the sharing of this with the parent scope? Maybe both. Let’s look into them in more detail.
Syntax
The first factor that influenced the introduction of arrow functions was a shorter function syntax. The syntax can look a bit different depending on the function. Let’s see some options!
Here is a function written in ES5 syntax:
var sum = function(a, b) {
return a + b;
}sum(1, 2) // -> 3
And here is the same function as…
Michael Karén
Frontend Architect • JavaScript Enthusiast • Educative.io Author • ngVikings organizer.
