Today we’re going to be looking at how to make a super-easy-to-implement, responsive, grid layout. Grid layouts are a very common design pattern for displaying an array of data in a visually appealing way. Whether it’s a photo gallery, or an array of card tiles, knowing how to build a layout like this is an awesome skill to have as a front-end developer.

Let’s start by looking at the final result of what we’ll be building: a grid! Try resizing the window to see how the grid items will automagically wrap to new lines and the number of columns in the grid will update.

Let’s start by setting up some example markup, then we’ll walk through the css line-by-line.

This HTML is pretty straightforward. First we have a “container” div. This is the div on which all the grid styles will be applied...

Within the container we have children divs, each with a class of “item”. You can imagine these grid items could be photos, links, or anything else you might want to display in a grid layout.

Now let’s add the css to make this a responsive grid.

 on the parent container element. This tells the parent to display all of its children according to the two dimensional grid system. Setting this line of css will not change the way anything looks. In order for the grid to actually begin taking shape, we need to define rows and columns.

Here we are setting all of our rows within the grid to have a default height of 100 pixels.

With CSS grid, it is common to see rows defined with the 

 property. This lets you specify how many rows your grid should have, and what height each row should occupy. For example, if you were to have 

, this would tell the grid to have its first row fill 100 pixels, the second row fill 50% of the available space within the container, and the last row to fill only the space necessary to fit its content.

Now let’s say you only explicitly defined one row by setting 

 ... How much space will items take up if they have to wrap to a new row within the grid, but there is no explicitly defined row height? Well, by default they would be set to 

 so that it will display all the content. However, you can override this default height for implicitly created rows using the 

 property. That is what I’m doing above. Essentially, I don’t want to explicitly define 

 rows are in the grid, but I want every implicitly created row to be 100 pixels tall.

Now let’s get to the really awesome one-liner that makes this grid fantastically responsive... Let’s define our columns!

 behaves exactly the same way that I described 

 except it lets you define how many columns you want your grid to have, and how 

 , my grid would then have its first column be 100 pixels wide, the second would fill 10% of the available width of the parent container, and the last column would be 5 rems wide.

There is one new unit that can be used when defining grid rows and columns that you should be aware of. It is the “fractional unit”, denoted with 

 . A fractional unit works very similarly to how the 

 property works within a flex container. Specifying 

 basically says, “fill up whatever space is remaining in the container”.

If I were to use a fractional unit when specifying my grid columns, it might look something like this: 

. This would make the first column in my grid 100 pixels wide, and the second column would take up all the remaining available width in the parent container.

But what if I defined more than one column with a fractional unit? Let’s say I had a grid with the following defined columns: 

. In this case, the first column would still take up 100 pixels, but all the remaining available space would get divided up among the latter two columns, with twice as much of the available space going to the third column. So if my grid container was 400 pixels wide, and I defined the same columns as above, the first column would be 100px wide, the second would be 100px wide, and the third would be 200px wide.

Repeat is a CSS function that lets you define multiple columns or rows in a shorthand way. Instead of defining 5 columns like this: 

grid-template-columns: 100px 100px 100px 100px 100px;

. The first argument is how many times you want the value(s) to be repeated, and the second is the value(s) to be repeated.

Minmax is another CSS function used with grids. It lets you specify a 

 of space that rows or columns can occupy. The first argument is the minimum width or height for your column or row and the second argument is the maximum. For example, 

grid-template-columns: 100px minmax(100px, 1fr);

 would define the first column to always be 100 pixels wide, and the second column would fill all the remaining space, but never shrink below 100 pixels.

The repeat and minmax functions can be used together to specify some number of columns or rows, each with a fluid width/height. 

grid-template-columns: repeat(12, minmax(100px, 1fr));

 would define twelve columns, each taking up an equal amount of available width. However, none of the columns would shrink below 100px, so you can imagine how all of these columns would not fit on a smaller screen and would result in overflow.

So how do we make the number of columns variable so that the grid can grow/shrink depending on the size of the user’s screen? Thankfully, CSS grid has two handy values we can use for defining responsive rows and columns. These values are 

Let’s start by explaining how auto-fill works. When you use ‘auto-fill’ as the first argument to the repeat function, it will fill the grid container with the largest possible number of columns that can fit into sed container without overflowing. The key thing to note about auto-fill is that if you have a grid with enough space for more columns than there are items within the grid, auto-fill still creates empty columns, thus “filling” the available space with as many columns as it can.

Here’s an example of using auto-fill, but not having enough children to occupy all the created columns. As you can see, it still creates an empty column. Auto-fill basically says, “Add as many columns as I can without overflowing, even if the columns are empty!”.

 works the same as auto-fill in that it tries to add as many possible columns as can fit without overflowing. The only difference is that it will collapse any empty columns to 

 the actual content into the grid nicely. Here’s the same grid, as the image above, but with auto-fit instead of auto-fill:

Technically speaking, there are still four columns in this grid... the empty columns have just been collapsed. This is the key distinction between auto-fill and auto-fit: how it handles empty rows/columns. This might be confusing at first because when you have enough grid items to fill all the possible columns, auto-fill and auto-fit behave exactly the same. The only visible difference can be seen when you have more rows/columns than grid items. If you want a better explanation of the difference between auto-fit and auto-fill, I highly recommend this css-tricks 

Wow, that was a lot of explanation for one line of CSS! But now we have a good understanding of what 

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

 is really doing. It basically will fill our grid with as many columns that can fit without overflowing, where each column shares an equal amount of the available width, but never shrinks below 200 pixels. Whew!

The only additional thing I’ve added to our grid is spacing between the items.

 property specifies how much space should be between the rows and columns. If you wanted the spacing between the rows to be different than the spacing between the columns, you could use the individual 

Then I simply added some padding around the grid to match the grid-gap... And just like that, we have a beautifully responsive grid!

Create a responsive grid layout with CSS grid

Easy Responsive Grid

I recently built a "Typed Text" React component to use on my website. This component will take any text and animate it to look like it is being typed out. Today I want to walk through how I built this component as I think it is a great exercise to help build your React skillz.

There are many ways to approach this! Let me outline how I'd like to accomplish this with a custom React component...

This "TypedText" component will take in some text via the children prop. It will be responsible for simply animating the text, no fancy styling or anything like that. Then any text we want to appear "typed", we can wrap in the 

 component. We'll perform the animation by initially rendering an empty string, and then appending each character, one at a time, on a set interval. We'll do this until the full string has been rendered, and it appears to have been typed out onto the screen! Here's what the final results will look like:

We'll also add a "delay" prop so you customize the time to delay between revealing characters.

Let's start by creating a basic component:

All this does is return the text provided via the children prop... Pretty pointless at the moment. Now let's add some state to track how many letters have been revealed:

 state to 0 because we want to start with no letters revealed. We are using this state alongside the 

 method to only return a subset of the letters that were passed into this component via the children prop.

The substring method does exactly what you'd thing - it returns a substring of the original string it was called on. For example: 

Ok, so we have a way to return a specific subset of the letters that were provided. Now we need a way to increment the number of revealed letters on some time interval. Let's add something to do that:

 to increment the number of revealed letters on a set time interval. The 

 method takes a function and a delay as parameters. It will continuously call the provided function with a fixed time delay between each call. Looking at this specific bit of code, 

setInterval(() => setRevealedLetters(l => l + 1), 110)

, we are providing a function that will increment the revealedLetters state by one every 110 milliseconds.

Now that we understand how setInterval works, we need some way of stopping it! We don't want it to continuously run our function forever! In fact, if we were to just call 

 and never tell it to stop incrementing our state, this would be a bug waiting to happen. Why? Because when our TypedText component unmounts, setInterval would continue to try updating the state for a component that is no longer in the dom. If you've ever tried to update state on an unmounted component, you've probably seen an error like this popup in your console:

Notice what it says at the end of the error message: 

"To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function"

^ This is why we added the useEffect in addition to setInterval. If you return a function from within a useEffect hook, React will execute this function when the component unmounts. This is known as a "cleanup" function and can be used to cancel tasks you don't want happening once the component unmounts. Cleanup functions can be used for many things, like cancelling network requests, but in our case we will use it to clear our interval.

You probably noticed that when we called 

, we assigned its return value to a constant called "interval". The return value from calling 

 is an id used to identify the interval that was just created. We need to store a reference to this id so we can cancel the interval later by by passing that id to 

While our TypedText component totally works and is looking good, it is not optimized. To see this, try adding a 

 at the top level of the component like this:

If you open up the console, you'll see that "TypedText rendered!" is continually getting printed - the component is needlessly re-rendering itself! Why's it doing this? Because, setInterval keeps updating the revealedLetters state, even after all the letters have been revealed. And in React, updating a component's state will cause the component to re-render.

We should really stop our interval once all of the characters have been revealed. Here's how we'll do that:

Here we've added another useEffect hook. This useEffect includes 

 in its dependency array, so it will rerun the function everytime 

 is incremented. All we're doing here is checking if all the letters have been revealed, and if they have been, clearing our interval. This will keep our TypedText component from needlessly re-rendering after all the letters have been revealed.

You might be wondering why there need to be two separate useEffects. Why not just put the returned "cleanup" function in the first useEffect? Well, I haven't given you the entire story about how these cleanup functions work... A cleanup function that is returned from a useEffect is not 

 called when the component is unmounted. It’s called every time before that effect runs – to clean up from the last run. So if we tried to return our cleanup function from the first useEffect, it would try to clear our interval every time another letter is revealed. That would be no bueno. The good news is that it's perfectly okay to have more than one useEffect in a React component 😀

Nowwww our component is much more performant. Let's add just a couple more small things to make this component 

First, let's add that optional delay prop I mentioned at the beginning:

As you can see, we've added a simple "delay" prop. We are giving it a default value of 110, so that if the user does not specify this prop, it will have a reasonable default. Then we simply replace the hardcoded 110 milliseconds in the 

 from react and wrapped our default export in this higher order component. Why would we do this? I think React's 

“If your component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result... React.memo only checks for prop changes. If your function component wrapped in React.memo has a useState, useReducer or useContext Hook in its implementation, it will still re-render when state or context change.”

And there your have it! An optimized, flexible, awesome React component that can be utilized with any text!

Create a React component that animates text in a typewriter style

How To Make a Typed-Text React Component

CSS animations allow you to bring your website to life by animating different elements on the page. It is a powerful tool that can be used to create subtle animations that enhance the user experience, or more complex animations that are the focal point of the page.

Today, we’re going to walk through everything you need to know to get up and running creating your own CSS animations. The first thing you’ll need to know is the @keyframes rule…

 rule in CSS is used to define the animation that is applied to an element. It is used to specify the styles for different points in the animation sequence, also called keyframes.

The animation-name is a name that you assign to the animation so that it can be applied to an element using the 

 property. The keyframe-selector is a percentage value or a "from" or "to" value which represents the point in the animation sequence that the styles will be applied to.

To apply the animation defined in a @keyframes rule, you can add the 

 property to an element. For example, if we have these keyframes defined:

We can apply this animation to an element with the animation-name property by simply doing this:

But there’s a catch! The default duration of any given animation is 0 seconds. So if you do not specify an 

, you will not be able to see the animation take place. So if we update our previous example to look like this:

Now we should be able to see the paragraphs’ color changing from red to blue over the course of 2 seconds.

By default, the animation will run once, and then the element will return to the styles it had before the animation began. The 

 property lets us specify how many times the animation should run. You can use a number, or the 

 keyword to have the animation continually run.

With the previous example, our paragraphs will go from red to blue over the course of 2 seconds. Then it will jump back to red and repeat the animation indefinitely. What if we wanted the animation to run from red to blue, then run in reverse, so it transitions nicely back from blue to red? This is where the 

 property comes into play. We can specify 4 different values for the animation-duration property:

: run from the first keyframe (0%) to the last (100%)

: run from the last keyframe (100%) to the first (0%)

: take turns running the animation once forward, then once in reverse, etc.

: take turns running the animation once backwards, then once forwards, etc.

 CSS property is used to set the timing function for an animation. The timing function controls the speed at which an animation progresses through its keyframes. It can be used to create a smooth or gradual transition between keyframes, or to create a more sudden or abrupt transition.

There are several predefined timing functions that can be used with the 

: starts slow, speeds up, and then slows down again (default value)

: starts slow, speeds up, and then slows down again

Additionally, you can also create your own custom cubic-bezier timing function using the 

 are the coordinates of the two control points of the cubic-bezier curve.

 CSS property is used to specify how an element should be styled before and after an animation. It can be used to control the final state of an element after the animation has completed.

There are several predefined values that can be used with the 

: (default value) the animation has no effect on the element before or after the animation

: the element retains the style values set by the last keyframe of the animation after the animation has completed.

: the element is set to the style values of the first keyframe of the animation before the animation starts.

: the element is set to the style values of the first keyframe of the animation before the animation starts and retains the style values set by the last keyframe of the animation after the animation has completed.

The final CSS property related to animations is 

. This property is used to specify the amount of time that should elapse before an animation starts. It can be used to create a delay between the time an element is loaded and the time the animation begins.

Ok! Those are the basics of CSS animations. Now, let’s get some practice by building a cool animation step-by-step.

Now, let’s give the box some initial styles

Then we can define the keyframes for our animation

In this animation, we are using percentage values to get more fine-grained control of the box styles throughout the animation. We are simultaneously moving the box along the x-axis, rotating it about its origin, scaling it up and down, and changing its color!

Now let’s apply the animation to the box

And voila! The box is now animating! We’ve set it up to take 3 seconds to complete one lap through the keyframes, and to continue indefinitely.

If you’d like to see my working example, feel free to checkout my 

Understanding the basics of CSS animations

CSS Animations 101

Today we are going to look at what it means to be in a detached head state in a git repo. While "Detached Head" sounds pretty scary, it is actually not bad at all and is a pretty helpful thing to understand for a developer who wants to travel back in time to view a project in an earlier state.

Let's begin by understanding what the HEAD reference is in Git...

"HEAD" is essentially a pointer to a commit that represents what point in a project's history you are viewing. HEAD 

 references a commit indirectly through a branch reference. Let's look at the diagram below to get a better understanding of how this works.

As you can see in this example, HEAD is referencing the "main" branch, which references a commit. So when you use a command like 

, HEAD would simply jump to a different branch reference.

However, Git does not restrict you from only switching to and from branches! With Git, you can actually checkout a particular commit and view the project at any point in time throughout its history. To do this, simply use the command 

. Note, you can view your project's history of commits by using the 

 command. This will show you a list of commits with their associated commit hashes.

To checkout a commit, you only need to use the first 7 characters of the commit hash.  You can use the command git log --oneline to see an abbreviated history of commits and commit hashes.

So, in the example above if I wanted to see what the state of the project was at the second commit, I could run 

This is what's known as a detached HEAD, because HEAD is no longer pointing to a branch reference, but is pointing directly to a commit. Once you're in a detached HEAD state, you can do a couple things...

The first thing you can do is just look around. Sometimes all you want to do is look at the project at a certain point in time to see how something was done, copy some code, or reminisce. When you're done looking around in a detached HEAD state, you can simply run 

 to return HEAD to a branch reference and exit a detached HEAD state.

You also have the option to create a new branch from a detached HEAD state. Perhaps you wanted to return to a previous point in your project's history and try redoing something. You could accomplish this by first checking out a commit you want to use as a starting point, then creating a new branch and committing to the new branch.

Let's create a new branch while in a detached HEAD state using 

Any time you create a new branch, the starting point will be based off of HEAD.

Once you have created a new branch, you are no longer in a detached HEAD state because HEAD is now pointing to a branch reference! From here you can continue on creating commits just like you would on any other branch:

And that's all there is to it! Hopefully this helped you understand what "HEAD" is in Git, and how entering a detached HEAD state can actually be quite useful.

If you are looking to learn more about Git and Github, I would highly recommend Colt Steele's 

! I am currently taking this course and am learning a lot!

Understanding what it means to be in a detached head state in a git repository