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…)

Is Chrome’s Idle Detection really a threat to privacy?

IdleDetector APIChrome 94 was recently released with a new feature: Idle Detection.

Specifically, there’s a new JavaScript API called IdleDetector. It reports two things to the JS code of the web page you’re viewing: keyboard/mouse activity, and if your screen is locked or not.

Much has been said about the diabolical nature of this new capability in Chrome…

Thing is, while we can be forgiven for doubting Google’s motives in adding this feature, it just so happens that Idle Detection is actually quite safe – and useful!

(more…)

Why your WebRTC calls aren’t working: Timing is everything!

WebRTC Code ExplainedWebRTC is pretty cool. It allows any web browser to make voice and video calls to any other browser – no extra software required!

The problem is that while there are tons of guides and gobs of sample code out there, nobody really explains how it works.

The end result is that you program away, and then discover that OOPS! It’s not connecting…

So, let’s see how to make WebRTC actually work!

(more…)

The EASY way to use Material Design Icons

Material Design Icon Font ViewerIf you’re a web developer, you’ve probably used Google’s Material Design Icon font. It’s a great way to include 1 small file and get gajillions of icons – instead of making 20 different pixel sizes of numerous icons, and then creating sprites and all that jazz.

The trouble is that until now, there was no reference for PAST versions of the MD icon font. You’re supposed to just load it from Google’s servers and be happy.

But what if you you don’t need 1800+ icons at 102kB in file size?

What if an older version of the MD icon font is just fine, you want to load the font file from your own servers or CDN, and you just want to know what icons are available in that older version?

Now, you’re all set!

(more…)

How to learn to code (or anything else)

Learn to Code - or whatever else you want to do!For reasons unknown to me, other people are always asking me how to learn programming.

Well, there’s the traditional route: go to school, become a coder. Done!

But as we all know, many of the best and most famous programmers were those who dropped out of school and were essentially self-taught.

Are they onto something?

(more…)

Fix stunnel “Bad magic at ssl.c” error / crash on Ubuntu

stunnel bad magic ssl.cUbuntu server 18.04 LTS is a rather popular linux OS for servers.

Unfortunately, it doesn’t come without its problems. For example, the current version of stunnel – an SSL tunnel – is woefully outdated.

It seems that although Canonical is aware of the problem, they have no intention of fixing it!

Fortunately, there’s an easy workaround that’s much simpler than you might think…

(more…)