Today sharing out my experience on using the frameworks Gatsby JS and Next JS

Gatsby Vs NextJS. (Image Source Google Images)

Gatsby JS:

GatsbyJS is a static site generator. It performs pre-build and returns static files (HTML, CSS, JS) as a result. This means that the back end does the server-side job once on the build stage (besides cases when the client in the browser asks for API).

Features :

  • Support Static Site Generation
  • Support Client-Side Rendering
  • Using GraphQL for data handling
  • Extensive support of in-house and community plugins
  • Using by: reactjs.org, www.figma.com

My Observations:

  • An excellent platform for creating static pages.
  • Out of the box support…

Photo by Igor Miske on Unsplash

Today I’m going to do a share out on the different ways to render a web application. There are mainly 3 ways: Client Side rendering, Server Side rendering and Static site generation.

Client Side Rendering:

Client-side rendering allows developers to make their websites entirely rendered in the browser with JavaScript. Instead of having a different HTML page per route, a client-side rendered website creates each route dynamically directly in the browser. This approach spread once JS frameworks made it easy to take. The advantage of Client-Side Rendering (CSR) is once the page loads all subsequent navigation within the site will…

Here sharing a codepen for recreating a audio player progress bar using HTML, CSS, JS and jQuery.

Checkout the code and try it.

Happy Coding!

Personal Website Preview

Today sharing my experience on creating my own personal website which is hosted on Github.

Website URL: https://aravishack.github.io

Since its a static website, used React JS with Hooks alone for creating it.

React Typed is the one external libraries used for creating the effect of the typewriter. Here is the link to the library :

For hosting on Github, I followed the following docs: https://gist.github.com/TylerFisher/6127328 and https://pages.github.com/

Happy Coding!

Here I'm sharing my experience on recreating a responsive accordion which I saw on the jeep official website.

This uses HTML5, CSS3, JavaScript and jQuery.

Check out the code and try.

Happy Coding!

Here sharing my experiences on recreating a feature where we are comparing two image. The code is available on https://codepen.io/aravi-pen/pen/WPEmga

We will have two images positioned one over the other and a splitter is placed on the center of the image. We have written different mouse handling events to handle this. Check out the code and try to create a preview.

Happy Coding!

Photo by Kelly Sikkema on Unsplash

Here sharing a preview of creating a picture puzzle using HTML5, CSS3, JavaScript and jQuery.

A Conversation chat bot understands the context of the conversation and can handle any user goal gracefully and help accomplish it as best as possible. This doesn’t always mean that the bot will be able to answer all questions but it can handle the conversation well.

Eva is a conversational chat bot, for doing interview. Sometimes it is hard to find a panel to have a discussion or interview with a candidate. Now this problem can be solved by Eva. It manages the engagement of human conversation with the convenience of non-human interaction.

Sharing the experience on creating a chat…

Here the code base of a TodoList App, Which uses ReactJS in Front End and MongoDB, Express JS and Node JS in Back end. Some Key Features explored here is Authorization, Authentication, Protected Routes etc.

Checkout the front end code base here :

Checkout the back end code base here:

Comment if you have any queries on recreating the applications and any issues while installing the packages.

Happy Coding!

Aravind S

A <>er

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