Image for post
Image for post
Image by https://dribbble.com/kunchevsky

A 404 page is what a user sees when they try to reach a non-existent page on your site (because they’ve clicked on a broken link, the page has been deleted, or they’ve mistyped a URL).

I am assuming you are using React Router. You have two options to show page not found component

  1. Redirect to yoursite.com/404
  2. Show Page not found content with requested URL.

Redirect to yoursite.com/404

In Order to redirect you need to import Redirect from “react-router-dom”. Place the redirect code at the very last path of your routes.

Now you App.jsx look like

import React from "react";
import { Redirect, Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
class App extends React.Component {
render(){
return(
<BrowserRouter>
<Switch>
<Route exact path='/' component={HomePage} />
<Route path="/404" component={NotFoundPage} />
<Redirect to="/404" />
</Switch>
</BrowserRouter>
)
}
}

export default…


Image for post
Image for post

Quick Summary

I was working on my portfolio by using next.js on the Github pages, I face some issues while deploying the projects. So I decided to write a blog to help others.

Links

Portfolio: https://naveenda.github.io/

Source Code: https://github.com/NaveenDA/naveenda.github.io


Image for post
Image for post

Introduction

React 17 got released a few ago with no new features but still, you need to upgrade your react version because React is developed by the community. So that testing should be done by the community.

Create React App supports React 17

A few days ago create-react-app 4.0 is released with a bunch of improvements including the react-17.

This is a good time to upgrade your react version.

You might know that the react-17 has no features for developers but still, you need to update you existing react version to 17.

No Features? Why Need to Update?

A react is not fully maintained by Facebook, it was also maintained by the tons of developer around the world. It was a community effort, they might do code by sacrificing their weekends, nights of sleep, etc. …


I am an average developer who visited the Stackoverflow and Programming Humor on a daily basis for some work and relax.

I could see a lot of curation for the best StackOverflow questions for the month/week, but none for the best Programming Humor Meme. So I decided to curate one.

Here are the Top 30 Fresh (Not Unique: Same Concept but with different Templates) Memes from the Programming Humor on the Month Oct-2020

1. These professors need to slow tf down.

Image for post
Image for post

2. “Just cache it


Image for post
Image for post
React Performance Tips

Quick Summary

When you see the react application first painting timing too high in Lighthouse Performance report, you can easily improve by using react-snap.

Introduction

I was working on the react PWA application, during the lighthouse audit I was just checking the other options in the Lighthouse studio due to the Curiosity.


Image for post
Image for post

Quick Summary

If you are working a project with more than 2 developers, you might note different formatting code create different kinds of issue like merge conflicts, code unreadable, etc. To avoid such cases, we can set up git hooks that format the code before the push into the remote server.

Let’s start

For the simplicity purpose, I am gonna use a simple react application that creates by using create-react-app.

Setup the Git hooks

Git hooks are basically kind of event listener, you can any git events by using Githooks.

In the Javascript world, Husky makes Git hooks as easy 🐶 woof!.

Let’s install the husky in our project. …


Image for post
Image for post

Quick Summary

When rendering the large set of data, we all facing some issues related but the big companies do something to avoid such things to affect their application performance.

When you have to render a list of more than 25000 records you notice a significant performance delay on your React application even you are using cutting-edge technology like react, babel, typescript, chrome, etc.

Let’s start rendering a list that contains 25000 records

Now your application starts being to slowdown while rendering this component, now you have 3 options to effectively render this

  1. Pagination
  2. V-DOM based Rendering

Remember

Your user can’t able to see 25000 records at the time and they don’t want to to…


Image for post
Image for post
Integrate MJML With NodeJS/Express Application

Quick Summary

When you working with e-mail content you will know the rendering the e-mail in all mail client is a harder job than writing a JS framework. But MJML takes care of that job and work like a pro.

MJML

https://mjml.io/


Image for post
Image for post

Quick Summary

While implementing the client search, generally we use the string comparison method likeindexOf , contains , etc. These methods are good but in the real world, people might search the content with the wrong spelling, wrong ordered sentences, etc. Fuzzy Search will enable us to address those problems.

Fuzzy Search

Fuzzy Search or Approximate string matching is a string matching technique to match the string approximately rather than exact match.

Alright, let us build the application.

We are going to build a simple page with some text and search box on it.

About

Naveen DA

I am developer who loves ReactJS and Economics.

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