The Web Juice

How to copy Objects from Chrome Dev Tools?

I was going through my tweets when I came across Addy Osmani’s update, a really cool way to copy the object in the Chrome Dev Tool console to my clipboard. There is an inherent copycommand that comes pretty handy and can help you to copy objects at any point of time from the Chrome Dev Tools to the Text editor of your choice.  Here you can see how any object can be copied from the Chrome Dev…

How to check if a variable is a function ?

Check if the variable is a Function

This is an interesting and a pretty simple question. I did figure out few ways in which you can include this into your library. There are various ways to identify if the variable is a function. We will look for two different ways of achieving this out.

Easiest and Best way

function foo(v) {if (v instanceof Function) {/* do something */} };

Next best way to do…

Getting Started with Vue-cli and Nuxt

Introduction to Nuxt

Nuxt is a framework which borrows the ideas from Next.js and proves to be a universal framework for Vue.js applications. Nuxt helps you to create a variety of applications ranging from Static Generated Vue.js Applications to the Server Rendered Vue.js applications. It comes with a lot of middle ware and layouts that can help anyone to get started without hassle. We can…

How to use reduce() in JavaScript Arrays

Reducing an array using a function against an accumulator from left to right is the use of the reduce(), It’s useful in a situation where you have a lot of calculations to be done across an array and reduce it out to a single value. In this case, it is good to remember that the accumulator starts with the value of zero and then carries forward the resultant values. Let’s see this in action.

Sum…

Storybook for Vue.js – Installation and First Experience

What is Storybook

I have constantly been hearing about the Storybook with the React Ecosystem. It’s a commonplace where the Developers and Designers can come together and collaborate in order to build complex applications on the go. It helps to keep each component in one place and lets any developer edit that component as well as help them to enrich them. It’s a living style guide as well.

After…

Spinkit Loading Component with Vue2.x

Building Spinkit Loading Component with Vue2.x

Spinkit is a set of simple loading animation spinners which use only CSS3. Spinkit has a set of 11 animations at present. Most of these are pretty trending and are used in a variety of websites. Since Spinners are used as a loading symbol in most of the places, it’s good to have a Vue2.x Componentin order to make it. This particular tutorial utilizes…

How to create Badge/Pill Component using Vue.2x and Bootstrap 4

Badge/Pill Component using Vue.2x and Bootstrap 4

Be it be Badge or a Pill, they are required in most of the places and play a major role in any application. So let’s create one single component just like Todo, using the styles from Bootstrap 4 and create a Badge component which will take several parameters in order to add additional behavior. We will also add up bi-directional data binding in…

How to check what an Array Contains using Includes() ?

Determining whether an array contains a given data point or value can be easily done using javascript Function called includes(). This function is a generic function and works with any array like objects. It intern returns a boolean value determining whether the value is present or not.

Finding whether an element exists in an Array

A simple example for using include is as follows, there can be…

Creating Button Component Using Bootstrap 4 and Vue.js

Custom Button with Bootstrap 4 and Vue.js

In this article, we will create a button component. This component takes its styles from Bootstrap 4. Since there are so many different classes and parameters in a button to handle, we will create a component to do so. This component will be Bi-Directionally bindable and also be used in different other places. No modifications will be required in order to…

Simple Markdown Editor Using Vue.js – Exploring computed values & events

Markdown Editor using Vue.js

In this article, we will deep dive into creating a simple markdown editor and use the same concept as we used while creating Raw HTML. The HTML editor which we made used the simple binding as well as use the Vue.js v-html directive. We have also explored the ways in which we can incorporate the events and the methods. We did also have a look at the computed methods.…

Use map() method in JavaScript Array

map() method helps you to create a new array by calling a function on each element of the Array. This function is a custom function which can be used in order to manipulate data within an array and get a new resultant array.

A simple implementation of map() over an Array. Let’s find the square of all the possible numbers in an array.

ES5 Implementation

var numbers =…

How to Push New Items in JavaScript Array

Push New Items in JavaScript Array, this is the most simple statement that can be achieved with a JavaScript array. This is also very useful in order to build Arrays on the fly.

Now let’s see a very basic example where we will be pushing a data point into an Array

Array of Number

// Simple Example to push numbers and strings into an Array var Numbers = [1,2,3,4,56]; console.log(Numbers)…

Use filter method in JavaScript Array

The Filter method enables you to filter data from an Array as per a rule you provide. It creates a new Array of all the elements that pass the test condition. Simple and Easy to implement.

A simple example of the JavaScript filter() can be as follows

ES5 Version

var numbers = [12, 33, 5, 22, 44, 1, 45, 22, 666, 323, 12, 22, 4]; var ES5_numberLessThanHundred = numbers.filter(function(number) {…

How to Immediately Invoke a function – Self Invocation

Self Invocation of a function is a way in which you can protect your Global Scope by not exposing the variable to the Global Scope. This helps to prevent your code and protect it from accessing the Global Environment.

The way in which you can enable Self Invocation is as follows.

(function() { // Your Code Goes Here!! })();

Self Invocation with Arguments

Its possible to pass Arguments to…

Introduction to ES6 Class

Classes in ES6 are mere syntactical Sugar that you can use to wrap around a function and it will look like a valid class declaration. We will see the comparison of each of the format and also review some samples using ES6 classes. This will give us a precise understanding of the ES6 Classes. Now let’s venture into the four topics that make this journey easy and…

Installing and Getting Started with Vue-cli

Introduction to vue-cli

vue-cli is a utility that is brought to us by Vue.js Team. vue-cli is a utility that helps you to scaffold vue.js applications with various build systems. The various templates or project scaffolding that are available are as follows:-

webpack

webpack-simple

browserify

browserify-simple

pwa

simple

All the above templates are available for you to get started with the Vue.js…

Getting Started with ES6 Arrows

Introduction to ES6 Arrows

ES6 introduced the Arrow syntax for the definition of a function. Typically it’s the same as you have in languages such as C#, Java or if you are acquainted with CoffeeScript then this is just a cake walk for you. This actually helps us as a shortcut for the function definition and can make the code really less cumbersome while you go through it. They support the…