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

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.


Beyond console.log() – 3 Console methods you can use for better Javascript debugging

We can enhance our Javascript debugging experience using a set of less known features of the Console utility.

1. Using CSS with console.log

You can style your console log messages. You need to add the %c flag alongside a second parameter containing the actual CSS styles. For example:

console.log("%cA green message", "background-color: green; padding: 5px; color: white");

will output the following:

2. Using console.table() and console.dir() to print objects.

The plain console.log() is meant to print single lines. However, if you want to print objects console.table() and console.dir() are a better fit.

For example, if we have the following objects:

const firstChar = {name: "Han Solo", age: 35};
const secondChar = {name: "Chewbacca", age: 190};

The console.table(firstChar) will give the following nice formatted output:

And we can use table also with an array of objects.

console.table([firstChar, secondChar]);

Will output:

3. Adding new flavors: console.warn() and console.error()

And maybe the easiest commands to add to your toolbelt are the different levels of errors in showing up a message:

console.log("a simple log"); // no alter
console.warn("pay attention!"); // yellow alert 
console.error("a serious error !!!"); // red alert

This will output:

Disclaimer: when it comes to finding what is wrong with your Javascript code, please keep in mind that in the vast majority of cases it's faster to use tools like the javascript debugger from Google Chrome DevTools or Firefox instead of the plain old console.log.

Why use the :root pseudo selector to define CSS variables

o my shame, I have found about the CSS :root selector only a few weeks ago when I was changing some styling in the WordPress theme of this blog.

I've seen a piece of code similar to the one below:

:root {
    --color__success: #1fc281;
    --color__info: #00b9f2;
    --color__warning: #f4cc31;
    --color__danger: #e83337;

I've recognized the declarations of the CSS variables but what was that :root thing doing there !?

And started to read more about it.

Long story short. The :root is referring to the highest-level parent of a given specification. In the HTML specification, the :root is essentially the same as the html selector.

But, CSS is also designed for SVG. So, we can use :root to select the highest-level parent of a given specification even if is HTML, CSS or XML.

This means that if we want to define global properties, like CSS color variables, we will use :root and those variables will be available both in HTML and SVG.

:root { 
    margin: 0; 
    padding: 0; 
    --main-color: #ff1100; 

html {
    color: var(--main-color);

svg {
    fill: var(--main-color);

And also keep in mind that root is a pseudo selector. This means it will have a higher specificity that the html element selector.

:root { 
    background-color: red; 
    color: white; 
html {
    background-color: red; 
    color: white;