I got to talk to Sarah Fossheim this week! One of the impressive things that Sarah does is near photograph-quality recreations of iconic old technology in HTML & CSS. I enjoyed the fact that neither of us quite totally knows what some of these machines even did, but appreciate their incredible aesthetics. Perhaps my favorite part of the conversation was emphasizing that this work, while almost being a relaxing hobby in the vein of knitting, still levels up one’s CSS ability. Sarah got me thinking that it’s not just CSS, but perhaps equally or more importantly HTML ability, the ability to break down sections into components and think about how smaller parts become a whole, just like any other website work.
- 00:52 Guest introduction
- 01:45 Where do you find inspiration?
- 04:12 Calculator Pen
- 04:55 Roland Pen
- 07:02 Sponsor: Retool
- 08:26 Working with Text
- 10:35 What’s the connection to musical equipment?
- 13:46 Ethical Design Guide
- 21:36 What resources for training around accessibility are there?
- 24:06 Polaroid camera Pen
- 26:21 Have your coding skills improved?
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hey, everybody. Time for another CodePen Radio. I have another guest, a fantastic guest, all the way from Oslo, Norway. I think I have that right. It's Sarah Fossheim. You can correct me on two things. How did I do on the location and name?
Sarah Fossheim: Both are correct.
Chris: Yes! [Laughter] Fantastic. Thanks for joining me, Sarah. How are you today?
Sarah: I'm good. It's quite dark where I am. It's--
Chris: Yeah. Yeah.
Sarah: It's still quite cold in Norway as well.
Chris: It's just the miracle of technology. It literally blows my mind a little bit that you're just entirely across the world. Yet here we sit talking about our little, cool industry of Web design and development and stuff. That's what you do. You call yourself a multidisciplinary developer and designer, specifically passionate about ethics and accessibility. I think we'll get to that stuff. That sounds fun.
You have been around the CodePen scene for a while, too, making some really amazing and unusual creations, sometimes focusing on kind of old-school technology. Not old-school like - I don't know - tables for layout and stuff, but literally visual manifestations of old, actual technology.
One of your perhaps most famous Pens is this creation of this Roland MC-500 machine. When you look at it, you're like, "That's a photograph." It has that unbelievable -- the shadows on it and stuff are just perfect such that it really does look like a 3D rendering or photograph of this old machine, of which I don't even know what it does.
Sarah: Me neither.
Chris: [Laughter] Do you not really know what it does?! Oh, that's amazing.
Sarah: [Laughter] Most of them, my process is basically looking at pictures on Tumblr and Instagram and wherever I can find that of basically '80s, '70s, '90s technology.
Chris: That's where that came from? Because I was going to say, there's probably some people in the world that look at this and be like, "Oh, that old piece of technology! That really takes me back." Then some people -- I mean I'm 42, and I look at this thing as old. I'm sure if you're 20-something today, you're like, "Where did you get that? Off an '80s rocket ship or something?" I guess the answer is yes, you kind of did, right?
Chris: Maybe not a rocket ship, but this is an old piece of technology.
Sarah: Yeah, it's really fun making those. I completely started that by accident, as well.
Chris: Did you really? Tell me that story.
Sarah: Yeah, so it started basically some afternoon. I was waiting in a waiting room. I don't remember if it was the doctor's office or something.
I had my laptop with me, and I didn't feel like working on work-related stuff because I didn't know how long I had to wait. By accident, Dribbble was still open on some interface of an old calculator. I looked at it while I was waiting, and I was like, "Hey, maybe I can try to make it in CSS just to kill time."
That was really fun, and I kind of learned a couple of new CSS properties or like how to combine backgrounds, images, and how to play around a bit with that. Then later, I was like, "That's fun. I want to do this again." Then I straight went to this Polaroid camera, also like a vintage model, I think.
Sarah: That one really took off, and I kind of kept doing it out of spite as well because I noticed that every time I posted one of those, I got so many comments also -- on Reddit and probably Hacker News as well and on Twitter too -- of people being angry, almost, that I was doing this with this and not SVG.
Chris: Oh... classic.
Sarah: Then it also became this trolling thing of, "I'll just make another cool one just to piss off the people who think it should not be done." [Laughter]
Chris: [Laughter] CSS art out of spite. I like it. Yeah.
The calculator, is that the Albatron 803 one?
Chris: Yeah. Fascinating. That was a Dribbble originally? Wow.
Sarah: Yeah, it was a Dribbble of someone who made a 3D rendering of the actual calculator in Blender or something. Then I saw, "Hah! That person is in this other technology. I can do it in CSS."
Chris: It looks great. It has these -- normally you think of the button as the thing that would have the gradient on it. But in the case of this unusual calculator, it's almost like under the button has a gradient and the buttons are a flat color. It's a very unusual look. Very cool. Yeah. That must have been before, right? Well, I guess it's January to August. Yeah.
Chris: To me, the Roland one is a step far above the calculator, just in complexity alone, I think.
Sarah: That was a hard one. [Laughter]
Chris: [Laughter] I bet because there are little moments I feel like you could cheap out. The display is like one color, really simple display that has this greenish bluish kind of gray background. I'm sure anybody looking at it would recognize that type of display - probably from calculators, which still exist today.
But I think you could just color sample that and be like, "Oh, that's still evocative of that type of display." But that's not what you did. That display has these little kind of soft vertical things going on. It's hard to describe. You could express it in CSS -- I'm sure you did -- as a gradient of some kind. But it's so subtle.
Sarah: It was like layers repeating gradients. It's kind of fun to make those things. I think the total time that I spent on that, if you add it all combined, it's some I have done on Twitch and were only two hours. But I think some of the more complex ones may be six hours, seven hours. But I really spread it out over several days or weeks so that, every day, I can just focus on one little component and completely geek out on it.
On one screen, I have Figma open to pick all the colors and measure all the distances. Yeah, then it's just layering gradients on gradients and gradients until it looks satisfying.
Chris: Right. I could see how you would need to be scientific, actually be measuring things.
Chris: Rather than just guessing and winging it here because it would just become a mess, probably. [Laughter]
Sarah: Yeah. Yeah, there's actually some calculations involved. I think my old math teachers would be cheering right now.
Chris: Oh, that's great. That's great.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Retool. Building internal tools from scratch is slow. It takes a lot of engineering time and resources, so most small software businesses just resign to prioritizing a select few and settling for inefficient hacks and workarounds for every other business process.
Don't I know it? It's like building admin tools for yourself. You've scrapped some junk together. You're like, "Ah, good enough. It's not customer-facing. This is just for me. It can be bad."
That's what Retool attempts to solve, and it does so, so well. Retool helps developers build internal tools faster, so you can focus on the software you sell.
Retool offers a complete UI component library, so building forms, tables, and workflows. It's as easy as drag and drop, but it's not just a component library. More importantly, Retool connects to basically any data source, offering app environments, permissions, single sign-on out-of-the-box.
Just get started with Retool for building those internal tools. Thousands of companies are doing it: Amazon, DoorDash, Peloton, Brex. They all collaborate around custom-built Retool apps to solve internal workflows.
To learn more, visit them at retool.com. Thanks for the support.
[Guitar music ends]
Chris: Another little surprise, perhaps, on these is that I could see there be a moment where big areas and shadows and shapes and things were produced with CSS. But then when it comes down to text, it might just be, "Oh, well, I don't know. I don't think the font exists for that yet," or "It's just too hard to get the text," that you'd maybe perhaps give up and use SVG, an image, or something. In the case of most of these, when it's text, it's text.
Chris: Selectable and everything, which is kind of a cool, extra bonus. But also, you do have a pretty specific interest in accessibility. Certainly, when you don't give up, and use actual text, not that maybe the Roland here needs to -- accessibility was top of mind, although maybe it was. I don't know.
Sarah: No. I stuck with just labeling it as an image with alt text.
Chris: Because that's kind of what it's meant to evoke anyway.
Sarah: I think if at some point I would want to make it interactive, I would of course go back to it and actually improve, like make the buttons on the screen actually buttons. But--
Sarah: To me, it's also a little way of relaxing or almost meditation.
Chris: I see.
Sarah: Or the way people might completely zone out on a coloring book or solving sudoku or something.
Chris: Yeah. Crochet. [Laughter]
Sarah: Something like that. For me, it's more something that I want to do to relax. I don't want to think too much about adding functionality and doing all the flashy stuff with it. At that point, I would have to plan it out too much, and the fun aspect of it would get lost a little bit.
Chris: Yeah. Gone. [Laughter] I bet.
Sarah: After seven hours of just doing the CSS, I'm really done with looking at it. [Laughter]
Chris: I bet. I bet. Yeah. Okay. Moving on.
Speaking of other Pens, there's a keyboard one, and there's a radio. It seems to be some kind of connection to music, or is it just because those devices look cool? Do you play a bit yourself?
Sarah: I don't play, myself, but my wife is a musician, so there is some instruments around the house and old synthesizers and stuff as well.
One of my go-to or one of the things that I still want to do (on my to-do list) is taking one of her instruments, taking a picture of that, and then making that one in CSS, so it's basically--
Chris: Well, I'm sure you'll crush it because you have plenty of experience here. Yeah, there's a Casio PT-1, which that's cool because at least that's not from a by-gone era. If this thing still existed in your house, you could play that one - no problem. it just looks so cool. These little colorful buttons that you can imagine making some sick beat that you'd play over.
Perhaps my favorite of all of them, I don't even know how to pronounce it. Muson or something. That one is super colorful and, I guess, a keyboard. But it only has just over one octave of keys on it, so I can't imagine what kind of music you can produce on it, but it's an amazing-looking device.
Sarah: Yeah. I had been eyeing that one for so long. I think I came across a picture of it very early on. I had been putting it off for quite a while because I wanted to do a really good job on it because I was drawn to it a lot as well because of the colors and how interesting of an instrument it looked like.
Chris: Yeah. Just couldn't be weirder. The whole top right of the instrument is dedicated to just a colorful flag shape. [Laughter] Wow.
But I like how you're looking straight down at it, which even that is an interesting approach, I think. But it doesn't mean that it doesn't have any dimensionality to it. You can see these two knobs on either side. You can imagine where your face is. You can kind of see the left of the knob on the left -- or the left of the knob on the right. You know. Whatever. You're not looking--
You can see some angles to it is what I'm trying to say, and it's a beautiful little detail.
Sarah: Yeah. I also tried to make sure that all of the buttons have some kind of customization and randomization to it, so it's not that every button looks the exact same. Like when you have something on the left side of the screen and right side of the screen, and they're both the same looking button. I do try to--
Chris: Yeah! It wouldn't feel real then. Your brain would reject it. It'd be like, "Oh, no." But again, this looks almost photographic.
Then the colors are shadowed, almost like let's say there's white light bouncing off it. Well, the slight pink hue of the plastic comes off in the shadow, which is getting a little bit more en vogue these days, even in "regular Web design."
Chris: Is in great effect here. I love that. You know how colors are always shadowed in real life because light is a thing [laughter] and all that.
I just want to make sure that we don't miss it here. We can talk about Pens all day, and I'd love to, but I'd love to talk about because you do other stuff as well. Certainly, you build websites. But have this whole thing that you've built and are clearly super interested in, the URL being ethicaldesign.guide.
Chris: First of all, .guide, killer TLD. Gotta love that. Easy to find. Linked up from all your stuff. What is the Ethical Design Guide? How did that come to be?
Sarah: It's basically a collection of resources to get you started on accessibility and on ethical design frameworks, if you're a designer. Also, a bit of articles and knowledge around what can go wrong if you don't prioritize those things and background knowledge about different identities and cultures and so on.
It came to be, I think, now, almost a year and a half ago or something, the idea, because I'm quite interested in ethical design and I always try to incorporate it in my work. Right now, I'm working as an accessibility consultant, ethical design person. I constantly was sending people the same links over Slack and repeating the same things and answering the same questions.
Sarah: At some point, I thought, let's just make a list that I can just send to people. Originally, it was Notion documents. Then I thought -- that becomes a bit clumsy really easily if I want to give other people access, as I tried to do it, and so on.
Then I moved it to a GitHub repo and just built a website on top of it with 11ty. Yeah, kept building on that.
Chris: Nice, so people can do PRs or--
Sarah: Yeah, exactly.
Chris: --even be invited to be a contributor or whatever?
Chris: Yeah, that's great. I think that has some kind of spiritual connection to that, the Accessibility Project - or whatever.
Chris: Which is similar in that there are multiple contributors and has this website home base and stuff. Is accessibility a sub -- is it within the Venn diagram of ethics?
Sarah: Well, I would say so because if you don't make your products accessible, then you're excluding disabled people, which in my opinion is unethical. When I talk about ethics, to me that also includes accessibility. I feel like the two are very interconnected in those ways. Yeah.
Chris: Yeah. Okay. But it's not the only thing. The words aren't interchangeable, at least in this context.
Chris: I always think of things like -- my understanding is a little bit limited. Part of me gets a little bummed out that people need to be trained to do the ethical thing. it's not part of human nature to be ethical. That part of it is sad to me. But then sometimes you hear stories of things where, of course, I have a blind spot. I've never lived in Nigeria or something, so I just am wholly unfamiliar with their culture and customs and things. So, if I screwed up there, I should fix it but it's perhaps not my fault that I didn't know because I just have no experience there.
Sarah: Yeah. A big part of it is you want people to educate themselves, and you want to educate people. Of course, no one is going to know everything - as you say. A big part of it is learning, which is also why I wanted to create the Ethical Design Guide and send out monthly newsletters.
I'm changing right now the format a bit to less frequent emails, but still send out frequent reminders of, like, "Here are books you can read. Here are articles. Here's the latest thing that went wrong." Just to help people span their horizons a bit in that regard.
Sarah: Because as you see, in the industry, accessibility is unfortunately not baked into our processes yet, for example. Having the discussions on the design side when you're doing research about what can go wrong with your products, like how you can harm someone, is also something we don't really ask ourselves yet. It's kind of sad that we ask ourselves, how can this product give the customer happiness so that they buy more items? But we don't think--
Sarah: Or we have the processes in place to ensure quality when it comes to other things and review processes and such, but then we forget the accessibility and forget to include people who are usually excluded in society in those. That's what I've been working with lately, trying to bring....
Chris: Yeah. People bend over backward to get their continuous integration set up, but totally did nothing for accessibility or ethics - in a way.
You think prevention--? They say this in physical medicine, right? An ounce of prevention is worth a pound of cure - or something. That it's better to be thinking about this stuff as you're building the thing.
I'm sure you'd prefer, probably, to be hired as a consultant in the early stages rather than-- What would you say to a company that's like, "We just had a major ethical failure at our company. Sarah, please come help us fix our ethics"? Would you be like, "You've already failed. I don't want to deal with you," or would you be like, "Okay, let's talk"?
Sarah: When it comes to accessibility, that's the thing, as an accessibility consultant, you get quite often. A lot of the projects I get, regards to accessibility specifically, are, "Hey, we've gotten this audit done, and our product massively failed," or "Hey, I know my product sucks when it comes to accessibility. We haven't thought of this in quite a long time. Can you come in and help us?" That's one kind of project, I guess.
Then the other kind are people who come in early and say, "Hey, we want to build something. Can you help us make it accessible from the start?" That part is definitely the most fun to work with. But also, when I compare the amount of hours I put in, in each project, and the value that they get out of my time, there they also get way more value out of those early discussions in accessibility.
Sarah: Because you're working together to build something that's accessible, so their components have, at once, functionality built in to take care of ARIA elements, and they set up their structure in a way that they don't have to build too much custom functionality for keyboard interaction and so on. So, by doing that early, all that time, later on, is saved while the clients who come to me and say, "Hey, we've gotten an audit done," or "Hey, this sucks. Can you help us fix it?" If I spend two hours there, it's just two hours getting into the code and trying to find out why this particular criteria is failing. It's way more focused on -- like two hours on those projects will solve one bug while two hours on the other project will actually set the foundation to make sure those bugs don't have to be solved later on.
Chris: That's just a huge point, I think, that you're making.
Chris: It's like, sure. Whatever. You have some accessibility problems. It doesn't mean don't fix them or don't try to hire somebody. But it's like, ta-ta-ta. If you would have thought of this early on, you would have gotten way more value out of it.
Sarah: Yeah, and I try to encourage people to look at it as some kind of learning experience that way as well. If something is going wrong right now, rather than just freaking out and trying to patch it and fix this one mistake, let's look at it and think, is this a sign of a bigger problem? Have we been ignoring accessibility? Yes. Okay, then how can we fix it? How can we make sure this bug doesn't happen again?
Chris: Like almost institutional training or something?
Chris: That's tricky. Do you have anything that you've found particularly effective in that regard? Hardly a week goes by, I don't think about or log or attempt to fix some kind of minor accessibility thing on projects that I work on, but I'm not sure that I think about -- at least every time -- "Okay, I fixed this, but how can I make sure that something like this never comes up again?" I'm probably not doing as well as I could there, to be honest. [Laughter]
Sarah: [Laughter] It's not always possible to prevent that from happening again, but especially with bigger products. I like to look at it as individual developers can make mistakes and will make mistakes and no one can know everything. But it's up to the individual developer to try and get their code in check. But if something is not accessible, it's also part of -- you know, they're not being reviewed during testing. No one has looked at it. No one has invested in training and so on.
Depending on the thing, you could look at it as, okay, I see that I've gotten several issues now that I had to fix where there was missing alt text. Then you can go and look at are there any plugins like Linter errors that can be thrown if I don't have alt text? Is there any automated testing I can set up with regards to that?
Or if the issue is that we are messing up a lot with keyboard order and stuff. Okay, first, read up on trying to understand how those people use a keyboard to navigate the Web, or try to understand how you would use a keyboard to use your website. Then try to understand what's needed.
Often, those things, you can solve by building just something sustainable. A lot of what I see, for example, when it comes to screen reader accessibility and keyboard issues, the issue isn't necessarily that it's very hard to make it screen reader accessible. It's just that if you never think of the fact that it has to be screen-reader accessible, maybe your components will be rendered in a weird order and CSS programmatically puts in the correct place.
Sarah: To a screen reader, it gets read in the wrong order. Those things, it comes more down to building an accessible structure of your website and more reading up on how screen readers specifically work or what implications ARIA roles have and so on.
Chris: Fantastic advice, really. Speaking of some educational stuff, we tie it back to some of your Pens. There's one Pen that you did called Polaroid Camera in CSS that you took a little above and beyond. At least the educational aspects of it more than some others - maybe. At least I can see that you made it, and it's on CodePen. Super popular on CodePen. But then blogged in-depth.
There's a whole how I recreated the Polaroid camera with CSS gradients. It sounds like gradients is one of your big tools, I think, for these. Right? Yeah.
Sarah: Gradients and shadows.
Chris: It starts with a photo that you found of it and really details the process here. Normally, I would ask a guest to be like, "Tell me a little bit more about that process," kind of thing. Although, you already did mention a lot of it just starts with finding good source material.
But this goes much deeper in the HTML structure and the CSS approach and all kinds of stuff. It's more detailed and interesting than you'd think. A lot of color picking and palette-making and all kinds of stuff. Pretty cool.
That's educational, but then it lives on CodePen. It's on Glitch as well. There's a GitHub repo for it and all that. This one you took everywhere. What was the thinking on that one? Just to see how far these things can go?
Sarah: It was more that I wanted to write a tutorial about it because, the first time that I posted it, I saw some people were interested in it. I had it on the back of my mind. Then as soon as I posted the Polaroid camera, I saw a lot of people were asking how I did and were liking it. Then I was like, okay, let's just, this afternoon, set some time aside and write a tutorial about it and not let this go to waste. Let's actually turn this into something tangible that someone can maybe learn some CSS from.
Chris: Well, that happened, I think. [Laughter]
Sarah: Yeah. [Laughter]
Chris: Another thing I have heard or it seems to be true is that -- so, it's like, okay. Let's say you develop these skills at reproducing old technology. There's this wonderful old Macintosh that you did as well and all that. Spent all this time.
To you, like you said, it's knitting or whatever. [Laughter] It's relaxing. But would you say--? I mean you're developing and flexing these styling skills as well. So, when it comes time to perhaps writing CSS in a more "normal setting" that you're more confident at it. You're essentially better at it.
Sarah: Definitely. Yeah. Especially my speed gets trained a lot. And after spending so much time just writing the same properties over and over again, it becomes second nature so quickly. Also, the structure and having to think of a component, like a physical component of a keyboard or a physical component on a camera of the lens, and how you would break that down into subcomponents that make sense physically.
Sarah: Because that's also something I've tried to do. I try to look at the object and think, "How can I extract this in terms of different, separated components, and what are their different functionalities?" If you look at the CSS classes, it will always be named after -- it will be the lens or the lens container and will have different--
Chris: Yeah, there's some naming at work. Yeah.
Sarah: Yeah, so I feel like it also really helps me to think of components on the Web in a different way as well. Maybe not necessarily in a different way, but it kind of strengthens that training as well. To me, I would really recommend people to be creative and have fun with CSS and HTML (or whatever programming language it is that they're enjoying) and build something that you're passionate about and that you enjoy because that's a really great way to learn.
Chris: I hadn't thought of that in the same way that you put it. I normally think of, well, it's your CSS skills that are developing mostly. But I think your point was yeah, sure, but equally or more so the HTML, in a way, of breaking up a component and perhaps thinking of the structure of the component, too. Like, oh, it'll actually be easier to style this child if it's a child of this child--
Chris: --rather than having them all be flat on one parent--
Chris: --because, looking at your Pens, there are plenty of nested HTML structure. Sure, that's great for this drawing. But that's exactly how componentry works on any website where you're building in components.
Sarah: Yeah, and it also brings again back to accessibility because that's such an important part of accessibility as well, like how you set up your site structure and how you build your HTML and thinking of people in regard to functionality.
Chris: Oh, wow. Right. What do you call it, the document structure?
Chris: Isn't there a literal alternate DOM almost? Like when a website loads, it makes an accessibility tree that screen reader tools use to represent the site?
Sarah: Yes. Exactly.
Chris: Oh, that's amazing, the connection there. I never thought of that. I wonder how many other CSS artists essentially dabble or are all in on accessibility because of that internal connection between those. That kind of, "This is how my brain works." [Laughter]
Chris: Well, your brain works pretty good, Sarah.
Sarah: Thank you. [Laughter]
Chris: It's a pleasure to have you on the show. I told you the time flies really quick on these things. We're about at the end. Is there anything you want to make sure we share with people or point people towards before we wrap?
Sarah: Yeah. People can find my tutorials on fossheim.io. When it comes to accessibility, I'm also involved in a group of data vis accessibility specialists. We have GitHub repo resources on DataViz Accessibility specifically, which is github.com/dataviza11y, so DataViz Accessibility. Then there's of course also the Ethical Design Guides you already mentioned, ethicaldesign.guide.
Chris: Fantastic. Yeah. DataViz Accessibility resources. It just needs a little 11ty website and it'll be all ready to go.
Sarah: It's on my to-do list.
Sarah: It's endless. [Laughter]
Chris: Nice. That does seem important, too. How many times do you see an infographic or whatever that's just some fricken' jpeg sitting on the Web? Or even if they did--
Sarah: A jpeg without alt text.
Chris: Yeah. [Laughter] Or even if they made it, programmatically then it's just Canvas and doesn't have any alternate or anything. I'm sure this is a big thing. I'm just going to go ahead and star that repo. [Laughter]
All right. Thanks again so much, Sarah. It was a pleasure to talk to you. I hope to do it again soon.
Sarah: Thank you for having me.
Chris: Take care.
[Radio channel adjustment]