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.
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…
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.
This is how our router would render the page —
1. Listen on hashchange event or custom event in…
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.
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.
In this tutorial, we’ll build a smooth navigation interaction inspired by Google’s material design.
You can get the complete code here.
.nav will serve as the container to the icons and .nav-items will contain individual icons.
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
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…
Web Developer and UI Enthusiast