Me. I am that idiot.

Last year, I launched a "web page" which didn't use HTML. Called, appropriately enough, "YOU DON'T NEED HTML!" That (ab)used Unicode to make a somewhat attractive page. This year, I decided to forego the Unicode silliness and use XML silliness instead.

Demo

Visit https://xml.viii.fi/index.xml and see for yourself. Take a look at the source-code to verify that it is, indeed, an XML document.

All modern browsers should be able to render it. If you spot any glitches - please let me know.

Why

Because I can 😂

OK, there were three main reasons:

1. I learned this stuff at University about a million years ago and I wondered if these skills were still relevant (they aren't!)
2. Browsers are constantly deprecating old features. I wanted to see if XML & XSL still worked (they do!)
3. The voices in my head told me to (they didn't!)

As an additional bonus reason - I'm bemused by the number of pages which are basically JSON files with client side Javascript rendering. So I thought I'd go old-skool and have the client rendering done without any JS!

Bonus bonus reason - semantics!

How

Regular readers will recall that I wrote about how to style your WordPress Atom feed. The technique is pretty simple: take a well-formed XML document and link it to an XSL stylesheet, et voilà there's a beautifully rendered document in your browser.

For this demo, I didn't bother with a proper document schema. I just bashed some random elements together.

The XSL tells the browser to render it as HTML and provides a scaffold for doing so.

It is all gussied up with some fairly generic CSS.

And that's it really.

I'm delighted that this technique still works. I don't think you should use this unless you absolutely need a lightweight way to render XML directly.

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 without distraction. Lynx is where it's at. It is also brilliant for seeing what weird markup bugs your site has.

Linux users can install it with sudo apt install lynx or similar. Everyone else can download Lynx from the official website.

This is what it looks like:

Using it is simple. On the command line, type lynx example.com to go to example.com.

Arrow keys up and down move you... up and down. Left goes back a page, right follows a link. Q quits. And that's all you need to know for your first five minutes.

Pressing the letter O gets you to the option screen. There are a bunch of things you can change here - and it shows off the UI pretty well.

There are some things you can't change here. If you want to always accept or reject cookies - rather than be prompted every time - you'll need to edit the ~/.lyncrc file.

Set accept_all_cookies=TRUE.

Why is this important

Computers lie to us. CSS hides our worst sins. JavaScript covers-up our poor architectural choices. With Lynx, there's no escape. You see the HTML rendered and that's it. Lynx renders all the HTML5 elements:

It also does interactive elements as well:

I've found so many bugs this way. Little quirks of markup which show up in the most unexpected places.

To be clear, Lynx isn't about accessibility testing. You should do that with proper tools which expose ARIA, show colour contrast, and the like. But Lynx is a good first pass at seeing how the text renders and flows, whether images have alt text, and if the general structure is easy to navigate.

Take some time to use it on your favourite sites today.

So, here are four quick tips for dealing with this formal.

Display in browser

Absolutely no browser supports HEIC. Not even Apple's own browser supports it. Why?

Terence Eden is on Mastodon

@edent

OK, but *why* is the iPhone's default photo format HEIC if the iPhone's default browser can't display it?
caniuse.com/?search=heic

---

🅨🅞🅤 ⓜⓤⓢⓣ 𝘣𝘦 𝖘𝖊𝖊𝖎𝖓𝖌 .

@ursonate

Replying to @edent@edent The two teams hate each other.

---

So, we have to use JavaScript. There's a brilliant open source library called libheif. It's possible to compile it to JavaScript - but I couldn't get it to work. The official repo doesn't make a compiled version available. Luckily, Kiril Vatev has released a compiled emscripted version.

It's about 1.5MB - which is a bit abusive to your users - although it zips down to about 350KB.

The image has to be loaded into a 2D canvas to be rendered. Even on a modern laptop this is likely to take a few seconds.

There's a demo page which shows you how to get started. It's tedious, but it works.

Get Metadata

Similarly, there's a separate library for reading HEIC metadata. This one is a much more reasonable 20KB.

That's pretty easy to use - and quick. HEIC contains pretty standard EXIF. GPS co-ordinates, camera information, that sort of thing.

Server Side - PHP

I struggled to find any libraries which were easy to use. It turns out, good old imagick has support in modern versions.

$imagick = new Imagick();
$imagick->readImage('image.heic');
$exifArray = $imagick->getImageProperties("exif:*");
var_dump($exifArray);

Use a CDN to convert images

I use Cloud Image (Affiliate Link). Use it proxy your images. You can convert them to JPG or a modern format like WebP. It can resize and other effects.

You can write something like:

<img src="https://abc.cloudimg.io/v7/example.com/image.heic/?w=600"/>

to serve your HEIC images in a more sensible format.

What next?

HEIC is a weird, patent-encumbered format. It isn't particularly useful. If you want high-quality images for editing, you probably want to shoot in RAW. If you're displaying on the web, WebP gets you a small file size and broad compatibility.

But, if you want to deal with HEIC, I hope the above was useful.