Pair programming photo

UPDATED 2020-10-24: CodeSnip now synchronises scroll position, and highlights selected text, for everyone viewing a snippet.

One of the many things I miss about working in the office is the ability to do code reviews properly with my colleagues.

In the office, we could sit side by side and go over a PR, discussing various sections of the code and easily editing examples to demonstrate what we meant. Now that we’re 100% remote, that’s more difficult. We’re all used to screen-sharing using Zoom or Google Hangouts, but it’s quite frustrating having to talk someone through making a change to their code.

What I wanted was a way to very quickly throw up a code sample, the way I would using gist, but for both of us to be able to edit the code, and see each others’ changes in real-time. Ideally, it would have syntax highlighting as well, and maybe a code linter too.

That sounded like a fairly easy thing to glue together, maybe using phoenix liveview in conjunction with the ace code editor.

It also sounded like something that someone else must have built already, so I did a quick search and found That looked like exactly what I wanted, so I tried to use it with my team.

Sadly, it didn’t work out. Sometimes the page wouldn’t load at all. Other times, my pairing partner and I couldn’t see each others’ changes, even after reloading the page.

So I built my own:

Screenshot: Python source code in codesnip

It’s as simple as I can make it, and it’s been very helpful when collaborating with my colleagues, so I hope others find it useful too.

One day I might try to make something more out of it, but for now I’m happy for people to use it. If it gets too popular, I might need to limit usage somehow, but a) I really hate things that force you to create an account just to carry out a simple task, and b) I don’t think many people read my blog. So, I’ll worry about that if it happens.

If you do find it useful, or if you have any ideas for how I could improve it, I’d love to hear from you in the comments.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s