Admit it, handling form validations is a pain when it comes to JavaScript frameworks. Although, form validation is available natively in the browser, there are still some gotchas when it comes to cross-browser compatibility. There are many validation libraries you might want to choose from, but don’t know how to get started.

VueJS ecosystem has form validation libraries like vuelidate and VeeValidate. These libraries are great, but I would like to show you an alternative way of handling validations using a schema-based validation library called yup.

Before getting started, note that this demo uses spectre.css framework for styling the form…


You probably must have used or at least heard about Redux, Mobx or Vuex. These libraries are used to manage state in apps built using frameworks or libraries like React, VueJS, etc. Redux is a framework-agnostic library, that means it can be used in any Single Page Application. Well, these libraries are great for most of the use cases, but when working with a simple application, you probably wouldn’t want to add another library and increase the bundle size.

In this post, I’ll walk you through, how to create a basic state management solution for JavaScript apps using the Pub/Sub…


Photo by energepic.com from Pexels

You might be hearing this buzzword — “Progressive Web Apps” for quite a while for now. Well, it’s nothing fancy, just a few
enhancements to web apps and a very sound selling term minted by Google (or Microsoft 🤷‍♂️). Twitter, Facebook, Flipkart, etc. all have a PWA for mobile devices. PWA enables the user to get a native-like experience on the browser, and the main driving force that powers a PWA is the Service Worker.

A Service Worker is a type of web worker, so let’s first understand web workers in the context of web technology.
Web workers serve as a…


Photo by Jordan Ladikos on Unsplash

Yes, you read the title right, Client side router for a frameworkless SPA, that’s exactly what we are going to build in this story.

Before we dive into the code, let’s first understand what is client side routing.

A client side router runs on the user’s browser. The browser does not make a request to the server for the page, rather it looks into the JavaScript code that is loaded onto the browser to render the page for the matched route.

This is how our router would render the page —
1. Listen on hashchange event or custom event in…


Photo by Daria Shevtsova from Pexels

Pull-to-refresh is a very popular swipe gesture on smartphones that allow users to load new content on top of lists of data. It is used in most popular apps for smartphones and as well as in web apps and has become a major part of UX.


Photo by Sérgio Rola on Unsplash

You must be very familiar with the layout system of popular CSS frameworks like Bootstrap, Bulma, etc. But have you ever wondered how these are built and work behind the scenes. 🤔

In this story, lets try to build our own grid layout system and understand the basics. 😃

I’ll be using Sass for this project so that less code can be written. Sass is really simple, and it won’t be difficult for you to follow along if you are a pure CSS person.
Official Sass guide is a great place to start learning Sass.

Lets begin by defining the…


In this story, lets build animated bar graphs in pure CSS using variables.

You can check out the final output here 👈.

I’ve declared the CSS variables in the style attributes of the bar elements. Initially I tried to use the custom HTML5 data attributes (eg. data-percent) and access it using the attr() css function but it turns out custom attributes passed the value as string and hence invalid property value in CSS 😅.

CSS variables are used to reduce repetition in stylesheets. They store a property value that can be accessed using the var() function.

📃MDN has a…


In this tutorial, we’ll build a smooth navigation interaction inspired by Google’s material design.

You can get the complete code here.

Navigation Interaction

Let’s setup the Markup for the User Interface

.nav will serve as the container to the icons and .nav-items will contain individual icons.

Adding icons in the Markup

I decided to go with the material icons by Google, but you can use any other font library of your choice.

We’ll add the Material icon link in the head section

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

Now lets add these icons inside our .nav-item elements.

You can find more info on using the material icons here.

At this point we can see…

Vijit Ail

Web Developer and UI Enthusiast

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