JavaScript Web APIs Explained

𝗧𝗵𝗲 𝗦𝗲𝗰𝗿𝗲𝘁𝘀 𝗢𝗳 𝗝𝗮𝗵𝗮𝗦𝗰𝗿𝗶𝗽𝘁 When you write JavaScript code, it may seem like magic. You write a few lines, open your browser, and things work. But have you ever wondered what happens behind the scenes? Here's what you need to know: - The browser uses a JavaScript Engine to execute code. - The engine uses a Call Stack to keep track of tasks. - The Memory Heap stores variables and objects. - Web APIs handle long-running tasks like timers and HTTP requests. - The Callback Queue waits for tasks to finish. - The Event Loop moves tasks from the queue to the stack. The JavaScript Engine is like a worker who executes tasks. The Call Stack is like a desk where tasks are placed. The Memory Heap is like a storage room for variables and objects. When you use setTimeout, the browser hands the task to a Web API. The API handles the timer outside the main JavaScript thread. Once the timer finishes, the result goes into the Callback Queue. The Event Loop checks if the Call Stack is empty and if there are tasks waiting in the queue. If both conditions are true, it moves the next task from the queue to the stack. JavaScript runs on a single thread, but it appears to do many things at once due to Web APIs, callback queues, and the event loop. Understanding how JavaScript works internally helps you write better code and debug issues. Source: https://lnkd.in/gQCiPget

If JavaScript was originally designed to run in browsers… how are we able to run it outside the browser using Node.js? Most people first encounter JavaScript inside the browser console. The browser downloads a JS file and executes it using a JavaScript engine (like V8 in Chrome). That engine reads the code and runs it line by line. But the browser is not the language itself. JavaScript is just a programming language. What actually runs the code is a JavaScript engine. Node.js simply takes the same JavaScript engine (V8) and runs it outside the browser. So instead of executing JavaScript inside Chrome, Node.js allows us to execute JavaScript directly on our computer. This means JavaScript is no longer limited to client-side work. With Node.js we can build servers, APIs, CLI tools, automation scripts, and backend applications. In simple words: • Browser = Environment to run JavaScript for web pages • Node.js = Environment to run JavaScript outside the browser But there is an important difference between running JavaScript in the browser console and running it in Node.js. Browser JavaScript environment provides APIs related to the web page such as: • window • document • DOM manipulation • alert() • localStorage These APIs exist because the browser is designed to manage web pages. Node.js, on the other hand, provides APIs related to the operating system and server environment such as: • file system (fs module) • path handling • process information Because of this, code that manipulates the DOM will work in the browser but not in Node.js. Example: document.getElementById("title") This works in the browser because the browser has a DOM. But in Node.js there is no DOM, so this code will not work. Instead Node.js gives access to things browsers do not allow, like reading files: const fs = require("fs") This difference is the key idea: Browser JavaScript focuses on interacting with the webpage. Node.js focuses on interacting with the system and building backend applications. Same language. Different environments. #javascript #nodejs Hitesh Choudhary Chai Aur Code #chaicode #chaiaurcode

One thing that becomes clear when moving from Vanilla JavaScript to React is how much more intentional the file structure becomes. In Vanilla JavaScript, many small projects can be built with just: index.html style.css script.js However, React applications benefit from a more structured approach. While converting one of my Vanilla JavaScript projects into React using Vite, I found a pattern that keeps the codebase organized and scalable. A typical structure separates responsibilities into different areas: • Components – reusable UI elements such as buttons, navigation bars, dropdowns, and carousels. These are usually written with props or children to maximize reusability. • Sections / Pages – these represent the major sections or routes of the application, such as HeroSection or ContactPage. • Services – responsible for interacting with external systems like APIs. These files usually contain pure JavaScript logic and return data to the rest of the application. • Hooks – act as the bridge between services and components, managing application logic such as loading states, error handling, and successful data responses. One small detail that stood out while using Vite is how environment variables are accessed: "import.meta.env" This differs from Create React App, which uses "process.env". Structuring applications this way helps keep UI components focused on rendering, while data logic and side effects are handled elsewhere. It's a simple approach, but one that makes React projects significantly easier to maintain as they grow.

This article by Bhavin Sheth discusses how to effectively create a browser-based image converter using JavaScript, addressing the common need for image format conversion among developers. I found it interesting that such a simple tool can enhance performance and optimization in web applications. What are some small yet impactful tools you've built or used in your projects?

The differences in the JavaScript execution context between a browser and Node.js are explained clearly in this article. It provides a simple yet comprehensive overview of how these environments operate differently. If you're interested in understanding this topic better, it's worth a read. https://lnkd.in/gG3fiViZ

That "click" isn't as simple as you think. Most developers assume a click starts and ends at the button. It doesn't. Every interaction on your site triggers a high-speed "round trip" through your DOM tree that most people never see. If you’ve ever had a bug where the wrong element triggered or a menu closed unexpectedly, you’ve met the Event Lifecycle. I’ve broken down the 3 hidden phases of this journey—and how to control them—in my latest post. Thanks to Suraj Kumar Jha for the assignment. link : https://lnkd.in/gHV7bu5e #chaicode #javascript #webdevalopment

Is Vanilla HTML, CSS, and JavaScript Dead? Absolutely not. But the habit of critical thinking before picking a tech stack seems to be on life support. Too many developers blindly jump onto heavy frameworks like React simply because it's the current industry default. They skip the vital factor checks, defaulting to massive JavaScript bundles to build what are essentially static 5-page brochures. It’s the equivalent of using a sledgehammer to crack a walnut it gets the job done, but it creates an unnecessary mess. Why must you evaluate before picking a stack? Because the stack dictates the product's entire lifecycle. Unnecessary frameworks introduce bloated bundle sizes, slower load times, fragile dependencies, and expensive technical debt that the client eventually has to pay for. The Power of the Basics Sometimes, going back to pure HTML, CSS, and vanilla JS is the ultimate professional move. It offers unmatched speed, simplicity, and longevity for content-heavy or static projects. I recently helped a technical team audit the architecture for a client's portfolio site. The initial proposal was a complex, overkill React application. I advised pivoting back to raw HTML, CSS, and JavaScript. The result? Blazing-fast load times, flawless SEO out of the box, and a client who won't have to pay a developer just to update NPM packages next year. Don't let framework hype dictate your builds. Let the project's actual needs make the call. hashtag #webdev #webdevelopers #frontenddev #frontendEngineer

What Really Happens When We Run ng serve and Open localhost:4200 ? First, you run ng serve. When you run ng serve, Angular CLI reads your project configuration from angular.json. In Angular 17+, it looks for: "browser": "src/main.ts" → the application entry point "sourceRoot": "src" → the base source folder If index is not explicitly defined, the new application builder automatically assumes src/index.html as the root HTML file. Then the build process starts. During compilation, TypeScript files are converted into JavaScript because browsers only understand JavaScript. All modules are bundled into optimized files like main.js, polyfills.js, and other supporting chunks. In development mode, these files are served from memory by the dev server. After building, Angular CLI starts a development server on port 4200. At this stage, the application is compiled and ready, but nothing has executed in the browser yet. Now you open http://localhost:4200 in the browser. The browser sends a request to the local development server. The server responds with the processed index.html file (resolved from src/index.html by default). During the build process, script references to the generated JavaScript files were injected into this HTML file. When the browser loads index.html, it also loads those JavaScript bundles. When main.js loads, it runs the compiled version of main.ts. Inside main.ts, Angular bootstraps the application using: platformBrowserDynamic().bootstrapModule(AppModule) or bootstrapApplication(AppComponent) in standalone apps. Angular initializes the root module or root component and looks for its selector inside index.html — usually <app-root>. Angular then replaces <app-root> with the rendered template of the root component. At this point, the Angular application is running completely inside the browser. Routing, change detection, API calls, and UI updates all happen without full page reloads. In short: ng serve- builds the app and starts the dev server. Opening localhost:4200 loads index.html, executes main.js, and starts the Angular application in the browser. Read my medium article, I write about Angular and JavaScript. https://lnkd.in/ggmhXdvA #angular

hougaard.com New Post: Add a javascript control in AL - https://lnkd.in/gBzqPn8N In this video, I’ll show how to use a “random” Javascript control inside Business Central. I show the entire process from downloading till it works inside BC. https://lnkd.in/gSHyHsPe In this video, Erik demonstrates how to take a JavaScript control found on the internet and integrate it directly into Business Central using AL control add-ins. Rather […]

𝗧𝗵𝗲 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗡𝗮𝘁𝘂𝗿𝗲 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 When you start writing JavaScript, it seems simple. Code runs from top to bottom, line by line. But then you learn about timers like setTimeout and setInterval. Things get weird. You find out JavaScript is single-threaded. It can only do one thing at a time. Think of a fast-food restaurant with one cashier. This cashier is like the Call Stack. It does things in the order they were received. If a function takes too long, it won't freeze your app. But how does it work? There are key players: Web APIs, the Callback Queue, and the Event Loop. JavaScript doesn't have built-in tools for long tasks like network calls. The environment, like a browser or Node.js, handles these tasks. Web APIs handle tasks in the background. When done, they add the result to the Callback Queue. The Event Loop checks the Call Stack. If it's empty, it moves the first task from the Queue to the Call Stack. There are two types of Callback Queues: Macro Task Queue for timers and Micro Task Queue for promises. Over time, async code in JavaScript evolved. We used callback functions, then promises, and now async/await. Async/await makes async code look sync. You declare a function with async and use await to pause it. This lets other code run, making it non-blocking. JavaScript is single-threaded, but the Event Loop and environment give it async superpowers. Source: https://lnkd.in/gERccB3C