Building Custom CSS Engine in JavaScript with Chai

😃 Day 5 of my JavaScript API Practice Today I built an Image Gallery using the Unsplash API. 💡 What I learned: Fetching random images using API Displaying images using CSS Grid layout Implementing lazy loading for better performance ✨ This project helped me understand how to handle images efficiently and design clean layouts. 🔗 GitHub Repo: https://lnkd.in/g4Q-_Dev 🔗 Hosted link: //https://lnkd.in/gUgtP_58 #Day5 #WebDevelopment #JavaScript #CSS #Learning #API #Frontend #spotknack

#day48 of #100DaysCodingChallenge 🕒 Built an Analog Clock using HTML, CSS & JavaScript I created a fully functional analog clock that dynamically updates in real-time using JavaScript. ✨ Key Highlights: • Real-time clock using Date object • Smooth rotation of hour, minute, and second hands • Accurate angle calculations (360° logic) • Clean and responsive UI design • Custom styled clock with numbers (1–12) 💡 Concepts Used: • DOM Manipulation • setInterval() • CSS Transform (rotate) • Positioning & Layout 🚀 Future Improvements: • Smooth sweeping second hand • Dark/Light mode toggle • Dynamic number generation using JavaScript • Add digital clock support 🔗Github Link :https://lnkd.in/dBuyP46D Code Of School || Ritendra Gour || Avinash Gour #JavaScript #WebDevelopment #Frontend #Projects #Coding

Built a simple Download Feature using JavaScript, where I implemented a timed process using setInterval. The project simulates a download flow and updates the UI at regular intervals, helping me understand how timing functions work in real scenarios. Key concepts applied: * setInterval for timed execution * DOM manipulation * Dynamic UI updates This project helped me get more comfortable with handling time-based events in JavaScript and improving interactive behavior in applications. GitHub Repository: https://lnkd.in/gwRhDT8X #JavaScript #FrontendDevelopment #WebDevelopment #LearningByDoing

My Lighthouse Audit Checklist Before any release on Cloudshot, I run this. Every time. 👉 Images: → All images use next/image → WebP format served where supported sizes prop set correctly → Above-fold images NOT lazy loaded 👉 JavaScript: → Route-based code splitting active → No full-library imports (lodash, moment, etc.) → Dynamic imports for heavy components (charts, editors) → No unused dependencies in bundle 👉 CSS: → No render-blocking stylesheets → Critical CSS inlined → Tailwind purge configured correctly 👉 Fonts: → font-display: swap set →Fonts self-hosted or preloaded → No flash of unstyled text (FOUT) 👉 Runtime → No layout shifts on load (CLS < 0.1) → Interaction response under 200ms (INP) → No long tasks blocking main thread This checklist took us from Lighthouse 61 → 94. Save it. Run it before every deploy. #WebPerformance #NextJS #ReactJS #CoreWebVitals #FrontendEngineering #Uber

What is the difference between var, let, and const? JavaScript has three ways to declare variables but they behave very differently. Here’s the simplest way to understand them: 👉 var Function-scoped Hoisted and initialized as undefined Can be re-declared and updated 👉 let Block-scoped Hoisted but not initialized (temporal dead zone) Can be updated, not re-declared 👉 const Block-scoped Must be initialized at declaration Cannot be reassigned (but objects can still mutate) Why? - var ignores block scope - let and const respect block boundaries The difference is not syntax — it’s how JavaScript handles scope and memory. #Frontend #JavaScript #WebDevelopment #SoftwareEngineering

Project Title : Rock Paper Scissors Game A Rock Paper Scissors game built with vanilla HTML, CSS,  and JavaScript. Features: - Player vs Computer mode - Random computer choice generation - Real-time score tracking for both player and computer - Dynamic result messages with color feedback - Clean and responsive UI with image-based choices Built this to practice JavaScript fundamentals —  random number generation, DOM manipulation,  conditional logic, and event handling.

Sharing my learnings: Critical Rendering Path - In simple terms, it’s the process the browser follows to convert HTML, CSS, and JavaScript into pixels on the screen. Here’s how it works: - Browser receives HTML from the server - HTML is parsed → DOM is created - CSS is parsed → CSSOM is created - DOM + CSSOM → Render Tree Browser renders in steps: - Style calculation - Layout - Paint - Composite The goal? Show content to the user as fast as possible (First Contentful Paint). #frontend #webperformance #javascript #react #learninginpublic

🚀 Excited to share my latest open-source project: **ChaiTailwind** ☕ Built as an assignment from Web Development Cohort 2026, this runtime CSS utility framework works directly in the browser - zero build step required! Huge thanks to Hitesh Choudhary Piyush Garg and the Chai Aur Code community for the amazing learning experience! 🙏 Anirudh Jwala Akash Kadlag Jay Kadlag Suraj Kumar Jha **What makes it special:** ✨ 200+ utility classes (spacing, typography, flexbox, grid, and more) ⚡ Built-in caching for instant style application 🎨 Beautiful chai-inspired demo with parchment colors and warm aesthetics 📦 Only ~15KB - Pure vanilla JavaScript 🔄 Reactive DOM watching with MutationObserver 🚫 No webpack, no postcss, no complex configs **Perfect for:** - Quick prototypes and MVPs - Projects without build tooling - Learning utility-first CSS - Demos and experiments The entire landing page (with glassmorphic nav, animated effects, and steam animations) is built using ONLY ChaiTailwind utilities - no custom CSS! **Try it yourself:** 🌐 Live Demo: https://lnkd.in/gwsurmds 📦 NPM: npm install @suyashjaiswal/chaitailwind 💻 GitHub: https://lnkd.in/ghnX2MzF Would love to hear your thoughts! What features would you like to see in a runtime CSS framework? #WebDevelopment #JavaScript #OpenSource #CSS #Frontend #ChaiTailwind #NPM #Tailwind #UtilityFirst #ChaiCode

Day 15 of my JavaScript journey 🚀 Built a Color Palette Generator using HTML, CSS, and JavaScript. This tool generates different color palettes, helping users explore and pick color combinations easily. This project helped me practice: • Working with random values • DOM manipulation • Dynamic styling • Creating useful UI tools 🔗 Live Demo: https://lnkd.in/g7kYvzWR 💻 GitHub Repo: https://lnkd.in/gsW2MWHT Building more practical and creative projects every day. 💻🎨 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🚀 Day 4 of #100DaysOfFrontend Built a Real-Time Digital Clock using HTML, CSS, and JavaScript ⏱️ This project helped me understand how to work with the Date object, update the UI dynamically, and use setInterval for real-time functionality. Small project, but a big step in learning JavaScript 💪 🔗 Live Demo: https://lnkd.in/ghiNej6F 💻 GitHub: https://lnkd.in/gZ_z8fDm #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency