Building a High-Fidelity Pokedex with Vanilla JS

From Syntax to Seamless UI. ☁️💻 I’ve just wrapped up this Weather Web App, built from the ground up using HTML5, CSS3, and Vanilla JavaScript. While the functionality is key, I wanted to push the boundaries of how a utility app feels. Moving away from standard templates, I engineered this "Premium Dark" interface to give it a cinematic, high-end dashboard vibe. Technical Highlights: Interactive Data Rendering: Leveraging Vanilla JavaScript to bridge the gap between complex weather data and a fluid, user-friendly interface. Custom CSS Architecture: Achieving that deep charcoal aesthetic with high-contrast cyan accents. Responsive Engineering: Ensuring the "Command Center" look remains pixel-perfect across all screen sizes. It’s one thing to design a mockup, but bringing it to life through clean, efficient code is where the real magic happens. 🌙 How do you like this "Command Center" aesthetic for a weather tool? Would love to hear your feedback! 🚀 #WebDevelopment #FrontendDeveloper #JavaScript #CodingLife #HTMLCSS #Programming #PortfolioUpdate #KarachiDevs

#Task 33 – Modal Login App Today, I built a Modal Login Web App using HTML, CSS, and JavaScript. In this project, I focused on creating an interactive popup modal with login functionality, including smooth animations and form validation. Key Features of the Project • Animated modal popup (open/close) • Overlay background effect • Click outside to close modal • Dynamic Continue → Login form transition • Email & password validation system • Error & success messages display • Smooth scaling and fade animations What I Learned (Main Focus) This project helped me improve my understanding of: • DOM manipulation using JavaScript • Event handling (onclick, form submit) • Class toggling (classList.add/remove) • Form validation logic • UI state changes dynamically Challenge I faced While building this project, I faced challenges in managing modal state, handling multiple button events, and validating user input properly. How I solved it I solved these issues by using event listeners, conditional validation logic, and class-based UI control for smooth interaction. This project strengthened my skills in JavaScript interactivity, UI/UX behavior, and real-world form handling. Code Of School – Ritendra Gour || Avinash Gour #WebDevelopment #WebDeveloper #FrontendDeveloper #DeveloperIndia #CodingLife #HTML #CSS #JavaScript #DOM #WebDesign #UIDesign #UIUXDesign #FrontendProject #PortfolioProject #TechCreative #FrontendDevelopment #WebDevLife

🚀 𝗙𝗶𝘅𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗧𝗮𝗯𝗹𝗲 𝗟𝗮𝗴 𝗪𝗵𝗲𝗻 𝗨𝘀𝗲𝗿𝘀 𝗦𝗲𝗹𝗲𝗰𝘁 𝗠𝘂𝗹𝘁𝗶𝗽𝗹𝗲 𝗥𝗼𝘄𝘀 Recently worked on a performance issue where the React Table UI started lagging whenever users selected multiple rows. As the number of selected rows increased, the table became slow and less responsive. 🔍 𝗥𝗼𝗼𝘁 𝗖𝗮𝘂𝘀𝗲: Unnecessary re-renders of rows and table components Expensive state updates on every selection change Repeated calculations during row selection 💡 𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗲𝗱: Optimized state management for row selection Used useMemo and useCallback to prevent redundant renders Applied component memoization for better rendering control Ensured only affected rows updated instead of the full table refresh ✅ 𝗥𝗲𝘀𝘂𝗹𝘁: Smooth multi-row selection Faster UI response time Better scalability for large datasets Improved overall user experience 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗶𝘀 𝗻𝗼𝘁 𝗷𝘂𝘀𝘁 𝗮𝗯𝗼𝘂𝘁 𝘀𝗽𝗲𝗲𝗱 — 𝗶𝘁’𝘀 𝗮𝗯𝗼𝘂𝘁 𝗰𝗿𝗲𝗮𝘁𝗶𝗻𝗴 𝗮 𝘀𝗲𝗮𝗺𝗹𝗲𝘀𝘀 𝗲𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝗳𝗼𝗿 𝘂𝘀𝗲𝗿𝘀. ⚡ #ReactJS #FrontendDevelopment #PerformanceOptimization #JavaScript #WebDevelopment #ReactTable #UIUX #CodingJourney

Built a Dynamic Weather App using HTML, CSS & JavaScript : Excited to share my latest project where I built a Weather Updates Web App that provides real-time weather information with a clean and interactive UI. Key Features: 🌍Search weather by city name 🌡️ Displays temperature (in °C), humidity, and wind speed 🌤️ Dynamic Day/Night detection using API (sunrise & sunset) 🌞🌙 Automatically changes icon (sun/moon) based on time 🎨 Background theme changes for night mode ⚡ Data fetched using OpenWeatherMap API 💡 Clean UI with proper alignment and responsive layout Tech Stack: * HTML * CSS (Flexbox for layout & styling) * JavaScript (DOM manipulation + API integration) This project helped me strengthen my understanding of Working with 1. APIs 2. Asynchronous JavaScript (async/await) 3. Dynamic UI updates 4. Real-world problem solving Still improving it by adding more features like weather-based animations and better UI enhancements! Would love to hear your feedback and suggestions 😊 #JavaScript #WebDevelopment #Frontend #API #Projects #Learning #UIUX #WeatherApp

𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝘃𝘀 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗛𝗼𝗼𝗸 𝗮𝘁 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗧𝗶𝗺𝗲 React gives developers powerful hooks to manage side effects, but understanding when each hook runs can make a significant difference in UI performance and user experience. Two commonly misunderstood hooks are: 🔹 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁() useEffect runs after the browser has painted the UI. This makes it the right choice for:  • API requests  • Event listeners  • Subscriptions  • Logging  • Updating external systems Because it runs after paint, it does not block rendering, helping keep your application fast and responsive. 🔹 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁() useLayoutEffect runs immediately after the DOM updates but before the browser paints the screen. This makes it useful for:  • Reading element dimensions  • Measuring layout  • Scroll position adjustments  • Preventing visual flicker  • Synchronizing DOM changes before display Since it runs before paint, users never see intermediate layout changes. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 Using the wrong hook can lead to: ❌ Layout shifts ❌ Flickering UI ❌ Incorrect measurements ❌ Less predictable rendering behavior Choosing the correct hook leads to: ✅ Smoother interfaces ✅ Better visual stability ✅ More predictable components 𝗦𝗶𝗺𝗽𝗹𝗲 𝗿𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯 Use useEffect → for most side effects Use useLayoutEffect → when layout or visual updates must happen before paint Small React details like this often separate working code from polished frontend engineering. #React #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering

⚛️ React Fiber changed everything — but most developers don’t realize it This diagram shows a major shift in how React works internally 👇 📌 Before Fiber: React followed a synchronous rendering model Reconciler → Renderer (single uninterrupted process) 👉 Problem: Once rendering starts, React cannot pause it Large component trees = UI blocking Result → Laggy apps, poor user experience 📌 After Fiber: React introduced a Scheduler before reconciliation Scheduler → Reconciler → Renderer 👉 What changed? 🚀 Rendering is now: • Interruptible • Prioritized • Incremental This means React can: ✅ Pause work when needed ✅ Prioritize important updates (like user input) ✅ Resume rendering later 💡 Why this matters in real apps: Imagine: User is typing → At the same time, a large list is rendering 👉 Without Fiber: UI freezes ❌ 👉 With Fiber: User input stays smooth ✅ 🧠 Advanced insight: Fiber is not just an optimization — it’s a complete rewrite of React’s core algorithm. It enables features like: • Concurrent Rendering • Suspense • useTransition ⚠️ What most developers miss: Even with Fiber, bad component design can still cause performance issues. 👉 Fiber improves scheduling — 👉 But YOU control what gets rendered 🚀 My takeaway: Understanding Fiber changed how I think about performance: It’s not just about memoization — it’s about prioritizing user experience over computation Have you ever faced UI lag in React apps? Did you know Fiber was solving this behind the scenes? #ReactJS #FrontendDevelopment #JavaScript #ReactFiber #WebPerformance #SoftwareEngineering #AdvancedReact

I got tired of building loading states. So I built a plugin to do it for me. 🤖⚡️ Every developer knows the drill: 1. Build a beautiful new UI feature. 2. Realize it looks broken while the data is fetching. 3. Spend 2 hours manually coding a "Skeleton" version of that same UI. 4. Realize you have to maintain TWO versions of the same layout forever. 🤦♂️ 5. Every time you change your UI, you have to remember to update the skeleton too I’m excited to share that I created AutoSkeleton — a zero-config engine that automatically mirrors your React and React Native layouts into beautiful shimmer placeholders. The Solution: AutoSkeleton introspects your real component tree and renders pixel-perfect placeholders that match your exact geometry (flexbox, margins, padding, and all). ✅ One API, Two Platforms: Works perfectly on both React (Web) and React Native. ✅ Zero Manual Markup: Just wrap your existing component and pass isLoading. ✅ Automatic Sync: If your UI changes, your skeleton updates automatically. ✅ Lightweight & Fast: Optimized for performance with smooth 60fps animations. Give it a star on GitHub or try it in your project:  📦 NPM: https://lnkd.in/gkjJDTvd npm install auto-skeleton-react-and-native Let’s make the "Loading..." spinner a thing of the past! 🥂 #ReactJS #ReactNative #WebDevelopment #MobileDevelopment #OpenSource #SoftwareEngineering #UXDesign #AutoSkeleton #JavaScript

Getting back into a rhythm after a long break isn't always glamorous. You open VS Code, stare at a blank file, and just start, no perfect conditions, no grand plan. That's been my approach lately, and it's working. Project 4 is done. Here's what it is: https://lnkd.in/dSYzJWbg Product Card UI - Add to Cart App A fully functional product listing page with a cart sidebar, the kind of UI you see on real e-commerce sites, built from scratch in React. What it does: → Displays a product grid with images, ratings, and categories → Add to cart with live quantity controls (+/−) → Cart persists across page refreshes via localStorage → Calculates and updates total price in real time → Checkout flow with a success confirmation screen Tech used: → React (Vite) — component-based architecture → Tailwind CSS — custom design tokens, dark theme → localStorage — client-side cart persistence → Custom React Hook (useCart) — all cart logic isolated What I learned: → Lifting state up — keeping cart state in App.jsx and passing it down via props, rather than scattering state across components → Custom hooks — extracting cart logic into useCart.js keeps components clean and focused on UI only → Component architecture — each component has one job. ProductCard displays. Cart renders. useCart thinks. → localStorage sync with useEffect — reading on mount, writing on every state change This is Project 4 of my structured React learning path. Building in public. More coming. #React #JavaScript #TailwindCSS #Frontend #WebDevelopment #BuildInPublic #MERN #Fullstack #Developer

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day78 Project: Product Store UI (VishalShoppy 🛒) What I built Today I created a modern E-commerce Product Store UI that fetches products from an API and allows users to search, filter, sort, and add items to cart. Technologies Used HTML5 CSS3 (Modern UI, Grid, Animations) JavaScript (Fetch API, DOM Manipulation) Features ✔ Dynamic product listing from API ✔ Category-based filtering ✔ Search functionality ✔ Sorting (Price, Rating, Name) ✔ Add to Cart interaction ✔ Skeleton loading UI ✔ Error handling & retry option ✔ Responsive modern design Challenge I faced Handling multiple states like loading, filtering, searching, and sorting together without breaking UI consistency. How I solved it Used a central state approach (variables like category, searchQuery, sortMode) and created a reusable render function to update UI efficiently. Live Demo: https://lnkd.in/dQnARJGD Feedback is always welcome! Code Of School Avinash Gour | Ritendra Gour #JavaScript #FrontendDeveloper #WebDevelopment #Ecommerce #UIUX #CSS #100DaysOfCode

Are unnecessary re-renders slowing down your React application? We all know the frustration of a laggy UI, but often the solution is hidden within simple optimization techniques we are already using just not effectively. I’ve put together a visualization that simplifies three of the most powerful strategies for optimizing React performance. Here is the quick breakdown: 1. Code Splitting: How React.lazy and Suspense can drastically improve initial load times by loading code only when it's absolutely necessary. 2. The Re-render Problem: Understanding that non-primitive data types (objects/functions) are assigned new memory addresses on every render the main culprit of expensive recalculations. 3. The Memoization Toolkit: A side-by-side comparison of when to deploy React.memo, useCallback, and useMemo to cache components, functions, and heavy calculation values. A little optimization can go a long way toward a smoother user experience. Save this guide for your next optimization sprint! 👇 How do you approach performance tuning in your React projects? Are you using useMemo sparingly, or is it your go-to optimization tool? Let’s share some best practices below. #ReactJS #WebDevelopment #FrontendEngineering #PerformanceOptimization #JavaScript #SoftwareEngineering