![https://unsplash.com/@rcrazy?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash](//images.ctfassets.net/awy0uwqcdbbl/6ci03nJFZXTflFKKcXBhZH/d118be82e1929c3d79324db01dd6e20c/journey.webp)

Transitioning from a Frontend Developer to a Full Stack Developer was a significant moment in my career journey. 

After four years of working in frontend development, I challenged myself to expand my skill set and dive into backend development. 

I had some prior experience working on backend projects in the early stages of my career, but I had never worked on a big scale project before.

In this blog post, I'll share my journey of learning backend development by workng on a large scale, real world project – an appointment booking platform.

## The Journey Begins:
As a Frontend Developer, I was familiar with HTML, CSS, and JavaScript, and I had become good at using frameworks like ReactJS and NextJS. 

However, I understood that to reach my full potential and contribute more fully to projects, I needed to explore backend development so I started learning backend development.

## Diving into Backend Development:
My transition to Full Stack Development began with a thirst for knowledge and a willingness to learn. I started by familiarizing myself with backend technologies such as Node.js, Express.js, and MongoDB. 

I spent a lot of time going through online tutorials and documentation to understand how server-side programming, database management, and API development work, but the real learning began when I started working on real world projects.

## The Turning Point:
The turning point in my journey came when I had the opportunity to 
work on a real world project – __An Appointment Booking Platform__.

This project gave me the perfect opportunity to apply my new backend skills in a practical setting. As the backend developer, I was tasked with architecting and implementing the backend infrastructure of the platform.

## Implementing Key Features:
Working on the appointment booking platform exposed me to a variety of challenges and opportunities for growth. 

I implemented various features, including appointment booking with payment integration, gift card and coupon management, product sales, and subscription services. 

Each feature required careful planning, detailed coding, and thorough testing.  

## Overcoming Challenges:
Transitioning from Frontend to Full Stack Development had its challenges. 

I had to learn tricky backend stuff and fix bugs to make everything run smoothly. It wasn't easy, It tested my problem solving skills and patience 😄 but with help from my team, I got through it. Now I feel more confident in what I can do.

## The Rewards of Full Stack Development:
As I got deeper into Full Stack Development, I found it incredibly satisfying to see a project come to life from end to end. 

From designing the user interface to implementing backend functionality, I was involved in every part of the process. The sense of fulfillment that came from building a functional and scalable platform was truly rewarding. ❣️

## Final Thoughts
Switching from Frontend Developer to Full Stack Developer has been a big change. I faced a lot of challenges, learned a ton, and had some great moments along the way. 

Working on a real project like the appointment booking platform was a chance for me to really use my new backend skills and become a strong Full Stack Developer. I'm excited and looking forwward learning more about web development.

Transitioning from a Frontend Developer to a Full Stack Developer was a significant moment in my career journey. 

My Journey from Frontend Developer to Full Stack Developer

Have you ever wondered what goes on behind the scenes when you run your JavaScript code? 

We often write JavaScript code that makes our web pages interactive and dynamic, but it's the JavaScript engine that brings that code to life. It's like the engine of a car, without it, the car won't move, and without the JavaScript engine, our code won't run.

Whether you're an experienced developer or just starting out, this article aims to help you become a more capable developer.

Let's dive into How a JavaScript Engine Works Behind The Scenes.

## JavaScript Engine
The browser does not understand JavaScript. It uses a JavaScript engine that reads and executes the source code so that the computer knows what to do.  Eachh major browser has its own engine. 

Most famous JavaScript Engines are __Google's V8 engine__ and __SpiderMonkey__ which is written by none other than the creator of JavaScript __Brendan Eich__ at Netscape Communications. It is currently maintained by the Mozilla Foundation.

In simple words, a JavaScript Engine is responsible for interpreting and executing JavaScript code. It includes components like the __parser__, __interpreter__, __compiler__ (in some cases), __memory heap__, and __call stack__. Its primary role is to handle the execution of JavaScript code and manage the program's flow.

By understanding how the engine works, we can write code that runs faster, and works better.

In this article, we will specifically talk about Google's __V8 Engine__.

![JavaScript Engine Visual Overview](//images.ctfassets.net/awy0uwqcdbbl/3n15mQxfpiK4VbHkdtrVbY/75e7f1df0307ca5bd97720bec74b4639/JavaScript_Engine_Visual_Overview.png)

__Let's go deep into each step:__

### 1- Tokenization
Tokenization, also known as Lexical Analysis, is the first phase in the JavaScript engine's process of interpreting and executing code. During this step, the source code is broken down into individual tokens, which are the smallest units of JavaScript syntax. These tokens are then used to build the __Abstract Syntax Tree (AST)__, which we'll talk about later.

1. The source code comes from various sources, such as a script file, an inline script within an HTML page, or user input in a JavaScript console.
2. The JavaScript engine reads the source code character by character, treating it as a stream of characters.
3. Whitespace and comments are removed from the tokenization process. Their sole purpose is to improve code readability for developers.
4. Once whiteespace and comments are removed, the real tokenization process starts. During tokenization, the stream of characters is divided into meaningful language elements, such as __keywords__ (e.g. if, else, function, var, while), __identifiers__  (e.g. myVariable, calculateResult), __operators__ (e.g. '+', '-', '*', '/', '&&', '||', '==='), __literals__ (e.g. 7, "Hello, world!", false), and __punctuations__ (special characters like __'{'__ or __';'__).
5. The engine then generates a sequence of tokens based on the recognized language elements. These tokens form a list that represents the syntactical structure of the code.
6. If the engine encounters any characters that do not match the expected syntax, it will report a syntax error. The error message indicates the position in the code where the issue occurred, helping developers identify and fix the problem.

Let's look at a diagram to understand better:

![Tokenization - Lexical Analysis](//images.ctfassets.net/awy0uwqcdbbl/JePz8mkxenaKK9MB5xbiC/af96949b54b4263612ab012e84ed707d/tokenization-diagram.png)
As you can see, It broke down the source code into individual tokens.

### 2- Parsing (Abstract Syntax Tree - AST)
This step is called the __Syntax Analysis__, It can also be called __Parsing__. It is the second step in the process of interpreting and executing the code. It takes the stream of tokens generated during lexical analysis and organizes them into the tree structure called __Abstract Syntax Tree - AST__.

The AST represents the hierarchical structure of the code and provides the foundation for further interpretation and execution.

In simple words, AST is the tree representation of your source code.

Let's take a look at the diagram to understand better:

![Syntax Analysis Parsing](//images.ctfassets.net/awy0uwqcdbbl/ufb7wJGAyZ0GaekpNpK6b/cbeceb2c075bf668ae4d621a849bb5e4/syntax-analysis-parsing.png)

![AST](//images.ctfassets.net/awy0uwqcdbbl/7GfREb8AklzuTh63AhUwMO/496884030135bf6e759ba60d7cd81091/AST.png)

The nodes in the AST represent expressions, statements, function declarations, variable declarations, and more.

__So, what's the role of AST in the Execution?__
Well, The AST serves as an intermediate representation of the code. Which makes it easier for the JavaScript engine to perform optimizations before the actual execution. The tree hierarchy allows the engine to navigate through the code's structure systematically.

Note that an AST doesn't store all the information. For example, it doesn't store punctuations, spaces etc.

There is an online tool called [AST Explorer](https://astexplorer.net/ "AST Explorer"). It is a great tool to learn and work with __AST__.

### 3- Intermediate Code (Bytecode) 
After creating the AST, the Interpreter comes into action and starts converting the AST into the intermediate code (commonly referred to as __bytecode__). This is not yet the machine code that the computer can directly execute, but a lower-level representation of the code that is closer to machine code than the original source code.

The Interpreter visits each node of the AST in a well-defined order. It starts from the root node and follows the tree hierarchy.

So now, you must be thinking, *__"Why do we need the Bytecode? Why not just convert the code directly to machine code?"__*

Bytecode is a low-level, platform-independent representation of the code. It can be generated once and executed on different platforms without the need for platform-specific compilation. 

This portability allows JavaScript code to run consistently across various devices and environments, making it suitable for web browsers and other JavaScript runtime environments.

*__Still with me? Bravo!__* 🚀

### 4- Call Stack, Execution Context and Memory Heap
__The Call Stack__ is a critical data structure that the JavaScript engine uses to keep track of the currently executing tasks. It plays a crucial role in managing the flow of function calls and their corresponding Execution Contexts. 

Throughout the interpretation phase, the engine creates an __Execution Context__ for each function call or block of code. The engine pushes it onto the __call stack__. 

The execution context represents the environment in which the code is executed and includes information such as variables, function arguments, the scope chain, and the value of the this keyword.

### Global Execution Context:
The first Execution Context that is created is the __Global Execution Context__. It represents the context in which the entire script runs and includes the global variables and functions. The Global Execution Context is created before any code is executed.

### Function Execution Context:
As the JavaScript engine encounters function calls during the AST interpretation, it creates __Function Execution Contexts__. These Function Execution Contexts contain information specific to the function call, such as local variables and arguments.

### Memory Heap
The engine manages the memory allocation for variables and objects in the __memory heap__. Variables are assigned memory addresses based on their data types and values. As the program runs, the engine updates the values of variables, manipulates data, and performs various operations based on the bytecode instructions.

I'am going to write a detailed article on the __Call Stack__ and __Memory Heap__ in the future. 🤞

__IMPORTANT NOTE ⚠️:__ *__The creation of the Execution Context is intertwined with the AST interpretation. The JavaScript engine creates the Execution Context at the beginning of the AST interpretation phase, specifically when it encounters function calls and global code during the traversal of the AST.__*

### 5- Profiling
During bytecode execution, the JavaScript engine employs a profiler to gather runtime information about the code's execution patterns.

Based on the profiling information, the JavaScript engine identifies the __hot paths__, which are sections of code that are executed most frequently and are potential candidates for optimization.

For example: I'm calling the sum function 100 times. So this function will be considered as a __hot function__. Cool name for a function btw :)

    const sum = (a, b) => a + b;
    for (let i = 0; i < 100; i++){
      console.log(sum(1, 2));
    }

### 6- Optimizing Compiler
Once the JavaScript engine finds the parts of your code that are used most often __(hot paths)__, it starts the __compilation process__. The optimizing compiler takes those hot paths, and transforms them into super-fast machine code, __specially tailored for your computer's hardware__.

This optimized machine code is way quicker than reading and interpreting the original bytecode. It's like a turbo boostt for your code.

The CPU directly executes this optimized machine code. Because it's fine-tuned for your computer's specific abilities, it runs much faster and gives your code a significant performance boost.

### 7- Deoptimize (Optional)
In some cases, the engine might encounter situations where the assumptions made during compilation no longer hold true. For example, the variable types can be changed. When this happens, the engine can deoptimize and fall back from the machine code to the bytecode, allowing it to reapply optimizations with updated information.

---

So, this was my attempt to explain the JavaScript Engine. If you didn't understand everything, don't worry! it often takes a few attempts before these concepts fully sink in, and that's perfectly normal. It took me a few weeks to grasp these ideas myself.

Understanding the JavaScript Engine and inner workings of the language empowers you to write efficient, and reliable code. It enables you to make better decisions, troubleshoot issues effectively, and see the bigger picture of how JavaScript truly works.

Happy hacking!

The browser does not understand JavaScript. It uses a JavaScript engine that reads and executes the source code so that the computer knows what to do.

What is a JavaScript Engine?

How The Heck JavaScript Works Behind The Scenes? What is a JavaScript Engine?

![Call Back](//images.ctfassets.net/awy0uwqcdbbl/DnMm0a6dfeDMcPiUrExQu/70b7bafd0a325eef5a684cca3edebb66/telephone-callback.jpg)
[Photo by Axel Grollemund](https://www.pexels.com/photo/person-holding-telephone-illustration-1122335/)

> A callback in JavaScript refers to a function that is passed as an argument to another function and is invoked or called at a later point in time.

In other words, it's a way of providing a function to be executed as a response to an event or as a completion of a task.

Callbacks are commonly used in __asynchronous programming__, where a function needs to wait for an asynchronous operation to complete before proceeding with its execution. Instead of blocking the execution, a callback function is passed to the asynchronous function. When the operation is finished, the callback is invoked, allowing the program to continue.

## A Simple Analogy
Imagine you're having a dinner party at your house. You want to prepare a delicious meal for your guests, but you also have other things to do, like setting the table, decorating the house, and welcoming your friends.

In this scenario:
- You (the main program) are responsible for organizing the party and overseeing everything.
- The tasks you need to complete (setting the table, decorating, etc.) are like the steps in your program that need to be executed.
- However, cooking the main course requires some time, so you assign it to a professional chef (an asynchronous operation) who will take care of preparing the dish.

Here's where the callback comes in:
- You provide the chef with instructions (the callback function) on what to do once the dish is ready. For example, you might ask the chef to notify you when the main course is cooked.
- While the chef is busy cooking, you can continue with other tasks, like setting the table or welcoming your guests.
- When the chef finishes cooking, they call you back (invoke the callback function) to let you know that the main course is ready.
- Upon receiving the callback, you can pause your current task, and then you shift your attention to serve the main course to your guests.

So, In the above analogy, you __(the main program)__ assign the cooking task to the chef __(asynchronous operation)__ and provide a __callback function__ (instructions) to be called back once the dish is ready.

Meanwhile, you can continue doing other things. When the chef finishes cooking, they invoke the __callback function__, allowing you to handle the cooked dish accordingly.

## Code Example

Let's look at an example that demonstrates an asynchronous callback in JavaScript using the ``setTimeout`` function:

```
function fetchData(callback) {
  // Simulating asynchronous operation
  setTimeout(function() {
    const data = { name: 'Jack', age: 23 };
    callback(data);
  }, 2000);
}

function displayData(data) {
  console.log(data);
}

fetchData(displayData);
console.log('Fetching data...');
```

In this example, we have the ``fetchData`` function that simulates an asynchronous operation, such as fetching data from a server. It takes a callback function as an argument. Inside ``fetchData``, we use ``setTimeout`` to introduce a delay of 2000 milliseconds (2 seconds) to simulate the asynchronous behavior.

After the timeout elapses, we create a data object and invoke the callback function, passing the data as an argument.

The ``displayData`` function serves as the callback. It receives the data as a parameter and simply logs it to the console.

Finally, we call ``fetchData(displayData)`` to initiate the asynchronous operation. We also log a message __'Fetching data...'__ immediately after to show that the program doesn't wait for the callback to complete.

The output will be something like this:

```
Fetching data...
{ name: 'Jack', age: 23 }
```

As you can see, the callback function ``displayData`` is invoked after the asynchronous operation (the setTimeout) finishes. This allows us to handle the fetched data asynchronously and perform actions based on that data when it becomes available.

## Wrapping Up
Callbacks are powerful because they allow us to write __asynchronous code__ that can respond to events or handle the results of __asynchronous operations__. They provide a way to control the flow of execution in situations where the order of operations is not guaranteed.

However, as JavaScript has evolved, there are now other alternatives to callbacks, such as __Promises__ and __async/await__, which provide more readable and structured ways to handle __asynchronous operations__. I'm excited to delve into these topics soon.

Any function that is passed to another function as an argument is called a callback function in JavaScript.

What are Callbacks in JavaScript - A Simple Guide

What are Callbacks in JavaScript? A Simple Guide

![Pathways merging](//images.ctfassets.net/477rv4nfg1ge/5CEOwhf5jAscFJgLP9l3ei/5a7297e990d3c1847dd6f20ba8465974/pathways.jpg)[Photo by Sean Pollock
](https://unsplash.com/@seanpollock?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

## What is Event Delegation
Event delegation in JavaScript is a technique that allows you to handle events on multiple elements by attaching a single event listener to their common parent element. Instead of adding event listeners to each individual element, you can take advantage of the event bubbling mechanism, where an event triggered on a nested element will "__bubble up__" through its parent elements.

## What is it's purpose?
The purpose of event delegation is to optimize performance and improve code organization. By using event delegation, you reduce the number of event listeners in your code, especially when dealing with a large number of elements. This can lead to better performance, as attaching fewer event listeners consumes less memory and processing power.

## How it works?
You attach an event listener to the parent element that contains all the child elements you want to handle events for. When an event occurs on one of the child elements, such as a click or a key press, the event bubbles up through the parent elements until it reaches the parent element where you attached the event listener. At that point, the event listener is triggered, and you can access information about the event and the specific child element that triggered it.

## Simple Analogy
Imagine you are organizing a party with multiple tables and chairs. You want to ensure that whenever someone sits on a chair, you can quickly respond and provide them with a drink. One way to handle this is by assigning a dedicated server to each chair. Whenever someone sits down, their server is responsible for bringing them a drink.

However, this approach can become cumbersome and inefficient if you have a large number of chairs. It would require hiring many servers and coordinating their actions. Instead, you decide to use event delegation.

With event delegation, you designate a single server who is responsible for all the chairs. Whenever someone sits on any chair, that person signals the designated server, who then brings them a drink. This way, you only need one server to handle all the chairs, making the process more streamlined and efficient.

In this analogy, the chairs represent the HTML elements on a webpage, and the act of sitting down corresponds to an event, such as a click. The servers represent event listeners, and the drinks represent the actions or code that should be executed when the event occurs. By using event delegation, you can optimize the handling of events on multiple elements, just as the single server efficiently attends to all the chairs at the party.

## Let's write some code
Let's say you have an HTML unordered list `ul` with several list items `li`, and you want to change the color of a list item when it is clicked.

HTML:

```
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

JavaScript:

```
// Get the parent element
const myList = document.getElementById('myList');

// Attach an event listener to the parent element
myList.addEventListener('click', function(event) {
  // Check if the event target is an 'li' element
  if (event.target.tagName === 'LI') {
    // Change the color of the clicked 'li' element
    event.target.style.color = 'red';
  }
});
```

In this example, instead of adding an event listener to each `li` element, we attach a single event listener to the parent `ul` element ('myList'). When a list item is clicked, the click event bubbles up through the parent elements until it reaches the `ul` element, where the event listener is triggered.

Inside the event listener function, we check if the event target (event.target) is an `li` element. If it is, we change the color of the clicked `li` element to red.

## When to use?
Using event delegation, you can dynamically add or remove child elements without worrying about attaching or detaching event listeners to each of them individually. This is especially useful when working with dynamically generated content or elements that are added or removed from the page dynamically.

## Benefits
- Attaching event listeners to a large number of elements can have performance implications, especially in cases where you have a substantial number of elements or the elements frequently change. Event delegation helps resolve this issue by reducing the number of event listeners, resulting in better overall performance.
- Each event listener consumes memory, so minimizing the number of listeners can help conserve memory resources. Event delegation allows you to handle events on multiple elements with a single listener, which is more memory-efficient compared to attaching listeners individually.
- Event delegation provides flexibility when you have elements with similar behavior nested within different parent elements. Instead of attaching separate listeners to each parent, you can attach a single listener to a shared ancestor and handle events for all the relevant elements.
- When you dynamically create or remove elements in your web application, event delegation allows you to handle events on these elements without explicitly attaching event listeners to each one. This is particularly beneficial when dealing with elements added or removed from the DOM dynamically.

## Wrapping Up
Event delegation allows you to handle events on multiple elements efficiently by attaching a single event listener to their common parent. It simplifies code management, improves performance, and enables handling of dynamically generated or changing elements.


Event delegation in JavaScript is a technique that allows you to handle events on multiple elements by attaching a single event listener to their common parent element.

Minimal Tree

Event Delegation - A Simple Approach to JavaScript Event Handling

![Photo by <a href="https://unsplash.com/@seanpollock?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sean Pollock</a> on <a href="https://unsplash.com/photos/PhYq704ffdA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>   ](//images.ctfassets.net/awy0uwqcdbbl/3ORKgaEPnXp9fLZtDd9ch3/4a0c69c489bcc7b8ebd7278296f58ae8/sean-pollock-PhYq704ffdA-unsplash.jpg)

Building Projects is a hands-on approach to learning web development that involves creating real-world projects from start to finish. 

This method is highly effective because it allows you to apply the concepts and techniques you learn in a practical, meaningful way. 

By building projects, you can see the results of your efforts and gain a deeper understanding of how web development works.

Here are some of the reasons why I want you to start building projects today:

## Boost Confidence
When you build projects and see them through to completion, It gives you a __boost__ in your confidence and give you a sense of achievement. It will help you to __level up__.
It can also motivate you to continue learning and developing your skills.

When you complete a project, you have the opportunity to see the results of your work and see how your skills and knowledge have translated into a real-world application. This can give you a sense of accomplishment and help you feel more confident in your abilities as a developer.

## Improves Problem-solving skills
As web developers, Our job is to figure out complex problems and find creative solutions.

By building projects, Your problem-solving skills can be improved and it can help you to think critically and creatively.

It allows you to tackle challenges and overcome obstacles. As you work through problems and find solutions, you can develop your problem-solving skills and feel more confident in your ability to handle challenges as a developer.

## Increases the chances of getting hired
One of the biggest benefits of building projects is that it gives you the chance to showcase your work and demonstrate your skills to potential clients or employers. 

By building a portfolio of projects that showcases your abilities, you can make yourself more attractive to potential employers or clients and increase your chances of getting hired or landing new projects. It makes you feel more prepared to tackle new challenges or projects.

## Mindset
Building Projects is not just about learning technical skills. It's also about developing the mindset and habits of a successful web developer. 

By working through the challenges and problem-solving involved in building projects, you'll learn how to think critically, work collaboratively, and stay motivated and focused.

## Collaboration
When you build projects, you get the chance to receive feedback from other developers, which can help you improve your skills and grow as a developer.

It allows you to learn how to work in teams and collaborate with others, which is an essential skill in the field.

When you collaborate with other developers, It exposes you to different viewpoints and approaches to problem-solving, which can help you expand your knowledge and perspective as a developer.

So if want to master web development and set up your dream career, give building Projects a try. it's the top-rated learning method for aspiring web developers.

I hope this article has convinced you of the value of building projects as a learning method for web development. Whether you're just starting out or looking to take your skills to the next level, Building Projects is a powerful way to learn, grow, and succeed in the world of web development.

Are you ready to take your web development skills to the next level? If so, Building Projects is the perfect learning method for you.

Photo by Ivan Samkov: https://www.pexels.com/photo/high-angle-view-of-woman-writing-in-notebook-4240587/

Master Web Development with Building Projects - The Top-Rated Learning Method

HTML is a powerful markup language which can be used to give our web applications structure. Learn more about HTML5 [here](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics "here")

In this article, I'll show you 5 rare HTML Tags that probably you have never heard of. While they might be less familiar to you but they're still quite useful and you can create more structurally-sound web applications with the help of them.

## 1- DATALIST
This tag specifies a list of predefined options for an INPUT element.

![Datalist tag](//images.ctfassets.net/awy0uwqcdbbl/33poSYqFEoc8oC6H9HxMI7/5813db3ff3d055965b51b79eaecd456d/EvuL0AfXYAEI--i.jpg)

## 2- TEMPLATE
Use this tag to hide some content when the page loads. It can be made visible later using JavaScript.

![template-tag](//images.ctfassets.net/awy0uwqcdbbl/5SegEAuLy3YJUPpeTCpnob/4c7099c72447df3fa898ffae39ee8b3a/EvuNJhlXEAIbi7r.jpg)

## 3- METER
This tag can be used to measure data within a given range. You can use this tag to display disk usage statistics.

![meter-tag-code](//images.ctfassets.net/awy0uwqcdbbl/1bDGG3dcu0CdPgz6YzMb05/c8b20d4fa217ca7848517aae86bf765c/meter.jpg)

## 4- TIME
This tag defines a specific or human-readable time. It helps search engines to produce smarter search results.

![time-tag-code](//images.ctfassets.net/awy0uwqcdbbl/6CdCSsL80yFjUMw0iNWF8S/26aec9716cad7475d13b8432561495c3/time.jpg)

## 5- OPTGROUP
This tag is a great way to add group related options in a SELECT element (drop-down list).

![optgroup-tag-code](//images.ctfassets.net/awy0uwqcdbbl/21bouzXSSNd4iY1NYRvkPY/a2df6360c8a3b370c5caea767df5ccac/optgroup.jpg)

HTML is a powerful markup language which can be used to give our web applications structure...

Hero-Image

5 HTML tags you might not know!

Many of us lack "conceptual clarity" because instead of learning well, we are too focused on learning things fast.
## What is a concept?
A concept is a formed idea which is framed in such a way that it can be explained to "myself" and to others

My natural assumption is that my personal explanation of the idea is clear and since it is instinctively clear to me I may assume that it is already formed.

But what if someone comes along and ask, "Why?" I might be unable to answer that appropriately because I have not formed that idea to the point where I can explain the "Why" to myself.

Once I can explain the concept to myself, I have conceptual clarity and I am in a position to explain it to others in a way that makes sense.

Many of us lack "conceptual clarity" because instead of learning well, we are too focused on learning things fast.

Saad Baig

Saad Baig

Blog

My Journey from Frontend Developer to Full Stack Developer

How The Heck JavaScript Works Behind The Scenes? What is a JavaScript Engine?

What are Callbacks in JavaScript? A Simple Guide

Event Delegation - A Simple Approach to JavaScript Event Handling

Master Web Development with Building Projects - The Top-Rated Learning Method

5 HTML tags you might not know!

What is Conceptual clarity?

Saad Baig

Recent Post