Lazy Loading Images with Intersection Observer API in JavaScript

🚀 Day 11 – Mastering the DOM (Document Object Model) If you're learning JavaScript, understanding the DOM is a game changer 💡 Here’s what this powerful lecture covers 👇 --- 🔥 📌 Part 1: Understanding & Selecting Elements 🌐 What exactly is the DOM? (Think of it as a live structure of your HTML) 🪟 Difference between "window" vs "document" 🎯 Old vs Modern Selection Methods: - "getElementById" - "querySelector" & "querySelectorAll" (recommended ✅) 🧭 DOM Traversal → Find parents, children & siblings easily --- ⚡ 📌 Part 2: Reading & Manipulating Elements ✏️ Change content using: - ".innerHTML" - ".textContent" (secure 🔒) - ".innerText" 🛡️ Security Tip: Prevent XSS attacks using safer methods 🏷️ Work with attributes: "id", "class", "setAttribute()" 🎨 Use "classList" for clean CSS handling (.add, .remove, .toggle) 💅 Modify styles dynamically with ".style" --- 🚀 📌 Part 3: Changing DOM Structure 🛠️ Create elements using "document.createElement()" ➕ Add elements → "append", "prepend", "appendChild" ❌ Remove elements → ".remove()" ⚡ Performance Hack: Use "DocumentFragment" to add multiple elements efficiently without lag 🔥 🎯 Bonus Concepts: - Reflow & Repaint (why performance matters) --- 👨💻 Who should watch this? ✔️ JavaScript Beginners ✔️ Frontend Developers ✔️ Students preparing for tech interviews --- 🌐 Start Learning Now: 👉 https://coderarmy.in/ --- 💬 Drop a comment: What DOM concept do you find most confusing? #Day11 #JavaScript #WebDevelopment #Frontend #Coding #LearnToCode #100DaysOfCode #DeveloperJourney

Day 22 of my web development journey in Chai Code cohort. Completed Object-Oriented Programming (Part 2) by Hitesh Choudhary . This lecture continued from the previous one but went deeper into how JavaScript actually works behind the scenes. The first important realization: Classes in JavaScript are not what they seem. They look like traditional OOP classes, but internally they are just syntax over prototypes. Understanding this changed how I see classes completely. One key thing I understood: Methods inside class are shared But functions defined inside constructor are not That means: ->Class methods are memory efficient ->Constructor functions create separate copies per instance Then came Symbols At first it looked like a small topic, but it has a strong use case. ->Symbols always create unique values ->Even if the description is same ->Useful when you want hidden or non-colliding keys Also learned: Symbol keys don’t show up in Object.keys() You need Object.getOwnPropertySymbols() to access them Another interesting concept: Making objects iterable Normally, objects are not iterable But using Symbol.iterator, we can control how iteration works This was something I didn’t expect JavaScript to allow so easily. Also covered: Symbol.toPrimitive This controls how an object behaves when converted to string or number. It gives more control over type conversion. Error handling became clearer: try → catch → finally ->try: risky code ->catch: handle error ->finally: always runs This is important for writing stable applications. Then came async flow: Callback approach → nested and hard to manage Promises: ->cleaner ->chainable ->easier to handle success and failure Big takeaway: JavaScript gives a lot of control, but with that comes responsibility to understand what is happening internally. Day 22 done. This OOP part needs more practice to fully sink in. Thank you Hitesh Choudhary sir, Piyush Garg sir, Anirudh Jwala sir, Suraj Kumar Jha for the support. #JavaScript #WebDevelopment #CodingJourney #LearnToCode #100DaysOfCode #Developers #Programming #TechCareers

🚀 Ready to level up your coding skills? Let's dive into the powerful concept of asynchronous programming in JavaScript! 🌟 Here's the deal: Asynchronous programming allows tasks to run independently, improving performance and user experience. For developers, mastering this is crucial for building responsive and efficient web applications. 🔍 Step by step breakdown: 1️⃣ Understand the event loop mechanism 2️⃣ Utilize callbacks, promises, and async/await syntax 3️⃣ Handle errors gracefully to prevent unexpected behavior 👨💻 Pro Tip: Use async/await for cleaner and more readable asynchronous code! 🌈 ⚠️ Common Mistake: Forgetting to handle errors properly can lead to bugs that are challenging to debug. Be vigilant! 🐞 💬 Question time: What's your favorite JavaScript feature for handling asynchronous operations? Share below! 🤔 🌐 View my full portfolio and more dev resources at tharindunipun.lk 🚀 #JavaScript #AsyncProgramming #WebDevelopment #CodingTips #DeveloperLife #FrontEnd #AsynchronousJS #CodeNewbie #TechTalks

💡 Some real insights I’ve gained while learning Frontend Development: 1.Writing code is easy. Writing clean, maintainable code is hard. 2.CSS looks simple… until you try to make everything perfectly responsive on all devices. 3.JavaScript is not just a language — it’s a mindset of solving problems step by step. 4.Frameworks like React help, but they don’t replace fundamentals. Without basics, everything feels confusing. 5.Small details matter — spacing, colors, loading speed — users notice more than developers think. 6.Debugging teaches more than tutorials ever can. 7.The more I learn, the more I realize how much I still don’t know. Frontend is not just about building interfaces — it’s about building experiences people interact with every day. 🚀 Still learning. Still improving. #FrontendDevelopment #WebDevelopment #JavaScript #ReactJS #LearningJourney #DeveloperInsights #CodingLife

Why does everyone keep saying - 𝗗𝗼𝗻'𝘁 𝗹𝗲𝗮𝗿𝗻 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀? React.js is just another framework. React.js works on top of JavaScript. React.js follows a component-based architecture. What should I learn first before starting React.js? Today, I got the answers to all my questions revolving around JavaScript. Today was the day when I somehow used React concepts in just Vanilla JS. I took one of my projects to the next level🚀. ✨Project Showcase - 𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺 𝗥𝗲𝗲𝗹𝘀[V2.0]🚀 📝Features Implemented:  • Click on like & increase likeCount  • Click on bookmark & increase bookmarkCount  • Click on share or comment, and their respective icons pop up  • Click pause/unpause the video  • Mute/unmute.  • follow/unfollow 🫵Each reel consists:  1. Username, profile picture, follow/unfollow button.  2. Short description with hashtags.  3. likeCount, commentCount, shareCount, saveCount.  4. likeIcon, commentIcon, shareIcon, saveIcon, muteIcon, & moreIcon 💡Learnings:  • Traverse the DOM to get the reelIndex of the clicked one.  • Implementing mute/unmute functionality.  • Handling video pause() and play() methods. 𝗗𝗮𝘆 𝟱𝟭 - 𝗙𝗶𝗻𝗶𝘀𝗵𝗶𝗻𝗴 𝗥𝗲𝗲𝗹𝘀 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 | Sheryians Coding School 𝗟𝗶𝘃𝗲 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗟𝗶𝗻𝗸: https://shorturl.at/qxnxb 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗥𝗲𝗽𝗼: https://shorturl.at/QOwna 𝗚𝗶𝘁𝗛𝘂𝗯: github.com/mdshadabirfan #day51 #challenge #Developer #html #css #frontend #student #project #sheryianscodingschool #softwaredevelopment #learninpublic #buildinpublic #assignment #progress #instagram #reels #project Mentors: Harsh Vandana Sharma | Sarthak Sharma | Ankur Prajapati | Dhanesh Parwati Malviya | Satwik Raj | MOHD ALI ANSARI

🚀Day 103 of Cohort2.0 Today's class was about More on Instagram clone project with Ankur Prajapati at Sheryians Coding School In this session, I focused on integrating backend features into the frontend, ensuring a seamless connection between both layers of the application. I designed and implemented the UI for the feed, where posts from different users are displayed in a structured and user-friendly manner. Alongside this, I continued applying the four-layer architecture to maintain clean code practices to improve scalability. Additionally, I implemented the like and unlike functionality for posts, enabling users to interact with content in real time. Proper authentication checks were also incorporated, ensuring that only loggedin users can perform these actions, thereby enhancing both security and user experience, and maintain proper users data. This session further strengthened my understanding of full-stack development by bridging backend logic with frontend execution while maintaining a clean and scalable architecture. #responsiveness #responsivedesig #css #scss #html #Cohort2 #webdevelopment #Javascript #react #DOM #frontend

🚀 Day 10 – Learning Journey Today, I focused on enhancing my To-Do Application using JavaScript, with an emphasis on dynamic user interaction and DOM manipulation. 🔍 Key Learnings: - Implemented event-driven functionality using JavaScript - Worked with the DOM using "getElementById" - Applied dynamic styling through "classList.add()" and "classList.remove()" - Improved understanding of state management in a simple UI component 🛠️ Feature Implemented: Developed a task status toggle where marking a task as complete applies a visual strike-through effect, and removing it restores the original state. This demonstrates how JavaScript can be used to create responsive and interactive user experiences. function onTodoStatusChange(checkboxId, labelId) { let checkboxElement = document.getElementById(checkboxId); let labelElement = document.getElementById(labelId); if (checkboxElement.checked === true) { labelElement.classList.add("checked"); } else { labelElement.classList.remove("checked"); } } 📈 This exercise strengthened my understanding of how front-end applications handle real-time updates and user actions. Looking forward to building more interactive features and improving my development skills further. #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #Coding #NxtWave

🚀 Building Real Projects While Learning Web Development Over the past weeks I’ve been focusing on strengthening my fundamentals in HTML, CSS and JavaScript by building real applications instead of only following tutorials. Today I finished a new learning project: a modern Password Generator combined with a Local Password Vault. The goal of this project was not just to “make something work”, but to understand how real frontend logic behaves in practice. Some areas I focused on while building this: • DOM manipulation and dynamic UI updates • Event handling and form logic • Random password generation algorithms • LocalStorage data persistence • Password strength validation • Table rendering and search filtering • UI state management • Basic security awareness This project is intentionally built without frameworks to develop strong core JavaScript skills before moving into React and backend technologies. It is also designed as a scalable foundation for future improvements such as encryption concepts, authentication flows and full-stack architecture. I truly enjoy the process of turning small ideas into working applications and learning how real products evolve step by step. 👉 Live Demo: https://lnkd.in/eX8G2Zqa 👉 GitHub Repository: https://lnkd.in/eAVjMUmE More projects are coming soon as I continue my journey toward becoming a full stack developer. #webdevelopment #javascript #frontend #learning #coding #buildinpublic

While learning JavaScript, I recently explored something that made my projects feel more real — events. Before this, my pages were static or just changing with code. But now, they actually respond to user actions. Things like: • Clicking a button • Typing in an input field • Hovering over elements All of these can trigger actions using JavaScript. This week I practiced: • Handling click events • Listening to user input • Running functions when events occur It feels great to see how small interactions can improve the overall user experience. Now I’m starting to understand — frontend development is not just about design or logic, it’s about creating interactive experiences. Still learning. Step by step. 🚀 #WebDevelopment #JavaScript #FrontendDeveloper #LearningInPublic #CodingJourney #GTU #Student #Post #linkedIn #Developer

Day 6 of 100 days. A pattern I’ve consistently observed among aspiring developers… The urge to move quickly from HTML - CSS - JavaScript - React ... without truly mastering any of them. Progress feels fast, but understanding remains shallow. And this apply to both students and many self-taught developers. The challenge: Lack of focus 👉 What I always emphasize: • Commit to mastering one concept at a time • Build small, practical projects for each topic • Minimize distractions and avoid unnecessary jumps In the long run, depth matters more than speed. Focus is often underrated in tech, but it makes all the difference. Are you building depth or just moving fast? #FrontendDevelopment #100DaysOfSolvingCodingProblems #WebDevelopment #CodingTips