Checkout my Getting Started with React video course on Skillshare. It is 100% free.

Using grid-area to span an element across multiple CSS grid cells

Let's say we want to build the example below:

Defining the grid can be easily done with the repeat function:

.container {
    display: grid;
    grid-template-columns: repeat(3, 75px);
    grid-template-rows: repeat(3, 75px);
    grid-gap: 5px;

All the elements (besides the green one) take only one cell, so placing them it's quite straight forward with something like:

.red {
    grid-row: 3;
    grid-column: 1;

Now, the tricky part is with the .green element. To make it span across multiple cells we have a few ways of doing it. We can use grid-row-start and end or we can use the span keyword.

For me, the most intuitive approach is by using the grid-area property. How it works is by giving it the coordinates for the top-left cell and the ending bottom-right cell.

The element will span all the way from the top-left to the bottom right. However, keep in mind that the actual bottom-right cell is not included so we will have +1 for the ending coordinates.

So, in our case if we want the green cell to go from cell 1-1 to cell 2-2 we will have:

.green {
    grid-area: 1 / 1 / 3 / 3;

The full documentation about it property can be found here.

You can see the full working codepen below.

See the Pen
by JS Craft (@js-craft)
on CodePen.

EXTRA TIP: if you add one element in a CSS grid but you don't specify where you want that element to be placed the grid will place it in the first available cell that is found by traversing top-left to bottom-right. The next one in the next available cell and so on. This is the reason why we did not need to manually place the blocks that take just 1 cell (.red, .blue etc). – see what working setups other developers are using

Confession: not sure what's wrong with me but I have been always a bit obsessed with the workspace setup of the people I admire. What tools do they use, what software, what's their workflow, where and when do they work from? Even how the office looks like?

Almost the first thing I do when I am on the website of someone I like is to go to the about page hoping I will see a picture of their workspace. I think in my mind it's something like "if I will imitate that I will be as smart as he/she is".

A few days ago I came across It is a collection of developers' computer setups. The different ways of working are fascinating and as you may imagine it's a small treasure for workspace setup-er freak like me.

So, If you're curious about what folks are using for daily development, give it a go. I think I've spent a few hours bouncing from one site to another.

Bonus: I've found here a collection of pictures of the workspaces of famous writers.

Specialization – a way to manage learning fatigue

One of the most exciting things about being a software developer is also the greatest cause of stress and anxiety: the constant changes.

Always a new library, a new framework, a new concept, a new way to do something. A friend of mine, also a developer, once said to me "dude, sometimes my brain hurts from all the learning".

I have worked with super-smart and talented developers. The ones that know so much and think so fast that they make you feel like an old 486 vs a 32 core processor. Maybe, they have some chances to keep up with all the moving parts. Maybe.

But most of us are not like that. We can't keep up with making cool stuff with CSS, learn all the JS Frameworks, be up to date with what happens on the backend side and meanwhile also write a GraphQl open-source library while you play with the latest machine intelligence tools.

So one thing you can do is to specialize. Pick your battles!

Find what excites you. What drives your interest. For me, it was the mix of front-end development, a bit of design and a passion for building products.

I know how to make a SQL query, but I could not care less for how well the DB is optimized. I don't care what we use for continuous deployment or how we host our stuff. But I love implementing a new design, simplify the CSS, attracting new users to the product and see the charts go up.

Also, focus on the things that don't change. The ones that are here to stay. Security, CSS, SQL, responsive design and so on.

Indeed if you are a beginner, and after you get your basics up, spend some time experimenting. See what types of problems are interesting for you and give you pleasure to solve them.

But, in the long run, I've found that it's a better idea to be very good at something and, more or less, ignore the rest. You will get better jobs and feel a bit less anxious in trying to keep up will everything.

The CSS inset property explained

In many circumstances, we will use something a combination of the top - bottom - left - right properties to set or adjust the position of an element on the page.

I have found myself quite often waiting to have a shorthand for these properties. In the end, is we can write something like this:

margin: 10px 20px 5px 15px;
/* sets the margin to:
maring-top: 10px;
maring-right: 20px;
maring-bottom: 5px;
maring-left: 15px;

Then why I can't do the same for the coordinates props?

Well, this is exactly what inset is here for. The CSS inset It is a shorthand that corresponds to the top, right, bottom, and/or left properties. For example:

inset: 10px;
 /* is the same as:
top: 10px;
right: 0; 
bottom: 0; 
left: 0;` */

inset: 2.4em 3em 3em 3em;
 /* is the same as:
top: 2.4em ;
right: 3em; 
bottom: 3em; 
left: 3em;` */ 

inset: 4px 8px; 
 /* is the same as:
top: 4px ;
right: 8px; 
bottom: 8px; 
left: 8px;` */ 

You can see the full docs here.

It is a part of the CSS Logical Properties, together with margin-block and margin-inline.

Keep in mind though that this is still work in progress. The support for it is not great yet but it will improve in the future. For not it is supported in Firefox only.

Four lines of CSS to make a calendar layout with CSS grid

A calendar layout seems a perfect candidate to be using the CSS grid. Let's see how we can accomplish this with the minimum amount of code.

The final example will look like this.

And our HTML structure will be the following:

<div class="days-of-week-container">
      <!-- the list continues -->
<div class="calendar-container">
  <!-- the list continues -->

In normal circumstances, we will not have to write by hand all the <div>1 ... 31</div> stuff. It will be generated by Javascript, but for the sake of the example, we will just use basic HTML and CSS.

We have two main sections, the days-of-week-container and the calendar-container. Both of them will be grids, with the right text-align:

.calendar-container {
  display: grid;
  text-align: right;

Now, if we take a look at our grid it's pretty clear that we will have 7 columns. It's a bit, troublesome to write by hand something like:

grid-template-columns: 30px 30px 30px 30px 30px 30px 30px;

So we can use just a simple repeat to set up our columns:

grid-template-columns: repeat(7, 30px);

Now, given the auto-placement of the elements in the cells, the days of the week and the actual calendar will be placed first to last in the 7 column layout.

See the Pen
by JS Craft (@js-craft)
on CodePen.

But, what if the month does not start on Monday? We can just use the grid-column to move the placement of the first day in the calendar, and the auto-placement will take care of the rest.

.calendar-container div:first-child {
  grid-column: 7;

See the Pen
Calendar with starting date
by JS Craft (@js-craft)
on CodePen.

So, voila, another example of how much we can get done with CSS grid and just a few lines of code.

Tools of the trade: the CSS grid generator and the CSS selector explainer

Today I want to share with you guys two sites I've have found recently. Both of them quite useful for our CSS endeavors.

The first one is the CSS grid generator made by Sarah Drasner. Define a grid, select the areas where you want the content to be, how big it should be, the spacing and the generator will give you the code to make it happen. Good to use when you want to learn or make some fast sketches using CSS grid.

And the second is the Selectors Explained tool. It's super cool. You give it a selector and it will show a nice "plain English explanation" for what that selector means alongside its CSS specificity score.

For example, if you give it:

#main-from > input[type=text] 

It will give back: "An input element with an attribute type whose value is text … directly within the element with id main-from". And with a specificity score of 1.1.1.

Pretty neat, no !? Btw, here you can find also 2 games for learning CSS grid and Felxbox.

Video – Using XHR breakpoints to intercept HTTP calls in Chrome Devtools

Last week I've found myself in a tricky caching situation where I could not say exactly was happening with an Ajax call.

Mike Sherov was kind enough to show me how we can use the Google Chrome Devtools to pause any Javascript execution when an HTTP call is made and point to where that call was made from.

I made a short video about it. Hope you like it.

By the way, check Mike's courses on egghead about Web Security Essentials and JavaScript ES2019 in Practice. They are super good!

How to better market yourself as a React developer

Usually, I stay away from topics like "personal branding". I can see the value of this concept, but a lot of the talks surrounding it are full of bla bla.

However, I've recently discovered this recording on youtube by Shawn Wang.

What I like about this talk is that you have a lot of high applicable, practical information that you may get from something a programming screencast. Especially in the first half.

I also liked that it uses a lot of examples from the React community. How guys like Wes Bos or Kent C. Dodds build their brand. Also, it gives some great tips on where to find React and Javascript side project ideas to add to your CV.

So, go ahead, give it a try:

Selecting the full text with just one click in CSS

In CSS we can use the user-select property to decide how the user can select the text.

By default, a user has to drag and hold the cursor to select the wateded text. But thanks to the user-select prop we can select a full text with just one click:

.select-all-text {
    user-select: all;
    -moz-user-select: all;
    -webkit-user-select: all;

And you can apply the .select-all-text class the whatever element is needed. A paragrpah, a div and so on.

But you can also have a no-select option if you don't want to allow any selection, or copy paste at all.

.no-select-allowed {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

Below is a full Codepen example with these options in action.

See the Pen
CSS User Select
by JS Craft (@js-craft)
on CodePen.

PS: if you want to reved to the default way of selecting the text you can say:

.default-select {
    user-select: auto;
    -moz-user-select: auto;
    -webkit-user-select: auto;

When to use CSS grid and when to use flexbox

There are cases when it's a bit confusing to decide if one should use flexbox or the CSS grid for the layouts. Till a point, both of them are interchangeable.

Maybe the best, and the shortest definition of the difference between Flexbox and CSS grid : Flexbox is for one-dimensional layout. A row OR a column. Grid is for two-dimensional layout. Rows AND columns.

It's from a tweet of Rachel Andrew (read her blog; it's fantastic).

So if we have a case like this, with just one dimension flexbox is a good fit.

Meanwhile, a case like this is more suited for a CSS grid.

However, keep in mind that a flexbox layout can "flow" on multiple rows if it does not have enough space for its elements. But it's still unidimensional.

But if we look at a design like this, the blue rectangle is set on two dimensions so CSS grid is the way to go.

Also, in this video, Jen Simmons explains how they’re different, and when you should choose one over the other.