Writing on Tablets Tech stuff from @yeltzland

Blogging on the iPad

All about how I'm blogging efficiently from my iPad Pro

Why do this?

Like most people who are trying the ‘iPad Work Lifestyle’, half the fun of trying it is the challenge to doing work a in different way. At times, working on the iPad certainly makes you think about how to solve problems to do the ‘simplest things’. Tasks that are natural on PCs may involve lateral thinking to complete on iOS.

It’s not all bad though. Single focus apps (or at most 2 in split screen view) do make it easier to concentrate on the task in hand. Also many apps are exceedingly well designed to do a few things very well rather than more general purpose PC apps.

Most of all, it somehow feels much more fun to write this on my iPad that it ever would on either my Mac or my Windows PC. I can’t really define why (novelty perhaps?), but it just does.

Right now, for me it’s all an experiment for 2017, so we’ll see how I feel later in the year if I keep this up.

Hardware

My iPad is a 2016 9.7 inch Pro model, and I love it. The display is truly outstanding, and it’s a really nice mix of relative power and portability.

I’m currently using an Amazon Basic Bluetooth Keyboard that I’ve had for a while (not sure it’s still available). It’s really light and easy to toss in my bag if I’m going out and about.

The keyboard does the job, but am seriously considering investing in either an Apple or Logitech Smart Keyboard Cover at some point, mainly for convenience. They’re not cheap though, so not sure right now if they’re worth it.

My iPad setup

Hosting

Jekyll static site

I run quite a few of my sites on Jekyll, a static site generator popularised by GitHub. It’s pretty powerful (runs on Ruby), fully customisable, cross-platform, and is great for blogging in Markdown.

I like Jekyll anyway, but it makes it a good fit for this blog as it means I can write posts in Markdown and not have to worry too much about running some sort of web server on the iPad.

Digital Ocean

I’ve been using Digital Ocean for a year or so, and are really liking the simplicity of their setup and excellent documentation and support.

My virtual server is running Ubuntu 16.04, and I’m using NGINX as the web server pointing to the static site.

You need to be happy with the UNIX command line to setup the server, but I’m reasonably proficient and it’s much better (for me) to have full control over my server rather than being on a cheap shared host somewhere.

GitHub

The code for the site is all held in GitHub, and actually could be hosted from there as GitHub repositories can natively serve Jekyll sites.

This is really useful as I can test any changes after checking them in (via https://bravelocation.github.io/writingontablets.com/ if you are interested too!). This is really handy to check everything works before making the changes go live, as the preview of images etc. doesn’t work great in Textastic (see below)

Let’s Encrypt

I wanted to make this site HTTPS from the start - for both security and for Google ranking - and on my setup it’s easy to do this through Let’s Encrypt.

Let’s Encrypt offer free certificates for your web server, and can be kept up to date through automation. It’s a great service, and no-one has any excuse nowadays for not offering a secure site to thier customers.

Software

Working Copy (for Git)

As mentioned above, using GitHub is central to how my blogging setup works. Working Copy is a really nice (and highly recommended) Git client for iOS.

As well as the obvious Git functions, it also works as a document provider making it easy to open files in your repository in other programs.

Textastic (for text editing)

Textastic is a powerful multi-language code editor for iOS.

It has syntax highlighting for multiple languages (useful for me as I will not just be writing this blog on my iPad), and has a well thought out extended keyboard perfect for coding.

The built-in markdown preview is also pretty decent too, which helps a lot during the initial editing of posts.

Textastic screenshot

Image editing

I’m still working on the best solution for cropping and editing images ready for the site.

Right now I’m using screenshots direct from the iPad, or photos taken on my iPhone and cropping them using the built-in editing features in Photos.app, but that means the images are too large for the web site (even though the CSS handles the resizing well).

I suspect I’ll build some Workflows (see below) to handle the resizing part, but I haven’t done that yet.

Workflow

I think most people who use their iPad for more than just content consumption will know about Workflow, the indepensible app for iOS automation.

I’m sure I’ll write more about how I’m using Workflow to simplify many tasks I need to do, but right now I have a script I use for releasing any changes to the site.

My process for publishing a new post is as follows:

  1. Write the new post in markdown
  2. Check the changes into Git, and push them up to GitHub
  3. Check the post looks OK on the GitHub-hosted site
  4. Log into the production server (via SSH), pull the latest changes from GitHub and then jekyll build the updated static site to generate the latest changes.

I have a nice Workflow that utilises the SSH action, which means I can automate the final point without having to actually use an SSH client (I can use Prompt 2 if I actually need full SSH access).

The code in the ‘Run Script over SSH’ action loooks like this:

source .bash_profile
cd websites/[Directory]
git pull
/usr/local/rvm/gems/ruby-2.2.1/wrappers/bundle exec jekyll build

Note [Directory] is a variable I set earlier in the workflow from a multiple choice list, so I can reuse this script for my other sites hosted on my server.

I had to add in the source .bash_profile (and the full path to the ruby bundle command) to get this to work reliably, but it’s a really quick way of pushing changes out with very little work.

Summary

So far, using the above process is working pretty well, and other than optimising the images I haven’t had to revert to using my Macbook Pro to do anything yet. Hopefully I’ll find an efficient way of handling images too soon.

It also means I can work on the site from anywhere, as it’s almost inconceivable I’ll be somewhere without either my iPad or my iPhone. That would be weird!

If you have any comments, improvements or suggestions, let me know on Twitter at @yeltzland

Blogging iPad

Raspberry Pi Adventures

I bought a Raspberry Pi 3 last week, mainly because I wanted to setup a small AirPrint server (so I could move my seldom used printer to somewhere away from my desk), but also because they are cool!

Setting up the AirPrint server was pretty easy, and there are plenty of guides already on how to do this (basically install and configure CUPS to get the printer working, and then the avahi-daemon service to expose as to Airprint.)

I’ve also been thinking of other things I can do now I have a low-powered but always-on Linux server in the house, and my first project was a simple web site checker that will periodically ping my web sites and send a Slack message if any are down.

Now I wouldn’t use this for commercial websites, but for my Digital Ocean hosted sites - which are very reliable to be honest - it’s nice to have a little bit of monitoring for free just in case they are having problems.

The NodeJS/JavaScript code is all on GitHub if you’re interested.

Raspberry Pi AirPrint JavaScript Slack

Slack as a General Purpose Notification System

In my last post, I mentioned how the one missing piece in my slightly crazy Alexa->Todoist->IFTTT->Notification Shopping List System was being able to open the specific ‘Alexa Shopping List’ project in Todoist when I’m near the local supermarkets.

Looking through the Todoist API, I realised I can generate a link that will open a specific Todoist project e.g. “todoist://project?id=183977037” where the id parameter is the specific project id.

As far as I can tell the only way of finding the project id is my calling the API to get my project details and inspecting the JSON e.g.

$ curl https://todoist.com/API/v7/sync \
    -d token=0123456789abcdef0123456789abcdef01234567 \
    -d sync_token='*' \
    -d resource_types='["projects"]'

So now, rather than send an iOS notification from IFTTT, I send a message to Slack containing the Todoist link.

Obviously that means when I get the Slack notification on my phone, I can simply click on the link in the message and go straight to where I want in Todoist.

Happy days!

The idea of using Slack as a universal notification system is really powerful. There are so many easy ways of hooking up applications into Slack (and it’s easy to write your own) and I’ve already got lots of ideas on how I can use this pattern in different ways to send relevant alerts from different services.

Slack Todoist

My Cool (but completely over-engineered) Shopping List System

As I mentioned before, I’m absolutely loving my Amazon Echo, and am addicted enough to reliable voice input to have added an Echo Dot in my home office.

Probably my favorite use is the Todoist integration that lets you add tasks both your To Do list and your Shopping List into Todoist directly simply by speaking to Alexa.

However there was one flaw in doing this - I kept forgetting to check the shopping list when I was at the supermarket ☹

Now in where I live in Hexham (in North-East England), "going shopping" generally means going to one of the two main supermarkets (Tesco or Waitrose), which luckily for my purposes are pretty close together. Therefore I had the brilliant idea of firing a location-based alert whenever I was near either of the supermarkets to remind me to check the shopping list in Todoist.

I was half-considering writing my own simple iOS app to trigger the location-based notification, but then realised that IFTTT has got the facility to do precisely this!

The steps to set this up are pretty simple …

  1. Install the IFTTT app on my phone
  2. Enable the "iOS Location settings" service on IFTTT
  3. Enable the "Notifications" service on IFTTT
  4. Create an IFTTT applet that triggers at a specific location (i.e. near the supermarkets), and when it does send me an iOS notification reminding me about the shopping list.

Setting the location trigger is a bit fiddly using the web-based interface, but I managed to set it up just right as you can see from the screenshot below:

location trigger

This whole convoluted setup actually works pretty reliably, and every time I get near to either Tesco or Waitrose I get a ping on my watch and phone reminding me to "Check the shopping list" …

Screenshot of IFTTT notification

In an ideal world, I could set the action on the notification to open Todoist in the ‘Alexa Shopping List’ project directly, but maybe IFTTT will enable that in the future?

All in all, clearly this whole Heath Robinson system is slightly over the top, but it works very well for me!

Update (4 Dec 2016): I found a better way to send the notification via Slack

Alexa Amazon Echo Todoist IFTTT

Building an Alexa Skill

I recently bought an Amazon Echo, which I absolutely love. It’s great in the kitchen as a hands-free music player, as the speaker is really good, and has replaced the slightly unreliable Siri completely for setting timers when cooking.

Obviously I wanted to develop my own Alexa skill, so I’ve built one to tell me about the latest Halesowen Town scores and fixtures information. Right now there’s almost certainly an audience of one for it, but it makes me very happy!

Here’s a video showing the exciting things it does …

Technically the easiest way to write a skill is on AWS Lambda, Amazon’s on-demand compute engine. Alexa skills can run on Lambda with minimal setup, and looks a lot easier than running code on your own server.

The Alexa Skills SDK explains pretty well how to get set up - not always a given on Amazon’s platforms in my experience - so I won’t repeat anything here that isn’t covered in detail in the documentation.

In essense, to get your skill running you have to complete the following tasks:

  1. Add a list of intents you want your skill to answer
    • You can add custom content slots for known lists of names (think Enum) e.g. I have a list of teams in Halesowen’s league to match against
  2. Add sample phrases which will match to each of your intents
    • The content slots are used here e.g “FixtureIntent when is the game against {Team}”
  3. Point to where the skill code runs
    • Trivial to do if you are using AWS Lambda, but you can use your own https server with a bit more effort
  4. Upload your skill code in your AWS Lambda functions
    • The code can be written in Python, Java or Javascript/NodeJS - I chose the latter as I prefer the easy extensibility.

The example skill code for Lambda is pretty easy to understand and adapt as necessary. Note you can either update the code directly in the browser-based Lambda console, or upload a ZIP file containing your code. The latter is much preferable if you have any node modules you want to include in your solution.

My code simply loads existing JSON data from my server used in the iPhone/Android apps for the fixtures, results and latest score, parses it appropriately based on the user’s intent, and then returns a string which the Echo reads back to the user.

The voice recognition accuracy isn’t too bad - I suspect it struggles because of the slightly obscure names of some of the teams in the Northern Premier League!

All in all, it was pretty easy to knock together something based on existing data, and it’s really cool to be able to ask Alexa what the latest Halesowen score is. I look forward to be able to do this on Siri in about 3 years time at Apple’s currently glacial pace of opening up their systems.

The code is all available on Github at https://github.com/bravelocation/yeltzland-alexa/ which hopefully makes things a little clearer if you want to dive in and take a look.

Yeltzland Alexa Amazon Echo JavaScript AWS Lambda