Journal
Marbella with Mum and Dad
My folks haven’t managed a holiday outside of Scotland in a long time. So it’s been nice to spend a week together in Spain.
Here we are, just about to board the No. 3 bus to Marbella’s old town.
It all means nothing in the end (a talk by Amy Hupe)
In this talk at State of the Browser, Amy offers some suggestions for making work feel more meaningful.
Don’t treat work like an end in itself; treat it as a means to the end of fulfilling your purpose.
What are your key skills, experiences and values? Write them down, them summarise how these come together as your “core perspective” or purpose.
Now, we want to find ways to fulfil that purpose, and to do that we can set goals.
When considering candidate goals, ask:
- Does this connect to my purpose?
- Do I actually care about achieving this goal?
- Is this a goal I can actually achieve?
- How will I know if I’m making progress?
Postcard from lockdown
I found this postcard from Lockdown. (Actually it’s a post-it note however that doesn’t sound as good). It provides a record of a difficult moment. I was suffering from isolation during lockdown and the only times I was getting out was to walk a reactive dog who lost his shit in a fairly upsetting way on a regular basis. Anyway I must have felt moved to empty my thoughts on paper (not someting I do too often) either for my own sanity or to help gather my thoughts to be able to confide in someone, likely Clair.
Minimal time out of the house. Most of that’s with him. My nerves are shattered. My concentration’s broken all the time. I can feel my mental health dipping.
Of course I’m aware that this pales in comparison to challenges people on the front-line of Covid/lockdown were dealing with. And in fact, I don’t think feeling a degree of shame at expressing mental health issues will ever leave me – I know it’s not just whining, but it can feel that way. Nonetheless, it wasn’t a fun time. Just noting it before I bin the post-it.
Sicilian-style Pasta Alla Norma with aubergine (and artichoke!)
This recipe from Gousto, with a few tweaks from Clair, is a straight winner. Although I’m sure it’s delicious as they list it, Clair substituted linguine for rigatoni and as a treat added some artichoke hearts which took it to the next level.
Delicious, and a perfect example of a vegetarian meal where I didn’t miss meat at all.
I’ll have a go at this one myself soon. I think most people would enjoy it!
Blog development decisions
Here are some recurring development decisions I make when maintaining my personal website/blog, with some accompanying rationale.
Where should landmark-related HTML elements be in the source?
I set one header, one main and one footer element as direct children of the body element.
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>This isn’t arbitrary. A header at this level will be treated as a banner landmark. A footer is regarded as the page’s contentinfo landmark. Whereas when they are nested more deeply such as within a “wrapper” div they are not automatically given landmark status. You’d have to bolt-on ARIA attributes. My understanding is that it’s better to use elements with implicit semantics than to bolt on semantics manually.
How should I centre the main content in a way that’s responsive and supports full-width backgrounds?
My hard-learned approach is to use composition rather than try to do everything with “god” layouts.
I mentally break the page up from top to bottom into slices that correspond to logical groups of content and/or parts that need a dedicated full-width background. I give each slice padding on all sides. The lateral padding handily gives you the gutters you need on narrow screens. (You could use a Box layout for these sections. I tend not to consider them to be “true boxes” because usually their lateral padding differs from their vertical padding. So I just apply their styles on a case by case basis.)
Within each section, nest a dedicated Center layout to handle your fluid width-constraining wrappers.
This approach offers the best of all worlds. It doesn’t constrain your markup, which I find useful for achieving appropriate semantics and accessibility. You don’t need to put a “wrapper div” around everything. Instead you can have landmark-related elements as direct children of body, applying padding to those and nesting centred wrappers inside them.
By making proper use of padding, this approach also avoids problems of “collapsing margins” and other margin weirdness that make life difficult when you have sections with background colours. You don’t want to be using vertical margins in situations where “boxes with padding” would be more appropriate. Relatedly, I find that flow (or stack) layouts generally work best within each of your nested wrappers rather than at the top level.
How should I mark up lists of articles?
Should they be a bunch of sibling articles? Should they be in a list element like a ul?
Different switched-on developers tackle this differently, so it’s hard to offer a definitive best approach. Some developers even do it differently across different pages on their own site! Here are some examples in the wild:
- Leonie Watson’s homepage employs a list of
articleelements with no wrapping list - Manuel Matuzovic’s homepage does the same as Léonie’s
- Adrian Roselli’s posts page uses the same structure as above whereas Adrian’s homepage uses a
ulwith noarticleelements! - Tetralogical’s blog section employs sibling
sectionelements whereas their news section uses anolbut with nothing special nested inside - Ethan Marcotte’s journal uses nested lists to group by years then months, with each teaser marked up as an
articleinside anli
So, clear as mud!
I currently use sibling articles with no wrapping list. Using article elements feel right because each (per MDN’s definition of article) “represents a self-contained composition… intended to be independently distributable or reusable (e.g., in syndication)”. I could be persuaded to wrap these in a list because that would announce to screen reader users upfront that it’s a list of articles and say how many there are. (It tends to make your CSS a tad gnarlier but that’s not the end of the world.)
Should a blog post page be marked up as an article or just using main?
I mark it up as an article for the same reasons as above. That article is nested inside a main because all of my pages have one main element wrapping around the primary, non-repeated content of the page.
To be continued
I’ll add more to this article over time.
Chris Packham interview in The Guardian
The naturalist, TV campaigner and activist on growing up, autism and asking himself “what is the best use of me?”.
He’s such a brilliant, sensitive soul, but it must be hard work being Chris Packham.
Growing up I was never a fan of nature programmes like The Really Wild Show so I didn’t pay Chris Packham too much attention. However in the last few years I've grown really fond of him. That's in part due to his revelations about his punky musical leanings and attitude, but more so due to his candid description of his autism, then his work to bring the true nature of autism and neruodivergency into the public eye and in doing so help others.
He’s also quite inspirational in trying to do the right thing in many ways, despite significant challenges.
This was an enjoyable and insightful interview although some of the parts about his losing beloved animals alongside other dark moments make for tough reading. Still though, I'm now considering reading Fingers in the sparkle jar.
3 questions to evaluate design patterns and avoid unnecessary work that degrades UX (by Adam Silver)
Adam offers tips for how to proceed when we are presented with a request for a shiny new pattern which is not grounded in research but rather follows a fad.
The purpose of design is to solve actual problems. Not made up “I’m bored so I’ll come up with something new” problems.
So how can we evaluate these patterns, avoid unnecessary work and ultimately avoid patterns that degrade UX?
He recommends we should start by asking three questions:
- Does research show this pattern solves a problem?
- Are there any potential usability issues with this pattern?
- How much effort is it to build?
Just normal web things.
Heather suggests that in developers’ excitement to do cool new stuff and use cool new tools and techniques “we stopped letting people do very normal web things”. Things like:
- the ability to copy text so you can then paste it
- ensuring elements which navigate also behave like normal links by offering standard right-click and keyboard shortcut options etc. Which is to say – please use the anchor element and leave it alone to do its thing
- letting people go back using the back button
- letting people scroll with native scrollbars. Relatedly, letting people get to the links at the bottom of the page rather than having infinite scrolling results which mean that the footer is always just beyond reach!
- letting the user’s browser autocomplete form fields rather than making them type it
A blog post which uses every HTML element (by Patrick Weaver)
An interesting article which helps the author – and his readers – understand some of the lesser-used and more obscure HTML elements.
While Patrick confesses he is still learning certain things and therefore I won’t regard his implementations as gospel in the way I might an article by someone with greater HTML and accessibility expertise such as Adrian Roselli, I see this as another useful resource to help me when deciding whether or not an HTML choice is the semantic and or correct tool for a given situation.
Thanks, Patrick!
Shoelace: a forward-thinking library of web components
I’m interested by Shoelace’s MO as a collection of pre-rolled, customisable web components. The idea is that it lets individuals and teams start building with web components – components that are web-native, framework-agnostic and portable – way more quickly.
I guess it’s a kind of Bootstrap for web components? I’m interested to see how well it’s done, how customisable the components are, and how useful it is in real life. Or if nothing else, I’m interested to see how they built their components!
It’s definitely an interesting idea.
I'll delve into Shoelace in more detail in the future when I have time, but in the meantime I was able to very quickly knock together a codepen that renders a Dropdown instance.
Thanks to Chris Ferdinandi for sharing Shoelace.