Crafting a Laptop Storage Sleeve

The hinge of a laptop peeks out at the top of a grey wool pouch in which it sits. The pouch is attached to the side of a small end table.
The finished product.

We bought my daughter a Chromebook for Christmas which means we now have three laptops laying around the living room. I looked into storage options and found a number of storage sleeves made out of wool felt, mostly designed to hang off of the arm of a couch. None of them were quite what I wanted. I don’t usually make New Year’s resolutions but this year I’ve been pushing myself to try some new crafty things, so I decided to turn this into a learning opportunity and craft one myself!

I started out by doing some research into wool felt and quickly realized why it’s a popular choice. It’s reasonably priced, fairly durable, and easy to work with. I ordered this 3mm thick roll of wool felt from Amazon. It comes in 18″ x 36″ sheets which gave me plenty to work with. The light grey color seemed like it’d look nice in my living room.

A rectangle of grey wool felt with small flaps on either side sits on a dark surface. To its right are a pair of orange handled scissors and the edge of the roll of felt. Above it are a square and an orange pencil.
The felt, after cutting.

I sketched out what I thought would be a really simple design given that this would be my first time working with wool felt. It’s simply a rectangle that’s a tiny bit wider than the width of the laptop and roughly twice as long as its length. The bottom folds up to form a U shape and the flaps on either side fold over and are sewn to fasten them to the front and hold the whole thing together. I positioned the flaps so that the connector for the laptop’s charger would be accessible regardless of which way the laptop was placed into the sleeve.

An Acer Chromebook lays on top of a piece of light grey wool felt that is roughly the same width as it, with two flaps protruding out from under it on either side. A pair of orange handled scissors sit next to it.
The felt, measured and cut with the Chromebook on it. Also pictured are my new fabric scissors.

A lot of the material I read online talked about using patterns to cut out shapes from wool felt, so I considered creating a pattern, but decided that the design was simple enough that it wouldn’t be necessary. I wound up just placing the laptop on the felt, making some measurements, and then using a pencil and a square to mark the cuts I needed to make. I had also ordered myself a nice new pair of fabric scissors so the cutting was quick and painless.

A rectangle of grey felt with small flaps on either side. There are four metal grommets attached: one at each of the top corners, and two underneath them at the bottom edge of the flaps.
The felt, with grommets attached.

One of my primary motivations for making my own design was that most of the available products were intended to be hung over the arm of a couch, which I didn’t want to do. A few of them advertised that the flap which you would use for hanging them also contained weights so you could alternately lay it across a tabletop or between a mattress and box-spring. I knew I wanted to just hang mine on the wall or on the side of an end table. After some brief research I found out that attaching grommets to fabric is really easy and that looked like it would work perfectly for my project! While you can buy very fancy grommet machines I wanted something cheap since I didn’t have any immediate use for it after this project. I went with this little kit that looked like it fit the bill since it included a manual hole cutter, mandrel for attaching the grommets, as well as 100 grommets (which ought to last me a while), all for a reasonable price.

I didn’t need the grommet placement to be especially precise, I just wanted them near each corner so the weight would be evenly distributed. Placing the grommets on the felt to eyeball the position, and after marking the position of one grommet, I measured it and then marked the position of the other grommets to be evenly spaced. Using the hole cutter and mandrel from the kit I bought to cut holes and attach grommets was very straightforward and I had them all attached in just a few minutes.

Two squares of grey felt, one smaller than the other, with stitches of purple thread partway around the edge of the smaller square. The stitches start out sloppy and widely spaced but get somewhat neater and more closely spaced as they go.
Sewing practice

I knew that sewing the flaps was going to be the hardest part of this project for me since I hadn’t done any sewing since my Home Ec class back in middle school. Once again I found myself consulting the collective knowledge of the internet, googling things like “how do you sew wool felt”. The consensus seemed to be that a blanket stitch was the proper way to do this and I found this helpful beginner’s tutorial at a site called Oliver Rabbit. I bought myself entirely too much embroidery floss in a lovely variety of colors (only $7, who could resist?) as well as some embroidery needles. Cutting myself a few squares out of the leftover scraps of felt I followed along with the tutorial and sewed a series of lousy stitches until I got the hang of it.

A piece of light grey felt with blue stitching making a rectangle on one side.
Amateurish but effective blanket stitch, with some straight stitch on one side.

Having spent a few nights practicing I felt confident that I could sew the flaps the way I wanted. I knew it wouldn’t look professional but I felt okay with my hand-made item looking hand-made. ☺ Since this laptop sleeve was intended to hold my daughter’s Chromebook I let her choose the thread color for the stitching; she chose a light blue (her favorite color). I folded the felt into position with the laptop inside at first to ensure the spacing was correct. I inserted a few needles to hold the flaps together and placed a strip or two of scotch tape for good measure. After removing the laptop I began to work my way slowly and carefully sewing a blanket stitch around three sides of the flap and then finished the fourth side (the fold) with a simple straight stitch since it didn’t have an edge. (It sounds so easy when I type it out but rest assured I spent a good chunk of my evening on it!)

A grey wool pouch sits on a couch. Metal grommets are visible in the top corners of the back side. Flaps on either side are sewn with blue stitching around the edges.
The completed sleeve.

The next night I had time I repeated the process on the other flap. The work went faster as I grew more confident in my sewing and I finished it off fairly easily. With both flaps attached the laptop sleeve was complete!

A laptop in a pouch made of light grey felt with blue stitching sits on a couch.
Completed sleeve with laptop.

I checked that the Chromebook still fit comfortably and felt good about my progress. All I needed to do to finish up was hang it in the spot I had selected! I had a pile of 3M Command Hooks laying around (I love those things, I use them all over the place), and since I wanted to hang the sleeve on the side of an end table I thought they’d be perfect for that purpose, and wouldn’t leave a mark if I decided to move the whole thing later. These Command White Light Strips seemed like exactly the right size.

A pouch made of light grey wool with blue stitching hangs on the side of a dark brown end table. Two white plastic hooks are holding it in place through metal grommets in the felt.
Mounted comfortably on the hooks.

I positioned the sleeve against the side of the end table roughly where I wanted it, grabbed my level to make sure it wasn’t crooked (that bothers me so much!), and fastened it temporarily with a bit of scotch tape. I marked the location of the grommets on the wood with a pencil then took the sleeve off. Attaching the command hooks one by one, I tried to make sure they wound up with their hooks in a place that would line up with the grommets. I decided to mount the bottom pair with their hooks pointing downward so that they’d hold the sleeve in place when my daughter pulled her laptop out. Command strips can hold a surprising amount of weight so I wasn’t worried about having just two of them supporting things.

The hinge of a laptop peeks out at the top of a grey wool pouch in which it sits. The pouch is attached to the side of a small end table.
That same finished photo from the start of this post so you don’t have to scroll all the way back.

Getting the grommets fastened onto the hooks required me to stretch the felt slightly (I guess my hook positioning wasn’t perfect), but they popped right in and it felt nice and secure. I slid the laptop in and it fit nicely, with plenty of room to plug in the power cable like planned.

Overall I was happy with how this project turned out! I learned some new things and it works well for its intended purpose. (If I can get my daughter to actually put her laptop away when she’s done using it it’ll be even better!) I spent a fair amount on supplies (probably about $80, I bought two rolls of felt and that includes the scissors), but I plan to make a few more of these for the other laptops in our house so I feel okay about that. Having done it all once I feel pretty confident I could make another one in a single night.

TLS Certificates on macOS 10.15 Catalina and iOS 13

My first week at my current job I ran into a puzzling issue. We have a script that sets up a local development environment and as part of standing up local instances of all of our services it creates self-signed TLS certificates so you can connect to your local instances via TLS just like you would in production. We use hostnames under the .test TLD which is explicitly reserved by the IETF for testing use. These certificates all worked fine when accessing the services via Chrome but when I attempted to use some code that used Apple’s native Security.framework for certificate verification it failed. Sure enough accessing the services in Safari failed the same way.

[broken lock] This Connection Is Not Private
This website may be impersonating "www.service.test" to steal your personal or financial information. You should go back to the previous page.
[button labeled Go Back]

Safari warns you when a website has a certificate that is not valid. This may happen if the website is misconfigured or an attacker has compromised your connection.

To learn more you can view the certificate. If you understand the risks involved you can visit this website.

Some brief research quickly turned up this Apple support page describing some new requirements for TLS server certificates in macOS 10.15 and iOS 13. It calls out a minimum RSA key size (2048 bits), hash algorithm requirements (SHA-1 is deprecated), and making the Subject Alternative Name extension a requirement (the CommonName field is no longer trusted). It also has two additional requirements for certificates issued after July 1, 2019: the ExtendedKeyUsage extension must be present and contain the id-kp-serverAuth OID, and also the validity period of the certificate must be 825 days or fewer. The script we were using to create certificates called openssl and looked like:

openssl req \
  -new \
  -newkey rsa:2048 \
  -sha512 \
  -days 3650 \
  -nodes \
  -x509 \
  -keyout service.ssl.key \
  -out service.ssl.crt \
  -config service.test.ssl.cnf

The .cnf file is a template that looked like:

  [req]
  distinguished_name = req_distinguished_name
  x509_extensions = v3_req
  prompt = no
  [req_distinguished_name]
  CN = *.service.test
  [v3_req]
  keyUsage = keyEncipherment, dataEncipherment, cRLSign, keyCertSign
  extendedKeyUsage = serverAuth
  subjectAltName = @alt_names
  subjectKeyIdentifier = hash
  authorityKeyIdentifier = keyid:always,issuer:always
  basicConstraints = CA:true
  [alt_names]
  DNS.1 = *.service.test
  DNS.2 = service.test

Right away I knew that that -days 3650 option was a problem. Since I had run this script after July 1, 2019 macOS was not going to accept a 10 year validity period for these certificates! Aside from that it looked like we had our ducks in a row which was promising. I tried lowering that value and regenerating the certificates but Safari still wouldn’t accept them! (Incidentally if you know how to get Safari to provide more details on why it does not trust a TLS certificate please let me know! It’s a pretty infuriating process.)

Our environment setup scripts did attempt to ensure that the certificates were trusted—they ran the command security verify-cert -L -c service.ssl.crt to ask Security.framework whether the certificate was trusted. Indeed, running this command manually showed that it printed …certificate verification successful. One of my colleagues suggested that we should perhaps switch to using mkcert which aimed to encapsulate all this complexity. I installed it and gave it a go, generating a server certificate with the same set of DNS names. mkcert creates a separate CA certificate and then uses that to sign the server certificates it generates (which is generally more sensible than the all-in-one approach we had been using). When I tried accessing my local service in Safari it still gave me the same error!

I was beginning to think that I would never get things working until I stumbled upon this closed issue on the mkcert GitHub repository. It turns out that in addition to the other requirements macOS will also refuse to honor a wildcard hostname match for certs with a .test TLD. I hadn’t considered this at all but the certificate was being generated with subject alt names for *.service.test and service.test but I was accessing it at www.service.test. I tried generating the certificate again but this time added www.service.test as a subject alt name alongside the other two. Sure enough, now it worked! The change to mkcert turns out to be unnecessary, explicitly adding the subdomains we use to the certificates is enough to make them work. I am working on changing things to use mkcert anyway to hopefully wrap some of the complexity here in the future.

Addendum

After the fact I realized one key mistake—we were not in fact using security verify-cert properly! Looking at the security man page showed me that instead of a path to a certificate file you can provide it an https URL and it will fetch the certificate by starting a TLS connection and attempt to validate it. Running the command that way against a wildcard certificate does indeed fail validation:

$ security verify-cert -L https://www.service.test:4443
Cert Verify Result: Host name mismatch

Digging into a Test Failure

We recently encountered an issue with some unit tests at work that I spent some time investigating, and a colleague suggested I write it up as a blog post. I think it serves as a good example of a principle I’m constantly espousing to coworkers–don’t be afraid to dig down into the libraries and frameworks your application uses!

The issue showed up in some unit tests we have for a Python web application that uses the Django framework. We’re using PyMySQL as our database backend and pytest as our test harness with the pytest-django plugin to facilitate things. Some functionality in the application relies on checking the current date against data in the database so to make our tests straightforward my colleague added the freezegun Python library which allows mocking Python’s datetime module:

Continue reading