Skip to content

Instantly share code, notes, and snippets.

View Anthodpnt's full-sized avatar

Anthony Du Pont Anthodpnt

View GitHub Profile
@Anthodpnt
Anthodpnt / node-list-to-array.js
Last active December 13, 2016 16:09
Conversion - NodeList to Array
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / random-integer.js
Last active December 13, 2016 16:09
Math - Random Integer
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / random-array-node.js
Last active December 13, 2016 16:09
Math - Random Array Node
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / add-leading-zero.js
Last active December 13, 2016 16:09
Formatting - Add Leading Zero
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / round-to-decimal.js
Last active December 13, 2016 16:10
Math - Round to Decimal
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / image-loader.js
Last active December 13, 2016 22:37
Misc - Image Loader
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / request-animation-frame.js
Last active July 16, 2019 18:09
Performance - Request Animation Frame
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / mixing-text.js
Last active December 13, 2016 22:38
Misc - Mixing Text
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / video-masking.js
Last active December 14, 2022 22:51
Canvas - Video Masking
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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
Anthodpnt / normalization.js
Created December 15, 2016 10:45
Math - Normalization
/**
* This gist is for Javascript beginners.
* @author: Anthony Du Pont <antho.dpnt@gmail.com>
* @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.