Fixing JavaScript Function Error: Passing Parameters to sum() Function

This week, I built a simple dashboard layout using modern CSS without libraries or any UI frameworks. The idea was to: ➡️ Use CSS Grid for page structure ➡️ Use a fixed sidebar + flexible content column ➡️ Add a sticky header for better UX ➡️ Use clamp() for responsive spacing ➡️ Use min-height: 100dvh for proper full-height layouts ✅ css .layout {  display: grid;  grid-template-columns: 250px 1fr;  min-height: 100dvh; } .header {  position: sticky;  top: 0; } .content {  padding: clamp(1rem, 3vw, 2rem); } ➡️ No !important. ➡️ No unnecessary wrapper divs. Modern CSS already provides everything needed for clean, scalable layouts. Frontend quality comes from fundamentals, instead of adding more tools. #Angular #Signals #RxJS #Reactivity #FrontendTips #WebDevelopment #JavaScript #FullStackDeveloper #CleanCode #CodingJourney #CSS #Frontend #ResponsiveDesign #UIDesign #NodeJS #ExpressJS #PostgreSQL #pgAdmin #Backend #API #FullStack

 Stimulus The Right Amount of JavaScript Why Stimulus Exists Turbo handles navigation and updates. But some things still need JavaScript: Dropdowns Toggles Validation hints Modals Stimulus handles these small interactions, not entire apps. Basic Stimulus Controller Controller // app/javascript/controllers/counter_controller.js import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["count"] increment() { this.countTarget.textContent++ } } HTML <div data-controller="counter"> <span data-counter-target="count">0</span> <button data-action="click->counter#increment">+</button> </div> No DOM querying. No event listeners. No framework complexity. Real-Life Stimulus Use Cases Password visibility toggle Auto-submit filters Copy-to-clipboard Character counters Stimulus Philosophy HTML first, JavaScript second. Stimulus enhances HTML instead of replacing it. Final Thought Hotwire exists because: SPAs became too complex Rails apps needed modern UX Developers wanted speed without losing sanity Hotwire brings balance back.

The Web — Beyond Frameworks Many developers start their journey with a framework. I chose to start with the foundation. Before abstractions, I wanted to understand the engine itself. How a Single Page Application actually works. How state is created, managed, and flows. How rendering really happens. How the DOM behaves under dynamic updates. How client-side logic communicates with APIs. How HTTP works beyond just calling fetch(). How routing differs between client and server. How components are designed — not just imported. I built dynamic data tables with filtering, searching, and sorting. Designed reusable layout patterns and scalable UI structures. Implemented pagination, edit/delete workflows, modals, and detail views. Studied UI/UX principles and frontend architecture deeply. Not because a framework required it — but because real engineering demands it. Frameworks are tools. Architecture is mindset. Fundamentals are power. The web is not React, Vue, or Angular. It is logic, state, rendering, communication, and structure. When you understand the foundation, any framework becomes just syntax. There are still layers most people don’t talk about — and those layers are what truly separate engineers from users of tools. Still exploring. Still building. Still going deeper. #WebDevelopment #FrontendEngineering #SoftwareArchitecture #JavaScript #SPA

🚀 Built a Drum Kit Web App using HTML, CSS & JavaScript In this project, I focused on building a fun, interactive experience while strengthening my core frontend skills. 💡 Key features & learnings: • DOM Manipulation for dynamic interactions • Keyboard event handling (keydown listeners) • Audio integration for real-time sound playback • Smooth CSS transitions & animations • Responsive layout using Grid & Media Queries For UI enhancement and design improvements, I leveraged AI tools like ChatGPT and Gemini to refine layout, contrast, and visual hierarchy. This project really helped me deepen my JavaScript fundamentals and understand real-time user interaction. I’d love to hear your feedback and suggestions! 🙌 #HTML #CSS #JavaScript #WebDevelopment #Frontend #ResponsiveDesign #LearningInPublic

🎮 𝗧𝗶𝗰-𝗧𝗮𝗰-𝗧𝗼𝗲 𝗪𝗲𝗯 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 | 𝗛𝗧𝗠𝗟 • 𝗖𝗦𝗦 • 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 built a fully functional Tic-Tac-Toe web application using vanilla JavaScript, with a focus on structured logic, state management, and clean UI design. 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀: • 2-Player and Computer vs Player modes • AI opponent that blocks and attempts winning moves • Automatic win/draw detection • Clean, user-friendly interface The AI evaluates the board to secure a win or prevent the player from winning, demonstrating practical decision-making logic in JavaScript. 𝗧𝗵𝗶𝘀 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 demonstrates my ability to build interactive front-end applications, implement strategic game logic, and write clean, maintainable code. Live Demo: https://lnkd.in/dYMRuY6E Source Code: https://lnkd.in/dmhPMQRb Open to feedback, collaboration, and new opportunities. #frontenddeveloper #javascript #webdevelopment #html #css #softwaredevelopment #buildinpublic

𝗘𝘃𝗲𝗿 𝗮𝗰𝗰𝗶𝗱𝗲𝗻𝘁𝗮𝗹𝗹𝘆 𝗿𝗲𝗺𝗼𝘃𝗲𝗱 𝘁𝗵𝗲 .𝗰𝘀𝘀 𝗳𝗶𝗹𝗲? 😅 One moment your app looks sleek and polished… ✨ The next moment it feels like you’ve time-traveled back to the early internet days 😭 • No colors 🎨 • No alignment 📐 • No spacing 📏 • No responsiveness 📱 • Just plain, unstyled HTML staring back at you 💀 That’s when it hits you: 👉 CSS isn’t just about making things “pretty.” It’s what gives life and structure to your UI ❤️🔥 It defines layout, improves readability, and shapes the entire user experience. Without it, even solid functionality feels broken and unfinished 🚫 𝗠𝗼𝗿𝗮𝗹 𝗼𝗳 𝘁𝗵𝗲 𝘀𝘁𝗼𝗿𝘆: • Push your code regularly 💾 • Maintain backups 🔁 • Treat your stylesheets with respect 🧩 #CSS #WebDev #FrontendDevelopment #UIUX #ModernWeb #WebDesign #FrontendEngineer #DevelopersLife #CodingLife #ProgrammerHumor #TechHumor #JavaScript #HTML #SoftwareEngineering #CodeNewbie #DevCommunity #TechCommunity #BuildInPublic #100DaysOfCode #LinkedInCreators

Task 2 (Basic): Interactive Form I’ve just implemented a dynamic "Get In Touch" section that prioritizes seamless user interaction and instant feedback. No page reloads—just smooth, intelligent form handling. ✈️ ✨ Key Features: 🔺 Real-Time Validation: Instant checks for name length, email formatting, and phone number accuracy as the user types. 🔺 Dynamic Feedback: Error messages appear and disappear automatically without refreshing the page. 🔺 Success Confirmations: Immediate confirmation once a message is successfully sent. 🔺 State-Driven UI: Custom CSS transitions that highlight invalid fields and provide clear status updates. Built with Vanilla JavaScript, HTML, and CSS. #WebDevelopment #JavaScript #UIUX #Frontend #Coding #CodvedaJourney #CodvedaExperience #FutureWithCodveda

Have you seen the new <geolocation> element in action? 📍 Get user location (Without JavaScript) It's a fascinating shift in how browsers handle permissions. Instead of writing custom JS wrappers for every location request, we're moving toward a declarative, native approach. How it works: The element provides a built-in button that manages the permission flow automatically: 1️⃣ First-time access: Triggers the native browser permission prompt. 2️⃣ Denied status: Provides an easy path for the user to revoke or grant access later. 3️⃣ Granted status: Acts as a "refresh" button, fetching the current location immediately without redundant prompts. Customizing with attributes: What makes this powerful are the controls built directly into the markup: 🔹 accuracymode: Need high precision? Toggle it on. Just keep in mind the tradeoff: slower response times and higher power consumption. Default (approximate) 🔹 autolocate: If the user has already granted permission, the element triggers the onlocation event on page load. No click required. 🔹 watch: Want to track movement? This fires events continuously. It's surprisingly smooth. This feels like a major step toward simplifying common web patterns. Have you had a chance to play with this yet? I'd love to hear your thoughts on whether this could replace your current geolocation implementation. Read more: Article by Manuel Matuzović https://lnkd.in/gZx5KHXj #HTML #Frontend #WebDevelopment #CodingTips #UIUX #JavaScript #WebDev #DeveloperCommunity #itsmacr8

Hey Everyone!! Day 24 of #30DaysCodingChallenge Today I built a Dark & Light Theme Toggle Web Application using HTML, CSS, and JavaScript. What I Built A responsive theme toggle application that allows users to switch between Light Mode and Dark Mode. The selected theme is saved in the browser, so it remains even after refreshing the page. Purpose of the Project The goal was to strengthen my understanding of DOM manipulation, CSS variables, and browser storage while building a practical real-world feature used in modern websites. Key Features ✔ Toggle between Dark and Light mode with a single button. ✔ Dynamic button text update (Dark ↔ Light). ✔ Smooth transition effect using CSS. ✔ Persistent theme using Local Storage (remains after refresh). ✔ Clean and centered UI using Flexbox. What I Learned 🔹 How `classList.toggle()` makes theme switching simple and efficient. 🔹 How to store user preferences using `localStorage`. 🔹 How to apply conditional rendering based on saved data. 🔹 Improved understanding of combining CSS and JavaScript for better UX. Building small UI features like theme toggles helps me understand how modern applications enhance user experience while keeping code clean and maintainable. #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #CodingChallenge #BuildInPublic

⚛️ 𝗥𝗲𝗮𝗰𝘁 𝟭𝟵: 𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝘁𝗵𝗲 "𝗕𝗲𝗳𝗼𝗿𝗲 𝗣𝗮𝗶𝗻𝘁" 𝗠𝗼𝗺𝗲𝗻𝘁 The biggest trend in 2026 is Visual Stability. Users have zero patience for janky layouts. That’s where useLayoutEffect shines. 🔍 𝗪𝗵𝗮𝘁 𝗲𝘅𝗮𝗰𝘁𝗹𝘆 𝗶𝘀 𝗶𝘁? Unlike useEffect, which runs after the browser has painted the screen, useLayoutEffect fires synchronously after all DOM mutations but before the browser has a chance to paint. 💡 𝗪𝗵𝗲𝗻 𝘀𝗵𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘂𝘀𝗲 𝗶𝘁? You don't need it for data fetching or logging. Save it for these three "High-Impression" scenarios: 𝗠𝗲𝗮𝘀𝘂𝗿𝗶𝗻𝗴 𝗟𝗮𝘆𝗼𝘂𝘁: Need to know the exact width or height of an element to position another one (like a dropdown or popover)? Do it here to avoid the "jump." 𝗣𝗿𝗲𝘃𝗲𝗻𝘁𝗶𝗻𝗴 𝗙𝗹𝗶𝗰𝗸𝗲𝗿𝗶𝗻𝗴: If you need to change the UI based on a measurement, doing it in useEffect will show the "old" state for one frame. useLayoutEffect ensures the user only ever sees the "final" state. 𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗶𝘇𝗶𝗻𝗴 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻𝘀: For complex FLIP animations or GSAP sequences that need to start at the exact moment the DOM is ready. ⚠️ 𝗧𝗵𝗲 𝗥𝗲𝗮𝗰𝘁 𝟭𝟵 "𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗛𝗶𝗻𝘁" While powerful, useLayoutEffect is a blocking call. It delays the paint. In the world of Concurrent Rendering, overusing this hook can hurt your "Interaction to Next Paint" (INP) scores. 𝗥𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯: If the user doesn't see a visual glitch when using useEffect, stick with useEffect. 🚀 𝗧𝗵𝗲 𝟮𝟬𝟮𝟲 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: We are moving away from "it works" to "it feels premium." Understanding the synchronous lifecycle of React 19 is the difference between a "web app" and a "native-grade experience." Are you still team useEffect for everything, or are you utilizing the synchronous power of useLayoutEffect for your complex UIs? Let’s debate in the comments! 👇 Follow me on LinkedIn: https://lnkd.in/e_thXEXu Visit my profile: https://mtehseen.com/ #React19 #WebPerformance #FrontendEngineering #JavaScript #ReactHooks #WebDev2026 #CodingTips #CleanCode #FullStack #UXDesign