Forem: Narender Saini

How to add less and svg support to Nextjs

Narender Saini — Sun, 18 Oct 2020 03:25:21 +0000

Have you ever face a situation where you want to use less and SVG images with nextjs and you don’t want to spend time making configuration with webpack. Honestly webpack configuration is not that straight forward. Still in 2020 webpack config feels too complicated to even experienced developers. In this article we will gonna add support for less and svg images to Nextjs.

Less support

Less is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client side or server side. In other words less includes a lot of features along with normal css.

To add the support of less to nextjs you need to install two packages @zeit/next-less and less from npm.

npm install --save less @zeit/next-less

After the package installation include a file named next.config.js in root of your project.

Add less config with just 2-3 lines.

const withLess = require('@zeit/next-less');

module.exports = withLess({
  /* config options here */
});

And that’s it now you app supports less. Just try adding a less file and import in your app.

SVG support

Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

Adding svg support to frontend frameworks or library is always interesting. To add the support we will gonna need a package for that i.e next-images.

npm install --save next-images

After the installation just add image config to next.config.js file.

const withImages = require('next-images');
module.exports = withImages();

That’s it. To use the svgs just add a file svg file or a jsx file.

To set the images in background always use .svg format and to render the svg images use .jsx to render as a component.

import { BgLeafIcon } from '../images'; //mage.svg
...
  <div
      className="bg-image"
      style={{ backgroundImage: `url(${BgLeafIcon})` }}
    >

or you can use as a component.

import { BgLeafIcon } from '../images'; //mage.jsx
...
<BgLeafIcon/>

I hope this article will be helpful to you guys. Feel free to comment your valuable thoughts.

How to use Cookie in React

How to make wiggly div in React

Narender Saini — Sun, 11 Oct 2020 03:13:45 +0000

Making Wiggly div is most interesting and at the same time a complex thing. It will be good for cases for like some cool portfolio, a landing page with some important text etc. Its more like making a div more funny. In this article we will gonna learn how we can create a wiggly div in React.

react-wiv

This package is a react version of wiv.js. It uses a library named wiv.js internally. It super simple and easy to create wiggly div using react-wiv. In just few lines of code we can accomplish our task without need to worry about the complexity.

Installation and Usage

Like any other npm package we can install it using npm command.

npm install --save react-wiv

Once this package is installed. You need to import this package using below code.

import Wiv from 'react-wiv'

and we are good to use it.

<Wiv color="#00FF00" height={4} tightness={6} thickness={2} speed={0.55}>
        Blogreact
      </Wiv>

We just provided few props like color, height, speed etc and got this output.

Checkout the live demo using below link.

More demos

Feel free to comment your thoughts.

How to send SMS using Bandwidth in Node

Generate pdf from dom with multiple pages and without cutting

Narender Saini — Sat, 12 Sep 2020 02:48:05 +0000

In the last article we learned about how we can generate pdf from dom elements but there was some bottleneck like that method was only adding one big page and sometime div are cut in half i.e some portion of the div were displaying in the next page. In this article we will gonna learn how we can generate pdf from dom with multiple pages and without cutting.

Dom to pdf

We will gonna use a package name dom-to-pdf in today article. This package basically convert html elements into canvas and svg. After that it converts canvas into the pdf.

This package is more simple and easy to use as compare to last article. In the last article we were using the two different packages one package is converting the dom into an image and then other package was converting the image into the dom. But with dom-to-pdf we can do both the things with single package.

The plus point of this package is it automatically manage the multiple pages format and at the same time it also manage that the content should not be cut while adding into the pdf. In other words no div will gonna be cut in parts while adding to the pdf instead of that it will gonna add whole div to next page which is very useful for most of the cases.

Installation and Usage

We can install this package from npm simply.

npm install --save dom-to-pdf

After the installation import this package one time.

import domToPdf from 'dom-to-pdf';

domToPdf will gonna receive three arguments.

First argument will be the dom element.
Second argument will be the option object.
Third will be a callback function.

    const element = document.querySelector('.summary-report-container');

  const options = {
      filename: "test.pdf",
    };

domToPdf(element, options, () => {
// callback function
    });

The whole pdf generate function will be gonna look like this.

  generatePdf = () => {

    const element = document.querySelector('.summary-report-container');

    const options = {
      filename: "test.pdf",
    };

    return domToPdf(element, options, () => {
      // callback function
    });
  }

It will gonna save the pdf automatically after generation. This way you can generate the pdf with multiple pages and without cutting the content.

How to create range slider with bubble in React

Narender Saini — Sat, 05 Sep 2020 03:23:53 +0000

Let’s assume we have to implement a range slider with bubble. To achieve that maybe most of the developers gonna look for already created solutions/packages. But sometime we don’t get exact thing that we are looking for in that case we need to create that component from scratch. In this article we will gonna create our own range slider with bubble in React.

What exactly we gonna do ?

We will gonna create one parent div with two child. The first child will be an range input and the second child will gonna be a div with input value. Which will gonna move according to the slider position.

Native input with range type will gonna be a best choice because it handles a lot of stuff under the hood. But for value bubble we need to write our own code.

Steps

First of all create a parent div with position relative. Which we needed for the bubble position logic.

    <div className="slider-parent">

    </div>


.slider-parent{
  position:relative;
}

Now add the first child i.e input with type range.

<input type="range" min="1" max="500" />

Add state as well for easy managment.

const [value,onChange]=useState(1);

<input 
type="range"
min="1" 
max="500"
value={value}
onChange={({ target: { value: radius } }) => {
                    onChange(radius);
                  }}
      />

Add our output bubble div which will gonna hold the value.

    <div className="buble"> 
      {value}
      </div>

.buble{
  position:absolute;
}

Now it’s time to add the function for updating the position of our bubble.

  useEffect(()=>{
      const ele = document.querySelector('.buble');
    if (ele) {
      ele.style.left = `${Number(value / 4)}px`;
    }
  })

In above function we are updating our bubble left value according to our input value.

The next question will be why we are diving value by 4.

Let’s assume current value of our input is 428. Now we will gonna adjust the left value manually. We can see at 96px our bubble is aligned. So we need to find a ration value.

currentValue = 428;
bubbleManualADjustValue = 96px;
ratio = currentValue/bubbleManualADjustValue;
ratio = 4;
// Now if we divide our value with ratio we can get our position for bubble.

You will gonna get output like this.

You can write a reusable function for above case.

Full code

import React,{useState,useEffect} from "react";
import "./styles.css";

export default function App() {
  const [value,onChange]=useState(1);

  useEffect(()=>{
      const ele = document.querySelector('.buble');
    if (ele) {
      ele.style.left = `${Number(value / 4)}px`;
    }
  })

  return (
    <div className="slider-parent">
      <input type="range" min="1" max="500" value={value}
         onChange={({ target: { value: radius } }) => {
                    onChange(radius);
                  }}
      />
      <div className="buble"> 
      {value}
      </div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}
.slider-parent{
  position:relative;
}

.buble{
  position:absolute;
}

Feel free to check code on codesandbox and give your valuable comments. I hope you have learned something new.

Speed up web development using Webix

What’s new in React v17.0 ?

Narender Saini — Sat, 29 Aug 2020 03:23:45 +0000

Most of the React developers know that few days ago React released there new version. It’s more then 2 years since the last update in React. In this article we will gonna talk about new features came in the React v17.0.

What’s new ?

In React v17.0 there is no new features. It’s hard to believe but that’s true. Instead of adding new features they resolved a big issue with React i.e upgrading. In the past whenever there is new version of React released it’s too much difficult to upgrade. For example legacy context.

Deprecating the legacy context API, are impossible to do in an automated way. In this case React had two options they can end support for legacy context or they can continue the support. These both options are not that much good. The solution to above problem is came in v17.0.

Gradual Upgrades

In the past developers just need to upgrade there whole app to a new version or they can stick to there old version. There was no win win situation for developers. But now with the gradual upgrade we can use two versions of React in same page.

In simple terms with the release of v17 you can run one part of your app with React old version and another part with latest version at the same time.

The gradual upgrade will only gonna beneficial in special cases where upgrading whole app to a new version is not an option like an old codebase with less maintenance. Otherwise upgrading to latest version is still the best way to use React.

Event Delegation updated

Previously React used to add the event listener like onClick events to document node which become the bottleneck for future updates. But now instead of attaching event to document node it will gonna attach them to root element of your app.

Thanks to this change, it is now safer to embed a React tree managed by one version inside a tree managed by a different React version. Note that for this to work, both of the versions would need to be 17 or higher, which is why upgrading to React 17 is important.

React onFocus and onBlur events have switched to using the native focusin and focusout events under the hood, which more closely match React’s existing behavior and sometimes provide extra information.

Checkout the demo for gradual upgrade.

How to use Glide with React

Narender Saini — Sat, 22 Aug 2020 03:10:53 +0000

Adding a slider or carousel is one of the interesting thing but at the same its complex as well mainly the part where you need to manage the responsiveness. Sliders uses various methods like css transform to hide and show the current slide in the view port. In this article we will gonna look at how to use Glide with React.

What is Glide ?

Glide is a package which is developed using the ES6. It’s a dependency free package. It is super light weight and flexible. The size of this package is around 7KB.

It is developed using the JavaScript without using any external dependency. Thanks to developers this package is developed using the modular approach i.e if you need only selected functionality from this package you can do that and you can drop more weight in production builds.

It supports both Rollup and webpack. If you need to add themes and custom styling you can do that using css and scss.

Installation

The best way to install glide is using the npm. Which result in trouble free integration with webpack and rollup.

$ npm install @glidejs/glide

Usage

Let’s import Glide using there package.

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

Need a few selected modules? Import and mount only needed components. In pair with a bundler’s tree-shaking it’s a great way to reduce the total weight your code!

If you need Breakpoints and controls you can also import them.

import Glide, { Controls, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Controls, Breakpoints })

Example

Let’s make an dummy example to test the glide.

First of all we need to render our html part.

      <div class="glide">
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
            Prev
          </button>
        </div>
        <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">
            <li class="glide__slide">0</li>
            <li class="glide__slide">1</li>
            <li class="glide__slide">2</li>
          </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
            Next
          </button>
        </div>
      </div>

Glide will understand our slide structure using the className. So, you can use same className like glide, glide_arrow, glide_slide etc.

Now import some stylesheets from glide for getting default UI.

// Required Core Stylesheet
import "@glidejs/glide/src/assets/sass/glide.core";

// Optional Theme Stylesheet
import "@glidejs/glide/src/assets/sass/glide.theme";

import package.

import Glide from "@glidejs/glide";

Now we just need to pass the parent className and few options.


new Glide(".glide", {
  peek: 50,
  perView: 2,
  type: "carousel"
}).mount();

You will be able to see output similar to this.

Checkout the whole demo on Codesandbox.

I hope you have learned how to use glide with React. Feel free to write down your comments.

How to use Swiper with React Apps

How to add Animated typing to your React App

Narender Saini — Sat, 15 Aug 2020 03:44:42 +0000

So many of us seen websites which show typing text on there landing page. Most of the time we don’t really know which library they are using to perform that typing animation. In this article you will gonna learn how to add animated typing to your React App.

What is ITyped ?

ITyped is a simple library which is used to create animated typing for web apps. This library is super simple to use. The most interesting thing is that this library doesn’t use any dependency and its size is also 2KB. It also not uses any JQuery internally.

Installation & Usage

This article is for React app so we will gonna use React code for example. First of all let’s start with installing ityped. You can install it from yarn and npm.

npm install ityped

yarn add ityped

Let’s import init function from ityped.

import { init } from 'ityped'

This init function accept two parameter. First parameter is the element ref and second parameter is options of object type.

    const myElement = document.querySelector('#myElement')
      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })

Full example will gonna look like this.

  import React, { Component } from 'react'
  import { init } from 'ityped'

  export default class Hello extends Component {
    componentDidMount(){
      const myElement = document.querySelector('#myElement')
      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })
    }
    render(){
      return <div id="myElement"></div>
    }
  }

It uses various cool options for customization.

 init("#element", {

    /**
     * @param {Array} strings An array with the strings that will be animated 
     */
     strings: ['Put your strings here...', 'and Enjoy!']

    /**
     * @param {Number} typeSpeed Type speed in milliseconds
     */
     typeSpeed:  100,

    /**
     * @param {Number} backSpeed Type back speed in milliseconds
     */
     backSpeed:  50,

    /**
     * @param {Number} startDelay Time before typing starts
     */
     startDelay: 500,

    /**
     * @param {Number} backDelay Time before backspacing
     */
     backDelay:  500,

    /**
     * @param {Bollean} loop The animation loop
     */
     loop:       false,

    /**
     * @param {Bollean} showCursor Show the cursor element
     */
     showCursor: true,

    /**
     * @param {Bollean} placeholder Write the string in the placeholder content
     */
     placeholder: false,

    /**
     * @param {Bollean} disableBackTyping Disable back typing for the last string sentence 
     */
     disableBackTyping: false,

    /**
     * @property {String} cursorChar character for cursor
     */
     cursorChar: "|",


    // optional: The callback called (if `loop` is false) 
    // once the last string was typed
    /**
     * @property {Function} onFinished The callback called , if `loop` is false,
     * once the last string was typed
     */
    onFinished: function(){},
  }

Feel free to checkout the codesandbox demo.

How to write complex layouts in one line of Css

Narender Saini — Sat, 08 Aug 2020 03:08:18 +0000

In the modern era of frontend writing responsive styling became one of the essential skill for all developer. Some times to perform simple things developers write a lot of lines of code which become really difficult to read in future. In this article we will gonna learn how we can write complex layouts in one line of Css.

Centering a child

Centering content is one of the common things that we usually do in day to day life.

Let’s assume we have two divs like this and we want to make child centered always.

<div class="parent" >
  <div class="child" contenteditable>:)</div>
</div>

We can achieve this using the grid.

.parent {
    display: grid;
    place-items: center;
  }

Deconstructed Pancake

Now we have a parent with 3 child and we want them to be responsive. They can take a static size or they can take full size according to available space.

For this we will gonna use flex: <grow> <shrink> <baseWidth>

  <div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>

For no stretching we can make grow 0;

flex: 0 1 150px;

For stretching we can make grow 1;

flex: 1 1 150px;

I hope you have learn how to write complex layouts in one line of Css.

Checkout more complex layout here.

How to add video support to React App

How to use JSX in markdown documents

Narender Saini — Sat, 01 Aug 2020 03:23:49 +0000

Have you ever wondered what if there is a way to write JSX in markdown documents. That will make writing code faster like never before. MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. In this article we will gonna learn how to use JSX in markdown documents.

What is MDX ?

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.

For example

import { Chart } from '../components/chart'

# Here’s a chart

The chart is rendered inside our MDX document.

<Chart />

MDX is markdown for the component era. It lets you write JSX embedded inside markdown. That’s a great combination because it allows you to use markdown’s often terse syntax (such as # heading) for the little things and JSX for more advanced components.

Features of MDX

It offers a lot of features but most important features are given below:

Blending JSX and markdown makes it powerful.
You can use existing components inside your MDX.
We can import MDX files as components.
Decide which component is rendered for each markdown element ({ h1: MyHeading }).
All compilation occurs at build time this makes its super fast.

Usage

You can initialize your project using below command

npm init mdx

You can read how to setup MDX with Webpack, Parcel, Create React App, Next.js and Gastby from official documents.

Comparison

<h1>Hello, world!</h1>

# Hello, world!

Both syntax will gonna show same output.

Traditionally, Markdown is used to generate HTML. Many developers like writing markup in Markdown as it often looks more like what’s intended and it is typically terser.

Instead of the following HTML:

<blockquote>
  <p>A blockquote with <em>some</em> emphasis.</p>
</blockquote>

You can write.

> A blockquote with _some_ emphasis.

Demo

I hope you have learned about how we can use markdown with JSX using MDX.

Tip 2: Create an array of n size without lodash

Fast a new UI library from Microsoft

Narender Saini — Sat, 25 Jul 2020 03:06:46 +0000

Choosing the correct UI library for a project is always most confusing thing for developers. We already have a lot of options like Material UI, Ant Design, Fluent Design, etc. Recently Microsoft has lanuched one more UI library called Fast. In this article we will gonna see how Microsoft Fast is different from other UI library.

What is Fast ?

Microsoft’s Fast mainly focuses on the web components. It have a lot of pre-built web components. You can choose between two adaptive design systems: Fluent Design and FAST Frame. It can be easily integrated with any frontend framework.

FAST is a collection of JavaScript packages centered around web standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.

Installation

Like any other package you can install it from yarn and npm. The fast-components and fast-components-msft libraries contain Web Components built on top of our standard component and design system foundation. fast-components express the FAST design language while fast-components-msft expresses Microsoft’s Fluent design language.

npm install --save @microsoft/fast-components

yarn add @microsoft/fast-components

Usage

To use Fast UI you need to wrap your app with a parent web component wrapper like this.

<!-- ... -->
<body>
    <fast-design-system-provider use-defaults>
    </fast-design-system-provider>
</body>
<!-- ... -->

After that you are ready to use any web component in your app.

For example to use a button we can write.

<fast-design-system-provider use-defaults>
    <fast-button>Submit</fast-button>
</fast-design-system-provider>

The out put will gonna look like this.

Same we have a lot of web components like progress, text-fields, tabs, slider, switch, radio, menu, dialog, cards, checkbox etc etc. You can see full components list here.

The best Reactjs UI frameworks/library in 2020

How to write regex in natural language

Narender Saini — Sat, 18 Jul 2020 03:13:35 +0000

Everyone knows regex is most powerful feature of JavaScript but at the same time it can give hard time to even experienced developers. Reading your regex after few months sometime become too difficult. In today article we will gonna learn how we can write regex in natural language.

Super expressive

Two days ago a new game changing library came into reality. This is a JavaScript library that allows you to build regular expressions in almost natural language – with no extra dependencies, and a lightweight code footprint (less than 3kb with minification + gzip!).

On first place why we need a new library for regex. The answer is simple even the regex is so powerful but writing syntax of regex is too complicated. Most of the time we again need to read the docs of regex to create a new regex.

This library solves the issue of complex syntax. It uses the normal natural language words to create a regex.

Installation

Like any other npm package you can install this library using npm or yarn.

npm i super-expressive --save

Usage

To use this library first of all you need to import this library.

const SuperExpressive = require('super-expressive');

Example

Find Mutiple hello in a string.

SuperExpressive()
  .allowMultipleMatches
  .string('hello')
  .toRegex();
// ->
/hello/g

Find CaseInsenstive Hello.

SuperExpressive()
  .caseInsensitive
  .string('HELLO')
  .toRegex();
// ->
/HELLO/i

Captures the value of a 16-bit hexadecmal number like 0xC0D3

const SuperExpressive = require('super-expressive');

const myRegex = SuperExpressive()
  .startOfInput
  .optional.string('0x')
  .capture
    .exactly(4).anyOf
      .range('A', 'F')
      .range('a', 'f')
      .range('0', '9')
    .end()
  .end()
  .endOfInput
  .toRegex();

// Produces the following regular expression:
/^(?:0x)?([A-Fa-f0-9]{4})$/

Similarly you can create any regex in natural language using this library. I hope you have learned how to write regex in natural language.

Full docs

How to check an element is in viewport using Intersection Observer API

How to check an element is in viewport

Narender Saini — Sat, 11 Jul 2020 03:12:46 +0000

So, maybe you already have seen the case where developer need to check an element (div) is currently visible to user or not. For solving this problem there is a lot of npm packages available but what if we don’t want to use them. In this article we will gonna learn how to check an element is in viewport.

If you want to use a npm package then this will be a good one.

Problem

Let’s assume we have several elements on our page and we want to perform an operation only if a particular element is visible. To handle this problem we will gonna use our custom util function.

Solution

We will gonna create a custom util function which will gonna receive a element and then it will gonna check is it currently visible or not.

Let’s write a util function isVisible and it will gonna receive only one argument i.e element.

export const isVisible = (el) => {

};

Then we will gonna get the position of that element using getBoundingClientRect.

const rect = el.getBoundingClientRect();

Now we will gonna find window height and width.

  const vWidth = window.innerWidth || document.documentElement.clientWidth;
  const vHeight = window.innerHeight || document.documentElement.clientHeight;

We will gonna write a one more function which basically gonna receive x and y point and gonna return element using elementFromPoint function.

const efp = function (x, y) { return document.elementFromPoint(x, y); };

Then we will gonna check our element is inside or not of window.

  // Return false if it's not in the viewport
  if (rect.right < 0 || rect.bottom < 0
            || rect.left > vWidth || rect.top > vHeight) { return false; }

Check is any corner is visible.

// Return true if any of its four corners are visible
  return (
    el.contains(efp(rect.left, rect.top))
      || el.contains(efp(rect.right, rect.top))
      || el.contains(efp(rect.right, rect.bottom))
      || el.contains(efp(rect.left, rect.bottom))
  );

Full function will gonna look like this.

export const isVisible = (el) => {
  const rect = el.getBoundingClientRect();
  const vWidth = window.innerWidth || document.documentElement.clientWidth;
  const vHeight = window.innerHeight || document.documentElement.clientHeight;
  const efp = function (x, y) { return document.elementFromPoint(x, y); };

  // Return false if it's not in the viewport
  if (rect.right < 0 || rect.bottom < 0
            || rect.left > vWidth || rect.top > vHeight) { return false; }

  // Return true if any of its four corners are visible
  return (
    el.contains(efp(rect.left, rect.top))
      || el.contains(efp(rect.right, rect.top))
      || el.contains(efp(rect.right, rect.bottom))
      || el.contains(efp(rect.left, rect.bottom))
  );
};

Usage

import { isVisible } from '../utils';

.....
const ele = document.getElementById(id);
return isVisible(ele);

I hope you have learned how to check an element is in viewport.