Over the past couple of years, I have been slowly working towards using iOS exclusively to update my website–it’s liberating being able to publish posts and photos with just an iPhone or iPad. Now that it’s all working, I’ve been asked to describe my workflow, and the tools I use.

---

The site itself is stored in GitHub as a collection of Markdown¹ and media files–one per page. Whenever a change is pushed, it’s built and deployed automatically. While I use a homegrown solution for this process, it’s a very common approach: GitHub Pages offers this behaviour out-of-the-box with Jekyll and it’s a great place to start.

With an automated build and deploy process like this in place, publishing becomes all about efficiently managing a git repository of Markdown files. For this, I make use of a few apps and workflows:

• Working Copy for editing content and templates
• Safari and Split Screen for live previews while editing
• Photos and Shortcuts for managing and exporting photos

Since starting this post, I’ve also been experimenting with iA Writer for dedicated Markdown editing and offline previews.

Working Copy

Viewing the repository in Working Copy

Working Copy has been around for some time now and is the git client for iOS. It’s fully featured enough to be the only tool you really need, providing a great built-in editor, while also playing nicely with other apps through Files integration, Shortcuts, and open-in-place.

Editing in Working Copy

The integrated editor provides syntax highlighting for a comprehensive set of languages (including Markdown), allowing me to edit content, templates, and even the build scripts for my site. Publishing those changes is then simply a matter of pushing to master. This is where Working Copy’s comprehensive set of keyboard shortcuts come in, allowing quick turn-around when editing drafts: you can commit and push right from the editor with ⌘ + Shift + C.

Working Copy offers a great collection of keyboard shortcuts

Since I include a number large media files on the site, I make extensive use of git-lfs to stop them slowing down the repository, and Working Copy excels here too, offering out-of-the-box support.

Safari and Split Screen

While I can edit (and preview) in Working Copy, it’s useful to be able to see the content as it will appear in my website. To achieve this, I publish draft posts to a separate section of my website, commit and push regularly during editing, and use Safari for previewing.

Using Split screen–one of the features that really allows iOS to shine on the iPad–I can keep both Safari and Working Copy side-by-side without having to worry about excessive screen furniture or other distractions.

Editing and previewing all at once

Photos and Shortcuts

Since I like to control the publishing experience for my media, things like Google Photos, Instagram, or even Flickr aren’t options. Instead, I follow the same model as the rest of my website, adding the files to my git repository, and using templates to display albums and individual photos and movies. This can be achieved with Jekyll, but only with many custom plugins and templates, and that complexity is the main reason I wrote my own site builder. Perhaps one day I will publish the code but, for now, I’ll cover briefly how I manage my media and get it into git.

For my media library, I use the built-in Photos², which syncs across all my devices, meaning everything is available irrespective of the device I choose to use for publishing. Here, I organise everything into albums to make it easy to prepare for publishing.

Curation takes place in Photos

When it comes to storing media in my site, the approach I take is very pragmatic: folders are created for the year, month, and album, and the corresponding photos and movies live there, sorted by date, and numbered sequentially. A sidecar Markdown index file contains the album metadata.

/photos/2018/10/prge/
    index.markdown
    1.jpg
    2.jpg
    3.jpg
    ...
    7.m4v
    ...

Using Working Copy, it’s easy to manually create this directory structure and Markdown file–I only need to do this once for each album so it doesn’t represent significant effort.

Numbering the files correctly on export does take a little more work however and, for this, I use Shortcuts: with a simple workflow, it’s possible to rename files sequentially, and then prompt the user for a location to save them. Adding my photos to Working Copy, is then a matter of selecting the Shortcut from the share sheet in photos, instead of exporting directly to Working Copy. And, of course, just like the rest of the site, pushing to GitHub triggers the build and redeploy.

Shortcuts provides a drag-and-drop editor for creating and editing tasks

iA Writer

While Working Copy does provide a way to edit and preview Markdown, it can can be a little cumbersome–it’s strength is breadth, not depth. For specific tasks, it’s nice to be able to kick-out to a dedicated tool, and iA Writer is a great option, allowing direct editing of files in Working Copy. It offers a nice, minimal UI for editing with a quick keyboard shortcut (⌘ + R) for previews, making for a rapid editing experience. Those previews are even customisable with templates allowing you to tweak how it appears to match your publishing platform.

Editing in iA Writer

I have found that I need to tweak the options a little to disable things like smart quotes and smart dashes in the editor (this can really mess up adding code to posts, and HTML tags), but it’s good to have that flexibility. It’s been a great addition to the toolbox.

Like many other dedicated Markdown editors, iA Writer offers a collection of tools for formatting, including inserting links, and–perhaps one of my most used features–adding images directly from Photos.

---

Undoubtedly my workflow will change over time as iOS evolves and new apps are written, but already, these apps offer a wonderfully light-weight solution for editing on-the-go.

Having lived in Japan for a few years, I often find friends come to me for travel advice. To help answer that question, I’m putting together a collection of short posts about both the places I’ve been and those I’d like to visit.

Continuous Life in a Beautiful World

teamLab is an art collective, based in Tokyo, with a focus on large-scale immersive and interactive digital art. Each and every piece looks striking, marrying physical and digital experiences. They have a permanent installation in Odaiba, Tokyo, the Planets ‘museum’ in Toyosu, Tokyo (through Fall 2020), and a number of events in other cities.

While I’ve not yet had a chance to check it out–one of my biggest regrets from my last trip to Tokyo–I’ve heard great things, and strongly recommend a visit if you’re in the neighbourhood.

Last year, I spent a few weeks of the summer in Cambridge. Amongst other things, it was a great opportunity to hang out in Makespace with my good friend Michael and continue working on my Anytime x Nixie project–the Nixie tube-based world clock I’m building.

Since Michael currently spends his time creating electric guitars, he’s a great person to turn to to create a beautiful case for the clock, and we had a lot of fun doing just that: in under two weeks, we produced a number of PLA prototypes, CNC’d the main body of the case, laser-cut a base, and printed some custom feet. You can find Michael’s notes on the process here, and here.

In my previous posts covering the clock, I described the process of designing and building the electronics, and creating the firmware to control the Nixie tubes. In this post, I’ll focus on designing and assembling the case:

1. Design and prototyping
2. Testing the design on the CNC router
3. Machining the wood box
4. Laser-cutting a base
5. Printing the feet
6. Finishing up

Design and prototyping

Michael kicked things off by using Fusion 360 to produce some designs for the case–you can export PCBs directly from EagleCAD into Fusion 360, so we were able to try everything in place without creating a single part. I’d never used multiple components in Fusion before this, so it was a great learning opportunity. Once we had something we were happy with, we set about printing, testing, and revising the design.

An early design idea

We made use of Makespace’s Ultimaker 3 extrusion printers for our prototypes, printing in PLA. These are quick and fairly reliable; ideal for rapid iterations. We did encounter a number of printer failures during the process–a snag in the PLA spool killed our first print, and the unusually hot British summer caused a number of prints to deform a little–but after a few days, we’d seen enough to have confidence in the design.

Making the most of a failed print to test some dimensions

We ultimately went through a number of variants of the case, tweaking clearances, adding a cut-out for the USB port that will power the clock, and adding air vents to ensure things don’t overheat.

Rear of the clock, complete with USB port and vents

Testing the design on the CNC router

Having decided we were happy with the overall design, we next set about figuring out how to cut it out of wood using the CNC router. This is more complex than the extrusion printer, requiring multiple phases, with tool changes in between, and flipping the material in the process.

To convince ourselves we had everything planned correctly–and to avoid wasting our chosen wood–we glued a few layers of MDF together and tested with this.

The completed part waiting to be cut away from the block of wood

Happily we got most things right the first time around, and using the MDF allowed us understand just how careful we needed to be when drilling out the rear vents.

Machining the wood box

For the final case, I picked up two blocks of wood–Wenge and Wild Olivewood–from Exotic Hardwoods UK Ltd, ultimately selecting the olivewood. We found ourselves with a block of wood significantly larger than necessary, so I should be able to get a number of clock cases (or other projects) out of it.

We repeated the CNC steps we’d practised on the MDF and, fortunately, everything went according to plan, leaving us with a beautiful box. It’s really a true pleasure to work with natural materials like wood–the texture and grain brings so much to a simple design.

Using a CNC router, there’s more finishing required than a simple extrusion print: if you look closely in the above image, you can still see the tabs that the router leaves in place to connect it to the main block so it doesn’t move around during cutting. These needed removing manually as part of the finishing process. We were also unable to drill the rear vent holes using the router as they’re perpendicular to the body of the case, so we did that manually, placing a support block inside the case, and using a pillar drill along with a laser-cut guide:

Ready to drill

We then continued the finishing process by sanding the box. This involves working through gradually higher and higher grit sandpaper until the wood has almost a silken plastic-like quality. It’s amazing how different it both looks and feels after this process.

Since it’s a time consuming process, we spaced the sanding out over the course of a few days but, during this time, were surprised to discover the case shirking. Wood requires seasoning (slowly drying, during which time it shrinks as the moisture content reduces) prior to working with it, and I had unwittingly purchased unseasoned wood.

Keeping an eye on the shrinkage

Fortunately, our plan had always been to finish the case with Crimson Guitars‘ finishing oil, so we quickly started this process in the hope that it would cause the wood to expand a little, while also serving to reseal it. After a few coats, the base stopped shrinking and, thankfully, everything still fitted. In the future, we’ll experiment with initially cutting away just some of the wood and leaving it to dry before cutting the details in the hope of avoiding this issue.

Letting the base dry in between coats of oil

Laser-cutting a base

Many people have contributed to Anytime, and I wanted to acknowledge that so, following in the tradition of the first Mac, I thought it would be nice to include the signatures of the people I’ve had the pleasure of working with on this project: Michael, Michi, Pavlos, and Anna. Having received my Makespace laser training, I opted to laser cut the base out of clear acrylic, complete with everyone’s signatures:

Once installed, the clear acrylic shows off the circuit board inside–complete with a few hardware bug-fixes:

Printing the feet

Since we want to allow air to flow through the clock–in through gaps to the sides of the base, and up through the holes at the rear–it’s necessary to raise the case up slightly with some feet. This has the nice aesthetic effect of making it look like it’s floating.

As with everything in this project, we designed our own, modelling them in Fusion 360, and then printing them, this time using the Form 1 resin printer.

Resin printers print at an angle to reduce the surface area of each horizontal slide to make it easier to separate from the printing plate

The Form 1 can produce parts at an almost unbelievable resolution when you’ve become used to the limitations of an extrusion printer like the Ultimaker, but it can be slow and finicky. We tried a few prints, on both the Form 1 and the Ultimaker, but ultimately a collection of imperfections caused me to turn to Shapeways for the final print:

Finishing up

While we didn’t quite manage to pull everything together before I had to return to California, we came mighty close. Since then, I’ve assembled all the parts–including the Shapeways feet–and the clock sits in pride-of-place in my apartment.

Next, I’ll be improving the software, and producing a few more clocks.

---

I would like to extend a big thank you to Makespace–especially Jonathan and Michael–for allowing me to join for such a short period of time and for making me feel so welcome. I can’t wait for my next sabbatical.