Photographer's Block

I have photographer's block and it began with Instagram.

DSCF3671-3.jpg

In part, it's because I followed some amazing photographers who appeal to my personal sense of aesthetic but do so with an inventiveness and boldness that I don't see a clear path to. The existence is inspiring but the chasm is dispiriting.

DSCF3674-3.jpg
DSCF3676-3.jpg

In part, it's because the age of Instagram has brought a perception of photography (the act and its product) as a littering. Cameras and pixels saturate our physical and virtual spaces.

There might be a sense of justification when you're creating something actually new, but there's a self-awareness that my cold, orthogonal compositions don't qualify.

DSCF3678-3.jpg
DSCF3689-3.jpg

Instagram obviously isn't to blame. More likely, it's my own tendency to perceive photography as performative. It is, but that perception coupled with a subconscious feeling that performance is for the very talented creates a downward mental pressure against which it's hard to find motivation.

DSCF3690-3.jpg
DSCF3694-3.jpg

This mechanical process of filtering the spacial and temporal mess of reality into a balanced two-dimensional stasis is intrinsically enjoyable. Surely that enjoyment should be motivation enough?

DSCF3695-3.jpg

Photons in Paris

Last weekend my wonderful wife took me to Paris on the Eurostar.

A mild(ish) fear of flying mentally shrouds the rest of the world in an "event", something I quite consciously consider to be survived.

By contrast, the Eurostar is almost frictionless. It colours thoughts of the world in an openness and accessibility that feels like a taste of the 22nd century.

DSCF3416.jpg

Paris, it turns out, is quite beautiful.

DSCF3422.jpg

Its sheer age and cleanliness is photogenic in an obvious sense, but doesn't necessarily play to the way I tend to shoot.

I had to eek out geometry, blocks and symmetry wherever I could.

DSCF3423.jpg
DSCF3462.jpg

The Eiffel Tower is probably one of the most photographed buildings in the world. If I know I'm going to take a photo that's probably been done to death, I still want to take it.

The subject and framing becomes a control group. To be mine, the photo must be technically in order and then given my own style in post. Those are still pleasing parts of the process.

The continuing European heatwave meant that the area was heaving well into the night making a clean shot impossible. Any attempts at leaning into that via super-long exposures lead to an unpleasing mixture of ghosts and blurry people.

It's fair to say I fucked this one, but I enjoyed taking it.

DSCF3469.jpg

I am cripplingly uncomfortable taking pictures of people in public.

The thought of turning my lens on someone unsuspecting dredges up the homeopathic remnants, thankfully diluted by adulthood, of how it felt to ask a girl out as an awkward teenager.

Wimping out caused me to miss a shot. This ridiculously photogenic couple (one half, pictured), laughing next to an open subway door, revealing the stark yellow tunnels of a Parisian subway.

Frustrated, I remembered reading that day that some street photographers shoot from the hip. It still felt icky, but I like the composition all the same. It just wasn't mine.

DSCF3474.jpg

They fly the EU flag everywhere in Paris. Maybe if we did the same, things would have turned out differently.

DSCF3483.jpg
DSCF3487.jpg

For this photo, I first found the light and the picture of the bejewelled lady. That was the scene, and I just had to wait for someone to fill it.

Because the Earth has the dogmatic tendency to revolve, I knew the lady's eye would be slowly covered in shadow. This fostered an impatience. The above is a crop, because I was worried that working the area too hard would result in nothing at all. So I found the composition, and stood.

I feel the geometry of it is very much mine, but I wonder about the alternative version. Crouched just to the left of the curb, with the diamond lady looming large over the subject. It certainly would have been braver.

DSCF3508.jpg

Sometimes the light isn't in your favour, but you have to take it anyway. These bins were cute enough that I pushed the shadows far beyond plausibility. No regrets.

DSCF3544.jpg

Since adjusting my settings for this scene, I must have knocked a dial in my rush to grab the train at the right moment. It is wildly overexposed, bad news in a scene with so much white. I managed to salvage most of it in Lightroom, but it's still clearly cut at the top.

DSCF3568.jpg

If you've ever seen a picture of the Moulin Rouge, you've seen this one. But here the clean shot, and the twist in post, make it mine.

DSCF3589.jpg

When I took this photo, I was almost ashamed. Earlier in the day I'd discovered Josh K Jack who does the sort of thing I'd like to be doing, but on a totally different level. I like the photo, but these symmetrical compositions are perhaps becoming a crutch.

Next time, new rule: No symmetry.

Shooting the Barbican

This week, I spent an evening taking photos of London's sprawling brutalist playground, the Barbican.

The idea of squaring its chaotic lines, KerPlunk perspectives and monolithic blocks of concrete and shadow felt like a fun challenge.

What follows is a series of photos from the evening, in chronological order, paired with a loose collection of thoughts about the location, the lighting and the gear.

X100S, Tele

X100S, Tele

I've been shooting with the X100S for a few years now. Its low-light performance, exposed manual controls and comparatively light weight make the camera a pleasure to use.

The lens, although sharp and fast, is 28mm. I've never loved the focal length. Tracking down the increasingly scarce teleconverter lens, which ups this to 35mm (50 equivalent), was a game changer.

It negatively changes the weight and weight distribution, and the extra lens choice removes some of the simplicity of a fixed lens. However, it's the perfect lens for my stylistic preference, and a place like the Barbican with its authoritarian geometry demands a lens that submits to its jungle of straight lines.

X100S, Tele

X100S, Tele

Brutalist architecture often takes small, functional units and repeats them to form larger, discrete sections.

It results in swaths of pattern and the tighter crop of the teleconverter leans into this.

The Barbican itself is so encompassing that it allows the deletion of the wider context without losing the actual sense of it. You can arrange and balance the remaining blocks and patterns within the frame in an almost abstract way.

As someone who leans towards seeing and framing things in two dimensions, this is a playground for those bad habits.

X100S, Tele

X100S, Tele

I actually have an intrinsic, primal dislike of brutalism.

It flaunts its sheer mass and distributes it with top-heavy hostility towards nature and gravity.

In cynical moments, I've felt that the crushingly low ceilings and disorientating dead ends, the pervasive sense of immovability and alien timelessness, are all an attempt at reinforcing the victory and dominance of the state over the individual.

Cynical moments.

X100S, Tele

X100S, Tele

X100S, Tele

X100S, Tele

The crush of sky between two opposing buildings, archipelagos of sunburnt grass floating in a sea of brick, geometric water fountains. Nature's survival is designed.

X100S, Tele

X100S, Tele

The evening light was promising. Sky suppressed by a crown of moody grey cloud, the setting sun piercing a clear horizon.

I'd wanted to shoot against sky like this for some time. Buildings are lit brilliant sunset gold, but the stormy backdrop shunts them into the foreground.

Unfortunately for most of the evening there was a slight haze smearing the arrow's path. It wasn't much, but it was enough to diffuse its energy.

Concrete isn't an intrinsically beautiful material, but it will give back whatever it gets. Despite the slight washout, a crack of contrast still survived.

X100S, 10-stop ND filter

X100S, 10-stop ND filter

I was carrying a couple of toys. I sat down on a grassy verge, one of the Barbican's small concessions of nature, and set out my playpen.

One, the GorillaPod. It's a very portable, flexible tripod. The evening was sweltering, a six-week old 30 degrees, so I didn't fancy my normal tripod. As the X100S doesn't have an adjustable screen, framing the tower block was an uncomfortable game of trial and error.

Two, a 10 stop ND filter. Combined with the X100S's inbuilt 3-stop filter, you can knock out an incredible amount of light, allowing long exposures in the bright of day.

As I was fussing, swapping the teleconverter for the filter: Bang.

The lingering haze lifted from the sun, the nitros were lit, and the tower block burned like a pyre.

Combined with the reddish tint that often comes from "tint-free" filters, the concrete now gave back.

I didn't have my cable release, and the longest programmed exposure the X100S allows is 30 seconds. Without a study tripod, the cable release would have introduced too much shake anyway.

In these conditions I add a 10 second delay to the shutter, to let the camera settle down before exposure.

The dark clouds generated a satisfying swirl behind the pin-sharp concrete torch, though perhaps a couple of minutes would have been cleaner.

X100S

X100S

Filter off, I tried to capitalise on the haze's sabbatical.

X100S, Tele

X100S, Tele

With light as good as this, fellow photographers all swirled round the Barbican like erratic moths to the concrete flame.

iPhone, VSCO K3

iPhone, VSCO K3

I flapped my wings with them, and they led me through an unassuming gate into a rare sweeping courtyard. It was immediately obvious that the X100S, even without the teleconverter, would be too narrow to capture this.

The iPhone has an excellent little lens for moments like this. It's wide, and in good lighting it makes an excellent, and worthy, counterpart to your main.

It respected the panorama in a way that the X100S simply can't.

The iPhone, while sharp, is easily blown. I try and expose for the brightest part of the scene and deal with the shadows later.

iPhone, VSCO K3

iPhone, VSCO K3

Over the years I've jumped between different post workflows on my iPhone.

Years ago, I'd spend too long on each in Snapseed, pushing them a little beyond the raw materials. Starting from scratch each time was consuming, and left them look inconsistent.

VSCO has an excellent range of filters but recently I've settled on K3 for colour and B4 for black and white.

K3 is reasonably close to my style in Lightroom, so usually I add that and push the sharpness up one. It also handles reds beautifully, emphasising the glow of the evening.

X100S, Tele

X100S, Tele

X100S, Tele

X100S, Tele

X100S, Tele

X100S, Tele

X100S, Tele

X100S, Tele

As the sun was allowed to set untempered, the Barbican began to positively glow.

The shots look increasingly overprocessed but the scene itself just banged with contrast. It was a really terrific few minutes, and totally fed my light snobbery.

X100S, Tele

X100S, Tele

When the final embers died, I went back inside. The guy in this photo had just wandered into frame and I found the opposing light as a counterpoint.

The two create a nice tension, but the image is slightly out of focus. It was dark enough that autofocus was struggling, and I felt f2 was mandatory.

The X100S has poor manual focus hinting, especially in low light with its small and dingy EVF. Coupled with the two subjects lying on different focus planes, this was an unlikely candidate for a crisp shot.

Given a second chance I'd pump the ISO as high as 3200 to allow a narrower aperture (and thus a deeper depth of focus). Compositionally, I'm pleased that I noticed the light. Finding points like this is something I'm actively trying to get better at.

X100S, Tele

X100S, Tele

X100S

X100S

The sun had retreated, and I decided to hang around for blue hour.

X100S

X100S

But the X100S's low-torque battery had other ideas. No worries, I'll be back.

I went home and had some peanut butter toast. It was pretty good thanks for asking.

Wix vs Squarespace: A comparison for front end developers

By day (and many nights), I'm a front end developer.

So, when I first felt the urge to make a small photography website, a few thoughts immediately sprang to mind: React, CloudFront, S3, SSL, type checking...

In other words, I'd managed to overcomplicate the problem before I'd even started.

It's easy to look down upon, or even outright ignore, site generation services like Wix and Squarespace. Their low barrier to entry stirs a latent snobbishness in us, a perhaps unspoken feeling that they're for people who don't possess the know-how to do it the "right" way.

Torii Gate, Miyajima

Torii Gate, Miyajima

But underestimating them is a mistake. These services have sunk an entire tier of our industry, and their successors will undoubtedly bring the waters closer to our own feet.

This success is deserved. They make making websites quick and simple. It took me just four hours to spin up a website with a shopping cart, gallery, contact form and Instagram feed.

For those of us who remember FTP, Dreamweaver and .cgi, that's a white-knuckle ride.

In fact it was so quick, I did it twice. Once on Wix, and again on Squarespace. Spoiler: This was not because I loved the Wix experience.

In this comparison I'll take a look at both, specifically two aspects of them that we've learned to care about as front end devs, that I think we fear will fall short of our expectations if we don't control the complete website creation process. Namely, performance, and responsive design.

Performance

Of the two, my biggest concern about using a service was the performance of the website.

Because this is just a side project, with expected visitor counts barely north of zero, there's an argument that performance is a premature optimisation. This is a fair point, but likewise when you're a front end developer whacking their name in caps across the top of the site, you want it to come somewhere in the vicinity of your standards.

Without full control over the code, or the build and deployment processes, we are largely at the mercy of the service in this regard. They're catering for as broad an audience as possible, so I imagined that there'd be some level of bloat.

This turned out to be true, but it's not straightforward. Both services excel and suffer in different areas. To gauge performance I looked at two areas: JavaScript loading strategy and image handling. These struck me as the main two areas of a photography site that could pose a problem.

Shin-Kōbe

Shin-Kōbe

JavaScript

I didn't make the website twice just for blog fodder. The idea was to be MVP-quick, so once I'd made the site with Wix, I hoped I could move on to other tasks.

But, the site Wix generated was quite slow, even on a fibre connection. When I first looked into this, the site was so bloated by JS that I took immediate advantage of their 14-day money-back guarantee.

Zepto, jQuery, React. A hall of fame of JavaScript frameworks all loaded on a single site. Each loaded, in fact, up to three times, either from different CDN domains (incurring lookup penalties) or just slightly different versions.

Lodash, loaded three different times. Each in its 85kb entirety.

While there are some bundles, libraries are all requested individually. Even Redux (a 2kb library) is an entire HTTP request of all of its own. All up there's over 100 network requests to download ~3mb of JS. It's wild.

In comparison, the Squarespace site with all the same functionality is just 6 requests for ~500kb of JS.

Serving so much JS isn't just a bandwidth issue. Lighthouse recorded the JavaScript boot-up time for the Wix site as 15 seconds, whereas Squarespace is just 3.

Images

Common strategies exist for reducing the impact of image files, like progressive and lazy loading.

Ideally, you'd be able to upload your original images to the service and they'd use something like Imgix to serve them back, optimised for the requesting browser.

Squarespace disappoints in this regard. Gallery thumbnails are regularly as large as 3mb, and every thumbnail on the page is requested on load.

By comparison, the Wix Pro Gallery plugin only loads images when they scroll into view. It also progressively loads images of increasing quality so users on slow connections can at least see a low-quality preview.

Okonomiyaki in Hiroshima

Okonomiyaki in Hiroshima

Once the higher quality thumbs load, they're just 1mb max, with no major difference in quality from their Squarespace counterparts.

Even better, Wix allows you to adjust the image quality setting for all images in a gallery, bringing that size down even lower. Squarespace just has a help page that asks you to upload smaller images. When dealing with large galleries, this is an unhelpful help page.

So, Wix has an awful JavaScript strategy, but it has a few thoughtful features that makes it pretty great with images. While Squarespace, conversely, is efficient with JS, but wasteful with images.

But, heavier JS payloads equals heavier CPU usage, and we see that the Wix site took far longer to execute than Squarespace. This is time where the website is unresponsive, which is far more frustrating for a user than missing images.

Squarespace might not handle images intelligently, but at least there's some scope to upload images of a lower size and quality. There's no equivalent way to lessen the impact of Wix's 100+ JS file requests.

Responsive design

Another doubt I carried into this experiment was the grace with which these services could offer templates that were both easy to maintain and be responsive across all screen sizes.

Wix and Squarespace both take different approaches in how they handle desktop and mobile designs. These approaches have major knock-on effects on the simplicity of their respective editors.

Wix: Browser sniffing

Wix handles mobile users by browser sniffing and serving up a different site depending on the user agent.

Laundrette in Osaka

Laundrette in Osaka

I assumed this was so they could serve a "lite" version that took the opportunity to cut down their outrageous JS overheads for the slower connections and devices. But digging into the code there's no evidence that this is so. It's just a slightly different template with adjusted inline styles.

I suspect this approach is a legacy from a time when it wasn't so clear how best to handle mobile users. Or, perhaps from the limitations of the editor, which may have been written years before the dominance of mobile.

Either way, it creates a number of issues that complicates the editor.

For instance, the desktop version has practically zero responsiveness too. Content doesn't flow normally or resize dynamically, instead almost everything is positioned absolutely.

This means adding content or swapping two content blocks can be a delicate act of manual drag-and-drop repositioning, that litter the HTML with inline styles like this:

margin-left: calc((100% - 980px) / 2);

This 980px measurement isn't arbitrary. It's a user-defined value that marks a safe area. Some content blocks positioned or sized beyond this boundary (marked by snap points in the editor) will be cropped if the screen becomes narrower than this width. But then, others won't. It's a mystery that I didn't have the time or patience to uncover.

Another result of all this absolute positioning is that the page footer can't be just another element in the document flow. Its position has to be dynamically calculated, with styles like this:

position: absolute; top: 15240px; height: 215px;

They don't even bother to put the footer at the end of the DOM. Why bother, when it has to be manually positioned? Sadly, this breaks keyboard navigation. Tab through the page and focus will jump to items in the footer before items in the body.

Maybe this is an issue with the specific template I chose, but it seemed to me that the editor is geared around this kind of brittle design. It's a nightmare.

All of the above problems are compounded with the entirely separate mobile design. You'd imagine that, considering single-column layouts are so much easier to make responsive, surely this stand-alone template would stretch out to feel spacier on larger screens.

Robot Restaurant, Tokyo

Robot Restaurant, Tokyo

But even this is handled poorly. The entire site is rendered exactly the same no matter how wide the screen - its simply scaled up or down. On larger screens this can look like your Nan's phone in accessibility mode.

Further, the editor for mobile is a different mode that you have to switch to periodically. Because all positioning is done manually and absolutely, there's usually a nasty surprise or three awaiting in this mirrorverse template. Meaning all the nonsense repositioning you've already endured on the desktop is replicated on mobile. You also have to remember to check every page. This eats well into our limited time budget.

Squarespace: Actual responsive design

The Squarespace templates are truly responsive, and this permeates throughout the whole experience. For instance when using the editor, the site shrinks and grows to accommodate the various menus, so you're constantly exposed to the site at various screen widths.

It copes perfectly well with all these different widths because the templating system is more restrictive. This is a good thing - it simplifies the entire process from top to bottom, for the template author and for us, and we're here for this simplicity.

Rather than dragging and dropping content areas into arbitrary positions, every content block has insertion icons above and below it. Adding content via one of these will ensure the surrounding content reflows as expected.

There's still the opportunity to then move some of these blocks into pre-designated child slots of others (for instance, floating an image to the right, like many of the images in this blog post). The predictability of these slots means Squarespace template authors can make robust and smart templates.

Basically, these limitations means it's a lot harder for us to make it shit. Whereas my Wix attempt was quickly an absolutely-positioned mess, with button widths stretched and squashed seven ways from Sunday.

Ibaraki

Ibaraki

The wrap

In this guide I've considered the two services from the idea of speed and simplicity. They both offer similar levels of customisability and support for stuff like CSS and JavaScript, but I haven't covered those here. If I start to go down the rabbit hole of hacking that stuff on top, it might be time to start looking into rolling my own. I'm not here for the power.

For now, I've been pleasantly surprised by Squarespace. Throwing robust, maintainable pages together is really quite simple. I've spent more time writing this blog post than on the site itself.

There's a few sprinkles that make the finishing touches for the developer. For instance, its blog editor offers Markdown support. It also allows the removal of www. from linked domains, which Wix doesn't.

I've been convinced that for a certain type of project, an instrument as blunt as this isn't something to instinctively turn my nose up at.

As a small aside, it's been a nice experience to have all these tools laid out ready to use. Genuinely beautiful templates, drag and drop gallery uploads, a surprisingly robust blog and content editor.

I'm used to making websites via VS Code, the terminal, and the AWS control panel. I don't expect these things to go away, but as we move towards our componentised future I feel like more of us will spend more time modifying websites via a GUI. The feedback loop is much tighter, and where I originally assumed I'd feel a little divorced from the process I actually found it quite hands-on.

It reminds me a little of game engines like Unreal and Unity. They both allow developers to write components that expose variables. These can be assembled, tweaked and remixed by designers. Maybe there's a hint of things to come there, too.

Akihabara

Akihabara