Stunted dead black trees photographed against red dunes and a blue sky

Sossusvlei salt pan, Namib Desert

One of the harshest and most unforgiving environments on Earth, the Sossusvlei is in the southern part of the Namib Desert, in the African nation of Namibia. Surrounded by high red dunes, the Sossusvlei literally translates as "dead-end marsh", i.e., a drainage area with no outflows. These geographical conditions have created a surreal landscape, making it a popular destination for both tourists and film units: key scenes of The Cell and The Fall were shot here.

Clear chunks of ice backlit by a setting sun on a black sand beach

Breiðamerkursandur, Iceland

Breiðamerkursandur is a black sand beach on the southwest coast of Iceland, adjoining an outwash plain near the glacial lagoon of Jökulsárlón. Every spring and summer ice calving from the tongue of the glacier falls into the Atlantic and is swept out to sea before being returned to the beach, smoothed into sculptured shapes by the waves. Jökulsárlón has been the setting for four Hollywood movies, including A View to a Kill, Die Another Day, Lara Croft: Tomb Raider and Batman Begins.

An earlier article on this site demonstrated how to use the HTML5 <dialog> element to create easy “lightbox” UI. A few of my web development students are trying to take the pattern further by placing large sections of content in the <dialog>, but are experiencing a few problems in doing so. I thought I’d use the opportunity to update the script, and show how it can be used in a way to progressively enhance page content.

The majority of web image galleries must load at least two copies of every photo: a small thumbnail and a full-size version. While this approach has its advantages, it has an equal number of annoyances and drawbacks.

My recent exploration of object-fit led me to experiment with using the property to improve image galleries, inspired by the work of Chris Mills. The only downside is that the thumbnail images will appear squished in browsers that do not yet support the property (Firefox and IE).

For some time I have been attempting to recreate “masonry” effects in , where images are arranged like bricks in a wall. My previous attempt was moderately successful, but it ran ragged and lacked the dynamism I wanted.

Then, after working on the recent “Random Images With Flexbox and JavaScript” article, I had an epiphany: why not use JavaScript to read the image’s aspect ratios, and use that to determine the correct flex value for each element?

This solution allows designers to load images of any dimension and aspect ratio into a container element, apply a class, and have a seamless image masonry effect generated automatically on the page using modern web standards, with no plugins or frameworks required.