Posts

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. ...

This is the first post of Drawing on the Web part 2 - Adding Some Flair: Brush Sizes and Colors for Our Drawing App part 3 - The Finishing Touches: Clear and Save Your Digital Masterpieces Remember when you were a kid and discovered that you could draw on foggy car windows? Well, today we’re going to recreate that magical feeling, but digitally! We’re building a tiny drawing app using nothing but vanilla JavaScript and the HTML5 <canvas> element. ...

Unpopular Opinion Alert: Your UI doesn’t suck because JavaScript is hard. It sucks because you never bothered to learn CSS properly. Picture this: You’re building a simple layout, and things aren’t aligning quite right. Instead of figuring out why your flexbox isn’t working, you reach for JavaScript. “I’ll just calculate the height dynamically,” you tell yourself. “I’ll use getBoundingClientRect() to position this element.” Sound familiar? Yeah, I thought so. Here’s the thing: Flexbox isn’t a yoga pose. Learn it. ...

Unpopular Opinion: JavaScript isn’t slow. You are. We’ve all been there. Your app is sluggish, your users are complaining, and your first instinct is to scream into the void, “Dang it, JavaScript! You’re so slow!” Or Python. Or PHP. Or Ruby. Pick your poison. But more often than not, the language itself, especially a mature, highly optimized one like JavaScript (thanks, V8 engine!), isn’t the root cause of your performance woes. It’s usually a combination of developer anti-patterns. ...

Picture this: You’re debugging what should be a simple calculation in your JavaScript code, and you stumble upon something that makes you question everything you thought you knew about math. You open up your browser’s console and type: console.log(0.1 + 0.2); // Output: 0.30000000000000004 Wait, what? Did my computer just fail elementary school math? Before you start shopping for a new laptop or questioning the fundamental laws of the universe, let me assure you: your computer is fine, and so is math. Welcome to the wonderfully weird world of floating-point arithmetic! ...

There are moments in every developer’s life when JavaScript forces you to question the fundamental nature of reality. Today, we’re diving into one of the most existentially disturbing features of the language: the fact that NaN (literally “Not a Number”) is, according to JavaScript, actually a number. console.log(typeof NaN); // "number" Let that sink in for a moment. The thing that is explicitly named “Not a Number” is classified as a number. It’s like JavaScript is gaslighting us at the language level. ...