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

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.

Exploring the use cases for serverless website architecture

Last Saturday, Sam introduced me to Chris Coyier’s talk on serverless-ness, The All-Powerful Front-End Developer. Pretty interesting and useful. I’m glad he leads it by breaking down the problematic nature of the word “serverless”! The following day was spent in agorama’s p2p workshop at furtherfield. Coincidentally, there is a lot of overlap in these topics.

I’ve spent the past few days wrapping my head around all of this, contextualising it against the sorts of concerns and projects we work with. Though I desperately want to get going with Dat, I’m starting with serverless because it may solve an urgent need in my day-to-day work. Right now, I’m spending much more time than I realistically can maintaining CMSs and hosting environments for older websites.

All of the below is a thought dump on the topic, an attempt to pick apart the meaning of and the use cases for a serverless website architecture.

Read more

Notes from 24 Pull Requests event

See notes and further research prompts below in relation to yesterday’s 24 Pull Requests event. It was organised by Codebar, Ladies Who Code, and Your First PR, sponsored by Gitter, Shutl, and Twitter. I left Twitter HQ with my brain fizzing, always a good thing.

Read more

Snippet for LazyLoad + Spin.js

/**
 * Identify images by class. For each image, add 
 * [Spin.js](http://fgnass.github.io/spin.js/) to parent, [LazyLoad](http://verlok.github.io/lazyload/) image, stop spinner 
 * when image is loaded.
 */

var imgClass = "lazy";

var spinOpts = {
  // [Spin.js options](http://fgnass.github.io/spin.js/#usage)
};

var spinners = [];
var elems = document.getElementsByClassName( imgClass );
for ( var i = 0; i < elems.length; i++ ) {
  var pId = "lazy-" + ( i + 1 );
  var parent = elems[i].parentElement;
  parent.id = pId;
  spinners[pId] = new Spinner( spinOpts ).spin( parent );
}

var lazyLoad = new LazyLoad( {
  elements_selector: "." + imgClass,
  callback_load: function( element ) {
    var spinner = spinners[element.parentElement.id];
    if ( spinner ) {
      spinner.stop();
    }
  }
} );

For use with LazyLoad by Andrea Verlicchi and Spin.js by Felix Gnass. SB and I have both checked out a few different lazyloading plugins, we’re pleased with how this one works with srcset.

Since the default positioning of Spin.js centres the spinner in the element, it’s best for the image to be the only child of the parent element. The code above assumes that this is the case. If I didn’t have control over the markup or needed to individually wrap each image for any other reason, would probably implement something similar to the above w/ jQuery (see the Spin.js jQuery plugin).

Surfing with coffee 2

Surfing w/ coffee #2. Order of exploration:

A
Google search “web worker” paper.js jerky (trying to sort out animation+ajax issues) → Paper.js issue #634 “Allow using paperjs without canvas” → Paper.js issue #561 “Add Font and Glyph types from plumin.js” (↓B) → Plumin.js (↓C) → Louis-Rémi Babé @louis_remiSurge, static web publishing

B
Opentype.jsFrederik De Bleser (↓D) → NodeBox, tools for generative design

C
Yannick Mathey @_____________yUSA, limited edition typographic print

D
Overtone, collaborative programmable music → Meta-eX, “Live coding. Live synths. Live music.”

See previous surf sesh.

Update to colour JS on piperhaywood.com

Just pushed an update to the colour JS on piperhaywood.com. The HSL colour has been looking pretty muddy recently, partly since it’s an orange-y hue this time of year, but mostly because sunrise and sunset weren’t being taken in to account properly. Before, the lightness value changed gradually between 12:01am and midnight. Now it looks a little more “sunny” in the daytime. Will need to keep monitoring the min/max values, yellow could be problematic.