A terrible, horrible, no good, very bad thing happened to me this month: the Surface Pro that was my exclusive personal and work computer died. Even though I found an inexpensive replacement to order, I couldn’t imagine not coding for about a week. I was totally freaking out.
After a few unsatisfying days of merely reading about web development topics, I set to work on figuring out how I could get some real work done, armed only with my iPhone.
Trial and Error
Not wanting to hunt down a new solution if it was unnecessary, I first turned to tools I’ve used before:
Codepen wasn’t terrible in a pinch. However, the layout and on-screen keyboard really wasn’t optimized for coding on a phone. Making minor changes took a lot of time, and it was easy to end up with really buggy code.
Cloud9 had the same problems but with an already more cluttered interface. It explicitly doesn’t support mobile browsers and it has been made clear multiple times that making Cloud9 mobile-friendly or developing a native mobile app for it is not anywhere on the roadmap.
When exploring the Cloud9 issue, I saw mention of an alternative cross-platform cloud IDE called CodeAnywhere. However, the iOS app appeared to have not been updated since 2014 and after four unsuccessful attempts to so much as create an account and login, I figured there had to be something better.
What Finally Worked
After some frustrating experiences, I came across tools and techniques that worked beyond my expectations, allowing me to code productively with just a phone and that can allow you to do it, too.
Editor: Buffer Editor
Buffer Editor was a hidden gem in the App Store. It didn’t have a presence from advertising or word of mouth or even enough reviews to warrant a rating. It would be easy to underestimate Buffer.
When actually downloaded, though, it’s clear that Buffer Editor is a real, powerful editor truly optimized for a mobile experience. Features that won me over included:
- An extended keyboard that makes typing quick (for one-handed) and intentional.
- A well-designed built in terminal.
- Full-screen editing, a necessity on such a small screen.
- Syntax highlighting and autocomplete for 40+ languages and technologies.
- The ability to connect via SSH, FTP, SFTP, GitHub, Dropbox and iCloud.
- Sending files by email.
It also included useful features that I didn’t utilize such as Vim support and support for bluetooth keyboards.
While it isn’t free, the 4.99 USD price I got it for was well worth it, especially compared to the popular Coda at almost 25 USD.
Server: Digital Ocean
Being confined to a phone gave me the push I needed to start building more websites and applications directly in a VPS solution like Digital Ocean rather than starting out solely on a local machine. Using a Virtual Private Server (Digital Ocean calls them droplets) allows setting up a development environment and managing files/servers without needing a local environment to work with, since it’s on another computer in the cloud. Another benefit of VPS is that from the start, a project isn’t tied down to one local machine, even if it hasn’t been checked in to version control yet.
Digital Ocean has proven to be easy to use (and inexpensive), and there is a wealth of documentation and guides for folks new to running servers.
Accessing the droplet remotely was easy in Buffer Editor, simply involving adding a new SSH connection and filling out the relevant settings with information from the droplet.
Browser Access: Local Server Binding
The wonderful and problematic thing about web development is, of course, the primary thing you need is a browser. Using a VPS to develop, you have access to a terminal console, but not a Graphical User Interface or a traditional web browser.
When developing a web app, you often need to be able to start a local server and access
localhost in the web browser, since that’s where the development server displays the app. Unfortunately
localhost means this computer, and so it’s inaccessible outside of the VPS hosting the app files.
The workaround here involved learning more about servers and requests:
When starting a server, it sends what is called a bind request to indicate that it is ready to receive requests associated with an IP address. Local servers typically bind to
127.0.0.1 because that IP address is used to loop back to the requesting computer; each computer can only request
127.0.0.1 from itself, which is usually convenient for developing.
That’s clearly not an option. You need to have the server bind request indicate its publicly accessible IP address instead so that it’s accessible from a browser outside of that computer. This IP address is easily obtained from Digital Ocean, and the workaround involved adding a
--binding flag like this, for starting a Rails server:
rails s --binding=XX.XX.XX.XX
Now, instead of typing
localhost:3000 into the browser’s address bar to view the app, you would type the publicly accessible IP address, like
XX.XX.XX.XX:3000. As long as the local server is running with the binding flag, the app will be accessible remotely from the server’s IP address.
Buffer Editor is especially convenient by keeping the server running after you back out of the terminal (so you can open it again and continue to develop). This can be confusing at first, but to stop the server, lock and unlock your phone.
Get Back to Coding Productivity
From here, you can utilize git like usual, get to work and debug your code wherever you are and regardless of WiFi/Ethernet availability. In fact, the day before my new computer arrived, I was able to make 6 commits and push them to GitHub, all from my iPhone.
While my day to day coding will be on a traditional desktop or laptop when it’s available (since two hands are faster than one), I continue to utilize these tools to work on my projects when I can’t bring my laptop somewhere or when mobile internet is all I’ll have access to, such as riding in a car.
I’m actually thankful for the experience of losing access to the computer, because it forced me to find a solution that now allows me to code virtually anywhere.