Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * Methods like `querySelectorAll()` are handy to select multiple DOM elements at once.
 * But these methods return a `NodeList` which is a list of all the matching DOM elements.
 * No problem at first glance but when you dig a little bit you'll notice there are some
 * issues when you want to manipulate them.
 *

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * The `Math.random()` method only return a random number between 0 and 1.
 * But what if you want a larger range than [0, 1] ? We need to improve this
 * random method.
 *
 * Example:

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * The idea is to get a random node/entry from a given array.
 *
 * Example:
 * I can't choose which fruit I'll eat this afternoon, they all look so tasty so I'll simply close my eyes
 * and choose one of them randomly.

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * You need sometimes to format you number and one of the common way to format them is to add a leading zero
 * to numbers less than 10. There is many ways of doing this so let me show you some of them.
 *
 * Example:
 * I have a number and I want to prepend a 0 to it if it's less than 10.

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 * @source: Coding Math/Keith Peters
 *
 * You often get floating numbers in Javascript and sometimes you need to round them and
 * keep only n decimals. They are many solutions to do so but let me show you my favorite.
 *
 * Example:

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * We you build your project you sometimes need to load (you should load) your assets. 
 * One of the main type of asset you're using is `images` and if you don't load them
 * it could easily destroy your user experience. 
 * I will not show you how to create a complete loader, I'll only show you how to code
 * a simple loader to load your images.

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * You sometimes need to run some code multiples times, on window scroll, on window resize
 * or simply every n milliseconds. But what if you want you code to run 60 times per seconds ?
 * You could defenitely use a `setTimeout` and even if it's not the best solution
 * it would work but! there is a much easier solution, `requestAnimationFrame` (rAF).
 *

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * A trendy effect to add to your websites is to mix some text to create a sort of glitch.
 * They are many styles and ways to mix text and create this kind of effect but let me show
 * you an easy solution to manipulate a string and mix it.
 *
 * Example:

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * You can do really cool effects with Canvas and I am going to show you how to use a video to mask 
 * and image with it. To be honest I am not really sure this gist is really for beginners but I really 
 * wanted to do it. So if you are not comfortable with the code below, take a minute, breathe and maybe
 * start by reading the basics of Canvas. You will quickly start to notice this gist is not so difficult
 * to understand.

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * It's very common in Javascript to normalize numbers. Normalization means that you are taking a number from a range
 * and return a value from 0 to 1 corresponding to the position of this number within this range.
 *
 * If the number is equal to the minimum value of the range, the normal value is 0.
 * If the number is equal to the maximum value of the range, the normal value is 1.