Tag Archives: npm

Barba.js and CSS Plugin Tutorial

Page Transitions Tutorial – Barba.js with CSS Plugin

Do you want to add page transitions to your project but don’t feel comfortable with JavaScript or GreenSock animations?

In this page transitions tutorial, you will learn how to use Barba.js with the CSS plugin to create page transitions purely with CSS.

What you will learn:

View Demo Download Files


Include @barba/core, @barba/css plugin in your JavaScript module, and tell Barba to use the CSS plugin.

// install via npm or yarn
npm install @barba/core @barba/css
yarn add @barba/core @barba/css
// Include Barba and Barba CSS in your project
import barba from '@barba/core';
import barbaCss from '@barba/css';

// Tell Barba to use the CSS plugin

// Initiate Barba
<body data-barba="wrapper">
    <!-- content that stays the same on all pages - eg. header -->
    <div data-barba="container">
        <!-- content that will change from page to page -->
    <!-- content that stays the same on all pages - eg. footer -->

Barba.js will now add and remove specific CSS classes from the data-barba="container".

These CSS classes will be based on the transitions that we need to specify.

If you are completely new to Barba.js, you can check this tutorial to learn more about the required HTML markup.

How to create fade-in transition on page load

Barba.js CSS Page Transition

To create a simple fade in transition on page load we can use the once hook.

	transitions: [
            once() {}

Barba.js will add and remove the following CSS classes .barba-once, .barba-once-active and .barba-once-to during the transition.

/* Page load animation */
.barba-once {
    opacity: 0;
.barba-once-active {
    transition: all 1s linear;
.barba-once-to {
    opacity: 1;

.barba-once and .barba-once-active will be applied at the start of the transition.

.barba-once-active and .barba-once-to will be applied during the transition.

This hook is called once, because this transition only runs once on the page load.

When the CSS transition is completed, all CSS classes will be removed from the container.

Barba CSS with once hook

How long these classes stay on the container depends on the duration of the CSS transition or animation.

Because the CSS plugin overrides the main once hook, any code inside of once will be ignored. The same applies to the enter and leave hooks.

	transitions: [
            once() {
                console.log('this will be ignored');
            beforeOnce() {
                console.log('shows up BEFORE once transition');
            afterOnce() {
                console.log('shows up AFTER once transition');

If you need to run any code related to the once transition use beforeOnce or afterOnce hooks.

How to customize the name of the CSS class?

You can customize the CSS classes by specifying a name for your transition.

transitions: [
        name: "home",
        once() {}

If you specify home as the name, Barba will generate these classes:


The format of the class is always the same: .[name]-[hook]-[state].

How to create CSS transition between two pages

Barba.js CSS Page Transition

Every page transition has two phases.

Firstly the current page leaves, then the next page enters.

To use CSS transitions between two pages, we need to specify the hooks inside of the Barba transition, even if there is no code inside of them.

transitions: [
        name: "fade",
        leave() {},
        enter() {}

Now we can add the CSS transitions to the stylesheet.

/* =Fade out, fade in */
/* Fade out current container */
.fade-leave {
    opacity: 1;
.fade-leave-active {
    transition: opacity 0.3s linear;
.fade-leave-to {
    opacity: 0;

/* Fade in the next container */
.fade-enter {
    opacity: 0;
.fade-enter-active {
    transition: opacity 0.3s linear;
.fade-enter-to {
    opacity: 1;

1. Fade out the current page

Barba CSS with leave hook

In the first phase of the transition, we are fading out the current page.

.fade-leave /* start of the transition */
.fade-leave-active /* CSS transition */
.fade-leave-to /* end of the transition */

The state of our container is opacity: 1 at the start of the transition and opacity: 0 at the end of the transition.

.fade-enter-active class defines the CSS transition that will be used, eg. opacity 0.3s linear.

2. Fade in the next page

Barba CSS with enter hook

In the second phase of the transition, we are fading in the next page.

.fade-enter /* start of the transition */
.fade-enter-active /* CSS transition */
.fade-enter-to /* end of the transition */

We are starting from opacity: 0 and finishing with the page fully visible at opacity: 1.

Of course, you can combine the CSS selectors if the styles are the same.

/* =Fade out, fade in */
/* Fade out current container */
.fade-enter-to {
    opacity: 1;
.fade-enter-active {
    transition: opacity 0.3s linear;
.fade-enter {
    opacity: 0;

Perfect, this was a simple fade transition, but what if wanted to make a transition where both containers are visible on the page? How would we do that with Barba.js?

Let’s see in the next example.

How to create clip-path transition

Clip-path page transition using Barba.js

Now that you know the basics of Barba.js and the CSS plugin, only your imagination is your limit!

In the next example, we will try to reveal the next page from the center of the screen.

We will clip the incoming page clip-path: circle(0%); at the start and reveal it by specifying clip-path: circle(75%); as the end of the transition.

For this effect, we need to have both containers on the page and Barba has a sync mode build-in exactly for that.

transitions: [
        name: "clip",
        sync: true,
        leave() {},
        enter() {}

This will append the next container to the page and we will have both containers available for the transition.

Without the sync mode, the current page is removed from the DOM just before the next page is appended.

/* =Clip-path transition */
.clip-enter { 
    clip-path: circle(0%); 
.clip-enter-active {
    position: absolute;
    top: 0;
    z-index: 2;
.clip-enter-active {
    transition: all 0.75s var(--easing);
.clip-enter-to { 
    clip-path: circle(75%); 
.clip-leave { 
    opacity: 1; 
.clip-leave-to { 
    opacity: 0; 

With both containers on the page, we are overlapping them by positioning the incoming page on top of the current page.

Then we are animating the clip-path from 0% to 75%.

At the end of the transition, the current page is removed from the DOM and the next is the new current.

Makes sense? I hope it does.

It is quite fun to play with these transitions. Agree?

Let me know in the comments.

How to create a cover transition

Cover page transition using Barba.js

In this example, we will look at how to cover the current page and reveal the next page.

For this effect, we will need to include .transition element inside of each page.

<div data-barba="container">
    <div class="transition">
        <h2>Cover Screen</h2>

This is a simple full-screen element covering the whole viewport, by default it is positioned outside of the viewport using transform: translateY(-100%);.

/* =Transition with cover screen */
.with-cover-leave-active .transition,
.with-cover-enter-active .transition {
    transition: transform 0.5s var(--easing);
.with-cover-leave .transition {
    transform: translateY(-100%);
.with-cover-leave-to .transition,
.with-cover-enter .transition {
    transform: translateY(0);
.with-cover-enter-to .transition {
    transform: translateY(100%);

In the first phase, we are transitioning the .transition element to translateY(0) using the .with-cover-leave-to .transition selector. This is also the starting position for the enter animation.

Then we are moving the .transition out of the viewport to transform: translateY(100%); using the .with-cover-enter-to .transition selector.

As you can see, the stylesheet could grow quite quickly.

Especially if you want to animate multiple elements in a sequence, that is where JavaScript animations with GreenSock come very handy.

How to create a slide transition

Slide page transition using Barba.js

Now that you know what sync: true does, you can come up with any transition that needs both containers.

One of these transitions could be a slide transition.

.slide-enter-to {
    transform: translateX(0);
.slide-enter-active {
    transition: all 0.7s cubic-bezier(0.5, 0.7, 0.4, 1);
.slide-leave-to {
    transform: translateX(100%);

.slide-enter {
    transform: translateX(-100%);
.slide-enter-to {
    position: absolute;
    top: 0;
    left: 0;

At the start of the transition, we are using .slide-enter CSS class to position the incoming next page outside of the viewport.

Then we are animating both containers by 100%. The current page goes away from the viewport to translateX(100%) and the next page moves to translateX(0).

The page entering the viewport is positioned absolute during the transition as we have defined in the .slide-enter-to CSS class.

And that is it, now you have learned how to create 4 different page transitions using Barba.js and the CSS Plugin.

Final Demo

View Demo Download Files

Things to remember

  • You need to add an empty hook to your JS, to use CSS transition for that hook!
  • The JavaScript code in once, enter, leave hooks will be ignored!
  • beforeOnce, afterOnce, beforeEnter, afterEnter, beforeLeave, afterLeave can be used.
  • Currently, there is a bug with the back button not triggering the transition.


As you can see from the above examples, you can create some interesting page transitions using CSS transitions.

You have learned how Barba.js and the CSS plugin works and which CSS classes are applied to your container during the page transition.

Have you seen any cool page transitions on the web?

Let me know in the comments and don’t forget to check out some of my online courses to learn even more about creative front-end development.

Next.js Google Spreadsheets

Failing Build of Next.js and Google Spreadsheets

Are you trying to connect Google Sheets with your Next.js app?

I have come across an issue with failing builds when deploying to Vercel and to save you hours of debugging, here is what worked for me.

The Issue

All I wanted to do is to load data from Google Spreadsheet and display them in my React component. I am using Next.js and google-spreadsheets package.

In next.config.js I am setting up the environmental variables to be able to connect to the Spreadsheet when the page is served .

module.exports = (phase) => {
    const env = {
        private_key: (() => {
            if (isDev) return process.env.private_key
            if (isProd) return process.env.private_key
            if (isStaging) return process.env.private_key
            return 'private_key:not (isDev,isProd &amp;&amp; !isStaging,isProd &amp;&amp; isStaging)'

This worked fine locally but the build was failing when it was deployed to Vercel.

Error: error:0909006C:PEM routines:get_name:no start line

Here is the screenshot of the log.

Next.js + Google Sheets build error

After hours of debugging, calling for help and swearing at it, I had a look at how gatsby-source-google-spreadsheets works and there was the answer.

The Fix

To fix the issue I had to add .replace(/(\\r)|(\\n)/g, '\n') after the private_key.

if (isDev) return process.env.private_key.replace(/(\\r)|(\\n)/g, '\n')
if (isProd) return process.env.private_key.replace(/(\\r)|(\\n)/g, '\n')
if (isStaging) return process.env.private_key.replace(/(\\r)|(\\n)/g, '\n')

Happy times.

I am sure someone smarter than me can explain in the comments what exactly this regex does, I just know that it replaces \n with real line breaks.

Git config tutorial

Git Config Tutorial

Have you ever wanted to change the default commit message in Git config?

In this Git config tutorial you will learn:

If you are completely new to Git checkout out the Git Tutorial for Beginners or my complete Git tutorials playlist on Youtube.

Where do you find the Git config files?

The following Git config files locations are Mac specific.

System vs Global vs Local Git config

Before we get to the locations, I just want to clarify that there are 3 different scopes for Git config.

System Git config controls settings for all users and all repositories on your computer.

Global Git config controls settings for the currently logged in user and all his repositories.

Local Git config controls settings for a specific repository.

These 3 config files are executed in a cascading order. First the system, then global and finally the local.

That means that your local Git config will always overwrite settings set in the Global or System configs.

Git config tutorial

// System

// Global

// Local

In general you most likely want to edit the Global settings and occasionally set some more specific configuration for a single repositories.

Your username and email should be the same for all your repos, that is why it is stored in the Global config.

How do you view your Git config settings?

git config --list
git config --list --system
git config --list --global
git config --list --local

If you don’t specify which of the configs you would like to see, you will get all 3 configs merged into the output in your console.

To edit any of the files use the --edit flag or open the file in a text editor.

How to add or delete a record from Git config?

The following commands would add or remove your name and email from the Global config.

// to add
git config --global user.name "Your Name"
git config --global user.email "[email protected]"

// to remove
git config --global --unset user.name
git config --global --unset user.email

If you want to read a specific record from Git config use: git config user.name.

How to create a custom Git commit message?

Sometimes it is useful to create a template for your commit messages. This keeps your commits consistent.

To create custom Git commit message firstly create a text file containing your message.

// example from the official Git documentation
Subject line (try to keep under 50 characters)

Multi-line description of commit,
feel free to be detailed.

[Ticket: X]

Save this file as .gitmessage in your user directory eg. ~/.gitmessage.

Then update the global config to point to the right location.

git config --global commit.template ~/.gitmessage.txt

Now you should see your own custom message when you make a new commit.

Git config tutorial

How to use Git alias?

Git alias is another setting saved in the Git config file. It lets you execute longer Git commands by predefined shortcut.

git config --global alias.last "log -1 HEAD"

If you add the above alias to your Git config you can use git last to access the log of your last commit.

The possibilities are endless.

Have you enjoyed this Git tutorial? You might also like


There is much more to Git config, but hopefully this article made it clear how you can configure your own Git environment.

Let me know in the comments what are your own Git tips and tricks.

Git Cheat Sheet

Git Cheat Sheet – Useful Git commands in one place

In this Git Cheat Sheet, I have put together the most frequently used Git commands for both Git beginners and seasonal professionals.

If you are constantly looking up some common Git commands, or learning Git from scratch this is for you.

Let me know what you think in the comments. Enjoy.

Continue reading

Git reset tutorial

Git Reset Tutorial

Git reset can be quite overwhelming and scary.

If you don’t know what you are doing, things can go horribly wrong and you can lose some of your work.

In this Git reset tutorial you will learn how to undo your changes in all practical scenarios that I could think off.

Table of content

Are you new to Git? Checkout Git tutorial for beginners and Git branches tutorial.

How to unstage changes in Git

Your Scenario:

You are working on your local branch and you have staged 2 files using the git add . command.

Git reset tutorial

How do you now unstage one of the files?

The Answer:

git reset readme.me

git reset readme.me would reset only the specified file and move it to the unstaged changes.

Git reset tutorial

What if you wanted to unstage all changes currently staged?

git reset HEAD

git reset HEAD would move all your staged changes to unstaged.

Git reset tutorial

In other words it moves the HEAD pointer to the last commit, resets the staged area and keeps your changes.

What if you wanted to reset and at the same time also wanted to get rid of your changes?

git reset --hard HEAD

git reset --hard HEAD would reset HEAD to the last commit and trash all your changes. The image below shows that the readme.md file has been deleted after the hard reset.

Git reset tutorial

How to revert file to a specific commit

Your Scenario:

You are working on your local branch and you have already created a few commits but you want to revert file to a specific commit.

Git reset tutorial

Firstly you need to find out the hash ID of the commit, run the git log --pretty=oneline command.

Git reset tutorial

Pick a commit that contains the desired version of your file.

If you are not sure which commits contains the changes you are after, use the git diff command.

git checkout cb5f4f0 navigation.md

git checkout cb5f4f0 navigation.md would checkout this file and place it in your staged area.

Git reset tutorial

What if you only want to get a specific changes from this file?

You can choose what to bring back by adding -p and patch your working directory.

git checkout cb5f4f0 navigation.md -p

More on that in the next section.

How to manually edit Git changes

Your Scenario:

You need to revert changes in one of your files, but you want to choose which lines of code to bring back.

Git reset tutorial

You get a few options when you specify the -p flag:

  • y yes, bring these changes
  • n no, don’t bring changes
  • q quit and don’t bring any changes. It’s like no but for all files.
  • a stage this change and all other changes
  • d do not stage this change or any other changes in the file
  • s split the current change into smaller
  • e edit manually the current change

s will split a bigger change into smaller ones, this makes it easier to edit.

e will enter a manual mode, where you can choose which lines to bring and which ones not.

To enter the editing mode you need to press i for insert, now you are able to navigate through the changes.

Git reset tutorial

The lines marked with minus - at the start would be removed if we bring this change into our current version of the file.

To ignore removing these lines, simply delete - and replace it with an empty space .

The lines marked with plus + will be added to our current version of the file.

To prevent these lines from being included in the change, we can remove them and they will be ignored .

Here are the changes edited. We want to keep the Categories and 3 bullet points and only bring in Line 1, Line 2 and Line 3.

Git reset tutorial

Adding Heading 1 back to our file will be ignored, because we have manually deleted this line.

To quit the edit mode press Esc and type in :wq and hit enter. w for write, q for quit.

To quit without editing type :q + enter.

Below is the file patched with the recovered code from our previous commit.

Git reset tutorial

Have you enjoyed this Git tutorial? You might also like


If you have enjoyed this article you might also like Git tutorial for beginners and Git branches tutorial.

What is the most confusing Git feature that you would like to see explained in my future tutorials?

Let me know in the comments below.

Visual Enhancements of VScode

Useful VSCode Extensions – Visual Enhancements

Are you looking for some useful VSCode extensions that could speed up your front-end development workflow?

I have been building React and Angular projects in VSCode over the last few years and in the next few posts I will share with you my most popular VSCode extensions.

Hope you will find this collection useful.

The first section will focus on visual enhancements.

These extensions are useful for any projects, not just React or Angular development.

Related Video

Indent Rainbow

Indent Rainbow for VSCode

Indent rainbow is a simple extension that makes indentation more readable by colorizing each tab indentation.

Indent Rainbow for VSCode

By default it comes with a “rainbow” of colors, but if you prefer something more subtle like me, simply past the following configuration into your User Settings.

“indentRainbow.colors”: [

Indent Rainbow for VSCode

These colors work great with the default VSCode theme and seamlessly blend in the default VSCode color scheme.

View Extension

Bracket Pair Colorizer

Bracket Pair Colorizer for VScode

If you write React, Vue or Angular code you most likely have quite a lot of brackets in your code.

This extension helps you identify matching brackets with colors and connect them with lines too!

Bracket Pair Colorizer for VScode

You can disable the vertical and horizontal line around the block of code. Simply add this to your User Settings.

“bracketPairColorizer.showHorizontalScopeLine”: false

View Extension

Better Comments

Better Comments for VSCode

Better comments extension lets you highlight certain comments in your code.

Better Comments for VScode

Highlight things to do, questions or important notes for other developers.

View Extension

Color Highlight

Color Highlight for VSCode

Color Highlight styles css colors found in your document.

Color Highlight for VSCode

Not only does it recognize colors in your stylesheet but also in other files such as .js, .jsx, .ts, .tsx and other file extensions.

View Extension


What are some of your favorite extensions that fall into the category of VSCode visual enhancements?

Let me know in the comments.

And don’t forget to check out my other collection of useful extensions for VSCode.