Why I stripped my VS Code setup to the bare minimum

🎨✨ Just launched a small vibe-coded pet project: https://fluentjot.design It’s a searchable, downloadable playground for Fluent UI icons converted to Excalidraw format—perfect for sketch-style mockups, playful diagrams, or just adding a bit of hand-drawn charm to your flows. Built with: 🧠 A custom Python converter: https://lnkd.in/dBnqQ7pH 🖼️ SVG-to-Excalidraw logic that preserves clarity while embracing squiggles 🔍 A minimal UI for previewing, filtering, and grabbing icons fast Why? Because sometimes I (or you might) want quick access to a large selection of icons when making your Excalidraw sketches. And because I wanted to explore writing code by just prompting. Learned a ton by doing this on how pair-programming with #Github #Copilot feels from zero to product. #Excalidraw #FluentUI #OpenSource #DesignTools #SideProject #SVG #Icons

🚀 Just built a Color Flipper Project! 🎨 I created an interactive Color Flipper where: Clicking the “Color Flipper” button changes the background color randomly. Clicking on different color buttons updates the displayed image dynamically. 💡 Key JavaScript concepts I used: DOM Manipulation → Selecting elements, updating styles and image attributes dynamically. Event Listeners → Handling button clicks to trigger UI changes. Random Number Generation → Creating random hex colors. Data Attributes (data-*) → Linking buttons to images cleanly. ✨ What I learned: Connecting user interaction with UI updates in a practical, interactive project. Check out the code here: https://lnkd.in/ge6G2yk5 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #DOMManipulation #JavaScriptProjects #60DaysOfCode #PortfolioProject #InteractiveUI #WebDesign #LearnToCode

GitHub: https://lnkd.in/eWWEya5y 🔥 Project 4/20 - Image Slider ✨ Create a Smooth Image Slider using JavaScript + CSS Transitions! ✨ Image sliders are timeless — from 2010’s web nostalgia to modern UI trends, they’ve never gone out of style. This project shows how to build a clean, auto-playing image slider using: setInterval() for automatic transitions Arrays to store image elements CSS transitions for buttery-smooth fade effects A perfect mini-project for your portfolio or GitHub repo, showcasing practical DOM manipulation and animation logic. Don’t just code — craft interfaces that move. 🚀 Save this post and tag a dev who loves clean UI ❤ #webdevelopment #javascript #frontenddevelopment #cssanimations #htmlcssjs #webdesign #developers #codinglife #programming #frontendprojects #techcommunity #learnjavascript #dommanipulation #webdevcommunity #uicomponents #codingtutorial #githubproject #setinterval #frontendinspiration #modernui #codewithusman #softwareengineering #webdevlearning #programminglife #creativefrontend

Built a classic Snake game where the snake munches food, grows longer, and speeds up as you score—made with HTML, CSS, and JavaScript. 🎮🍎 This project sharpened logic-building through grid movement, collision detection, and state management, and boosted problem-solving with clean loops, keyboard input handling, and modular code. 🚀 Sheryians Coding School Ankur Prajapati What I built 🧩 - Snake that moves on a grid, eats food, grows, and ends on self/wall collision. 🐍🍏 - Smooth controls with arrow keys and a responsive game loop. ⏱️🎯 What I learned 🧠 - Game state management: positions, direction, score, and restart flow. 📊 - Collision logic and boundary checks for reliable gameplay. 🧪 - DOM and canvas updates on intervals for real-time rendering. 🖼️ - Writing modular, reusable functions improved code clarity. 🧩 - High-score saving with localStorage. 🏆 Why it helped 💪 - Strengthened algorithmic thinking and debugging skills. 🔍 - Improved understanding of loops, conditionals, and data structures (arrays/queues) for movement and growth. 🧵 - Built confidence to tackle more complex interactions and animations next. Next upgrades 🔧 - Add levels, obstacles, and increasing difficulty. 🧱 - Mobile-friendly swipe controls and sound effects. 📱🔊 #JavaScript #WebDevelopment #GameDev #HTML #CSS #Frontend #CodingJourney #LearnByBuilding #IndieDev #CodingChallenge #100DaysOfCode #DevCommunity

Ever seen your cursor make real water ripples? I’ve been playing around with shaders and fluid motion lately and ended up building this little experiment a liquid cursor that distorts and reacts like a real water surface. It’s made with Three.js, WebGL, and some custom GLSL shaders. Everything updates in real time ripples, distortion, damping no physics engine, just math and pixels. 🎥 Short demo below 🔗 Full live version: https://lnkd.in/dZAPNUWv I’ve been sharing more small interactive experiments like this on CodePen, so if you enjoy creative coding stuff, feel free to follow me there. What do you think would you ever add something like this to a landing page or portfolio? This project was inspired by a Shadertoy by nimitz (https://lnkd.in/d5gbzzYg) I wanted to explore how that concept could work interactively in a browser environment. #WebGL #ThreeJS #CreativeCoding #ShaderArt #FrontendDevelopment  #InteractionDesign #CodePen #JavaScript #GLSL #UIUX #MotionDesign #linkedin LinkedIn CodePen awwwards. #awwwards

Leveling Up My JavaScript Skills with a 3D Rubik's Cube Simulator! After a quick brainstorming session on how to best practice and polish my JavaScript, I decided on a truly engaging challenge: building a 3D Rubik's Cube Simulator. Github Repo: https://lnkd.in/gFDRd7A7 This project isn't just a fun exercise; it’s a deep dive into several key areas: 3D Rendering: Implementing the cube's geometry and transformations (potentially using libraries like Three.js or pure WebGL). State Management: Handling the complex state of the cube's individual pieces and colors after each rotation. Algorithm Design: Logic for ensuring correct face and piece movements. User Interaction: Mapping keyboard or mouse inputs to complex 3D rotations. Excited to share the final result soon! What's the most challenging project you've taken on recently to hone your skills? #JavaScript #WebDevelopment #ThreeJS #CodingChallenge #SoftwareEngineer #ProjectShowcase

Thrilled to share my latest side project — “Number Guessing Game 🎯” built using Streamlit! This interactive web app challenges you to guess a number between 1 and 100 — with dynamic feedback, hints, game stats, and a fun “GIF's” to keep things exciting 🤔✨ Tech Highlights: 💻 Frontend: Streamlit for a sleek, interactive UI 🎨 Styling: Custom CSS animations & gradient themes 🧠 Game Logic: Python-based random number generation with real-time user feedback 🎬 Fun Factor: GIF reactions for “too high”, “too low”, and “winner” moments This project was a fun way to blend frontend design, interactivity, and logical thinking — proving even simple games can be beautiful and engaging when powered by Python! Huge thanks to my mentor Aneesha Parveen S K for guiding me 🙏. #Streamlit #Python #WebApp #SideProject #MachineLearning #DataScience #WebDevelopment #PythonProjects #FunWithCode #StreamlitApp #CodingJourney #GamifiedLearning

It's one thing to see data; it's another to walk through it. This weekend's "Data to Dimensions" workshop by AT Speaks was a brilliant deep dive into bringing structured data to life in 3D using React.js and Three.js. 💥 Three takeaways I'll be using immediately: Setting up the core 3D scene (camera, lighting, renderer) within a React component structure. The fundamentals of mapping data concepts to 3D geometries and materials. Integrating user interactions, from orbit controls (for drag/zoom) to custom UI toggles. A hands-on contest followed the session, challenging us to build our own scene. I created "My 3D House," an interactive environment with controls to change the time of day (from Day to Night/Sunset). Watch the short demo video to see it in action! A huge thank you to Keerthana M G and Atchaya Senthilkumaran Senthikumar for the fantastic, practical session. #DataToDimensions #ReactJS #ThreeJS #DataVisualization #WebGL #JavaScript #Frontend #3DModeling #ATSpeaks

𝐂𝐒𝐒 𝐏𝐨𝐬𝐢𝐭𝐢𝐨𝐧: 𝐅𝐢𝐱𝐞𝐝 𝐯𝐬 𝐒𝐭𝐢𝐜𝐤𝐲 — 𝐖𝐡𝐚𝐭’𝐬 𝐭𝐡𝐞 𝐃𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐜𝐞? 🎯⁣ ⁣ Follow PrivoLabs For More Interesting Posts Both fixed and sticky are powerful CSS position values — but they behave very differently once you scroll! 👇⁣ ⁣ 🔹 𝐩𝐨𝐬𝐢𝐭𝐢𝐨𝐧: 𝐟𝐢𝐱𝐞𝐝⁣ The element is fixed to the viewport — it stays in the same place even when the page scrolls.⁣ It’s positioned relative to the browser window, not its parent.⁣ ⁣ 𝐂𝐨𝐦𝐦𝐨𝐧 𝐮𝐬𝐞: Navigation bars, floating buttons, or sticky headers that stay visible.⁣ ⁣ 🔹 𝐩𝐨𝐬𝐢𝐭𝐢𝐨𝐧: 𝐬𝐭𝐢𝐜𝐤𝐲⁣ ⁣ The element acts like relative until a specific scroll position is reached — then it becomes fixed.⁣ It’s positioned relative to its scroll container (parent).⁣ ⁣ 𝐂𝐨𝐦𝐦𝐨𝐧 𝐮𝐬𝐞: Table headers, section titles, or in-page sticky menus.⁣ ⁣ 🚀 𝐏𝐫𝐨 𝐓𝐢𝐩:⁣ ⁣ If your sticky element isn’t working, make sure its parent container has enough height and doesn’t have overflow: hidden.⁣ ⁣ Please Follow Shivani Sharma For Interesting Posts #css #frontenddevelopment #webdevelopment #coding #developerlife #webdesign #uiux #frontend #programming #techlearning #softwaredeveloper #htmlcss #webdevtips #codingcommunity