Lazy Load Elements with Intersection Observer

🚀 Just built my Tic Tac Toe game using HTML, CSS & JavaScript! As part of my JavaScript learning journey, I created a fully functional game that covers: 🎯 DOM Manipulation 🎯 Event Handling 🎯 Game Logic Implementation 🎯 Responsive UI Design This project helped me understand how real-world applications manage state, user interactions, and logic behind the scenes. ✨ Features: * Interactive 2-player gameplay * Win detection algorithm * Reset & New Game functionality * Modern mobile-inspired UI 💡 Next step: Planning to add an AI opponent and turn this into a smarter game. 🔗 Check out the project here: https://lnkd.in/gPVZPyK9 Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #LearningInPublic #Projects #100DaysOfCode #ApnaCollege

Meet JavaScript, the heart of the web!  From animations to interactive buttons, see how this language brings static pages to life.    It turns "meh" into "wow" in milliseconds. #JavaScript #WebDevelopment #CodingLife #WebDesign #GraphillaAcademy #GraphillaTechnology #GrowWithGraphilla #InteractiveWeb

🪝: useState and useEffect are 20% of what hooks can do. Here are the others that actually matter. Everyone knows useState and useEffect. Here are the hooks I use constantly that don't get enough attention: useReducer → When useState has more than 2-3 related values, switch to useReducer → Especially useful for form state with validation → The logic is predictable and testable useRef → Not just for DOM access — use it to persist values across renders WITHOUT triggering re-renders → Storing previous values, debounce timers, animation frame IDs → Massively underused useMemo → Cache expensive computation results → But remember: useMemo itself has a cost. Don't use it for cheap operations. useCallback → Stabilise function references passed to child components → Prevents unnecessary re-renders when used with React.memo useContext → Perfect for theme, auth, or language — data that truly IS global → NOT a replacement for proper state management when state is complex Custom hooks — the real power → Every time I write the same logic in 2+ components, I extract it to a custom hook → useWalletConnection, useFormValidation, useDebounce → Your components become clean. Your logic becomes reusable. The rule I follow: If a component is longer than 100 lines, I probably need a custom hook. What's your most-used React hook that isn't useState or useEffect? #ReactHooks #ReactJS #JavaScript #FrontendDev #useReducer #useMemo #WebDevelopment #CleanCode

🚀 Just built an improved version of my Tic Tac Toe Game using HTML, CSS, and JavaScript! In this version, I focused on enhancing both UI and game functionality to make the experience more interactive and user-friendly. 🎯 Key Features: Clean and modern UI with gradient background Distinct colors for X and O for better visibility Real-time score tracking system Winner detection with result display Reset functionality for continuous gameplay Fully responsive design for mobile devices 💡 This project helped me strengthen my understanding of DOM manipulation, event handling, and managing game logic in JavaScript. 🔗 Live Demo: https://lnkd.in/dTf_RWvZ I’m continuously improving my skills by building and upgrading projects step by step. #javascript #frontenddeveloper #webdevelopment #coding #projects #learning #html #css

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day61 Project: Mood Vibe Generator What I built Today I built a Mood Vibe Generator where users can select their mood and get a curated visual vibe experience. Technologies Used HTML5 CSS3 JavaScript (DOM, Dynamic Rendering) Challenge I faced Designing a clean and aesthetic UI while keeping it interactive and responsive. How I solved it Used modern CSS effects (blobs, gradients) and dynamic rendering using JavaScript arrays. Features Multiple mood options Beautiful UI with ambient effects Smooth animations Live Demo: https://lnkd.in/d4WqXGQ3 Note: This project is not fully completed yet — more features coming soon Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #Coding #UIUX

I was writing separate font sizes for every screen size. Three, sometimes four media queries just for text. Then I found out CSS clamp() exists and felt a bit stupid, honestly. You give it a minimum, a preferred size, and a maximum. The browser figures out the rest based on screen width. Clean. No breakpoints needed. It's one of those things that once you know it, you can't go back. Broke it all down in the carousel, real examples included. If this helped you, repost it. Someone on your feed is definitely still doing it the hard way. #CSS #WebDev #Frontend #ResponsiveDesign #CSSClamp #LearnToCode #WebDesign #JavaScript #HTML5 #TechTips #CSSAnimation #UIDesign #Coding #100DaysOfCode #ProgrammerHumor 

Experimenting with GLSL and R3F to create this post processing pixelating effect ⚡ Compatible with EffectComposer and other effects like Bloom, this shader pixelates and quantizes colors to give any 3D scene a retro, lo-fi aesthetic. It’s fully reactive with two simple props: • Resolution: To control the pixel grid. • ColorDepth: To crunch the palette. Check out the demo here: https://lnkd.in/eViAfiV3 And the GitHub repo here : https://lnkd.in/emqChFCm I’d love to hear your thoughts! If you find any weird bugs or have feedback on the performance, drop a comment! 👇 #webgl #threejs #r3f #javascript #creativecoding #frontend #shader

🎨 Built a Fully Dynamic Draw & Guess Game I recently developed a real-time Draw & Guess game — inspired by the classic scribble concept, but built with a fully dynamic architecture. ⚡ What makes it interesting: This isn’t just a static game — everything updates dynamically in real-time: - Players can join instantly - Drawing syncs live across users - Guessing happens in real-time - Game state updates without reloads 💡 What I focused on: - Real-time interactivity - Smooth drawing experience - Clean and responsive UI - Scalable game logic 🧠 What I learned: Building dynamic systems pushed me to think beyond UI — handling state, synchronization, and user interaction at scale. 🚀 Try it here: [Add your live link] 💬 Open to feedback and suggestions! #WebDevelopment #RealTimeApps #JavaScript #PHP #AJAX #GameDevelopment #BuildInPublic

Understanding CSS Units Made Simple Choosing the right CSS unit can make or break your layout. Here’s a quick breakdown: 📌 px — Fixed and precise 📌 % — Relative to parent 📌 rem — Based on root font size 📌 em — Relative to parent font 📌 vh/vw — Based on viewport size 💡 Pro Tip: Use px for precision, rem/em for scalability, and vh/vw for responsive layouts. Save this for later and level up your CSS game 🚀 #WebDevelopment #CSS #Frontend #Coding #100DaysOfCode #DevTips

🎮 Just built the Classic Simon Game using HTML, CSS & JavaScript! For those who don't know — Simon is a memory-based game where the game shows you a sequence of colors & sounds, and you have to repeat it correctly. With every level, the sequence gets longer and harder! 🧠⚡ It's simple to play but seriously tests your memory and focus! 🛠️ Tech Used: → HTML — Game structure → CSS — Styling & color buttons → JavaScript — Game logic, sequences & event handling ✅ What I practiced: → DOM Manipulation → Event Listeners → Arrays & random sequence generation → setTimeout for animations #JavaScript #HTML #CSS #WebDevelopment #Frontend#LearningInPublic #100DaysOfCode