DEV Community: Bharati Subramanian

Deep Diving into JavaScript Variables II

Bharati Subramanian — Fri, 20 May 2022 07:15:32 +0000

In the previous article, I explained about scope and the behaviour of declarations that are done using var keyword.

In this post, we will explore let and const declarations, their differences, and how they are better than var.

let Keyword
1. Syntax
2. Scope of let
3. let Declaration and the Global Object
4. let Declaration and Hoisting
5. let and Redeclarations
const Keyword
1. const Declaration Syntax
2. Scope of const
3. const Declaration and the Global Object
4. const Declaration and hoisting
5. const and Redeclarations

Keyword let

If you ever want a placeholder to hold values that changes over time, use let.
While var is the black sheep, let is a beloved amongst the JavaScript family.
let is stricter and more rigid than var in it's syntax rules and usage.

Syntax

let variableName [= value];

Variables declared with let have a block scope.
What this means is that, if a variable using let is declared within a block, then it is accessible anywhere only within that block and the sub-blocks.

Scope of let

We'll understand how the scope works using some examples
- In the above example, the variable declared inside the test() and the one declared within the if block are 2 different variables. That is their references (memory address) are different.
- The output for the above code is -
- Let me show you this through the console.
- Hence, any change made to the variable declared within the if block does not reflect in the variable defined within the function.

let Declaration and the Global Object

Unlike var, let is not attached to the global object (or globalThis).
This means that in any JavaScript environment, you cannot access a variable declared using let using the global object.
e.g., in browsers, you have the global window and you cannot do the following-
- In the following example, where x is declared globally, you cannot use window.x to get the value of x.

This is the reason variables declared using let are preferred over those declared with var. They provide a layer of protection and ensure that they remain local scoped.
- If you see the scope tab in the console, you will find that the globally declared x appears under the Script scope.

let Declaration and Hoisting

Variable declarations using let ARE HOISTED, but the hoisting works quite differently from variables that are hoisted when declared using using var.
If you run the above code, you'll get a ReferenceError that the variable cannot be accessed before initializing.

Note the error message could be different depending on the browser.

But, we just saw that let declarations are hoisted. And in the case of var, the hoisted declarations were allocated memory prior to the code execution and also auto initialized to undefined. What about let declarations?
Let us check if memory allocation and auto initialization happens with let declarations before code execution, on the chrome browser console.

If I add a debugger on the first line in the above code and run, you'll see that in the scope tab, the count and user variables are allocated memory before the code execution and auto initialized to undefined.
Moreover, you will also see a detail that unlike the variable admin, the count variable has a scope Script.
- This shows that let variables are not part of the global object, they are allocated memory in a different scope (In this case Script).

As a rule, let declarations cannot be accessed before initializing and when you do so, you'll receive a ReferenceError.
Now, a variable declared using let is said to be in the Temporal Dead Zone or TDZ from the time it was allocated memory to the time it is initialized.
The below screenshot shows the TDZ time for the variable count for the above code.

So, when a variable is in it's TDZ, you cannot access it. If you do so, you'll get a ReferenceError.
A variable in TDZ be like- *Can't access

let and Redeclarations

You cannot re-declare a variable using let that was already declared with the same name within the same scope. If you do so, you will receive a SyntaxError.
Check out the code snippet below.
Check out the output for the above code-
You also cannot declare a variable using let that was previously declared using var with the same name and within the same scope.

Keyword const

What if you have a value and you know that it's never going to change and will always remain the same?
This is where a 3rd type of declaration comes in - constant declarations using keyword const.
As the name suggests, const is used to declare constant values that will never change over time.

const Declaration Syntax

const variableName = value;

It is required to initialize a constant with a value during declaration.
Variables declared with const also have a block scope.
What this means is that, If a variable is declared using const within a block, then it is accessible anywhere only within that block and the sub-blocks.
Then what's the difference between let and const? The difference is that -
1. You cannot re-assign any values to a constant variable
2. Constant variables need to be initialized when they are declared.
The below code snippet shows how you declare a constant.
Output for the above code -
Like I mentioned above, you need to initialize a constant variable when you declare. If not you will receive a SyntaxError as shown in the screenshot for the below code snippet.

-Output for the code snippet above -

Scope of const

The scope for const also works similar to the scope of let.
Let us see the scope of the variable via console-
As you can see, similar to declarations with let, globally defined constants are also allocated memory in the Script scope.
Let us look at another example. Let us trying a duplicate variable inside if() block and see what happens.
The output for the above code is -
In the above example, the constant declared outside the if block and the one declared within the if block are 2 different constants. That is their references (memory address) are different.
- Let me show you the scope of this constant through the console.
- Hence, any change made to the constant declared within the if block does not reflect in the constant defined within the function.

const Declaration and the Global Object

Similar to let, variables declared using const are not attached to the global object (or globalThis).
This means that in any JavaScript environment, you cannot access a variable declared using const using the global object.
e.g., in browsers, you have the global window and you cannot do the following-
- In the following example, where x is declared globally, you cannot use window.x to get the value of x.

const Declaration and hoisting

Variable declarations using const ARE ALSO HOISTED, and the hoisting works similarly to the variables that are hoisted when declared using using let.
If you run the above code, you'll get a ReferenceError that the variable cannot be accessed before initializing.

Note the error message could be different depending on the browser.

Similar to let declarations, as a rule, const declarations cannot be accessed before initializing and when you do so, you'll receive a ReferenceError.
The variable declared using `const is said to be in the Temporal Dead Zone or TDZ from the time it was allocated memory (from the beginning of it's scope) to the time it is initialized.
The below screenshot shows the TDZ time for the variable USER for the above code.

const and Redeclarations

You cannot re-declare a variable using const that was already declared with the same name within the same scope. If you do so, you will receive a SyntaxError.
Check out the code snippet below.
Check out the output for the above code-
Just like let, you also cannot declare a variable using const that was previously declared using var with the same name and within the same scope.

SUMMARY

That's all for this blog. Phew! Now, I know that this series was a lot, but then this is one of the most important concepts and is often asked in interviews.

To make things simpler, here's a flow chart citing the differences between let, const, and 'var` declarations.

Thank you for sticking till the end.
Please do share if this helped you and also I would love to hear your thoughts!

Deep Dive into JavaScript Variables I

Bharati Subramanian — Thu, 24 Feb 2022 14:01:49 +0000

What is this blog series about?

Through this blog series, I hope to explain variable declarations in JavaScript using var, let, and const. I intend to cover various rules, properties, and scenarios to explain the 3 types of declarations and hopefully ease understanding of variables in JavaScript!

This blog would be probably end up becoming a 2 or 3 part series since there are a lot of concepts to cover!

Prerequisites

Basic JavaScript syntax
Concept of scope

Introduction
What are Variables?
1. What is a Scope
var Keyword
1. Syntax
2. Scopes of var
3. var and it's Unhealthy Attachments
4. var and its Affair with undefined
5. Implicit Global Variables
6. Redeclarations using var

Introduction

As humans, we see names everywhere - names we give to people, pets, and even inanimate objects. Even machines refer to names within their memory. The only difference is that their names are addresses.

Even in the world of programming, we have names. And these names are called variables.

What are Variables?

Variables are placeholders we use to store values. These values could be any of the primitive types or objects.

To declare (define) variables in JavaScript, you write the following code-
"keyword" variable_name

The keyword in JavaScript could be - var, const, or let.

Before we move on, let us try to understand another term often used when talking about variables - scope.

What is a Scope

A scope is the context or region where a value is visible.
When we talk about the scope of variables, it is the region in the program where it can be referenced and used.
Let's understand scope with an analogy.
- John Doe is from India. He's planning on moving to Japan since he got an opportunity to work there (and being a lover of anime was an added advantage!).
- Now, once he moves to Japan, the Indian Rupee is no longer in scope in Japan (unless of course he exchanges the currency!).
- Also, the Japanese Yen he earns there is not in scope when he visits his home in India.
Similarly, in JavaScript where you declare your variables reflects where and how you can use them. More to this in the post.

In this article, let us understand about variables declared using'var`.

var Keyword

Variables declared with var have a global or function scope.

Syntax

var variableName [= value];

Initialization while declaring is optional.
Variabled have a global or function scope - what this means is that, if a variable using var is-
Declared within a function then, it is accessible anywhere within that function (even enclosing blocks such as if statements).
- Declared Withing the script (globally), then it is accessible in all enclosing functions and blocks of all the script files associated with the current page.
If you come from languages such as Java, you can visualize these variables as publically defined variables or public variables.

Scopes of var

Let us look at some examples now-
- In the above example, the variable x has a global scope. Hence the variable is accessible both- outside and inside the function. But variable y has a function scope as it's declared within the function. You cannot access it outside the function.

Let us look at another example that highlights the behavior of variables declared using var in blocks.
- The output for the program above is -
- Even though a different variable var y = 100 was declared within the if block, look how it changes the value of the variable var y = 20 that was declared within the function.
- This is because variables declared with var have function scope, and any variables declared within a block are scoped to the function or script that has the block.
- So this means that both the variables have the same reference (memory address).
- Let me show you this through the console.
- Hence, any change made to the variable declared within the if block reflects in the variable defined within the function.
- This also means that redeclaration of the same variable is accepted for variables declared with var (concept covered later in this article).

var and its unhealthy attachments!

Another interesting property of a variable declared globally using var is that it is bound to the global object.
This means that in any JavaScript environment, you can access the variable using the global object.
e.g., in browsers, you can use the global window object to access the variable.
In the above example, where x is declared globally, you can use window.x to get the value of x.

In some places you will see this as well - globalThis.x. This also works and it means the same thing.
Since there are many JavaScript environments and each of them has different global objects, globalThis provides unified access to the object.

But note that variables declared globally that are attached to the global object are bad.
Why? It's simple. Since it's attached to the global object it is visible and accessible globally by any JavaScript code.

So if you have used global variables before... Now you know to avoid it.

var and its affair with undefined

Let's look at the following code -
Notice how the variable count is being accessed even before it's declaration.
Now, if you came to JavaScript from another language, you'd say- 'Of course, this is an error!`
But in JavaScript, that is not the case.

The JavaScript performs something called hoisting.
Hoisting is the process in which all variable, function, and class declararions are moved to the top their scope.
The declarations are allocated memory much prior to the execution of code.
This means that you can access them before the actual declaration appears in the script.
So the above code after hoisting is as follows-
That's fine, but the next question would be, what would
console.log(count) print?
The assignment to the count variable happens only after this line.
This is where undefined comes in. JavaScript auto initializes variables declared using var with undefined.
The value undefined means that - "Hey, there is memory allocated for this variable. But it's not been initialized yet."

The final output would be -

Implicit global variables

Although not a good practice, it's worth mentioning that a variable that's never declared but initialized with a value is automatically considered as a 'global variable'.
This would not generate errors and works fine in non-strict mode. This mode is when the JavaScript interpreter understands features previous to the ES5 version, i.e., the default mode.
But in the strict mode that uses features introduced in ES5+, this would generate errors.

Redeclarations using var

If you have come to JavaScript after exploring a few other languages, you know that a variable cannot be declared with the same name twice.
But JavaScript is special. JavaScript let's you declare a variable with the same name if you do so with the var keyword.
For e.g., the code below works perfectly fine and no error is thrown.
If you think about it, this is bad news.
Say you are working on a project as a team and on your day off, your fellow mate comes and redeclares a variable you've already done so, but, with a new value.
The interpreter indicates no error, and your team mate is happy that the code does what was expected.
The next day you come and see that your part of the logic no longer works! And all because somewhere in the code a variable was re-declared. All you'll end up doing is wonder why!

That's all for this post! Hope you found this blog helpful and were able to understand var in a much better sense.
The key takeaway you should have from this post is that, never trust var, and avoid using var in your programs.
The JavaScript community realized issues with var and that's why new alternatives - let and const - were introduced in ES6.
The keywords, let and const will be covered in the next part of the blog!

Summary

scope is the region of the code where any value is visible or accessing.
var declarations when defined within a function are accessible anywhere inside that function. var declarations that are global can be accessed anywhere within the script.
var declarations are attached to the global object of all JavaScript environments and can be accessed using the globalThis object or the window object in browsers.
var declarations are hoisted. This means that they are allocated memory even before the code is executed and are auto initialized with undefined.
A variable that is not declared but directly initilized becomes an implicit global variable and is attched to the global object.
var declarations can be redeclared. That is, 2 variables that have the same name and belong to the same scopes can be declared using var.

Hope you found this blog post helpful. If yes, help me out by hitting that unicorn/ pin/ heart button, comment down your thoughts, and share it among the dev community.

Thank you for reading!

JavaScript loading techniques & Performance

Bharati Subramanian — Sun, 18 Jul 2021 18:09:50 +0000

Adding external script files to your HTML document is simple that you could do it in your sleep.

But this is not as trivial as you think. Where and how you add your script file majorly influences the performance of your website.

What is this blog post about?

In this post, we will go through the techniques to include external script files to your HTML and look at how this can affect the performance.

We will compare which technique is preferable and efficient over others in varying situations.

Prerequisites

This blog post assumes you are familiar with basic HTML, CSS and JavaScript syntax.
We will also learn about the attributes: async and defer.

Introduction

As you might already know, external JavaScript files can be included in the:
1. head
2. body
Before we continue and discuss about these techniques in depth, let's understand what happens when a browser loads a webpage.

The browser fetches the requested HTML file, and it is parsed.
The parsed HTML contains references to external scripts and stylesheets.
These external references are fetched, and are parsed/ loaded.
Once loaded, the styles from the sheet are applied to the DOM elements, and
Then the loaded scripts are executed and applied to the page, and the user views the completed visual structure.

Essentially, this should be the order in which fetching, parsing, loading and execution happens.
JavaScript files are meant to be applied finally once DOM is complete. But this might vary depending on where you add the script file.

Now enough with all this! Let's get to the actual post!!

Including Script in the body

This is the most preferred technique since this strategy ensures that the HTML parses before the script file.
This order becomes necessary when your script manipulates the DOM element.

 <!DOCTYPE html>
 <html>
   <head>
     <title>JavaScript reference inside body</title>
   </head>
   <body>
     <!-- DOCUMENT CONTENT -->
     <script src="./src/main.js"></script>
   </body>
 </html>

Since I started learning JavaScript, I have always added the <script> within the HTML body.
But I did not know, until recently, that this is an old-fashioned way and surprisingly not the recommended way anymore.

Adding the script reference in the body may give time for the DOM content to load, but a major problem is that the JavaScript loading is blocked.
When you have multiple (and huge!) scripts in your website it might turn into a nightmare since users will have to wait for scripts to be loaded AND then executed.
Not only does this degrade the performance of the website, it also frustrates users.
Because users hate waiting for websites to load!

How do we manage to load JavaScript files, and at the same time retain user experience and optimize website performance?

The simple answer to this is: Add script references inside the head

Including Script in the head

Yes, you read it right. Add script references within the <head>.

 <!DOCTYPE html>
 <html>
   <head>
     <title>JavaScript reference inside body</title>
     <!-- Add script file source here -->
     <script src="./src/main.js"></script>
   </head>
   <body>
     <!-- DOCUMENT CONTENT -->
   </body>
 </html>

But then it's not that simple. Yet another problem is that when you add the script files to your <head>, the script files are fetched before the HTML DOM is parsed and loaded completely.
Below shown image depicts an example webpage that displays a message in <p> when user clicks the button.
Look what happens when you add the script source in the <head>.
You get an error "cannot read property addEventListener of null". This happens because the DOM is loaded after JavaScript is fetched, and hence there is no reference to the button.

But this could be avoided as well. How? By doing this:

  document.addEventListener('DOMContentLoaded', function() {
       btn.addEventListener('click', () => {
           p.textContent = "You clicked me!";
       });
  });

The above code adds an event listener to the body which listens for DOM content to be loaded.
Once the contents are loaded, all the code within the handler function gets executed thud ensuring that JavaScript is executed only after the DOM is loaded completely.

And now if user clicks the buton, there is no error:

This is yet again an old technique.
HTML5 provides two new, modern features that prevents blocking of HTML parse and JavaScript load.
The two attributes: async and (or) defer are added to the script tag when it is included in the <head>.
Both the attributes ask the browser to load the script file in a separate thread without blocking the HTML file from being parsed.

1. async

 <!DOCTYPE html>
 <html>
   <head>
     <title>JavaScript reference inside body</title>
     <!-- Add script file source here -->
     <script src="./src/main.js" async></script>
   </head>
   <body>
     <!-- DOCUMENT CONTENT -->
   </body>
 </html>

This attribute ensures that the script file is loaded without affecting the HTML from being parsed.
That is, the browser loads/ fetches the script file simultaneously while the HTML is being parsed.
The HTML parse is not paused, and hence loading of script file does not block the DOM from loading.
But once the script file is loaded completely, the HTML parse is paused and the script is immediately executed, now blocking the DOM from loading.
When your webpage has multiple scripts, there is no guarantee that the order in which scripts are fetched, loaded and executed is the same order in which the scripts appear in HTML file.

Thus use this attribute when:
1. Script fetching, loading and execution are independent of each other. That is code in one script does not affect code in another.
2. When you need scripts to perform initialization tasks that are required before the actual execution begins.
3. When you have scripts that do not manipulate the DOM.

   <head>
     <!-- Add script file source here -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" async></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous" async></script>
     <script src="./src/init.js" async></script>
   </head>

For example: in the above code, there is no guarantee that jQuery will be fetched and executed first, then Bootstrap and then the init script.
The order could be say: Bootstrap is executed first, then init and finally jQuery script.

2. defer

 <!DOCTYPE html>
 <html>
   <head>
     <title>JavaScript reference inside body</title>
     <!-- Add script file source here -->
     <script src="./src/main.js" defer></script>
   </head>
   <body>
     <!-- DOCUMENT CONTENT -->
   </body>
 </html>

defer, as the name suggests, loads the script file in a separate thread, but defers the execution of the script file.
Unlike async, script is not executed immediately once the file is loaded, and the DOM load is not blocked.
This attribute ensures the script is executed only when the DOM is completely loaded.
The order in which the scripts are fetched, loaded, and executed, is the same order in which they appear in the <head>.

Thus use this attribute when:
1. The script files in your web page are dependent on each other, and the execution of one script affects the other.
2. When your script manipulates the DOM content.

   <head>
     <!-- Add script file source here -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous" defer></script>
     <script src="./src/main.js" defer></script>
   </head>

The execution of scripts in the above code is in the following order: jQuery script, Bootstrap, and finally the main script file.

Conclusion

As a thumb rule, I would suggest to add script sources within the <body> only if the script your website uses is minimal.
If you have multiple scripts that are heavy, refer to it within the <head> as sourcing within the <body> blocks JavaScript from loading, thereby affecting the performance of your website.
Use async in case the scripts in your website are independent of each other, and you want to execute code before the main JavaScript loads.
Use defer when you have scripts that rely on parsing of HTML and manipulation of DOM elements.

Here's a visual representation of HTML parsing, and JavaScript loading and execution from the MDN docs.

Thank you so much for your support and reading this blog post.
Help me out by sharing this to your friends, and comment down what you felt about this post.

Do heart, save, unicorn, or do all of it if you enjoyed and learned rom this post!

Demystifying Position Property

Bharati Subramanian — Sun, 11 Jul 2021 06:38:20 +0000

CSS provides the position property that specifies how an element should appear in the document. This property is helpful when you want to position elements in the DOM outside of normal flow.

What is this blog post about?

This blog post covers the position property with the top, right, bottom, left, and z-index properties that determine the final position of an element.

Since this property has a notorious tendency to be misunderstood, let's try to figure out this property together!

Check out the demos I explained in this post here

Prerequisites for the blog

This blog post assumes that you are familiar with the syntax and basics of HMTL and CSS.

What is the CSS position property?

The position property specifies how an element is placed in the DOM.
Along with this, you can use top, right, bottom, and left properties that specify where the element is placed.

The position property can take five values:
1. static
2. absolute
3. relative
4. fixed
5. sticky
Before we jump in, let's understand in short what top, right, bottom, left, and z-index are.

The top, right, bottom, and left, properties specify how far away from the top/ right/ bottom/ left and element should be positioned.
- By default all these properties have value auto, and the element is placed in a Static Position.
- It accepts both negative and positive integer values and common units such as px, rem, em, % etc.

z-index is used to specify the stack level, and layer elements.
- The default value for z-index is 0, and will not work unless you apply position on the element (except static).
- Elements with a larger z-index value overlaps elements with smaller z-index value.
- It accepts positive and negative integers without any unit.

1. Static

position: static; is the default value of this property, and the elements appear in their normal flow in the document.
Properties: top, right, bottom, left, and z-index have no effect on an element positioned static.
Check the example below. The blue colored div with class static has a static position.

The code for the above example:

  div.static {
     position: static; /* Need not specify as this is default */
 }

Check out the codepen here:

2. Relative

When position: relative; is applied to an element, it appears in the normal flow of the document.
But unlike static position, it accepts accepts values for top, right, bottom, left, and z-index.
- The element is then placed relative to itself depending on the values of top, right, bottom, left, and stacked in layers depending on the value of z-index.
In the example shown below, the blue colored div element with class relative has a relative position, with top and left offset values.

The code for the above example:

  div.relative {
     position: relative;
     top: 5em;
     left: 25%;
 }

Check out the codepen here:

3. Absolute

When position: absolute; is applied to an element, it is taken out of the the normal flow of the document.
It remains in it's original position unless top, right, bottom, left values are specified.
The other elements ignore the element, and behave as if it is not present at all.
z-index can also be specified to stack and layer elements.

In the example below, the blue colored div with class absolute is given a relative position, and no values of top, right, bottom, and left are specified.
See what happens when this blue box is given z-index: -1;
- The parent of this div.absolute is the section with class section and background-color: lightskyblue; has z-index: 0;.
- Since `z-index of section.section is greater than that of div.absolute, the div` is stacked below it's parent.

Typically an element with position: absolute; is placed relative to it's closest positioned ancestor (other than static).
If no such ancestor is found, it is simply placed relative to the document.
- Check out the example below, and notice how the element is placed relative to the document.

The code for the above example:

  div.absolute-two {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 2em;
 }

Check out what happens, if we give the parent (or an ancestor) of an element with absolute position: position: relative;.
- Check the red colored div with a class absolute-three, and it's lightskyblue colored parent section with class section.
- Note how this time the absolute div.absolute-three is positioned relatively within the parent and not the document.

The code for the above example is:

  section.section {
     position: relative;
  }

  div.absolute-three{
     position: absolute;
     bottom: 0;
     right: 25%;
     height: 100px;
 }

Check out the final codepen here:

4. Fixed

When position: fixed; is applied to an element, it is taken out of the the normal flow of the document similar to Absolute Position.
- The main difference is that the position: fixed; element is not given space in the layout.
The fixed element is not affected by scrolling, and remains in the specified position depending on the top, right, bottom, and left values.
The positioned element is relative to the document except when it's ancestors have transform, perspective, or filter property applied with a value other than none.
- Then, the ancestor behaves as the relative parent.

Check out the example below. The text div with blue background has a class fixed and position: fixed

The code for the above example is:

  div.fixed {
     position: fixed;
     top: 40vh;
     right: 25vw;
     left: 25vw;
 }

Check out the codepen here

5. Sticky

When position: sticky; is applied to an element, it is positioned in the the normal flow of the document similar to Relative Position.
But as the element is scrolled within the positioned ancestor, it becomes fixed once the offset value specified in top, right, bottom, and left properties are crossed.

For e.g. look at the image below of a header.
- The header's parent is the document, and it's "sticky" within it. As you scroll and the header is 0 away from top, i.e. top: 0;, it becomes a fixed positioned element.

The code for the above example is:

  header.hero {
     position: sticky;
     top: 0;
 }

Let's deal with another scenario. But this time let's use an element that is positioned sticky within another positioned ancestor.
- In this scenario, the sticky positioned element (text with blue colored background) has a class of sticky.
- It's parent is the section with class section, and has a lightskyblue background.
- As you scroll down and div.sticky is 5px away from the top, it becomes a fixed element. Before that it remains as relatively positioned element.
- But there is a catch here. As the parent section.section scrolls away from the layout, so does the div with sticky position of. It no longer remains fixed, and now becomes relative again.

Hence the sticky (in particular fixed) behavior of an element remains only within it's closest positioned parent.

The code for the above example is:

  section.section{
     position: relative;
  }
  div.sticky {
     position: sticky;
     top: 5px;
  }

Check the entire codepen here:

CONCLUSION

Phew! That was a lot. Wasn't it?

I understand that sometimes CSS can be overwhelming but trust me, as you practice the concepts become clearer.

The position property is very important, and comes in handy in various scenarios.

Check out the demos I explained in this post here

The relative and absolute positions are often used, and mostly together when you have pseudo elements.
- These positions are also often used to stack items.
- The combination of absolute position within relative position is common, and is used to add styles such as shadows to elements.
The sticky position can be used for headers and navbar as shown in the example for Sticky above.
- It could also be used in cases when you want to keep an element fixed on the page as long as the positioned parent/ ancestor is visible on the viewport.

These are not the only available use cases of position property. I highly recommend you to practice and get your hands dirty to understand these concepts in depth.

Thank you so much for reading this post!

This was my final blog post on CSS. In the coming posts, I will focus on JavaScript and try to explain few vital concepts.

If you liked this post then please help me out giving it a heart, unicorn or a pin!
Do share it among your dev friends, and comment down what you feel!

RESOURCES:

Responsive Fonts in CSS

Bharati Subramanian — Tue, 29 Jun 2021 14:34:31 +0000

CSS provides a wide range of units to choose from while developing web applications.
Many properties such as padding, margin, font-size, width, height, etc., take length as values followed by a unit.

A good developer should be able to decide how and when to use these units.

What is this blog post about?

We will discuss some of the common units in CSS that are used with fonts, and also understand how to make font-sizes responsive.

Find the demo site for the examples explained in this post here

Prerequisites for this blog

This post assumes that you are familiar with the basics of HTML and CSS.

Font Units in CSS

Generally, px, rem, em, and % are the most sought out units in CSS.
Although there are many other units available in CSS, the above-mentioned are preferred for font-size.
Let's discuss these four units, and try to understand how and when they can be used.

Pixel

px is an absolute unit. That is, it defines fixed values that do not scale when screen/ device width changes.
These are commonly used as it is easy to understand, and effortless to use.
It corresponds to 1/96^th of an inch, and usually, the default size of the text in a browser is 16 pixels.
Let's use the image below to understand px better.
```
 div.pixel p {
    font-size: 20px;
    width: 300px;
 }
```
- The <p> has a font-size: 20px. Now look at this image below that shows the same paragraph in a device with smaller screen size.
- Notice how the font-size remains 20px even when the viewport size decreases.

This is the issue with using pixels for any of the properties that takes a length. It is non-responsive, and does not scale according to the viewport size.
- Check out the pen for the above code here:

Rem

rem in a relative unit. That is it scales as the viewport size changes.
This unit is highly flexible and is recommended by developers.
The r in rem stands for root.
- 1 rem unit is the font-size of the root element, i.e. <html>.

Let's understand rem with an example. Consider the code below.
```
 div.rem p {
     font-size: 2rem; /* 2 * 16 = 32px */
 }
```
- Check out the pen for the above example here:

If you do not override the default font-size of the root element, i.e. <html>, it will have a font-size of 16px.
- The font-size of <p>, in the above example, would be 2 times the size of the root element. That is: 2 * 16 = 32px.

Another example could be overriding the default 16px of the root element.

 html {
     font-size: 20px;
 }
 div.rem p {
     font-size: 0.5rem;  /* 0.5 * 20 = 10px */
 }

Check out the pen for the above example here:

As stated above rem is highly responsive and is UX friendly.
To check for responsiveness, try this out.
1. Go to your browser settings
2. Under appearance, select Font size
3. Try changing the Font size of your browser, and look at the computed result for the tag who's unit length is defined using rem
4. You will see that the font-size becomes responsive, and changes according to the chosen font size of the browser.

NOTE: If you override the default font-size of root element, changing the font-size of the browser will have no effect on the font-size of the content defined.

Font-size defined using rem will be relative to the manual value that overrides the default root font-size.

Em

em is very similar to rem, but the difference is that em is relative to it's parent container.

Let's use the same paragraph example and follow the code below.

 div.em {
     font-size: 15px;
 }
 div.em p {
     font-size: 2em; /* 2 * 15 = 30px */
 }

Check out the pen for the above example here:

Since <div> is the parent of the <p>, the font-size of the content within <p> would be twice that of font-size defined for <div>.`
- That is, 2 * 15 = 30px would be the font-size of
  `.
The image below shows the results of the above code

Now, consider the scenario with code below:

This is the HTML code

 <div class="em">
    <ul>
       <li>1. Lorem</li>
       <ul>
           <li>1.1. Lorem</li>
           <ul>
               <li>1.1.1. Lorem</li>
           </ul>
       </ul>
    </ul>
 </div>

This is the CSS code

 div.em {
    font-size: 20px;
 }
 ul {
    font-size: 2rem;
 }

Guess what would happen to the content within <li>. What would be the font-size?
Unexpected right?
This is when em gets tricky and out of hand.
- When you have multiple nested elements, you need to be careful with the lengths you assign.
- Check out the pen for the above <ul> example here:

To check for responsiveness, you can try changing the font-size of the browser (as shown above for rem).

NOTE: If you override the default font-size of root element, changing the font-size of the browser will have no effect on the font-size of the content defined.

Font-size defined using em will be relative to the parent of that element. If the parent is the root, then the font-size of the element will be relative to the overridden font-size of root.

Another important thing to note if you use em is that, when you use it for properties like width or padding, the length is derived from the font-size of the element itself.
- For e.g. say you have a <p> element within a <div>, and the font-size of <div> is 12px, <p> is 2em.
- And you declare padding for <p> as 2em. Then, the padding of<p> would be 48px and NOT 24px.
- This is because the other properties multiply the value of font-size of the element itself.
- So keep this in mind when you use em as the unit for font-sizes.

Percentage

% is a relative unit, and is relative to the font-size of the parent element.

Using a similar scenario like we did for em, let's assume we have a <p> within a <div>.

 html {
    font-size: 20px;
 }
 div.percentage {
    font-size: 150%;
 }
 div.percentage p {
    font-size: 200%;
 }

Find the pen for the above code here:

Let's see what the font-size of <p> will be.
- The font-size for <p> depends on <div>, and the font-size of the <div> depends on it's parent. (In this case: <html>)
- Since the font-size for <html> is 20px, the font-size of <div> should be 1.5 * 20 = 30px.
- And the font-size of <p> would be 30 * 2 = 60px.
Look at the image below to see the results of the above code:

To check for responsiveness, you can try changing the font-size of the browser (as shown above for rem).

NOTE: If you override the default font-size of root element, changing the font-size of the browser will have no effect on the font-size of the content defined.

Font-size defined using % will be relative to the parent of that element. If the parent is the root, then the font-size of the element will be relative to the overridden font-size of root.

CONCLUSION

We have seen four different units that can be used with fonts in CSS.
As stated previously, there are many more units to explore and use. But the above explained ones are most commonly used by developers.

Find the demo site for the examples explained in this post here

A thumb of rule that you can follow is use rem everywhere for fonts. As it inherits from the root element it's easy to use, manage and compute the size of the element.
Moreover, it does not get exponentially multiplied (unlike em) when you define font-size for nested elements.
em can be used when you want the child element to inherit font-size and behave like the parent. Just beware of the inheritance.
As for %, it is very similar to em. But the main difference is that em scales faster than %.
- There will hardly be any difference between em and % when users set the browser text size to “medium”.
- But as you can see in the picture above, when browser text-size is set to smallest, then em is hardly legible when compared to %.
- And when browser size is set to largest, em is displayed much larger than %.
Most people use px as well for font-size. But I do not recommend using it at all as it's not user friendly and not responsive.

In general I would suggest,

rem > percentage > em > px

References

Thank you for reading this blog post.

I hope you were able to understand the common units for font-sizes in CSS, and I am sure this would be very helpful while developing responsive websites in the future!

Do give this post a like, pin or save it, and share it with your dev friends!

Introduction to Responsive Design

Bharati Subramanian — Wed, 16 Jun 2021 17:34:17 +0000

A good website should be readable and appealing when used across all devices of any size.
Such a website must fit and scale automatically to screens of different sizes.

What is this blog about?

In this blog we will be focusing on some of the techniques used to make a website responsive and create best user experiences.

Prerequisites for this blog

This blog assumes that you are familiar with the basics of HTML and CSS.

What is Responsive Design?

Responsive web design is the concept of using HTML and CSS to build layouts that adapt to all screen sizes, resolutions, and devices.

Responsive Design Techniques

Three techniques are discussed in this blog that are used to make websites and pages more responsive:

Setting Viewport
Fluid widths and layouts
Media Queries

Check out the website and code shown in the blog here.

1. Setting the viewport

What is Viewport?
- A viewport is the area of the screen that is visible to the user.
- This area is smaller in devices such as mobile phones or tablets when compared to a PC.

Why should you set the viewport?
- The viewport gives instructions to the browser on how to set the width of the screen such that it scales to the width of the device
- It also informs to zoom the content such that it's intended for the device at hand.
- This ensures that the content does not appear zoomed out and does not appear as it does on a desktop layout.

How do you set the viewport?

The viewport is set inside the <head> using the <meta> tag.

 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>

What does the above code mean?
- width=device-width: sets the width of the screen to the width of the device.
- initial-scale=1.0: sets the initial zoom/ scale to 1

Look at the images below, and see the difference in screen width (in mobile browsers) and content size

Without viewport tag
- Notice how the content is zoomed out and the image does not adjust to the screen size and width of the device.
With viewport tag
- Although the image does scale to the size of the screen, the image is not responsive. To handle this, we use Fluid Widths.

2. Fluid Widths

What is fluid width?
- Fluid-widths are relative measurements, that are responsive to change in screen size and viewports.
- This is in contrast to fixed-layouts, which are static measurements and are non-responsive.
- Fluid widths use the entire width of the browser, and such a layout is called liquid layout or fluid layout.

Why should we use fluid width?
- Take the example of a sample page in the image below.
- Notice how when the size of the browser shrinks, a horizontal tab appears to view the entire image.
- This is definitely not looking good, and does not provide a good user experience.
- Since the image is not responsive, it does not shrink in size when the browser width (or viewport width) reduces. This is where fluid width comes into play.

How can we use fluid-widths?
- Instead of using pixels (px), use percentages (%) , viewport height (vh) and viewport width (vw).
- Image in the example website above uses 500px as it's width.
- To make this a fluid image, we can use percentages or vw to set a width.
```
 img {
     width: 80% | 50vw;
 }
```
- Percentages occupy space relative to width or height of the parent element. Whereas vw / vh take up space relative to width or height of the viewport.
- Now, as the size of viewport decreases, the image also shrinks relatively.
- There comes a point when the image shrinks and ends up becoming very small.
- To tackle this, we can set a minimum height or width, below which, the image should not be shrunk.
```
 img {
    min-width: 300px;
 }
```
- Now the image will not shrink below 300px even if the viewport size becomes smaller than this.
Fluid widths and layouts are incredibly useful when you have to handle multimedia content in your site.
Another simple use of fluid width is when you set a max-width for a container in the body and center the content within it.
- max-width ensures that the content will not overflow beyond this width, and will be shrunk if it becomes greater than the specified width.

3. Media Queries

What are media queries?
- Media queries are series of CSS styles applied to elements in the page for a particular viewport or screen size.
- Multiple media queries can be added to the same style sheet each focusing on viewport or device of a particular size.
- The size of screen at which a media query is added are called breakpoints.
- You can create web pages initially for mobile devices with minimal content, and then extend the same page to devices of larger size.
  - This is called mobile-first design and is highly common among developers.

Why do we need media-queries?
- Let's take the sample webpage in the image below, and try to introduce media queries.
- Obviously there is nothing wrong with the image or text in the image above.
- But when you view this page in a smaller device (a tablet or mobile), the image and text shrink to become so small that it looks unappealing.
- Situations like these can easily be handled using media queries.

How do we add media queries?
```
 @media screen and (max-width: 768px) {
     .flex-container {
         flex-direction: column;
     }
 }
```
- What does the above code mean?
  - The above code targets all devices whose width is less than 768px (mobile devices).
  - Then applies styling to the flex-container such that the image and text are displayed vertically instead of horizontally.
  - NOTE: This style is applied to the flex-container class only if the web page is displayed as screen (not printed document) AND the width of the viewport is at most 768px (width <= 768px).
  - Once the breakpoint is crossed (769px), the image and text are displayed horizontally.

CONCLUSION

We have seen three highly used techniques for creating a good responsive website.
Viewports and liquid layouts are highly useful when breakpoints in a website are not continuous.
That is when there is a gap between in the viewport size where media query is introduced.
Although all styles and media queries can be added to the same stylesheet, it is a good practice to support media queries and generic styles.

There are modern techniques such as grid and flexbox layout, which are also gaining popularity.
They handle gaps between breakpoints better than the above mentioned technology.

But nevertheless, the 3 discussed techniques are not obsolete. They are still practiced by developers, and are often used along with the modern techniques.

In conclusion, responsive design does not end here.

There are many resources available on the internet that are helpful in mastering responsive design.
I suggest doing a Google search to explore more about this topic.

Lastly, I would also recommend using the best of both worlds! The 3 technologies discussed here as well as the modern techniques.

Be responsible and make your sites responsive!

Hope you had a good read. Do leave a heart, pin or save it, and share this among your dev friends!

Common Use Cases of CSS Flexbox

Bharati Subramanian — Wed, 02 Jun 2021 12:43:03 +0000

The last two posts of this series on CSS Flexbox focused on all the properties of flexbox applied to flex-container and flex-items.

In this post, we will go through some of the popular and common use cases of CSS flexbox.

This post is quite long as I have explained all the use cases in detail.

At the end of this blog post, I will also share some useful resources to learn CSS Flexbox in the easiest possible way!

COMMON USE CASES OF CSS FLEXBOX

Aligning items with space between
Aligning items horizontally
Centering content
Splitting a container halfway

We will use the example in the images below and try to see how flexbox was used create this webpage.

Find the template code for the website here

1. ALIGNING ITEMS WITH SPACE BETWEEN

One use of flexbox is to align elements with space between them.

In the example website, navbar in the header has 2 sections: logo and the navigation links.
They are placed such that there is space between them, and are pushed to either side of the navbar.
Using the template code below for the navbar, let's see how the logo and navbar can be pushed with space between them.

To convert this into a proper navbar, we need to focus on the parent of both <h1> and <nav>: the div with navbar class.

  .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

That's all! 3 lines of code and then logo and navigation links are pushed to either sides with space between.

display: flex converts the navbar container into a flex-container.
- The <h1> and <nav> are placed horizontally. flex-direction: row; is the default main-axis.
- justify-content: space-between; separates the flex-items with space between them and pushes them to opposite sides of the container (main-start and main-end).
- align-items: center; places the flex-items in the vertical center of the flex-container.
  - NOTE: When justify-content: space-between; is used on a container with more than 2 flex-items, then they are spread out within the container, with 1^st item near the main-start and last item pushed to main-end.
  - This can be used in the situation when header only has navlinks.
- Go through this post to learn about justify-content

Check out the GIF below to understand how the above code works.

This is the final look of the navbar with space between the logo and navlinks.

2. ALIGNING ITEMS HORIZONTALLY

Another common use case of flexbox is to align items horizontally within a container

In the example website, the navlinks have been placed horizontally within the navbar.
In the example use case 1 above, logo and the navlinks have been placed properly, but the navlinks are still displayed vertically.
Using the code below as template, let's see how the navigation links can be aligned horizontally.
To align all the navlinks horizontally, we need to focus on the <ul> and <li> within .navbar nav.
```
  .navbar nav ul {
      display: flex;
  }
```

display: flex makes sure the <ul> becomes a flex-container, and by default all the children, <li> are horizontally aligned.

Check out the GIF below to understand how this works.

This is the final look of the navlinks within the navbar.

3. CENTERING CONTENT

This is probably the most common use case of flexbox: to center content vertically and horizontally.

In the example webpage above, notice how text within the showcase image is centered vertically as well as horizontally.
Using the below starter code, let's see how text (or any other content!) can be centered within a container.
We need to grab the parent container of the content that needs to be centered.

In this case, parent element of <h1>, <p> and <a> is the div with id showcase-content.

  #showcase-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

Here the main-axis is column, so applying flex to the #showcase-container stacks <h1>, <p> and <a> vertically.
- justify-content: center; centers content along the main-axis: column.
- align-items: center; aligns content to the center along the cross-axis: row.
  - Using these together centers content vertically and horizontally.
- NOTE: You can play around with combinations of justify-content and align-items to test various alignment of elements within the parent container.
- Check out this post to learn more about justify-content and align-items

Check out the GIF below to understand how centering content works.

This is the final look of the showcase and text within.

4. SPLITTING A CONTAINER HALFWAY

The main agenda behind flexbox is that it easily aligns elements even if the initial size is unknown or dynamic.

In the example webpage above, the cards in the main section are split such that one half has an image and the other half content.
Using the below starter code, let's see how we can into two equal sections.
As usual let's grab the parent container of the container that needs to be split.

The parent of <img> and <h3>, <p> container with class card-body-column, which is the div with class card-body.

  .card-body {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

The above code makes both the div with class card-body-column flex-items.
- Although these 2 items are supposed to be aligned horizontally they are wrapped onto different lines since their initial width overflows the container. This behavior is due to flex-wrap: wrap;

Let's now focus on aligning the items horizontally for which we need to grab the container with class card-body-column.

  .card-body .card-body-column {
      flex: 1;
  }
  .card-body img {
      height: 100%;
      width: 100%;
      object-fit: cover;
  }

Adding flex: 1; to .card-body-column makes the container grow or shrink from same initial width: 0. Hence, now we obtain 2 equal containers that grows equally.
- But the image does not occupy the entire part of the container, hence we set the width and height to 100%.
- To ensure that width to height ratio is not distorted as the container shrinks or grows we also add object-fit: cover;. This places the image as a cover in it's part of the container.
- NOTE: We can split the containers into sections of different ratios by increasing the value of flex for one half of the container.

Check out the GIF below to understand how splitting of content works.

Check out the GIF below how object-fit: cover; helps the image.

This is the final look of the showcase and text within.

FLEXBOX AND MEDIA QUERIES

A good website is one that works seamlessly on all devices of all sizes.
Although flexbox makes layouts easy, we need to add responsiveness. This can be done using media queries.
Let's look at the image within the card container mentioned above in use case 4.
Notice how this image shrinks in screens of small sizes. This obviously isn't very appealing. So let's tackle this issue.
Let's set a max width and ensure that once the screen width becomes smaller than the max-width, we will change the flex-direction to column.
This way when the screen size becomes too small, the card content will be stacked on top of each other hence avoids shrinking.

@media (max-width:540px) {
    .card-body {
         flex-direction: column;
    }
}

As the screen size becomes less than 541px, the main-axis becomes column. Otherwise, it's the default row.

The same responsiveness can be applied to the logo and navlinks to be stacked vertically and in the center the navbar.

Using just 4 common use cases, we managed to build a small webpage! Find the completed website code here

There are so many more use of flexbox out there which you can easily discover by tinkering with flexbox properties and creating websites.

As as a side note, different developers use varying combinations of flex properties to bring out the same effect.
- For e.g. to separate the logo and navlinks, you may see that justify-content: space-between may not be used, but rather align-self is used on the individual flex-items.
Another major takeaway is that flexbox is not the end of responsive design, and this may not be the easiest solution for certain situations.
- For e.g., say you want to split your website into header, main, sidebar and footer. In such cases, CSS GRID is much more simpler and faster.

THERE IS NO SINGLE RIGHT WAY TO DO THINGS! YOU ADAPT AND LEARN AS YOU EXPLORE!

RESOURCES

As promised, I'll drop a few resources that helped me in learning CSS Flexbox easily and efficiently. Hope this helps you.

CSS MDN Web Docs: Take your time to read through the docs as the explanations are highly detailed and precise.
CSS Tricks: Another gem of a resource where basics for flexbox are explained as well.
W3C Flexbox Docs: A very detailed and in-depth understanding to CSS Flexbox
W3Schools: Another resource having short explanations with good examples

These aren't enough as once you grasp the theory, you will have to apply them somewhere.

Below are some fascinating games and challenges which will help you understand flexbox practically AND visually!

Flexbox Defense
- A wonderful fantasy game where you use flex properties to stop enemies from getting into your defenses.
Flexbox Froggy
- Another game where flex properties are used to help froggy and friends to guide them to their lillipads!
Flexbox Code Generator
- This site allows you to visualize flex properties, and play around by changing combination of properties
Building UI with CSS Flex
- This site has challenges for you to build neat, and awesome UIs with the help of CSS Flexbox.
Dev Challenges
- Another website that has front-end and responsive web developer challenges to build components and sites!

And that's a (flex) wrap on the CSS Flexbox series.

Thank you so much for going through the blog post and sticking till the end.
Please do leave a like and share it with your dev friends!

Making Layouts Easy With CSS Flexbox: Flex-Item Properties

Bharati Subramanian — Mon, 24 May 2021 08:28:58 +0000

What is Flexbox CSS?

It is a responsive design layout that distributes elements within their parent container, even if the size of items is unknown or dynamic (hence the term "flex").

In the previous post, I covered all the properties that are applied to the parent flex container item.
To reiterate, these are the properties applied to flex container (parent):
1. display
2. flex-direction
3. flex-wrap
4. flex-flow
5. justify-content
6. align-items
7. align-content
  - For detailed explanation, go through this post.

In this post, we will go through the properties that are applied to flex items (children of flex parent container).

You can check out the entire demo here: https://demo-flexbox.netlify.app/

You can check out the entire code here: https://github.com/bharati-21/Flexbox-CSS

BASICS

Before explaining the properties applied to flex items, there are a few concepts that determine how much space a flex item occupies in it's container.
POSITIVE AND NEGATIVE FREE SPACE
- Positive Free Space: The extra space available when the flex container has more than required space to display flex items within the container.
  - This space can be distributed among the items so as to occupy the entire container.
- Negative Free space: Opposite of positive free space, this is when the space required by flex items combined is more than the flex container can accommodate.
  - This space can be removed from flex-items so as to occupy the exact size of the container.
When the flex-direction: row, the size of flex items is determined by their width.
When the flex-direction: column, the size of flex items is determined by their height.

PROPERTIES APPLIED TO FLEX ITEMS (CHILDREN)

Following are the properties applied to flex items:
1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self

Let's use the following code to demonstrate how each of these properties work:

 <div class="flex-container">
    <div class="flex-item" id="item-1">1</div>
    <div class="flex-item" id="item-2">2</div>
    <div class="flex-item" id="item-3">3</div>
    <div class="flex-item" id="item-4">4</div>
    <div class="flex-item" id="item-5">5</div>
 </div>

order
- By default, all the flex items are displayed in the order of HTML source code.
- The order of flex-items appearing within the container can be modified using the order property.
- The default order for every flex items is: 0.
- This property takes a number that specifies the order, and items are placed accordingly from the items having lowest order values first.
- Order can be a negative value, which becomes useful when one item needs to be placed before other items.
- If more than one item is assigned the same order value, then within that group, items are placed according to HTML source order.
```
   .flex-item {
       order: 0; // default
   }
   #item1 {
       order: 4;  
   }
```
- In the above image, the first container shows the original order of elements as per HTML source code.
- This order is altered using the order property in the second container and a code snippet is shown above.
  - Each of the flex items are displayed from lowest to highest values of order. (3 < 2 < 4 < 5 < 1)
  - Notice how 2 and 4 have the same order and are displayed according to HTML source order.
flex-basis
- This property specifies the initial size of the flex item before positive space in the container is distributed among the items.
- The default value of this property is auto, meaning the browser looks at the height/ width of the flex item or the max-content size (in supporting browsers) to distribute space.
- It also takes value content, which specifies that the flex-item should occupy space within the container based on it's content.
  - This is a newer implementation and has less browser support.
- The property also accepts an absolute value for its length. For e.g. 1rem, 200px, 15% etc.
- flex-basis can also be set to 0: This is same as specifying width: 0;. Hence the flex item will be collapsed to its smallest possible size based on the content.
```
   .flex-item {
       flex-basis: auto; // default is auto
   }
   #item3 {
       flex-basis: 200px;
   }
```
- In the above image, container 1 shows the default case when flex-basis: auto;.
  - The flex items are auto-sized and in supporting browsers, the flex items are set to initial size based on their content.
- The second container has flex items set to varying flex-basis values using absolute values.
- A code snippet for the example is shown above.
flex-grow
- This property dictates the factor by which a flex item grows relative to other items in the container when the positive space is filled.
- The default value for flex-grow is 0. The extra space remains unoccupied.
- If the same flex-grow value is set for all the items, the positive space in the container is equally distributed.
- It takes a positive value which defines the relative growth factor.
- The positive value is a ratio and could be any number: 2, 200, 50 or 1.5.
```
      #container2 > .flex-item {
          flex-grow: 1;
      }
      #container3 > #item1 {
          flex-grow: 3; 
      }
```
- In the image above, the first container depicts the default case where, flex-grow: 0;.
- In the second container, all the flex items are set the same flex-grow: 1; value.
  - Hence the positive space is distributed to all the items and they grow equally
- In the third container, each of the flex-items are set with different flex-grow value, and hence their growth varies.
- NOTE: flex-grow deals with the situation where the container has more space than required to fit the flex items.
  - Hence, it adds space to the flex items to fit to the container.
flex-shrink
- This property indicates the relative factor by which a flex item shrinks when negative space is distributed among items in a container.
- The default value for this property is 1, which specifies the browser to shrink the item by a factor of its flex-basis.
- This property takes a positive value, and flex items are shrunk accordingly by and do not overflow the container.
- When all the flex items are provided the same flex-shrink ratio, they shrink and the negative space is evenly distributed among them.
- When flex-shrink is set to 0, none of the items shrink and overflow if the size of the container is smaller than all the items.
- Similar to flex-grow, flex-shrink takes a value which is a relative factor and could be any positive number: 2, 200, 50 or 1.5.
```
   #container2 > .flex-item {
       flex-shrink: 0;   // default is 1
   }
   #container3 > #item5 {
       flex-shrink: 2.5; 
   }
```
- In the image above, the first container depicts the default case where, flex-shrink: 1;.
- In the second container, all the flex items are set to flex-shrink: 0;, and the items overflow the container.
- In the third container, each of the flex-items are set with different flex-shrink values, and hence the factor by which they shrink varies.
  - A code snippet for the example in the image is shown above.
- NOTE: flex-shrink deals with situations where the initial flex-basis value of all flex-items is greater than the available space in the flex-container.
  - Hence, it takes away the space from flex items to fit the container.
flex
- This is a shorthand property that combines flex-grow, flex-shrink, and flex-basis.
- The flex-shrink and flex-basis values are optional in this property.
- This property can take values in the following manner:
  - flex-initial: flex: 0 1 auto | 0 auto; //default
    - This makes the flex item partially flexible.
    - flex-basis is set to auto and items are auto-sized if there is no main-size (width/ height) specified.
    - Item shrinks by a factor of 1 if the container cannot accommodate the flex items, but the item does not grow if there is positive space to be filled
  - flex-auto: flex: auto | 1 1 auto;
    - This sets the flex-basis based on initial height/ width properties, but the item is flexible and grows or shrinks when necessary.
    - This property can take positive values other than 1.
  - flex-none: flex: none| 0 0 auto;
    - This sets the flex-basis based on initial height/ width properties, but the item is inflexible and does not grow or shrink.
    - Hence items overflow if the container size is not enough to fit the items.
- flex can also take values accepted by the individual properties.
```
   #container1 > .flex-item {
        flex: 0 1 auto;  // default is flex-initial
   }
   #container2 > .flex-item {
        flex: 1 1 auto;   
   }
   #container3 > .flex-item {
        flex: 0 0 auto;   
   }
```
- The above code snippet shows the cases flex-initial, flex-auto and flex-none explained above and shown in the image (first three containers in the image).
```
   #container4 > .flex-item {
        flex: <flex-grow>;
        flex: <flex-basis>;
        flex: <flex-grow> <flex-basis>;
        flex: <flex-grow> <flex-shrink>;
        flex: <flex-grow> <flex-shrink> <flex-basis>;
   }
```
- flex can also take combination of flex-grow, flex-shrink and flex-basis values as shown in the code snippet above and last container in the image.
align-self
- This property controls the alignment of a flex item along the cross-axis.
- It overrides the align-items value for a specific flex item
- align-self accepts all the values assigned to align-items plus value of auto which is the default.
- The following are the values accepted by the property"
  - auto: (default) inherits the align-items value of the parent property.
  - stretch: stretches the cross-size of the flex item to fit the entire cross axis of the container
  - flex-start: flex item is placed at the start of cross axis (cross-start)
  - flex-end: flex item is placed at the end of cross axis (cross-end)
  - center: flex item is placed in the center of cross axis
  - baseline: flex item is aligned such that the baselines of items displayed as align-self: baseline; are aligned.
- Check out this post to understand align-items, cross-axis, cross-size and baselines
```
  #item1 {
      align-self: auto; // default
  }
  #item2 {
      align-self: flex-start;
  }
  #item3 {
      align-self: flex-end;
  }
  #item4 {
      align-self: center;
  }
  #item5, #item6 {
      align-self: baseline;
  }
```
- The above code snippet aligns the flex items within the container as shown in the image above.
  - Since stretch is the align-items value for the parent property, the first flex item set to auto, inherits this value and stretches across the column.
  - Notice how baselines for flex items 5 and 6 are aligned.

Thank you for reading the part 2 of the blog on CSS Flexbox series.

You can check out the entire demo here: https://demo-flexbox.netlify.app/

You can check out the entire code here: https://github.com/bharati-21/Flexbox-CSS
In the next blog, I will focus on common use cases and scenarios where CSS Flexbox is used.

Do leave a thumbs up, save and pin this blog if it helped you in understanding the properties applied to flex items.
Hopefully you might now be able to use these concepts in creating better layouts.

Cheers!

Making Layouts Easy With CSS Flexbox: Flex-Container Properties

Bharati Subramanian — Sun, 16 May 2021 14:33:06 +0000

CSS Flexbox is a responsive design layout that helps in aligning HTML elements efficiently.

Flexbox distributes elements within their parent container, even if the size of items is unknown or dynamic (hence the term "flex").

There are various properties associated with this model, that are either applied to the parent flex container or the children flex items.
In this post, I will try to explain all the properties that are applied to the flex-container.

You can check out the entire demo here: https://demo-flexbox.netlify.app/

You can check out the entire code here: https://github.com/bharati-21/Flexbox-CSS

This could be a long blog post as there are lots of basics to cover!

BASICS

While working with flex, items are aligned either horizontally or vertically.

The parent container that holds items is referred to as the flex-container, and the items/ children as the flex-items.
When elements are displayed as flex, they are laid out along two axes:
- main-axis: The direction along which items are laid. This depends on the flex-direction property.
- cross-axis: The direction perpendicular to the main axis. This also depends on the flex-direction property.

A flex container's or item's height or width, whichever is the main-axis direction, is the item's main-size.
A flex item's height or width, whichever is the cross-axis direction, is the item's cross-size.
The flex items are laid along the main-axis starting from the main-start towards main-end.
The container has flex lines along the cross axis, and items are laid along these lines from cross-start towards cross-end.

The image above explains flex layout and basic terminologies.

FLEXBOX PROPERTIES

Let's use the following code to understand various properties of flex layout:

<div class="flex-container">
     <div class="flex-item" id="item-1">1</div>
     <div class="flex-item" id="item-2">2</div>
     <div class="flex-item" id="item-3">3</div>
     <div class="flex-item" id="item-4">4</div>
     <div class="flex-item" id="item-5">5</div>
</div>

The above image is the default alignment of the container in the browser. display: block;

PROPERTIES APPLIED TO FLEX-CONTAINER (PARENT)

These are the properties applied to parent flex container:

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

.flex-container {
    display: flex | inline-flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    align-items: stretch | flex-start | flex-end | baseline | stretch;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;

    flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
}

display
- This property applies flexbox to the container and all the children become flex items.
- It overrides the default display: block; property on the container.
- The items are automatically aligned horizontally, making the row default main-axis.
- The items stretch to fit the height of the container (since the default main-axis is a row), but items do not stretch across the main-axis.
- This property can take the following values:
  - flex: the parent is displayed as a block-level flexbox container but the children are laid out as flex items.
  - inline-flex: container's children are laid out as flex-items and the container as an inline item.
```
  .flex-container {
      display: flex | inline-flex;
  }
```
  - When parent div with the class "container" is displayed as a flex container, all the children of this container (the 5 divs with class "item") become flex items. By default, the container's main-axis becomes row, flex-wrap is set to no-wrap and flex-basis to auto.
flex-direction
- This property controls how items are displayed in the container, i.e it defines the main-axis.
- This property can take the following values:
  - row: (default value) items are laid from left to right along the row of the container.
  - row-reverse: The items are laid horizontally, but the main-start and main-end lines are reversed.
  - column: The items are laid in a column, from top to bottom.
  - column-reverse: The items are laid vertically, but the main-start and main-end lines are reversed.
```
 .flex-container {
     display: flex;
     flex-direction: row | row-reverse | column | column-reverse
 }
```
  - The flex-direction is specified for the container which becomes the main-axis, and flex items are laid out accordingly. The cross-axis becomes perpendicular to the direction specified.
flex-wrap
- By default, all flex items are displayed in a single line. This behavior can be changed using the flex-wrap property and items can be wrapped into multiple lines.
- The property takes the following values:
  - nowrap: (default) The items either shrink to fit the container or overflow if unable to shrink.
  - wrap: The items are wrapped onto multiple lines, from top to bottom, if the container is not large enough to fit all the items.
  - wrap-reverse: The items are wrapped onto multiple lines, but from bottom to top. The cross-start and cross-end lines are reversed.
```
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap | wrap | wrap-reverse;
}
```
  - When the container is not large enough to fit all the items, nowrap value may cause the flex items to overflow out of the container if the items are unable to shrink or are very small to shrink.
  - Making the container wrap or wrap-reverse avoids overflow, as flex items are wrapped onto multiple lines if they become larger than the flex container.
flex-flow
- This is a shorthand for flex-direction and flex-wrap properties and defines how items need to be displayed in both the main and cross axes.
  - The default value for flex-flow is row nowrap; .
```
 .flex-container {
     display: flex;
     flex-flow: row | row-reverse | column | column-reverse || nowrap | wrap | wrap-reverse;
 }
```
- It takes all the values accepted for flex-direction and flex-wrap. It can take value for either one of the properties or both of them.
justify-content
- This property distributes flex items along the main-axis. It allows to take up any extra space available along the main-axis and changes the way content is displayed.
- The property takes the following values:
  - flex-start: (default) Items are aligned and packed to the start of the container along the main-axis (main-start line).
  - flex-end: Items are packed to the end of the container along the main-axis (main-end line).
  - center: Items are packed to the center of the container.
  - space-between: Items are placed evenly with space between each other. The first item is placed on the main-start line, and the last item on the main-end line.
  - space-around: Similar to space-between but has space on either end of main-start and main-end lines as well.
  - space-evenly: Items are evenly distributed with equal spacing between each other and between the item and edges.
```
.flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```
  - justify-content property aligns items along the main-axis. In this case, since our main-axis is the row, the property aligns items horizontally.
align-items
- This property is used to align flex items along the cross-axis.
- The property takes the following values:
  - stretch: (default) Items are stretched to fill the container across the cross-axis.
  - flex-start: Items are aligned at the start of the container's cross-axis (cross-start line).
  - flex-end: Items are packed at the end of the container's cross-axis (cross-end line).
  - center: Items are placed at the center of the cross-axis.
  - baseline: Items are placed such that their content's baselines align. This is particularly useful when all the flex items within a container have content of varying sizes. The baseline for the example is shown in the image below.
```
.flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: stretch | flex-start | flex-end | center | baseline;
}
```
  - align-items aligns flex items across the cross-axis. In this case, the property aligns flex items vertically since the main-axis is row.
align-content
- This property aligns the extra space between the flex items, called the flex-lines, along the cross-axis.
- The property takes the following values:
  - stretch: (default) Items are stretched to take up the extra space in the container across the cross-axis.
  - flex-start: Items are packed at the start of the container's cross-axis (cross-start line).
  - flex-end: Items are packed at the end of the container's cross-axis (cross-end line).
  - center: Items are packed and placed at the center of the cross-axis.
  - space-between: Items are evenly placed across the cross-axis such that there is space between them. The first item is placed at the cross-start line and the last item at the cross-end line.
  - space-around: Items are distributed along the cross-axis such there is space around and between the items.
```
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: stretch | flex-start | flex-end | center | space-between | space-around;
}
```
  - Similar to how justify-content aligns items along the main-axis, align-content aligns flex items across the cross-axis. In this case, this property aligns flex items vertically.
  - The align-content property only takes effect when the flex items are wrapped onto multiple lines.

You can check out the entire demo here: https://demo-flexbox.netlify.app/

You can check out the entire code here: https://github.com/bharati-21/Flexbox-CSS

In the next blog, I will focus on all the properties applied to the flex container's children (flex-items).

Thank you for reading the first blog on the CSS Flexbox Series!

If this blog helped you understand the flexbox concept better, do leave a thumbs up and follow if you enjoyed reading.

DEV Community: Bharati Subramanian

Deep Diving into JavaScript Variables II

CONTENTS

Keyword let

Syntax

Scope of let

let Declaration and the Global Object

let Declaration and Hoisting

let and Redeclarations

Keyword const

const Declaration Syntax

Scope of const

const Declaration and the Global Object

const Declaration and hoisting

const and Redeclarations

SUMMARY

Deep Dive into JavaScript Variables I

What is this blog series about?

Prerequisites

Contents

Introduction

What are Variables?

What is a Scope

var Keyword

Syntax

Scopes of var

var and its unhealthy attachments!

var and its affair with undefined

Implicit global variables

Redeclarations using var

Summary

JavaScript loading techniques & Performance

What is this blog post about?

Prerequisites

Introduction

Including Script in the body

Including Script in the head

1. async

2. defer

Conclusion

Demystifying Position Property

What is this blog post about?

Prerequisites for the blog

What is the CSS position property?

1. Static

2. Relative

3. Absolute

4. Fixed

5. Sticky

CONCLUSION

RESOURCES:

Responsive Fonts in CSS

What is this blog post about?

Prerequisites for this blog

Font Units in CSS

Pixel

Rem

Em

Percentage

CONCLUSION

References

Introduction to Responsive Design

What is this blog about?

Prerequisites for this blog

What is Responsive Design?

Responsive Design Techniques

1. Setting the viewport

2. Fluid Widths

3. Media Queries

CONCLUSION

Common Use Cases of CSS Flexbox

COMMON USE CASES OF CSS FLEXBOX

1. ALIGNING ITEMS WITH SPACE BETWEEN

2. ALIGNING ITEMS HORIZONTALLY

3. CENTERING CONTENT

4. SPLITTING A CONTAINER HALFWAY

FLEXBOX AND MEDIA QUERIES

RESOURCES

Making Layouts Easy With CSS Flexbox: Flex-Item Properties

What is Flexbox CSS?