Environment Shapes Behavior, Boosts Motivation

Mastering Optional Chaining in JavaScript🚀 Ever had your app crash because of a TypeError: Cannot read properties of undefined? We’ve all been there. 🛑 When working with deeply nested objects, checking for every level of a property (e.g., user && user.company && user.company.address) can make your code messy and hard to maintain. - Why Optional Chaining (?.) is a Game-Changer: - Prevents Crashes: Instead of throwing an error when a property is missing, it safely returns undefined. - Cleaner Code: It replaces long chains of logical && operators with a single, readable syntax. - Increased Robustness: Your application becomes more resilient when dealing with dynamic data or API responses that might have missing fields. As shown in the visual guide, switching from "Risky Code" to "Safe Code" ensures that your logic remains intact without the need for constant null checks. - Is optional chaining a staple in your workflow, or do you still prefer traditional null checks? Let’s discuss in the comments! 👇 #JavaScript #WebDevelopment #CodingTips #CleanCode #Programming #FrontendDevelopment #SoftwareEngineering #JSTips #TechTutorial #AbhishekRanjan

🚀 Day 1 / 21 — Frontend Challenge Today I built: 👉 Digital Clock ⏰ 🧠 Flow I designed before coding: Create basic UI (clock container) using HTML & CSS Use JavaScript Date object to get current time Extract hours, minutes, seconds Update UI every second using setInterval 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: Real-time digital clock Auto update every second Clean and centered UI 🚧 Challenges Faced: Initially formatting the time properly (adding leading zeros like 09 instead of 9) was tricky, but solved it using conditional logic. Also ensured smooth updates without flickering. 💡 Key Learning: Planning before coding makes development faster & cleaner. Understanding JavaScript timing functions (setInterval) is very important. 🙏 Guidance by: @Keyur Gohil 🏫 Learning at: @Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/gTJRfGWb #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

🚀 Day 11 / 21 — Frontend Challenge Today I built: 👉 Quiz App (with Timer & Score Tracking) 🧠 Flow I designed before coding: • Designed 3 main screens → Start → Quiz → Result • Planned question structure (array with options + correct answers) • Implemented timer logic (15s per question with auto move) • Added progress tracking + score calculation 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: • ⏱ Timer countdown for each question • 📊 Progress bar & question tracking • ✅ Instant feedback (correct/wrong) • 🎯 Final result with score percentage & stats • 🔁 Restart quiz functionality 🚧 Challenges Faced: Handling the timer and user interaction together was tricky. When the timer ended, I needed to automatically disable options and move to the next question without breaking the UI flow. Initially, multiple timers were running at once due to improper clearing of intervals. I fixed this by carefully managing setInterval and clearInterval, ensuring only one timer runs per question. 💡 Key Learning: Planning before coding makes development faster & cleaner 🙏 Guidance by:Keyur Gohil 🏫 Learning at:Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/dXZbRGBn #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

🚀 Day 2 / 21 — Frontend Challenge Today I built: 👉 Theme Toggle 🌙☀️ 🧠 Flow I designed before coding: Create basic UI with toggle button Add event listener on toggle click Switch between dark and light theme using class Change background and text color dynamically 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: Dark/Light mode toggle Background + text color both change dynamically 💡 Key Learning: Planning before coding makes development faster & cleaner. 🙏 Guidance by: @Keyur Gohil 🏫 Learning at: @Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/gV5_mW2q #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

🚀 Day 05/ 21 — Frontend Challenge Today I built: 👉 Login & Signup Form with Real-Time Validation 🧠 Flow I designed before coding: Created the overall UI structure with separate Login and Signup sections. Added form validation logic for email, password, and confirm password fields. Implemented real-time error handling, password visibility toggle, and smooth form switching. 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: Login and Signup forms in a single responsive interface. Real-time validation with proper error and success messages. Password show/hide toggle with smooth tab switching. 🚧 Challenges Faced: Handling real-time validation while keeping the code clean was a bit tricky, especially managing confirm password matching and displaying errors instantly without affecting the user experience. 💡 Key Learning: Planning before coding makes development faster, cleaner, and helps avoid unnecessary bugs during implementation. 🙏 Guidance by: @Keyur Gohil 🏫 Learning at: @Red & White Skill Education Official 📂 GitHub Repo: [https://lnkd.in/dWGMAr3u] #21DaysJSWithSakshi #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment #HTML #CSS #CodingChallenge #100DaysOfCode #WebDesign #JavaScriptProjects

🚀 Day 5 / 21 — Frontend Challenge Today I built: 👉 Form Validation 📝 🧠 Flow I designed before coding: Create login/signup form UI Add input fields (name, email, password) Apply basic HTML validation Use JavaScript to validate inputs on submit Show error messages for invalid inputs 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: Real-time input validation Error messages display Email & password format checking Clean form UI 💡 Key Learning: Planning before coding makes development faster & cleaner. Also learned how to validate user input for better data handling. 🙏 Guidance by: @Keyur Gohil 🏫 Learning at: @Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/g5RPC-3v #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

🚀 Day 2 / 21 — Frontend Challenge Today I built: 👉 Dark / Light Theme Toggle 🧠 Flow I designed before coding: 1. Checked localStorage for saved theme 2. Applied default/system theme if not found 3. Added toggle functionality to switch theme 4. Updated UI dynamically on toggle 5. Stored theme in localStorage for persistence 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: - Dark & Light mode toggle 🌙☀️ - Theme persistence using localStorage 💾 - Smooth UI transitions 🎨 🚧 Challenges Faced: Handling the initial theme state was tricky because I had to ensure the correct theme loads on first visit as well as after reload. Also, syncing the toggle button UI with the saved theme required careful logic. 💡 Key Learning: Planning before coding makes development faster & cleaner 🙏 Guidance by: Keyur Gohil 🏫 Learning at: Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/dXZbRGBn #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

Real talk — useEffect almost broke my brain today. 😅 My React journey continues, and I came across one of the trickiest hooks so far. useEffect. At first I felt completely lost. The Codecademy lesson talked about cleanup functions, dependency arrays, side effects — and honestly? My head was spinning. But after stepping back and breaking it down in simpler terms, here's what finally made sense to me: useEffect lets you run code at SPECIFIC MOMENTS in your component's life. Three moments to remember: ```jsx // 1. Run AFTER EVERY render useEffect(() => { }); // 2. Run ONLY ONCE when the page loads useEffect(() => { }, []); // 3. Run WHEN a specific value changes useEffect(() => { }, [forecastType]); ``` The array at the end is called the dependency array — and it controls WHEN the code runs. The analogy that helped me? Think of it like a home security camera 📹 - No array — records 24/7 - Empty array — only records on day one - With a value — only records when that thing changes It's still not 100% clear to me yet — and that's okay. Some concepts take time to really click. 🙏 The lesson today wasn't just about useEffect though — it was about being honest with myself when something is hard, taking a break, and coming back to it instead of forcing it. Still learning, still building, still showing up every day. 💪 Is there a React concept that confused you when you first learned it? Drop it below 👇 #React #JavaScript #useEffect #Frontend #LearningInPublic #100DaysOfCode #SelfTaught

Coding is not for the weak. 🤦♂️ It demands a lot from your brain. Attention, patience, logic, all at the same time. I used to wonder why developers sit in front of their screens for hours, pressing this and that on their keyboards. People calling them "tech bros" and all of that. But as my training at TechCrush progresses, I'm starting to understand. It's not that they're wasting time. They're doing what is called debugging, hunting down one small thing, hiding somewhere in hundreds of lines of code, that's standing between them and the output they want. I had my own simpler version of this experience. I wrote my HTML, linked it to my CSS, gave it instructions, and it refused to respond. VS Code was flagging an error. I kept staring at my screen trying to figure out what was wrong. Then I found it. ❌ <h3>Greatest of all is God </h3 ✅ <h3>Greatest of all is God </h3> One missing closing bracket. That's all it was. 🤦♂️ And that's not even the only way code decides to misbehave. Incomplete strings will do the same thing: ❌ let message = "God is the greatest; ✅ let message = "God is the greatest"; Notice anything? The closing quotation mark that tells JavaScript "this is a string", nowhere to be found. Variable declared, but JavaScript is looking at it like, what is this? and refusing to cooperate. Just chaos. 😂 Two small bugs. Whole output – halted. Humbling. Frustrating. And somehow, still worth it. Next week we're moving into Arrays, Function Arguments and Objects. Let's see what that brings. 👀 Still learning | Still figuring it out What is your own version of bugging and debugging experience, dop it in the comment. #TechCrush #Cohort6 #JavaScript #FrontendDevelopment #NigerianTech #Tech4AfricanScholars #TechJourney

🚀 Day 5 of #30DaysOfJavaScript — this changed how I read problems 👇 Today’s problem: Apply Transform Over Each Element Sounds simple… but I got stuck on one thought: 👉 “How do I know what parameters the function fn expects?” Sometimes it had 1 parameter, sometimes 2. And the problem didn’t clearly tell me what to pass. At first, I was waiting for instructions. But then I realized something important: 💡 In JavaScript, functions don’t care about variable names — they only care about the values passed by position. So instead of guessing, I did this: result.push(fn(element, index)); And it worked for both cases. Why? If fn needs 1 parameter → extra arguments are ignored ✅ If fn needs 2 parameters → both are used ✅ 💥 That’s when it clicked: Stop waiting for exact instructions. Start understanding how the language behaves. 👉 This is a bigger lesson than the problem itself: Good developers don’t just follow specs — they infer patterns and make safe decisions. Day 5 = less confusion, more clarity. Curious — what’s one concept that changed how you approach problems? 👇 #JavaScript #LeetCode #CodingJourney #Developers #ProblemSolving #LearnInPublic