DEV Community: Tanishq Kr. Kaushal

What the hell is this Execution Context?!

Tanishq Kr. Kaushal — Sat, 24 Sep 2022 13:47:57 +0000

JavaScript has quite the reputation for being the most popular language in the world, and 98% of world's websites use JavaScript as their main source of development for either front, end or both ends.

But how does JS functions under the hood to be this popular and powerful?

It is all possible because of the JavaScript runtime environment, which contains many functionalities and tools which contains the call stack, the event loop, callback queue, microtask queue, a collection of web APIs. More on that JS runtime env.

Inside the call stack, the code is executed one function at a time. Every time code is executed an Execution context is created with it.

An execution context is a virtual environment which includes 2 parts, the variable environment (memory) & Thread of execution (Code)

Variable Environment:

The values inside the this are stored as key:value pairs registering all the variables and functions inside the code. The variables are stored as the variable itself, and same with the functions, it stores functions as a whole no matter the size, there are indeed certain exceptions, but overall functions are stored as whole inside the Execution context as a whole.

Thread of Execution:

Inside this all the functioning happens, the code is executed line by line, since JS is a single threaded language, it can only execute one command of line at once.

Here's my poorly drawn adaptation of an Execution context:

The process:

JS skims through the code twice, in the first run, it registers all the variables and functions. Functions are registered as they are, but in case of variables, they are stored as 'undefined'. It means we can access the variable prior to it being defined but it'll return undefined.

for ex:

console.log(a);
var a = 10;

This is a valid code in JS it'll log undefined in the console, but do take note this is only possible in ONLY the case of var and not let/const. That's one of the differences between var, let and const. This phenomenon to access variables prior to their declaration is hoisting, more on that in another blog.

On the second run it executes the code line by line and every time there is a variable is defined, it updates the value of that variable from undefined to the value inside the variable environment.

Once the execution is completed, the Execution context is popped off the call stack.
At the base, every time the code is run, the Global Execution context is created, and every Execution context after that is on top of it.

And that is how the code is executed inside the JS runtime, but this is only the tip of the iceberg, there are a LOT of tools inside the JS Runtime that plays a role in executing code!

Hope you liked! :)

My personal practice while building websites.

Tanishq Kr. Kaushal — Wed, 01 Jun 2022 18:50:45 +0000

If you're reading this, there's a 40% chance you're a front-end web developer, you might be a student, just getting into the field, or you might be an expert for 10+ years, one thing every single beginner front-end web developer and programmers in general, struggle is how to start that development process!
Of course we'll write the HTML first and do everything AFTER that, but still, we've got parts to design a site, HTML, CSS and JS, plus managing those 3 in order to keep the code clean and the site fast and that management is what troubles most new developers.
Every single developer out there has their own personal development procedure, and there is no wrong or right, it's totally subjective depending on what you prefer.
I'm here to share my own design and development system, which I feel might be useful if you get confused in what to do first.

Note: This procedure is recommended considering you're a beginner, you probably do now know a framework, you're getting your way around the holy trinity (HTML,CSS and JS) right now.

Initial data collection

Initialize by creating a project folder in a proper directory and not your desktop.

The first step that I take is collect all the data required for the website, this includes the images, audios, videos, backgrounds, patterns, the UX design and what not. Just everything you'll put inside the site or use as reference. Put all that inside a new folder named 'assets'. With this, you're done with your first step towards building the website.

Create the files

Now when you've collected the data, it's time to move on to the coding part, to start you'll have to create some files:

index.html
style.css
theme.css
selectors.js
script.js

These files are regarding a single page website. For the multi-page websites, I'll explain later.

index.html, you guessed it, the main page, the greeting webpage to the user.
style.css the style of that page, it'll include the the styling of particular elements in the page.
theme.css, is as it sounds, the theme of the website, here you'll define the :root variables, like theme colors, and border radius, the fonts throughout the website, any other themed element like scrollbar and other stuff, which is totally variable and could be changed in future without any hassles of going through the entire code again.
selectors.js, these includes all the document.querySelector() etc variables, the selectors stored inside variables to use inside the,
script.js file, the main JavaScript file, the logic to your website.
Having a selector file keeps your JS file clean and readable, and all you've to worry about is the code and not the selectors, because they're stored safely inside a different file.
So far, your project folder should look like this:

Coding the website

This is the fun part because we finally start the actual development.
Start off with the index file, put all the data inside, from the header icons and links, to the footer logo, everything, text, links, images, icons, purely in their original state, don't add any inline CSS or any script or CSS in the head or anywhere in the HTML, leave the HTML to be HTML.
Add the head files, add theme.css above style.css and selectors.js above script.js.
Now when you've thrown all the content inside your html file, it's time to start the styling, from the header to the footer, use a top to bottom approach and give everything the styles, the colors, sizes, background and everything, don't add the hover and clicking effects yet, leave them for later.
Now when we've completed the styling and our website looks like a static webpage, we're going to add the hover and click effects, and finally after that, comes to responsiveness. Add media queries to your website and make it functional.

Till this, you've a static and good looking webpage in your hand, now comes the JS, take all the classes and ids you think you'll use to manipulate the DOM, put them all in the selectors file. And finally start giving logic and functionality to your webpage by working on the script file.

If you've a multiple page website, what you should do it after coding the html of all those other pages, link the theme to them as well, and then give separate style sheets, try to have similar looking elements throughout your site, reusable content and a design system to reduce your styling process.

And that, is my personal procedure before starting a project with the holy trinity, hope you liked it!

First commit!

Tanishq Kr. Kaushal — Wed, 25 May 2022 06:26:15 +0000

Hey there everyone!

I'm Tanishq Kaushal, a budding and aspiring web developer, currently I'm polishing my JavaScript skills and getting better at design patterns and writing clean code. This is my first post in dev.to and I'm glad to be here among such wonderful and supporting developers!

Since I'm new to this platform, let me give out my portfolios and contact details for collaboration and projects!

✏️My Portfolio!
🐈‍⬛My GitHub!
🐤My Twitter!
📷My Instagram!

Make sure to check out my resume and comment your review!