Call Stack - A simplified intro

Kani Gureye — Tue, 28 Feb 2023 21:04:40 +0000

What is it?

The call stack is a data structure that records the execution of functions in JavaScript. Whenever a function is called, it is added to the top of the call stack, and when a function completes its execution, it is removed from the stack. The call stack follows a last-in, first-out (LIFO) principle, meaning that the last function added to the stack is the first function to be executed.

In order to better manage this, the JS engine uses the call stack to handle execution contexts. They are the following:

Main ones

Global execution context - for code that’s in the global context
Function execution contexts - for code that’s inside a function

Occasionally

Eval execution context - for when we use the eval method (creates its own execution context)

When you execute a script, the JavaScript engine creates a global execution context and pushes it on top of the call stack.

Whenever a function is called, the JavaScript engine creates a function execution context for the function, pushes it on top of the call stack, and starts executing the function.

If a function calls another function, the JavaScript engine creates a new function execution context for the function being called and pushes it on top of the call stack.

When the current function completes, the JavaScript engine pops it off of the call stack and resumes the execution where it left off.The script will stop when the call stack is empty.

In order to better understand this, consider the following example code:


function one() {
  console.log('one');
}

function two() {
  console.log('two');
  one();
}

function three() {
  console.log('three');
  two();
}

three();

In this example, the three function is called, which then calls the two function, which in turn calls the one function. The call stack will record the execution of these functions in the following order:

1. three
2. two
3. one

Stack empties in following order:

1. one
2. two
3. three

When the one function completes its execution, it is removed from the stack, and the same goes for the two function. Finally, when the three function completes its execution, it is removed from the stack, and the stack becomes empty again.

Summary

The JS engine uses a call stack to manage execution contexts.
The call stack uses the stack data structure that works based on the LIFO (last-in-first-out) principle. It's similar to array and uses methods pop and push.
Only one function is removed at a time because JS is single-threaded. It can only handle one task at a time.

Where can we learn more?

Philip Roberts - JSConf EU
Chrome DevTools

Thanks for reading and I would love to connect on Twitter!

PX vs REM: What should we be using?

Kani Gureye — Sat, 31 Dec 2022 16:09:40 +0000

What is a PX?

A pixel is a unit of measurement and a commonly used CSS unit. It is an absolute unit, meaning whatever value is assigned is fixed, regardless of the user setting one might have. Let's consider the following example:

html {

  font-size: 18px;

}

Here, we've changed the base-size to 18px by targeting the html tag. Most browsers will have a default base-size of 16px, unless you change that base by like we did above. It is this size that will become the basis for what relative units will calculate off of.

What is a REM?

REM is an acronym for root em and a unit that dictates the element's font size relative to the size of the root element. Due to our example above, let's continue with the assumption that our base size is still 18px.

If the base size(root element) is 18px, an element with the font-size value of 1rem will always the base size. Therefore, rem units are useful for scaling CSS elements in relation to the size of the root element.

To use the "rem" unit, you simply specify a value followed by the unit name:

html {

  font-size: 1rem;

}

Which should we use?

So to recap, one is an absolute unit(px) whereas the other is a relative unit, that will scale off of the base size of the browser.

So for defining font-sizes, in my opinion, you should mostly use rems as they are relative and it is a best practice in terms of accessibility.

As for the rest, the view is more nuanced so for properties like padding and border it's still down to preference. This is due to these two properties not being directly linked to accessibility like font-size is.

Summary

There's definitely a place for using pixels, and there will be edge cases where pixels might prove to be the better option. An example could be if a user is on a small screen and the use of rems could make the user experience worse due to the limited space.

If you're dealing with media queries or font-sizes, I'd go with rems. It's also easier to for the most part stick with one of them, with the occasional exception.

Another thing is that it makes sense to me that things should scale up or down at the same rate if there's a need for it. I'm therefore, personally, of the opinion that you should mostly use rems. There are however more factors at play than what is covered here. You can read more about it in this great article - https://zellwk.com/blog/media-query-units/ by Zell Liew

Follow for more content and a Happy New Year to you and your loved ones!