DEV Community: Sebastian Anioke

Blockchain Layers: L1, L2, and the Role of Rollups

Sebastian Anioke — Mon, 12 Aug 2024 07:52:13 +0000

Layer 1 (L1)

A Layer 1 (L1) blockchain refers to the base-level blockchain network on which transactions are validated and executed. They serve as the backbone for other layers and applications built on top of them. L1 blockchains provide the foundation for Layer 2 solutions, which are designed to enhance scalability and transaction speed by processing transactions off-chain.

L1 blockchains often face challenges related to scalability, as increasing transaction throughput can impact decentralization and security. This is part of the "blockchain trilemma," which states that achieving decentralization, security, and scalability simultaneously is difficult.

Layer 2 (L2)

Layer 2 solutions significantly increase transaction speed and throughput by handling transactions off the main chain. This reduces the load on the L1 blockchain, allowing it to process more transactions per second.

By processing transactions off-chain, L2 solutions can lower transaction fees, making blockchain operations more cost-effective for users and developers. Layer 2 solutions inherit the security of the underlying L1 blockchain. They rely on the L1 network to verify and confirm transaction data, ensuring that the integrity and security of the transactions are maintained. Common Layer 2 solutions include the Lightning Network for Bitcoin and Rollups for Ethereum. These solutions handle transactions off the main chain and then periodically settle them on the L1 blockchain.

Blockchain rollups

Blockchain rollups are a Layer 2 (L2) scaling solution designed to increase the throughput and efficiency of blockchain networks, particularly Ethereum, by processing tmultiple transactions off the main blockchain, which reduces the computational load and congestion on the Layer 1 (L1) network. These transactions are then batched together and submitted to the main blockchain as a single transaction, which helps to lower gas fees and increase transaction speed. There are of two types Optimistic Rollups and Zereo Knowledge (ZK) Rollups.

Optimistic rollups

Optimistic rollups execute transactions off-chain, bundling them into batches that are then submitted to the Layer 1 (L1) blockchain, such as Ethereum, as a single transaction. This method reduces the computational load on the L1 network, resulting in faster and more cost-effective transactions. The term "optimistic" refers to the assumption that all off-chain transactions are valid by default. Unlike zero-knowledge rollups, which use cryptographic proofs, optimistic rollups rely on a fraud-proof mechanism to ensure correctness, verifying transactions only if a dispute arises.

If someone believes a transaction in a rollup batch is invalid, they can submit a fraud proof during a designated challenge period. If the fraud proof is successful, the incorrect transaction is re-executed on-chain, and the responsible sequencer is penalized. Optimistic rollups support smart contracts in a manner similar to the underlying L1 blockchain, allowing developers to deploy decentralized applications (dApps) with minimal adjustments. This makes them more versatile compared to other Layer 2 solutions like zero-knowledge rollups. The security of optimistic rollups is derived from the L1 blockchain, as they publish transaction results on-chain and rely on the L1's consensus mechanism to maintain security and decentralization.

Zero-knowledge rollups (ZK-rollups)

Zero-knowledge rollups (ZK-rollups) are a Layer 2 scaling solution designed to enhance the scalability and efficiency of blockchain networks, particularly Ethereum, by processing transactions off-chain and using cryptographic proofs to ensure their validity. ZK-rollups handle transaction execution and state changes off-chain, reducing the computational load on the Layer 1 (L1) blockchain, which allows for higher transaction throughput and lower costs. Transactions are grouped into batches and processed off-chain, with these batches then summarized and submitted to the L1 blockchain, significantly reducing the amount of data that needs to be posted on-chain. ZK-rollups use zero-knowledge proofs (ZKPs) to verify the correctness of off-chain transactions, ensuring that the state changes proposed by the Layer 2 network are accurate and secure without revealing any underlying information about the transactions themselves.

A smart contract on the L1 blockchain manages the state of the ZK-rollup, verifying the validity proofs and updating the state based on the verified transactions. Unlike optimistic rollups, ZK-rollups do not require a challenge period for transaction finality. Once the validity proof is verified by the smart contract, the transactions are considered final, allowing for faster movement of funds between the ZK-rollup and the L1 blockchain. Additionally, ZK-rollups employ data compression techniques to minimize the amount of data stored on the L1 blockchain, further reducing transaction costs. This combination of features makes ZK-rollups a powerful solution for improving blockchain scalability and efficiency.

Sequencers

Sequencers in blockchain, particularly within Layer 2 (L2) solutions like rollups, are essential for managing the order and execution of transactions. They determine the transaction order, which is crucial for maintaining blockchain consistency and preventing issues like double-spending. Sequencers aggregate multiple transactions off-chain and submit them as a single batch to the Layer 1 (L1) blockchain, enhancing throughput and reducing fees. They also execute transactions and update the system's state, ensuring network participants have a consistent view of the blockchain.

However, sequencers can sometimes act as centralized authorities, raising concerns about potential censorship and reduced decentralization. To address these issues, efforts are underway to decentralize sequencers by allowing multiple entities to operate them, thereby improving decentralization and reducing the risk of a single point of failure.

Stages of a Rollup

The stages of a blockchain rollup describe the development and maturity levels of rollup projects, focusing on decentralization and security. Inspired by Vitalik Buterin's milestones, these stages assess rollup maturity. In Stage 0—Full Training Wheels, the rollup is mostly managed by its operators and relies heavily on centralized components for transaction ordering and state updates. This stage is used during early development and testing, making it the least decentralized. Stage 1—Enhanced Rollup marks the transition towards increased decentralization, with the implementation of decentralized governance mechanisms, such as smart contracts, to manage certain operations. This stage reduces reliance on centralized operators.

In Stage 2—Full Rollup, the rollup achieves high decentralization and security by fully leveraging decentralized governance and minimizing trust in centralized components. At this mature stage, the rollup operates independently of any single entity, aligning closely with blockchain principles of decentralization and security. The ultimate goal of these stages is to achieve "Stage 2" decentralization, characterized by trustless operation, ensuring that rollups minimize trust in specific humans and maximize trust in code.

Bridging

Bridging in blockchain refers to the process of connecting two separate blockchain networks to enable the transfer of data and assets between them. This addresses the challenge of blockchain interoperability, where different networks often operate in isolation with limited ability to communicate and exchange information. The bridging process begins with asset locking, where users lock assets, such as cryptocurrencies, on the source blockchain through a smart contract that securely holds the assets. The bridging mechanism then verifies the transaction and ensures the locked assets are legitimate, often involving consensus validation to confirm the transaction's validity. Once the assets are locked, a representation of these assets, known as wrapped tokens, is created on the target blockchain. These tokens mirror the value of the original assets and can be used within the target blockchain's ecosystem.

The bridge facilitates communication between the source and target blockchains, often using cross-chain communication protocols or relay chains to ensure seamless data transfer. On the target blockchain, users can unlock the equivalent amount of assets by interacting with the bridging mechanism, which involves burning the wrapped tokens or executing a smart contract function. The bridge ensures that the assets are properly settled and the transaction is finalized on both blockchains, providing users with confirmation of the successful transfer. This process allows for greater flexibility and utility across different blockchain networks, enhancing the overall functionality and reach of blockchain technology.

Six Games that can improve your skills as a frontend developer.

Sebastian Anioke — Wed, 01 Feb 2023 04:04:26 +0000

Here are some interactive web-based games or challenges that are designed to test and improve your frontend development skills. Some popular frontend developer games include:

Wilco
CodinGame
Project Euler
Flexbox Froggy
Grid Garden
CSS Diner

Wilco

Wilco is a unique video game-like training platform that allows developers to work at a fantasy tech company, where they can complete multiple quests to acquire more professional skills. The quests are designed to help developers learn how to deal with complex, lifelike scenarios using new tools they may not be familiar with.

On the platform, developers join a fantasy tech company — a game-like experience designed to accelerate their professional growth. At their “new workplace”, engineers go on quests that challenge them to navigate complex life-like scenarios while utilizing real tools and technologies.
Get More Info

CodinGame

CodinGame is a platform that offers coding challenges and games in various programming languages, including JavaScript. The platform offers a wide range of challenges, from beginner-friendly puzzles to complex algorithms. Players can choose from a variety of programming languages, including JavaScript, to complete the challenges.

CodinGame is a fun and engaging way to improve JavaScript skills. The challenges are designed to test and improve various coding concepts, such as algorithms, data structures, and logic. Additionally, players can compete against others on the leaderboard, adding a competitive element to the learning experience.

The platform also offers a friendly and supportive community, where players can discuss challenges and solutions with others. This can be a valuable resource for players looking to improve their JavaScript skills and gain insights from more experienced developers

Check it Here !

Project Euler

Project Euler is a collection of challenging mathematical and computational problems designed to be solved with computer programs. The problems are designed to encourage users to learn and improve their problem-solving skills and programming abilities, particularly in the areas of mathematics and algorithms.

The problems on Project Euler can be solved in a variety of programming languages, including JavaScript. The challenges range in difficulty from relatively simple mathematical problems to complex algorithms, making it a great resource for developers of all skill levels.

Solving the problems on Project Euler can be an effective way to improve JavaScript skills. Users can improve their ability to write clean, efficient, and well-organized code by working through the challenges. Additionally, they can also develop a deeper understanding of mathematical concepts and algorithms, and gain practical experience in applying these concepts to real-world problems

Check it Here !

Flexbox Froggy

Flexbox Froggy is a game designed to teach players about the CSS Flexbox layout. The game is played by helping Froggy reach its lilypad by moving the frogs into the correct positions. The game is set up like a grid, with the player having to align the frogs to match the layout of the lilypads.

To complete each level, players must understand and apply Flexbox properties such as flex-direction, justify-content, align-items, and more. The game starts with simple levels and gradually increases in difficulty, challenging players to understand more advanced Flexbox concepts.

Flexbox Froggy is a fun and interactive way to learn about Flexbox layout, making it a great tool for frontend developers to improve their skills. The game's intuitive and engaging design makes it accessible to players of all skill levels, making it an ideal resource for beginners to learn about Flexbox. Additionally, it can also serve as a useful tool for more experienced developers to test and improve their understanding of Flexbox

Check it Here !

Grid Garden

Grid Garden is a game designed to teach players about CSS Grid layout. The game is played by helping the carrot grow by aligning the squares to match the grid in the garden. The player must understand and apply CSS Grid properties such as grid-template-columns, grid-template-rows, grid-gap, and more.

The game starts with simple levels and gradually increases in difficulty, challenging players to understand more advanced Grid concepts. The user interface is intuitive and engaging, making it easy for players to understand the concepts and apply them to the game.

Check it Here !

CSS Diner

CSS Diner is a game designed to teach players about CSS selectors. The game is played by selecting the correct elements on a web page to match the order of the dishes on the menu. Players must understand and apply various CSS selectors such as class selectors, id selectors, attribute selectors, and more.

The game starts with simple levels and gradually increases in difficulty, challenging players to understand more advanced CSS selector concepts. The user interface is intuitive and engaging, making it easy for players to understand the concepts and apply them to the game.

Check it Here !

Synchronous vs. Asynchronous programming in Javascript.

Sebastian Anioke — Sun, 28 Aug 2022 03:19:41 +0000

Javascript is a single-threaded programming language that can also be non-blocking. This simply means that javascript is a programming language that can be used to carry synchronous and asynchronous tasks.

These two programming styles give javascript a lot of power when it comes to carrying out programming tasks, most especially those that take a long time to complete.

In this article, I will discuss the differences between synchronous and Asynchronous programming, the pros and cons of each of them, and their best use cases.

Differences.

Normal functions return a result with the return keyword while Async functions return a Promise object (This is an object that contains the state of the promise and the value of the promise).
```
 function sum(a,b) {
      return a+b;
 }

 async function add(a,b) {
      return a + b;
 }

 sum(3,9)
 add(3,9)
```

Values of Normal function are gotten by calling the function while value of Async function is gotten by using the await or .then().

 function sum(a,b) {
      return `Normal function : ${3 + 9}`;
 }

 async function add(a,b) {
      return  a + b;
 }

 sum(3,9)
 await add(3,9)

Using .then()

 add(3,9).then((value)=> console.log(value))

Most functions/methods that naturally run asynchronously require a callback function as a parameter.

 new Promise((resolve)=>resolve);
 setTimeout(()=>,1000);
 element.addEventListener("click", ()=>)

In synchronous programming, functions that require other functions as parameters are called Higher Order Functions.

 function multiplyBy(num) {
      return function(arg) {
          return  num * arg;
      }
 }
 const multiplyByTwo = mutltiplyBy(2);
 const multiplyByFour = multiplyBy(4);
 multiplyByTwo(4)
 multiplyByFour(4)

The javascript engine first runs all synchronous code before running asynchronous code.

 console.log("I am the first") //synchronous
 new Promise((resolve)=>resolve("I am second")).then(console.log); //asynchronous
 setTimeout(console.log("I am the third"), 2) // asynchronous
 console.log("Should I be the last")  //synchronous
 setTimeout(console.log("Can I come ?"), 0) // asynchronous

In Javascript all asynchronous codes are first sent to the web API before they are added to the call stack. Asynchronous codes are added to the call stack when all synchronous code(s) have been executed by the javascript engine and have been removed from the call stack.

     function printHello() {
     console.log('Hello from baz');
     }

     function baz() {
     setTimeout(printHello, 3000);
     }

     function bar() {
     baz();
     }

     function foo() {
     bar();
     }

     foo();

Synchronous programming follows a strict sequence, which means that operations are performed, in perfect order. While one operation is being performed, other operation instructions are blocked.
```
    console.log("Loading file-1 ...")
    console.log("Loading file-2 ...")
    console.log("Loading file-3 ...")
```
With synchronous programming, it would be impossible to load file-2 without loading file-1 .

Asynchronous programming is non-blocking which means it doesn't block further execution while one or more operations are in progress. This also means that multiple operations can run simultaneously without waiting for other tasks to complete.
```
    new Promise((resolve)=>setTimeout(resolve("Loading file-1"),2000)).then(console.log);

    setTimeout(console.log("Loadinf file-2"),0);

    btn.addEventListener("click", ()=>console.log("Loading file-3"));
```
Javascript functions that take a very long time before they return can make the user interface(UI) or server unresponsive until the function has returned, resulting in a bad user experience. an example would be to use the alert function to display a message.
The user would not be able to do anything on the web page until a response is given to the alert box.
```
      console.log("Loading file-1 ...")
      alert("Loading file-2 ...")
      console.log("Loading file-3 ...")
```
Asynchronous programming enhances a user's experience by reducing the time it takes for a function to return after it has been called. It does this by running complex functions in the background so that it does not interrupt the user's experience with the application.

For example, it takes time to fetch data from an application programming interface(API) or read a file so rather than stop all other operations we could use asynchronous programming to perform these actions. A bonus here is that the user might think that the application is running very fast.
```
     function load(file) {
          return new Promise((resolve)=>{
               resolve(file)
          });
     };

     async function getBigData(bigFile) {
          const respone = await load(bigFile);
          console.log(`${bigFile} is ready`);
     };

     function getsmallData(smallFile) {
          console.log(`${smallFile} is ready`);
     };

     getBigData("File-1");
     loadsmallData("File-2");
     loadsmallData("File-3");
     loadsmallData("File-4");
```
"File-1" is very large and loading it synchronously can slow down our application. So we load it asynchronously by using a Promise.

Once the javascript engine notices that getBigData() is an asynchronous function, it sends it to the web API and continues running other synchronous tasks.

Once all synchronous tasks have been completed the event loop checks the micro tasks queue/job queue and runs getBigData() on the call stack.

Asynchronous code is non-blocking, which means that we can send multiple requests to a server at the same time.

     const urls = [
         'https://jsonplaceholder.typicode.com/users',
         'https://jsonplaceholder.typicode.com/posts',
         'https://jsonplaceholder.typicode.com/albums'
     ];

     Promise.all(urls.map((url) => {
          return fetch(url).then((value) => value.json());
          })).then((values) => {
              console.log(values[0]);
              console.log(values[1]);
              console.log(values[2]);
     }).catch((error) => console.log("Opps there was an error", error));

Synchronous code is blocking which means that it can only send one request and wait for that request to be answered by the server.

With Promise.all() we could work on an array of asynchronous operations at once, which is, using the fetch() to fetch data from a database.

Synchronous programming is advantageous to developers because it is much easier to code. This saves the time it takes for developers to learn something that could open the door to bugs (asynchronous programming).
Asynchronous programming should be used in carrying out tasks that do not depend on other tasks for their execution.
```
     <!DOCTYPE html>
     <html>
          <p>Hello</p>
          <p>Hello</p>
          <p>Hello</p>
          <p>Hello</p>
          <p>Hello</p>
          <p>Hello</p>
          <p>Hello</p>
          <script src="animate.js"></script>
          <script src="index.js"></script>
     </html>
```
Suppose we want to animate the p tags once the page loads using a javascript animation library (animate.js). Since our code, written in index.js depends on that, written in animate.js it is placed after it.

The code in index.js is a dependent task because it depends on animate.js to successfully carry out its operation, while the library animate.js is an independent task because it doesn't really on any other code for its execution.

The code is read synchronously from the p tags to the last script file, index.js and everything works just as expected. But we could do something interesting here by loading animate.js asynchronously. This means that the script file, animate.js is parsed same time the p tags are parsed to increase load time.
```
      <script async src="animate.js"></script>
```
By adding the async keyword, the animate.js is loaded at the same time that all the p tags are loaded. Cool right?

By doing this we gain an increment in the load time and our users are happy ☺.
Search engines find it easier to find web pages that make use of synchronous programming. So a business that depends on search engine optimization(SEO) to publicize its reputation and product, synchronous programming would be an advantage an appreciable advantage.

Conclusion

I hope that you have gained something new from this article and you can make wise programming decisions according to what your application requires.

Refrences

The Console API.

Sebastian Anioke — Fri, 12 Aug 2022 02:37:39 +0000

The ability to spend less time finding errors in a code is a necessary skill that every developer should have.

The Console API, a debugging tool that is part of the browser, provides developers with some functions that make it possible to find these errors.

I wrote this article to show web developers some of the functions that come with the console object and what they are used for. Hopefully, you will find it useful when debugging your code.

Console.log()

This is the most popular console method. It converts its arguments (which are separated by commas) to strings and logs them to the web console. In the console, it inserts spaces between the arguments and starts a new line after outputting all arguments.

Other similar functions include:

Console.debug()
Console.info()

Normally, the browser doesn't show debug statements and would return undefined. This is because console.debug() was created to be used in development areas only and should not be shown to users. However, this can be changed by enabling "verbose" in the default levels.

Note: When logging objects to the console from an IDE what gets logged is a reference to the object and not the value of the object when console.log is called, but the value of the object after the console is opened.

Console.warn()

The console.warn() method outputs a warning message to the web console. It usually starts with an exclamation icon.

let x = 3;
if (x == 3) {
    console.warn("This value might be too low");
}

console.warn is used for displaying messages that might not necessarily cause a breakdown in the application but to show something that the user should be aware of. For example, if an API is deprecated, console.warn can be used to send a message across to the user.

Console.error()

The console.error() function outputs an error message to the console (we have all gotten this one).

let x = "3";
if (!Number.isInteger(x)) {
    console.error(`${x} is not a number`);
};

console.error() is used for building libraries so that the user is aware of the reason their code might not be working as expected.

Console.assert()

The console.assert function takes two arguments. The first argument is a block of code that is either true or false while the second argument is the message to be printed to the console.

If the first argument is true the function does nothing, but if it is false, the second argument is printed to the console with an Assertion failed" prefix.

const numbers = [1,"2",3,"4",5,"6"];
for (element in numbers) {
    console.assert(Number.isInteger(numbers[element]), `${numbers[element]} is not a number`);
}

Console.clear()

console.clear is used for clearing the console. This is useful when you want to clear other console statements before displaying a new one.

function show() {
    console.clear();
    console.log("...checking line 2");
    console.log("...checking line 5");
    console.log("...checking line 6");
}

function clear() {
    console.clear();
    console.log("...checking line 13");
}

show();
clear();

Console.table()

console.table takes one argument which is an object or an array and displays it in a tabular form.

If its argument is an array, the first column will represent the indices of the array and the second will be the values.

const color = ["blue", "red", "yellow","green", "purple"];
console.table(color);

If its argument is an object, the first column will represent the properties of the object and the second column the values.

const color = {
    primary : "red",
    secondary : "purple",
    tertiary : "violet"
}
console.table(color);

If its argument is an array of objects, the first column will represent the indices of each object, and the remaining columns will be the properties of the object.

const members = [
    {
        name: "Micheal",
        age : 21,
        isPresent : true
    },
    {
        name : "David",
        age : 18,
        isPresent : false
    },
    {
        name : "Linda",
        age : 22,
        isPresent : true
    },
    {
        name : "Philip",
        age : 27,
        isPresent : false
    }
];
console.table(members);

You could also restrict the number of columns to be displayed by passing a second argument which is an array that will contain only the properties to be displayed.

console.table(members, ["name","age"]);

Console.trace()

When a function is called, it gets added to the call stack. If this function calls another function, that function is also added to the call stack till a value is returned.

console.trace is simply used to trace how a function was called (i.e other functions that lead to it).

function factorial(number) {
    if (number == 1) {
        console.trace("Base case");
        return 1
    }else{
        return number * factorial(number - 1);
    }
}
factorial(4);

We can see that we hit the base case after the function was called four times. "Anonymous" is simply the global namespace that gets mounted on the call stack before any other function is added to it.

Console.count()

This function takes a string as an argument and logs to the console the number of times it has been called with that string. If no string is passed, it behaves as though it was called with a string value of "default".

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount();
increaseCount("Ben");
increaseCount();
increaseCount("Jane");

console.count is also useful for keeping track of how many times an event handler has been triggered.

The count could also be reversed using console.countReset().

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount("Ben");
increaseCount("Jane");
console.countReset("Ben");
increaseCount("Ben");

Note: While trying to reset the count make sure that console.count() and console.countReset have the same argument.

Console.group()

console.group() groups all subsequent console messages until console.groupEnd() is called. The argument console.group takes is used to provide an explanatory name for the group.

for (let i =0; i <= 2; i++) {
    console.group(`Group ${i+1}`)
    console.log(i)
    console.log(i + 1)
    console.log(i + 2)
    console.log(i + 3)
    console.groupEnd()
}

Console.time()

console.time() takes an argument that represents its unique name and starts a timer with that name. To check the time it takes for a block of code to run, console.time() is called above the code followed by another function console.timeEnd() which is called at the end, with the same argument passed to console.time(). console.timeEnd() stops the timer and logs the time it took for the code to run (in milliseconds) to the console.

console.time(loop-time);
for (let i =0; i <= 2; i++) {
    console.log(i + 2)
}
console.timeEnd(loop-time);

Also, to check the time since console.time() was called, a function, console.timeLog() which takes the same argument as console.time is called between console.time and console.timeEnd().

console.time("loop-time");
for (let i =0; i <= 2; i++) {
    for (let j=0; j<=2; j++) {
    console.log(i + 2)
    }
    console.timeLog("loop-time");
}
console.timeEnd("loop-time");

Note : console.time() does not produce any output on its own and once console.timeEnd() has been called its inappropiate to call console.timeLog until console.time() is called again.

Formatted Output with Console.

When Console functions similar to console.log() takes two arguments where the first contains %s, %i, %d, %f, %o, %O, or %c. The first argument is treated as a format string, and the values of subsequent arguments are substituted into the string in place of the two-character % sequences.

%s - Format as a string.
%i - Format as an integer.
%f - Format as a floating point value.
%O - Format as a javascript object.
%o - Format as a DOM element.
%c - Format as a CSS rule.

const a = {name:"Cindy"};
console.log("The first user is : %O", a);
console.log("Here are the elements in the DOM : ", document.documentElement);
console.log("%cThis is a text", "color:red;font-size:2rem");

Destructuring the Console object.

To save time, you could destructure console functions from the Console object.

const { log } = console;
const { error } = console;

log("This also works !");
error("This is wrong");

Conclusion.

Even with all of the available functions the console API provides, some developers only use console.log() when trying to find errors in their code.

Sometimes, using a console.log() works just fine but there are also sometimes when other functions might save you some time by providing better information regarding the bug to be fixed.

Thanks for reading this article. I hope you have learned something new and you are ready to start implementing what you have learned.

THE BOX MODEL.

Sebastian Anioke — Wed, 03 Aug 2022 23:16:54 +0000

The box model is a fundamental principle that every web designer/web developer should understand and be able to implement properly. Without a proper understanding of the box model, building complex web pages would be strenuous which is caused by having to deal with a lot of CSS bugs.

In this article, I will be explaining the box model with a box that is extrinsically sized (more on this later). Extrinsic sizing is the default sizing of every HTML element and it is done by setting the box-sizing property to content-box.

*{
    box-sizing: content-box;
}

What is the CSS box model?

Every element on the webpage from a paragraph, an image, and a heading to an element with rounded corners all live inside a box. Of course, this box can sometimes be invisible nevertheless, it is this box that determines how this element appears on the web page.
So what's the box model? The box model is a term used to describe the various properties of a CSS box. These properties are :

The Content Box
The Padding Box
The Border Box
The Margin Box

The Content Box

The Content box is the innermost part of the box. It holds the main HTML content to be displayed on the webpage e.g text, an image, or a video player.
The width and height of this box are determined by the content's width and height respectively and can be controlled using the width and height.

div {
    width: 120px;
    height: 75px; 
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

From our result, our content here would be the text "Content Box" and the content's width and height value would be the values of the set width and height. The remaining properties were used to design the content by increasing its's size with font-size, setting the type to font-family with a color, and giving the content box a background-color so that it is visible.

Note: In some cases, if the box was used for simply designing the webpage the content box can be empty.

The Padding Box

This is the whitespace that wraps the content box. It could also be seen as the space between the content box and the border box.
Its default value for most browsers is 0px and since it just acts like whitespace it does not have any color.
The padding property controls the padding on all sides of the element and is a shorthand for the following properties:

padding-top: controls the padding space above the element.
padding-right: controls the padding space on the right side of an element.
padding-bottom: controls the padding space on the bottom of the element.
padding-left: controls the padding space on the left side of the element.

The padding property can take either one, two, three, or four values.

One value controls the value of the padding space on all four sides.
With Two values the first value controls the padding-top and padding-bottom.
With Three values the first value controls the padding-top , the second value controls the padding-left and padding-right while the third value controls the padding-bottom.
With Four values, the first, second, third and fourth value controls the padding-top, padding-right, padding-bottom and padding-left respectively.

To define the padding of any element we could write:

.element {
    padding-top : 20px;
    padding-right : 30px;
    padding-left : 30px;
    padding-bottom : 10px;
}

OR using the shorthand format

.element {
    padding : 20px 30px 10px;
}

To define the padding of our div element, we would write

div {
    width: 120px;
    height: 75px;
    padding : 10px; 
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

From the above result we can see that the padding space on all the sides of the div element has increased by 10px and since we are working with an Extrinsically sized box, this increases the width and height of this element.

To calculate the new width and height of our element we would do this :

New width = padding-left + width + padding-right
New height = padding-top + height + padding-bottom

OUTPUT:

You would also notice that space has been added to the top and left side of our element to make it look like it has shifted diagonally.

Note: Padding does not take negative and color values. The color here was used to illustrate how its value affects the size of any element.

The Border Box

This box covers the padding box and the content box. The border property controls the borders on all sides of the element. To apply the border to an element, the border property requires three inputs which are :

border-width
border-style
border-color

Border-width

The border-width specifies the thickness of the border. Its value could be thin, medium, thick, and a < length> The more its value is increased the more the width of the element increases. To control the border-width element, the following properties are used :

border-top-width : controls the on top of the element.
border-left-width : controls the width on the left side of the element.
border-bottom-width : controls the width at the bottom of the element.
border-right-width : controls the width on the right side of the element.

Border-style

The border-style specifies the kind of styling the border's element will have. Its value can be:

solid: displays a single, straight and solid line.
dotted: displays a series of rounded dots.
dashed: displays a series of short square-ended dashes or line segments.
double: displays two straight lines.
groove: displays a border with a carved appearance.
ridge: displays a border with an extruded appearance.
none : displays no border.
ridge: displays a border with an extruded appearance.
outset: displays a border that makes the element embossed.
inset: displays a border that makes the element appear embedded.

Border-color

The value the border-color takes would be the color of the border.
e.g red, #a79b9b, rgb(135, 187, 87) e.t.c.

To define the border of any element, we could write :

.element {
    border-width : 20px;
    border-style : solid;
    border-color: brown;
}

OR using the shorthand format

.element {
    border : 20px solid brown;
}

Here is how we define the border for our div element

div {
    width: 120px;
    height: 75px;
    padding : 10px;
    border: 10px solid #7380ec;
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

When we add a border to an Extrinsically sized box/element we also increase the width and height of the box.

New width = border-left-width + padding-left + width + padding-right + border=right-width
New height = border-top-width+ padding-top + height + padding-bottom + border-bottom-width

The Margin Box

This is the outermost part of the element. This part of the box model separates the element from the rest of its surroundings. It's default value is 8px. The margin property controls the margins on all sides of the element.

The margin property can take both negative and positive values. We know that when the margin increases, the separation of the element from other elements increases as well, but what happens when the margin value starts becoming negative? What happens is that the element starts drawing every element around it to itself (you could think of it as a black hole).

To control the margin on each side of the box the following properties are used :

margin-top: This property Increases the space between the element and its environment at the top. You could think of this property as pushing the element down to create more space above itself. When its value is negative it does the opposite, which is, that it pushes the element upwards by creating below it.
margin-right: Increasing the value of this property pushes the element to the left by increasing the space between itself and other elements towards the right. Rather than pushing the element to the left, decreasing the margin-right value pushes the element to the right by creating space in the opposite direction.
margin-bottom: Increasing the value of this property pushes every element below it downwards, and as a child element, it increases the size of its parent element. By doing this, it creates more space between itself and the other elements below it. As a child element, decreasing the margin-bottom value to a negative value would decrease the size of its parent element. This would cause the element to overlap with other elements ultimately leading to an unstructured layout.
margin-left: As the value of this property is increased the element shifts to the right which is caused by the increase in the space between the element's left side and its environment. As a child element if the margin-left property has a very large positive value it could cause the element to break out of the parent element from the right resulting in an unstructured layout. When the margin-left value is decreased to a negative number it shifts the element to the left causing it to behave like margin-right.

The margin property can take either one, two, three, or four values.

One value controls the value of the margin space on all four sides.
With Two values the first value controls the margin-top and margin-bottom.
With Three values the first value controls the margin-top , the second value controls the margin-left and margin-right while the third value controls the margin-bottom.
With Four values, the first, second, third and fourth value controls the margin-top, margin-right, margin-bottom and margin-left respectively.

Having a margin with a negative value becomes necessary when its parent element is the body of the DOM.

To define the margin of any element we could write :

.element{
    margin-top :10px;
    margin-right : 7px;
    margin-bottom : 10px;
    margin-left : 7px;
}

OR using the shorthand

.element{
    margin : 10px 7px;
}

Let's define the border of our div element

div {
    width: 120px;
    height: 75px;
    padding : 10px;
    border 10px solid #7380ec;
    margin : 30px;
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

From our result, we can see that the div element was shifted 30px to the right and 30px downwards.

Note: Margin does not increase the width or height of any element but in some cases, could affect the height and width of its parent element if the height and width of its parent element are not defined.

Intrinsic sizing vs. Extrinsic sizing

When increasing the border or padding of a box we expect that the width and height of the box should increase but developers can still maintain the specified width of the box. This type of sizing is called Intrinsic Box Sizing. To activate intrinsic sizing for all elements in your stylesheet simply add this block of code.

* {
    box-sizing : border-box;
}

Most developers use Intrinsic sizing to keep the size of the element consistent even when padding and border are applied.

Here is what our div element would look like if it was Intrinsically sized.

From the image above, we see that the width (120px) does not change after padding and border were added. What happened here is that the padding and the border start filling the space of the content box rather than adding to it as in the case of Extrinsic-sizing.

Let's say you were creating a menu bar for a phone of 390px.

To shift the content away from the edge of the menu bar you have the option of only using the padding.

If you applied extrinsic sizing the content would move away from the box but the width of the box would increase resulting in an unstructured layout.

The case would be different if Intrinsic sizing was applied. Rather than adding unnecessary width. It just adds the padding without increasing the width.

Fallbacks

Intrinsic Sizing sounds nice but something strange occurs when the size of our paddingbecomes greater than the width of our element.

div{
    box-sizing: border-box;
    width: 120px;
    height: 75px; 
    font-size: 15px;
    padding: 86px !important;
    margin: 30px;
    border: 10px solid #7380ec;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

The applied padding fills the whole content box and since it is greater than the width it increases the size of the box.

Conclusion

In this article you have understood :

What is the box model is.
The differences between each component of the box model and how they affect the way elements are rendered on the webpage.
How to implement the box model in the short-hand form.
The differences between Intrinsic and Extrinsic sizing.