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 = `${} is ${p.age} years old.`;

However, with the tagged template literals we can say:

const text = setHighlightTags `${} 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;
          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
by JS Craft (@js-craft)
on CodePen.

[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]


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 ( = 'US') {
        return alert('Hi there!');
    if ( = 'FR') {
        return alert('Bonjour !');
    if ( = 'GR') {
            return alert('Guten Tag !');
    return alert('Hi');
} =  '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() {

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!