🔥 I just built a mesmerising fire embers particle effect using React and pure CSS! 🔥 I wanted to challenge myself to create a highly visual, realistic particle system without relying on Canvas, WebGL, or JavaScript animation loops. The result is a lightweight, responsive component that brings a campfire atmosphere right to the browser. 🛠️ How it works under the hood: • Built with React 19 and Vite 7 • Uses CSS Custom Properties to dynamically generate 50 unique particles with randomised sizes, colours (warm yellows to deep oranges), and speeds. • Powered completely by Pure CSS Keyframes for the rising, erratic drifting, and flickering animations, leaving the main thread completely free! ⚡ I’ve attached a quick 10-second video below to show off the effect, but you can also see it for yourself! 👀 Try the live demo: https://lnkd.in/e3cqHSyJ 💻 Check out the source code: https://lnkd.in/eZ3gfKAx #ReactJS #CSS #WebDevelopment #Frontend #WebAnimation #JavaScript

𝐃𝐨𝐧'𝐭 𝐭𝐫𝐞𝐚𝐭 `𝐮𝐬𝐞𝐑𝐞𝐟` 𝐥𝐢𝐤𝐞 `𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞` — 𝐢𝐭'𝐬 𝐧𝐨𝐭 𝐠𝐨𝐢𝐧𝐠 𝐭𝐨 𝐫𝐞-𝐫𝐞𝐧𝐝𝐞𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭, 𝐚𝐧𝐝 𝐭𝐡𝐚𝐭'𝐬 𝐩𝐫𝐞𝐜𝐢𝐬𝐞𝐥𝐲 𝐢𝐭𝐬 𝐬𝐮𝐩𝐞𝐫𝐩𝐨𝐰𝐞𝐫! I recently helped a junior dev debug an animation issue where they were trying to trigger a re-render by updating `myRef.current`. It's a common misconception. `useRef` is designed to hold mutable values that persist across renders but don't trigger new renders themselves. This makes it perfect for: 1. Accessing DOM elements directly: `const inputRef = useRef(null); <input ref={inputRef} />` 2. Storing a mutable value that doesn't need to be reactive: Think timeouts, interval IDs, or previous state values. `const countRef = useRef(0); countRef.current++; // updates without re-render` The key takeaway: `useRef.current` updates synchronously, but React won't re-render unless state or props change. If you need UI updates, `useState` is your friend. If you need a persistent, mutable reference without the render cycle overhead, `useRef` is your ace in the hole. What's your most clever use case for `useRef`? Or a time it totally stumped you? #React #Frontend #JavaScript #WebDevelopment #ReactHooks

Build smooth accordions. No JavaScript required. The trick lies in the <details> and <summary> elements. They’re semantic, accessible, and work right out of the box. Keyboard support? Built in. Screen readers? Fully supported. So where does the smooth animation come from? CSS Grid. Instead of max-height hacks or JavaScript, you can animate the accordion using grid-template-rows. Here’s the idea. When the accordion is closed, the row height is 0fr. When it opens, it smoothly grows to 1fr. Grid handles that transition perfectly. No timing issues. No clipping. Just fluid motion. The result feels natural, clean, and entirely CSS-driven.

One line of CSS most frontend devs forget: scroll-behavior: smooth; Add it to your html selector. That's it. Every anchor link, every scrollTo(), every "back to top" button, instantly smooth. No JavaScript. No libraries. No 12KB animation package. Works in every modern browser. Sometimes the best UX upgrade is one line you didn't overthink. #FrontendDevelopment #CSS #WebDevelopment #UXTips

Happy St. Patrick's Day! ☘️ I built a small interactive web experience for the occasion — a pot of gold you can actually click. What I practiced with this project: • CSS keyframe animations & physics-style coin arcs • Dynamic DOM manipulation with vanilla JS • SVG illustration entirely in code • Deployed via GitHub Pages in under 5 minutes Sometimes the best way to sharpen your skills is to build something fun and ship it. Try it here →[https://lnkd.in/g3jcGzcn] #WebDevelopment #JavaScript #FrontendDev #BuildInPublic #StPatricksDay #100DaysOfCode #OpenSource

🚀 Project Showcase: Tic Tac Toe Game using HTML, CSS & JavaScript Excited to share one of my recent mini-projects – a Tic Tac Toe Game built using HTML, CSS, and JavaScript! 🎮 This project helped me strengthen my understanding of DOM manipulation, game logic, and responsive UI design. 🔹 Key Features: Interactive 2-player gameplay Dynamic win detection logic Clean and responsive user interface Reset game functionality 🔹 Technologies Used: HTML – Structure of the game board CSS – Styling and layout JavaScript – Game logic and interactivity Building this project was a great way to practice JavaScript fundamentals and problem-solving skills while creating something fun and interactive. Looking forward to building more projects and continuously improving my development skills! 💻✨ Check my GitHub repo : 🔗 https://lnkd.in/gCz98WpX Day 5 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingProjects #LearningJourney

⛄️ I just built an interactive talking snowman using React and pure CSS! ⛄️ I wanted to challenge myself to create a fun, character-driven UI component without relying on heavy external animation libraries. The result is a lightweight, responsive component that brings a bit of winter magic right to the browser. 🛠️ How it works under the hood: • Built with React 19 and Vite 7 • Uses React state to dynamically manage the snowman's behaviour and synchronise the interactive elements. • Powered completely by pure CSS Keyframes for the fluid animations and character movements, keeping the main thread completely free! ⚡ I’ve attached a quick 10-second video below to show off the effect, but you can also see it for yourself! 👀 Try the live demo: https://lnkd.in/eT2XDdYQ 💻 Check out the source code: https://lnkd.in/ev47WNdQ #ReactJS #CSS #WebDevelopment #Frontend #WebAnimation #JavaScript

I recently built an image slider using JavaScript, At first, I ran into little bugs, like slides not showing correctly, the active slide duplicating, and animations acting strangely. Working through these problems helped me understand important things like: -Keeping track of the current slide index -Making slides loop smoothly from the last to the first -Using JavaScript to control animations and transitions -Syncing navigation dots with the active slide Building and fixing this slider step by step made me realize that hands-on practice is the best way to learn JavaScript. Every bug was a lesson, and now I feel much more confident working with the DOM, events, and animations. checkout my link: https://lnkd.in/dwwDXhJ3 Github link: https://lnkd.in/dPTWTEng #JavaScript #WebDevelopment #FrontendEngineering #LearningByDoing #CodingJourney #ProjectBasedLearning

🎨 "CSS Animations vs JavaScript Animations: What's Your Pick?" 🤔 When it comes to breathing life into web pages, animations are key. But the big question is: do you reach for CSS or JavaScript? 💻 🤷♂️ CSS animations are like the easy-going friend who’s always ready to lend a hand. They’re smooth, performant, and require minimal setup. Perfect for simple transformations! 🌟 Meanwhile, JavaScript is the adventurous pal who loves a challenge. Want interactivity? Dynamic states? Endless possibilities? JS has your back, but it might need a bit more elbow grease. 🛠️ Each comes with its trade-offs. CSS shines in simplicity and efficiency, while JS excels in flexibility and control. What’s your go-to for animating the web? Drop your thoughts below! 💬 #CSS #JavaScript #WebAnimation #FrontendDevelopment

I recently built an **infinite Mandelbrot set zoom** using only **vanilla HTML, CSS, and JavaScript** — no libraries or frameworks, just the math behind it. The animation continuously zooms into **Seahorse Valley**, one of the most detailed regions of the Mandelbrot set. As the zoom goes deeper, the renderer automatically increases the iteration depth so the details keep revealing themselves instead of fading out. A few things that made this possible: → Smooth escape-time coloring with logarithmic normalization → Chunk-based async rendering so the browser stays responsive → Iteration depth that scales with the zoom level → A cyclic sine-wave color palette that subtly shifts as the zoom progresses What fascinates me most about the Mandelbrot set is how **infinite complexity can emerge from a single simple equation:** *z = z² + c* You can try the zoom yourself here 👇 https://lnkd.in/d6jPhfT5 #JavaScript #WebDev #Mathematics #CreativeCoding #Fractals