Installing HTTP/2 on Ubuntu

The why?

HTTP/2 is a modern protocol that offers big improvement performances over HTTP/1.1. A binary protocol, it effectively streams the data, circumventing the age-old problem of slow sites due to many small assets. This means we can (in many circumstances) remove the necessity of concatenating scripts/CSS or fuss with sprite sheets. HTTP/2 provides potentially faster performance by interleaving the files as they are served. Secondly, HTTP/2 allows for the server to “push” files to the browser that it thinks the browser will need next. This can work in tandem with a new preload attribute in your page markup.

Enabling HTTP/2 on Ubuntu

  • First we need to update our Ubuntu install and tell it where to find HTTP
sudo add-apt-repository -y ppa:ondrej/apache2
sudo add-apt-repository -y ppa:ondrej/php5
sudo apt-get update && sudo apt-get dist-upgrade
  • Now we can install HTTP/2
sudo a2enmod http2

Note that for HTTP/2 to work, we need to have previously setup SSL certificates for any domains we want to serve. I covered that here.

  • Next we’ll need to tell Apache that we want to let sites be served over the new protocol:
sudo nano /etc/apache2/apache2.conf

Add a section:

# HTTP Protocols
Protocols h2 http/1.1
  • Save the file. Now we’ll need to restart Apache for the change to stick:
sudo service apache2 restart

You shouldn’t need to do anything else. Browsers will automatically try the newer protocol and the server should serve up files with no changes to your codebase.

To test whether HTTP/2 is working, you can check in Chrome’s dev tools under networking. If the Protocol column is missing, right-click the columns to add it. H2 is HTTP/2.

Screenshot of networking tool in Chrome

Dev Notes

As ever, when playing with stuff like this, take a snapshot of your machine first…

 

 

 

Email

Deeply nested tables that are purely for layout. Horrible inline styles. He must be building emails…

The problem remains legacy email clients, and the bizarre long tail of support that results in. While desktop browsers have moved on and it has become relatively acceptable to focus support on “evergreen” browser, this move is happening much, much slower for email clients. The result is sprawling legacy code like the screenshot below.

Honestly. We don’t need to support Outlook 2013 do we? I can only imagine (with zero evidence, natch) that anyone still using broken HTML rendering mail clients like Outlook 20XX are doing so because they are in a corporate environment where they are not allowed to update or change their mail client.

But here’s the thing. Most of the clients I’ve worked with are commercial… public facing. How many folks are really using their corporate email client to read personal emails? I certainly wouldn’t be picking up emails from my personal accounts in a locked down environment. I imagine in many environments this may even be against company policy in the first place.

I do most of my email reading on my iOS devices, and it makes me cringe when I look at the size of some of the emails I receive: 90% (possibly another made-up figure) layout crap to support other email clients—clients that almost nobody uses outside of locked corporate desktops.

Modern handhelds have very good HTML email rendering. gMail even supports responsive emails now.

So can we please make this stop?

Screenshot of email markup
Email markup hell

Backups

My host (Digital Ocean) provides weekly full-server backups, and I can snapshot on the fly before I make any dramatic configuration changes. But this isn’t really fine-grained enough for a production environment.

Finally got around to doing something about that. All of my code is in GitHub, so I’m only really worried about content – and for that I needed a good, simple solution for WordPress. A place to start at least.

I came across the excellent UpdraftPlus plugin for WordPress, and after some fiddling around, I got it working nicely with my Google Drive account. Initially I wanted to use Dropbox, but frankly Dropbox’s free space is pitifully small. In an ideal world I’d connect any backups to Apple’s iCloud storage… after all I’m paying for a terabyte of it. Sadly, none of the services I looked at support that. Apple! Google Drive with 15Gb storage to the rescue, via the creation of an API key and authorising my web server, the backs are running smoothly.

Not that I’ve tested them yet.

…that’s for another weekend.

Split personality…

Writer Me likes to hang out with fellow writers, share fun links, talk about the process. There’s a lot of  hair-pulling and alcohol involved. Developer Me likes to chat tech with fellow developers, share experiments and talk workflow. There’s a lot of hair-pulling and alcohol involve.

I tend to do most of my tweeting from @shellbryson. This leads to a problem: there are two sets of folks I’m interactive with and 1) when I’m on a roll with writing I’m posting a tonne of writing things 2) when I’m deep in code experiments… Basically I need to pick an audience and stick with it. It’s a marketing thing (sigh).

Yesterday I created a new Twitter account dedicated to Developer Me@sherucode.

Banners and Avatars

New account, new art. I like my wee “sheru” Chibi—a left-over from working with the wondering AnimePicks team a few years back—but the avatar never really fit the developer me. Definitely not the writer me.

Cartoon image of Shell (Sheru)
Shell (Sheru) Chibi

Head scratching, and with zero time to do a full brand, I opted for something playful, but… code-y. What better than to use what I have to hand? Shot with an iPhone, retouched in PhotoShop:

Photo of Lego minifig.
Avatar

Twitter likes a big banner, so I took another photo of what was literally in front of me… my keyboard. Then off into PhotoShop. Layer masks, blurs and radial fills and masking of letters and we have:

Retouched photograph of keyboard
Banner

It was fun to spend some time with PhotoShop again. Working for an agency means I tend to be given designs to implement, rather than having and hands-on during the design process.

Linked radio buttons with CSS

Screenshot of styled radio buttons
Regular form elements, heavily styled.

Demo: codepen.io/shellbryson/pen/KWKyXN

It’s a pattern we see fairly often across the web: a series of ‘buttons’ connected by lines to indicate procession, ratings or steps. The trick is to make it as flexible and accessible as possible, and this is perfectly achievable without JavaScript.

Using regular form elements as our base, we can use a little extra markup and some trickery with CSS ::before and ::after to create attractive (or… excessively pink) results without sacrificing the underlying accessibility.

The HTML

So we start with a regular ordered list:

<ol class="nodes">
 <li class="node">
   <input class="radio" type="radio" id="r1" name="radio-set">
   <label class="label" for="r1">1</label>
 </li>
 <li> ... </li>
</ol>

We’re using accessible markup, making sure we have a label and that the label is referencing the field (via for=). Any interaction with the label will be passed onto the field itself, which is key as we’re going to play with the label to give us our fancy inputs.

The CSS

We take the label, and use ::before and ::after to position circles on top of the real form input to mask it, and getting our desired look. As these pseudo-elements are children of the <label>, any interaction with this label is passed through to the form field below. We simply layer things up:

 

 

 

.label {
 ...

 &::before {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0; // trick to fill element
  margin: auto;
  z-index: 1; // ensures this is displayed above form field
  width: 60px;
  height: 60px;
  content: " ";
  border-radius: 50%;
  background-color: pink;
 }
 
 &::after {
  ...
 }
}

The final step is ensuring that the :checked state of the radio button is reflected by our fancy styling:

 .radio:checked + .label::after {
   background-color: white;
 }

As we want our list to adapt to the space available in the browser, we can use css flex with justification property to ensure each li is evenly spaced:

.node {
 display: flex;
 justify-content: space-between;
}

By adding an additional  ::after on the .node itself, we can join the nodes together. Note, we’re deliberately offsetting the start of the pseudo-element so that the line stretches from the centre of the element to the right edge of the <li>.

.node::after {
  display: block;
  position: absolute;
  left: 60%; right: 0; bottom: 0; top: 50%;
  content: " ";
  height: 6px; width: 100%;
  background-color: lighten($color-base, 20%);
 }

Finally, you’ll need to remove the line from the last child as we do not want a line going off into nowhere:

.node:last-child {
  &::after {
   display: none;
  }
}

Interaction and animation

By adding transforms and transition delays we can achieve all kinds of over-the-top effects. Advice: don’t over use this, remember the UX.

Go have a play (CodePen)

Dev notes

We’re making heavy use of display:flex and positioned elements here, and while it all remains flexible across most modern browsers, flex can be rather buggy. You could probably achieve much of this using CSS display:table, or if you were daring, regular float.

Reactionary

Another crazy week as we get into the final few days before launch of a big new financial site at the studio. Meanwhile, I’ve managed to calve out a little time to play with React. I still have an issue with JSX and inlined CSS. It feels like a backwards step, mixing structure, JS and CSS together. All that careful separation of concerns that have been hard-fought over the years seem to somewhat fall aside when it comes to some of the modern framework.

Thing is, React is great. It makes a tonne of sense. It’s really cool to work with.

I’m still unsure how I’d fit it into a project where I care about rendering when JavaScript is not available. I also worry about page weight, given the lump of script that needs to be delivered with a React project. There are of course ways around this—loaders, server side rendering with Express—and certainly as web sites become more ‘app-like’ I expect to see more and more React based sites. The danger though comes from using React (et al) for sites that could be built far more simply using a standard technology stack. Not to mention easier to support.

Adding IPv6 to Ubuntu

Finally made some time to investigate and set-up IPv6 support on my Ubuntu (Digital Ocean) servers. Turns out, it’s not that hard. Here’s the TLDR.

  1. Take a snapshot. Or backup. Because.
  2. Now, get an address… In my case, that was as simple as clicking a button on my Digital Ocean droplet admin. Unfortunately, that meant an unscheduled machine reboot… as it can only be applied while the machine is turned off (or being newly provisioned). Oh well.
  3. SSH to your server.
  4. Then add your address:
  5. sudo ip -6 addr add public_ipv6_address/64 dev eth0
  6. Followed by your gateway:
  7. ip -6 route add default via public_ipv6_gateway dev eth0

    I’ll admit I was confused initially by this step as I was accidentally adding the ipv6 address again. The gateway address is different.

  8. sudo nano /etc/network/interfaces
  9. Add the following. Obviously, add your own v6 address (note, you do not add the /64 we entered when setting the address up initially) plus gateway. The dns addresses here are for Digital Ocean, so if you are using a different host, you’ll need to to change them.
    iface eth0 inet6 static
      address primary_ipv6_address
      netmask 64
      gateway ipv6_gateway
      autoconf 0
      dns-nameservers 2001:4860:4860::8844 2001:4860:4860::8888 209.244.0.3
    
  10. Save the file. Reboot the server.

More info? Digital Ocean have an detailed article + comments.

IPv6

Manic week at work as we get closer to the release on a big financial site (hence the severe lack of updates here). Took some time out tonight to do some housekeeping.

Finally got around to adding IPv6 after reading various press regarding the increasing scarcity of IPv4 addresses. It’s a little more fuss to setup, but seems to work. Not that I can hit IPv6 addresses from this cable network…

While tinkering with the server, snapshotted, updated and patched everything.

A week ago I added Digital Oceans’ new monitoring beta tool, and it keeps bugging me that this server is using over 60% of its memory. Which doesn’t match what the memory monitor itself tells me on their admin panel. Something else to investigate…

Virgin Media were around today so we have a new 8-tuner set-top box and 200mbit internet. Long (very) story short, it’s taken 6 months to get a new modem from them. But hey, now we have the top tier TV and funky new 8-tuner set-top box too.