Drawing on the Web: Getting Started with Canvas and Mouse Events

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

August 3, 2024 · 4 min · me

Stop Blaming JavaScript for Your CSS Incompetence

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

July 1, 2024 · 8 min · me

It's Not JavaScript, It's You: Developer Anti-Patterns and Performance

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

June 15, 2024 · 5 min · me

Why 0.1 + 0.2 Doesn't Equal 0.3 (And Why That's Actually Fine)

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

May 19, 2024 · 5 min · me

NaN is a Number: JavaScript's Greatest Philosophical Crisis

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

April 12, 2024 · 7 min · me

JavaScript Type Coercion Madness: When Empty Arrays and Objects Drive You Crazy

Picture this: You’re debugging some JavaScript code at 2 AM, your coffee has gone cold, and you stumble upon something that makes you question everything you thought you knew about programming. You type [] + [] into your browser console, expecting… well, honestly, you’re not sure what to expect. But when you see an empty string pop up, followed by [] + {} returning "[object Object]", you start wondering if JavaScript is just trolling you at this point. ...

March 19, 2024 · 4 min · me

JavaScript Modules: ESM vs CommonJS - Pick a Team (or Both)!

Hey there, fellow code wranglers! Ever been knee-deep in a JavaScript project, humming along, and then BAM! You hit a file using require() and another using import, and your brain does a little “system overload” dance? Or maybe you’ve tried exporting something and wondered if it should be module.exports, exports.thing, or export default? Yeah, you’re not alone in this beautiful chaos that is JavaScript modules. It feels like a perennial “pick a team” debate: CommonJS vs. ECMAScript Modules (ESM). Let’s unwrap this present of perplexity and see if we can make sense of it all. No boxing gloves required, just a cup of your favorite beverage and maybe a few brain cells. ...

October 27, 2023 · 5 min · me