Key takeaways
|
Since you can’t do face-to-face client meetings, present projects in person, or sit at the same desk as your programming buddy, it’s easy to feel like being a remote web developer has major disadvantages. I’ve found that to be nowhere near the truth. Remote developers are happier, work harder and naturally learn to take advantage of collaborative tools that are more efficient than working side-by-side.
I’ve worked remotely almost exclusively, taking a small break a couple of years ago to realize how much I hate being in an office.
Remote work is challenging because we’re programmed to need the company of others and communicate face to face. There’s a learning curve when moving from an office to a remote team, but the tools you’ll use are ideal when used with a remote first attitude.
In this article, I want to share the tools I feel have best helped collaboration with the InfoQ community.
Usersnap: Collect user feedback and track bugs collaboratively
Iterating over errors and user feedback can be difficult because of the disconnect between you and your user. With Usersnap, you can see feedback and bugs in the same context as the reporting user.
Working for a time on a support team, I realized that it can be irritating for users — and really slow down the feedback loop — if they have to take screenshots of the issue. And, sometimes, by the time you’ve asked for the screenshots the bug has mysteriously resolved itself, only to surface a week later.
When a user offers feedback, Usersnap lets them screenshot and annotate their screen which creates an issue on your side of the app. Then, you can connect with your team to get it resolved with everything in context.
For users of Slack, JIRA, Basecamp, Trello, Intercom and a ton more, Usersnap integrates with your existing workflow but gives users a more convenient way to report bugs than going through a back-and-forth with the support team.
Cloud9: Cloud-based IDE for collaborative coding
Using Cloud9 is a quality alternative to constantly sending iterations for review because it shows changes in real-time in an IDE with a live preview mode. At any time, you can go in and hit preview to see the newest changes your team has made.
Cloud9 is perfect for pair programming, tightening up your team’s feedback loop, quickly updating clients with progress. Push code directly to your FTP when it’s ready, and sync automatically with GitHub.
While Cloud9 is just one of a few collaborative options for collaborative coding on this list, it’s easily the one with the most in-depth functionality, despite not having in-built video chat. If you’re used to living inside your own text editor, however, keep reading to find out about Floobits.
InVision: Clickable prototypes for web designers
You could upload your full-screen PNGs to Basecamp, or email them over for review, but there’s nothing better than being able to send over a working prototype of your website. When we were getting Process Street redesigned, we worked with Koombea through Basecamp to rough out the specifications then moved to InVision to work out the details.
That way, we got presented with a ton of options before the agency took the time to upload the files to InVision and create a working prototype.
What’s more, InVision also integrates with Sketch. Sketch designs are added to InVision, which then lets you drag and drop them onto a canvas, constructing a prototype from the individual Sketch files.
Screenhero: Screen sharing for web developers
As anyone who’s tried to collaborate over code through Skype will attest — it’s terrible. Screenhero (now acquired by Slack), solves that problem. It’s designed for low-latency screen sharing and code collaboration, featuring multiple mouse cursors and joint IDE control. As you might expect since the acquisition, it lives inside Slack. If your remote development team already uses Slack (and, by now, it probably does), that’s great news for you.
https://www.youtube.com/watch?v=_BojQaD64GU
Outside of strict coding, Screenhero is also great for meetings and presentations, bringing voice chat and screen sharing inside the Slack app.
VNC Servers: 2 people on one computer
If you’re after a more customizable DIY approach to collaborating over code and design, setting up your own VNC server could be the way to go.
By using tools like TightVNC (Free, Windows/Unix) or RealVNC (€ 30, multi-platform), you can access your coworker’s computer, not only to give guidance like non-remote pair programming, but to work on typing code in different areas. In this way, remote development has a big advantage over in-office collaboration. I’ve found VNC servers to be slower to get started with, but if pair programming over Cloud9 doesn’t make you feel like enough of a hacker, VNCs are going to be your favorite solution.
Basecamp: Centralize your files and get feedback
With any kind of remote work, it’s essential to have central hub for dumping in all your files, even if you’re not planning on collaborating over them. Anything I’m working on goes straight into a Dropbox folder we’re given access to during the employee onboarding process which then gets pushed over to Basecamp via Zapier.
That way, if something breaks while I’m away, it’s easy to find the file in Basecamp and fix any errors. Without that system, I’m relied on for my local files which is liability on the rest of the team. Without a central place to collaborate, this sort of stuff happens:
Basecamp also integrates with GitHub, JIRA and Usersnap, mostly through the magic of Zapier.
When collaborating remotely with designers, I’ve found Basecamp’s project-based layout to be ideal. With discussions on icons, typography, etc., all going on in parallel but in separate areas of Basecamp.
Floobits: Screen sharing and terminal/IDE collaboration
Floobits is an amalgamation of Screenhero and Cloud9 in the way that it’s more focused on development work than Screenhero, but emphasizes chat functionality more than Cloud9.
I’d describe it as the Google Docs of code because you can see real-time edits on the page. Floobits supports Sublime Text, Atom, Neovim, Emacs and IntelliJ IDEA, all fully integrated with Google Hangouts.
You might look at Floobits over setting up a VNC server because it comes with very little setup time. Setup time is less than 2 minutes, and if you register with your GitHub account you can link your repositories straight away. The only reason I’d go with Cloud9 or a VNC server over Floobits would be the limitation on text editor plugins. But, to be honest, it’s likely you’re using one of editors they support.
Dropbox Paper: A scrapbook for designers and developers
Dropbox Paper launched quietly in 2015 as a Dropbox-branded version of Hackpad, a tool they acquired in 2013. As well as being a great tool for managing business documentation, Paper is great for collaborating over early-stage designs and code snippets, eliminating the need for a mountain of emails.
I prefer it over Google Docs for a couple of reasons. Firstly, it supports code in a clean and readable way. Secondly, it reminds me of writing on Medium, which has an enviable user experience.
Your inspiration, code snippets, prototypes, links and comments can all go in one easily accessible place, turning a simple document into a full project folder like I imagine people used to have in the dark days of pre-computing.
Redpen: Get feedback on single screens
If you’re in the early stages of designing a site and you’re just looking to get your initial ideas across, there might be no point in grappling with InVision before you’ve settled with a solid concept. For single screen sharing and annotations, Red Pen is a great simple alternative.
Drag and drop designs into the app, get a shareable link and refer back to it to see comments attached to specific parts of the design. No more descriptions like ‘the bit on the left between the sidebar and the header’ — with Red Pen, you can see exactly what they mean.
Every Time Zone: Because time zones make no sense
For any kind of real-time collaborative work, Every Time Zone is essential. While most timezone converters look like they were last updated in the 90s (and are about as user friendly as tools were back then), Every Time Zone gives you an easy-to-use overview of any timezone in the world.
It’s not easy to demonstrate in a static image, but you can drag that slider and have it calculate the time in any country in the world compared to your local time. It’s incalculable the amount of times this has saved me from the eternal headache of DST.
Have you found any of these tools useful? If you’ve got experience collaborating with remote web developers, I’d love to know the tools you use. I’m always looking for recommendations, so let me know in the comments.
About the Author
Benjamin Brandall is the head of content marketing at Process Street, where he writes on productivity, remote work and SaaS. Aside from a few hellish months in the office, he’s filled a variety of roles remotely all of his working life. Get in touch with him here.