Weeknote 45: Info Inspo

What a bleedin' miserable week. I've started wearing a hoodie to go to the shops again. On top of that I've just seen that the last 3 weeknotes have the wrong dare format in their URL. Somewhen I want to redirect all these weeknotes to just be their number instead of a date. Oh well.

So this week on the job:

  • Finished cleaning up prototype code from last cycle so that now everything in 'production ready'
  • Built a prototype of an 'inform <-> inspire' component for some common graphical elements showing the scale of how different content can either inform or inspire you. This has included tying myself in knots trying to figure out some really specific styling and account for different variants
  • Took part in a regular show and tell to the brand team. Interesting to hear they have some of the same challenges we have with having a publicly available government email address for support queries
  • Lent a hand with team management bits with the remaining time available. Prioritisation, implementation detail, design crits etc etc. Next week it looks like I'll be focused on experimenting with getting landing pages with a posh background image to look nice
  • Presented the work I did a month ago on airtable and service tracking to the frontend community and went way over my allotted time

Are you informed or inspired? You can't be both

The main thing I worked on this week which turned out to be actually quite complicated was this info inspo component (a name that I've been using enough that it nearly ended up in a stakeholder-facing slide deck, teehee). It's basically a box with a light background colour, for the aesthetics, with an axis with arrows pointing in either direction with the labels 'inform' on the left and 'inspire' on the right. Content then goes inside this highlight box, mostly on a flex display, to demonstrate how different types of content can be more informative or more inspirational. I didn't come up with it I'm just building the UI. We're doing some accessibility bits by having a hidden heading and then the content inside the element suits the heading.

This is easy on the surface but tricky in practice. The main challenge is the arrows. Arrows are a complex enough shape that to make them in CSS you have to trick the browser into rendering them for you. The classic way to do chevron-style arrows is to have a pseudo element that's a box with only 2 adjoining sides that have visible borders then rotate the box 45 degrees and position as desired. The challenge here was that the brand team wanted a 'soft' arrows with rounded edges.

This sounds easy but is actually close to impossible. If I just set my pseudo element to have a border radius, because I'm only rendering 2 borders on a transparent square, I end up with this half-circle thing on the ends of the chevron which isn't what we want. Now would be an ideal time for this website to have images but alas I haven't had the minerals. What I ended up doing was have 2 pseudo elements that are basically flat boxes with borders that are half the width of what I specified with the same half value as their border radius, making them look like rounded lines. I then rotate them and position them to look like an arrow. This sort of does the job but looks a bit squiffy when zoomed in because it's tricky to get it positioned exactly where we want.

Next week if I have time I may end up looking into a few other ideas. My colleagues are wondering about SVGs or the image background property with a radial gradient. I tried looking into this at the end of the day yesterday but it gave me a headache.

Stuff I did other than CSS

My week was actually pretty boring by London standards. I didn't do any cultural stuff this week. I don't mind that tbh. I think I've needed a week where I just relax.

I haven't been talking about it very much but I've been sticking to my exercise regiment of days weight training at home and 1 day running. I splurged on an adjustable weight set which is a welcome step up from my humble 5kg dumbbells. It means I can adjust my weight needs to what I want per exercise. It also turns out I'm stronger than I thought I was which is nice!

Running is also progressing well. I managed 6k in 35 minutes of continuous running which I didn't think was ever possible when I started. The progression has been steady and rewarding, if tough. There's a psychological thing there about knowing I can do a given distance without stopping.

I'm feeling the itch for another game but I need to pick something. I think I'm ready to put Blue Prince down. I don't have the patience to dip in and out of the depth of that game's puzzles and mystery. I've had Death Stranding sitting in my steam library for ages and ended up buying UFO 50 on offer on a whim so I've got options. I also saw that Silksong finally came out and it looks pretty solid. I'll make up my mind eventually.