Johnny Simpson – The Blog Pros

June 18, 2022

How to Make Git Forget a Tracked File Now in .gitignore

When we track a file in git, it can sometimes get cached and remain tracked, even if we add it to our .gitignore file. This is simply because .gitignore prevents files from being added to Git's tracking system, but it will not actively remove those that are already tracked. This can lead to issues when you have something you no longer want to be tracked, but can't seem to remove it from your git repository.

Fortunately, there is an easy way to fix this. git has a built-in rm function which lets us remove cached or tracked changes. To run it, you can use the following command to remove a specific file, where [filename] can be removed with the file you wish to stop tracking:

May 26, 2022

How to Add a Blank Directory to Your Git Repository

Sometimes in Git, we want to preserve a directory for use within a repository, but keep it empty of files. There are many reasons why you'd want to do this, but perhaps either the folder is used to store files the person cloning the repository needs to create, or a script creates custom files to put into that folder.

If we want to create a blank directory, we can do that easily, but it won't be pushed when we use git push to push it to our remote. As such we need to do something slightly different.

May 17, 2022August 31, 2024

A First Look at CSS When and Else Statements

In CSS, we make selections of different devices by using media queries. Media queries give us an easy way to select devices based on numerous conditions, such as screen size, pixel density, or even format: i.e., print or screen.

This has progressively gotten more complicated over time, and now we are often balancing many conditions that sometimes conflict with each other.

April 22, 2022August 31, 2024

CSS Basics: Creating Inset Borders With CSS

Sometimes when creating inset borders, we want to set them at different distances from the edge of the element. There are several ways to do this in CSS, which can all be applicable depending on the situation you find yourself in.

Let's look at the different ways to create inset borders with CSS.

February 16, 2022August 31, 2024

Making 3D CSS Flippable Cards

A while back, I wrote an article on 3d interactive CSS buttons. Using a similar technique, I decided to design some 3d interactive (and flippable) CSS user cards. These also work great for lots of different things - for example, a bank card UI, a playing card UI, or just a team's page. The demo can be seen below!

The full code, as always, is available on CodePen.

February 6, 2022August 31, 2024

CSS Transitions Generator

CSS transitions give us the ability to smoothly transition from one set of styles to another. Without them, your hover, click and transform effects can look janky and sudden.

To illustrate a CSS transition, below are two emojis. Click on them to see the difference: