The iPad Is The New Mac

Been thinking about using an iPad for web design and web development? Not a crazy idea.

Published in

The Startup

20 min readMay 9, 2020

This story is about how I used my iPad to create my latest web site, CovidVision.org. I’ll walk you from the initial design steps to the final product, show you the apps that I found useful, and how iPadOS made it a success, by enabling powerful workflows where a task was started within an app, and completed in another.

In this story, we’ll be taking a journey from the initial mock-up, shown left, to the final website, shown right.

At work, I use both a MacBook and an iPad, although I do love the tablet more. However, I’ve never done something like this only with an iPad. Could it be done?

I was about to find out. (The answer is YES.)

The project goals: who? what? where? when? why?

I love data visualizations. My job is to create technologies that enable advertisers and web agencies to run and optimize their campaigns, both online and offline. This involves handling a lot of data, dealing with always-changing algorithms that makes decision in real-time, and ultimately, lot of dashboards to display the trend, how much they spent, and overall how much they performed.

With the confinement about to take place, I’ve been thinking. I wanted to create a tool to help visualize the dynamics of the Covid-19 pandemic. Rightly so, many websites already existed, and mine would surely be another one on top of the others, but still, there were several features that I wanted, and that I couldn’t find elsewhere:

the ability to perform arbitrary comparisons between differents US states, countries, continents, or even the world, per capita or in absolute;
interactive charts where you could manually “timeshift” some curves to see how they overlap (say, if you wanted to compare the percentage of deaths in several places that got hit at different times);
some confidence with the data (we all know that aggregating so many different data sources — coming from literaly thousands of countries — can be an overwhelming task).

I will work alone on this project. The website would be done using React.JS. This is perfect for a project like this: components are easy to write, easier to rewrite, and combine, once the need arise. Since I want to release the first version in just a few days, I need full flexibility and things to be easy. Plus, there are so many cool chart libraries that integrates with React, such as Recharts. Providing I18N is almost fun with the help of LinguiJS. Last, the UI components would be provided by Material-UI, which also gives the ability to streamline CSS within JavaScript with the powerful JSS library.

I already rent a server on Scaleway which could be used for the project. To speed things up, our friends at CloudFlare would be glad to provide us CDN service. With a “free” price tag, and a fairly decent set of features, that’s difficult to beat.

This could be done. And this could all be done on an iPad. We’re about to cover the following parts:

On part one, we’re going to cover the mock-up and early design;
On part two, we’ll start coding using my favorite tool: a terminal;
On part three, we’ll talk about the power of Files, and how different apps integrate with it. This is where we’ll cover Git;
On part four, we’ll see how to design and debug CSS and HTML locally on the iPad;
On part five, we’ll open the door to debugging the site on a real Windows computer;
On part six, we’ll cover advanced workflows between apps, with the power of tools such as Shortcuts.
Finally, we’ll sum it up!

Part One: iPad Unlocks Creativity

It’s Mock-Up Time!

Before going to the real work of coding the website, I first needed to sketch a mock-up of what the website would look like.

A tool that I like is the powerful Adobe Comp, which is a free app. This app is king on the early stages of designing a new product, especially when brainstorming with your team: get yourself around a table, drop the iPad in the center, and let the creativity spill out.

Where this app really shines is that it provides you with a handful of gestures: with the power of your finger (or your Apple Pencil) you can easily create new shapes, duplicate them, erase them at will, and even insert lorem ipsums.

First mockup of the web site, using Adobe Comp

Everything doesn’t need to be perfect. The items are lazily aligned, font size isn’t ideal. That’s not the point yet: the goal at this stage is to throw ideas on paper, see what’s working, see what’s not.

I’m also using a lot of placeholders (the gray rectangles with the two cross lines). In the website, these are going to be the charts. I don’t need them to be visible at this stage, but I want to get a visual cue of the physical state they’ll be needing.

My tip: take some time to memorize all the gestures that the app offer. For example, drawing a plus sign (“+”) duplicates the selection. The app offers this friendly reminder of all gestures (open the Settings menu and click Drawing Gesture Help):

From the mock-up to the visual identity

With my initial mock-up in hand comes the time to build the graphic charter and some logos.

What colors should I be using? The popular dashboard from the Johns Hopkins University uses a dark theme and associates the most important metrics with different colors, e.g. red for the deaths, green for the recovered cases, etc.

As said Picasso, “good artists copy, great artists steal.” Although I wouldn’t want to pretend I am a good artist (much less a great one!) I like this theme, so I decided I wanted a variation of it.

For this task, my app of choice is Affinity Designer ($19.99). This is a graphic design tool that has many of the features of Adobe Illustrator, with two major added advantages: it’s deeply integrated with the iPad (lot of gestures, support for the Apple Pencil) and it’s so cheaper, less than twenty bucks with NO subscriptions at all. (I don’t even get how the folks at Affinity manage to get paid with such a ridiculous price tag.)

Here, my goal is slightly different from the mock-up I did in Adobe Comp. I want to pick the colors, design the logos, fine-tune the layout, but not to get a pixel-perfect alignment (that can be done when I’ll write the CSS files).

There is one thing that Affinity Designer does pretty well and that might not be obvious if you have some backgrounds with Adobe Illustrator: you can mix vector layers with raster layers. On the screenshot above, the rectangles are vector, and all the annotations are hand-drawn. If you have an Apple Pencil 2nd Generation this is even easier as you can double-tap your pencil to switch between draw and erase mode.

Of course, Affinity Designer works pretty well with pure vector documents. Here is my logo during its creation, with the Node tool currently active, displaying the nodes and control handles of the bezier curves.

My tip: Affinity Designer has what they call a Export persona. This is a view where you define slices of your document, choose where you want to export them, and in which format.

Since the app supports integration with the Files, this enables workflows where you can get Designer to automatically export your artwork in Working Copy (which we’ll cover later in part three) whenever you make a change, one click away to committing them into your Git repository.

Part Two: Forget All You Know About Terminals

This part is about terminals and ssh connections: if you’re not much into using the command line, feel free to skip reading it!

There is this joke that there are 10 types of programmers in the world: those who like using the terminal, and those who don’t. (It’s a slight variation on an old joke, if you didn’t know it, it’s explained here.)

I love my terminal. It’s almost mind-boggling how something so simple (after all, it’s just cells of characters) can be used to create amazingly complex things.

Back in the days, I remember the first time I used ssh. Before then, I mastered telnet, and thought everything had already be done. I was wrong.

Now, back to our 21st century. With my knowledge of ssh, once again, I thought everthing had already been done. I was wrong. Once again.

Welcome mosh.

mosh is more responsive than SSH (credit mosh.org)

Mosh is an open-source project, that provides a kind of wrapper around your ssh connection. It features many improvements over ssh:

There is a virtual framebuffer on the server, meaning if the server sends output too fast for you to read it (say you cat a huge file by mistake), no worries, you’ll just catch up as your connection allows.
It has a key prediction algorithm. This reduces the latency between the moment you hit a key, and when it appears on screen.
It uses UDP: you can close your computer, switch your network, get back to work and continue working as if nothing happened.
It’s still as secure as ssh.

On iPad, there is a wonderful app that allows you to use mosh: Blink Shell ($19.99). This app has a rather unique distribution licence: it’s free and open source, you can build it yourself if you have XCode on your Mac. On the other hand, if you’d like the convenience, or just want to show your appreciation to the team behind it, you can also buy it on the App Store.

So, here is my review of Blink Shell.

Blink. Is. The. Best. Terminal. App. Ever.

First, Blink, integrates wonderfully with iPadOS and mosh. You can mount directories from the Files app and perform basic commands, such as scp, cp or diff. Thanks to mosh being stateless, server connections even persist after upgrading the app (or even iPadOS!)

Then, it’s fast. So blazingly fast. It’s faster than iTerm2 on my Mac, by a very noticeable margin. It’s so fast that I no longer want to use any terminal on my Mac.

Last but not least, if you need to use ssh connections, no worries, Blink supports a mode where your connections will stay alive.I never have to reconnect, because of the power of the mosh protocol. Other terminal clients typically require to reopen the app every few minutes while in the background (often prompting you for you to do so with a nagging notification). Blink Shell doesn’t require that: just type geotrack in a new Blink window and the app will track your location. Officially, this is a feature to track your geo data and let you later visualize it. Unoficially, iPadOS won’t kill an app that is tracking your geolocation unless absolutely necessary. Win-win!

My tip: if you are using a Magic Keyboard of Smart Folio Keyboard, you don’t have an Escape key, but no worries. You can have Blink remap some other key, such as “§”. And, if this isn’t working for you, you can always use the system-wide shortcut “Cmd+Period”.

My keyboard uses a French (Azerty) layout, which means the top-leftmost key on my keyboard is “@”. I certainly do not want to remap it. The system-wide shortcut works certainly in Blink and is so useful. For example, in bash, hitting “Cmd+Period Underscore” yanks the last word of the previous line. It also works in vim (useful for visual block insertions) and everywhere else. Handy!

Part Three: Files, Everywhere

If you’ve been following along, you know that I made my artwork using the fabulous Affinity Designer app, and my coding remotely, using a SSH connection (with the power of mosh). This means I typically have a lot of files on my iPad, and also a lot of files on my remote server.

This would have been a problem a few years ago, but fortunately it was solved with iOS 10 and the introduction of Document Providers, and more importantly in iOS 11with the long awaited Files app that finally provided a polished UI and integration with third-parties apps. Some I use:

iCloud, for my personnal stuff;
Google Drive, for sharing files with coworkers;
Microsoft One Drive, to sync the Desktop and Downloads folder of my work computers (that gives me easy access to screenshots and downloads even on the go).

Speaking of sharting the favicons files for CovidVision.org from my iPad to my server, the solution of choice is to use a Git client that works with Files. Here comes Working Copy ($19.99).

Once I have cloned my repostitory locally, I can go back to Affinity Designer and chose to export all the different icons to my local git repository. This is something that can easily be done with the Export Persona, as shown below:

And now, whenever I make some changes in Designer, all the files are instantly exported to Working Copy:

The same favicons, shown in Working Copy

There! Once I’m done working with the assets, I can click a button, commit my changes, and push them on my server.

This is one of the workflow I’m most satisfied with using an iPad, and I think it’s the beauty of the platform. Apps are tools for doing isolated tasks, and you move forward, one step at a time, toward completing your goal.

One last word regarding this app: there has been debates for some time about whether or not app developers should use a subscription model. Those in favor of that model believe that, with a lower pricing tag than most software, it helps fund the development process. Those against it advocate that small amounts do pile up in the long run, and there is not guarantee that the app will get upgraded. The approach taken by Working Copy is rather clever and I would gladly see other developers take the same path. In the app, you unlock Pro features by paying $19.99 (this is required to push to remote repositories). This gives you all Pro features currently available, plus all new features coming in the next twelve months. Then, you keep everthing you already unlocked, but you won’t unlock new features any longer, though you can, if you’re so inclined, unlock Pro again, for a reduced cost of $9.99. I think this pricing is fairly smart: you’re not really committing yourself to a subscription, though, if you value the efforts the developers make to improve their product, you can choose to reward them.

The list of Working Copy features covered with my Pro upgrade, and those not covered. I can simply unlock Pro again to unlock these features, which will give me all these features and the new for twelve additional months.

Part Four: Inspecting CSS, HTML And JavaScript Locally on The iPad

When you create a web app, be it in React or any other framework, there comes a time when debugging needs to be done. On my Mac, it’s pretty easy: I open up my favorite web browser, and the Developer Mode gives me all the things I need.

On my iPad, of course, there is Safari. Though, it’s a stripped-down version of Safari, with the Developer Mode missing. This is a major inconvenience that probably 99,99% of web developers working on iPad wish Apple would fix, but so far, nothing has been announced. There is some hope, though: lately, there have been rumors that XCode would be coming natively to the iPad. We can cross all of our fingers that Apple will listen to the community and add the much-awaited Developper Mode in iPadOS. After all, it all makes sense with recent developments: we now have cursor support, developpers can sell their app on both the Mac App Store and the iTunes App Store, there is this Swift Playground app that proves that coding on an iPad is doable AND fun.

In the meantime, we have to find solutions to close the gap. Fortunately, the iOS environment is full of talented developpers, such as the team at Parallax Dynamics. They created Inspect Browser, which brings you as close as Developper Mode that the Apple policies for apps on the store would allow.

First, you have a Console tab. This is handy because the app support complex data types such as objects or array, and you can even do basic coloring. In fact, when you open a new tab, the app shows you a glimpse of all the things you can do:

Since there is no JavaScript debugger per se (you cannot pause/step your execution), I use the console a lot. It usually isn’t a good practice, but given the limitation of the platform, there’s nothing better I can do (except use my Mac, but for the purpose of this project, I wanted to focus only on the iPad). To make things easier, I have made a little ES6 module that deals with outputting stuff, serializing them when possible (This is important, because Inspect Browser does keep only the reference of variables you log, so if you log an object and later change a property, the latest value will show on the console.)

Fortunately, Inspect Browser is much more than a fancy way to show a console (after all, you don’t even need an app for that, you can write a bookmarklet that captures calls to the console and display them on a div). Where it really shines is that you can inspect CSS in real-time. You can even change a rule and immediately see how it applies:

Here, I have a selected a div (you can click Tap to Inspect Mode and click anywhere on the page, or use your mouse to hover an element). The div shows with a blue overlay, and on the right I can inspect the styles. I have added a background-color: red property, just to show that it got reflected on my page. If needed, you can even swipe the element to the left and a Delete button will appear.

Before this app existed, you could do the same thing by plugging a cable and opening Safari on your Mac (or using the Simulator) but that was slow and painful. Being able to edit the styles right on the iPad is definitely something that will help you a lot, especially if you’re doing a responsive design.

About responsive design, one last feature that I really love with this app is that you have a built-in presets of all common iOS devices. Just click on any, and the web view will resize to match its size. You just have to click each of these devices in sequence to make sure your layout is good and working across all Apple devices, and you can even add more layouts!

It’s easy to test the responsiveness of your app

If you’re still not convinced that you need this app, there is more to discover: you can load local files stored in Files (without ever needing a web server), inspect JavaScript properties, view the DOM box of each elements, enable a no-cache mode, inspect cookies and local storage…

Part Five: The Moment You Need To Test Your Web App on Desktop

Now that the web app is almost complete, there is one last thing that needs to be done. Thanks to Inspect Browser, most of the responsive design was tested on the iPad: it’s really easy to make sure the CSS is working on every phone/tablet thanks to the built-in presets. Using an iPad for this task is a huge plus, as its a also a touch device, so you can get an almost 100% correct idea of how the UI and the UX are working together on a phone.

Still, mobile peaks at 50% of the internet browsing. Testing wouldn’t be complete if we didn’t test the website on a real computer. And, by design, an iPad is not a computer: sure, you can run Safari, but you’re not having the real computer experience: even with a mouse or trackpad, supported by iOS 13.4, this is not the real thing: hovers do not react the same, and, anyway, you don’t want to show the desktop interface on your iPad version anyway, things need to behave differently between an iPad and a desktop computer.

So, the iPad is not a computer. But can it act like one?

Sure! Here comes the power of remote desktop. You’ll need a computer, somewhere, to act as a server. I use a virtual machine on the cloud, that’s easy to turn on and off when needed, and you can even use a cloud service that will take care of the license for you, such as AWS EC2.

My app of choice to use remote desktops is Jump Desktop ($14.99). If you’re not willing to pay, there is a free app from Microsoft, but, let’s face it, it’s not complete. With Jump, you get fantastic cursor support (even when not using a mouse or trackpad, with a handy overlay that you can long-press to perform a secondary click).

The screenshot actually doesn’t talk much. It’s just Windows.

Since one of the latest version, Jump can share its settings on all your devices. That’s pretty handy because this app also work on your iPhone. You’ll never be stuck on a website that doesn’t really work on a mobile, just fire up Jump and there you are, on a full-sized desktop (albeit on your mobile-sized screen).

If you have a Magic Keyboard, this app really blurs the line between iPad and classic desktop computers. It’s because of setup like this that maybe, one day, tablets and computers will converge to provide a seamless, integrated, fully scriptable experience.

Of course, Jump shares the clipboard between your iPad and your Windows computer, but there’s more: it works with the Files app, so you can share local files on your device to your Windows server. From the computer point of view, this is just a folder, like any other: you can drop your files, edit them, do whatever you want. From your iPad, they are automatically synced with Files, which also means that you can use any apps that knows how to deal with Files to edit them in place.

A small tip: there is a little tool from Microsoft named Microsoft Keyboard Layout Creator. It’s pretty old (latest release was from 2007) but it still work on modern versions of Windows. You can use it to create a custom keyboard layout: I did, so the keys on my Apple Azerty layout work the same on my remote server, and I don’t have to duplicate my muscle memories based on what environment I’m currently in.

Part Six: Enabling Even More Powerful Workflows Between Apps With Shortcuts

The web site was released on early April. As I wanted to make sure that everything was working as intended, I needed people to participate. To help raise awareness, I created a Twitter account (@covidvision), and decided to tweet in various discussions about the Covid-19 outbreak.

To help increase interaction with this account, I decided to publish charts and insights about the outbreak a few times a day. The charts would be screenshots from covidvision.org, with an overlay inviting people to browse the site. Here is one, in French:

This is a very important step, because I am working on this project alone, and I need feedback to find interfaces issues, bug in the data or in some translations.

For example, I was using a popular package for translating ISO-3166 country names and apparently it got the name wrong in French for the Republic of the Congo. Fortunately, someone noticed and I was able to fix it and file a pull request:

Another Twitter user noticing a glitch in our of the translation

This feedback was very important, especially during the early stages of the website. Twitter can sometimes feel intimidating, but its power should not be underestimated. A lot of people are willing to help, if you manage to sneak in their feed and share stories that they like, with both text, videos, chart and pictures, but the media you share needs to be crafted carefully.

Due to how tweets are rended on screen, they perform best when the images are around the 16:9 ratio. Creating all the images by hand, with the resizing and overlay, would have been very tedious.

Here comes the power of Shortcuts. If you don’t know this app, it’s the successor of Workflow, that has been bought by Apple and integrated into iOS and iPadOS. It allows you to create automation that can be triggered from various places.

One is the Share Sheet from the modal screen that appears when doing a screenshot. Thanks to this integration, I could create a shortcut that does the following:

take an image as input;
add extra background, either left and right, or top and bottom, so that the image has the correct ratio (16:9 minus the overlay);
resize the image to a width of 2400px;
add the overlay;
save the image into a dedicated album.

Here is an extract of this shortcut:

Given this shortcut, the workflow is pretty easy. I browse my web site until I see some data that I think makes sense, take a screenshot, click Share, and click on the name of my workflow. A few seconds later, an image is then saved to my photo album.

This workflow can even be made easier with Social Media apps. I use Buffer, which has a free tier that allows me to queue up to 10 posts. This is convenient: I can design a few posts at once, queue them at different times (you pick your times once and for all, and once you queue a post, it will get sent at the next available slot). And, since Shortcuts integrates with apps, I can even add a last step to open the image in Buffer and schedule my post, all that from the convenience of the screenshot screen.

My tip: if you want to learn more about creating shortcuts, I would suggest browsing the popular subreddit /r/shortcuts, where you’ll find a lot of inspiration, and people here to help if you’re stuck!

Conclusion: The iPad is The New Mac, with More Fun!

That’s it! I hope you have enjoyed reading this story as much as I did with the designing, the coding, the debugging… I still find incredible that the shape of what we call a computer has changed so much in the last few years. And, it’s amazing what can now be done in just a few days, and so much fun!

From the beginning, the Mac and the iPad have taken different directions. In the last few years, some would never cross again: Apple has been pretty clear that touch interfaces is not coming to macOS on a foreseeable future. Many features from macOS have, however, made their way to iPadOS: support for windows, pointing devices, files, storage…

Each of these addition made the iPadOS more robust and enabled new workflows. With the recent improvements of the ARM architecture CPUs, iPad have never been that powerful, and even the most intensive tasks such as video editing or photo retouching is now possible on an iPad.

But, more importantly, the iPad philosophy enable multiple apps and tools to work seamlessy together, on the same ecosystem, allowing you to focus on each subtask. No worries if your app of choice can’t do everything you need: break it down, chances are good there is an app for that.

This story was written from home, using my iPad. This is a 2018 12.9" iPad Pro, with an Apple Pencil 2 and the fantastic Magic Keyboard.

Please reach out in the comments if you have any questions or wanted to share your own workflows and tips, and thanks for reading along my first story on Medium!