🚀 30 Days of JavaScript – Day 21 Today I explored how applications communicate with servers. 💡 Project: Fetching Data from API This project loads user data from an external API and displays it dynamically. 🧠 Concepts Used: i) fetch API ii) async/await iii) JSON data handling iv) DOM rendering 📌 This helped me understand how frontend applications interact with backend services. 🎥 Demo below 👇 Full source code in the First comments. #JavaScript #WebDevelopment #API #FrontendDevelopment #LearningJavaScript
More Relevant Posts
-
🚀 𝗙𝗶𝗿𝘀𝘁 𝗦𝘁𝗲𝗽 𝘄𝗶𝘁𝗵 𝗔𝗣𝗜𝘀 🎯 Features: - Built a simple weather feature that shows the weather for today, tomorrow, and the next day - Used Fetch API to get data from the API - Learned how to handle requests and display real-time data - Improved my understanding of how frontend connects with backend 🔗 Project Demo: https://lnkd.in/dZYTMv9W ⚡ Source Code: https://lnkd.in/d_Q6KCBC ✨ This project helped me understand how APIs work in real applications and how data can be fetched and displayed dynamically on a web page. #JavaScript #APIs #Fetch #FrontendDevelopment #WebDevelopment
To view or add a comment, sign in
-
🚀 Day 11 of 21 Days of Explaining Tech Ever wondered how websites and apps actually communicate behind the scenes? It all comes down to one powerful, lightweight format — JSON (JavaScript Object Notation). From logging in 🔐 to scrolling through posts 📱, JSON is constantly working in the background, enabling smooth data exchange between clients and servers. 💡 Why JSON matters: • Simple and human-readable • Lightweight and fast • Industry standard for APIs and web communication Think of JSON as a neatly organized data box 📦 where information is stored in key-value pairs — clean, structured, and efficient. 🎥 Check out the quick 60-second breakdown here: https://lnkd.in/dvQrhfPQ If you're starting your journey in web development, understanding JSON is not optional — it’s foundational. #WebDevelopment #JSON #JavaScript #APIs #Coding #TechExplained #Developers #LearnToCode #FullStack #21DaysOfCode #nikhil
To view or add a comment, sign in
-
𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 JS runs one thing at a time. This is single-threading. Long tasks freeze your screen. The event loop manages async code. It connects these parts: - Call stack: Where code runs. - Web APIs: Browser tools like timers. - Task queues: Where callbacks wait. The order is strict: - Call stack finishes first. - Microtasks run second. - Macrotasks run last. Example: 1. Start runs first. 2. setTimeout moves to the task queue. 3. Promise moves to the microtask queue. 4. End runs fourth. Result: Start, End, Promise, Timeout. A zero-millisecond timer does not run now. It waits for the stack to empty. It waits for microtasks to finish. This fixes weird bugs in your code. Source: https://lnkd.in/gjBYnFZB
To view or add a comment, sign in
-
Server Components in React is game changer . the old way: > client fetches data > calls API endpoint > renders UI the new way: t > server fetches data > renders component > sends HTML to client why it matters: > no API layer needed > data stays on server > smaller bundles > faster page loads server components fetch data. client components handle interactions. that's it. #React #Performance #JavaScript #WebDevelopment #FrontendTips
To view or add a comment, sign in
-
-
Recently, I explored some Nextjs advanced concepts: 🔹Data Fetching Flow 🔹Server Components Data Fetching 🔹Cache & Revalidating (ISR, SSG) 🔹Dynamic Data Handling (no-store) 🔹Generate Static Params Understanding how data flows and caching works in Next.js. I exited to apply these concepts in real projects! #NextJs #ReactJs #Javascript #webDevelopment
To view or add a comment, sign in
-
Most form validation bugs I've seen in production weren't in the frontend. They were on the server, where nobody was actually validating anything. Here's a pattern I use in every Next.js project now: pair Server Actions with Zod for full-stack, type-safe validation in one place, zero duplication. The idea is simple. Define your Zod schema once. Use it directly inside the Server Action. If validation fails, return typed errors back to the client. If it passes, proceed to your database layer. TypeScript types flow end-to-end without any manual sync between client and server schemas. No separate API route. No duplicated logic. No guessing what shape your errors will be in. This pattern shines especially with Supabase and Prisma, define the schema once, validate at the boundary, and fully trust the data that reaches your ORM. Sounds obvious. But I've seen too many Next.js codebases where the client validates, the server trusts, and production catches the gap. What's your go-to pattern for server-side validation in Next.js? #nextjs #typescript #fullstackdev #webdevelopment
To view or add a comment, sign in
-
Today’s session from Suraj sir was on Node.js file system (fs module). We went through how Node interacts with the file system — creating, reading, updating and deleting files, and also working with directories. Covered methods like writeFileSync, readFileSync, appendFileSync, mkdirSync, renameSync, unlinkSync and more. Everything was explained step by step, line by line, which made it easier to follow. Started applying the concepts by working on the ER diagram and related models, connecting how data and files are handled in real scenarios. It also made me realize that understanding concepts in class is different from applying them on your own. Focusing on consistent practice and revision to get more comfortable. #Nodejs #Backend #LearningInPublic #JavaScript #DBMS #ChaiaurCode #Surajkumarjha sir
To view or add a comment, sign in
-
-
Why my API was slow (and what actually fixed it) I recently noticed one of my APIs was taking way too long to respond — sometimes 3–4 seconds per request. At first, I thought it was just my code being “messy,” but digging deeper taught me a lot. Here’s what I found: Too many unnecessary DB calls – I was fetching the same data multiple times instead of reusing it. Unoptimized queries – Some queries were scanning entire collections instead of using indexes. Synchronous loops – I was waiting for each call to finish one by one, instead of running them in parallel. After making a few changes: Added proper indexes Used Promise.all for parallel DB calls Cached repeated data where possible Response time went from 3–4 seconds → under 300ms. The biggest takeaway? Sometimes it’s not your code logic, it’s how your code talks to the database and handles tasks. Small adjustments can make a huge difference. #FullStackDeveloper #WebDevelopment #APIDevelopment #BackendDevelopment #NestJS #NextJS #JavaScript #PerformanceOptimization #SoftwareDevelopment
To view or add a comment, sign in
-
-
Day 10/100 of JavaScript 🚀 Today’s topic : Fetch API "fetch" is used to make HTTP requests in JavaScript and is a modern replacement for XMLHttpRequest Basic usage : fetch("https://lnkd.in/gCA7VyNQ") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)); Using async/await : async function getData() { try { const res = await fetch("https://lnkd.in/gCA7VyNQ"); const data = await res.json(); console.log(data); } catch (err) { console.error(err); } } What it does : - Returns a Promise - Cleaner than XMLHttpRequest - Works well with async/await #Day10 #JavaScript #100DaysOfCode
To view or add a comment, sign in
-
Why can't config files have comments? If you've ever pasted a JSON config and immediately wished you could explain what a block of settings actually does — JSON5 is worth knowing about. JSON5 is a superset of JSON that adds a few things that make configuration files much more pleasant to work with: 💬 Comments — both inline and block ✅ Trailing commas — no more hunting down which line is missing one 🔓 Unquoted property names — copy directly from TypeScript/JavaScript without reformatting 📝 Multi-line strings Valid JSON is always valid JSON5, so there's no migration pain. It works across the stack too — npm package for JS/TS, json5k library for Kotlin, and IntelliJ supports it out of the box. I wrote up a quick intro with examples — including a real-world Renovate config — here 👇 https://lnkd.in/grFnkvRd #JSON5 #WebDev #JavaScript #TypeScript #Kotlin #DevTools #SoftwareDevelopment
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
<!DOCTYPE html> <html> <head> <title>API Fetch</title> <style> body { font-family: Arial; text-align: center; margin-top: 50px; } .user { margin: 10px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <h2>User List (From API)</h2> <button onclick="getUsers()">Load Users</button> <div id="output"></div> <script> async function getUsers() { let res = await fetch("https://jsonplaceholder.typicode.com/users"); let data = await res.json(); let output = document.getElementById("output"); output.innerHTML = ""; data.forEach(user => { let div = document.createElement("div"); div.className = "user"; div.innerHTML = ` <b>${user.name}</b><br> ${user.email}<br> ${user.address.city} `; output.appendChild(div); }); } </script> </body> </html>