CSS Coding Standards

Formatting

All CSS documents must use two spaces for indentation and files should have no trailing whitespace. Other formatting rules:

For example:

.media {
overflow: hidden;
color: #fff;
background-color…


In JavaScript, we use this as a shortcut, a reference. It refers to objects, variables and we use it in context.

Global context

Most probably you’ll start to connect this with something around, or the latest situation.

This is happening to the browser A LOT. Hundreds of thousands of developers are using this without context. Our poor browser is doing its best to understand this in reference to a global object, window in this particular example.

Example 1

var a = 15;
console.log(this.a);
// => 15
console.log(window.a);
// => 15

Outside of any function in a global execution context, this refers to…


ES6 : Javascript Rest & Spread Operator

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

The ... operator that arrived to javascript with ES6 is really handy, and can be used in quite a lot of situations. Technically it is two different things; a Rest parameter and a spread operator. Let's take a look at how they work.

Rest parameter

Lets say you have an array such as this one:

const myArray = ["Lisa", "Homer", "Bart"];

If you only want the first element of the array, while keeping the rest of the elements in a separate list, you can split the…


Stateful and Stateless Components in React

State

A State is an object inside the constructor method of a class which is a must in the stateful components. It is used for internal communication inside a component. It allows you to create components that are interactive and reusable. It is mutable and can only be changed by using setState() method.

Simple Example of Stateful Component which has two properties.

import React, { Component } from 'react';class StateExample extends Component {   constructor(){       super();       this.state={           first_name: '',           last_name: ''       }   }   render(){      <div><p>State Component </p></div>   }}
export default StateExample;

Class Component(Stateful)

import React, { Component }…

Functional Components vs Class Components in React

There are mainly two components in React:

Functional Components


In some unusual cases, whereby a specific commit have to be modified to correct problems when running git fsck on a repository. On the other hand, it may be due to mistakes that were made after committing a change. Before moving on, please be aware of the following items:

As this is an unsupported procedure, performing the following is at your risk. Therefore, it is strongly recommended to that you create a full backup of your data before performing any of the steps in this page

You may be required to add additional commits on top of the latest commit…


Type coercion means that when the operands of an operator are different types, one of them will be converted to an “equivalent” value of the other operand’s type. For instance, if you do:

boolean == integer

the boolean operand will be converted to an integer: false becomes 0, true becomes 1. Then the two values are compared.

However, if you use the non-converting comparison operator ===, no such conversion occurs. When the operands are of different types, this operator returns false, and only compares the values when they're of the same type.

Type coercion is the process of converting value…


Photo by Jason Leung on Unsplash

Currying is an advanced technique of working with functions. It’s used not only in JavaScript, but in other languages as well.

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

Currying doesn’t call a function. It just transforms it.

Let’s see an example first, to better understand what we’re talking about, and then practical applications.

We’ll create a helper function curry(f) that performs currying for a two-argument f. In other words, curry(f) for two-argument f(a, b) translates it into a function that runs as f(a)(b):

function curry(f) { //…


Copy objects in JavaScript, including Shallow Copy and Deep Copy. To copy an object in JavaScript, you have three options:

The following codess shows how to copy an object using three methods above:

const person = {
firstName: 'John',
lastName: 'Doe'
};


// using spread ...
let p1 = {
...person
};

// using Object.assign() method
let p2 = Object.assign({}, person);

// using JSON
let p3 = JSON.parse(JSON.stringify(person));

Both spread (...) and Object.assign() perform a shallow copy while the JSON methods carry a deep copy.

Shallow copy vs. deep copy


Intro

Over the years there’s been a steadily increasing ecosystem of JavaScript components to choose from. The sheer amount of choices is fantastic, but this also infamously presents a difficulty when components are mixed-and-matched. And it doesn’t take too long for budding developers to find out that not all components are built to play nicely together.

To address these issues, the competing module specs AMD and CommonJS have appeared on the scene, allowing developers to write their code in an agreed-upon sandboxed and modularized way, so as not to “pollute the ecosystem”.

AMD

Asynchronous Module Definition (AMD) has gained traction on the…

Tejas Savaliya

Front End Developer

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