Quick Bit

Using template repositories with GitHub

June 18, 2020

I tend to do a lot of side projects. I like to try out and explore instead of just reading about something. This leads to quite a few public and private repositories on my GitHub (at the time of writing ~80). Most of these never see the light of day, but still require a project set up to get started. Next to that, I start quite a few actual projects as well. I like to have a few things like frameworks, linting, testing etc. setup. Let's have a look at making this a breeze with GitHub template repositories.

The old way

I used to start new projects in three different ways:

Fork another repository that fits the needs and remove what is not needed
Fork a boilerplate repository
Create a new repository and copy files from another local repository

These three do the trick but come with issues. Firstly, I don't want to fork or copy files from another repository to then remove what is not needed. Secondly, I don't want to for another repository and then squash the entire history and/or remove all branches besides the main one.

The new way

Luckily, the folks over at GitHub recognize these issues and provide a solution: GitHub template repositories. So, how is this different from having a boilerplate repository? Well, they offer:

A new fork includes the entire commit history of the parent repository, while a repository created from a template starts with a single commit.
Commits to a fork don't appear in your contributions graph, while commits to a repository created from a template do appear in your contribution graph.
A fork can be a temporary way to contribute code to an existing project while creating a repository from a template starts a new project quickly.

This is how I use it

I started off with creating a boilerplate repository. My boilerplate repository, among other things, consists of:

React.js
Next.js
TypeScript
Jest
Enzyme
Storybook
Husky
ESLint
StyleLint
LintStaged
Basic styles
Basic utilities

You see why I want to have all of this quickly for a project. The Next Boilerplate repository

Next, I went over to the settings of this repository and enabled 'Template repository'. The Next Boilerplate settings That was all the setup that is required. Whenever I want to start a new project with this repository I go to the Next Boilerplate and click the green button saying 'Use this template'. I then have the option to:

Create a new repository and name it
Give a description
Make it public or private
Include all branches

The Next Boilerplate template

After clicking 'Create repository from template' I have a new repository with all the files, non of the history or branches and start creating right away. Please head over to GitHub to learn more.

Read on

Progressive enhancement

Quick Bit
The unexpected behaviour of rem units in media queries
December 19, 2022
Confused about why your rem units aren't behaving in media queries? Find out the reason behind this unexpected behaviour and learn more about using rem units in responsive design in this article.
Front-end
read The unexpected behaviour of rem units in media queries
Quick Bit
How to use matchMedia to create a performant custom viewport hook
September 16, 2022
Unfortunately, sometimes you need to write viewport-based logic in your JavaScript code. Usually, this is done with a listener on the window for a resize. Let’s look at a better way.
Front-end
read How to use matchMedia to create a performant custom viewport hook
Quick Bit
Keeping dependencies in sync in your mono-repo
June 1, 2022
When building a component library as a mono-repo, you need to keep internal and external dependencies up-to-date between packages. You could do this manually once in a while, but there is a better way. Let’s have a look at Manypkg!
Front-end
read Keeping dependencies in sync in your mono-repo
Quick Bit
Full page scroll snapping with CSS only
November 18, 2021
Scroll snapping is a popular technique to focus on a single piece of information. How can we implement this without the need and complexity of Javascript-based solutions?
Front-end
read Full page scroll snapping with CSS only
Quick Bit
Avoid the Async Await try-catch hell
October 14, 2021
Remember the old callback hell we used to deal with? Luckily, we can circumvent this nowadays with the use of Async Await. Unfortunately, this can introduce a new Async Await try-catch hell. Here's the solution on how to fix this.
ES6+
read Avoid the Async Await try-catch hell
Quick Bit
Why I use data attributes over classes for declarative element states
June 30, 2021
I always use data attributes over classes to query declarative elements in my JS code for a few reasons. Here's why.
ES6+
read Why I use data attributes over classes for declarative element states
Quick Bit
Nullish Coalescing (try to say it quickly ten times)
April 26, 2021
One of my favourite features which were added in ES2020 is nullish coalescing. Despite its difficult pronunciation, this feature is a simple way of checking for falsey values. Let's have a look.
ES6+
read Nullish Coalescing (try to say it quickly ten times)
Quick Bit
Optionally add a key to an object in one line
April 13, 2021
I sometimes need to optionally add a key to an object based on a statement. This can easily be done with a few lines of code, but where's the fun in that? How can I do this as clean as possible?
ES6+
read Optionally add a key to an object in one line
Quick Bit
GitHub profile README
September 16, 2020
GitHub profiles always seemed a bit impersonal to me. Generally, you would pin some repositories and give some information like employer, location and website. To give developers more control, GitHub released the possibility for a profile README. Let's have a quick look.
GitHub
read GitHub profile README
Quick Bit
Backdrop Filter
March 1, 2019
The backdrop-filter property is one of the most useful new, at the time of writing, CSS properties that are landing in major browsers. It will allow you to set a custom backdrop-filter on a div. This is not to be mistaken for the CSS filter property.
Prototype
Progressive enhancement
read Backdrop Filter