Extra-wide 2XL breakpoint – 2xl: is targeting 1536px and above
Default line-heights per font-size – now every font-size has its own line-height specified by default
Extended spacing, typography, and opacity scales – now you can be more specific when defining margin, padding, font-size, or opacity
@apply – @apply now works with anything, hover: did not work in the previous version
Group-hover and focus-within are now enabled by default. This is useful if you want to highlight a whole container if a button inside of it is in focus, or change the text color of all children if you hover over a parent div container.
Default CSS transition – predefine your CSS transition duration and easing and then only apply one class
Dropped IE11 support
New Features
Dark mode support – it is now easy to enable dark mode and use dark: variant
I work on a lot of Next.js and React projects, and especially in the initial phase of each project, I have to create a lot of files for each component.
If you want to create a new Header component, you have to manually create a folder /src/components/Header and then the following files:
create a component file – Header.js
create a stylesheet – Header.styles.js
create a storybook story – Header.stories.js
create a test file – Header.test.js
Then inside of each file you probably use some React code snippets for VSCode to quickly create a functional component or the necessary content for each file.
In this article, I will show you how you can speed up this process with Hygen.io.
If you want to save some time and speed up your front-end development workflow, keep reading.
This guide is useful for any framework or programming language and is not React or Next.js specific.
Are you new to React? Learn React from scratch in React 101.
Duplicate components
Duplicating components is another way how to quickly create all of these files, but quite often involves:
deleting previous code inside of each file
fixing import statements (VSCode helps with that)
other clean up
And your app might be temporarily broken until you tidy everything up.
What we want is to run one command to generate all files and their content too!
What is Hygen?
Hygen is a scalable code generator that saves you time, simple as that.
Once you set it up, you will be able to:
generate multiple files
generate the content of each file based on a template
inject any code inside of any file
The injecting part is useful if you are using index files (barel) to simplify your import statements.
We will install Hygen to do all of this for us.
How to install Hygen?
You can install Hygen globally or use npx to execute it without installing it.
// install hygen
npm i -g hygen
npx hygen ...
Firstly initiate Hygen in your current project directory.
// initiate hygen
hygen init self
This adds _templates folder in the root of your project with a generator inside of it.
Now we can create our generator and call it component.
// create new generator
hygen generator new component
To run the component generator is simple:
// run custom generator
hygen component new
This would try to generate files based on all templates in the /_templates/component/new folder.
If we run this new component generator, Hygen would create a new file in /app/hello.js, with the hello constant and console log inside of it.
Custom templates for new React component
Modify it to create a new Header component.
You can modify the filename from hello.ejs.t to index.ejs.t, it does not really matter.
And change the content of the template to this:
---
to: src/components/<%= name %>/<%= name %>.js
---
import React from 'react'
export const <%= name %> = ({ children }) => (
<div className="<%= h.changeCase.paramCase(name) %>">{children}</div>
)
Of course, you can include any React component snippet that you wish.
This template that would generate Header.js like this:
// /src/components/Header/Header.js
import React from 'react'
export const Header = ({ children }) => (
<div className="header">{children}</div>
)
The top part of the template includes metadata. Here is a list of all the Frontmatter properties, such as where to create the new file.
The bottom part contains the body of the template using EJS.
Whatever your naming convention is, run the generator to create the files with the correct name, eg. header or Header.
// generate new Header component
hygen component new Header
// run in a test mode
hygen component new Header --dry
// Header is the name variable inside of the template
<%= name %>
Do you see how everything is transformed based on the name (Header) of the component? That is the beauty of setting up these templates based on your project.
It is great to dynamically generate one file, but by generating multiple files you are really speeding up your front-end development workflow.
Generate multiple files
Depending on the configuration of your project, you might need to create multiple other files, not just the component folder and the js file.
For each file that you need to generate, include a new template file in _templates/component/new and name it whatever you like.
Here is an example of styled components.
// /_templates/component/new/styles.ejs.t
---
to: src/components/<%= name %>/<%= name %>.styles.js
---
import styled from 'styled-components'
export const <%= name %>Wrapper = styled.div`
`
Here is an example of a story for storybook.
// /_templates/component/new/story.ejs.t
---
to: src/components/<%= name %>/<%= name %>.stories.tsx
---
import React from 'react';
import { Meta, Story } from "@storybook/react/types-6-0";
import <%= name %>, { <%= name %>Props } from './<%= name %>';
export default {
title: 'Components/<%= name %>',
component: <%= name %>,
} as Meta;
const Template: Story<<%= name %>Props> = (args) => <<%= name %> {...args} />;
export const Primary = Template.bind({});
Primary.args = {};
Hygen will take all the templates in the /new folder, and generate the related files.
Pretty cool, huh?
Inject export into index.js
It is useful to create index.js in the components folder to simplify your import statements.
Here is how you can use Hygen to inject a line into it:
---
inject: true
to: src/components/index.js
skip_if: components/<%= name %>
append: true
---
export { default as <%= name %> } from "./<%= name %>/<%= name %>";
inject will add the content of the template to the specified file, and it will skip if the component is already there.
You can choose whether to append or prepend the new content.
Sometimes you need to transform the name of the component to uppercase, lowercase, camelCase, and for that, there is a lot of helper functions that you can use.
Apart from speeding up your front-end development workflow, you can also include these templates in the project source code for other team members to use.
everyone saves time
consistent project structure
easier onboarding
Conclusion
Setting up Hygen.io does not take more than 5 to 10 minutes and can save you valuable time in the long run.
How do you generate new files on your React or Next.js project?
In the previous tutorial, we’ve covered how to create some cool page transitions using Barba.js and the CSS plugin. Today we will break down some the of terms associated with Barbas page transitions logic.
This will help you to trigger the right transition at the right time.
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
barba.use(barbaCss);
// Initiate Barba
barba.init();
<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 -->
</div>
<!-- content that stays the same on all pages - eg. footer -->
</div>
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
To create a simple fade in transition on page load we can use the once hook.
barba.init({
transitions: [
{
once() {}
}
]
});
Barba.js will add and remove the following CSS classes .barba-once, .barba-once-active and .barba-once-to during the transition.
.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.
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.
barba.init({
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:
.home-once
.home-once-active
.home-once-to
The format of the class is always the same: .[name]-[hook]-[state].
How to create CSS transition between two pages
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.
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
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.
This is a simple full-screen element covering the whole viewport, by default it is positioned outside of the viewport using 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.
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.
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.
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.
