RSS preview of Christian Heilmann

Rss preview of Blog of Christian Heilmann

What’s your excuse for not using the web share API?

2024-11-16 19:43:36

The WebShare API is so easy to use, it is a crime people don’t use it more. Instead, we have tons of dead “share on $thing” buttons on the web. Many of which spy on your users and lots of them that started as WordPress plugins but now are security concerns. Instead of guessing how your visitors want to share the current URL or a file you provide, you can call the API and they can pick their favourite:

This is the code and you can also check it on codepen :



let shareButton = document.querySelector(‘button’);

shareButton.addEventListener(“click”, async () => {

try {

await navigator.share({ title: “Example Page”, url: “” });

console.log(“Data was shared successfully”);

} catch (err) {

console.error(“Share failed:”, err.message);

}
	});

(yes, I do not use it here, because I want these share buttons to work without JS, but I will soon add this).

Social media platforms should make it easier to add alternative text using an [Alt: description] syntax

2024-11-13 20:06:59

Adding alternative texts to images on social platforms is not a “nice thing to have” but important to not lock people out. That’s why it is a shame that it is quite tricky to do it across different platforms. Personally I use Twitter, BlueSky, Mastodon and LinkedIn and the following video shows just how much of an overhead this is.

Adding alternative text to images on various platforms

Sure, I could use mass posting tools like Buffer, but I don’t want to. One thing I have seen people do when others do not add alternative text is answer in the thread with something like:



[Alt: An annoyed user with thick glasses screaming at a laptop]

Why is this not a part of social media platforms? Sure, the editors showing the image bigger and offering a text box below give more context, but they mean yet another interaction which is why people don’t add alternative texts. People tend to drag images in or paste them after they’ve written the post. It feels like a lot of extra work having to go to a different editor, when you’re already in a text box.

What about several images?

This gets a bit trickier, but not insurmountable. Just allow a few of them in succession with a linebreak:



[Alt: An annoyed user with thick glasses screaming at a laptop]

[Alt: A beautiful sunset on a beach with frolicking seals]

[Alt: Elmo of Sesame Street saying that he hopes that you choose to be kind]

Maybe one of the newer platforms could lead the way here. It feels bad to see a huge amount of social posts not having any alternative texts at all – which makes them a lot less social.

Exif by magic – the forgotten extra information in JPEG and TIFF files

2024-11-01 21:49:27

I just shot a ton of pictures on vacation and was amazed to see just how much extra data our mobile phones store in images.

This exif data in JPG and TIFF files can be a privacy issue, which I pointed out in my TEDx talk some time ago and even created a tool to remove the extra information in-browser without the need for any server.

However, it can also be a great thing to use in your products.

You can access EXIF information in many different ways.

On the command line using exiftool .
In JavaScript using Jacob Seidelin’s exif.js or Mike Kovarik’s more modern exifr.
Using the in-built functions in PHP or the more detailed PEL package which also allows to write data.
In Python using the exif package which also does read and write.

What data can you get from an image?

Take the following photo:

If you use any of the solutions above, you can get the following information from the image. For example, in PHP you can do a:



$file = ‘./Corfu-2024-126.jpg’;

$exif = exif_read_data($file);

print_r($exif);

This results in:

This is a ton of information to play with. The classic is using the GPS data to show images on a map . If you click on the different thumbnails, you can see the map moving to where the photo was taken.

To get this information, all you need to do is read the data and then convert it.



$exif = exif_read_data($file);

$lat = $exif[‘GPSLatitude’];

$lon = $exif[‘GPSLongitude’];

$latref = $exif[‘GPSLatitudeRef’];

$lonref = $exif[‘GPSLongitudeRef’];

One thing I had not done before though was reading the altitude information. This allows you, for example, to show the images on the height they were taken.

As the data is returned in a format like “4200/100” you need to do some parsing. This one creates an array of all images with the image name and its height in meters.



$max = 0;

$all = array();

foreach ($jpgs as $jpg) {

$gps = exif_read_data($jpg);

if (isset($gps[‘GPSAltitude’])) {

$parts = explode(‘/’, $gps[‘GPSAltitude’]);

$height = round($parts[0] / $parts[1]);

$jpgs[$jpg][“height”] = $height;

if ($height > $max) {

$max = $height;

}
	}

array_push($all, array($jpg, $height));

}

Using the embedded thumbnail information

One interesting use case is to use the embedded thumbnail information to avoid having to create thumbnails. If you check the gallery or the height example and you keep developer tools open, you can see that whilst the images are all a few megabytes, the page only reads a few hundred kilobytes.

This is because we don’t load the images, or created thumbnails from them, but I use the exif thumbnail information in the JPG file instead:



[COMPUTED] => Array

(
	[html] => width=”4032” height=”2268”

[Height] => 2268

[Width] => 4032

[IsColor] => 1

[ByteOrderMotorola] => 0

[ApertureFNumber] => f/1.9

[FocusDistance] => 11.92m

[Thumbnail.FileType] => 2

[Thumbnail.MimeType] => image/jpeg

)
	…

[THUMBNAIL] => Array

(
	[Compression] => 6

[Orientation] => 1

[XResolution] => 72/1

[YResolution] => 72/1

[ResolutionUnit] => 2

[JPEGInterchangeFormat] => 1303

[JPEGInterchangeFormatLength] => 24473

)

Originally, this thumbnail was meant to be displayed on screens built into digital cameras to have a faster preview. We can, however, also use this to preview the image without having to load it in full. In PHP this is the exif_thumbnail() method.



$image = exif_thumbnail(‘Corfu-2024-991.jpg’, $width, $height, $type);

if ($image !== false) {

header(‘Content-type: ’ .image_type_to_mime_type($type));

echo $image;

exit;

} else {

echo ‘No thumbnail available’;

}

This will not load the whole JPG file, but only as much as it needs to get the thumbnail. This is not news. Flickr, for example, used this in the early 2000s to show you a thumbnail of the image immediately when you dragged it into the browser and then started to upload the rest. However, I have not seen it used lately. Maybe because it is too easy to create images on the cloud.

Playing with Exif is fun. And why not – after all, our phones and cameras add this information anyway.

I just pulled a 2006 and uploaded my holiday photos to Flickr with a Creative Commons Licence

2024-10-25 21:58:42

I just returned from a holiday on the gorgeous island of Corfu in Greece and spent quite some time taking photos. Instead of releasing those piecemeal on various social media channels, I thought it would be fun to go back to our ways of early social media, and put them all up on Flickr with a CC licence so you can use them. Some make great materials for image manipulation, others are great backdrops for your video calls.

You can see them all on Flickr :

Here are the albums:

For those not on Flickr, you can also get them as Zips:

Buildings.zip (1.28GB)
Food and Animals.zip (422MB)
Textures.zip (118MB)
Nature.zip (2.52GB)
Signs and Statues.zip (750MB)
Technology.zip (352MB)

I really miss the early days of social media and especially the Flickr community. I was lucky enough to have worked with the people who built Flickr and then joined Yahoo and the community aspect of the product was what really made it work. You uploaded a few high quality photos and people would tag themselves and others in them. People would add descriptions and comment in full sentences and not just likes. And the thing that made Flickr really special was that everything was API driven and it was incredibly easy to embed the images in other products and create mashups.

The idea was to add to a web of data and allow your creative output to be re-used, mixed and added to other materials. Not to feed one addiction machine and not even have access to your own work a few seconds later. It is a shame that we lost that, and the bigger issue is that any system that allows for tagging or adding comments drowns in spam and AI slop within seconds now.

We skipped the “social” part of Social Media quite some time ago. But hey, maybe you have some joy seeing how gorgeous this island is!

Let’s bring back browsing

2024-09-15 19:35:27

When the web started one of the best parts about it was the naming of things. To “surf the web” implied fun and adventure and to “browse” implied serendipity. And we seem to have lost that. Let’s go back.

When I discovered the internet it was pretty much just taking off. I didn’t go to university, so I had no means of access from the get-go. I had a modem, a Commodore 64 and access to BBSes. Then I got an email and newsgroup access. And when I started working at a radio station as a newscaster, I had internet access with a browser. That was 1996 or so, and soon I had my own internet access at home. Still with a modem and paid by the minute. Many Americans can’t understand that issue, as local calls were free, but in Europe we got online, surfed a bit and disconnected. Then you checked the browser cache for pictures to keep. It was arduous, expensive but also, and maybe because of that, exciting. It gave you a feeling of taking part in a new world of publishing. And that’s why it became my career.

There were no big search engines, there were a few portals and news sites, but most of the discovery of web sites was word of mouth on mailing lists, IRC, newsgroups and of course links from one site to another. Getting linked to by others was amazing and linking to others showed that you cared and also showed proof that others also cover the things you wrote about. Web rings and banner exchanges were also great tools and I spent a lot of time making that 400×40 pixel GIF less than 10k.

Finding information on the web was a journey, an adventure. And people wrote about the most random things, went down many rabbit-holes and of course also published things nuttier than squirrel droppings. But here’s the thing: for the first time other than fanzines and underground magazines people couldn’t stop you from publishing. And people wrote what they wrote because they were genuinely bonkers, and not sponsored to manipulate elections.

Nowadays the web has taken over the mantle of most in your face medium trying to force you to consume and purchase things. And it “does the research for you” and pushes you into bubbles. Spending time aimlessly browsing for content is touted as inefficient. Operating systems and browsers come with “amazing AI features” that give you summaries of content instead of allowing you to get your own impressions and draw your own conclusions.

Sure, on the surface this seems great, but it feels like we’re pushed into a world of faster and faster consumption without allowing us and our minds to wander.

The journey towards information is important. Humans retain information better they had to put effort in to get. Aimlessly browsing to find things you may not have heard of yet is as important as discovery is exciting.

I love getting lost on Wikipedia, going from one weird fact to another.

I used to love that on YouTube before everyone and their pet wanted to become an influencer and follow formulaic and manipulative patterns to create their content.

I do enjoy Spotify’s Radio and mixes feature that allows me to find music closely related to bands I love and didn’t know about.

Amazon can get in the sea. The start screen of my Fire TV right now shows me an ad for shower gel and all the programs that look exciting are in reality ads for other streaming services. That’s just TV, but less honest about it. Which is annoying as the x-ray feature of the Amazon Prime player is great. It adds IMDB information to every scene and you can look up where you know that actor from and what that song is, that is currently playing. You know, things you browsed for in the past. Some programs even use it as an Easter Egg, for example The Boys. More of that, less of “this is in cinemas now” nonsense.

We need to browse more, find things we haven’t looked for and discard or embrace them. You don’t often go to a clothes shop to buy one special item. It’s fun to try on a few things and maybe find a new style. You don’t go to a book store and buy one special book. You compare, you try, you might see that you missed a new release of an author you liked. You spend time looking around and taking things in. And that can spark creativity. Or, as the Beastie Boys put it:

Let’s be browsers again, let’s embrace the weirdness of the web, a library curated by racoons on drugs. In the newsletter I curate, I have a section called “procrastination corner / weird wide web” where I collect wonderful finds of my browsing. I love that they still exist and I also keep an archive.

So let’s keep looking around for the strange, the overly detailed and the just bonkers web. And – hey why not – start contributing to it. You can publish, nobody is stopping you.

Christian Heilmann

Rss preview of Blog of Christian Heilmann

Adding alternative text to images on various platforms

What about several images?

What data can you get from an image?

Using the embedded thumbnail information

The author's social media