Articles by Sam Smith.
It was 2004; Myspace was the hot social media platform, Lost was the TV show everyone was talking about, and the UK Government was mailing out a booklet called "Preparing for Emergencies". This was a twenty-odd page, A5 (landscape) booklet, with an incongruent visual identity. It contained some reassurances and advice for what to do in a some broad categories of future emergency. It felt silly at…
If you're pre-building pages with Eleventy (static site generator) you're probably taking advantage of the Eleventy Image plugin for transforming your images. In this post I'm going to walk through doing a little extra work to get colour information from those images at the same time. TL;DR # js sharp (src) . raw () . toBuffer () . then ( data => { return `rgb(${ data [ 0 ] }, ${ data [ 1 ] }, ${…
This web page is cleaner than 97% of web pages tested. 0.02 g of CO 2 is produced every time someone visits this web page. Where are these numbers coming from? # I'm using data from websitecarbon.com , a carbon calculator built by Wholegrain Digital. You can read more about the calculator there. You'll also find instructions for adding a badge to your own site. How are these numbers calculated? #…
Early 2019 was a simpler time, when most of us had a bit more bandwidth to think about the finer details of web design. Back then I was banging on about contextual styling ; I'd like to revisit this today, this time through the lens of the :has() pseudo-class. Context in CSS # When I talk about context in CSS I'm thinking about these sorts of things: Descendants Children Siblings Browser size /…
Relative units (such as rems) in media queries might not behave as you expect. The TL;DR is that 1rem in a media query condition is always equal to the font-size set in browser settings, and is not affected by a root font-size assigned in CSS. If this is not news to you, or you hold an unwavering opinion that you should never set a root font size, there’s probably nothing more to see here. If…
A couple of posts ago (which on my current blogging schedule was a couple of years ago) I wrote about the value of transitions , and gave examples of some commons ones. The examples were sliding or pushing, vertically or horizontally - essentially rectangles moving on and off the screen. These transitions can cover most use cases and will get you a long way, but as with any other aspect of a…
Until about a year ago I had been a full time Mac user of about fifteen years. I loved macOS (or OSX as it was known then) from the first time I encountered it, and I'd never looked back. I wouldn't describe myself as an "Apple fanboy" however - I've never owned an iPhone, iPad or even an iPod. My love for Macintoshes has dwindled over the years too (the aesthetics and build quality are no longer…
After Jeremy Keith 's wonderful reading of The History of the Web by Jay Hoffmann on this week's Shoptalk Show , Dave Rupert, reminiscing about his first experience of the Web, challenged the listeners to "go write blog posts about your Web experience". I feel like I'm overdue a blogpost, and this sounds like a nice idea, so here goes. Back in 1997, I was at Art School, and I think it's fair to…
Page transitions on the Web are typically very abrupt - you click a link, then the browser replaces the current page with the new one, as quickly as it can. This is a good starting point, and perhaps sometimes what we want, but a more gradual transition can be easier for people to follow. Visual transitions are what we are used to in the "real world"; sudden changes don't tend to happen, aside…
For all intents and purposes, this is a first look at the Wordpress starter theme Sage . I think I did, a long time ago, try an earlier incarnation of this theme, when it was called Roots, but I can't remember much about it (I must be going back the best part of a decade here). Roots is now a suit of Wordpress development tools, one of which being the starter theme, now known as Sage. Shortly…
If you are creating a customised version of Bootstrap, and especially if you intend to use it for more than one website / app, I think design tokens can make for a nice authoring experience, as well as bring a bit of future-proofing along for free. This is the approach I took with a recent project; if you just want to see what I did, skip down to .. What I did . First, a little about how I arrived…
Recently someone commented that I seem to use a different static site generator (SSG) for every project. This prompted a conversation about the pros and cons of sticking with a familiar stack VS trying something new. I explained my position - for projects that are time sensitive (most projects) I prefer to use technologies that are familiar and predictable to me. However, for projects where I have…
I've been waiting for an opportunity to dip my toe into some Svelte for a while. Faced with a little free time, I decided to create that opportunity. For anyone who hasn't heard of Svelte, it is a JavaScript / component framework, along the lines of React and Vue, but with an added compile step at build time. So what did I decide to use it for? Inspired by this post by Mateusz Rybczonek , I set…
If the suggestion is made to add a CSS framework to a project I'm working on, my first response is always to try to understand why we would do that. To be honest, no answer to this question has ever really convinced me. That said, the same question asked on a large scale throws up a lot of answers, and some valid reasons, such as speed and documentation. A question: if you have chosen to use a CSS…
In my recent writing on how I think CSS is best written, a core tenet of my methods has been keeping presentational information out of markup. Essentially, the reason for this preference is that it makes restyling problematic, including dynamic restyling, in response to screen size. In contemporary practice, the epitome of presentational information in markup is perhaps the "utility class". A…
I started imagining a different kind of CSS framework , one where multiple isolated components could be created from a base template. These components would be highly configurable, so that sibling components could differ in appearance. This got me thinking about what a component should look like, if it is intended to be customised. Probably the customisations with the biggest impact are going to…
I recently speculated that the more abstract CSS frameworks would probably offer a better framework experience, than their moderately abstract counterparts. Tailwind is the standout option when it comes to abstract frameworks; I recently had a chance to give it a try. I was apprehensive about the idea of creating a mess of classes in my HTML. I suspect most people feel the same. I tried to keep…
In my recent posts, I have been exploring the line between useful conventions and enforced dogma in coding. I (I think) coined the terms introjected coding practice, identified coding practice , and integrated coding practice . These terms essentially describe the extent to which a coder believes in the rules that they follow. The outcome of this thinking has been a new CSS methodology , which…
While my CSS methodology (C3) derives from my own style of writing CSS, developed over many years, it was, at the time of formalising it , pretty untested. For two reasons: Until now I'd never considered myself to be using a methodology. There were no rules in place, so my approach would have meandered, depending on circumstance. While the ruleset I am developing has been largely shaped by my…
In my thoughts about formalising my CSS methodology, I preempted the question "Why not just use an established method?", saying there are two answers. I gave one answer at the time; here I want to give the other. Understanding code reveals ethical questions, both in terms of our relationship to ourselves as autonomous beings, but also the framing and homogenisation of ideas and practice -…
I am continuing to examine how I am arriving at my CSS methodology. Having established the direction towards isolation ( as opposed to abstraction ), how does my approach sit with other approaches that take this path? BEM # I stated previously that my approach (which I'm calling C3 ) maps to an extent to the Block, Element, Modifier (BEM) approach. The significant departure comes at the third 'C'…
Following on from my post setting out a direction for my CSS methodology , I want to go into a little more detail about how I am arriving at my solution. Fundamentally, I am, as I mentioned in that post, in pursuit of a way to write CSS that is easily maintained and scaled. This is an issue that I think most people who write CSS have felt at some point. If you've ever had someone tack a style onto…
First up, an admission: I've never (fully) adopted a CSS methodology. In recent years, it has felt like any self respecting front-end dev should pick a side and embrace one of the popular approaches, whether that be BEM , SMACSS , Atomic CSS .. (the list goes on). Of course it's not really about picking a side, a lot of these approaches overlap or compliment each other. That being said, I think…
As a Web maker, in a time when phones and tablets are increasingly common devices on which to connect, making an "app" has started to feel like an evolutionary step. This is a strange phenomenon, the Web is also accessible from mobile devices after all; and I've never felt the need to make a desktop application. For those of us in this space, there is always learning ahead, but there is also a…
It can be useful to recognise patterns in the challenges we face, and in our responses to those challenges. In doing this, we can build a library of solutions, a useful resource when similar challenges arise in the future. When working on innovative projects, as is often the case at OKI, creating brand new challenges is inevitable. With little or no historical reference material on how best to…
As a designer, your job could be described, fundamentally, as "to find/create the best solution(s) to a given set of challenges". Within that function are the tasks of recognising, and responding to a solution that is not working out. You'll find people on your team, and further afield that help you with the recognising part, but the response part, that probably rests squarely on your shoulders.…
Following on from my post about challenging norms , I want to look at one of the techniques used to do this. Shock is as a common ingredient found in campaigns challenging established thinking. Whether that be the confrontation with a dying person in anti-smoking campaigns or the UK Government's modern slavery campaign, featuring the revelation of slavery taking place in a typical UK street. When…
I have recently been working on a couple of projects aimed at questioning current thinking, one around addiction, another focused on animal agriculture. A similarity exists in the ideas that emerged from these; both anticipate a voice of reason winning out, were it not for the normalisation of current thinking. I think this is a theory worth dwelling on, one I liken this to paths through a forest.…
The relationship between traditional and online media is an ongoing area of interest to me. The two have their own strengths and weaknesses when it comes to communication, they also have the potential to compliment and support each other. I believe that this potential can only be realised if the reader/viewer/user is able to transition from one form of media to another. In terms of making this…
Yesterday I received feedback on my Manif.es/to v1.0 from a group of my peers. The feedback came in the form of post-it notes. Many were very complimentary: there were some I’d like to follow up on: The most valuable to me however was this one: Referring to: .06/ Elevate that which will add value to society. Do not waste effort manufacturing demand for that which is worthless. This note neatly…
There is a long tradition of artists and designers setting out what they believe is right, both in terms of their profession and more broadly, society. From The Bauhaus Manifesto to First Things First to The Riot Grrrl Manifesto , these public declarations of the intent have at the very least brought paradigms into sharp focus. I am hovering at the edge of the illustrious group that came before…
I recently undertook the task of redesigning a couple of key pages for the Open Knowledge International website. A primary objective here was to present ourselves as people, as much as an organisation. After all, it’s the (incredible) people that make Open Knowledge International what it is. One of the pages to get some design time was the team page. Here I wanted to show that behind this very…
For those of you who are familiar with Jekyll, no, I didn’t forget to delete the default post. For those who aren’t, Jekyll is a ‘Static site generator’, probably the most well known example of such a thing. It certainly has the most Github stars of all the static site generators on staticgen . It is also what I used to build this site. I’m a huge fan of static site generators. As a designer /…
A couple of months ago, our Open Knowledge colleague Tryggvi Björgvinsson left Open Knowledge to take a position with the Icelandic government (lucky people). Tryggvi brought many things to Open Knowledge, including an in depth knowledge and understanding of agile methodologies, You will leave such a space when you depart, who's going to keep us all agile? — Michelle Heydon some great…
For me, one of the most fascinating, beautiful and.. human characteristics of our species, is our use of language. Be it looking at a painting, reading an essay, or a lover asking how you slept. We humans share such an array of information, in ways often unique. In ways that can help define us as individuals and build our relationships. Crucially, it works too, right? We can deliver opinion, fact…