Making Your Code Beautiful
Tags: opensource, javascript, npm
Published: 2020-02-16 08:44:35

---
title: Making Your Code Beautiful
published: true
date: 2020-02-16 08:44:00 UTC
tags: OSS, JavaScript, NPM
cover_image: https://blog.transitivebullsh.it/content/images/2019/09/blur-codes-coding-577585.jpg
canonical_url: https://blog.transitivebullsh.it/making-your-code-beautiful/
---

_The best techniques for sharing code snippets and screencasts that will help propel your open source projects to success._

Creating your own open source projects can be extremely rewarding, but it can be hard to break through the noise and get other developers to trust and use your software. You can gain a lot of ground by following [common best practices](https://opensource.guide/) like including solid documentation, adding unit tests, integrating with a CI/CD oriented towards open-source projects (like [travis-ci](https://travis-ci.org/) or [circle-ci](https://circleci.com/)), and enforcing consistent style conventions.

One of the most effective and easiest ways I’ve found to make open source projects really stand out from the crowd is **adding quality screenshots or animated demos**. Whenever I see this attention to detail, not only does it prove to me that the author cares about the project, but it’s the absolute fastest way to convey what the project actually does.

![Making Your Code Beautiful](https://cdn-images-1.medium.com/max/1600/1*KbC-gUATfgCAHLos0n-Bqg.gif)

<figcaption>Animation Credit: <a href="http://chrisdermody.com/css-only-coding-animation/" data-href="http://chrisdermody.com/css-only-coding-animation/" rel="noopener" target="_blank">CSS-only coding animation</a> by <a href="http://chrisdermody.com/" data-href="http://chrisdermody.com/" rel="noopener" target="_blank">Chris Dermody</a></figcaption>

Including quality screenshots and demos is becoming an increasingly important part of what I’d call **Developer UX** , that is the flow a prospective developer takes from considering adding your project as a dependency all the way through successful integration and future maintenance.

Towards that end, we’ll be looking at three common use cases for improving the developer UX of your open source projects with media:

- Static code snippets (images)
- Animated code demos (GIFs or animated SVGs)
- Project screencasts (videos)

### Static Code Snippets

Sharing small bits of static code is definitely the most common and important use case on this list. Every open source project’s readme should include some easily parseable _example usage_ snippet, so let’s start there.

#### GitHub-Flavored Markdown Snippets

At the easiest end of the spectrum, GitHub allows [syntax highlighting](https://guides.github.com/features/mastering-markdown/) in markdown code snippets. Hopefully, this style of embedding is familiar to you, and if not, I would definitely recommend starting here.

{% gist https://gist.github.com/transitive-bullshit/59c3646895f4336ea16e60309307834a.js %}

<figcaption>Javascript snippet embedded in markdown from one of my favorite npm modules, <a href="https://github.com/sindresorhus/p-map">p-map</a> by <a href="https://sindresorhus.com/">sindresorhus</a>.</figcaption>

#### GitHub Gists

The code snippet above also provides an example of an extremely popular way of sharing static code snippets via [GitHub Gists](https://help.github.com/articles/about-gists/), which have the following advantages:

- Linkable
- Support versioning
- Support discussion via comments
- Syntax highlighting

#### Carbon

Markdown snippets and GitHub gists are both useful, but if you really want to make your code pop, then look no further than [Carbon](https://github.com/dawnlabs/carbon).

![Making Your Code Beautiful](https://cdn-images-1.medium.com/max/1600/1*VNf1MPtmigHEoO1yo-bvuQ.png)

<figcaption>Image Credit: <a href="https://github.com/dawnlabs/carbon" data-href="https://github.com/dawnlabs/carbon" rel="noopener" target="_blank">Carbon</a></figcaption>

Carbon is a very popular open source project that allows you to easily create aesthetically pleasing code screenshots, along with a plethora of customization options and community plugins. It’s a great choice for making a hero image stand out in your readme, increasing engagement on social media, or for writing engineering-related blog posts like this one 😛.

### Animated Code Demos

Including a high quality, inline demo that quickly demonstrates your project’s core use case is the single most important suggestion I have to give.

There are a ton of different ways to go about creating these types of demos, however, so I’d like to discuss what I’ve found to be the best approach here.

> [**Asciinema**](https://asciinema.org/) is a free tool that lets you record and share your terminal sessions, the right way.

[**Asciinema**](https://asciinema.org/) provides a lightweight, purely text-based approach to terminal recording, which allows you to make lossless recordings that can then be shared directly or rendered to animated SVG, animated GIF, or video. It surprised me just how many popular open source projects on GitHub make use of Asciinema — I would highly recommend checking it out.

![Making Your Code Beautiful](https://cdn-images-1.medium.com/max/1600/1*6XX4DHE0HSHrGjiLFxmigQ.gif)

<figcaption>Example Asciinema screencast converted to a GIF (credit: <a href="https://github.com/transitive-bullshit/create-react-library" data-href="https://github.com/transitive-bullshit/create-react-library" rel="noopener" target="_blank">create-react-library</a>) Note that the quality of this embedded GIF is much lower than the animated SVG in the linked <a href="https://github.com/transitive-bullshit/create-react-library" data-href="https://github.com/transitive-bullshit/create-react-library" rel="noopener" target="_blank">readme</a> as discussed below.</figcaption>

#### Animated SVG or GIFs?

We all know GIFs are a horribly inefficient, lossy format, but let’s dig a little deeper into this particular use case.

Compare the above embedded screencast gif to the animated SVG of the same screencast from the [readme](https://github.com/transitive-bullshit/create-react-library). It’s difficult to embed an inline comparison side-by-side, but the animated SVG is **significantly sharper and smaller** , coming in at 73kb vs 4.4MB for the lower quality GIF.

Why is this even a discussion then? Well, you can’t exactly include custom HTML everywhere on the web, now can you? Unfortunately for the foreseeable future, GIFs will live on as a necessary evil for these use cases. But open source authors, please consider using animated SVG versus GIFs for your GitHub projects!

There are some very popular open source projects on GitHub that have started using more efficient animated SVGs for their demos, such as [create-react-app](https://github.com/facebook/create-react-app), but in general, you’ll find GIFs to be much more common.

{% gist https://gist.github.com/transitive-bullshit/e22aed6a0876e748bea94c39644eb15d.js %}

<figcaption>Examples of using the excellent <a href="https://github.com/marionebl/svg-term-cli">svg-term-cli</a> to generate our lossless animated SVG.</figcaption>

It’s important to note that when discussing animated SVGs, we’re really talking about embedding an HTML snippet into GitHub-flavored markdown that links to an SVG file encoded with each frame as an SVG group and the animation defined via CSS keyframes (example SVG [source](https://raw.githubusercontent.com/transitive-bullshit/create-react-library/master/media/demo.svg)).

{% gist https://gist.github.com/transitive-bullshit/85b8cb35578aa96599e08aaf3f1ff2cc.js %}

<figcaption>Insert this HTML snippet into any GitHub-flavored markdown file to embed the linked animated SVG with optimal sharpness and low size overhead compared with a comparable GIF.</figcaption>

For reference, here is the screencast from [create-react-library](https://github.com/transitive-bullshit/create-react-library) we’ve been using as an example in several different formats:

- Original [asciicast](https://asciinema.org/a/167645)
- High quality [animated SVG](https://camo.githubusercontent.com/3f38f2bacbc1a6b49a5172232e8a4ccb9f10173f/68747470733a2f2f63646e2e7261776769742e636f6d2f7472616e7369746976652d62756c6c736869742f6372656174652d72656163742d6c6962726172792f6d61737465722f6d656469612f64656d6f2e737667) created with [svg-term-cli](https://github.com/marionebl/svg-term-cli)
- Low quality [GIF](https://cdn-images-1.medium.com/max/1600/1*6XX4DHE0HSHrGjiLFxmigQ.gif) created with [asciicast2gif](https://github.com/asciinema/asciicast2gif)

#### Capturing and Optimizing GIFs

Asciinema is great for terminal-based recording, but what if you want to record a UI component or website? Well, my first and foremost answer here is to always include a usable demo if possible alongside your project, especially if it’s a frontend web project. It’s really easy to get started with GitHub [Page’s](https://pages.github.com/) free hosting!

If you do want to include a GIF, I’d recommend using either [GIPHY Capture](https://giphy.com/apps/giphycapture) or [Kap](https://getkap.co/) to record your screen and output a GIF. Alternatively, if you have a video recorded from another source, I’d recommend using [Gifski](https://github.com/sindresorhus/gifski-app) to convert the video to an as-optimized-as-possible GIF for ease of embedding.

{% gist https://gist.github.com/transitive-bullshit/403c5d3f09a873b92bf607c08c9bee47.js %}

<figcaption>Example of embedding a GIF into GitHub-flavored markdown files. (see the resulting gif below)</figcaption><!--kg-card-end: html-->

![Making Your Code Beautiful](https://cdn-images-1.medium.com/max/1600/1*ck6cRbbe3uaelEG2JPsIMw.gif)

<figcaption>Quality demo GIF embedded in readme using the snippet above. (image credit: <a href="https://github.com/terkelg/prompts" data-href="https://github.com/terkelg/prompts" rel="noopener" target="_blank">prompts</a> by <a href="https://github.com/terkelg" data-href="https://github.com/terkelg" rel="noopener" target="_blank">terkelg</a>)</figcaption>

### Project Screencasts

If your project is becoming more involved or you’re launching your project to a wider audience, including walkthrough video(s) can really help with user onboarding and support.

#### Screenflow

My go-to screen recording software is [ScreenFlow](https://www.telestream.net/screenflow/overview.htm), which is not cheap at $129, but gives you a lot of powerful, quality tools for the price, including precise rectangular screen recording, video and audio track mixing, audio voiceovers, transition effects, and more. This type of screencast is quite a bit more complicated than the screenshots and terminal session recordings we were looking at earlier.

### Conclusion

Developer UX is important for promoting and marketing your work, which can in turn lead to very real consequences, as getting noticed for your open source contributions is definitely one of the best ways to gain notoriety and land big job opportunities as a software engineer.

I hope some of the techniques I’ve covered help you to promote your open source projects. If you’ve found this article useful and end up creating a snazzy screenshot or animated demo, add a comment linking to your project and let me know!

And as always, don’t forget to spread the ❤️… in the form of beautiful coding demos, of course!