Vanilla-Js

JS frameworks be like: “I see you clicked. Let me rerender your whole soul.” We need to talk. While everyone’s out there building apps that could power a small rocket ship just to display a todo list, I’m over here having a love affair with document.querySelector. Yeah, that’s right – the same DOM API that’s been sitting in your browser since Obama was president (the first time). The Framework Fever Dream Don’t get me wrong, I love React, Vue, and all the cool kids on the block. But sometimes I feel like we’ve collectively forgotten that browsers got really good at DOM manipulation. Like, scary good. Modern browsers are basically Formula 1 cars, and we’re strapping a whole trailer to them because we’re afraid to drive stick. ...

this is the fourth post of Building a Minimalist Task Manager series part 1 - Setting Up the Bare-Bones Task Manager with HTML, CSS & JS part 2 - Adding the Three-Task Focus Rule (And Making It Feel Good) part 3 - Making It Stick: Adding localStorage and Task Persistence Welcome to the grand finale of our vanilla JavaScript task manager series! We’ve built something genuinely useful - a task manager that enforces focus, persists your data, and lets you prioritize with drag-and-drop. But you know what separates good software from great software? The little details that make you smile while using it. ...

This is the third post of Building a Minimalist Task Manager series part 1 - Setting Up the Bare-Bones Task Manager with HTML, CSS & JS part 2 - Adding the Three-Task Focus Rule (And Making It Feel Good) part 4 - The Finishing Touches: Keyboard Shortcuts, Task Editing & Delightful UX Welcome to Post 3 of our minimalist task manager series! We’ve built a solid foundation and added the three-task focus rule with smooth animations. But there’s one glaring issue, it doesn’t even survive the F5 button. ...

This is the second post of Building a Minimalist Task Manager series part 1 - Setting Up the Bare-Bones Task Manager with HTML, CSS & JS part 3 - Making It Stick: Adding localStorage and Task Persistence part 4 - The Finishing Touches: Keyboard Shortcuts, Task Editing & Delightful UX Welcome back to our vanilla JavaScript task manager series! In the last post, we built a solid foundation with basic add/delete functionality. Today, we’re adding the star of the show: the three-task limit that gives our app its personality and purpose. ...

This is the first post of Building a Minimalist Task Manager series part 2 - Adding the Three-Task Focus Rule (And Making It Feel Good) part 3 - Making It Stick: Adding localStorage and Task Persistence part 4 - The Finishing Touches: Keyboard Shortcuts, Task Editing & Delightful UX Welcome to the first post in our Building a Minimalist Task Manager series! If you’re tired of reaching for React every time you want to build something interactive, or if you’re just starting your JavaScript journey and want to understand how web apps actually work under the hood, you’re in the right place. ...

This is the third post of Drawing on the Web part 1 - Drawing on the Web: Getting Started with Canvas and Mouse Events part 2 - Adding Some Flair: Brush Sizes and Colors for Our Drawing App Welcome to the grand finale of our canvas drawing app series! We’ve come a long way from our humble black-brush beginnings. We can now draw with different brush sizes and colors, but there’s still something missing – what happens when you mess up? And more importantly, how do you show off your digital artwork to the world? ...

This is the second post of Drawing on the Web part 1 - Drawing on the Web: Getting Started with Canvas and Mouse Events part 3 - The Finishing Touches: Clear and Save Your Digital Masterpieces Welcome back to our canvas drawing adventure! In our last post, we created a basic drawing app that could handle mouse events and let us draw with a black brush. It was functional, but let’s be honest – it had about as much personality as a default Windows screensaver. ...