Event Propagation in JavaScript: Capturing, Target, Bubbling

Recently practicing frontend system design: YouTube timeline preview. It gets interesting when it comes to 1. calculating exact frame for a given timestamp. 2. reducing HTTP overhead using sprite sheets (storyboard). 3. memory management for large sprite sheet. 4. ui optimizations: use of requestAnimationFrame, preloading the sprite sheet and using CSS property transform instead of left/margin to prevent layout/paint phases, and the edge cases. tools used while practicing: Gemini + Notebook LLM (visual revision notes) #reactjs #frontend #javascript #machinecoding #frontend #dsa

🟩 Milestone 04: The power of DOM After hitting the ground with the fundamentals of JavaScript, now I have explored the world of DOM. Where everything feels practical with a logical world. In this milestone I learned how to connect the logic directly to the UI and update things. ✅ What I learned in this Milestone ▪️ Understanding of DOM and how it represent the webpage ▪️ Selecting and modifying elements (getElementById and so on) ▪️ Handling events like 'click' and form input. ▪️ Updating UI content in real time ▪️ Validation and logic in UI ✅ Project: 'Khorooch,' A simple MFS solution ✅ In this project I implemented: ▪️ Add money functionality ▪️ Cashout functionality ▪️ Real-time balance update ▪️ Real-time transaction history ▪️ Basic validations 👉 Note: Other services in the UI are currently unavailable. Because this is a demo project. 👉 Live link: https://lnkd.in/gXMSbzVu #JavaScript #DOM #FrontendDevelopment #WebDevelopment #LearningInPublic #ProgrammingHero

⚡ Day 2 – getElementById vs querySelector (Real Difference) Selecting elements is one of the most important parts of DOM manipulation. But knowing the difference between these two methods makes your code cleaner and smarter. 🔹 getElementById() ✔ Selects element by id ✔ Slightly faster (direct lookup) ✔ Returns a single element ✔ ID must be unique 🔹 querySelector() ✔ Uses CSS selectors ✔ Can select id, class, or tag ✔ Returns the first matching element ✔ More flexible 🧠 Key Difference: getElementById() works only with id. querySelector() works with any valid CSS selector. Bonus Tip: Use querySelectorAll() when you need multiple elements (returns a NodeList). Mastering small DOM fundamentals like this makes advanced JavaScript much easier. #JavaScript #WebDevelopment #Frontend #DOM #JSConcepts #Coding #100DaysOfCode

My Lighthouse Audit Checklist Before any release on Cloudshot, I run this. Every time. 👉 Images: → All images use next/image → WebP format served where supported sizes prop set correctly → Above-fold images NOT lazy loaded 👉 JavaScript: → Route-based code splitting active → No full-library imports (lodash, moment, etc.) → Dynamic imports for heavy components (charts, editors) → No unused dependencies in bundle 👉 CSS: → No render-blocking stylesheets → Critical CSS inlined → Tailwind purge configured correctly 👉 Fonts: → font-display: swap set →Fonts self-hosted or preloaded → No flash of unstyled text (FOUT) 👉 Runtime → No layout shifts on load (CLS < 0.1) → Interaction response under 200ms (INP) → No long tasks blocking main thread This checklist took us from Lighthouse 61 → 94. Save it. Run it before every deploy. #WebPerformance #NextJS #ReactJS #CoreWebVitals #FrontendEngineering #Uber

Built my own lightweight utility-first CSS engine in JavaScript. The project focuses on reading custom 'chai-*' class names from the DOM, parsing them, and applying styles dynamically in the browser using JavaScript It was a great hands-on exercise in DOM manipulation, pattern parsing, modular architecture, and understanding how utility-first styling systems work behind the scenes. GitHub: https://lnkd.in/g5j5rhZa Live Project: https://lnkd.in/gFAQ7j7W #JavaScript #WebDevelopment #FrontendDevelopment #DOM #chaicode #LearningInPublic

Building with Logic: My Dynamic Mini Calendar 📅 I just deployed a mini calendar that stays perfectly in sync with the real world! Using the JavaScript Date object, I built this to automatically pull the current day, date, month, and year every time the interface loads. It was a great exercise in DOM manipulation and CSS Flexbox for that clean, centered UI. Check out the live version below! 🚀 Live Link: https://lnkd.in/g4eZgEZD 💻 GitHub: https://lnkd.in/gyQVAYQD #FrontendDevelopment #JavaScript #WebDesign #CodingLife #LearningToCode

Popover API plus CSS anchor positioning. Light-dismiss overlays and top-layer rendering with no JavaScript. Didn't realise the platform had caught up on this until I read about it. When the browser handles this at the system level, you get light-dismiss and top-layer z-index without custom event logic to maintain. Not a small reduction in surface area.

Understanding how React executes the Render and Commit phases can clear up a lot of confusion around component re-renders and effect execution. In this post, I walk through: • What exactly happens in the render phase vs commit phase. • The execution order across the component tree. • How useLayoutEffect and useEffect run during the commit phase. If you’ve ever wondered why your logs appear in a certain order, this breakdown with a simple example should make it much clearer. #React #Frontend #JavaScript #ReactJS #WebDevelopment

#Hello_Connections #Day8 of #100DaysCodeChallenge Project Name: Stopwatch Web Page Details : Built a fully functional Stopwatch Web Application using HTML, CSS, and JavaScript with start, stop, lap, clear and reset functionality. What I Focused On: JavaScript timing functions (setInterval, clearInterval) DOM manipulation Event handling Time calculation logic (minutes, seconds, milliseconds) Clean and responsive UI structure Challenges: Managing accurate time increments without duplication issues and properly clearing intervals to prevent multiple timers running simultaneously. How I Solved It: Implemented controlled interval handling using conditional checks, cleared existing intervals before starting a new one, and structured the timer logic for consistent and accurate updates. Code Of School -Avinash Gour || Ritendra Gour 🔗 Live Project: https://lnkd.in/dwD9Trw4 #Day8 #100DaysOfCode #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #LearningInPublic #WomenInTech

In Thursday’s class with Suraj Kumar Jha, we explored the DOM (Document Object Model) in depth and built a few small projects to better understand how JavaScript interacts with the UI. In this screen recording, I'm sharing a small DOM project – Theme Toggle. The task was simple but interesting: when the theme toggles, the button text should also update dynamically. Completing this helped me understand DOM manipulation and event handling more clearly. Step by step learning and improving every day. 🚀 Chai Code Hitesh Choudhary #javascript #dom #webdevelopment #learninginpublic #100DaysOfCode