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

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

A new type of App you’re gonna LOVE!

Progressive Web Apps on DesktopUntil now, apps were for smartphones and tablets. But that’s all about to change with PWAs: Progressive Web Apps!

PWAs are a new(ish) type of app that is web-based.

In other words, PWAs are literally web sites + JavaScript encapsulated in a window on whatever gizmo you want to install them on.

That means you can use the same app on your phone, tablet, desktop, or laptop – whether you use Windows, linux, or Mac.

Progressive Web Apps also work differently than normal apps, making them a bit more secure and privacy-oriented than traditional native apps.

So, what are these things and how do they work?

(more…)

How to debug JavaScript on mobile devices

Mobile JS DebuggingAh yes, the Mobile Revolution!

It’s fabulous – unless you actually create web sites and other stuff that use JavaScript.

In desktop web browsers, you generally get a web inspector / debug console that lets you do all kinds of fun stuff, including debugging your JS code.

But on mobile, well, no such luck.

In fact, most mobile browsers give you absolutely nothing! Fortunately, there’s a neat trick that fixes everything.

(more…)

PikaJS: Think jQuery but smaller, lighter, and just as easy to use

(Updated February 2021 for PikaJS 1.2)

Introducing PikaJS: a jQuery-like JavaScript library that simplifies the client-side scripting of HTML.

I had been using jQuery and PrototypeJS, and I needed to ditch PrototypeJS at long last.

My colleague Michael Franzl said, “Hey! Check out this Balalaika thing!”

So I did.

Unfortunately, Balalaika doesn’t give you many methods to do cool stuff. That’s left as an exercise for the programmer…

So, I decided to make my own jQuery, and PikaJS is the result!

(more…)

How to add an EU Cookie Consent popup to your web site

Cookie Consent / IdiocyCookie Consent laws: you have surely seen them.

You go to a site, and you get a popup or bar at the top of the site that says, “We use cookies, blah blah blah…”

There is usually a “Learn more” link, and sometimes a way to accept or reject that site’s use of cookies.

The reason for this is a very stupid law implemented in the European Union that is supposed to protect people from… well, actually, it doesn’t protect anyone from anything. Okay, technically, it protects you from your sanity.

Especially if you use Google Adsense to put ads on your web site, you probably have received an e-mail from them telling you that you must have a Cookie Consent thingie on your site by the end of September 2015 in order to comply with yet another EU cookie law.

Right, so, how do you add cookie consent to your site – quickly and easily?

(more…)

Understanding Embed Codes

Embed CodesYou have probably encountered embed codes before, but they may seem like a bit of a mystery.

An embed code is, in short, a bit of HTML that allows you to embed part of another web site on your own – like a YouTube video, for example.

Embed codes come in two general flavors these days, and each has its strengths and weaknesses.

So, how do embed codes work? Why are some hugemongous, and others teeny-tiny? Are iframe tags really the spawn of the devil?

Read on!

(more…)