Practice Street Photography

A man on a bicycle in Paris

Last month, I tried street photography for the first time. I like taking candid photos of people in the street. They’re so interesting.

People walking on a paris sidewalk at dusk

I was in Paris for most of August. No one seemed disturbed by my camera. Nonetheless, I struggled to point my lens at strangers in the street. It really challenged me to balance my confidence and my meekness. To stand in the street pointing a camera at a passer-by, you need to be bold. But you also need to seem unimposing and harmless.

Visit Arichonan

The ruins of a stone house in the forest.

Arichonan is an abandoned village on the West Coast of Scotland. In the 19th century, the landlord evicted the villagers — farmers — to rear sheep.

When the villagers protested, the police came and carried them away.

An abandoned house on a hillside.

Last month, we visited Arichonan. It was me, Claire, and our friend Erin.

Hidden down a path in the forest, the village overlooks a valley stretching miles out toward the ocean. The village itself sat on the slope, old stone walls criss-crossing the hill. The walls drew the outlines of store rooms, gardens, and cottages. A main house stood at the top of the village.

A fireplace heath in the ruin of an old house

The buildings appeared ancient, but some crisp details remained. A cracked cauldron sat on the ground in one house. An ornate iron hearth leaned against the wall in another.

It was just a few weeks prior when we hosted our friends Liam and Laura. Laura, a Canadian, had ancestors from Scotland. They moved to Canada in the 1800s when they were displaced from their land by sheep.

I thought about my own ancestors, who moved from Aberdeenshire to Canada around the same time. They were poor farmers, too.

According to historians, the farming way of life was difficult and leisurely in turn. Crofters, like my ancestors, rented a small farm from a landlord. Farm work was heavy in the harvest season. For the rest of the year, they had spare time for leisure and craftwork.

During the Industrial Revolution, demand for wool made shepherding more economically valuable than farming. The wealthy landlords who owned most of the countryside evicted their tenant farmers and let the farmland go fallow so they could graze sheep. The farmers were forced to find a new livelihood, farming on poorer land, working for wages in the cities, or making a new life over the ocean. This new flood of cheap labor provided the engine for Britain’s industrialization.

At the same time, in response to Scottish resistance, the British military was stamping out community and heritage in rural Scotland, destroying the traditional way of life.

The combination of military and capitalist subjugation drove Scots out of their traditional homelands, emptying the Scottish highlands. Countryside that was once full of farms and villages became desolate.

During the same period, Romantic painters discovered the dramatic mountains and desolate moors of Scotland. The Romantics popularized a new image of Scotland as a majestic, untamed wilderness — the image that persists today.

Flash-forward to the 1900s. Workers in the cities returned to the Scottish countryside — not to live, but for leisure. Sir Hugh Munro mapped Scotland’s mountains and made hiking the country’s national pastime. Landlords tried to ban hikers from their territory, but Scots fought back. You can’t own the land, they said. The people won, and access to the land became law in 2003.

When you ask a Scot what they do in their spare time, they’ll likely tell you they go hiking. Glasgow itself sits at the foot of the highlands, and you can see the hills from any high point in the city.

When you venture into the hills, it can feel like you’re completely alone.

But you’re not. And sooner or later you’ll walk past a crumbling fieldstone wall or the foundations of a farmhouse — reminders that this place wasn’t always empty.

Our friend Erin relaxing in a tree

After we got home, I Googled Arichonan to find out what happened to the villagers. After their revolt was quashed — like Laura’s ancestors and mine — they moved to Canada.

Create a Pure-CSS Expanding DIV

At Prismic, the sidebar in our navigation has some accordian elements. When you click on them, they expand smoothly and a group of children items appear, using only CSS.

An expanding div is a classic effect, which basically looks like this:

Click me

Seeing this effect in the Prismic docs made me want to try to implement it myself, but I could never find a solution I liked. Most solutions rely on max-height, which — though I won’t get into it here — I’m not a fan of.

Then, yesterday, I saw a tweet from @Steve8708 showing an example where Apple uses this effect, but without explaining how they achieve it. Steve challenged readers to figure it out themselves.

The basic mechanism relies on a common trick where the checkbox modifies the style of its siblings. This works because the checkbox state can be accessed with the :checked pseudo selector. But changing the height of an element, specifically, is much harder.

This is difficult because of the way that web browsers understand an object’s inherent size and a manipulated size: they’re completely different. It’s like the difference between measuring coffee in milliliters and mugs. I might have a mug of coffee, but I can’t double my coffee by getting another mug, because the other mug might be a different size. Instead, I must measure the coffee in milliliters and double the milliliters.

Similarly, web browsers mostly don’t allow relative sizing of elements. You can’t directly say, “Make this element twice as big.” So, instead, you have to measure the size of the element and use math and JavaScript to resize it. That basic operation is probably one of the most common uses for jQuery — the infamous JavaScript library that dominated the web through the aughts.

Here’s the operative (Svelte) code for that box above:

<script>
  let open = false
</script>

<div class="first" class:open on:click={() => open = !open}>
  Click me
</div>

<style>
  .first {
    height: 50px; // Initial height is hard-coded
    border: 2px solid black;
    transition: height 1s;
  }

  .open {
    height: 100px; // Final height is hard-coded
  }
</style>

As you can see, the initial and final height are hard-coded, which is bad practice.

I’ve spent a lot of time trying to crack this problem. There must be a way to do this without JavaScript!

There is!

It turns out, there is one relative CSS unit that can achieve this pretty nicely: line-height.

Open / Close
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Here’s the relevant code for that example (this is just HTML with CSS):

<input type="checkbox" />
<strong>Open / Close</strong>
<div class="collapse">Lorem ipsum...</div>

<style>
  .collapse {
    transition: line-height 1s ease-out, opacity 0.6s linear;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    opacity: 1;
  }

  :checked ~ .collapse {
    line-height: 0;
    opacity: 0;
  }
</style>

I’ve combined line-height with opacity to prevent a mess when the lines overlap. However, if you don’t have any word wrap, you can prevent this with overflow-hidden:

Open / Close
  • One
  • Two
  • Three
  • We can hide the checkbox and replace it with a label element, which will function as our toggle button.

  • One
  • Two
  • Three
  • Here’s the code for that one:

    <input class="hidden" id="toggle" type="checkbox" />
    <label for="toggle">Open / Close</label>
    <div class="collapse">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </div>
    
    <style>
      .collapse {
        transition: line-height 1s ease-out;
        line-height: 1.5;
        margin: 0;
        overflow: hidden;
        opacity: 1;
      }
    
      :checked ~ .collapse {
        line-height: 0;
        opacity: 0;
      }
    
      .hidden {
        display: none;
      }
    
      label {
        font-weight: 700;
        cursor: pointer;
      }
    </style>

    That’s a pure-CSS animated div.

    See the skeleton code and styled code on CodePen.

    Signal Change

    A collection of construction signs under an overpass.

    Glasgow is under construction: a city of changing priorities. Always signaling the times.

    A sign reads Changed Priorities Ahead

    It’s a place of mixed emotions: Victorian tenements, brutalist high rises. Long summer days, endless winter blues. Wild highlands, industrial wastelands.

    A highway sign rises above wild shubbery

    It makes me happy and it makes me sad.

    Eat Grass

    Cows on a hill by the beach.

    In April, Claire and I went to Skye with our friends Liam and Laura.

    A white calf grazing on a ridge near the ocean

    We camped on a ridge overlooking a white-sand beach. Between the ridge and the beach was a pasture.

    A white calf looking around a ridge near the ocean

    In the evening, cows came out to graze. I took these photos at magic hour.

    A herd of cows grazing along a steep hill over a white-sand beach

    I love how the photos came out. They feel slightly psychellic, like nature photos from a 1970s textbook. It feels true to the moment: beautiful and surreal.

    A cow striding through a pasture, looking straight at the camera

    I took this photo and then my battery died. I climbed back up the ridge to our campsite and we watched the sun set.

    We had a small fire, which we used to make a hearty stew and hot chocolate with whisky.

    The sunset took forever, and the afterglow lasted until late in the night. When it was finally gone, the sky filled edge to edge with stars. Claire and I laid out for a while, staring up.

    Sometimes I get vertigo when I stand close to an edge. Laying on the ground, staring at the celestial fresco on the infinite vaulted sky above, I felt the same feeling — that I might slip off the ground and fall into space.

    Lobster

    A lobster in Edinburgh.

    A lobster in a car in Edinburgh.

    Start

    This website is made with Svelte, which allows you to create really robust websites really easily. For this project, I’ve combined Svelte with Markdown. You know when you put asterisks around words to make them italic in whatsapp? That’s Markdown.

    That means that I can write something like this:

    <script>
      let product = 5 * 5
    </script>
    
    > The **product** of five times five is {product}.

    And it will appear on the page like this:

    The product of five times five is 25.

    In fact, you can look at the code for this page on GitHub. You’ll be surprised by how simple it looks.

    © Sam Littlefair, 2022