How I Created Neule.art
Reading time: about 8 minutes
I'm a knitter. It's one way of expressing my creativity and also passing the time. And it's sometimes super relaxing. And I (and people around me) get to wear some nice, warm, self-made garments.
One ongoing project is that I'm knitting some Riddari-sweaters as presents to some of my close ones when they turn 30. Usually, I've just decided on the colors myself, but this time I wanted to ask from the recipient for their color choice.
So, I could have tried to find some pictures of the sweater in potential colors. But there was a chance that I couldn't find those. And it takes some imagination to try to think how some colors play together if you only see a picture of the yarn ball and the sweater in random color. Trust me; I've bought some new yarn in the middle of making a sweater because what I was knitting was not what I had imagined.
I needed a way of visualizing the colors somehow. And thus, the idea for my next project was born. In this blog post, I'll introduce you to Neule.art, a color picker or color visualizer for the Riddari sweater (among other patterns), and how I created it.
If you're interested in the code, you can find it from the Neule.art repository. The code is nowhere perfect, and I know I could polish it a lot, but my goal has been just to get it out and then, maybe at some point, improve the code quality.
The Planning and Decisions
So, I began pondering how to create this site or app. I instantly started thinking about using SVGs for the visualization, as you can manipulate the colors of an SVG pretty straightforwardly.
Let's talk next about how I implemented the different components mentioned above.
Getting the SVG
SVG was a great idea, but there was a problem: there were no SVGs for the Riddari-sweater I knew of. First, I thought about drawing the sweater. It sounded like a great plan - until I remembered that I'm not much of an artist. So no drawing.
After spending some time on the internet, I came across image tracing. That sounded like a plan, and after finally purchasing Procreate on my iPad and playing around a bit, I started tracing the shirt. It looked awesome.
It was just that there was no SVG export from the Procreate app. What do? Well, the thing I do best: search for answers. After some time, I had installed Inkscape, and after trial and error, I finally had the shirt in SVG, where it was possible to manipulate colors by CSS.
Building with Eleventy
Building the site could have been a tricky part. Fortunately, I had experience with Eleventy, specifically with serverless functions and Eleventy.
But back to the process. I started building the site.
First, I created a static site, showing the SVG of the shirt with default values. Then I added the Eleventy Serverless plugin and dynamic path to the site displaying the SVG. This way, I could pass the four colors for the shirt as a query parameter.
Using the Native HTML Form
Once I had done that, adding the form was the next step. If you're unfamiliar with HTML native forms, they work so that when you hit "send" (or whatever the primary action is), they send the values from the form as an object to the URL you've defined in the
action-attribute. And if you use the "get"-method, you get the values as query parameters - which is perfect for what I was doing.
So, here's a code snippet I'm using in the project (I edited it and stripped away all Nunjucks-syntax I use for passing the data for clarity):
<form method="get" action="/en/colors/" class="colors-form"> <label for="color-a">A (Main color):</label> <select id="color-a" name="a"> <option value="0059" selected>Black (0059)</option> <option value="9423">Lagoon (9423)</option> <!-- More color options --> </select> <!-- More color selects --> <button type="submit">Check the result</button> </form>
Getting the Data For Yarn Availability
Another thing I wanted to add to the site was a possibility to see if some selected stores had specific colorways available of the Lèttlopi-yarn (which knitters often use for Icelandic sweaters). And by "selected," I mean stores I either knew have Léttlopi on stock or were easily found on Google.
I use Github actions and cron job for running the function. It scrapes through the yarn pages in the stores, parses the data to JSON, and then saves the new values into a data file. Then the site gets rebuilt, using the updated data for yarn availability.
If you go and check the getColors.js-file, you can see that I've been using different techniques for different stores. Sometimes it used an id, sometimes Regex, sometimes splitting the string from specific places, and sometimes looking for a class name.
When I had the yarn data available, I just needed to use it. And then, I had all the pieces together and had the MVP (minimum viable product) ready for publishing.
As I had decided to use serverless functions, and as Eleventy has instructions only for Netlify, it was pretty straightforward to use Netlify to host the site. Also, Netlify itself is relatively straightforward, so setting it up was fast - and the fact that I've used Netlify for many things in the past helped in that.
But the most challenging part of publishing the site was to buy the domain - or, rather, decide the domain name for the site. After pondering (and reading the list of possible top-level domains) for some time, it hit me. "Neule.art!" It's perfect. "Neule" means knit garment in Finnish, and hey, knitting is art. Also, from the beginning, I had plans to add other patterns than Riddari to the site, so I didn't want to use Riddari for the domain name.
I bought the domain, spent some time figuring out all the DNS stuff, and finally, the site was live! I was so happy. You know, it's not always obvious that one gets their side project published. I've started so many projects I've never finished, so it feels good to complete something finally. And that it is something I feel proud of and can share.
Sharing the Site
I shared the site with some of my friends, and their response was encouraging. So, I decided to share the project on LinkedIn. Suddenly, it got so many comments and likes, and someone shared it on Facebook's Icelandic sweater/yarn-related groups. On the first day, I got a couple of thousands of visits (it's a lot for me and a niche page).
What was super encouraging were the comments and feedback people shared with me. I was solving a problem for myself - and solved it for many others at the same time. It feels great to be able to help.
What I've Added After the Launch
I launched the site in mid-May. I've been working to improve it since then. I've added a possibility to generate random colors, added a version of the Riddari-sweater where users can change color for every motif (instead of the original pattern's four colors), and added a new yarn store (Lanka-Kaisa).
I've also done a lot of under-the-hood fixes and features, such as adding cypress tests, fixing bugs, and improving the SEO of the website.
I have plans to add more patterns and yarns to the site. Also, as mentioned, I'm working on improving the user experience by providing the possibility to change colors dynamically.
Also, I'm happy to hear ideas and feature requests to the site - you can either contact me (firstname.lastname@example.org) or send a feature request through Github.
Links in the Blog Post
- Neule.art repository
- Send a feature request through Github