11 comments

[ 3.8 ms ] story [ 42.0 ms ] thread
Snippet Shot is side project I build during my vacation. I wanted something like the obvious tool, but simpler and more in line with my workflow. I also really wanted a gradient background because I'm a bit tired of the solid color backgrounds! So basically just changing it up, challenging myself and seeing how such a tool is built.

The way it works: you either paste in a Github gist url or just the code, tweak the settings if needed (including choosing a gradient) and downloading a PNG or SVG of the code.

I'm pretty happy with it right now for my personal use cases, but I'm planning on adding a bunch of other features and improvements and I'm really curious to hear your opinion. I know it's nothing groundbreaking, but hopefully it's of use for some people.

Nice, from what I can see it looks like there isn't a way to embed gists with a nice font pack and coder style aesthetic. But I also think the gradient feature is detached from what this should be. It's rudimentary to add your own CSS border, so I'm not sure I like that particular feature. It's interesting to note that with https://codepen.io you can export to gist and with this you can get back some of the styling in an embed. And create an alt embed with your own branding. That's what I found most clever.
Thanks for checking it out! So if I understand correctly, to you the feature to create an image from a gist is useful, but the gradients are too limiting or detracting from what you want it to be? I'm thinking about making that more flexible (turn it off).

Although it sounds like carbon.now.sh is more what you are looking for perhaps?

Again appreciate you checking it out and I will consider your remarks.

Demo results look great. Two other options I'd like to see are color scheme and inner/outer padding.
Thank you for your kind words and feedback.

Especially color scheme is an option that has been requested multiple times. Here, it really shows I was not building it for an audience but just for myself. Now that it's public, I should consider making it more flexible without adding too much complexity. I think color schemes are relatively easy to add and might give a lot of value.

Inner/outer padding is something I haven't seen mentioned before, but totally get.

I need to figure out a way to keep it simple and cater to more use cases. I think both points are valid and I'm probably adding those short term.

Love this. Would legit use this as a quick tool even for non-code snippets - meaning screenshots - just because it makes them look that much better!
Thank you, appreciate it!

For sure, you can just set it to Markdown and use it for snippets of text. For now just in the monospace (Mono Lisa) font, but if that suits your style you can do that.

I was meaning actual screeenshots of i.e. let's say another product. I would 100% use it for that.
Oh cool, got it. Did not expect that but it's something else than a device mockup! If you're handy with HTML and CSS you could probably replace the code window with your own image (in the devtools inspector) and it should work.