Category Archives: Productivity

How to speed up your front-end development workflow with

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.

Your typical React project could include Styled Components for CSS, Storybook for a design system, and Jest for tests.

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

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.

Refer to the full documentation on injection to fully customise Hygen to your needs.

Variables and Helper functions

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.

Refer to the official documentation for

The benefits

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


Setting up 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?

Let me know in the comments. I am curious.

GreenSock Snippets for VSCode

GreenSock Snippets for VSCode

Greensock Snippets for VSCode are now available for you to instal.

If you are like me, you want to have VSCode snippets extension for every language that you use.

This saves you time typing, speeds up your workflow and prevents you from making unnecessary syntax errors.

If you are keen on GreenSock Animation Platform you can now enjoy brand new GreenSock Snippets for VSCode.

What you will get

GreenSock Snippets for VSCode

Autocompletion for .to, .from, .fromTo, .set, import and timeline syntax.

Install GSAP Snippets

Let me know in the comments if I have missed some other snippets that should be also included.

The source code is on Github, feel free to contribute to it

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.

React License Update

React license update – What does it mean for React developers?

The React license has been a concern for the open source community for some time.

Today Facebook has released a statement that React, Jest, Flow, and Immutable.js will be relicensed under the MIT license.

Great news for everyone.

Related Video

Related Tweet

Why the React license update?

Facebook is responding to the reaction of the open source community. Since introducing the BSD + Patents license for React, many developers and companies started to look for alternatives to React.

The founding developer of WordPress Matt Mullenweg announced in his On React and WordPress article that his team is taking a step back and will be rewriting the upcoming version of WordPress (Gutenberg) using a different library.

It will be interesting to see if WordPress spends their time and money rewriting Gutenberg using a different library or this React license update will be enough to win them back.

I would love to see WordPress use React for their codebase in the near future.

What does it mean for React developers?

This update means that everyone can focus on developing and shipping great products instead of worrying about any licensing issues.

No more legal conversations and confusion.

  • The license will be updated for React 16.x and backported to React 15.x.
  • Only React, Jest, Flow, and Immutable.js will be relicensed.
  • GraphQL and React Native do not inherit the MIT license at the moment of writing this post.
  • Other notable projects that use MIT License include Ruby on Rails, Node.js or jQuery.


What do you think about the update? Were you confused about the React licensing issue?

Were you looking for alternatives to React and if so which one did you choose and why?

Let me know in the comments.