JavaScript: Get CSS properties of an element before inserting it into the page

JavaScript MagicHere’s a fun one: You’ve got something like an icon image, and you want to insert it into your web page using JavaScript.

Easy, right? Well, maybe not…

What if you need to know the size of the <IMG> before you plop it in the DOM tree, but you also have @media queries in CSS that change the width on the fly, for example?

Maybe your CSS shrinks or expands the image based on device orientation, screen size, etc.

Can it be done? Why yes, it can!

(more…)

Are messaging apps REALLY secure?

Are Messaging Apps really secure?Person 1: My messenging app is more secure.
Person 2: No, MINE is!
Person 3: No way, I ONLY use Signal – it’s the most secure!

Okay, y’all are fired.

What if I told you that NONE of the messaging apps you use are really, truly secure?

Sound crazy?

Well, it is. The encryption is as good as you’re gonna get.

The problem is the way it’s used that actually matters…

(more…)

How did this EVER work?!

The one thing no coder will ever tell you...What’s the one thing no coder wants to talk about?

Chances are, you know a few coders. They’re everywhere these days!

What you might not know is that most of them have experienced something, well, unexplained: code that works, but shouldn’t. At all.

It’s just part of many programmers’ lives. But what’s really going on here?

How is it that something that never should have worked in the first place works perfectly – sometimes, for years?!

(more…)

The Best JavaScript Debounce Function in the Universe

If you code in JavaScript, you should know all about debouncing functions.

When an event listener such as a window ‘resize’ fires, sometimes it will fire 72,000 times per second. That means your callback function is also firing 72,000 times in a row, bogging down the browser.

This isn’t as much of a problem as it used to be, but debouncing is still needed and should still be used.

So what’s the best way to debounce/throttle in JavaScript?

(more…)

JavaScript: How to detect when an image is loaded?

JavaScript Detect Image LoadedLet’s say you’re writing a web app, and of course you’re using JavaScript. So far, so good!

But then let’s say you need to load some images on the fly, and then do something useful AFTER each image is fully loaded.

IOW, maybe you want to adjust the layout of the image modal that pops up, or you want to do something crazy with a caption, or whatever…

Naturally, you’d use JavaScript to do this – including changing CSS on the fly.

So the question is: How do you use JavaScript to detect when an image is fully rendered on the page – not just loaded?

(more…)

How to Debug web sites on Mobile Devices

Android Remote USB DebuggingIf you’ve ever designed a web site, you know that the ‘dev tools’ built into browsers are invaluable.

You can play with the CSS, debug JavaScript, see requests in realtime, and so on.

That’s all great for desktop, but what about debugging on mobile?

Typically, developers jump through all sorts of hoops – including hacks in their code that are added strictly for development debugging.

Isn’t there a better way? Why yes, there is…

(more…)