HTML Parsing Explained: DOM Construction and JavaScript Impact

#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

𝐇𝐨𝐰 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐬 𝐥𝐨𝐚𝐝𝐞𝐝 𝐢𝐧 𝐇𝐓𝐌𝐋 𝐜𝐚𝐧 𝐚𝐟𝐟𝐞𝐜𝐭 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞, 𝐫𝐞𝐥𝐢𝐚𝐛𝐢𝐥𝐢𝐭𝐲, 𝐚𝐧𝐝 𝐞𝐯𝐞𝐧 𝐰𝐡𝐞𝐭𝐡𝐞𝐫 𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 𝐰𝐨𝐫𝐤𝐬 𝐚𝐭 𝐚𝐥𝐥. 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

Just built a simple calculator using HTML, CSS, and JavaScript! This project gave me hands-on experience with DOM manipulation, event handling, and dynamic UI updates ○ Key learnings: ⁃ Handling button clicks with event listeners ⁃ Using string operations for calculations - Updating input fields in real-time This is a small step, but it boosted my confidence in frontend development Looking forward to adding more features like calculation history and scientific functions., ◦ Feedback and suggestions are most welcome #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #BeginnerProject

Recently I built a Typing Speed Test using HTML, Tailwind CSS, and Vanilla JavaScript. Instead of just a pretty UI, I focused on real-time typing mechanics and a smooth mobile experience. 🔎 Features I implemented: • Live WPM & accuracy on every keystroke • Green/red character feedback + moving cursor • Difficulty & mode selection (synced mobile/desktop) • Personal best with localStorage • Confetti on new high score • Fixed bottom restart button • Auto-scrolling text area 🚧 Challenges I faced: • Syncing mobile dropdowns & desktop pills without bugs • Preventing scroll/keyboard jitter on mobile • Accurate real-time stats & efficient DOM updates 💻 Tech Stack: HTML | Tailwind CSS | Vanilla JavaScript | LocalStorage This project leveled up my: • Real-time DOM manipulation • Pure JS state management • Mobile-first responsive design • Cross-device input handling Live demo: https://lnkd.in/gNNS35iy #JavaScript #TailwindCSS #FrontendDevelopment #WebDev

Want to take your JavaScript and CSS skills to the next level? Here are 5 actionable tips to transform your front-end game! Every developer faces front-end challenges like browser compatibility and layout issues. Let’s tackle these with practical advice: 1. Master the Fundamentals:   - Grasp core JavaScript concepts. Scope, closures, promises aren't jargon—they're crucial.   - CSS Flexbox and Grid transform layouts. Practice for cleaner, efficient designs. 2. Embrace Modular CSS:   - BEM methodology simplifies CSS management. Organize styles hierarchically for easier maintenance. 3. Sharpen Debugging Skills:   - Leverage browser dev tools. Set breakpoints, step through code, inspect variables live. 4. Optimize Performance:   - Minify files with tools like UglifyJS and CSSNano. Examine code for redundancy and refactor. 5. Stay Updated:   - Front-end tech changes fast. Keep informed via forums and newsletters. Practical Tips: - Try mini-projects on new concepts one at a time. - Refactor old projects with fresh techniques. - Learn from open-source project structures. These strategies can elevate you from good to great. What technique has transformed your JavaScript and CSS approach? Share in the comments! #JavaScript #CSS #FrontendDevelopment #CodingSkills #WebDesign

📌 Understanding the reverse() Method in JavaScript When working with arrays in JavaScript, there are times when we need to reverse the order of elements — whether for UI display, sorting logic, or algorithm problems. JavaScript provides a built-in method for this: ⏪ reverse(). 👉 What does reverse() do? 🔹 The reverse() method reverses the order of elements in an array. 🔹 It modifies the original array and returns the reversed array. 👉 Important Behavior (Very Important ⚠️) 💠 reverse() is a mutating method. 💠 That means: 🔹 It changes the original array 🔹 It does not create a new copy automatically 👉 Common Use Cases 🔹 Displaying latest items first 🔹 Reversing sorted results 🔹 Algorithm problems (palindrome, stack behavior) 🔹 UI rendering adjustments The reverse() method is simple yet powerful. Understanding that it mutates the original array is key to writing clean and predictable JavaScript code. #JavaScript #WebDevelopment #Frontend #CodingTips #LearnJavaScript

🌐 How does a browser parse & execute code? Browsers don’t “read” code — they parse, process, and render it step by step. 1️⃣ HTML Parsing HTML is parsed into the DOM tree Defines the structure of the page 2️⃣ CSS Parsing CSS is parsed into CSSOM DOM + CSSOM = Render Tree 3️⃣ JavaScript Execution JS engine parses & compiles code Executes via Call Stack & Event Loop JS can block rendering if not handled properly 4️⃣ Rendering Process Layout (Reflow): calculate positions & sizes Paint: draw pixels Composite: display on screen 🔁 Updates? JS changes DOM/CSS → Reflow or Repaint 💡 Key Takeaway HTML builds structure CSS styles it JavaScript makes it interactive #Frontend #Browser #JavaScript #HTML #CSS #WebDevelopment

#Day 60/100 – How JavaScript Powers Real Websites Behind the Scenes 🌐 When we open a website, everything looks simple. Click a button. Submit a form. Scroll. Like a post. But behind that smooth experience… JavaScript is doing A LOT. Today I realized something: JavaScript is not just “adding buttons.” It’s managing the entire interaction layer of the web. Here’s what it actually does behind the scenes: 🔹 Updates content without reloading the page (like Instagram or LinkedIn feed) 🔹 Validates forms before sending data 🔹 Handles API calls and displays live data 🔹 Manages state (what you clicked, typed, selected) 🔹 Controls animations and dynamic UI changes When you add an item to cart — JavaScript updates the UI instantly. When you see notifications — JavaScript fetched that data silently. When a website feels “fast” — That’s JavaScript working smartly. Big realization today 💡 Good JavaScript is invisible. You don’t notice it when it works — You only notice it when it breaks. Frontend is not just design. It’s logic, timing, state, and user experience. 60 days in… and I finally see how powerful this language really is. #100DaysOfCode #JavaScript #WebDevelopment #Frontend #LearningInPublic #CodingJourney

Today, I gained a deeper understanding of how CSS Modules work in React—not just the syntax, but the underlying mechanism. Many people believe that: “CSS Modules are just CSS files imported into components.” However, that's not the full picture. When you write: import styles from "./Button.module.css"; Your bundler (like Vite or Webpack) transforms this into something like: { primary: "Button_primary__3kH7a_1", danger: "Button_danger__9sK2Q_2" } So, when you use: <button className={styles.primary} /> You’re not applying a real CSS class name. Instead, you’re utilizing a hashed, locally-scoped identifier. This results in: ✅ Styles scoped to the component ✅ No global namespace pollution ✅ No class name collisions ✅ No accidental overrides ✅ Safe refactoring Under the hood: - The CSS file is compiled - Class names are hashed - A JS object mapping is generated The final CSS still exists, but with unique class names. The outcome is: “CSS with the safety model of JavaScript modules.” Why is this significant in real applications? - You can delete components without concern - You can rename classes safely - You can reuse class names like container, title, button everywhere - Large applications remain maintainable This represents a mental model upgrade: “CSS Modules are not ‘better CSS’. They are compiled, namespaced style dependencies.” For the first time, my React styles feel architected rather than merely “managed.” Small tool. Big architectural shift. #React #CSSModules #FrontendArchitecture #WebDevelopment #LearningInPublic #JavaScript #BuildInPublic

Day 36 of me reading random and basic but important coding topicss.... Today I read about Browser Environment.... I view the Browser Environment not just as a place where code runs, but as a complex ecosystem of interoperable specifications. The article on JavaScript.info perfectly breaks down the hierarchy, the core language (ECMAScript) sits in the center, wrapped by a Host Environment that provides the APIs we actually use to build products. When we talk about JS in the browser, we are really talking about the interplay between the window (the Global Object), the DOM (the structural interface), the CSSOM (the styling interface), and the BOM (the browser's utility belt). 1. The Root:- The window Object In the browser, window is the king. It plays two critical roles: # The Global Object: It’s the bucket for all global variables (though with let/const and modules, we rely on this less today). # The Browser Window: It provides the high-level API to control the tab itself...........think window.innerHeight or window.open. 2. DOM (Document Object Model):- UI as Data The DOM is the interface that represents all page content as objects. # The Entry Point: document. # Beyond the Browser: Remember, the DOM isn't exclusive to browsers. Tools like JSDOM allow us to run DOM-based tests in Node.js environments. 3. CSSOM (CSS Object Model):- The Forgotten Pillar We often modify styles by adding or removing classes (element.classList.add()). But the CSSOM allows us to manipulate the CSS rules themselves. While rarely touched directly, it’s what the browser uses to calculate the final computed styles of your components. 4. BOM (Browser Object Model):- The Native Utility Belt The BOM handles everything except the document. It’s how the app talks to the host OS and browser. # navigator: Device info, user agents, and platform detection. # location: URL management and redirection. # alert/confirm/prompt: The O.G. (though now often replaced by custom UI) browser communication methods. So, the HTML Specification isn't just about tags like <div> and <a>. Modern HTML specs (WHATWG) actually define the BOM, setTimeout, and many DOM extensions. Keep Learning !!! #JavaScript #WebDevelopment #FrontendArchitecture #SoftwareEngineering #DOM #Tech