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

CSS Logical Properties

Create spacing that works regardless of the direction of your content or the environment of your users.

Say you want to put some space between two inline items: what do you do? Probably something like this:

.my-element {
    margin-left: 1em;
}

This approach is fine and has been for a long time with CSS, but what happens when the content direction changes? That left margin suddenly becomes problematic because it no longer matches and makes the content look awkward.

Western languages read left to right, but other languages such as Arabic, read right to left. Some languages even read top to bottom, like traditional Chinese.

Our CSS should be as flexible as possible, so instead of explicitly setting a left, right, top or bottom value to margins, we should instead be using a logical property.

Here’s that same example from the start, but with a logical property:

.my-element {
    margin-inline-start: 1em;
}

What this now does is instead of saying “add margin to the left”, it says “regardless of direction, put margin on the starting side”. If the language of the document was right to left, like Arabic, that margin would be on the right hand side.

Why is this important?

The web is global and open, so making presumptions about the users of your website is pretty dangerous.

A variety of factors come into play when someone visits your site, such as connection speed, device power and spoken language. They could also be using a translation extension. It’s our job as web developers to make our content as flexible as possible to meet user needs, regardless of what those needs are, using the powerful, flexible tools that are given to us by the web platform.

Logical properties are a perfect example of this and they have a huge browser support, so you should absolutely use them today.

Resources and further learning permalink

This is only a quick intro to logical properties, but luckily, some other fine folks from around the web have written about them in detail:

CSS Logical Properties - CSS-Tricks
CSS Logical Properties and Values - MDN
Understanding Logical Properties And Values
CSS Logical Properties - Adrian Roselli

Tagged template literals in Javascript

In ES6 the templated literals were added in Javascript. They are used to interpolate values in a string.

const name = 'Tom'
const age = 20;
const myString = `The name is ${name} and the age is ${age}.`;
/* 
myString is now "The name is Tom and the age is 20."
before  ES6 the templated literals we had to write:
myString = "The name is " + name + " and the age is " + age "."
*/

So, this made things a bit more elegant when concatenating strings.

But we can do more than this. We can define tagged template literals. Basically, they are a combination of a tag function and a string template literal. What's returned from the tag function will determine the final format of the string.

Let's say we want to show a string like this one in the below picture.

The basic string literal will just alow use to write this:

const text = `${p.name} is ${p.age} years old.`;

However, with the tagged template literals we can say:

const text = setHighlightTags `${p.name} is ${p.age} years old.`;

We can name the tag function however we want. In our example the setHighlightTags is defined as:

function setHighlightTags(strings, ...values) {
   let str = '';
   strings.forEach((string, i) => {
       str += string;
       if(values[i]) 
          str += `<span class='hl'>${values[i]} </span>`;
   });
   return str;
}

And the .hl CSS class has just some simple rules:

.hl {
    background-color: yellow;
    padding: 2px 10px;
}

And that's pretty much all we need. We can get more creative when we need it. There are libraries, like styled-components (React) or chalk (for colorful logs) that take this feature to the next level.

If you want you can read more about it here. Also, check out below the full codepen for this example:

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

Building a layout with CSS Grid video series: Part 3 – Setting the rows and columns sizes in a CSS grid

In the third lesson of this example, we will use the grid-template-columns and grid-template-rows to size the elements. Also, we will see the CSS grid auto-placement in action and how we can make a CSS layout to span the full height of the screen.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

[Js-Craft #17] CSS Grid Screencasts, a new newsletter layout, CSS margin collapsing and more

Hello everybody,
I skipped sending the last newsletter because an unplanned vacation happened. Therefore I salute you from Greece 🇬🇷 🎉.

Also, I've decided to split this newsletter into three categories. The newly published screencasts, the new articles added on js-craft, and a new section with interesting links and resources I've found around the web. Let’s go!

# Two new screencasts to watch

I am happy to announce that I've started a new video series about CSS Grid. Through about 6 or so episodes we will build a fully responsive CSS grid layout. The first two new episodes are below:

# Six new articles to read

The new articles published on js-craft are:

# Three interesting links from around the web

That's all folks! I would be very happy to hear from you. So, if you have any feedback about this newsletter, the new CSS Grid video series or anything else please drop me an email at daniel [at] js-craft.io

Cheers,
Daniel

6 things I didn’t know you can do in Javascript

The fact that JavaScript is such a flexible language makes it maybe the easiest language to start with and the hardest to master. I’ve been working with JavaScript for more than 10 years now and I still stumble upon some hidden syntax or tricks that I never knew existed.

So let's see some JS mysteries that I've recently discovered.

1. There is a function constructor. You will give it the parameters and the body of the function and it will return back the actual function :

const diff = new Function('a', 'b', 'return a - b');
diff(20,13) // 7

2. We have a with statement in Javascript. It takes as a parameter an object and binds the properties of that object to the scope of the contained code block.

const book = {
    author: 'Ernest Hemingway',
    title: 'The Sun Also Rises'
}
with(book) {
    console.log(author); // Ernest Hemingway
    console.log(title); // The Sun Also Rises
}

3. we can use the + operator to convert a string to a number. No more the need to use functions like parseInt() or parseFloat(), unless you want to parse to that specific numerical type.

const nr = +'1.5';
nr + 1; // 2.5

4. we can assign properties to functions. We can make configurable functions by assigning specific properties to that function.

function sayHello() {
    if (sayHello.country = 'US') {
        return alert('Hi there!');
    }
    if (sayHello.country = 'FR') {
        return alert('Bonjour !');
    }
    if (sayHello.country = 'GR') {
            return alert('Guten Tag !');
        }
    return alert('Hi');
}
sayHello.country =  'FR';
sayHello(); // alert('Bonjour !');

Also, we can use these function properties as counters or "static variables".

5. we can use the arguments.callee.caller to see what function invoked the current function. The arguments var is a default of any js function. But we have the arguments.callee.caller that will tell us who called that function. Something like a console.trace() but just one level deep.

function sayHello() {
    alert(arguments.callee.caller); //start
}

function start() {
    sayHello();
}()

Also the arguments.callee refers to the currently running function.

6. we have a void operator. You give it anything and it returns back undefined.

void(1); // undefined
void(true); // undefined
void(false); // undefined
void({}); // undefined

You may ask yourself why you would want an operator like this one? Well because before ES5 you could actually assign a new value to the original undefined:

undefined = "abc";
x = undefined;
alert(x); // "abc"
// this will not work anymore
// but it explains why we have the void operator 

So ... Javascript the language where surprises never end!

Building a layout with CSS Grid video series: Part 2 – Defining the named template areas

In the second part of this screencast series, we will see how we can use the grid-template-areas to define the general cell tiles of the layout. Also, by using the grid-area we will place each component in its corresponding grid cell.

Stay tuned as the next week I will publish two new episodes from this series.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

Building a layout with CSS Grid video series: Part 1 – Introduction

Hey guys! After all of the recent articles about CSS grid, I am happy to announce that I've started to recoded a new screencast series. It will be a 6 part video course about making a responsive homepage layout with CSS grid and named template areas.

Below is the first part, describing the full example and the starting files. Drop me an email at daniel at js-craft.io with your feedback 🙂 Expect 1-2 videos per week.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

CSS margin collapsing – what it is and why should I care

In CSS margin-collapsing refers to the fact that the margins that are next to each other are colliding… but only vertically.

Yeah, it's one of those brainfuck moments in CSS.

Let's first take two divs that are one next to each other on the horizontal axis. If we have a margin: 25px for both divs, and the width: 100px then, as expected, the required width will be 300px.

However, if we try to do the same with the divs are arranged vertically then the total needed space will be 275px, instead of the expected 300px.

And this is because the vertical margins of the elements are collapsing.

But, what if the margins are of different sizes? What if one div has margin: 25px and the other has a margin: 40px? Well, in this case just the largest of the two margins will be applied (40px in our case).

And what about negative margins? The rule will be applied when both margins are negative (vertically), but not when one margin is negative and the other is positive.

If you want to learn more take you can a look at:

Frontend links of the past few days

One of the most motivating reads of the past few days is Joel Hooks article My blog is a digital garden, not a blog. One of those pieces of content that makes you love your sleeves and get to work.

Also Lately, I've been spending quite some time browsing thought the CSS examples on codepen. There are a lot of interesting ones, but the following ones caught my attention in particular:

Using CSS Grid to make a Newspaper Layout

Maybe one of the most beautiful and complete examples of using CSS grid to build the full layout of a page. Great work Olivia. By the way, follow her on codepen. She has some wonderful CSS examples.

Airplanes - the beginners guide

Another fantastic showcase on how CSS cand be used for visual narratives. A real piece of art in my opinion.

Super Mario - CSS only

When I first saw this, I recoiled and thought: “there’s no way this is just CSS”. Even I should know by now, how powerful CSS has become, I am still amazed when finding examples like this one.