I wanted to create my own code screenshotting tool, where I could easily paste a Gist URL and end up with a beautiful image of the code. Over the weekend I made the bare-bones version and during the week I refined it a bit. In this post, I want to explain how I approached it, the choices I made, and how the tool works.
Why no existing solution?
There are excellent tools out there, most notably carbon.now.sh. However, I wanted to make it simpler and have it customized to my personal wishes. For me, pasting a Gist URL and picking a gradient were the most important parts. Yes, I know Carbon supports Gists (you have to append the ID to the URL) but I wanted something more obvious.
Also, this presented me with a good opportunity to brush up on my React-skills. I've been writing Angular professionally for the last year and a half, so I hadn't even worked with React hooks yet!
From idea to execution
I started with create-react-app for the bare bones. Then I added TailwindCSS for styling and started hacking it together. I recently worked with Tailwind on my personal website and really liked it, so I decided I would use it here too.
Soon, I needed to display code. I had used CodeMirror in a previous, unfinished, side-project so I knew that was a good starting point. CodeMirror is basically an online code editor with syntax highlighting. Then I needed something to generate an image from HTML. I looked at Carbon and they were using dom-to-image, which was also one of the packages I could find with a quick Google search. I added it to the stack and was able to download some code screenshots shortly after.
The next part was adding the background gradient. I like the palette that TailwindCSS offers, so I decided that should be the base colors for the gradient. I iterated over the colors names combined with the intensities (100-900). Then I added blocks of color where you could click two in order to generate a gradient.
The rest was lots of testing and tweaking. I needed to make it hi-res so I had to do some scaling on the DOM element to make it 2x. There are also some options which I added. And I needed to pull the contents of a Gist, which I did with fetch().
After running Lighthouse I figured I could gain some more speed by using Next.js. That was true, after integrating it I gained 10 points on performance even though it's a super simple one-pager.
Takeaways
Hopefully, this post sheds some light on how I approach new ideas. I start with things I know but also take some liberties to explore new stuff. If I'm stuck, I will Google and I will look at how competitors solved issues. This way of working is quick and very educational. You're staying with one foot in your comfort zone, giving you confidence and speed, and with the other foot in new territory where you can learn a lot!
I can highly recommend this approach. For launching this as a product, that's another story! On a whim, I threw it on ProductHunt (click here to view or upvote) but I had no plan in place so it's not optimal. If I planned this, I would have asked my friends and colleagues to upvote. Instead, I just did it and got some upvotes organically.
Snippet Shot
I'm curious to hear your thoughts! Here's another example of a Snippet Shot I made:
Feedback is very welcome, and so are collaborators Github.
You can check it out at snippetshot.com.
Top comments (0)