Terence Eden. He has a beard and is smiling.

Terence Eden’s Blog

Theme Switcher:

Reasonably accurate, privacy conscious, cookieless, visitor tracking for WordPress

· 6 comments · 1,100 words · Viewed ~723 times


The Logo for WordPress.

I am vain. I like to know which of my blog posts have "done numbers". I get a little thrill knowing that an old post I wrote has been read by someone in a land I've never visited. I'm curious and want to know if a newsletter has linked to me. At the same time, I don't want to know too much about people. I don't want to stalk them around the web. I refuse to care how long they spend with me. I…

1KB JS Numbers Station

· 7 comments · 700 words · Viewed ~11,803 times


Random monochrome tiles with the word Numbers Station superimposed.

Code Golf is the art/science of creating wonderful little demos in an artificially constrained environment. This year the js1024 competition was looking for entries with the theme of "Creepy". I am not a serious bit-twiddler. I can't create JS shaders which produce intricate 3D worlds in a scrap of code. But I can use slightly obscure JavaScript APIs! There's something deliciously creepy about…

Using the Web Crypto API to Generate TOTP Codes in JavaScript Without 3rd Party Libraries

· 2 comments · 750 words · Viewed ~794 times


A chunky wristwatch showing the time and a selection of 6 digit codes and their corresponding entities.

The Web Crypto API is, thankfully, nothing to do with scammy cryptocurrencies. Instead, it provides access to powerful cryptographic features which were previously only available in 3rd party tools. So, is it possible to build a TOTP code generator without using any external JS libraries? Yes! And it is (relatively) simple. Here's the code that I've written. It is slightly verbose and contains…

Minimum Viable Clustered-Marker Globe using OpenFreeMap and MapLibre GL

· 1 comment · 600 words · Viewed ~619 times


I love OpenFreeMap it is a quick, easy, and free way to add beautiful maps to your Open Source projects. With the latest release of MapLibre-GL I wanted to see if there was an easy way to use both to make an interactive globe with clustered markers. Spoiler alert: yes! Basic Globe Here's a basic example which I've trimmed down from this example. When you load the below code, you'll get a…

I can't use my number pad for 2FA codes

· 10 comments · 400 words · Viewed ~5,190 times


Computer number pad with the number 7 in the top left.

This has to be the most infuriating bug report I've ever submitted. I went to type in my 2FA code on a website - but no numbers appeared on screen. Obviously, I was an idiot and had forgotten to press the NumLock button. D'oh! I toggled it on and typed again. No numbers appeared. I switched to another tab, my numbers appeared when I typed them. So I was reasonably confident that my keyboard was…

What's the window size of a background tab?

· 1 comment · 350 words · Viewed ~732 times


The Outer window size is zero by zero.

Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view. What's causing this? Try opening this link to a window size detector in a background tab. Then visit that tab. On Chrome, this is what I see. If I hit the refresh button on that tab, the …

Just because I have a vertical screen, doesn't mean I'm on a phone!

· 10 comments · 700 words · Viewed ~31,263 times


The Just Eat website.

I'm a weirdo - I fully admit that. As part of my home working set up, I use a vertical monitor. I read and write a lot of long documents - and this form factor suits me perfectly. I've been doing this for a long time. It is a natural part of my workflow. For anything longer than an email, it's the perfect orientation. Most Linux apps work just fine like this - although menu buttons tend to…

Please stop using CDNs for external Javascript libraries

· 36 comments · 550 words · Viewed ~46,268 times


The HTML5 Logo.

I want to discuss a (minor) antipattern that I think is (slightly) harmful. Lots of websites use large Javascript libraries. They often include them by using a 3rd party Content Delivery Network like so: <script src="https://cdn.example.com/js/library-v1.2.3.js"></script> There are, supposedly, a couple of advantages to doing things this way. Users may already have the JS library in their…

Major sites running unauthenticated JavaScript on their payment pages

· 12 comments · 700 words · Viewed ~34,537 times


HTML code from Spotify.

A few months ago, British Airways' customers had their credit card details stolen. How was this possible? The best guess goes something like this: BA had 3rd party JS on its payment page <script src="https://example.com/whatever.js"></script> The 3rd party's site was hacked, and the JS was changed. BA's customers ran the script, which then harvested their credit card details as they were…

Redirect GitHub ID to Username

· 200 words · Viewed ~4,035 times


A screen of JSON code showing my details.

Scratching my own itch here... GitHub users have a username (mine is @edent) and have a user ID number (mine is #837136). If you want to redirect a user ID to a username, you can use the little service I've cobbled together: https://edent.github.io/github_id/#837136 That will take your browser to my GitHub page, using nothing but my ID. Why? Some login services only give you the GitHub…

This SVG always shows today's date

· 20 comments · 250 words · Viewed ~52,597 times


A graphic of a calendar showing the date "February 25 Sunday"

For my contact page, I wanted a generic calendar icon to let people view my diary. Calendar icons are almost always a skeuomorph of a paper calendar, but I wondered if I could make it slightly more useful by creating a dynamic icon. Here it is, an SVG calendar which always display's today's date: The background image is derived from the Twitter TweMoji Calendar icon - CC-BY. Text support in …

Using canvas to shrink images for Google Cloud Vision

· 350 words


The HTML5 Logo.

I've started using Google Cloud Vision for running text detection on OpenBenches images. There's just one problem - Google limits the size of the files that it will accept to 4MB. Why? Who knows! Obviously, it's easy to shrink an image server-side, but how do we do it in the browser? First, let's take a bog-standard file chooser and add a <canvas> element. <input id="userFile" type="file"…