US Presidential Approval Data Visualized as Vertical Area Chart in JavaScript

Day 09 (Project) : Fetching Real-World Data with JavaScript! 🌐💾 I’m excited to share my latest project—a dynamic "User Data List" application built with HTML, CSS, and JavaScript! This project was a deep dive into how modern web applications communicate with external servers. Key features of this project: • 📡 Fetch API: Implemented asynchronous requests to retrieve user information from a REST API. • ⏳ Loading State: Added a "Loading..." indicator to improve user experience while data is being fetched. • 📊 Dynamic Table Generation: Used JavaScript to iterate through the retrieved data and populate a clean, organized HTML table. • 🎨 Responsive UI: Designed a simple and intuitive interface for seamless data viewing. Mastering the Fetch API is a major step in my journey toward building full-stack applications. It’s amazing to see how a few lines of code can connect a webpage to a world of data! #JavaScript #WebDevelopment #FetchAPI #CodingJourney #FrontendDeveloper #Programming #TechSkills #LearningByDoing #Amarjeet Sir Gravity Coding

I once worked on a dashboard that took 6 seconds to load data. Turned out, it was fetching all 800 rows from the API the moment the page opened. The user hadn't even scrolled yet but we were already pulling data they may never see. That's when Infinite Scrolling came into picture and I went through it's doc on https://javascript.info/. The idea is simple. Don't load everything at once. Load a small batch - say 20 or 30 items and only fetch the next set when the user is actually getting close to needing it. The page loads fast, the API isn't hammered, and the user sees content almost immediately. Now, the interesting part is how you detect that the user has reached the bottom. There are two ways to do this: The manual way - you listen to the scroll event and do some math. window.scrollY tells you how far the user has scrolled from the top. Add window.innerHeight to that, which is the height of the visible screen, and if that sum is close to document.body.scrollHeight (the total height of the page), you've hit the bottom. Trigger the next fetch. It works, but scroll events fire on every pixel of movement. You end up throttling or debouncing just to keep things from going haywire. The cleaner way - you drop an invisible element at the very bottom of your list and use IntersectionObserver to watch it. The moment that element comes into the viewport, you fetch the next page. No scroll math, no event spam. The browser tells you exactly when it's time. I've used both, but IntersectionObserver is the one I keep going back to. It's less code and it doesn't fight the browser. The result after switching to this approach on that dashboard? First load went from 6 seconds to under 1. Not because the data got smaller but because we stopped loading data nobody asked for yet. If you have a list or table with more than 50 items, this is worth thinking about. #ReactJS #FrontendEngineering #WebPerformance #JavaScript

#Day12 Map is a powerful built-in data structure that is often better than regular objects when you need to use non-string keys or maintain insertion order. In my ongoing Backend track in Mentorship for Acceleration, I learnt why Maps are such a powerful and useful data structure in modern JavaScript. While regular objects work for simple key-value storage, Maps give us more control and reliability. I practiced by creating a Phonebook contact list, and it really helped me understand how clean and efficient they are. Methods I used below : => .set () : I used this to add new contacts. => .get () : I used this to retrieve the actual value associated with a key. If the key exists, it returns the value; if not, it returns undefined. => .has () : Lastly, I used this to check if a particular key exists in the Map before trying to access it. It returns true or false, which helps prevent errors and makes the code safer. Maps also preserve insertion order and allow keys of any type. This makes them excellent for caching, session management, and building lookup tables. How often do you think a JavaScript developer needs to use maps ? #M4ACELearningChallenge #LearningInPublic #JavaScript

𝗪𝗵𝘆 𝗨𝘀𝗲 𝗟𝗲𝘁 𝗢𝘃𝗲𝗿 𝗩𝗮𝗿 𝗜𝗻 𝗝𝗮𝗵𝗮𝘀𝗰𝗿𝗶𝗽𝘁? You're reading ECourses Progress Report 2. I was working on a project when I stumbled upon something interesting. I saw this line of code: let retries = 0; There are two ways to store data in JavaScript: - Constants - Variables Let and var are used to declare variables. Var used to be the dominant way to declare variables in JavaScript. But var has a major issue: it is function-based scoped. This means you can access a var variable anywhere inside a function. This can cause problems in some cases. There's another issue with var: hoisting. Var initializes a variable with null or undefined. Let does not initialize a variable until you do so. This makes let a better choice than var. Source: https://lnkd.in/gmM-Qnxm

𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗟𝗶𝘁𝗲𝗿𝗮𝗹𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Stop using plus signs to join strings. It makes your code messy. Use template literals instead. Old JavaScript required plus signs for variables. Example: "Hi, I am " + name + "." This leads to errors. You forget spaces. It is hard to read. Multi-line strings need special characters. Use the backtick character instead of quotes. Put variables inside $\{\}. Example: Use backticks and write Hi, I am $\{name\}. The code looks like a normal sentence. Benefits: - Put math or functions inside $\{\}. - Write multi-line strings by pressing enter. - Create HTML templates easily. - Use single and double quotes inside the string without errors. Comparison: - Old: "Hello " + name - New: Use backticks and $\{name\} - Old: Needs \n for new lines. - New: Press enter. Use backticks now. Your code stays clean. Source: https://lnkd.in/gcRGugD3

Three dots that changed JavaScript: ... The spread operator in action: Arrays: // Copy const copy = [...original] // Merge const all = [...arr1, ...arr2] // Add items const updated = [...items, newItem] Objects: // Copy const clone = { ...user } // Merge const combined = { ...defaults, ...config } // Update const modified = { ...user, age: 30 } Function calls: Math.max(...numbers) fetch(url, { ...defaultOptions, ...customOptions }) Before spread operator: const copy = original.slice() const merged = Object.assign({}, obj1, obj2) fn.apply(null, args) After spread operator: const copy = [...original] const merged = { ...obj1, ...obj2 } fn(...args) The magic: → No mutation (safer code) → Cleaner syntax → Works with any iterable → Essential for React state → Makes immutability easy Three dots. Infinite possibilities.

Day 3 of My JavaScript Journey Today, I learned about JavaScript data types and how to define variables. JavaScript has two main types of data: Primitive data types: These include 7 types such as number, string, boolean, null, undefined, symbol, and bigint. Object: used to store more complex data. I also learned three ways to declare variables in JavaScript: • let • const • var One key thing I understood: "const" should be used by default, "let" when the value needs to change, and "var" is mostly outdated. Example: const name = "John"; let age = 20; Key takeaway: Understanding data types and variable declarations is fundamental to writing clean and predictable JavaScript code. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

𝗧𝗵𝗲 𝗕𝗲𝘀𝗍 𝗖𝗵𝗼𝗶𝗰𝗲: 𝗢𝗯𝗷𝗲𝗰𝗍 𝗩𝗦 𝗠𝗮𝗽 𝗜𝗻 𝗝𝗮𝗙𝗮𝘀𝗰𝗿𝗶𝗽𝘁 You use Objects and Maps to store data in JavaScript. But when should you use each? Here are the key differences: - Objects: - Key types are string or Symbol only - Insertion order is not guaranteed - Size is found using Object.keys(obj).length - Maps: - Key types can be any value - Insertion order is guaranteed - Size is found using map.size Objects are best for struct-like data with a fixed shape. Maps are best for dictionaries with dynamic keys and frequent add/delete operations. Try the Interactive Demo to benchmark Object vs Map with real API data in your browser. Source: https://lnkd.in/gH6fPU-G

Ever changed a variable in JavaScript only to realize you accidentally broke the original data too? 🤦♂️ That’s the classic Shallow vs. Deep Copy trap. Here is the "too long; didn't read" version: 1. Shallow Copy (The Surface Level) When you use the spread operator [...arr] or {...obj}, you’re only copying the top layer. The catch: If there are objects or arrays inside that object, they are still linked to the original. Use it for: Simple, flat data. 2. Deep Copy (The Full Clone) This creates a 100% independent copy of everything, no matter how deep the nesting goes. The easy way: const copy = structuredClone(original); The old way: JSON.parse(JSON.stringify(obj)); (Works, but it’s buggy with dates and functions). The Rule of Thumb: If your object has "layers" (objects inside objects), go with a Deep Copy. If it’s just a basic list or object, a Shallow Copy is faster and cleaner. Keep your data immutable and your hair un-pulled. ✌️ #Javascript #WebDev #Coding #ProgrammingTips

𝗪𝗵𝘆 𝗨𝘀𝗲 𝗟𝗲𝘁 𝗢𝘃𝗲𝗿 𝗩𝗮𝗿 𝗜𝗻 𝗝𝗮𝗵𝗮𝘀𝗰𝗿𝗶𝗽𝘁? You're reading ECourses Progress Report 2. I was working on a project when I stumbled upon something interesting. I saw this code: let retries = 0. I wondered what it meant. There are two ways to store data in JavaScript: constants and variables. Let and var are used to declare variables. Var was widely used in JavaScript until let came along. Var has a major issue: it is function-based scoped. This means you can access a var variable anywhere inside a function. This can cause problems in some cases. There's another issue with var: hoisting. Var initializes a variable with null or undefined. Let stores a variable in a "dead zone" until you initialize it. Now let is preferred over var. You can learn more about this topic. Source: https://lnkd.in/gmM-Qnxm