Forem: Victor Ikechukwu

A Very, Very In-Depth Guide on CSS Grid

Victor Ikechukwu — Wed, 14 Dec 2022 06:42:59 +0000

As websites progressed from simple documents into complex, interactive applications, web developers have utilized multiple approaches to organize and control the layout of UI elements on a webpage:

From floating elements around the webpage with the CSS float property to
Inserting elements into an HTML table element to create a table-based layout
Positioning elements using the position property
And, more recently, using the Flexible box layout (Flexbox) to align content on the page.

While these techniques enable us to organize and control the layout of elements on a webpage, they are not always sustainable, as some lead to performance bottlenecks. For example:

Floats affect a web page's SEO.
Table-based layouts lead to non-semantic markup on our sites, compromising accessibility.
Positioning elements require using CSS hacks.

Enter CSS Grid.

CSS Grid is a layout system—a method of organizing elements on a webpage—used for building two-dimensional layouts. It is a structure made up of intersecting horizontal and vertical lines known as grid lines that divide the layout of an HTML element into rows and columns.

CSS Grid is a powerful tool that enables web developers to define the position of HTML elements and control how the elements would span horizontally and vertically across the page—a feat that cannot be achieved using other layout systems.

This article is a comprehensive guide for everything you need to know about the CSS Grid layout system.

In this article, we'll go over:

The CSS Grid vocabulary
How to make a basic grid
Inserting gutters between grid elements
What CSS Grid and Flexbox have in common
Aligning grid items horizontally
Aligning grid items vertically
Measurement units introduced with the CSS Grid layout
Useful CSS functions you should utilize when working with CSS Grid
Expanding grid items across multiple grid lines
Syntax to shorten the amount of CSS you need to type

The CSS Grid vocabulary

CSS Grid introduces a few new concepts you should familiarize yourself with before diving into its usage.

Grid container: The HTML element on which the grid layout is applied.

A grid container is what holds the grid itself. If the grid constructs a box, then the container makes up the corners of the box.

Grid item(s): All direct child elements of the grid container.

Grid line: These are the horizontal and vertical dividing lines that make up the structure of the grid. These lines reside on either side of a column (column grid lines) or row (row grid lines). Hence, a grid with four columns will have five column lines, with one after the last column.

Grid lines are the horizontal and vertical dividers (lines) that seperate grid items into a grid

Grid cell: The space between two column grid lines and two adjacent row grid lines, also known as grid tracks. It is a single unit of a grid and the smallest unit possible. By default, all grid items are laid out one item per grid cell.

A grid cell is the space between adjacent grid lines. Think of them as smaller boxes that construct the larger grid system.

Grid track: The area between two adjacent grid lines. The gap between two grid row lines is a row track, and the gap between two grid column lines is a column track. The size of a grid track determines the width and height of our grid items.

A grid track is the area between two adjacent grid lines. Horizontal grid tracks are known as rows, and vertical grid tracks are known as columns.

Grid area: A rectangular area on the grid made up of one or more grid cells. Grid areas are created when a grid item spans over one-to-many grid tracks. They must be rectangular; creating a T- or L-shaped grid area is impossible.

A grid area is a rectangular area on the grid and can consist of something as small as one cell, or as big as the entire grid

Now, without further ado, let's dive in!

How to make a basic grid

To create a CSS Grid layout, you'll first need to define a grid container. The grid container can be any individual parent element (for example, a div).

To define a grid container, pass the display property with either a value of grid or inline-grid to an element's style block. Doing this will implicitly convert all direct child elements of the grid container into grid items.

.block-level-grid-container {
display: grid;
}

.inline-level-grid-container {
display: inline-grid;
}

The value grid makes the parent grid element act a bit like an unstyled div, making it span the full width of a page by default due to them being block-level elements. In contrast, the value inline-grid behaves much like an unstyled span, making it act like an inline element to its siblings.

Let's look at an example.

<div class="container">
        <div class="box a">1</div>
        <div class="box b">2</div>
        <div class="box c">3</div>
        <div class="box d">4</div>
 </div>

In the code block above, we define a div with a class of "container". Within the div are four child elements.

We can now set the div as a grid container.

.container {
display: grid;
}

The result:

The four elements are stacked on top of one-another vertically

Setting an element to a grid container alone will not immediately affect how the child elements are displayed, as we still haven't specified how the layout should look. Hence, CSS lays out the grid items in a single-column grid.

To change the layout of the grid items within a grid, we must explicitly define the rows and columns we want our grid to have. To do that, we'll use the CSS properties grid-template-columns and grid-template-rows.

Grid Template Columns

The grid-template-columns property lets us specify the number of columns we want in a grid container and how wide each column should be.

The grid-template-columns property accepts one or more non-negative CSS length unit values. The number of CSS-length values passed to the property specifies how many columns our grid container will have, and each value represents how wide each column (i.e., each grid track) would be.

For example:

.container {
  display: grid;
  grid-template-columns: 400px 400px 400px;
}

The result:

Because there are three columns, with four items, there will be two rows. The top row will have 1, 2, and 3 split into thirds, each 400px wide. The bottom row will have a 400px wide 4 element.

In the example above, we use the grid-template-columns property to change the layout of our grid container to be divided into three columns, each 400px wide.

Notice that the last grid item starts on a new row below the first three columns. That is because we only specified three columns that are each 400px wide. Consequently, when the number of grid items in the grid container exceeds three, CSS will wrap other grid items into new rows to maintain the container's layout.

Note that we can't assign negative values to the CSS properties associated with the grid layout. Passing a value such as-400px to the grid-template-columns property will not affect the structure of a grid.

Grid Template Rows

The grid-template-rows property lets us specify the height of each row in a grid container.

Unlike the grid-template-columns property, it doesn't specify the number of rows our grid container should have. It only sets the height of each row. Such behavior occurs because a grid container will implicitly create a new row whenever grid items wrap into new lines. Hence, we can't control the number of rows that should be present in a grid using the grid-template-rows property.

The grid-template-rows property accepts one or more non-negative CSS length values where each value represents the height of each row in a grid container, from the first to the last.

For example:

.container {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  grid-template-rows: 100px 200px;
}

In the code above, values of 100px and 200px are passed to the grid-template-rows property. This gives the first row in the grid container a height of 100px and the second row a height of 200px.

The result:

Four elements with numbers inside of them are divided into a grid. There are two rows in this grid; the first is 100px tall, while the second is 200px high.

In the code above, the grid-template-rows property sets only the heights of the first two rows in the grid container. If we are to add more grid items to the grid container and it creates new rows to wrap them onto, the heights of these implicitly created rows will not be determined by the grid-template-rows property but by the size of their content.

A grid that contains twelve items and is split into three columns will create four rows. The first row is 100px high, the second is 200px, and the third and fourth are only as tall as the element's contents.

Adding a gap between rows and columns

Adding more rows and columns to a grid container without properly spacing them apart would make the grid look too jam-packed and not helpful as a layout system. We can add gutters (spacing) between columns and rows to space them apart by adjusting the size of our grid lines. Let's explore how we can do that.

column-gap

The column-gap property adds some spacing between columns by adjusting the width of the vertical grid lines in a grid container. It accepts a non-negative CSS length value which defines how broad the grid line between each column will be.

For example:

.container { 
display: grid; 
column-gap: 28px;
}

The code above sets the width of every vertical (column) grid line in the grid container to 28px. This adds a space of 28px between every column in the grid.

The result:

With three columns inside of a grid, there is now a 28 pixels gap to separate each column within the grid. The rows do not have a gap, as one has not yet been specified.

row-gap

Just like column-gap, the row-gap property adds some spacing between rows in a grid container by adjusting the height of all horizontal grid lines in a grid container. It accepts a non-negative CSS length value which defines how large the grid line between each row will be.

For example:

.container { 
display: grid; 
column-row: 40px;
}

The code above sets the height of every horizontal (row) grid line in the grid container to 40px. This adds a distance of 40px between every row in the grid.

The result:

There are two rows in this column, with a 40px gap between them

We can combine the column-gap and row-gap properties to space our columns and rows.

.container { 
display: grid; 
column-gap: 20px;
   row-gap: 20px;
}

The result:

A grid with rows and columns and a 20px of spacing between cells specified with the aforementioned CSS

Using just a few lines of CSS, we have created a grid layout with all the basic CSS Grid properties such as columns, rows, and gutters.

What does CSS Grid have in common with Flexbox?

The Flexible box layout, commonly referred to as Flexbox, is a one-dimensional layout system that excels in allocating space between elements and aligning content on a webpage. It shares some similar features and characteristics with the CSS Grid layout, such as implementing the Box Alignment Level 3 specification for aligning flex items, the same standard CSS Grid uses for aligning grid items in a grid container. You can learn more about the Flexbox layout here.

How to align content horizontally

CSS Grid exposes six properties that let us control the alignment of grid items along the rows (inline axis) or columns (block axis) of a grid container. In this section, we'll go over each property that aligns grid items horizontally along the columns of the grid container.

justify-items

The justify-items property controls the alignment of all grid items along a grid container's inline (column) axis. It is passed to the grid container, and its value applies to all grid items within the grid. It accepts four possible values.

start — aligns grid items to the beginning of all columns, which is the left edge of their cell.

For example:

.container {
justify-items: start;
}

Items in the container are aligned to the left of the cell

end — aligns grid items to the end of all columns, which is the right edge of their cell.

For example:

.container {
justify-items: end;
}

Items in the container are aligned to the right of the cell

center — places all grid items at the center of their cells.

For example:

.container {
justify-items: center;
}

Items in the container are aligned to the center of the cell, with space on both sides

stretch — will stretch out the grid items to fill the whole width of their cells: this is the default value of the justify-items property.

For example:

.container {
justify-items: stretch;
}

Items in the container take up the entire space of the cell

justify-content

The justify-content property lets you set the horizontal alignment of the entire grid within the inline (row) axis of the grid container. It accepts seven possible values.

start — aligns the entire grid to the left edge of the grid container.

For example:

.container {
justify-content: start; 
}

end — aligns the entire grid to the right edge of the grid container.

For example:

.container { 
justify-content: end; 
}

center — places the entire grid horizontally at the center of the grid container.

For example:

.container { 
justify-content: center; 
}

stretch — resizes the grid items to allow the grid to fill the entire width of the grid container: this is the default value of the justify-content property.

For example:

.container { 
justify-content: stretch; 
}

space-around — adds an even amount of space between each grid item, with half-sized spaces on both ends of the grid.

For example:

.container { 
justify-content: space-around; 
}

space-between — creates an even amount of space between each grid item, with no space at the ends of the grid.

For example:

.container { 
justify-content: space-between; 
}

space-evenly — puts an even amount of space between each grid item and on both ends of the grid.

For example:

.container { 
justify-content: space-evenly; 
}

justify-self

This behavior of the justify-items property that controls the alignment of grid items along the inline (row) axis of a grid container can also be set on individual grid items via the justify-self property. This property is passed to the grid items. It accepts four possible values.

start — aligns a grid item to the beginning of a column, which is the left edge of its cell.

For example:

.box-1 {
justify-self: start;
}

The first item in the grid is aligned to the left of the cell space, while all of the other items stretch to fill the cell area.

end — aligns the grid item to the end of a column, which is the right edge of its cell.

For example:

.box-2 {
justify-self: end;
}

The second item in the grid is aligned to the right of the cell space, while all of the other items stretch to fill the cell area.

center — places the grid item at the center of its cell.

For example:

.box-3 {
justify-self: center;
}

The third item in the grid is aligned to the center of the cell space, while all of the other items stretch to fill the cell area.

stretch — will stretch out the grid item to fill the entire cell width; this is the default value of the justify-self property.

For example:

.box-1 {
justify-self: stretch;
}

The first grid item, like all grid items in the grid, is stretched to take up the full horizontal space of the grid cell.

How to align content vertically

Now let's look at the properties that align grid items vertically along the rows of the grid container.

align-items

The align-items property controls the alignment of all grid items along a grid container's block (column) axis. It is passed to the grid container, and its value applies to all grid items within the grid. It accepts four possible values.

start — places all grid items at the top of all rows.

For example:

.container {
align-items: start;
}

The items in the grid are aligned to the top of the cell space.

end — places all grid items at the bottom of all rows.

For example:

.container {
align-items: end;
}

The items in the grid are aligned to the bottom of the cell space.

center — places all grid items at the center of their cells.

For example:

.container {
align-items: center;
}

The items in the grid are aligned to the vertical center of the cell space.

stretch — will stretch out all grid items to fill the entire height of their cells; this is the default value.

For example:

.container {
align-items: stretch;
}

The items in the grid are stretched to take up the full vertical space of the cell space.

align-content

The align-content property lets you set the vertical alignment of the entire grid within the block (column) axis of the grid container. It accepts seven possible values.

start — aligns the entire grid to the top of the grid container.

For example:

.container {
align-content: start; 
}

Captured with the help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

end — aligns the entire grid to the bottom of the grid container.

For example:

.container { 
align-content: end; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

center — places the entire grid vertically at the center of the grid container.

For example:

.container { 
align-content: center; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

stretch — The grid items stretch to fill the full height of the container grid; this is the default value.

For example:

.container { 
align-content: stretch; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

space-around — creates an even amount of space between each grid item, with half-sized spaces on both ends of the grid.

For example:

.container { 
align-content: space-around; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

space-between — adds an even amount of space between each grid item, with no space at the ends of the grid.

For example:

.container { 
align-content: space-between; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

space-evenly — places an even amount of space between each grid item and on both ends of the grid.

For example:

.container { 
align-content: space-evenly; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

align-self

This behavior of the align-items property that controls the alignment of grid items along the block (column) axis of a grid container can also be set on individual grid items via the align-self property. This property is passed to the grid items. It accepts four possible values.

start — places a grid item at the top of its cell.

For example:

.box-4 {
align-self: start;
}

The fourth item in the grid is aligned to the top of the cell space, while all of the other items stretch to fill the cell area.

end — places a grid item at the bottom of its cell.

For example:

.box-5 {
align-self: end;
}

The fifth item in the grid is aligned to the bottom of the cell space, while all of the other items stretch to fill the cell area.

center — places a grid item at the center of its cells.

For example:

.box-6 {
align-self: center;
}

The sixth item in the grid is aligned to the vertical center of the cell space, while all of the other items stretch to fill the cell area.

stretch — will stretch out the grid item to fill the entire height of its cell; this is the default value.

For example:

.box-1 {
align-self: stretch;
}

The first grid item, like all grid items in the grid, is stretched to take up the full vertical space of the grid cell.

Introducing new measurement units

Aside from non-negative CSS length values such as px, rem, vw, and percentages (%), you can also use special sizing units and keywords to control the size of grid items in a grid.

The fractional (fr) unit

The fr unit, short for "fractional," is a length unit introduced with the CSS Grid layout. It represents a fraction of the free space available in a grid container. This makes it the ideal unit for defining responsive columns and rows that will scale as the browser's viewport shrinks and grows.

Let's look at an example to explain how helpful the fr unit is and why it's a better alternative to other CSS length units.

Say we are to create a grid layout made up of three columns where the first column takes up 1/6 of the grid's width, the second column takes up twice the width of the first column, and the third column takes up three times the width of the first column.

If we weren't using the fr unit in the example above, we'd have to perform some math on our end. We had to figure out the total width of the grid (100%), divide that by 6, then multiply whatever the result is by how wide each column should span, which would be.

width of first column = 100% / 6 * 1 ---> 15%
width of second column = 100% / 6 * 2 ---> 30%
width of third column = 100% / 6 * 3 ---> 45%

As the layout becomes more complex, using percentages or any CSS math function becomes unsustainable. This is when the fr unit comes in handy.

The fr unit tidies all this by letting us specify how the available space in a grid container should be distributed among its rows and columns. Then it spreads the space available in that order.

.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}

In the code above, we assign a fraction of the available space in a grid container to the first column, then twice to the second column, and thrice to the third column.

The result:

A grid that consists of three columns and two rows. The first column is one-third the size of the last column and half the size of the second column.

min-content

The min-content is a sizing keyword that sets the width of a grid track to its intrinsic minimum width, which is usually the size of the smallest content or text within its grid items. It works similarly to the CSS function min, but is used as a spacing unit instead of a function.

When applied to a column or row, they become as narrow as the longest word in their track. This lets you get the shortest measurement of the content inside the grid items.

For example:

.container {
display: grid;
grid-template-columns: 1fr min-content 1fr;
}

In the code above, we set the first and third columns to be as wide as a fraction of the grid container while passing the min-content to the second column, making it shrink to the size of the words in its grid items.

The result:

A grid with three columns. The middle column only takes up the smallest amount of space needed to display a single character, while the first and last columns take up all remaining space.

max-content

The max-content sizing keyword has the opposite effect of min-content;max-content behaves similarly to a CSS function: max(). When applied to either a column or row, the track becomes as wide as possible for all the content within the grid items to display in one long unbroken line.

The most significant benefit of using max-content is that you can let the content within our grid items breathe and spread out rather than wrapping them into new lines, which causes vertical text overflows.

For example:

.container {
display: grid;
grid-template-columns: 1fr max-content 1fr;
}

The code above defines three columns and sets the width of the second column to the max-content keyword. If we add a lot of words to the grid items in the second column, the text in these grid items won't overflow. Instead, the width of the second column will grow, and the first and third columns will shrink to accommodate it.

The result:

A grid with three columns. The middle column has a sentence that's not broken into newlines, but rather stretches to fill as much space as it needs and no more. The first and last columns take up all remaining space.

Useful CSS functions to combine with CSS Grid

When working with the CSS Grid layout, there are a few handy functions you should familiarize yourself with to help increase the efficiency of your CSS.

repeat()

The repeat() function lets us define recurring unit declarations for our grid container's rows or columns in a more compact form.

For example, suppose you repeat unit declarations when defining columns or rows using the grid-template-rows and grid-template-column properties. You can use the repeat() function to declare these recurring patterns more concisely.

The function takes two arguments:

repeat count: this is an integer value of 1 or higher, or the keyword values auto-fill or auto-fit. It specifies the number of times the recurring pattern of the rows or columns should repeat.
track(s) definition: this is where we specify the recurring pattern of rows or columns to repeat. We can pass one or more non-negative length values to it, where each value represents the size of a row or column.

Essentially, its syntax is this:

repeat(<number of columns/rows>, <the height or width of each column /row>);

Say we want to create a grid with six equal columns. Without the repeat() function, we'd have to explicitly define each column using the grid-template-columns property.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

However, as the number of columns increases, this approach becomes unsustainable and verbose. We can rewrite this into a more compact form using the repeat() function.

.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
}

Here we use the repeat() function to create a column that spans over a fraction of our grid container, repeating the process six times. This drastically reduces the number of repetitive unit declarations in our CSS.

The result:

Six evenly spaced items in a row

minmax()

When defining a responsive grid layout, you likely want to give each grid track a minimum and maximum size to ensure that they scale up and down to fit their content as the viewport resizes. This is where the minmax() property comes in handy.

The minmax() function lets us specify a minimum and maximum size for a grid track. As the grid is resized across viewports, the grid track will grow and shrink across that range. On smaller screens, it will shrink until it reaches the minimum size. And on larger screens, it will stretch until it reaches the maximum size.

The minmax() function takes two parameters, min and max, where:

min is the minimum size of the track.
max is the maximum size of the track.

Syntax:

minmax(<minimum allowed value>, <maximum value>);

The minmax() function also accepts CSS Grid sizing units, keywords, length and percentage values.

Let's look at an example using the minmax() function.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, minmax(100px, max-content));
}

In the code above, we use the minmax() function to set the minimum height of the two rows in our grid container to 100px and the maximum height to max-content, which ensures each row stretches and becomes as wide as possible to contain its contents if it gets taller than 100px.

The result:

Two rows and three columns. The three columns have equidistant widths. The first row has 100px height, and the second has the height of a paragraph inside one of the cells.

A significant benefit of the minmax() function is that it reduces the need for media queries. Rather than relying mainly on media queries to control the size of grid tracks (columns and rows) across viewports, it lets you set up, to a degree, a responsive transition of values for a grid track.

fit-content()

The fit-content() function operates similarly to the minmax() function. The difference is that with fit-content(), the minimum value is the size of the content within the grid item, and the maximum value would be the value we pass to it. This lets you clamp your content to the smallest value and scale it up to a certain value as needed.

When applied to a grid track, it sets the size of the grid track to its intrinsic minimum width, which is the size of the smallest piece of content or text in its grid items. The caveat is that the smallest piece of content or text size is not larger than the value specified in the function.

However, if the value of the intrinsic minimum width exceeds the value supplied to the function, the size of the grid track is set to the value passed to the fit-content() function, and the content of the grid items will begin to wrap.

For example:

.container {
display: grid;
grid-template-columns: fit-content(200px) fit-content(300px) fit-content(400px);
}

The code above creates three columns with widths of 200px, 300px, and 400px, respectively, using the fit-content() function. This means that the size of each column will be equal to the size of the smallest piece of content or text in its grid items, but if that becomes greater than the value supplied to the fit-content() function, then the size of the columns will be set to the value passed to the fit-content() function.

The result:

A grid with three columns. The first and third columns are only as wide as a single character, since that's what they contain. The middle column is 300px wide because there's a paragraph in the middle of it

Expanding grid items across multiple grid lines

Remember, when talking about grid lines, the horizontal lines reside on either side of a row (known as row grid lines), and the vertical lines reside on either side of a column (known as column grid lines) within the grid container.

In the grid container, each grid line is given a number based on its position on the grid. The first grid line (row or column) is given the number 1, the second 2, and so on.

For example, the image below displays the number of grid lines present on a grid container with three columns and two rows, where the column lines are the numbers inside the orange circle from 1 - 4, while the row lines are the ones inside the blue circle from 1 - 3.

A grid system with the lines numbered as described previously

The browser uses these grid lines to control the layout and position of items within the grid. For instance, in the image above, the first column spans from column line 1 to column line 2, and the first grid item will be placed between those lines and span that wide. However, a handful of CSS Grid properties let us control the position of grid items along these grid lines and how wide they would span horizontally and vertically across them.

The properties you can use to control the position of grid items and how they span across these lines are:

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Let's go over each in detail.

grid-column-start

The grid-column-start CSS property lets us specify the horizontal starting position of a grid item along the column grid lines within the grid container. This start position defines the start of the left edge of the grid item.

Using the grid layout below, let's target the first grid item and set its horizontal starting position to column line 2.

A grid with two rows and three columns with each cell area numbered. The first row is "1, 2, 3," and the second row is "4, 5, 6"

We can target the div using CSS pseudo-selectors, or you can apply classes to the element and target it with that.

.container div:nth-of-type(1) {
  grid-column-start: 2;
}

Doing this, the horizontal starting position of the selected grid item will be on the second vertical grid line (column line 2).

A grid with three rows and three columns, and six items. The first item in the grid starts on the second column, which shifts every numbered cell item to the right by 1, overflowing to the left.

From the image above, the first grid item now begins at column line 2, while the other grid items are pushed over, wrapping onto new rows or creating empty spaces on the grid.

grid-column-end

Along with specifying the horizontal starting position of a grid item with grid-column-start, we can set where the grid item should end using the grid-column-end property.

For example:

.container div:nth-of-type(1) {
  grid-column-start: 2;
  grid-column-end: 4;
}

This makes the first grid item start on column line 2, span across two grid lines, and end on line 4. Using the grid-column-start and grid-column-end properties, we can effectively control the horizontal starting position of a grid item and how wide it spans across the grid.

The result:

A grid with three rows and three columns, and six items. The first item in the grid starts on the second column and spans into the third column, which shifts every numbered cell item to the right by 2, overflowing to the left.

grid-row-start

The grid-row-start property lets us specify the vertical starting position of a grid item along the horizontal (row) grid lines within the grid container. This sets the line where the grid item begins.

For example:

.container div:nth-of-type(2) {
  grid-row-start: 1;
}

In the code above, we set the vertical starting position of the second div element to row line 1 using the grid-row-start property.

The result:

A grid with three rows and three columns and six items. The order of the items is: "2, 1", "3, 4, 5", then "6" on each row, respectively

grid-row-end

The CSS grid-row-end property lets us specify the vertical ending position of a grid item along the horizontal (row) grid lines within the grid container.

For example:

.container div:nth-of-type(2) {
    grid-row-start: 1;
    grid-row-start: 4;
}

This makes the second grid item start on the first-row line and span down three grid lines, ending on line 4. Using the grid-row-start and grid-row-end properties, we can effectively control the vertical starting position of a grid item and its height down the grid.

The result:

A grid with three rows and columns. The first item starts on the second column and stretches to the third column on the first row. The second item starts on the first row and stretches to the third row on the first column. The last four items make up a two-by-two square in the bottom left corner.

CSS Grid shorthands

Like most CSS properties, CSS Grid offers a handful of shorthand properties that provide a shorter and more forward way to set the values of multiple CSS Grid properties simultaneously. Using these shorthand properties, we can write more concise (and often, more readable) style sheets, saving time and energy.

Let's take a look at these properties.

Using a single CSS rule to set all gutters in a grid

In this guide, we have seen how we can add gutters (spacing) between columns and rows to space them apart using the column-gap and row-gap grid properties. Using a single property — gap, we can set the values for both the column-gap and row-gap properties.

The gap property is a shorthand for the row-gap and column-gap properties. It lets us add gutters (spacing) between columns and rows.

Syntax:

gap: <row-gap> <column-gap>

The gap property accepts two values where:
:
<row-gap> is the first value passed to the gap property. It sets the value of the row-gap property.
<column-gap> is the second value passed to the gap property and sets the value of the column-gap property. It is an optional value, and if omitted, it's set to the same value as <row-gap>.

For example:

.container {
    display: grid;
    gap: 20px;
}

This adds a space of 20px between all columns and rows in a grid container and is the same as the code below.

.container { 
    display: grid; 
    column-row: 20px;
    row-gap: 20px;
}

Combining horizontal and vertical alignments into single CSS rules

We talked about the six CSS Grid properties that let us control the alignment of grid items along the rows (incline axis) and columns (block axis) of a grid container. In this section, we'll go over the shorthand properties that let us set the alignment of grid items much better.

place-items

place-items is a shorthand property that lets us set the values for the align-items and justify-items properties in a single declaration. It allows us to control the alignment of all grid items horizontally and vertically at once.

It accepts two values: the first value sets the value of the align-items property, and the second sets that of the justify-items property. If the second value is not specified, the first value will be assigned as the value of both properties.

For example:

.container { 
    display: grid; 
    place-items: center; 
}

This sets the value of both the align-items and justify-items properties to center, placing all grid items at the center of their grid areas.

place-content

place-content is a shorthand property that lets us set the values for the grid properties align-content and justify-content in a single declaration—enabling us to control the horizontal and vertical alignment of the entire grid within the grid container at once.

It accepts two values: the first value sets the value of the align-content property, and the second sets that of the justify-content property. If the second value is not specified, the first value will be assigned as the value of both properties.

For example:

.container { 
    display: grid; 
    place-content: center; 
}

This sets the value of both the align-content and justify-content properties to center, centering the entire grid within the grid container horizontally and vertically.

place-self

place-items is a shorthand property that lets us set the values for the align-self and justify-self properties in a single declaration. It enables you to control an individual grid item's horizontal and vertical alignment within its grid area.

It accepts two values: the first value sets the value of the align-self property, and the second sets that of the justify-self property. If the second value is not specified, the first value will be assigned as the value of both properties.

For example:

.item { 
place-self: end center;
}

In the code above, the value of the align-self property is set to 'end,' which pushes the grid item vertically down to the bottom of its grid cell. And the justify-self property is set to 'center,' which places the grid item horizontally at the center of its cell.

The result:

The first grid item in the grid is aligned to the vertical end of the cell space and horizontally at the center, while all of the other items stretch to fill the cell area

Shortening the CSS for spanning grid items across columns and rows

Declaring the 'grid-column-start,' 'grid-column-end,' 'grid-row-start,' and 'grid-row-end' attributes anytime you want to span a grid item across some columns and rows can be somewhat redundant. Let's look at some shorthand properties that can help us declare the CSS to span grid items more concisely.

grid-column

The grid-column is a shorthand property for the grid-column-start and grid-column-end properties. It lets us specify the horizontal starting position of a grid item along the column grid lines within the grid container and where the grid item should end.

Syntax:

grid-column: column-start / column-end;

The grid-column property accepts two grid line values separated by a slash (/) where:

The first value, column-start, is the value of the grid-column-start property.
The second value after the slash, column-end, is the value of the grid-column-end property.
And the slash (/) serves as a demarcator between these two values as both can contain one or more whitespaces. As a result, passing the slash is required to eliminate errors and ambiguity. Also, as a best practice, adding some whitespace at both sides of the slash (/) is recommended to make our CSS more readable.

For example:

.gird-item {
  grid-column: 1 / 4;
}

The code above tells the grid item to span horizontally from column line 1 to column line 4 in the grid.

grid-row

The grid-row property works just like the grid-column property. It is a shorthand property for the grid-row-start and grid-row-end properties. It lets us specify the vertical starting position of a grid item along the row grid lines in the grid container and where the grid item should end, spanning down the grid.

For example:

.gird-item {
  grid-row: 2 / 5;
}

This causes the height of the grid item to span down from row line 2 to row line 5 in the grid.

Bringing it all to a single property: grid

Lastly, we come to the last of the CSS Grid shorthand properties — grid.

The CSS property grid is a shorthand property that lets us set a value for each of the explicit grid container properties such as 'grid-template-rows,' 'grid-template-columns,' and 'grid-template-areas,' and for each implicit grid container properties such as 'grid-auto-rows,' 'grid-auto-columns,' and 'grid-auto-flow,' in a single declaration.

Syntax:

<grid-template> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

You can read more about it here.

Try out CSS Grid yourself!

Creating the perfect layout for your website has never been easier. With CSS Grid, you can create complex layouts with as few lines of CSS, minimal development time, and less dependence on external libraries and frameworks.

You should now have a solid grasp of the CSS Grid layout, how it works, and how you can use it to lay out content on your websites. We'd love you to give it a try.

This article was written by Victor Ikechukwu. Victor is a front-end developer and technical writer interested in the JAMStack. He has a knack for breaking down developer concepts into clear, understandable bits for others.

Everything You Need to Know about All 11 CSS Filters

Victor Ikechukwu — Tue, 19 Jul 2022 13:03:56 +0000

CSS, the language for visually styling elements on the web, has evolved to include features that can change an element’s visual effects in a website’s source code – freeing you from the need for graphical and photo editing software. Enter CSS filters.

CSS filters allow developers to alter an HTML element (usually an image) appearance before it gets displayed in the browser. It provides various operations that can be performed on an element to change its visual properties—for example, increasing the brightness of an image, enhancing an element's color intensity, adding a blur effect, and much more.

There are 11 filters in CSS, which are:

blur
brightness
contrast
grayscale
hue-rotate
invert
opacity
saturate
sepia
drop-shadow
url

This guide will walk you through each CSS filter, what they are, how they work, and how you can use them in your code.

How Do CSS Filters Work?

We can apply CSS filters to an element by declaring the CSS filter property within the element's style block, passing one or more of the 11 CSS filters as its value.

Syntax:

element {
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

Notice that each filter has an opening and closing parenthesis after its name. That is because each filter is a CSS function that accepts either a length, percentage, or degree value, signifying how much of the filter should be applied to an element.

Now, let's look at how each CSS filter works in detail.

blur

.blurry {
    filter: blur( <length>);
}

The CSS blur filter applies a Gaussian blur visual effect to an element. It accepts a CSS length unit (px, rem, em, etc.) to determine how many pixels on the screen need to blend into each other to generate a blurred result. The larger the value of the CSS length unit passed to the filter, the more blur is applied to the element. If we do not provide a value, a default value of 0 is used.

For the blur filter (and all CSS filters covered in this article) we'll use the image below to demonstrate each filter's effect on an element.

Photo by Fox from Pexels

The code below adds a blur effect of 3px to the image:

img {
    filter: blur(3px);
}

Here is the result:

brightness

.exposed {
    filter: brightness( <decimal> | <percentage>);
}

The brightness filter adjusts the brightness level of an image. The filter applies a linear multiplier to the input image, making it appear brighter or darker.

It accepts a decimal value between 0 and 1, or a percentage value. A value of 0 results in a completely black image. A value of 100% or 1 leaves the image as is with its original brightness level. Values greater or less than 100% or 1 determine how dark or bright the image will be.

Note that all filter functions that accept decimal values do not work with negative integers (-10, for example) but only accept positive numbers.

The brightness filter has a default percentage and numerical value of 100% and 1. Passing a percentage or numerical value lower than these numbers reduces the image brightness level, giving it the appearance of having a shadow cast over it. The lower the value the higher the intensity of the shadow cast over it is.

The code below applies the brightness filter with a percentage value of 35% to an image:

img {
    filter: brightness(35%);
}

The result:

The opposite effect occurs when you pass a percentage or numerical value greater than 100% and 1 to the filter function. It increases the image's brightness level to make it appear like a photo that has been over-exposed to too much light.

The code below applies the brightness filter with a value of 135% to an image.

img {
    filter: brightness(135%);
}

The result:

contrast

.sharpen {
    filter: contrast(<decimal> | <percentage>);
}

The contrast filter adjusts the brightness difference between the darkest and lightest parts of an image, giving the image a more or less enhanced look.

It accepts a percentage or decimal value to determine the contrast level of an image — a value of 0 results in a completely gray image. Values above 100% and 1 increase the contrast, and parameters below decrease the contrast of the image.

The code below adds a contrast level of 180% to an image:

img {
    filter: contrast(180%);       
}

The result:

grayscale

.black-and-white {
    filter: grayscale( <decimal> | <percentage>)
}

In digital photography, an image contains both color information and luminance (brightness) information. The grayscale filter removes all color information (a representation of the three light sources — red, green, and blue (RGB) used to produce colors on a computer screen) from an image. It leaves only the luminance information — a range of monochromic (gray) shades, with pure white as the lightest shade, pure black as the darkest shade, and every other shade in between being a shade of gray — known as the grayscale.

An illustration of the grayscale color range

The grayscale filter removes all color information from an image and sets its color to a tone in the grayscale.

It accepts a decimal value between 0 and 1, or a percentage value up to 100%. A value of 100% or 1 results in a completely gray image. The image would remain unchanged with a value of 0% or 0, and values between 0% and 100% give it a tone between its original color and complete gray, making the image have a desaturated look.

The code below uses the grayscale filter to make an image completely gray:

img {
    filter: grayscale(100%);
}

The result:

Typical applications where the grayscale filter could come into use would be applying it to images when dark mode is enabled to slightly reduce the overall vibrancy of colors, putting less eye strain on the user. You might also use it to make client logos gray when listing them on a website.

hue-rotate

.change-color { 
    filter: hue-rotate(<angle> | <zero>); 
}

Digital photography uses a concept known as the color wheel, an organization of colors around a circle, showing the relationships between the primary, secondary, and tertiary colors to produce colors on a computer screen.

An illustration of the color wheel

Each color in the color wheel has a property called hue, the position of the color (in angle degrees) on the wheel.

The hue-rotate filter accepts a CSS angle value (deg, grad, rad, or turn) and shifts the hue value of each color present on an element relative to the amount you specify, updating all colors relative to their hue's starting point.

For example, red is at 0 degrees on the color wheel, and blue is at 240 degrees. If a portion of an image contains red, passing a value of 240deg to the hue-rotate filter will shift the hues of all the colors on the image by 240 degrees, turning that part of the image from red to blue.

The code below adds a hue rotation of 180 degrees to an image:

img {
    filter: hue-rotate(180deg)
}

The result:

Note, the unit identifier for the hue-rotate filter is optional for zero angles. For example, both rotate(0deg) and rotate(0) are valid, but hue-rotate(45) is not.

invert

.turn-color-negative { 
    filter: invert(<decimal> | <percentage>); 
}

Remember the color wheel mentioned in the section above? When applied to an element or image, the CSS invert filter flips the hue of every color present by 180 degrees, converting each color to the color directly opposite it on the color wheel.

An illustration of the color wheel

Bright areas become dark, red becomes cyan, magenta turns green, blue becomes yellow, and vice-versa, giving the image a color-negative effect.

The invert filter accepts a decimal value between 0 and 1, or a percentage value up to 100% that controls the extent of the color-negative effect. A value of 0.5 or 50% turns an image completely gray.

The code below inverts the colors on an image by 80%:

img {
    filter: invert(80%);
}

The result:

opacity

.transparent {
    filter: opacity( <decimal> | <percentage>)
}

The opacity filter applies a transparency effect to an element's colors. It accepts a percentage or decimal value to decide how much transparency to apply to an image. An opacity of 0% or 0 will result in a completely transparent element. 100% opacity will show no transparency. Setting the opacity between 0% and 100% will give the element or image partial transparency.

The code below adds an opacity of 35% to an image:

img {
    filter: opacity(35%);
}

The result:

You might notice that the opacity filter works just like the CSS opacity property because both control how transparent an element should be. The difference and why you should prefer the opacity filter over the CSS opacity property is that CSS filters are hardware-accelerated.

When you use the opacity filter to add opacity to an element, the browser will offload the computing task onto the Graphics Processing Unit (GPU) — a specialized processor designed to accelerate graphics rendering within the system. This increases the browser's efficiency and frees up the CPU to perform other tasks.

saturate

.enhance {
    filter: saturate(<decimal> | <percentage>);
}

The CSS saturate filter enhances or decreases the intensity of a color, known as its saturation, making it appear more or less vivid.

It accepts a decimal value between 0 and 1, or a percentage value. A value of 100% or 1 keeps the color as is. A value above 100% or 1 amplifies the color's intensity, making it more vibrant (saturated), while values below that reduce the color's intensity, making the color grayed and dull (desaturated).

The code below applies a 172% saturation to an image:

img {
    filter: saturate(172%);
}

The result:

sepia

.nineties-effect {
    filter: sepia(<decimal> | <percentage>);
}

The sepia filter adds a soft brownish color tone to an image, giving it a warmer and vintage appearance that is calming to the eye. It is similar to using the grayscale filter but with a brownish color tone.

It accepts a decimal value between 0 and 1, or a percentage value up to 100%. A value of 0 leaves the image unchanged. A value of 100% or 1 changes the image entirely to sepia, and values between 0% and 100% give the image a tone between its original color and completely sepia.

The code below calls the sepia filter with a percentage value of 100%, converting the image to be completely sepia:

img {
    filter: sepia(100%);
}

The result:

drop-shadow

.shadow {
    filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);
}

The CSS drop-shadow filter applies an (often blurry) background shadow to an element, giving it a more three-dimensional look.

The drop-shadow filter accepts four parameters when applying a drop shadow to an element:

<offset-x>: A CSS length value that specifies the horizontal distance between the element and the drop shadow. Positive values place the shadow to the element's right, and negative values place the shadow to the left.
<offset-y>: A CSS length value that specifies the vertical distance between the element and the drop shadow. Positive values place the shadow below the element, and negative values place the shadow above it.
<blur-radius>: The blur radius of the shadow is specified as a CSS length unit. The larger the value, the more blurred the shadow becomes. If left unspecified, it defaults to 0, producing a sharp and unblurred shadow. No negative values are permitted.
<color>: The color of the shadow, specified as a CSS color. If left unspecified, it defaults to the color black.

Here's an example of setting a drop shadow to an element:

img {
    filter: drop-shadow(30px 30px 50px #000);
}

The code above adds a black shadow with a 50px blur to the image, setting it 30px to the right of the image and 30px below it.

Here's the result:

The drop-shadow filter looks much like the CSS box-shadow property at first glance. However, there's a difference between the two, and it's worth comparing those differences to know when to prefer one over the other.

One difference between the drop-shadow filter and the box-shadow property is the drop-shadow filter does not accept the inset keyword, which, when set, rather than aligning the shadow behind the element, inserts the shadow within the element, giving it a framed appearance.

For example:

div {
    height: 200px;
    width: 200px;
    background: #fff;
    border-radius: 20px;
    margin: 20px;
    box-shadow: inset 15px 12px 30px #000;
}

The result:

The result of using the insert keyword that's only available to the box-shadow property to insert the shadow into the div.

Another difference between the drop-shadow filter and the box-shadow property is the drop-shadow filter does not accept the parameter — a CSS length value that specifies how wide the shadow will span. Positive values cause the shadow to enlarge, and negative values cause the shadow to shrink. If not specified, it will default to a value of 0 (the shadow will be the same size as the element).

Example:

img {
    box-shadow: 30px 40px 50px 70px gray;
}

The code above adds a gray shadow with a 50px blur to an image, passing an additional length value of 70px that signifies the shadow will span 50px more than the image in width.

The result:

Lastly, to explain the significant difference between the drop-shadow filter and the box-shadow property, we'll be using the CoderPad logo below.

The CoderPad logo

If the box-shadow property is used to add a shadow to the CoderPad logo above:

.coderpad {
    box-shadow: 10px 10px 30px #000; 
}

It results to the image below:

Notice that the shadow is applied to a rectangular box around the logo? This is because CSS uses a box model, where the edges of an element are bound in a rectangular box containing its padding, border, and margin properties. Even in cases where the element does not appear to have a rectangular shape, the box is still there, which is where the shadow will be applied.

CSS filters are not bound to the box model. That means that the drop-shadow filter will only consider the outline of the CoderPad logo, ignoring its box model so that only the contents of the logo receive the shadow.

For example:

.coderpad {
    filter: drop-shadow(15px 10px 28px #000);
}

The result:

Deciding which method to use between drop-shadow and box-shadow is totally up to you based on the effect you want to achieve.

url

.svg-filter { 
filter: url('#selector-of-your-svg-filter-here'); 

/* you can also load filters from external SVGs this way: */ 
filter: url('filters.svg#name-of-your-other-filter-here'); 
}

The url filter takes a string value pointing to an SVG filter element and applies its effects to an HTML element.

The SVG filter element <filter></filter> is used to add special visual effects to SVG graphics.

Syntax:

<svg> 
    <defs> 
        <filter id="name-your-filter-here">
             ... <!-- insert filters here --> ... 
        </filter> ... 
    </defs> 
</svg>

The <filter> tag takes a required id attribute to identify the filter. We can then use the url filter to apply the SVG filters to HTML elements using either the id selector of the filter or a link to it.

For example, the code below defines a blur filter using the
<feGaussianBlur> filter tag:

 <svg>
    <defs>
        <filter id="blur-filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        </filter>
      </defs>
</svg>

Now, you can apply the SVG filter to an element by passing its id to the url filter:

img {
  filter: url("#blur-filter");
}

Here's the result.

Other Usage Notes

Here are a few more points to note when using CSS filters.

Using Multiple CSS Filters

Throughout this article, we have only looked at using a single CSS filter per section. However, you may combine two or more CSS filters to manipulate the rendering of an element.

Syntax:

.multiple-effects {
    filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() |          hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

We can pass two or more of the 11 CSS filters to the filter property, and CSS applies them to the element according to the order they appear.

For example:

img {
    filter: opacity(50%) drop-shadow(20px 10px 0px black);
}

The opacity filter comes first in the filter property in the code above before the drop-shadow. When rendering the image in the browser, CSS will apply an opacity of 50% to the image, making it partially transparent, before adding a drop-shadow.

Here's the result:

Reversing the order of the filter properties changes the result:

img {
    filter: drop-shadow(20px 10px 0px black) opacity(50%);
}

The result:

Usage with the initial and inherit keywords

In addition to the 11 CSS filters, the filter property accepts two extra values.

initial: The default value of the filter property — resolves to "none".
inherit: The computed value of the filter property from an element's direct parent.

Try using CSS filters yourself!

Hopefully, you now have a thorough understanding of all 11 CSS filters, how they work, and how you can use them to apply different visual effects to the elements on your websites.

CSS filters give you more independence from photo editing software when creating production assets and visual effects for your websites—helping save on both time and money. They enable you to apply these visual effects directly in the browser.

If you'd like to read more informative articles from CoderPad's blog, check out the related posts below:

Replace Occurrences of a String in JavaScript

Victor Ikechukwu — Sat, 13 Nov 2021 16:24:39 +0000

There are a couple of ways to replace the occurrence of a substring in JavaScript.

In this article, you will learn how to replace the occurrence of a string with the built-in replace, and replaceAll methods provided by the String type and how to use them.

They allow you to replace the occurrences of a substring in a string and return the new version of the string.

Note that both methods don’t change the original string, but return the new string with the specified substrings replaced with a new value. Let's see how.

Using `String.replace`

The replace method accepts two arguments:

pattern — A string to search for, it could be a string or a regex pattern.
replacement — The text to replace the pattern with.

And replaces a substring in a string with a new one and returns the new string.

Syntax:

const newString = oldString.replace(pattern, replacement);

Let's take a look at an example:

const quote = 'Voldamot is the greatest Wizard. Voldemort will rule the world!';

const newQuote = quote.replace('Voldamot','Harry Potter')
//outputs: Harry Potter is the greatest Wizard. Voldamot will rule the world!

Here, only the first occurrence of the substring Voldamot was replaced with the new substring Harry Potter.

To use the replace method to replace all occurrences of a substring in a string with a new one, you must use a regular expression.

Using regular expressions

const newString = oldString.replace(regex, replacement);

Here, the replace method accepts a regular expression as the searchValue. it then replaces them with the newSubstr, and returns a new string.

const quote = 'Voldamot is the greatest Wizard. Voldemort will rule the world!';

const newQuote = quote.replace(/Voldamot/g,'Harry Potter')
//outputs: Harry Potter is the greatest Wizard. Harry Potter will rule the world!

By passing the global flag (g) to the regex pattern, it tells the replace method to search for all occurrences of Voldamot in the string, and replace them with Harry Potter.

Using `String.replaceAll`

Trying to replace all occurrences of a substring with the replace method can be quite a workaround. The String type provides a method that is more straightforward in achieving this, replaceAll.

const newString = oldString.replaceAll(pattern, replacement);

Introduced in ES2021, the replaceAll method is a sequel to the String.replace. The replaceAll method returns a new string in which all occurrences of pattern are replaced by the replacement passed to it.

Example:

const str = "David is a self-taught developer. David will rule the world!";

let newStr = str.replaceAll("David","Victor")
//output: Victor is a self-taught developer. Victor will rule the world!.

No need for regular expressions here, making the process seamless.

Wrapping Up

And that’s it. The String type provides two methods to replace occurrences of a string:

replace(): only replaces the first occurrence of the substring with replacement, also accepts regular expressions, and uses the g flag to replace all occurrences of the substring with a new one.
replaceAll(): replaces all occurrences of the substring, method is more straightforward.

And you’re good to go! thanks for reading and, happy coding!.

Tools for Web Developers To Work Smarter and not Harder

Victor Ikechukwu — Fri, 25 Jun 2021 13:30:23 +0000

"A man is only as good as his tools"
-Emmert Wolf

In the software development industry. This would closely mean A Developer is only as good as his tools. As the difference in the productivity levels of two developers with the same technical knowledge is sometimes based on their toolset.

Hello There 👋, Beautiful Coder on the internet. Welcome back to my blog. In this blog, I write articles about tech, programming, and my life as a teenage developer. In this article, I'm going to round up some of the most interesting front-end developer tools of 2021. Which you will definitely find useful for your own development workflow.

The key to being a productive developer is to work smarter and not harder. using tools that speed up most of the tasks that you do. Making you more productive and simplify your work.

These development tools aren't really the most popular or hottest in 2021 👉👈, but they do come in handy for me, simplifying my work and making me more productive. As am sure they will too for you 😏. Already excited, let’s get started.

⚙️ Web Developer

First up, Web Developer. This is definitely my favorite tool in the list, hence it comes first 😄. The Web Developer is a browser extension that comes bundled with various web developer tools. Web Developer extension adds various web developer tools to a browser. Add it to your web browser and take development to the next level. The extension is available for Chrome, Firefox, and Opera.

Once installed. you can open a panel like this.

That gives you access to lot of amazing commands like, Toggle CSS and JavaScript for a site on or off, view the semantic structure of a site, inspect how it looks on various screen sizes, disable images to see if the have alt text. The list is endless 😄.

QUOKKA.JS

RAPID JAVASCRIPT PROTOTYPING IN YOUR EDITOR

Quokka is a developer productivity tool, That helps developers to rapidly prototype JavaScript or Typescript Code right in their code editor. Quokka makes prototyping,learning and testing JavaScript and Typescript code blazingly fast. With Quokka, there are no configurations required by default. All you need to do is simply start up a JavaScript/Typescript file and you are ready to go 👍.

To get started using Quokka, you can install it as an extension in your code editor. Head over to their website and get the version for your code editor and directions on how to set it up. Quokka has two editions, The Community edition which is free for everyone but has a few limitations, bear this in mind 👀. And a commercial Pro edition that provides some additional features but you have to pay for it.

Here's a sneak peek of it in action.

Google Lighthouse

Coding is a very demanding task. And as such, it is common to make mistakes, decrease the overall quality of your site. And that's where Google Lighthouse comes in.
Google Lighthouse is an open-source, automated development tool for testing/improving the quality of your web pages.

Google Lighthouse lets you audit(examine) your web applications based on several parameters, including performance, accessibility, mobile compatibility, Progressive Web App (PWA) implementations, SEO, and more. All you have to do is run it on a page or pass it a URL, sit back and get a very elaborate report with amazing feedback on how to improve the quality and performance of your site. All in just a few clicks.

You can get started with Google Lighthouse if you have the Google Chrome for Desktop Browser. Or If you are a fan of the Command-Line, then you can use the Lighthouse NPM package and its CLI.

See this article on using Google Lighthouse .

Grammerly

Say Goodbye to Textfails

One for the Technical writers. Grammerly is a writing assistant that puts your writing at its best. Grammerly scans what you write for common grammatical mistakes (like misused commas) and complex ones (like misplaced modifiers). Personally, as a technical writer. Grammerly has really helped me improve my writing skills and confidence in blogging, which has lead to better typo-free quality articles. As am sure it will for you 🙌.

Webflow

Web flow provides a modern way for pretty much anyone (even non-technical people) to design and build for the web. It is a free low-code platform for rapidly building custom responsive web apps in a visual canvas with no code. It automatically generates Html, CSS, and JavaScript codes from your designs. That your team can quickly import and plugin into the site's codebase.

With the help of Webflow, designing and building responsive web apps becomes as easy as drag and drop the UI components you need. There is no need to spend days or even months making UI/UX decisions, fighting with state management, setting up access control, or re-inventing the wheel. Saving everyone the stress of repetitively coding everything from scratch 😍. This is especially helpful if you freelance. Designing and launching web pages would only take a matter of days.

Tabnine

Everyone's favorite AI code autocompletion tool 😄. Trusted by over 1 million developers in all programming languages. Tabnine helps developers write code with some magics. It's based on a system of deep learning to help developers code faster, reduce mistakes, and discover best coding practices using Machine Learning. It removes the burden of having to remember code syntax and lets you actually focus on writing good code. And writing it faster, which is the whole point of writing this article, right? 😏. start using Tabnine today to 10X your workflow 😎, by installing it as an extension in your code editor.

Tailwind CSS

Tailwind CSS is a utility-first framework for rapidly building custom user interface (UI) components. This means that, unlike other CSS libraries, it doesn’t provide pre-styled components and classes that’ll have all your projects looking the same (insert Bootstrap). Instead, it provides low-level utility classes for styling virtually every single CSS property like padding (e.g. pt-10), flex (e.g. justify-between), color (e.g. blue-600), and so on. This way, you get to build unique custom interfaces, make better design decisions because it limits your choices via limited class variations. You’ll also never have to worry about naming CSS classes anymore. In fact, With Tailwind CSS. you may almost never need to write CSS again. Awesome, right? 😃

If you want to start using Tailwind CSS for your project, see this article on getting started with Tailwind CSS.

Daily.dev

Daily.dev is a news aggregator, especially for software developers. to help them stay up to date with the latest news in tech. With daily.dev, you will stay updated with the best articles from the best tech publications on any topic. Get all the content you love in one place -- CSS-Tricks, Smashing Magazine, web.dev, hashnode, and +350 sources.

Conclusion

And that's it guys, I hope you are excited to start using these tools, cause I am too 😁, There are a ton more tools out there, but these are my top picks.

Do you know more?

Also, if there’s any other amazing tool you’ve been using that has improved your workflow somehow, The ones you are getting excited to try out yet. Drop them in the comments!. Your Feedbacks are greatly appreciated! 🙌. I too, would love to expand my stash 😄. Have an amazing day!

Enjoyed reading this as much as i enjoyed writing it for you? 😍 . support me 😃

there's nothing more I would like than we become friends on Twitter 💖

If you found this article helpful, please like and share it: really motivates me to publish more.

Thanks so much for reading! 💖 And keep on coding! 👨‍💻.

The History Of JavaScript ⌛

Victor Ikechukwu — Tue, 22 Jun 2021 23:35:48 +0000

Nowadays JavaScript is everywhere 🌍

Hello 👋, Beautiful Coders on the internet 😃. In this article, I would share with you a quick yet comprehensive overview of how the most popular and widely used programming language in the world evolved to be what it is today.

Over the years JavaScript has become the most popular and versatile programming language. Powering over 97% of the web. As a web developer knowing the history of the most popular and in-demand programming language is a plus that will help enhance your understanding of the language.

1995: The Birth of JavaScript

Back in May 1995, the internet was becoming popular. The web back then was just static pages that were often text-heavy and ugly 😌.

the best ones had images floated to the left or right. Not exciting when you compare it to the web today 🤔

The Web needed to be more dynamic. Animations, interactions, and other forms of small automation needed to be the future of the web. To achieve that future the web needed a scripting programming language that ran in the browser.

Brendan Eich a programmer at Netscape was given the job to make this possible and in just ten days he created the JavaScript programming language (originally called Mocha during its development and then changed to LiveScript )

On December 4, 1995, the internet saw the first release of the JavaScript programming language

1996: JavaScript vs. Java

Shortly after its release its name was changed from LiveScript to JavaScript. Many say the reason for the change was to attract developers of another buzzed programming language that was very popular at the time. Which was Java.

The "Java" in JavaScript was just for marketing reasons only 💡.

Because the language itself JavaScript has nothing to do with Java! ☝

Java is a statically typed, compiled programming language, on the other hand. (vanilla) JavaScript is dynamically typed, and interpreted at run-time. check this article for more concise details on the differences btw Java and JavaScript

Many beginners intertwine the two languages as one 👀. But no. JavaScript and Java are actually two complete different programming languages

1997: ECMAScript Is Born As The JavaScript Standard

A year later, in 1997. JavaScript had experienced rapid growth as many developers adopted the language and more browsers started adding JavaScript support. It became clear that the language would need to be properly maintained and managed. Therefore Netscape and the developers of the language submitted the JavaScript programming language to the standards organization European Computer Manufacturers Associate (ECMA) International a Swiss organization to define international standards for computing. For consideration as the industry standard.

a technical committee at EMCA known as TC39 is the organization behind the standardization of the ECMAScript (JavaScript) specification. The TC39 committee is a group of JavaScript developers, implementers, academics, and more from different companies including Google, Microsoft, Netflix, Facebook, and Paypal. Their job is for creating, approving, and denying language features, to maintain and evolve the definition of JavaScript

with that, the first standard version of the JavaScript language that was supported across all browsers ~ ECMAScript 1 or commonly known as ES1 was released

2009: ES5

In 2009 the JavaScript version ES5 (ECMAScript 5) was released with a lot of new major features like JSON support, Getters & Setters on Objects, new array methods like forEach and map that were not yet wildly supported among different browsers. as a result, it took some years for browsers to support these features.

As a Web developer, you must understand ES5, why? 👇

ES5 is the standard version of JavaScript Programming, as it is fully supported in all major browsers i.e internet explorer.
Many (old) codebases are still written in ES5.
it's better and easier to learn the fundamentals in ES5, and then update to ES6 and ESNext.

2015: Anticipated Update of the year ~ ES6/ES2015

In June 2015, the much-awaited and anticipated version of the language 😄 ES6 was released

Which was the biggest update to the language ever!

ES6 brought new syntax and awesome features to make your code more modern and readable. It allows you to write less code and do more. ES6 introduces many great features like arrow functions, template literals, classes, destructing, Modules… and more.

This was(is) a really big deal for the whole JavaScript community.

Ever since the major 2015 ES6 release, The TC39 committee changed to an annual release cycle. This means a new version of JavaScript with just a few new features is released every year. Instead of shipping a huge new version, with a ton of features every couple of years 😔.

What’s next? ESNext

ESNext is the name that indicates the next version of JavaScript(ECMAScript) that is to be released.

As of the time of writing, the current ECMAScript version is ES2020(ES11). It was released in June 2020.

It is usually common for JavaScript editions to be standardized during the summer, so we can expect ECMAScript 2021(ES12) to be released this summer 😉.

At the time of writing, ES2020(ES11) has been released, and ESNext is ES2021(ES12)

Proposals to the ECMAScript standard are organized in stages. Stages 1–3 are an incubator of new features, and features reaching Stage 4 are finalized as part of the new standard.

At the time of writing we have several features at Stage 4. The latest versions of the major browsers should already implement most of those.

Types of JavaScript

In the industry, you often hear terms like vanilla or plain JavaScript. It’s just how developers refer to JavaScript without any frameworks or libraries. We know that ECMAScript 2015 or ES6 is the standard version of vanilla JavaScript. But JavaScript also comes in other forms for example.

Typescript was created by Microsoft, it’s a strict syntactical superset of JavaScript, and adds optional static typing to the language. The browser cannot understand a file written in Typescript so it needs to be compiled into standard JavaScript code so it can run.

CoffeeScript adds syntax sugar to JavaScript that makes it in an effort to enhance JavaScript’s brevity and readability. Its also not understood by rowsers and needs complied into standard JavaScript.

Dart is an object-orientated JavaScript language made by Google. Dart is used to create highly complex and easily scalable apps for the web, mobiles. Dart has been approved by ECMA like vanilla JavaScript. Dart uses a different syntax than vanilla JavaScript but it can be translated into vanilla so it can be used in a browser. Node.js is a cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command-line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. React is a JavaScript front-end library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React is mainly used as a base in the development of single-page or mobile applications. Jquery was made to simplify JavaScript making it easier to learn. It takes a lot of common JavaScript tasks that need lots of code to write in vanilla and wrap them into a single line. The Jquery contains features like DOM traversal and manipulation, event handling, Animation, and even Ajax. Jquery doesn’t need to be compiled and will run in all major browsers.

Where is JavaScript Today

Although the origins of JavaScript started in the web browser, it has now evolved beyond that to become a multi-platform language. Supporting all major paradigms of programming.

The most common place you’ll encounter JavaScript is on the web. Developers now use JavaScript to make websites more engaging with things like 3D graphics, animations, transitions, and more. It’s also possible to build native mobile apps that run both on iOS and Android using JavaScript.

frameworks like React & Ionic. You can even find JavaScript in Desktop applications like the text editor Visual Studio Code 😏 and popular messaging apps like Slack. It can be used to control hardware with IoT devices.

Wrapping Up

I hope this article helped you. Now you have a nice overview of the history/ evolution of the most popular programming language of the web.

This is a topic that could come up in an interview 🤷‍♂️, so yeah it's worth knowing

If you would like to chat or have any questions, drop them in the comments I’m always happy to talk.

I hope you learned something new from this, Thanks so much for reading!! ❤ And keep on coding! 👨‍💻.

Enjoyed reading this as much as i enjoyed writing it for you? 😍. support me with a coffee 😃

Understanding JavaScript Array Methods

Victor Ikechukwu — Wed, 16 Jun 2021 00:49:33 +0000

If you're a JavaScript developer, then you should be familiar with the most commonly used ES5 and ES6+ array methods.

These methods make coding in JavaScript a lot easier and also make your code look clean and easy to understand to everyone.

So in this article, we are going to explore some of the most important and widely used array methods used in JavaScript. So let's get started.

The Array.forEach Method

The Array.forEach method has the following syntax:

Array.forEach(callbackfn: (value: element, index: number, array: []))

The forEach method executes a provided callback function once for every element in the array.

const months = ['January', 'February', 'March', 'April', 'May', 'June'];
months.forEach(function(month) {
  console.log(month);
});

/* output
January
February
March
April
May
June
*/

Here's a Codepen Sample

Here, inside the forEach loop callback function, each element of the array is automatically passed as the first parameter of the function.

One important thing you need to keep in mind is that the forEach method does not return any value.

Take a look at the below code:

const workDays= ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
const returnedValue = workDays.forEach(function (day) {
  return day;
});

console.log('returnedValue: ', returnedValue); // undefined

Note that forEach is only used to loop through the array and perform some processing or logging. It does not return any value, even if you explicitly return a value from the callback function (this means that the returned value comes as undefined in the above example).

Advantages of using the Array.forEach Method

Using a forEach loop makes your code shorter and easier to understand
When using a forEach loop, we don't need to keep track of how many elements are available in the array. So it avoids the creation of an extra counter variable.
Using a forEach loop makes code easy to debug because there are no extra variables for looping through the array
The forEach loop automatically stops when all the elements of the array are finished iterating.

The Array.map Method

The Array map method is the most useful and widely used array method among all other methods.

The Array.map method has the following syntax:

Array.map(callbackfn: (value: element, index: number, array: []))

The map method executes a provided callback function once on every element in the array and it returns a new transformed array. that contains the results.

Take a look at the below code:

const workDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
const upperDays = workDays.map(function (day) {
  return day.toLocaleUpperCase();
});

console.log( upperDays); 
//output ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY','FRIDAY']

Here's a Code Sample

In the above code, inside the callback function, we’re converting each element to uppercase and returning it.

Using map method helps to avoid creating a separate converted array beforehand for storing the converted elements. So it saves memory space and also the code looks much cleaner using Array.map

Note that the map method returns a new array that is of the exact same length as the original array.

The difference between the forEach and map methods is that forEach is only used for looping and does not return anything back. On the other hand, the map method returns a new array that is of the exact same length as the original array.

Also, note that map does not change the original array but returns a new array.

The array map method is also useful if you want to extract only specific data from the array like this:

const workers = [
    {
        first_name: 'Mike',
        last_name: 'Sheridan',
        age: 30
    },
    {
        first_name: 'Tim',
        last_name: 'Lee',
        age: 45
    },
    {
        first_name: 'John',
        last_name: 'Carte',
        age: 25
    },
    {
        first_name: 'Paul',
        last_name: 'Victor',
        age: 22
    }
]

const workersAges = workers.map(function (user) {
    return user.age 
})

console.log(workersAges)
//output: [30, 45, 25, 22]

Here's a Code Sample

In the above code, we're extracting only the age of each worker and storing them in a new array.

Advantages of using the map method

It helps quickly generate a new array without changing the original array
It allows us to quickly extract any element of the array
It generates an array with the exact same length as the original array

The Array.find Method

The Array.find method has the following syntax:

Array.find(predicate: (value: element, index: number, array: []))

The find method returns the value of the first element in the array that satisfies the provided test condition. and undefined otherwise.

The find method takes a callback function (predicate) as the first argument and executes the callback function (predicate)for every element of the array. Each array element value is passed as the first parameter to the callback function.

Suppose, we have a list of employees like this:

const employees = [
    { name: "David Carlson", age: 32 },
    { name: "John Copper", age: 25 },
    { name: "Mike Sheridan", age: 24 },
    { name: "John Carte", age: 50 }
   ];

and we want to get the record for the employee whose age is less than 30. In this case, we can use the find method as shown below:

 const underAgeWorker= employees.find(function (employee) {
    return employee.age < 30 ;
  });

 console.log(underAgeWorker); 
// outputs: {name: "John Copper", age: 25}

Here's a Code Sample

Even though there is "Mike Sheridan" in the list whose age is also less than 30, the find method will stop when it finds the first match. So it will not return the first object with an age less than 30.

Advantages of using the find method

It allows us to quickly find any element without writing a lot of code
It stops looping as soon as it finds a match so there is no need for an extra break statement

The Array.findIndex Method

The Array.findIndex method has the following syntax:

Array.findIndex(callbackfn: (value: element, index: number, array: []))

The findIndex method returns the index of the first element in the array that satisfies the provided test condition. Otherwise, it returns -1, indicating that no element passed the test.

const employees = [
    { name: "David Carlson", age: 32 },
    { name: "John Copper", age: 25 },
    { name: "Mike Sheridan", age: 24 },
    { name: "John Carte", age: 50 }
   ];

const index = employees.findIndex(function (employee) {
  return employee.name.indexOf('John') > -1;
})

console.log(index); 
// outputs:  1

Here we get the output as 1 which is the index of the first object with the name John. Note that the index of an array starts with zero.

Advantages of using the findIndex method

It allows us to quickly find the index of an element without writing a lot of code
It stops looping as soon as it finds a match so there is no need for an extra break statement

The Array.filter Method

The Array.filter method has the following syntax:

Array.filter(callbackfn: (value: element, index: number, array: []))

The filter method takes a callback function as the first argument and executes the callback function for every element of the array and returns a new array with all the elements that meet the condition specified in the callback function.

So using the filter method, it does not stop when it finds a particular match but keeps checking for other elements in the array that match the condition. Then it returns all the matching elements from the array.

const employees = [
    { name: "David Carlson", age: 30 },
    { name: "John Cooper", age: 24 },
    { name: "Mike Sheridan", age: 25 },
    { name: "John Carte", age: 50 }
   ];

   const employee = employees.filter(function (employee) {
    return employee.name.indexOf("John") > 1 ;
  });

console.log(employee)
//output [ { name: "John Cooper", age: 24 }, { name: "Mike Sheridan", age: 25 } ]

Note that the filter method always returns an array. If no element passes the test condition, an empty array will be returned.

Advantages of using the filter method

It allows us to quickly find all the matching elements from the array
It always returns an array even if there is no match, so it avoids writing extra if conditions
It avoids the need of creating an extra variable to store the filtered elements

The Array.every Method

The Array.every method has the following syntax:

Array.every(callbackfn: (value: any, index: number, array: []))

The every method tests whether all elements in the array pass the provided test conditions and returns a boolean true or false value.

Imagine you have a registration form, and you want to check if all of the required fields are entered or not before submitting the form. You can use the every method to check for each field value easily.
Here's a Code Sample

Advantage of using the every method

It lets us to quickly check if all the elements match certain criteria without writing a lot of code

The Array.reduce Method

The Array.reduce method has the following syntax:

Array.reduce(callbackfn: (accumulator: any, currentValue: any, Index: number, array: []), initialValue)

The reduce method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Note that the output of the reduce method is always a single value. It can be an object, a number, a string, an array, and so on. It depends on what you want the output of reduce method to generate but it's always a single value.

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, number) {
  return accumulator + number; 
}, 0);

console.log(sum); // 15

The reduce method accepts a callback function that receives accumulator, number, index and array as the values. In the above code, we’re using only accumulator and number.

The accumulator will contain the initialValue to be used for the array. The initialValue decides the return type of the data returned by the reduce method.

The number is the second parameter to the callback function that will contain the array element
during each iteration of the loop.

In the above code, we have provided 0 as the initialValue for the accumulator. So the first time the callback function executes, the accumulator + number will be 0 + 1 = 1 and we're returning back the value 1.

The next time the callback function runs, accumulator + number will be 1 + 2 = 3 (1 here is
the previous value returned in the last iteration and 2 is the next element from the array).

Then, the next time the callback function runs, accumulator + number will be3 + 3 = 6 (the first 3 here is the previous value returned in the last iteration and the next 3 is the next element from the array) and it will continue this way until all the elements in the numbers array are not iterated.

So the accumulator will retain the value of the last operation just like a static variable.

In the above code, initialValue of 0 is not required because all the elements of the array are
integers.

Advantages of using the reduce method

Using reduce allows us to generate any type of simple or complex data based on the array
It remembers the previously returns data from the loop so helps us avoid creating a global variable to store the previous value

Thanks so much for reading!

*That's all from me guys. hoped you've learned a little bit about the awesome JavaScript Array and its methods *

If you still have any questions, don't hesitate to reach out in the comments section below!

Want to stay up to date with regular content regarding JavaScript, Python, And How to code in general? Follow me on Twitter .

**Enjoyed reading this as much as I enjoyed writing it for you? 😍** . support me with a coffee 😃

Getting Comfortable With CSS Selectors (Part 2) pseudo-classes and pseudo-elements in CSS

Victor Ikechukwu — Mon, 14 Jun 2021 07:07:34 +0000

Hello everyone 👋‍, Welcome back to my series, Getting Comfortable With CSS Selectors,
if this is the first post in the series you are reading, I recommend checking out my previous article Getting Comfortable With CSS Selectors (Part 1) to follow up in the in series 😉.

in this article, we are going to continue from where we left off in the first part of the series, where we talked about some of the selectors we have in CSS. we will be looking at the Pseudo-Classes and Pseudo-Elements CSS selectors. sounds cool right? let's get into it 👇.

Pseudo-classes

CSS pseudo-classes are not exactly selectors on their own, they are keywords added to a CSS selector and let developers specify a special state of the selected element(s).

All Pseudo-class selectors in CSS are preceded by a colon :.

1. X:hover

/* Any button over which the user's pointer is hovering */
a:hover {
  color: pink;
  text-decoration: blue;
}

One of the most commonly used pseudo-class the :hover pseudo-class, which is used to style element(s) in the hover state (when the user hovers our them with a pointing device, usually a mouse).

so in the example, we would give every link a color of pink when it is been hovered on. Want to apply specific styling when a user hovers over an element? This will get the job done! 👍.

2. X:focus

 /* Selects any <input> with the field class when focused */ 
input.field:focus {
  border: 2px solid blue;
}

The :focus CSS pseudo-class represents an element (usually a form input) that has received focus (accepts keyboard or mouse events, or other forms of input).

in the codepen the :focus pseudo-class is used to give input with the red-class class a red background and a blue background to the input with the blue-class class whenever they are focused on.

3 X:nth-of-type(n)

/* Selects every second <p> element among any group of siblings */
div p:nth-of-type(2n) {
  color: lime;
}

The :nth-of-type() CSS pseudo-class selects elements(selectors) of a given type based on their position/location among a group of siblings.

say we have a ul and we want to style every li whose numeric position in the list is even, no need to give them a special class, we could do that with the :nth-of-type() pseudo-class selector!

What about those whose numeric position in the list is odd, we got it covered

4. X:first-of-type

The :first-of-type pseudo-class Same as :nth-of-type(1). Represents an element that is the first sibling of its type in the list of children of its parent element.
So if I wanted the first li to have a different style from its siblings, I could easily do that using the :first-of-type pseudo-class

5. X:visited

/* Selects any <a> that has been visited */
a:visited {
  color: purple;
}

In some websites, it's common to apply some special styles to links that the user has visited so that when they come back to the page, they can know the external links they have visited already.
This can be done with :visited CSS pseudo-class as its styles only apply to links that have been visited by the user.

Pseudo-elements

We've got another interesting group called pseudo-elements
CSS pseudo-elements are keywords added to a selector that lets you style a particular part of the selected element(s).

I know, i know, it seems similar to CSS pseudo-classes right 🤔. Well there are two main differences between them

pseudo-elements are preceded with two colons :: instead of one, although these days modern browsers are more forgiving and support both single : and double :: colons for the pseudo-elements. But it is a best practice to use two colons :: 😏
pseudo-classes are all about state, when we speak of state, I mean things like a visited link, a focused input field, an image that is being hovered upon, etc. While pseudo-elements are used to style sections or a particular part of of an element, things like the first letter in a word, the first line, etc.

6. X::first-letter (:first-letter)

The ::first-letter represents the first letter on the first line of a block-level element, as long it is not coming after an image or a table.

selector::first-letter {
  property: value;
}

as you can we use the ::first-letter pseudo-element to make the first letter of every <p> 300% and pink 😁.

7. X::selection (:selection)

selector::selection {
  property: value;
}

The ::selection pseudo-element is used to select and style the portion of a document that has been highlighted by the user. This is a really fun pseudo-element selector.

So if we wanted to overwrite the default styles of the browser that is applied text when they are selected/highlighted in our websites and apply our own custom styles, we can easily do that with the ::selection pseudo-element.

8. X::before (:before) And X::after (:after)

The ::before and ::after pseudo-elements are used to generate styleable content around the selected element's actual content, with the CSS content property.

we select the selector and after it, we give the content property a value, and whatever we specify in the value will be added before or after the selector in the Html.

`X::before (:before):` Represents a styleable child pseudo-element immediately before the originating element's actual content.

`X::after (:after):` Represents a styleable child pseudo-element immediately after the originating element's actual content.

By default the ::before and ::after pseudo-elements create an inline element, that can be styled and modified like any other element in the DOM. this gives us control to create cool interesting effects.

🚨 Note the ::before and ::after pseudo-element selectors should only be used to add cosmetic and stylistic content on our page. True content that is actually important for the page should be added to your page's markup.

Here is an example of using the ::before and ::after pseudo-elements i found on Codepen.

Conclusion

Alright coder This brings us to the end of the series, we've covered quite a bit about CSS selectors In this series! 🎉🎉🥂.

for a more comprehensive guide on CSS selectors check out some of these resources.

And if you're up for it I have a Little Exercise On Codepen 😏 For you to test out your knowledge of what we have covered in this series. So I will like you to style the Html using the commented instructions in the CSS panel. Here is the Codepen Solution in case you get stuck 🙂.

So what are you waiting for, take this knowledge out there and go write some top-notch CSS styles that will impress your friends 💃💃.

Thanks so much for reading! ❤ And keep on coding! 👨‍💻.

Share and Like it with your friends and feel free to follow me on Twitter so you won't miss my latest articles again.

Getting Comfortable With CSS Selectors (Part 1)

Victor Ikechukwu — Sun, 13 Jun 2021 02:38:12 +0000

So you have learned the basic id, class, and descendant selectors—and then called it a day? If so, you're missing out on an enormous level of flexibility. You owe it to yourself to commit these advanced CSS and CSS3 selectors to memory

CSS Rules

Every CSS rule follows this general pattern

selector {
    property : value ;
}

where we have of a selector (e.g. h1) and a declaration block ({}) where we declare our styles.
In understanding CSS The biggest key player is understanding selectors and how they work, CSS selectors are what allows us to target specific Html Elements and apply styles in the declaration block to them, we won't be focusing on styles right now though, our focus would be on the selecting and what goes in that selector area

Let's get into it 👇

1. Universal Selector

Selects everything

/* Selects all elements */
* {
    color : black ;
}

The CSS universal selector is donated by an asterisk ✳. It selects all elements regardless of their type present on the page.
In the example above all elements on the page will get the style of color: black; assuming we don't have any more specific selectors that conflict with that.

2. Element (Type) Selector

/* Selects all img */
img {
    width: 200px;
    height: 100px ;
}

The Element Selector Selects all instances of a tag or element present on the page, in our case, we would be giving all img HTML elements on the page the specified width and height.

3. Class Selector

/* Selects all elements with class of 'blue' */
.blue {
    border: blue 2px dotted ;
    background-color: white;
    color: blue;
}

The CSS class selector is probably the most useful and versatile selector, it selects all elements that have given the class value in their class attribute. In the example above it will select all elements that have the "blue" value in their class attribute

4. ID Selector

/* Selects the element with the id attribute set to '#header' */
#header {
    border: blue 2px dotted ;
    width: 200px;
    height: 100px ;
}

Next, we have the ID selector. ID selectors are the most powerful in terms of CSS specificity, just like the class selector, it targets specific elements in our markup, that we can then reference in our CSS.

Note: The value of an element's ID must be unique on a web page. It is a violation of the HTML standard to use the value of an ID more than once in the same document tree. id selectors are rigid and don't allow for reuse

5. Selector List

/* Selects all matching elements in the list */
span, div, p {
    text-align: center;
    color: rgb(0, 0, 0)
}

The CSS selector list (,) allows us to select multiple elements with different selectors at once and style them. You have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. This is done by grouping them in a comma-separated list and CSS selects all the matching elements in the list

Note: When you group selectors in this way, if any selector is invalid the whole rule will be ignored.

Combinator Selectors

This final group of selectors combines other selectors in order to target elements within our documents

6. Descendant Combinator

/* Selects all <a>'s that are nested inside an <ul> */
ul a{
    text-decoration: none;
    color: dodgerblue;
}

This selector allows us to select elements that are descendants of some other selector.

we are selecting all <a> nested anywhere within an <ul>, it doesn't have to be the first child or first descendant it can be anywhere nested inside the ul

7. Adjacent Sibling Combinator

/* Selects only <p> tags that are immediately preceded by a <h1> */
h1 + p{
    color: dark-grey;
}

The + combinator selects adjacent element siblings.it will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each h1 will have dark-grey text.

This means that the second element must directly follow the first, and both share the same parent.

8. (Direct) Child Combinator

/* Selects all <h2> that are direct children of a <div> */
div > h2{
    color: white;
}

The > combinator acts more like the descendant combinator expect that it is more particular and selects direct children of the parent element, in the Example: div > h2 will match all <h2> elements that are nested directly inside of a <div>.

With the descendant combinator we would select any nested child or grandchild of the parent element. But the child combinator > selects only direct children.

Sorry grandchildren only children allowed 😋.

Attribute Selectors

The attribute selectors allow us to select elements based on the presence of a certain attribute on an element:

9. X[href="foo"]

a[href="https://hashnode.com/"] {
  color: blue; 
}

The snippet above will style all anchor tags which link to https://hashnode.com/; they'll receive the blue color. All other anchor tags will remain unaffected.

What if the link does indeed direct to Hashnode, but maybe the path is hashnode.com rather than the full URL?

10. X[href*="foo"]

a[href*="hashnode"] {
   color: blue; 
}

There we go. The star designates that the proceeding value must appear somewhere in the attribute's value

11. X[href^="http"]

a[href^="http"] {
   text-decoration: 1px solid blue;
   padding-left: 10px;
}

the carat symbol ^ designates the beginning of a string. If we want to target all anchor tags that have an href which begins with http, we could use a selector similar to the snippet shown above.

12. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

the symbol $ refers to the end of a string. In this case, we're searching for all anchors which link to an image—or a URL that ends with .jpg.

Conclusion

Alright coder we have covered quite a bit about CSS selectors! 🎉.

Universal Selector
Element (Type) Selector
Class and ID Selectors
Combinators
- Adjacent, Descendant, and Direct Child Combinators
Attribute Selectors and their variants.

In the next part of this series, we are going to talk about Pseudo Selectors, a big and widely confusing topic in CSS 🤔.

So what are you waiting for, take this knowledge out there and go write some top-notch CSS styles that will impress your friends.

Enjoyed reading this as much as i enjoyed writing it for you? 😍 . support me with a coffee 😃

Deploy a React Application to Netlify

Victor Ikechukwu — Sun, 13 Jun 2021 02:22:01 +0000

Hey guys 👋, in this article we are going to look at the two different methods that we can use to host and deploy your react applications using Netlify.

The first method takes less than a minute, which is crazy. and the second method which includes continuous deployments and updates to our app through GitHub will only take you a few minutes to set up 🤠. That's amazing. excited? i am too 😀, let's get right into it 👇.

To follow along with this tutorial, you need to have a Github and Netlify account. so go to their sites and create one if you haven't already.

with that done. we are going to create a new react app. so that you can follow along 100% of the
way.

Create a new React App

create a new empty folder on your desktop or any directory of your choice. give it a name. I'm gonna
call mine react_app. great.

open it in your VS Code or any editor of your choice.

Next, we will need to open up a terminal. you can make use of your operating system default Terminal, Git bash, or the integrated terminal that is built-in with VS Code.

Navigate to the directory where your app is. mine is

cd desktop/react_app

you won't have to do this if you are using the integrated VS code terminal 😏.

From here you will be able to initialize your react app. by simply running

npx create-react-app (Name_Of_App)

where (Name_Of_App) would be what you want to name your react app.

This might take some time. so feel free to go make yourself a hot cup of tea ☕ while it runs on your device 😊.

Great!, after that's done your folder structure should look similar to this in your code editor.

run

npm start

to start the application and preview it in your browser. you should see something like this.

Great! 🎉🎇. we successfully created a demo react app.

you can go to the src folder and edit the App.js file before deploying. to customize it a bit.

Something like this.

function App() {
return (
<div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>This is my first Deployment 😊🎉</p>
    </header>
</div>
);
}

Save, and now you should see your edited version in the browser.

Great!, now let's focus on the main goal of this article. to show you how we can take our app from the localhost port 3000
that only we can see. to the internet. so that you can share it with your friends, employers. really anyone.

Time to Deploy!

Manual Deployment

We are going to try out the first and easiest method of deploying react apps. but you need to have a
Netlify account. so go ahead and signup or log in if you
already have one.

after logging in. go to the bottom of the page and you will see this empty box. where we can drag and drop our site folder.

Before getting to it. first, stop the react server by hitting Ctrl C in our terminal.
next, we would need to build our react app. simply run

npm run build

This is going to create a built version of react that our browsers can natively understand. and we can freely deploy on the web. read more about this
here.

once done, you should see the build folder. in your folder structure.

open your react app in finder if you're on a mac or file explorer for windows.

next, drag and drop the build folder into the empty box on the Netlify page. that is it. after a few seconds, the application should be deployed on the web! 🎉. now we have a real URL
that we can share with people to access the site 😊. that is it this process works for any frontend react application. it's that simple.

Automated Deployment

One major problem with our current deployed version is that. if we make a change to our source code, the changes are not going to be reflected on the deployed version.

And this makes sense, because. remember it is the build folder that contains the version of our app that is accessible by web browsers. And we had manually pushed it to Netlify already, so changes made to our code, won't be reflected on our build folder on Netlify. unless we build our app again. and deploy it manually again 👀.

As you can see this process is impossible 😞🤦‍♂️.

🤔 So how do we deploy our applications so that, all the changes made to the code are reflected on the deployed site, each time we push to Github.

To do that we need to add the project to a Github repository. go to Github and create a new empty repository for your app. follow this guide on the Github docs, on how to connect your app to a remote repo on github.

once your repo is connected to your app. run

git push -u origin main

on your terminal to push your code to GitHub.

we can head back to Netlify. scroll to the top and press on the "New site from Git" button.

You will be asked to choose the Git provider where your site’s source code is hosted. When you push
to Git.

Then you can search for the specific repository you wish to deploy, among all your Github
repositories. Click on it.

Click on the "Deploy" button.

And there you have it!. your app is now Live!. congratulations! 🎉

Proving that our Deployment is Automated

Now, whenever you push to Github. Netlify would automatically build our app for us and update our
deployed version.

To prove this. we are going to make some tweaks to our App.js file by simply changing some text. To see if truly our
changes would be reflected on the live site. once we push to Github.

function App() {
return (
<div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p> SECOND DEPLOYMENT: BREAKING CHANGES 😊🎉</p>
    </header>
</div>
);
}

export default App;

Once those changes are made. commit and push your code to Github.

In no time you should see your changes reflect in your Netlify website.

Hurray!

Conclusion

And that is it, guys. we now have a deployed version of our react application, which would be updated whenever we push
our changes to Github.

Thanks so much for reading. hope you wouldn't break a sweat when next you are deploying your react
applications 😅.

Let me know in the comments which free hoisting service you have been using. and maybe I might write
on that.

What are you still waiting for? 🤷‍♂️. go deploy that react app to Netlify!.

I hope you found this helpful, Thanks so much for reading!! 💖 And keep on coding! 👨‍💻.

Forem: Victor Ikechukwu

A Very, Very In-Depth Guide on CSS Grid

The CSS Grid vocabulary

How to make a basic grid

Grid Template Columns

Grid Template Rows

Adding a gap between rows and columns

column-gap

row-gap

What does CSS Grid have in common with Flexbox?

How to align content horizontally

justify-items

justify-content

justify-self

How to align content vertically

align-items

align-content

align-self

Introducing new measurement units

The fractional (fr) unit

min-content

max-content

Useful CSS functions to combine with CSS Grid

repeat()

minmax()

fit-content()

Expanding grid items across multiple grid lines

grid-column-start

grid-column-end

grid-row-start

grid-row-end

CSS Grid shorthands

Using a single CSS rule to set all gutters in a grid

Combining horizontal and vertical alignments into single CSS rules

place-items

place-content

place-self

Shortening the CSS for spanning grid items across columns and rows

grid-column

grid-row

Bringing it all to a single property: grid

Try out CSS Grid yourself!

Everything You Need to Know about All 11 CSS Filters

How Do CSS Filters Work?

blur

brightness

contrast

grayscale

hue-rotate

invert

opacity

saturate

sepia

drop-shadow

url

Other Usage Notes

Using Multiple CSS Filters

Usage with the initial and inherit keywords

Try using CSS filters yourself!

Replace Occurrences of a String in JavaScript

Using String.replace

Using regular expressions

Using String.replaceAll

Wrapping Up

Tools for Web Developers To Work Smarter and not Harder

⚙️ Web Developer

QUOKKA.JS

Google Lighthouse

Grammerly

Webflow

Tabnine

Tailwind CSS

Daily.dev

Conclusion

Do you know more?

The History Of JavaScript ⌛

1995: The Birth of JavaScript

1996: JavaScript vs. Java

1997: ECMAScript Is Born As The JavaScript Standard

2009: ES5

Using `String.replace`

Using `String.replaceAll`