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

Vue.js and GraphQl – the documentaries

I've been having these two videos saved in my bookmarks for quite some time now. And being looked in the house for the full day(s) it was time to give them a go.

There are two documentaries: one about Vue.js and it's creator Evan You, and the other about GraphQl.

And boy I was in for a treat. They are SUPER good.

Both the quality of video and the production made me feel like I was watching a documentary done by something like Netflix. But with and for developers :))

So if you are curious to find out more about the story and the people behind some of the tools that we are using daily give them a try:

A CSS tricky situation- the order of the CSS class names in the HTML tags

Let's say we have the following set of rules in a CSS file:

.red {
    color: red;
}

.blue {
    color: blue;
}

.green {
    color: green;
}

And the following tags in our HTML:

<div class="red green blue"> First div.</div>
<div class="blue red green"> Second div.</div>
<div class="green blue red"> Third div.</div>

The question is: what color will we have for these divs? Stop for a few seconds and try to answer the question.

The correct answer: they’re all green.

The order of the class names in HTML tags has no importance on the styles. The lines class="red green blue", class="blue red green" or class="green blue red" are the same thing.

All 3 selectors have the same specificity (just a simple class selector). And given that .green comes later in the stylesheet, it will override the .red and .blue selectors.

Therefore all the divs will have the color green. Cascading wins again.

By the way, this can make a great CSS interview question 🙂

CSS logical properties: using the margin-block and margin-inline instead of the default margin

Take the following example. We have a link, followed by a few words. And we want a 20px margin space between the link and the text.

.container {
    border: 1px solid black;
    display: float;
    padding: 5px;
}

a {
    margin-right: 20px; 
    background-color: yellow;
}
A link

some text

In this content adding a margin-right: 20px; makes perfect sense.

But what if the flex-direction of the container changes in reverse? Or the user is using a translation extension? Arabic is read right to left.

Then our element will look like this:

A link

some text

The margin will still be on the right side, and we will have to add some more lines of code to make it work again.

Meet the CSS logical properties. We can replace the plain old margin with margin-inline-start: 20px;.

a {
    margin-inline-start: 20px; 
}

What it does is instead of saying "add a margin to the right”, we will have “regardless of direction, put a margin on the starting side”. It does not matter if the starting side is on the left or the right.

A link

some text

Pretty cool, no? 🙂

If we want to replace some other margins, we can use the following table of correspondence:

margin-top      -> margin-block-start
margin-left     -> margin-inline-start
margin-right        -> margin-inline-end
margin-bottom   -> margin-block-end

And it works also with border and padding.

Tricks with the basic HTML list: using start, reversed and value

Just discovered 3 new things with the plain old HTML ordered list.

1. We can reverse an ordered list

If we add the reverse attribute to an ol, then the elements in that list will be listed end to start.

<ol reversed>
    <!-- content here -->
</ol>

Example:

  1. HTML
  2. CSS
  3. JS

2. The ol supports a start attribute

If we want to start the numbering of the elements from another value that the default 1 we can use the start attribute.

<ol start="3">
    <!-- content here -->
</ol>

It's great if we have an initial list like this one:

  1. javascript
  2. php

And after some other content to continue that list.

  1. ruby on rails
  2. java

3. We can set a value attribute for the li elements

To have full control of what value will be assigned to the li elements in the CSS counters we can use this value attribute. For example:

<ol>
    <li value="63">Octavianus Augustus</li>
    <li value="180">Commodus</li>
    <li value="54">Nero</li>
</ol>

Will output the following list:

  1. Octavianus Augustus
  2. Commodus
  3. Nero

After many years doing web stuff daily I am still amazed about how much detail goes even in the simple elements. Onwards!

How CSS resolves conflicts: Cascading

In CSS if we have multiple rules, with the same specificity, competing for the same elements then the last declaration always wins.

This is the C, the Cascading, from the CSS acronym.

Cascading rules in the same CSS file

For example, if we have:

p { color: red };
/// other CSS rules
p { color: blue};

Then our paragraphs will be blue.

Cascading rules when importing different CSS files

This is also available when importing CSS files. If the stylesheets have conflicting rules for the same elements, the last imported rule will be applied.

// red.css
p { color: red };
// blue.css
p { color: blue };

And if we import both of these files in the same document

// index.html
<link rel="stylesheet" type="text/css" href="red.css">
<link rel="stylesheet" type="text/css" href="blue.css">

Then our paragraphs will be blue given the order of the files.

It does not matter even if we have the decoration of the CSS in the head of the HTML document. The last imported rule will win.

// index.html
<html>
    <head>
        <style>
            p {color: red;}
        </style>
        <link rel="stylesheet" type="text/css" href="blue.css">
    </head>
    <body>
        <p>This will be a blue paragraph.</p>
    </body>
</html>>

Cascading rules in the same declaration block

Finally, this also applies to the actual declarations blocks of the properties. Take for example the following code:

Like in the previous examples, the paragraphs will still be blue.

p {
    color: red;
    font-size: 16px;
    line-height: 32px;
    background-color: #eee;
    border: none;
    color: blue;
}

By the way, because of situations like this one, it may be a good practice to have the properties declared in alphabetical order and avoid just dropping a new declaration at the end of the block.

p {
    background-color: #eee;
    border: none;
    // conflicts are easyer to track 
    color: red;
    color: blue;
    font-size: 16px;
    line-height: 32px;
}

Select tags by attribute in CSS

It is possible in CSS to select tags just based on the value of an attribute. Take for example for following HTML:

<input type="email" placeholder="Your email" />
<input type="password" placeholder="Your password" />
<input type="password" placeholder="Confirm password" />

If you want to select just the inputs that are of type passwod we will just need the following code:

input[type="password"] {
    background-color: yellow; }
}

This is the attribute selector in CSS.

But what if we want to target just the links that have an URL attached to them:

<a href="google.com">Search</a>
<a onclick="alert('hi')">Show alert</a>
<a href="js-craft.io">Learn CSS</a>

Here we don't have a constant index-value pair like in the first example, but we can say:

a[href] { 
    background-color: yellow; 
}

And wait there is even more we can do:

  • [test~="foo"] : Checks if the value of the attribute test contains the word foo no matter of the position.
  • [test|="foo"] : Checks if the value of the attribute test starts with the word foo.
  • [test^="foo"] : Checks if the value of the attribute test has the first 3 letters foo.
  • [test$="foo"] : Checks if the value of the attribute test ends with the word foo.

How I’ve started to learn programming

My initial plan was to be a math teacher or a doctor like my parents. I've become a software developer by chance ... and because of a broken computer.

When I was 10 my father bought me an Amiga computer. The kind that you would have to connect to your TV as it did not have a monitor.

At the beginning of the 90's this was considered a hi-tech device 😀

But that computer was broken and could not be connected to a cassette player. This meant that I could not load and play any games on it. Cuz, yes during those times a game was stored on a cassette tape.

The only thing I could do with that that computer was to run the BASIC programming language on it.

However, I've managed to get my hands on a book with a title like "How to make 10 games in BASIC".

I was typing about 3-4 pages of code to get a basic game up. A very complex game. Something like a red dot chasing two other blue dots.

I had no idea what I was doing. Lucky the BASIC programing language is made of short lines, so it was quite easy to track down a typo. Mostly I was copying the code like a monkey.

Another downside of not being able to connect this computer to a cassette player was that I did not have any way to save that code. When the computer was unplugged I was losing all of my code and had start from scratch again.

The funny thing was that after you write that code for enough number of times, those stage lines start to have some logic. I've started to change the color codes, the pixel values and see what was happening. Trial and error.

I was feeling like a wizard learning spells.

This did not get any practical application until highschool when I've discovered that I can skip a lot of the boring classes by taking part in some scholar computer contests.

And from there realized I could make this into a job and so on ...

So, a few takeaways from the story:

  • programming can be thought at a very young age. I was 10 year when started how to code, and for sure I don't have any special IQ.
  • video games are good; if it was not for the need to play those video games, maybe I would not be a programmer today. For sure I would not be interested in learning how to code if the aim was to solve a math equation.
  • it's ok, in the beginning to just copy. I think that the human brain, especially the brain of children, is super good in recognizing and learning patterns and adapt.

Cheers and happy learning!

Using Ellipsis to truncate long text lines in CSS

I use grammarly.com to correct the articles from this blog given that English's not my primary language. In this app, if you set a longer title a document you will get the ellipsis sign after a specific length.

This can be done quite easily in CSS thanks to the declaration text-overflow: ellipsis;.

Hoever keep in mind that for this to work you will also need to:

  • set a clear width to the text so that there is a limit for how much the text can expand
  • and also a nowrap alongside overflow: hidden so that the text will stay on one line and will not go outside the container

The full declaration for a truncation class may look like this:

.truncate-to-300 { 
    text-overflow: ellipsis; 
    width: 300px;
    white-space: nowrap; 
    overflow: hidden; 
}

And to get the output from the picture we can just to:

<h1 class="truncate-to-300">A CSS tricky situation- the order of the CSS class names in the HTML tags</h1>

There are also techniques that allow to truncate the text after multiple lines but there are a bit more troublesome to implement.

How to use Counters in CSS

We know that in HTML there we have the ol - ordered lists. By default what they do is to add a counter in front of any element that is on the list.

For example, the below is an ordered list made with ol and li tags:

  1. Cats
  2. Lions
  3. Tigers
  4. Jaguars

Those numbers are added by using CSS Counters. And we can add this behavior to any element we want, not just ordered lists.

Take for example the following HTML code:

<section>
    <h4>The Cats</h4>
    It is the only domesticated species in the family.
</section>
<section>
    <h4>The Lions</h4>
    It is a muscular, deep-chested cat with a short, rounded head.
</section>
<section>
    <h4>The Jaguars</h4>
    This spotted cat closely resembles the leopard, but is usually larger and sturdier.
</section>

If we want to add numbers to all h4 of a section first we will need to set the name and the value to zero for a new counter:

body { counter-reset: sectionsCounter; }

Next for each section we see, we will want to increment the counter:

section {counter-increment: sectionsCounter;}

And finally, use the counter’s value as content for the :before of a h4:

h4: before { content: counter(sectionsCounter) ". "; }

And voila. Now we’ll have section headings like 1. The Cats and 2. The Lions and so on.

See the full example here.

Throttling VS Debouncing in Javascript

A few days ago I've written a short article about debouncing in Javascript.

Another term very related to debouncing is throttling. Both techniques do the same thing: they make sure expensive operations (like API calls) are limited in a time interval.

But, in different ways:

  • throttling makes sure that one function is not called more than once in X milliseconds
  • meanwhile debouncing makes sure that a function is executed only if it was not called again for the past X milliseconds; basically with debouncing we make sure a function is called only once, even if it was involved multiple times.

A simple implementation for a throttling function may look like this:

function throttle(f, t) {
    return function (args) {
         let previousCall = this.lastCall;
        this.lastCall = Date.now();
            if (previousCall === undefined || (this.lastCall - previousCall) > t) { 
                f(args);
            }
     }
}

You can see in the other tutorial the implementation for the debouncing function.

For example, if we have a user is pressing a button every 500 milliseconds for 6 seconds:

  • with a throttling interval of 2 seconds, the call for the button will take place 3 times.
  • with a debouncing time of 500 milliseconds, then after 6 seconds, the call for the button only takes place just once

Also if you want to read more I have found useful the following links: