Skip to content

Shell

Live-blogging and Micro-blogging

Exploring microblogging directly from WordPress. I’ve found this style of blogging really useful when working through a problem; a worklog/devlog of sorts so I can retrace my steps (those not covered by git commits).

This looks promising: https://wordpress.org/plugins/wp-to-twitter/

For live blogging I also found this free (open source) project.

Screenshot of LiveBlog splash page

My only fear with introducing yet another 3rd party service is over-all reliability.

 

Renewing SSL with crontab failed

LetsEncrypt SSL certificates expire every 90 days.

Looks like something not quite working with the auto renewal of SSL certs for my person domains. Caught an email from LetsEncrypt warning me that various domains were about to lose their certificates, despite a cron job running on the server.

To edit the crontab (Ubuntu):

 sudo crontab -e

Which now reads:

0 4 * * 1 /usr/bin/letsencrypt renew >> /var/log/le-renew.log

Updated cron to run on Mondays at 4am (using this handy cron calculator).

For reference…

sudo /usr/bin/letsencrypt renew

…will manually renew any certificates that are about to expire.

 

React: WordStack (part 1)

This is the first part of a series of blogs as I explore building a small web app in React, with a modern workflow.

Background: WordStack is based on a really simple user story: Tracking daily writing progress via writing sprints. The idea of writing sprints comes from NaNoWriMo—the annual writing challenge where writers across the world attempt to first-draft an entire novel (each) in a month. It sounds like madness. It is (I’m one of those writers). To hit the goal (50,000 words, 1 month) you need to write 1600 words a day, or more if you skip days or miss targets.

One great way to achieve these is to set micro-targets and write in sprint. That is, set a small arbitrary time and write uninterrupted until that time expires. Tracking this is somewhat random. Via FaceBook chat, or the NaNoWriMo forums, or Slack. Many writers use a similar process outside the intensity of November. There is a very simple tracking tool on the NaNoWriMo web site, but it’s only really useful during the competition. This led me to thinking:

Wouldn’t it be cool if there was a tool to help with this?

Wires

First pass of this app needs to be really simple. First, because it’s part a experiment in learning to build production-level React code, part because I want to follow good agile practice and release small and often (MVP).

Screenshot of wireframe for initial application
Early wires in Sketch

I’m not too worried about the desktop layout for this version, so here we have the most basic process: Select your sprint style > visualise the sprint countdown > complete sprint > view progress. I’m not concerned with storing this yet.

Workflow

As this is much an experiment with workflow as React, I’m tracking progress of the project through a GitHub Project.

Screenshot of Kanban tracking for project on GitHub
GitHub project Kanban

The project itself follows standard Gitflow practice (develop branch with feature and release branches) and committed to GitHub.

Screenshot of GitHub
GitHub

IDE

To go with the new technology stack, I’ve switched out my usual dev tools for a fresher, more modern stack set: Atom (with some customisation, plus plugins), Hyper (a very nice, customisable terminal) and Chrome. As I’m focused on mobile for the prototype, it all fits nicely on a MacBook screen.

Screenshot of development environment
Atom, Chrome and Hyper, a great dev combination.

Getting started

Screenshot of directory structure
Directory structure

To get out the door, I started with Create React App and followed the basic setup. It was great for getting a bare-bones React app running. I quickly adapted this to use SCSS (via node-sass) and implemented a folder structure for components that more closely matched the in-house pattern library at my day-job.

Well, it doesn’t look great right now. But that’s not the point. Start small, see what works (and how it could work), iterate:

Screenshot of WordStack

Dev Notes

I’ve been spending a little time with React, and I like it. I’m not a fan of jsx… Mixing JS and markup and CSS into an unholy pot of mystery code just didn’t feel right. Surely this thing would taste awful. I persisted. It tastes pretty good.

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.