Or how my dreams of writing a game started by animating a square block…

Image by Justin Lim on Unsplash

With baby steps. 👣

In this article, we learn to draw and animate objects using HTML5 Canvas and JavaScript before we optimize for performance.

Introduction

Apple introduced Canvas in 2004 to power applications and the Safari browser. A few years later it was standardized by the…


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.

Unary + operator

The most concise method for type-converting strings into numbers is the unary + operator:

+"42" // 42


Solving synchronous problems with callbacks, promises, and async/await

Photo by Daniel Dara on Unsplash

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.


Discover the possibilities of Angular internationalization (i18n) and localization (l10n)

Illustration by Vero KarénTwitter 🐦

Internationalization and localization

It’s easy to get confused…


Photo by Senad Palic on Unsplash

Local storage

With local storage, we can store data in the browser in the…


Photo by tripleMdesignz on Unsplash
  • rest parameter packs elements.

Definitions

  • argument — An argument is a value passed to a function.
  • parameter — A Parameter is a variable used…


Photo by Pankaj Patel on Unsplash
const newWay = `is cool`;

String Interpolation

In ES5 you had string concatenation:

const name = 'Jack';
const old = 'My name is '+ name + '.';


Photo by Ken Suarez on Unsplash


Photo by Michael Aleo on Unsplash

Destructuring Arrays

In ES5 you could access items in an array by index:

const [apple, banana, kiwi] = fruit;
const [,,kiwi] = ['apple', 'banana', 'kiwi'];

Photo by Steinar Engeland on Unsplash

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!

var sum = function(a, b) {
return a + b;
}
sum(1, 2) // -> 3

Michael Karén

Frontend Architect • JavaScript Enthusiast • Educative.io Author • ngVikings organizer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store