Published by

Use Portfolio Starter to create a personal site with projects, pages, and posts

Screenshot of Portfolio Starter

This tutorial will teach you how to set up a personal website using Portfolio Starter, a starter kit for portfolio-driven websites made by Sam Baldwin and me. Check out the demo site to get a feel for how it looks, and visit the GitHub repo for more on how it works.

The tutorial is geared towards people that have little-to-no coding experience and are unfamiliar with things like GitHub, Eleventy, and Netlify. By the end of the tutorial you should understand terms like “repository” and “static site”; you’ll be able to edit your projects, pages, and posts; and your website will be hosted for free. Though basic experience with code such as HTML or CSS may be useful, it isn’t necessary for this tutorial since we’ll be using the hosting user interfaces to set this all up.

Let’s get started

Published by

Digital coffee 🤖☕️

I’ve been getting a bunch of emails recently with web- and tech-related questions from collaborators, friends, clients, family members, almost everyone I know. I suspect this has to do with the huge shift we’ve all made recently in the way we work and live our lives.

Related to this, I’m offering offering free 30 minute slots every Tuesday afternoon GMT to anyone that wants to have digital coffee over Google Hangouts. I haven’t decided how long to do this, but I’ll try to continue until we’re past the worst of current events.

The point is to offer individuals – particularly those that are self-employed or run small businesses – an opportunity to ask nebulous tech-y questions. But I’m happy to talk about anything! WFH tips, recipe ideas, the best movie you’ve seen recently, great sci fi authors, how to grow herbs indoors (I could use some pointers). Only thing I’d probably rather not talk a lot about is COVID-19, please and thank you.

I can’t promise to have all the answers, but I can promise my insight and some nice face-to-face time. We could all use a bit of that right now.

If you think you’d benefit from this, feel free to sign up for a slot. If you know someone that might benefit from this, point them my way.

This is directly inspired by Carly Ayers’s Digital Coffee as linked to on Google’s Hack to Help: COVID-19 site. Nice idea.

Sign up for a 30 minute slot

Published by

gemmacope.land

gemmacope.land

Gemma Copeland’s new site is online! This was really fun, one of the truest collaborations I’ve done in a while. Minimal JavaScript, Eleventy + Netlify, Arena API fun, unicode arrows, accessibility at the fore. It was an exercise in playful sufficiency, hopefully we’ve created a functional sandbox that she can work with for some years to come.

I’m hoping to write a bit more about the development at some point, particularly on working with the Arena API. Ran in to some interesting hurdles with block ordering! In the meantime, see the repository on GitHub and check out the making-of post on her website.

Published by

New site for a Barcelona-based architecture practice

We launched a new site for architecture practice Barozzi Veiga about a month ago. It was a pleasure to work with Adrien Vasquez at John Morgan studio during the development process and to work with the Barozzi Veiga folks as we fine-tuned things. The site launch coincided with the announcement that Barozzi Veiga had been selected to take on a major renovation of the Art Institute of Chicago (read more).

barozziveiga.com

Published by

Some background and selected projects

I’ve just added a Work & Background page to this site that provides a bit more context for what I do and some selected projects. It’s a WIP, there are some thumbnails I would like to swap out and I’m sure the text will need tweaking. Nice to have a version up at any rate.

I’m really hoping to explore a few new-to-me bits of tech in the near future, particularly related to our books index. SB has been doing some very cool experiments with that recently.

Published by

britishearways.com

Screenshot of britishearways.com

Last month, I completed a major overhaul of the British Earways website. The design by Valerio di Lucente of Julia is almost entirely unchanged, the adjustments were largely performance-related and under the hood, geared towards modern browsers. Here’s brief rundown of the changes:

  • Style the full-window player layouts using CSS Grid Layout + 100% height (not 100vh since that can lead to unexpected behaviour on mobile browsers), and use CSS Scroll Snap w/ polyfill for scroll behaviour
  • Achieve flexible typography and spacing with “CSS Locks”
  • On non-touch screens, implement invisible DragDealer instances so that each player’s scrubber can be dragged
  • On touch screens, add click event listeners that advance the relevant scrubber to the click target
  • Use styled HTML5 progress elements for each player since these are easily manipulated via their max and value attributes and don’t require adjustment if the window is resized
  • Use the Web Audio API to initialise each audio file and trigger the necessary state changes as the time updates
  • Switch the audio preload attribute from auto to metadata to reduce the size of the page when it initially loads
  • Update CMS to Kirby 3 (this was a joy, IMO the panel layout options make v3 much more client-friendly)
  • Adjust post_max_size, memory_limit, max_execution_time, and upload_max_filesize to allow upload of large (150MB+) audio files

I ran in to one issue that isn’t yet resolved. Kirby copies all uploaded media from the private /content folder to the publicly-accessible /media folder. This copying normally happens almost instantly, even with very large files. On the BE site however, the copy is pretty slow. Since the site pulls the audio duration from the audio file itself via the Web Audio API, the displayed duration is incorrect until the file has finished copying. This is almost certainly related to some rate limiting done by the shared hosting company, a legacy from the preexisting site. It isn’t a huge deal since the copying always finishes eventually, but it isn’t the best behaviour. I’d like to raise the issue with the hosting company but don’t have high hopes, shared hosting providers use rate limiting for a reason.

At any rate, I’m really looking forward to seeing how DB uses the site over the next year and listening to the new mixes.

Published by

Richard Hollis’s book on Henry van de Velde, and a note on the index

Spread from book on Henry van de Velde by Richard Hollis

Richard Hollis’s Henry van de Velde: The Artist as Designer is out at long last. A lot of love, sweat, and tears has gone in to that book. It is absolutely jam packed, covering pretty much all of HvdV’s life with over 400 images. As part of Occasional Papers, I worked on the permissions, a bit of editing, and compiled the index.

Read about how the index was compiled

Published by

Pelican, Penguin, The Happy Reader

The folks at Penguin Random House have been sending some particularly strong e-newsletters recently using the system Sam and I created a little while back. Links below.