VS Code Customization Setup Open Sourced

Week 2 of my full stack journey is in the books! Last week: HTML & CSS foundations. This week: JavaScript, and everything clicked differently. Haha lil pun for ya. What I worked through: → JS syntax: variables, conditionals, functions, scope, arrays, loops, objects, iterators → Built projects: Magic Eight Ball, Rock Paper Scissors, Number Guesser, and more → Git & GitHub: version control, commits, branches, pushing to remote repos → JavaScript + the DOM: making web pages actually interactive → Web Accessibility: designing for all users from the start The real win this week wasn't memorizing syntax. It was building things that respond, buttons that do something, pages that change, logic that runs. That feeling when your code works? Worth every hour of debugging. On to week 3. If you're learning or have made the jump into software development, let's connect! #JavaScript #Git #WebDevelopment #FullStackDevelopment #LearningInPublic #SoftwareEngineering #CareerChange #CareerGrowth

🚀 𝗘𝘅𝗰𝗶𝘁𝗲𝗱 𝘁𝗼 𝘀𝗵𝗮𝗿𝗲 𝗺𝘆 𝗹𝗮𝘁𝗲𝘀𝘁 𝗽𝗿𝗼𝗷𝗲𝗰𝘁: 𝗚𝗶𝘁𝗛𝘂𝗯 𝗜𝘀𝘀𝘂𝗲𝘀 𝗧𝗿𝗮𝗰𝗸𝗲𝗿! 💻🔍 I recently built a fully functional frontend application that simulates a GitHub Issue Tracker. This project was a fantastic deep dive into asynchronous JavaScript, external API integration, and dynamic state management! ✨ 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 & 𝗪𝗵𝗮𝘁 𝗜 𝗕𝘂𝗶𝗹𝘁: 🔹 𝗦𝗲𝗰𝘂𝗿𝗲 𝗟𝗼𝗴𝗶𝗻 𝗦𝘆𝘀𝘁𝗲𝗺: Created a simulated authentication page to restrict dashboard access. 🔹 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗔𝗣𝗜 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻: Fetched and displayed real-time issue data from an external server using Async/Await. 🔹 𝗧𝗮𝗯𝗯𝗲𝗱 𝗙𝗶𝗹𝘁𝗲𝗿𝗶𝗻𝗴: Built a smooth navigation system to seamlessly filter issues by their status (Open, Closed, or All). 🔹 𝗟𝗶𝘃𝗲 𝗦𝗲𝗮𝗿𝗰𝗵 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗮𝗹𝗶𝘁𝘆: Integrated a search feature that queries the API to instantly find specific issues by text. 🔹 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗠𝗼𝗱𝗮𝗹𝘀: Implemented dynamic modals that fetch and display detailed information (like author, priority, and date) when a specific issue card is clicked. 🛠️ 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸: HTML5 | Tailwind CSS | DaisyUI | Vanilla JavaScript (ES6+) | REST APIs Working on this project really leveled up my understanding of DOM manipulation, handling multiple API endpoints, and building a clean, responsive UI. 🔗 𝗟𝗶𝘃𝗲 𝗣𝗿𝗲𝘃𝗶𝗲𝘄: https://lnkd.in/gBqxh9AY 💻 𝗚𝗶𝘁𝗛𝘂𝗯 𝗥𝗲𝗽𝗼𝘀𝗶𝘁𝗼𝗿𝘆: https://lnkd.in/gvkaBkV4 I'd love to hear your thoughts and feedback! Let me know what you think in the comments. 👇 #WebDevelopment #JavaScript #Frontend #TailwindCSS #DaisyUI #APIIntegration #CodingJourney #BuildInPublic #SoftwareEngineering

🚀 Stop adding 100+ event listeners to your code! Ever built a long list or a dynamic dashboard and felt your code getting "heavy"? 🏋️♂️ If you're manually attaching a click listener to every single item, you're missing out on one of JavaScript’s most powerful patterns: Event Delegation. The Magic of Event Bubbling 🫧 In the DOM, events don't just stay where they happen. When you click a button, that event "bubbles" up like a bubble in water—from the button, to its parent, to the body, all the way to the root. The Solution: Event Delegation 🤝 Instead of giving a listener to every child, you give one listener to their parent. Why this wins: ✅ Memory Efficiency: One listener uses far less memory than 100. ✅ Dynamic Support: It automatically works for new items added later! ✅ Cleaner Code: Centralize your logic in one place. How are you optimizing your DOM interactions lately? Let's discuss below! 👇 #JavaScript #WebDevelopment #CodingTips #FrontendDev #CleanCode #SoftwareEngineering

A developer portfolio with keyboard shortcuts. Not as a gimmick — as a philosophy. This DevTools-focused portfolio reflects a developer who thinks keyboards are underrated and bundle size is a credibility signal. Built with vanilla HTML/CSS/JS on Vite for sub-second load times. • Zero-framework architecture — Vite 6 as a bundler only, no runtime overhead • Keyboard-first nav with a full shortcuts modal (⌘K, project filters, section jumps) • Serif type pairing: Playfair Display for identity, JetBrains Mono for code • Print-optimized styles that export cleanly as a PDF résumé Choosing vanilla JS was deliberate. When your audience is engineers who inspect source code, a clean, fast bundle says something. Frameworks are powerful — but they're also a choice you owe an explanation for. Should developer portfolios feel different from regular portfolios — or should they just be better? #DevTools #Portfolio #JavaScript #WebDev #OpenSource

Boost Your Productivity with These 3 VS Code Extensions As a developer, having the right tools can make a huge difference. Here are 3 VS Code extensions I use daily to stay efficient and write clean code: ⚡ Live Server Instantly launches your project on localhost with auto-reload — perfect for quick frontend development with Vanilla JS. 🔍 GitLens Supercharges Git inside VS Code. Track changes, view commit history, and understand who modified what — all without leaving your editor. 🎨 Prettier Automatically formats your code on save, keeping everything clean, consistent, and easy to read. 💡 Simple setup, powerful workflow: Code → Save → Auto format → Auto reload → Track changes Sometimes, you don’t need heavy frameworks — just the right tools. #VSCode #WebDevelopment #JavaScript #DeveloperTools #Productivity #CodingLife

It's a frontend project built with vanilla HTML, CSS, and JavaScript that lets you search and track GitHub issues in real time using the GitHub API. But honestly? The project itself isn't the whole story. Building it forced me to actually understand things I'd been glossing over: → The difference between var, let, and const (and why it actually matters) → How the spread operator (...) makes copying and merging data cleaner → When to use map() vs filter() vs forEach() — not just memorizing them, but feeling when each one fits → Why arrow functions aren't just "shorter" — they change how `this` behaves → How template literals make string handling so much more readable Every concept clicked differently once I had a real problem to solve. That's the thing about building projects — documentation teaches you the words, but shipping teaches you the language. Live site → https://lnkd.in/emgkz-EC Code → https://lnkd.in/eRsba7vK If you're also learning in public, let's connect. What project helped things finally click for you? #JavaScript #WebDevelopment #BuildingInPublic #Frontend #OpenSource #100DaysOfCode

Clean code isn’t just about writing good functions… it starts with your project structure. As I worked on my frontend projects, I realized that a messy folder structure quickly leads to: • Duplicate logic • Confusing imports • Hard-to-maintain code That’s why I started organizing my projects using a structure like: API, Components, Hooks, Pages, Services, Utils… It made a huge difference in how I build and scale applications. Personally, I like a hybrid approach: • Feature-based for larger modules • Folder-based for shared resources It keeps things clean, scalable, and easier to work with in a team. Curious to hear from other developers 👇 Do you prefer feature-based or folder-based architecture?

⚛️ React.js Context API Cheat Sheet Context is React's built-in state management system. It allows you to share a piece of information across multiple components, without having to pass props manually. It has a more smooth learning curve compared to Redux, another popular statement library, and offers decent capabilities and performance. Context is ideal for theme settings, basic shopping carts, user authentication, notifications, and so on. This cheatsheet discusses React context in depth, we'll cover: ✅ Creating context ✅ Providing context ✅ Consuming with `useContext` ✅ Default values ✅ Nested providers ✅ Updating context safely ✅ Performance tips ✅ Best practices Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://lnkd.in/gvzdeSJn --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #React #Context #JavaScript #WebDevelopment #CheatSheet #Frontend #Coding

🔑 JavaScript `this` Cheatsheet Confused by how `this` works in JavaScript? You're not the only one. That's why we created this cheatsheet to help you sort `this` out. We'll cover `this` in: 🌍 Global context 🔧 Function calls 🏠 Object methods 🏗️ Classes ➡️ Arrow functions 📞 Explicit binding (`call`, `apply`, `bind`) 🖱️ Event handlers Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #WebDevelopment #CheatSheet #Coding #CSS #Filters #UI #Frontend

Hey everyone! I'm continuing my 5-project challenge to strengthen my frontend skills, and I'm excited to share : Project 2/5: GitHub User Finder! This project was built from scratch using HTML, CSS, and Vanilla JavaScript. My main focus here was on asynchronous programming and seamless API integration to create a fluid user experience. Here are the main features I implemented: ✅ Real-time GitHub Profile Search ✅ Dynamic display of user stats (followers, following, repos) ✅ Automatic sorting to show the 6 most recently updated repositories ✅ Full profile overview with links to bio, blog, and Twitter ✅ Sleek, responsive dark-themed UI Building this helped me sharpen my skills in: 💡 Asynchronous JavaScript: Using fetch and async/await to retrieve real-time data from external APIs. 💡API Integration: Mastering the GitHub REST API and using query parameters for advanced sorting. 💡Dynamic DOM Updates: Efficiently rendering complex data structures and repository lists without any frameworks.Check out the demo video below to see it in action! 🎥 Next up is Project 3... Code & Documentation on GitHub: 🔗 https://lnkd.in/dMnt-pEs #WebDev #Frontend #JavaScript #HTML #CSS #CodingChallenge #DeveloperCommunity #GitHubAPI #OpenSource