Day 14 of building in public. Starting my 21 Day Frontend Development Challenge 🚀 Today I learned about Lazy Loading images using the Intersection Observer API in JavaScript. Lazy loading is a powerful performance optimization technique where images are loaded only when they enter the user’s viewport instead of loading everything when the page first opens. This helps reduce the initial page load time and improves overall performance. The Intersection Observer API allows us to detect when an element becomes visible inside the browser viewport. When the image enters the visible area of the screen, JavaScript replaces the placeholder with the actual image source and loads it dynamically. This approach is commonly used in modern websites, blogs, and e commerce platforms to improve loading speed and user experience, especially on pages with many images. Learning how browsers handle visibility detection and resource loading helped me understand how developers build faster and more efficient web applications. Learning in public and building every day. Excited for Day 15. If you are also learning JavaScript or building projects feel free to connect. Day 14 complete 7 more days of learning and building ahead. If you are also learning JavaScript or building projects I would love to connect and learn together. #javascript #webdevelopment #frontenddevelopment #coding #programming #buildinpublic #learninpublic #devcommunity #softwaredevelopment #webdev #sheryains #sheryainscodingschool Harsh Vandana Sharma , Sheryians Coding School , Satwik Raj, Sheryians Coding School Community.

🎓 Day 12: Mastering the DOM Like a Pro 🚀 | JavaScript Deep Dive 👉Just completed an amazing lecture on DOM (Document Object Model) — the backbone of every interactive website! 💻✨ Here’s what I learned 👇 🔹 Part 1: Understanding & Selecting 🌐 DOM is the “Living Object” version of HTML 🧠 Difference between "window" & "document" 🎯 Selecting elements using: - "getElementById", "getElementsByClassName" - Modern methods: "querySelector", "querySelectorAll" 🌳 DOM Traversal like navigating a family tree: - "parentElement", "children", "nextElementSibling" 🔹 Part 2: Reading & Manipulating Elements ✏️ Changing content smartly: - ".innerHTML" vs ".textContent" vs ".innerText" 🔐 Learned about XSS attacks & how ".textContent" keeps data safe ⚙️ Handling attributes: - "getAttribute", "setAttribute" 🎨 Styling the modern way using "classList": - ".add()", ".remove()", ".toggle()" 💅 Inline styling using ".style" 🔹 Part 3: Changing DOM Structure 🧱 Creating elements using "document.createElement()" ➕ Adding elements with: - "append", "prepend", "before", "after" ❌ Removing elements with ".remove()" ⚡ Performance tip: Use DocumentFragment for faster rendering 🔥 Learned about Reflow & Repaint (why performance matters!) 👨💻 Who should learn this? ✔️ JavaScript Beginners ✔️ Frontend Developers ✔️ Students preparing for interviews ✔️ Anyone who wants to build dynamic & secure web apps 💡 This lecture made me realize: 👉 DOM is not just about selecting elements 👉 It’s about writing efficient, 🔐 & optimized code 🚀 Day 12 complete — consistency is the key! #javascript #webdevelopment #frontend #coding #mernstack #learning #developer #100DaysOfCode #day12

🚀 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

Day 1 of learning React Today marks the beginning of my journey into React, and I’m excited to share what I’ve learned so far. I started by understanding how to set up React using external libraries and how Babel plays an important role. Since browsers don’t understand JSX directly, Babel compiles it into regular JavaScript that the browser can execute. One thing I’ve realized already is that React makes building user interfaces more structured and scalable. Instead of writing plain JavaScript, we use JSX a syntax that looks like HTML but works inside JavaScript. Here are a few core concepts I explored today: • Components Components are like reusable building blocks for your UI. Instead of writing one large file, you break your interface into smaller, manageable pieces. Example: function Welcome() { return Hello, World!; } • Fragments Sometimes you want to return multiple elements without adding unnecessary divs to your HTML. That’s where fragments come in. Example: <> • Props Props (short for properties) allow you to pass data from one component to another, making your components dynamic. Example: function Welcome(props) { return Hello, {props.name}; } • Conditional Rendering (Guard Operator) In React, we can use the “&&” operator directly inside JSX to render something based on a condition. Example: {isLoggedIn && Welcome back!} This will only display the message if isLoggedIn is true. It hasn’t been easy stepping into something new, but I’m committed to learning and improving every day. #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #CodingJourney #100DaysOfCode #BuildInPublic

Have you ever paused to think about how JavaScript’s asynchronous nature has completely transformed our lives as developers? From eliminating blocking code to enabling smooth, non-blocking user experiences — async programming is the reason modern web apps feel so fast and responsive today. In my latest blog, I break down the fundamentals of Synchronous and Asynchronous JavaScript. 🔗 Read the full post here: https://lnkd.in/egq38-vw Would love to hear from you in the comments 👇 Grateful to the incredible Chai Aur Code community that keeps pushing us forward every day! Hitesh Choudhary Piyush Garg Akash Kadlag Anirudh J. Suraj Kumar Jha Jay Kadlag Nikhil Rathore #JavaScript #WebDevelopment #AsyncJS #Coding #DeveloperLife #TechBlog #Chaicode #Cohort

Hey everyone! I'm continuing my 5-project challenge to strengthen my frontend skills, and I'm excited to share : Project 2/5: GitHub User Finder! This project was built from scratch using HTML, CSS, and Vanilla JavaScript. My main focus here was on asynchronous programming and seamless API integration to create a fluid user experience. Here are the main features I implemented: ✅ Real-time GitHub Profile Search ✅ Dynamic display of user stats (followers, following, repos) ✅ Automatic sorting to show the 6 most recently updated repositories ✅ Full profile overview with links to bio, blog, and Twitter ✅ Sleek, responsive dark-themed UI Building this helped me sharpen my skills in: 💡 Asynchronous JavaScript: Using fetch and async/await to retrieve real-time data from external APIs. 💡API Integration: Mastering the GitHub REST API and using query parameters for advanced sorting. 💡Dynamic DOM Updates: Efficiently rendering complex data structures and repository lists without any frameworks.Check out the demo video below to see it in action! 🎥 Next up is Project 3... Code & Documentation on GitHub: 🔗 https://lnkd.in/dMnt-pEs #WebDev #Frontend #JavaScript #HTML #CSS #CodingChallenge #DeveloperCommunity #GitHubAPI #OpenSource

Many developers initially write code like this: Adding separate event listeners to every button, link, or list item. It works fine for small projects, but as the application grows, it can create unnecessary event listeners and affect performance. This is where Event Delegation in JavaScript becomes powerful. With event delegation, you attach a single event listener to a parent element and handle events for its child elements using event bubbling. Benefits: • Cleaner and maintainable code • Better performance with fewer event listeners • Works perfectly for dynamically added elements I recently wrote a detailed article explaining Event Delegation with practical examples and clear explanations. If you are learning JavaScript or working in frontend development, this concept is worth understanding. Read the full article here: https://lnkd.in/gkGK4hQb #JavaScript #FrontendDevelopment #WebDevelopment #Programming #SoftwareEngineering

🚀 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

🚀 From JavaScript to TypeScript — Taking My Skills to the Next Level Over the past period, I’ve been building a solid foundation in JavaScript, learning how to create dynamic web applications, handle logic, and understand how modern websites really work behind the scenes. But as I started thinking bigger—about building scalable and professional applications—I discovered TypeScript. 💡 So what really changes when moving from JavaScript to TypeScript? JavaScript is dynamic and flexible. You can write code quickly, but errors often appear only when the program is running, which can make debugging harder—especially in bigger projects. TypeScript, on the other hand, adds a layer of structure. By introducing types, it allows developers to define what kind of data they are working with. This means many errors are caught before the code even runs, saving time and reducing bugs. 🔍 In practice, this means: You write more predictable and reliable code Your projects become easier to read and maintain It becomes much easier to scale applications as they grow Collaboration with other developers becomes smoother 📈 What I’ve realized is that: JavaScript helps you start fast, but TypeScript helps you grow professionally. It’s not just about writing code anymore—it’s about writing clean, structured, and future-proof applications. I’m excited to continue improving, building real projects, and pushing myself further in the world of software engineering 🚀 #JavaScript #TypeScript #WebDevelopment #Programming #LearningJourney #SoftwareEngineering #TechGrowth

🚀 Dive into the exciting world of asynchronous programming with JavaScript Promises! 🌟 Promises are a way to handle asynchronous operations in JavaScript, ensuring that a certain task is completed before moving on to the next one. Imagine ordering food online - you don't wait for the delivery before doing anything else, right? Promises work the same way! For developers, understanding Promises is crucial as it allows for smoother execution of tasks without blocking the main thread. This can lead to better performance and user experience in applications. 🔧 Here's a breakdown: 1. Create a new Promise using the "new Promise()" constructor. 2. Inside the Promise, define the asynchronous task (e.g., fetching data). 3. Use ".then()" to handle the successful outcome. 4. Use ".catch()" to handle errors. ``` const fetchData = new Promise((resolve, reject) => { // asynchronous task here resolve('Data fetched successfully!'); }); fetchData .then((data) => { console.log(data); }) .catch((error) => { console.log(error); }); ``` Pro Tip: Utilize async/await with Promises for even cleaner and more readable asynchronous code! 😊 Common Mistake Alert: Forgetting to handle errors with ".catch()" can result in uncaught Promise rejections. Always include error handling for robust code. 🤔 What will be your first project applying Promises to level up your development skills? Share your thoughts below! 🚀🌐 View my full portfolio and more dev resources at tharindunipun.lk #JavaScript #AsyncProgramming #Promises #WebDevelopment #CodingTips #AsyncAwait #DeveloperCommunity #CodeNewbie #FrontendDevelopment