Frame-It
Posted on
This is the first post in a new series, "This Week I Built". This time, I actually have something I built this week. In the future, I may resurrect some projects from the past as well.
I built a tool this week for adding borders into images: Frame-It. It might not make sense why a tool like this is necessary, but let me explain. If you're adding an image to a normal website, it is obviously preferable to just use CSS to put a border around it. However, when inserting images into a GitHub-flavored markdown document, there is not a great way to put a border around an image using CSS.
Here is a snippet of the GitHub README for Frame-It with a test image:
# Frame-It
This is an online tool for adding a border to an image.
See, wouldn't it be nice if the image below had a border around it?
<img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01">
And here is what that looks like rendered:
I tried applying a border to that image with an inline style, but nothing changed in the output:
<img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01" style="border: 1px solid black;">
I also tried wrapping the image in a div
and applying the inline style there instead, but that did not work either:
<div style="border: 1px solid black;">
<img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01">
</div>
I have Googled this issue, and I found a post on Stack Overflow that describes a hacky method people are using to add a border around images in GitHub markdown:
<kbd>
<img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01">
</kbd>
That's something, but I don't love it, and most importantly, it's not semantically correct HTML. Given this situation, I've resorted to building a border directly into my screenshots.
I'm sure there are quicker ways to do this, but this was my previous workflow for adding a border to a screenshot:
- Take a screenshot.
- Paste it into GIMP.
- Increase the canvas size by 10 pixels in each direction, centering the existing layer within the new canvas size.
- Create a new layer beneath the existing layer.
- Fill the layer with black.
- Save the resulting image and insert it into my markdown document.
That process gets really tedious when you have 8 or 10 screenshots to assign a border.
That's why I created Frame-It. It uses an HTML canvas to instantly draw a border around an image. You can quickly change the border color and configure the border thickness as well. When you're happy, just download the image.
Frame-It looks pretty rough right now, and that's because I released it as soon as possible.
Often, I tend to be a perfectionist, letting perfect be the enemy of good enough. I got this to a working state after several nights of tinkering on it for an hour here and there, and I wanted to practice shipping early, then shipping often. The beauty of this approach is that this tool is ready to be used in my day-to-day work, and I can circle back to clean up the styling and add a few more features at my own pace.
I'm excited to keep polishing this utility, so watch for a follow-up post when I get it to a "finished" state.