Animation w/keyframes

Basically with keyframe you create the appearence of the animation by gradually changing from one set of styles to another. You can use From-To or in percentages starting in 0% and complete 100%. In the next example, we create a keyframe with the name of moveTop, this keyframe will change the margin-top of an element...

What is a ES6 class?

Classes are like the objects and prototypes that we’re used to working with. There are 2 ways to define a class: -Class Declarations -Class Expressions An important difference between declations and expressions is hoisting. Class expressions are hoisted, Class declaration are not. Class declarations Class Expressions unnamed: named: Classes support prototype-based inheritance, constructors, super calls,...

How to use javascript map method

map() method apply a function for every element on the array and creates a new array with the result of every element. The function is invoked with three arguments: the value of the element, the index of the element (optional), and the current Array (optional) . Example: In this example the array double is equal to...

Arrow function on ES6

In ES6 Arrow function is a short way to write a function, but is more than that. (param1, param2, …, paramN) => { statements } On the left side the parameters, on the right side the statement or expression. A simple example: With no paremeters: Return is implied if using an expression after an arrow.:...

Using closures

To understand closure first we have to understand what is the scope, the scope is the set of variables you have access. It depends where and how you declare the variable. In Javascript you have a Local scope when you create a variable inside a function and you only have access to this variable inside...

Why Let instead Var

Let is another type of variable declaration, one of the difference I found useful is the block scoping because this limit the scope of the variable and help us with confusions or errors of the scoping on javascript, but there are another and useful difference too. Variables belong to the block where are declared, inside...

RegExp and form validation

RegExp (Regular Expression) are a representation of patterns that match with a characters or text. Sintaxis:   /pattern/modifiers; Pattern  is the characters to match and is always inside /. Modifiers are after the pattern. The different modifiers are: i   -> case sensitive matching g  ->global find, find all matching m  ->multiline matching Some of the...

Where I am? Geolocation API

With the geolocation api we can know your current position. first you have to validate if the browser support geolocation. Then you can get the position, to get the current position you have to call the getCurrentPosition function, this function acepts 3 parameter get position callback, error callback and position options. Note: geolocation on google...

Dealing with HTML5 Web Storage

If we want to storage data on the browser like the cookies with html5 we can use local web storage, which allows us to storage more data than the cookies. There are 2 types of web storage: Local storage exist always. Session storage exist until the browser is closed. How local storage and session is...

Playing with 2D Transforms

Transform property allows you to manipulate an element. Elements can be translated, scaled, skewed, rotated. Scale: scale(x,y), scaleY(y) or scaleX(x)   Skew: skew(x-angle, y-angle),skewY(y-angle), skewX(x-angle)   Rotate: rotate(angle), rotateX(angle), rotateY(angle)     Translate: translate(x,y), translateX(x), translate(y)   Multiple values   Browser support You have to add the vendor prefixes:   Find the live examlples: http://codepen.io/roladh/