I'm Lance Somoza, a professional IT Consultant with over 15 years of industry experience and an obsession for technology. This is my tech soapbox.

How I write and publish Gaddgict with iPad Pro and Editorial

Everything I write and publish to my site is directly from my iPad Pro 10.5-inch, made possible by iOS 11 and some amazing apps. When I launched Gaddgict, I didn’t plan on working this way, but it has become so fun and compelling that I don’t even consider using my MacBook Pro or anything else to accomplish these tasks. In fact, the only thing I use my MacBook Pro for is the site’s development, since I can make changes safely in my test environment before publishing to the production server.

I’ll be writing mostly about the Editorial app since that’s where all my writing and publishing takes place. I’ll also call out a few other apps I use as part of my workflow. I felt compelled to share this process since the interest in iOS automation seems to be on the rise. I hope you’ll find my perspective and approach useful.

Preface: CMS Setup

The CMS Gaddgict runs on is called HTMLy. It’s a simple, yet powerful flat-file system, and I’ve been able to easily tweak it to suit my needs since Gaddgict launched earlier this year. Let me preface the iPad setup by level-setting a couple things about how HTMLy works. This will help to better illustrate how I implemented certain tasks in Editorial.

  • All posts are stored in folders related to their category (e.g. Apple, Gadgets, General, Google, etc.)
  • Each post has metadata embedded inside as HTML comments which HTMLy references on the server. For example, the title and tags for a post are written as seen below.
  • Each post’s filename must be written as such: YYYY-MM-DD-HH-MM-SS_tags,are,sep-by-comma_title-here-with-dashes.md

<!-- t How I write and publish Gaddgict with iPad Pro and Editorial t-->

<!-- tag iPad Pro,Editorial,iOS Automation tag-->

My Setup Overview

Here’s an overview of my setup. Note: apps listed are linked with my iTunes affiliate ID, so if you decide to purchase one of these via a link below, you’ll be helping me out a little bit!

iPad Pro and Smart Keyboard

I’ll direct your attention to my iPad Pro 10.5-inch review for my full thoughts on this wonderful device. However, I’d like to take a minute to talk about the Smart Keyboard here.

I bought the Smart Keyboard with the iPad not knowing exactly if I would like it. Now that I have been typing on it for months, I was and am still shocked by how good it is. The key travel is perfect, 1 the material has a great feel and is easily maintainable, the smart connector integration is genius, it doubles as a stand for watching video, the list goes on.

My only gripe with the Smart Keyboard is its lack of a forward delete key combo, which is essential for writing. This was initially a problem until I created a workflow in Editorial to accomplish this as you’ll see below.

Editorial

There are quite a few really great writing apps for iOS. There’s Ulysses, Bear Notes, Byword, and more. For me, Editorial takes the cake thanks to its built-in workflow system that allows for custom Python scripting. It’s made by the developer of the highly-acclaimed Pythonista app, Ole Zorn.

My Favorite Features

Editorial has all the usual features you’d expect in a writing app like Markdown, exporting, syntax highlighting, etc. Here are a few other features that are standouts for me:

  • Dropbox Sync. Allows for easy editing when I’m away from my iPad and want to jot down a few more sentences from my iPhone. While this works, I wish syncing with iCloud was a viable option, as I don’t use Dropbox for anything else.
  • Snippets. Similar to the famous Text Expander service, you can create word abbreviations which are transformed into whatever your heart desires. For instance: typing ‘ppp’ pastes the current contents of your clipboard (a default snippet).
  • Templates. Ability to create templates for writing formats used most often. These are actually the same as workflows, but they can be found under the ‘New File’ menu once created.
  • Workflows. See below.
  • Python Scripting. As mentioned, Editorial can handle Python scripting to enable really powerful automation (as you will see). 2

Workflows

Workflows are where the real power of Editorial comes into play. Creating your own workflows is made easy by the plethora of pre-constructed actions you can build custom flows with, some of which offer impressive integration with iOS. To name a few:

  • Find & Replace (with regex support)
  • Moving the caret
  • Storing variables
  • Changing text case
  • Sharing via iOS share sheet
  • And much more…

Editorial has fantastic documentation on how to use the pre-constructed actions and advanced Python modules.

Workflow Directory

Editorial also has a Workflow Directory where you can share workflows you have created and download ones created by others. There are quite a number of awesome workflows on there. In fact, I’ll be sharing template versions of the ones I wrote below.

My Workflows

What follows are the main workflows I built to write and publish Gaddgict.

Forward Delete

As mentioned above, the Smart Keyboard itself does not have a way to perform a forward delete. However, I was able to write a workflow in Editorial and bind it to a key combination to mimic a forward delete like so:

  1. Extend the current selection forward by one character.
  2. Replace the character with nothing.

That’s it! I binded the combo to Control + \, mimicking the normal key spacing for forward delete on a Mac (Fn + Del). I thought Editorial would lag a little bit if I spammed the key combo repeatedly, but it doesn’t at all. It functions exactly like a forward delete should (you can even hold the key combo down to for continuous delete).

Get this workflow.

SFTP Image Upload

While a majority of my posts tend to not have images, when I feel inclined to include any, this workflow will securely upload them to my server over SFTP and insert the appropriate HTML into my current document. It goes a little something like this:

  1. Asks for the alt/title text to be used for the image and stores it in variable imgALT.
  2. Runs a custom Python script that brings up the iOS Photo Selector so I can choose the image to be used, which is then copied to the clipboard.
  3. Runs another custom Python script to:
    • Generate a unique name for the image.
    • Paste and save the image temporarily within Editorial.
    • Upload the image to the server over SFTP.
    • Delete the image from Editorial.
    • Copies the permalink to the image to the clipboard.
  4. Inserts the following into the document:

    <figure>
    <img src="[Clipboard]" alt="[imgALT]" title="[imgALT]">
    <figcaption>[imgALT]</figcaption>
    </figure>
    

I love this workflow because it allows me to see a live preview of the images within my post. If SFTP isn’t your thing, you can also adapt this script to use regular (insecure) FTP via the Python ftplib module. 3

Here’s an example of my workflow:

New Post Template & Custom UI

You can also create custom templates, which are really workflows, to further automate things. For instance, my original ‘New Post Template’ prompted me separately for things like the post title, post type, and the meta description. This was great, but then I delved into Editorial’s awesome Custom UI builder.

Now when I’m creating a new article, I’m presented with a simple form to fill in the basics and populate the meat and potatoes of the post itself.

Here’s how it works:

Publish

When I’m done writing, this is the main workflow that publishes a new post to the blog and a bit more. Although there are many more individual steps than this, here is an abridged version of what this script does:

  1. Syncs the document with Dropbox.
  2. Sets a few variables to be used later:
    • Identifies and stores the post type (e.g. post, link, video, image) in a variable from the HTML comments in the file. I accomplish this using simple regex patterns. For instance, here’s the pattern for capturing the title : <! --t (.*) t-->
    • Same for post category (e.g. Apple, General, Google, Site News, etc.).
    • Same for the post title, but also strips away special characters via a regular expression. Also converts spaces to dashes and makes the whole string lowercase. This will be used to formulate the file name to be read by HTMLy.
    • Same for post tags.
  3. Runs the main Python script to formulate the proper file name to be used on the server and upload the file via SFTP 4 to the correct directory.
  4. Runs a sub-workflow that contains a Python script to clear the site’s cache.
  5. Inserts the file name of the document on the server into the bottom of the post. This can later be used by my separate ‘Update Post’ workflow if I need to make corrections or otherwise update an existing post.
  6. Opens the iOS Share Sheet with the article’s permalink attached and the title copied to the clipboard. From here, I can quickly tweet out the link using Tweetbot without ever leaving Editorial. 5
  7. Opens the following tabs within Editorial’s built-in browser:
    • Share to Facebook page with the permalink for the new article already attached. 6
    • Google Search Console so I can request Google to index the new article.
    • The new article live on the site so I can verify it is loading correctly.
  8. Sync with Dropbox one more time since the name of the file on the server is now stored in the document (from step #5).

Get this workflow. Note: you’ll have to tweak this, of course. I’m not including the sub-workflow that clears my site cache (step 4 above), since it just connects to my server and runs a command over SSH. Same goes for the Update Post workflow below.

Here’s the workflow in action:

Update Post

Similar to the Publish workflow above, this one is for updating an existing post already on the site. It goes a little something like this:

  1. Grabs all the variables just like Step 2 from the ‘Publish’ workflow.
    • Additionally: checks to see if the post tags have changed. If so, it will reformulate the filename to be used on the server.
  2. Grabs the file name for this post on the server (the one stored at the bottom of the document by Step 5 above).
  3. Uploads and replaces the existing file on the server via SFTP.
  4. Runs a sub-workflow that contains a Python script to clear the site’s cache.
  5. Opens the updated post on the site within Editorial’s built-in browser.

I won’t bore you with a video for this one, since it’s largely the same as the Publish workflow.

Get this workflow.

Affinity Photo

When using images in my posts, I’m typically dealing with quick cropping and basic manipulation. Affinity Photo does this with ease and definitely offers the closest-to-Photoshop-like experience on iPad than any other app. On occasion, I’ve used it to create more detailed images for feature posts like ‘Home Smart Home’ or my Amazon Echo Show Review, and it has just been a joy to use. There’s an initial learning curve when it comes to the UI, but nothing a little exploration can’t solve.

Workflow (App)

Workflow is a small, yet convenient part of my … well … workflow. Here are the actions I have setup:

New Article Template

Calls the ‘New Article Template’ workflow in Editorial. In other words, I can jump into writing a new article from anywhere by triggering this action from the Workflow widget in the iOS Today view.

New Quick Link

Calls my ‘New Qlink’ workflow in Editorial. From there, I can quickly share a link that is displayed at the top of the index page under the “Quick Links” tab.

Clear Site Cache

In order to clear my site’s server-side cache, I can trigger this workflow to run the server script (over SSH) that does just that. In fact, this is the same server script Editorial runs after a new post is uploaded. The real cool part about this one is triggering it from my Apple Watch. I can’t help but geek out every time I clear my site’s cache from my wrist.

Transmit and Prompt

Made by popular developer Panic, I use Transmit and Prompt for SFTP and SSH respectively. They have similar features as other apps, but offer best-in-class UI and UX on iPad in my opinion. Not to mention their Panic Sync feature is great, which keeps server and login info up-to-date between my iPad and iPhone.

Conclusion

My entire setup took a decent amount of time to put together (and I’m still refining it). Would it have been easier to use a Mac or something more off-the-shelf? Possibly, but it was fun as hell to build all this. It really showcases the power of iPad Pro and paints the picture of a truly capable machine versus a media consumption device.

Feel free to reach out to me if you have any questions on Editorial, the workflows, or anything else.

If I can do all this for my site, just imagine how easy non-technical tasks will become or have already become. Apple’s vision of the iPad as the new standard computing device for the average user is closer than ever.


  1. Dare I say even better than key travel on MacBook Pro? Shots fired, I know. ↩︎

  2. I never had written anything in Python before using Editorial, but the learning curve is pretty small if you’ve written in any other languages. It’s fun, yet powerful. ↩︎

  3. I wouldn’t recommend it. Security and privacy are important. ↩︎

  4. I’m using Python’s Paramiko module for SSH transfers. ↩︎

  5. This is a recent addition, as Tweetbot barely gained iOS share sheet functionality. ↩︎

  6. It’s a shame you can’t use the Facebook share extension to post to a page (timeline only), similar to how I do it with Tweetbot. ↩︎

Tags