Christian Heilmann

Author Archive

Stupid interview questions will get you limited developers – is that what the market wants?

Monday, December 23rd, 2024

In recent times a meme has been making the rounds that allegedly shows a smart way to solve interview puzzles. In these memes developers are asked to create an ASCII pattern like the following:

XXXXXXX
XX   XX
X X X X
X  X  X
X X X X
XX   XX
XXXXXXX

The solution they come up with is a simple console.log() or print command.

console.log(`XXXXXXX
XX   XX
X X X X
X  X  X
X X X X
XX   XX
XXXXXXX`)

Funny, of sorts, and it shows how limited interview questions like these are. Ask a stupid question, get a simple answer.

That’s why in CODE100 puzzles, I always used tons of data or asked people to create a pattern from a dataset. I make it annoying to type these things by hand – or provide erroneous examples – so that people have to start thinking.

Programming is about flexibility and preparation for change, not instant creation

This, to me, has always been the idea of programming: provide a flexible solution for a problem. Instead of “create this thing”, my first goal is always to “create a solution that can create this thing, but also derivates of it”.

I suppose being a web developer teaches you that from the get-go. As you have no idea what text or in what language you need to show content in CMS driven products, you create flexible solutions. There is no such thing as “This button is always one word, and not more than 10 characters”. So you make the layout grow and shrink with the need and the capability of the display device.

And in general this should be a thing to get used to as a developer: requirements will always change. No matter how detailed a specification is. No matter how accomplished the prototype looks. There will always be new things coming your way. That’s why the first reflex of a developer to a request like this should always be this:

“How can this change in the future, and what do I need to put in my code to be ready for it?”

Or, to put it in other words:

“This is one outcome, but how can I create something that creates this one, but also more generic ones?”

My solution to this would be to create a generic grid I can plot on. One way to do that is creating an array of Y values with each having an array of X values.

class ASCIIgrid {
  grid = [];
  create = (width, height, char) => {
    for (let i = 0; i < height; i++) {
      this.grid.push(Array(width).fill(char));
    }
  };
  plot = (x, y, char) => {
    if (y >= 0 && y < this.grid.length && 
        x >= 0 && x < this.grid[y].length) {
      this.grid[y][x] = char;
    }
  };
  render = () => {
    this.grid = this.grid.map(row => row.join(''));
    return this.grid.join('\n');
  };
}

This allows for a plot method to set a char at x and y, and a render method that returns the nested arrays as a string.

That way I can “paint” the solution and many others:

import { ASCIIgrid } from './index.js';
let c = new ASCIIgrid();
let w = 7;
let h = 7;
let char = 'X';
c.create(w, h, ' ');
for(let i = 0; i < h; i++) {
    c.plot(i, 0, char); // top line
    c.plot((w - 1), i, char); // right line
    c.plot(i, (h - 1), char); // bottom line
    c.plot(0, i, char); // left line
    c.plot(i, i, char); // downward left to right
    c.plot(i, (h - 1) - i, char); // downward right to left
}
console.log(c.render());

Overkill? Maybe, but I could now easily create the same pattern for 9 chars, 27 chars or 101 simply by changing the w and h variables. I could also just paint an X, a smiley, a sine wave, or whatever. I don’t expect someone in an interview to write this code, but I would love to see the same thinking in people when I ask a question like that. As a good developer, I am lazy. I create code that will be ready for future requests as well as the immediate problem. Or is that too much?

Do we need developers that think ahead?

Which brings me to the problem interview questions like these hint at. My approach comes from years of frustration of changing requirements. And I almost never got enough time to clean up my solutions. That’s why I padded my estimates so I have time to code what’s needed, and not what brings the immediate result. I plan on building products that last and change over time, with a solid, working core. But is this still even a thing our market wants?

Is software a disposable product?

Over the recent years, software has become a disposable product. Instead of software solutions, we built apps. Packaged and released solutions controlled by the software publisher. New features or fixes required a re-publication and upgrade by the end user. That was not what the web was about. Web products get new features without a need to upgrade, uninstall or re-install. The problem with that is that I can’t control the user as much as publishers want to, so we went the way of apps. We made the web a distribution platform for things our end users have no control over.

Nowadays apps are disposable. You can have them automatically generated by frameworks or even using AI and a prompt. Many tools allow you to create a design and generate code that makes the app work. But, the code makes this snapshot app work. It is not code that functions beyond the visual. And it is code not fit to take care of changes that might happen in the nearer future. Changes that will always come as user needs and environments change over time. I don’t know about you, but this all feels incredibly wasteful to me. Programming, to me, is about flexibility and reaction to change. Not to create a product akin to a physical thing I use and discard once its not serving the original purpose any longer.

Maybe my way of thinking is outdated, and not necessary any more and I put too much stake into creating generic, expandable code. But, as developers we shouldn’t be surprised that AI and code generation can take our jobs if all we do is “build this thing” and not “find a solution to this problem”.

A behind the scenes of how I create an edition of the WeAreDevelopers Dev Digest – 3 hours in 1 minute speedrun

Wednesday, December 4th, 2024

I write a newsletter every week at https://wearedevelopers.com/newsletter with 150k subscribers. Today I recorded the 3 hours I spent putting the current edition together. Here it is sped up to one minute. I use my browser, lots of copy + paste and VS Code.

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

Saturday, November 16th, 2024

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:

Animation of the web share API in action. With 10 lines of Code you can turn a button into a share button

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

Wednesday, November 13th, 2024

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

Friday, November 1st, 2024

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.

What data can you get from an image?

Take the following photo:

A mountain of clay in the sea in corfu

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:

Array
(
    [FileName] => Corfu-2024-126.jpg
    [FileDateTime] => 1730189825
    [FileSize] => 3497266
    [FileType] => 2
    [MimeType] => image/jpeg
    [SectionsFound] => ANY_TAG, IFD0, THUMBNAIL, EXIF, GPS, INTEROP
    [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
        )
 
    [Make] => Google
    [Model] => Pixel 7 Pro
    [Orientation] => 1
    [XResolution] => 72/1
    [YResolution] => 72/1
    [ResolutionUnit] => 2
    [Software] => HDR+ 1.0.641377693zd
    [DateTime] => 2024:10:09 16:37:40
    [YCbCrPositioning] => 1
    [Exif_IFD_Pointer] => 222
    [GPS_IFD_Pointer] => 960
    [THUMBNAIL] => Array
        (
            [Compression] => 6
            [Orientation] => 1
            [XResolution] => 72/1
            [YResolution] => 72/1
            [ResolutionUnit] => 2
            [JPEGInterchangeFormat] => 1303
            [JPEGInterchangeFormatLength] => 24473
        )
 
    [ExposureTime] => 989/1000000
    [FNumber] => 185/100
    [ExposureProgram] => 2
    [ISOSpeedRatings] => 45
    [ExifVersion] => 0232
    [DateTimeOriginal] => 2024:10:09 16:37:40
    [DateTimeDigitized] => 2024:10:09 16:37:40
    [UndefinedTag:0x9010] => +03:00
    [UndefinedTag:0x9011] => +03:00
    [UndefinedTag:0x9012] => +03:00
    [ComponentsConfiguration] => 
    [ShutterSpeedValue] => 998/100
    [ApertureValue] => 178/100
    [BrightnessValue] => 791/100
    [ExposureBiasValue] => 0/6
    [MaxApertureValue] => 178/100
    [SubjectDistance] => 11921/1000
    [MeteringMode] => 2
    [Flash] => 16
    [FocalLength] => 6810/1000
    [SubSecTime] => 251
    [SubSecTimeOriginal] => 251
    [SubSecTimeDigitized] => 251
    [FlashPixVersion] => 0100
    [ColorSpace] => 1
    [ExifImageWidth] => 4032
    [ExifImageLength] => 2268
    [InteroperabilityOffset] => 930
    [SensingMethod] => 2
    [SceneType] => 
    [CustomRendered] => 1
    [ExposureMode] => 0
    [WhiteBalance] => 0
    [DigitalZoomRatio] => 0/1
    [FocalLengthIn35mmFilm] => 24
    [SceneCaptureType] => 0
    [Contrast] => 0
    [Saturation] => 0
    [Sharpness] => 0
    [SubjectDistanceRange] => 3
    [UndefinedTag:0xA433] => Google
    [UndefinedTag:0xA434] => Pixel 7 Pro back camera 6.81mm f/1.85
    [UndefinedTag:0xA460] => 3
    [GPSVersion] => 
    [GPSLatitudeRef] => N
    [GPSLatitude] => Array
        (
            [0] => 39/1
            [1] => 47/1
            [2] => 4862/100
        )
 
    [GPSLongitudeRef] => E
    [GPSLongitude] => Array
        (
            [0] => 19/1
            [1] => 41/1
            [2] => 5362/100
        )
 
    [GPSAltitudeRef] => 
    [GPSAltitude] => 4200/100
    [GPSTimeStamp] => Array
        (
            [0] => 13/1
            [1] => 37/1
            [2] => 38/1
        )
 
    [GPSImgDirectionRef] => M
    [GPSImgDirection] => 76/1
    [GPSDateStamp] => 2024:10:09
    [InterOperabilityIndex] => R98
    [InterOperabilityVersion] => 0100
)

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.

Map mashup moving a map around 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.

Showing the elevation of different images

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.

The gallery with browser developer tools open, showing that only 500 kilobytes were loaded whilst there are several megabytes of images.

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.