Javascript

Array’s built-in Cheatsheet

As a JavaScript developer, we often want to manipulate or extract different data from the Array, JavaScript provides various built-in functions to ease our task by built-in functions. These functions can help us to improve our code structure and answer the interview questions related to Array in a simpler way.

  1. Array.isArray
  2. map
  3. filter
  4. reduce

isArray

We often want to check if the variable is Array or not there are multiple ways to doing it most common way is the use of instanceof.

let a = [1,1,2,42]
let b = { "name": "Manan" }
console.log(a instanceof Array) //true
console.log(b instanceof Array) //false


CSS flexbox is the pattern/ way to structure the elements of webpage.
This page tell you the basics of Flexbox’s properties.

Introduction:

To work with flex we have to understand there are two types of element:

  1. Parent: The element which is marked display: flex
  2. Child: The direct elements inside the Parent Element
<div class="flex-parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">2</div>
</div>

<style>
.flex-parent{
display:flex
}
</style>

Example: Element with class flex-parent is automatically Parent element and class “child” is the child element.

Properties

Property for parent elements

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justified-content
  • align-items

display: flex

<style>
.box {
display: flex;
}
.box-item{ …


Object-oriented programming is one the most popular programming paradigm which almost every developer must have encountered and it is asked in the interviews very often.

Before starting let's understand what is meaning of Paradigm?

It simply means the pattern of looking or implementing something. So the way or methodology of implementing our program is called the programming paradigm. There are mainly 2 types of Programming paradigm:

  1. Object-Oriented Programming
  2. Functional Programming

What is the OOP paradigm?

If you are a beginner in the world of programming you would be probably defining various functions to perform different tasks and then call them from different places in your code, This paradigm is called Functional programming.

Object-oriented Programming…


We will make a simple JavaScript-based web page that will have a button to start screen recording and a button to download the recorded video.

Vanilla JavaScript-based Screen Recorded

Prerequisites:

  • No expertise is needed, basic knowledge of JavaScript will be sufficient to understand the project.
  • We will see how to implement the webpage without going too much into the theory. To learn more, you may read the reference given at the end.
  1. Setting up the HTML.
  2. Implementing the JavaScript.

Let’s get started.

Step 1: Setting up the HTML

There are 3 button tags in total that are responsible for these actions:

  1. To start recording.
  2. To stop recording.
  3. To download recorded…


Photo by Arnold Francisca on Unsplash

We will see the different ways to use the console which will help us to debug our code easily.

We will be covering the use of the following functions:

  1. console.table()
  2. console.time() and console.timeEnd()
  3. console.group()

Let’s get started.

console.table

While making a web application, we have to deal with various types of data structures and one of our favorites is an array. While debugging, we often use console.log() to print the array on the console panel which does the work but it's hard to find any particular row and find the right object.

// Consider an Array tempMembers
var tempMembers = […


Complete guide to starting making custom Angular Pipe. We will create a pipe that will replace ‘,’ with ‘-’ in a string.

Introduction

Angular Pipe is a simple way to transform values, A pipe takes in a value or values and then returns a value. This is great for simple transformations on data but it can also be used in other unique ways.

Let's start our Custom Pipe

Angular provides the feature to implement a custom pipe by implementing the interface of PipeTransform.

We are going to build a pipe that will replace the ‘,’ sign within the string with the 5 commas.

Step 1: Create…


Implementing authentication on a simple React web app using AWS Cognito.

React is one of the most widely used and popular JavaScript libraries developed by Facebook in 2013 to create a single page application.

Manan Kumar Gupta

I am Frontend Developer, exploring the power of Javascript. I have worked on Angular, ReactJS and React Native.

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