Using a CSS cursor to show the external link's favicon


A link with the Google logo hovering over it.

How do you know where this link goes to? If you're on a desktop, you might notice that hovering your mouse over it displays the destination somewhere on your screen. If you're a geek, you could view the source-code of a page. Can we improve the experience for users? Here's an attempt. Try hovering your cursor over this link to a popular website. This is what it should look like: Here's how it works. Cursor Styles CSS allows us to change the icon displayed by a cursor. There are dozens …

Continue reading →

Inline CSS - The Link "Cheat"


The HTML5 Logo.

I am a bear of very little brains sometimes. I had a site which, for various boring reasons, was printing a <style> element in the middle of the HTML's body. Because <style> is a metadata element, it should only appear within the <head> element. This is OK: <!doctype html> <html> <head> <style> a { color: #f00; } </style> </head> <body> … This is an error: <!doctype html> <html> <head> </head> <body> <style> a { color: #f00; } </style> … Most mo…

Continue reading →

How and why to use Lynx - the faster web browser


HTML elements rendered in different colours.

Lynx is a text based browser. You think the people who browse without JavaScript are weird? Lynx doesn't even do images or CSS! It downloads HTML and renders it at blazing fast speed. If you ever wondered just how slow modern web development has made the web - Lynx will show you the meaning of haste. I use Lynx most days. Not as my exclusive browser - I'm not a masochist - but as a handy tool. If I'm on a bandwidth constrained connection, or a site is overloaded, or I just want to browse…

Continue reading →

Building an "On This Day" site for your Twitter Account


Several columns of Tweets. Each one from a previous year.

I wanted to see what I was Tweeting on this exact day last year. And all the years before. So I built a website! It's a disgusting hack, and I'm truly sorry for unleashing it on you. Using the API You can't. The Twitter search API only goes back 7 days. This whole idea would be much easier if I had access to the Premium API. But! The Twitter website has no such restrictions. Advanced Search Twitter's Advanced Search allows you to pick specific dates to search for. Here's the string which …

Continue reading →

How to fake Progressive WebP Images


Extremely fuzzy photo.

WebP is the hip new image format on the scene. It offers unrivalled image compression at superior visual quality. But, in my opinion, it is deficient compared to JPG in one significant aspect. It doesn't have a progressive mode. Progressive mode is useful because it can quickly load a low resolution preview of an image, and then gradually improve its quality. WebP, by contrast, just loads up the full image line by line. That's can be annoying on a slow connection. What if we could change…

Continue reading →

Strategies for linking to obsolete websites


Plugin offering to fix a broken link by replacing it with an archive link.

I've been blogging for a long time. Over the years, I've linked to tens of thousands of websites. Inevitably, some of those sites have gone. Even when sites still exist, webmasters seem to have forgotten that Cool URls Don't Change. I use the WordPress Broken Link Checker plugin. It periodically monitors the links on my site and lets me know which ones are dead. It also offers to link to Wayback Machine snapshots of the page. It doesn't always work, of course. Sometimes the page will have …

Continue reading →

No Javascript Day


I'd like to propose that web designers around the world spend one day this year browsing the web with JavaScript disabled. I'm tentatively calling this "International No Javascript UseR Experience Day" or INJURED for short. A few weeks ago, a reader of my blog complained that all they saw was a blank screen. As Liz Conlan pointed out, my CSS was making the whole page invisible. My WordPress theme has a feature which renders the page blank until all the extra fonts etc have properly loaded -…

Continue reading →