Shadow DOM Guide: Encapsulation with JavaScript

#Day 59/100 – What Happens Before Your Page Loads in JavaScript? Today I learned something surprising… JavaScript actually runs before the page fully loads on the screen. I always thought: Browser loads HTML → then CSS → then JavaScript. But reality is more interesting 👇 When the browser reads HTML, it doesn’t wait till the end. The moment it finds a <script> tag, it stops building the page and executes JavaScript immediately. This process is called parsing + blocking execution. So the flow becomes: HTML reading ➝ sees JS ➝ pause ➝ run JS ➝ continue building page That’s why sometimes: • Page looks blank for a second • Buttons don’t appear instantly • UI feels slow Because JS is literally interrupting the page construction. 💡 Important concepts I understood today: 🔹 Rendering – browser drawing UI 🔹 Parsing – browser reading HTML line by line 🔹 Blocking scripts – JS pauses page creation 🔹 defer & async – solutions to avoid blocking Big realization: Bad script placement can make a fast website feel slow. Good script placement can make the same website feel instant. Small detail… huge impact. Every day I learn — frontend is not just coding, it’s understanding how the browser thinks 🧠 #100DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #CodingJourney

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝗲𝗿𝗶𝗲𝘀 – 𝗗𝗮𝘆 𝟭𝟬: 𝗜𝗻𝘁𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝘁𝗼 𝗗𝗢𝗠 (𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 𝗢𝗯𝗷𝗲𝗰𝘁 𝗠𝗼𝗱𝗲𝗹) The DOM allows JavaScript to interact with HTML elements. It represents the structure of a web page so JavaScript can read, change, and control content dynamically. 𝗪𝗵𝗮𝘁 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗮𝗻 𝗗𝗼 𝗨𝘀𝗶𝗻𝗴 𝗗𝗢𝗠  • Access HTML elements  • Change text and HTML content  • Change styles and attributes  • Respond to user actions 𝗦𝗲𝗹𝗲𝗰𝘁 𝗮𝗻 𝗘𝗹𝗲𝗺𝗲𝗻𝘁 document.getElementById("title"); 𝗖𝗵𝗮𝗻𝗴𝗲 𝗧𝗲𝘅𝘁 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 document.getElementById("title").innerText = "Hello JavaScript"; 𝗖𝗵𝗮𝗻𝗴𝗲 𝗦𝘁𝘆𝗹𝗲 document.getElementById("title").style.color = "blue"; 𝗞𝗲𝘆 𝗣𝗼𝗶𝗻𝘁𝘀  • DOM connects JavaScript with HTML  • Changes happen instantly on the page  • DOM manipulation is the foundation of frontend development 𝗧𝗼𝗱𝗮𝘆’𝘀 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲  • Create an HTML element with an id  • Change its text using JavaScript  • Change its color or background Next, we continue with Events and Event Handling in JavaScript. #JavaScriptSeries #Day10 #LearnJavaScript #DOM #JavaScriptBasics #FrontendDevelopment #CodingJourney #techgian

𝐇𝐨𝐰 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐬 𝐥𝐨𝐚𝐝𝐞𝐝 𝐢𝐧 𝐇𝐓𝐌𝐋 𝐜𝐚𝐧 𝐚𝐟𝐟𝐞𝐜𝐭 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞, 𝐫𝐞𝐥𝐢𝐚𝐛𝐢𝐥𝐢𝐭𝐲, 𝐚𝐧𝐝 𝐞𝐯𝐞𝐧 𝐰𝐡𝐞𝐭𝐡𝐞𝐫 𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 𝐰𝐨𝐫𝐤𝐬 𝐚𝐭 𝐚𝐥𝐥. This is something I properly understood recently, and it made me realize that script loading isn’t just a small detail we can ignore. Before now, based on how I was initially taught, I used to place script tags at the bottom of my HTML file just before the closing body tag so the HTML would load first before JavaScript runs. While that approach works, I recently learned that there are actually structured and more optimized ways browsers handle script loading. There are three different ways to add JavaScript to an HTML page,  • The regular method • The async method • The defer method and each one behaves differently in the browser. The regular script method pauses HTML parsing to download and execute JavaScript, which can slow down rendering and sometimes lead to issues when the DOM isn’t ready. Using async allows JavaScript to download while HTML continues parsing, but it runs as soon as it’s ready, making execution order unpredictable and unsuitable for scripts that depend on the DOM. The defer method stood out as the most recommended option because it downloads scripts alongside HTML, waits until the DOM is fully parsed, and executes scripts in order, making it both performant and reliable for most applications. This is another reminder that writing good JavaScript isn’t only about syntax, but also about when and how the browser runs it. #JavaScript #WebDevelopment #Frontend #LearningInPublic #TechJourney #Growth

#Day 58/100 – Why JavaScript is Single-Threaded (and why that’s actually powerful) ⚡ When I first heard “JavaScript is single-threaded” I thought… Wait — only one thing at a time? Isn’t that slow? But today I understood something important. JavaScript being single-threaded is not a weakness. It’s the reason the web feels smooth. Imagine editing a form and suddenly the page freezes because 5 things run at once. That would be chaos. Instead, JavaScript follows a rule: Do one thing clearly, finish it, then move to the next. This makes UI predictable and prevents race conditions. But then how do videos load, APIs fetch data, and timers run? Because the browser handles heavy work in the background and JavaScript handles the result when it’s ready. So JS stays simple. The browser stays powerful. Big realization 💡 JavaScript isn’t trying to do everything at once — it’s trying to do everything in order. And that’s why websites don’t constantly break. Today I stopped thinking “single-threaded = limitation” Now I see “single-threaded = stability” #100DaysOfCode #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment #CodingJourney

Parser-blocking JavaScript is often an overlooked issue in frontend performance. When the browser encounters a synchronous <script> tag: • HTML parsing pauses • DOM construction stops • Script executes • Rendering is delayed This issue can easily be missed, but it is measurable in DevTools. I conducted an experiment, recorded the Performance trace, and documented how using defer alters the entire timeline. The difference is immediate and visible. #WebPerformance #JavaScript #FrontendDevelopment #HTML

Mastering the DOM in JavaScript | Manipulating HTML & CSS Like a Pro (EP 05) Want to truly understand how websites become interactive? In this episode, we break down the Document Object Model (DOM) and show you how JavaScript can dynamically manipulate HTML and CSS to create powerful, responsive web experiences. In this tutorial, you will learn: ✔ What the DOM is and how it works ✔ How to access elements using getElementById() and querySelector() ✔ How to change text and HTML content dynamically ✔ How to create and remove elements ✔ How to modify CSS styles using classList and style ✔ How to handle user events with addEventListener() ✔ Build a simple dynamic To-Do List project This video is perfect for beginners and intermediate developers who want to strengthen their frontend development skills and understand how JavaScript interacts with web pages behind the scenes. By the end of this tutorial, you’ll be confident manipulating the DOM to build interactive and modern web applications. 🚀 Subscribe for more web development tutorials 💬 Comment your questions below 👍 Like and share if this helped you #JavaScript #WebDevelopment #FrontendDevelopment #DOM #Coding #Programming #FullStackDevelopment

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 JavaScript adds behavior to a website. It works with HTML and CSS. HTML is the structure, CSS is the design. Brendan Eich created JavaScript in at Netscape. He made it in just 10 days. It was first called Mocha, then LiveScript, and finally JavaScript. You may wonder how JavaScript code runs in the browser. Here's a simple flow: - Our code is written - It runs in the browser JavaScript code is both compiled and interpreted. This is called Just-In-Time compilation. It helps improve performance. Google Chrome's V8 and Firefox's SpiderMonkey use this method. They compile JavaScript code into native machine code during execution. Understanding how JavaScript works helps you write efficient code. It plays a major role in modern web development. Source: https://lnkd.in/dTkJA9Ze

HTML and CSS Projects with Source Code | JavaScript Quote Generator Build a powerful HTML, CSS, and JavaScript Quote Generator step by step in this complete beginner-to-intermediate frontend tutorial. In this project, you’ll learn how to create a random quote generator using API, handle async await in JavaScript, design a modern UI, and structure a real frontend project with source code. This tutorial is perfect for developers looking for: ✔ quote generator javascript project ✔ random quote generator using api ✔ html css javascript quote generator ✔ async await javascript project ✔ how to make frontend project step by step ✔ modern javascript project idea ✔ javascript practice project ✔ 30 js projects ✔ 30 javascript projects in 30 days ✔ html css javascript projects playlist ✔ how to create api in javascript ✔ app development using html css and javascript ✔ api project using html css javascript ✔ how to make frontend project ✔ js projects for beginners and intermediate developers By the end of this video, you’ll have a fully working quote generator app and a clear understanding of API fetching, JavaScript async/await, DOM manipulation, and modern UI design—skills every frontend developer must know. 💻 Perfect for: Beginner web developers, JavaScript learners, and anyone building real-world portfolio projects. 📌 Don’t forget to like, comment, and subscribe for more HTML CSS JavaScript projects and the full 30 JavaScript Projects in 30 Days series. #javascript #htmlcss #webdevelopment #javascriptprojects #frontenddevelopment #codingforbeginners #30jsprojects https://lnkd.in/gNwdFYFE

🚀 New blog post published! Using WebAssembly in Modern JavaScript Projects: A Comprehensive Guide Discover how to integrate WebAssembly into modern JavaScript projects to boost performance, enhance functionality, and build faster web applications. Learn the benefits, use cases, and step-by-step implementation. 👉 Read more: https://lnkd.in/dGyg3Vpx #WebAssembly #JavaScript #WebDevelopment #PerformanceOptimization #WebAssemblyVsJavaScript

Day 60 – JavaScript Basics & Script Integration Today I focused on understanding JavaScript fundamentals and its importance in web development as a scripting language used to add interactivity and dynamic behavior to websites. Topics covered: JavaScript Overview JavaScript as a scripting language Its role in both front-end and back-end development Importance in modern website development Using JavaScript in HTML Linking external JavaScript files using the <script> tag with the src attribute Safe script placement after CSS linking or at the end of the <body> to ensure proper execution and avoid loading issues Understanding internal scripting using <script></script> within HTML Execution & Usage Running HTML files directly for testing Using JavaScript mainly for handling events such as button clicks, animations, form validation, sliders, and other user interactions These concepts are essential for building interactive, responsive, and user-friendly web applications while maintaining clean and structured code. A solid step forward in strengthening core JavaScript knowledge. Continuing the learning journey with consistency and focus. #JavaScript #WebDevelopment #FrontendDevelopment #ScriptingLanguage #HTML #CSS #LearningJourney