Table of contents
TL;DR
Last weekend I created a label maker tool, you can see it here: labeler.cc
Background
For the past couple of weeks I was receiving emails from my domain registrar that one of my domains was about to expire. Last year I was determined to participate in a hackathon with a project idea I had, and bought the domain as a "preassure point" (yeah right) for me to build it. Well it now expires and I haven't touched it.
At the same time, I came across a tweet by Jason Lengstorf about dusty.domains
Naturally, this triggered me. I had bought numerous domains in the past that are still waiting for that idea to be implemented. I also have many project ideas on paper that I never get to work on. So, after giving a quick spin at the ideas-wheele I knew what I wanted to build and this time I was really determined to implemented it.
The idea
Periodically, we need to send parcels, letters, etc to clients. Depending on what we are sending we need to print a label either on an envelope, a label roll, A5 paper, etc. Not very elegantly, until now we would use a word document as a template... don't ask...
I wanted to be able to easily create a label of any size that I could print anywhere, and specifically on my label-roll printer.
Development
My initial thought was to implented this in a way that it would be possible to be deployed as a static site with no back-end server dependencies. This meant that I had to use javascript which I don't normally use but I am familiar with.
I've never used a javascript framework before so I thought this would be a good opportunity to learn Remix.run, which was recently released as an open source project and looks very interesting. At the end though I decided not to have any framework dependencies for this project and just use javascript.
My list of requirements was:
- ability to design a label by adding any text and positoning it anywhere
- ability to easily change label size, text size
- download/print a pdf of the label
- if possible, include images on the label
After researching a bit about the possibilities I chose to use canvas and the jsPDF library.
canvas is used for drawing the label. It allows the user to place the text anywhere and change its size.
jsPDF is used to generate the pdf that is used for printing.
Playing around with canvas and PDFs I found that even though you can export an image of the canvas which can be embded in a PDF, I instead opted to generate the PDF programatically using the canvas data. This allows for better text quality when the label is printed.
Eleven hours later I had made a prototype that would allow me to add any text I wanted on the canvas, move it around and change its size. Additionaly I added templates to preserve configuration settings and easily change between label sizes.
I was also able to include images but when I added a feature to change their rotation things got messy. I am not quite sure yet how canvas and image rotation work so there are still some issues to be resolved when rotating an image and then trying to select it.
Since there are no back-end server dependencies, all text and images provided by the user are temporary and not stored anywhere for future retrieval.
Deployment
As soon as I was able to create and print a label using my tool, I knew I made it! I was able to create my own labels exactly how I wanted them. Most importantly, I managed to complete a project I had in my mind for quite some time and that felt really satisfying.
After a couple of hours spent on domain name hunting I registered labeler.cc last week, and even thought this is not a rusty domain it can be considered a rusty idea :) So I deployed the project on Netlify.com and submitted it to dusty.domains as well.
What I learned
- creating a UI and maintaining its state in a client-side only app its something I have never done before but will try to explore more in the future, maybe with a better approach.
- using the canvas to create the label appears to be challenging especially if you want to do more advanced stuff, like adding backgrounds, borders, fonts, etc.
Resources
Thank you for reading :)
Anybody else had to solve a similar issue? What did you do?