Display a Progress Bar on route changes in a Next.js app.

Sometimes when we transition from one route to another, it takes a little time to do so due to different factors. Behind the scenes, it may be rendering a complex page component or doing an API call. In such cases, the app looks like it has frozen for some seconds and then suddenly transitions to the next route. This results in a poor UX. In such cases, it is better to add a progress bar to our application which gives our users a sense that something is loading.

In this tutorial, we learn how to implement a progress bar in…


Learn how to improve the look and feel of the Next project by configuring the default Bootstrap behaviour.

A few months back, we wrote a blog on how to add and customize Bootstrap in Nuxt.js. Today, we will learn how to set up Bootstrap in a Next.js project. We will also install react-bootstrap to use Bootstrap based React components.

Contents

  • 1. Installing Bootstrap
  • 2. Creating a Custom SCSS
  • 3. Configuring Next Config
  • 4. Importing Bootstrap

1. Installing Bootstrap

Let us get started by installing the required NPM packages. We will install bootstrap and optionally react-bootstrap.

Since we are going to create custom SCSS files, we also need to install node-sass.

npm install --save bootstrap react-bootstrap node-sass

2. Creating a Custom SCSS

Let us now create a custom…


Convert NPM, Bash scripts to VS Code tasks and run them from anywhere.

VS Code comes with a great feature of specifying tasks and running them through Command Palette. There can be a variety of scripts that we need to run while developing our applications. For example, before releasing a new build, there are a lot of things that need to be done by the release team. Some of them include bumping release version, creating release notes, generating changelog and the list goes on.

In this tutorial, we will learn how to use VS Code Tasks by taking the example of pre-release commands and ensure that no step is missed along the way.

Contents


Supercharge your Nuxt/Vue App Development by using these extensions in VS Code Editor.

This blog was originally published on RavSam’s blog. We publish our articles on Medium after a week.

Using the right set of tools can make us a happy and better developer. Right tools reduce friction and help us develop applications faster. In this blog, we will take a look at some of the best VS Code extensions that we can use for developing Nuxt/Vue apps. These extensions help us with things like linting, formatting, debugging, and more.

1. Vetur


Know about the Maintenance stack we use at RavSam to keep our projects updated and secure.

This blog was originally published on RavSam’s blog. We publish our articles on Medium after a week.

Contents

  • Manual Maintenance is tough and boring
  • Renovate — Automated Dependency Updates
  • Imgbot — Automated Image Optimization
  • RavSam Bot — A Github Probot App

Manual Maintenance is tough and boring

Most of the effort in the software business goes into the maintenance of the code that already exists. Once the software is built, many factors affect its performance over time. We need to fix bugs, address security vulnerabilities, make performance improvements, and decrease technical debt.

Managing a single piece of software is easy but as a developer, we often have…


Build and Deploy a Serverless Probot or Github App on Netlify Functions to automate your Github and achieve infinite scalability.

This blog was originally published on RavSam’s blog. We publish our articles on Medium after a week.

Automation is love. We all love automating repetitive things. There is one such thing called Probot. Probot is one of the most popular frameworks for developing GitHub Apps using Javascript. It is easy to set up as most of the things like setting up authentication, registering webhooks, managing permissions, are all handled by Probot itself. We just need to write our code for sending responses to different events.

In this article, we will learn how to build and deploy a serverless bot to…


Learn how to set up a Strapi app on VPS, DigitalOcean, Linode with Ubuntu, MySQL.

This blog was originally published on RavSam’s blog. We publish our articles on Medium after a week.

So you have built your Strapi project and the next thing you need to do is to deploy it on a production server. In this blog, we will learn about how to set up a Virtual Private Server(VPS) and then deploy our Strapi application. We can apply this guide to any kind of servers like Linode, DigitalOcean and many more.

Contents

  • Steps
  • 1. Create a non-root user
  • 2. Create a Public-Private key pair
  • 3. SSH as a new user
  • 4. Add SSH key to…


Format, Static Analyse, and Test a Dart project using Github Actions.

This blog was originally published on RavSam’s blog. We publish our articles on Medium after a week.

When working in a team or even as an individual, we humans often break rules. But sometimes breaking rules can result in a poor quality code which over time grows out to be messy. We can take advantage of linting and static analysis to check whether the written code adheres to our code styling rule. This can be automated using Github Actions. …


Turn your Google Sheet into a REST API and access it in any application.

This blog was originally published on RavSam’s blog. We publish our articles on Medium after a week.

What if we can use our Google Sheets as a CMS? What if we want the data in our Google Sheet to be publicly available. This can be done easily using Google Sheets and Google Apps Script. In this blog, we will take a look at how we can convert a Google Sheet into a REST API and access it publicly from any app we want.

Contents

  • 1. Setting up a Spreadsheet
  • 2. Creating a Google Apps Script
  • 3. Converting data to JSON format


Provide your subscribers with an option to opt-out of mailing lists by adding unsubscribe link using Google Apps Script.

This blog was originally published on RavSam’s blog. We publish our articles on Medium after a week.

When setting up our email marketing campaigns or newsletters, one thing that is often forgot is the Unsubscribe link. Not providing an option to unsubscribe from the mailing list can land our emails into spam. In this blog, we will look at how we can add an Unsubscribe link in our emails sent using Google Apps Script.

Contents

  • 1. Setting up a Spreadsheet
  • 2. Writing a Hash Function
  • 3. Writing Email Template
  • 4. Writing Unsubscribe Code
  • Results

1. Setting up a Spreadsheet

The first task is to set up…

Ravgeet Dhillon

Co-Founder and Developer at ravsam.in

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