Forem: Ruhamah Eti

How JavaScript works behind the scene

Ruhamah Eti — Mon, 05 May 2025 01:14:54 +0000

The JavaScript engine interprets the JavaScript code and executes it. The JavaScript engine contains a Call Stack and a Heap. The Call Stack is where the code is executed, while the Heap is an unstructured memory space that stores all the objects.

Just-in-Time Compilation
Because computers understand only binary, JavaScript code must be translated into binary. JavaScript uses Just-In-Time (JIT) Compilation, where the source code is compiled and immediately executed. This approach helps improve performance by combining the benefits of both interpretation and compilation.

Execution Context
The execution context contains the code that is currently running and everything that aids in its execution. There are two types of execution context. We have the Global Execution Context (GEC) and the Function Execution Context (FEC).
The Global Execution Context is the default execution context where all JavaScript code that is not inside a function is executed. For every JavaScript file, there can only be one GEC.
Whenever a function is called, the JavaScript engine creates a different type of execution context — the Function Execution Context — within the GEC to execute the code inside that function.
Each execution context contains:
. The current code being executed
. Variable and function references
. The scope chain

The Call Stack
The Call Stack is a data structure that keeps track of where in the code we are. It records, in Last-In, First-Out (LIFO) order, which function is currently being executed.
Whenever a function is invoked, it is pushed onto the call stack. When the function finishes executing, it is popped off the call stack.
This allows the JavaScript engine to keep track of nested function calls and resume execution in the right place.

Callback Queue
The Callback Queue is a FIFO (First-In, First-Out) data structure that stores all callback functions — such as those from asynchronous tasks like setTimeout, DOM events, or HTTP requests. These callbacks wait for the Call Stack to be empty before they can be executed.

Event Loop
The Event Loop continuously checks the Call Stack and the Callback Queue.
If the call stack is empty (i.e., no function is currently running), the event loop takes the oldest callback from the queue and pushes it into the call stack, where it gets executed.
This mechanism enables JavaScript, which is single-threaded, to handle asynchronous behavior such as events, timers, and API calls without blocking the main thread.

[Boost]

Ruhamah Eti — Mon, 28 Apr 2025 14:14:15 +0000

Ruhamah Eti

Apr 28 '25

Form validation and responsive web design

#webdev #programming #beginners #frontend

Comments

1 min read

Form validation and responsive web design

Ruhamah Eti — Mon, 28 Apr 2025 12:56:43 +0000

What I Learned from This Project

Responsive Web Design:
I learned about responsive web design — making web pages adapt to all screen sizes, from mobile to desktop. For my project, I used a mobile-first approach, where I initially designed the layout to stack content vertically for smaller screens, as shown below:

Then, using media queries with min-width, I adjusted the layout for desktop screens to match the cover picture design. Here’s a screenshot showing part of the code:
HTML Constraint APIs for Forms:
I learned about HTML Constraint Validation APIs, which include attributes like , , minlength, maxlength, required, and more. These attributes define rules and guidelines for user input in form fields, helping prevent invalid data submission.
Form Validation Using JavaScript:
I learned how to perform form validation using JavaScript to ensure that the data collected from users is accurate and complete. JavaScript validation offers more control over the validation process and allows for custom error handling.
Regular Expressions (Regex):
I learned about regular expressions (regex), which are sequences of characters that define a search pattern. Regex is especially useful for form validation — for example, checking if an email input matches the correct format.

Using JavaScript form validation along with regex, I was able to achieve the result shown in the image above.

Semantic HTML and responsive web design

Ruhamah Eti — Wed, 26 Mar 2025 14:17:15 +0000

Things I learned today while working on this design:

Adding font size using Google Fonts: I discovered two methods for adding font to my project through Google Fonts: one by using a link, and the other by importing it with CSS.
CSS Variables: CSS variables are helpful for avoiding repetition in code. For example, if you have six article tags with different IDs but want to apply the same text color (black) to all, instead of writing 'color: black;' multiple times, you can create a CSS variable and reference it wherever needed.
Semantic HTML: Semantic HTML involves using tags that clearly define the content they contain, making the code easier to understand for both developers and search engines. It also improves website accessibility for users with disabilities, as screen readers and other assistive tools can better interpret the content's meaning. Examples of semantic tags include header, nav, figure, article, and others.