I have a lot of digital cross-stitch patterns and until recently they were a mess. My “collection” was a series of several hundred PDFs, disorganised and spread across my disk. Recently, I was looking for a pattern and it took me several minutes to find it. I had a brief moment of panic, thinking that I’d lost it, and the website this pattern came from is long since gone. Fortunately it did turn up, but it was clear I had to organise my pattern collection. Some people would use apps like Pattern Keeper or Flosshaven, but I just created another static website on my media drive. This is what it looks like: The patterns are arranged in a masonry layout with a preview thumbnail for each pattern, which is normally the first page of the PDF. If a pattern has multiple files – for example, different files for colour and black-and-white printing – there’s a list of links below the thumbnail. I can also add a source link to where I bought the pattern, if I want to find more patterns by the same author. Internally, it’s structured like my other static websites. The metadata for the patterns is stored in a JavaScript file, and then I have an HTML page which renders that metadata in this visual design. My pattern collection doesn’t change very often, so I’m adding new files by hand. There are no sorting or filtering options, because my collection is small enough that they’re unnecessary. I can scroll through the entire list in less than a minute and find whatever I need. I’d like to start making my own clothes soon, and I expect to copy this design to store clothing patterns. This collection now sits alongside my saved bookmarks, podcasts, TV shows, and more. I can keep all my patterns organised, and I won’t lose them in the depths of my hard drive. Technical tricks There are a couple of technical pieces I’m quite pleased with in this process: Masonry layout. I love the cascading grid style of a masonry layout, and I think they’re great when you have variable-sized content – like my pattern cards. I’ve been using them for over a decade; screenshots of my early web apps show my experiments with David Desandro’s Masonry.js library. Masonry layouts are now a native feature of CSS called “Grid Lanes”, which is simpler and more performant than the JavaScript approach. I’m excited to use these layouts in even more places. Thumbnails of PDFs. Most digital postage patterns are shipped as PDFs, and I’m creating the thumbnail images with my create_thumbnail tool. I had to extend my tool to support PDFs, which turned out to be straightforward with the pdf_oxide crate. I’d not come across Oxide before, but it’s a cross-language library for working with PDFs, and I can imagine using it in future. A coloured stripe for the palette. In the metadata for each project, I have the complete list of DMC thread colours and the pattern dimensions. I have a lookup table that converts DMC thread colours to hex codes, and then I’m able to create a linear gradient in CSS to render a coloured stripe of the pattern colours. Here’s an example from a pattern with four colours: border-bottom: 12px solid transparent; border-image: linear-gradient( to right, #7a451f 0%, #7a451f 25%, #985e33 25%, #985e33 50%, #e4bb8e 50%, #e4bb8e 75%, #361f0e 75%, #361f0e 100% ) 1; Building the HTML, CSS, and JavaScript was very quick – I have notes on how I build my media sites, and I’ve done it plenty of times before. I threw together the initial prototype in less than 15 minutes. The longer part was finding all the PDFs scattered across my disk – but now that’s done, and I know exactly where to find my patterns. [If the formatting of this post looks odd in your feed reader, visit the original article]

Fun and other necessities, revisited

Laetitia@Work #105

My move from fractional work to full-time employment!

After a two-year absence from running a digital publication, namely Minimalissimo, I’m returning with a new project. Just when I thought I was out... Okay, no Pacino impressions. I definitely needed that break from curation and probably also from the constraints of minimalism for that matter. Over the past few years I’ve focused a lot on making digital tools and the odd experimental physical object. The latter still interests me hugely, and I’m casually working on a design for FFF, which I’ll cover in greater detail another time. Yet I became pretty disillusioned with the former: digital tooling in the age of AI. The sheer pace of development, replicas, slop, and hype just killed my enthusiasm for building. And I thought, “What do I actually enjoy doing?” The short and simple answer to that was “curation”. The longer and more complex answer is building a respectable publication that features journalistic deep dives, meaningful conversations, and tasteful curation. All presented and exhibited in a way that makes you appreciate the web experience over any social media feed or RSS reader. My new project is called MOUTHPRINT, which I’m building with my cofounder George Kroustallis, aka Minorstep. Together, our approach is to look closely at visual culture across art, fashion, and product design, tracing the people, processes, and choices behind the work. We’ll be publishing case files, which might sound a bit odd, but what the hell. These will examine individual projects through research and conversations with the people behind them. Ultimately, it’s about acknowledging and recording the many people who contributed to these projects and helped shape them. Alongside that, we’ll be publishing exhibitions that bring works together around a theme, making connections across disciplines and time. I’m under no illusions about how difficult it is to build a publication from the ground up. We’re totally up against it, but the web is a big place, we’re locked in, and we want to be heard. I’d now like to invite you to subscribe to our newsletter for the latest developments ahead of our official launch. We’d love to have you along for the ride. → mouthprint.com