SVGs, Magic, and Joy of Whimsy on the Web with Cassie Evans

newline

Resources:

• cassie.codes
• twitter.com/cassiecodes
• Amelia's Twitter
• Nate's Twitter
• Kurt Vonnegut and Narrative Arcs
• Sara Soueidan's Post on SVG Filters: The Crash Course

Welcome to the newline podcast. Our show is a conversation with experienced software engineers where we discuss new technology, career advice, and help you be amazing at work.

I’m Nate Murray and I’m Amelia Wattenberger and today we're talking with creative coder Cassie Evans.

In this episode we talk about something often neglected in web design today: how to bring whimsy and joy to your users

In our chat we talk about how the old web had entry points to programming and where we might find find that today.

And open with a story about how she, as a child, sold animated cursors for donuts, which felt like magic - and how even today snippets of code feel like magic spells.

We loved our conversation with Cassie, and think you will too, let's dig in!

Cassie Evans Podcast

Amelia: [00:00:00] Welcome to the newline Podcast.

Nate: [00:00:08] Our show is a conversation with experienced software engineers, where we discuss new technology, career advice and help you be amazing at work. I’m Nate.

Amelia: [00:00:17] And I’m Amelia Wattenberger. Today, we’re talking with creative coder, Cassie Evans. In this episode, we talk about something often neglected in web design today, how to bring whimsy and joy to your users.

In our chat, we talk about how the old web had entry points to programming and where we might find that today.

Nate: [00:00:35] We open with a story about how Cassie as a child, sold animated cursors for donuts, which felt like magic. And how even today, snippets of code still feel like magic spells. We loved our conversation with Cassie and we think you will too.

Let’s dig in.

Cassie: [00:00:53] We’re not

Nate: [00:00:54] live and so we just it to be fun. One of things is I really love your talks and you talked about how the web needs more whimsy. I just love that so much. In one of your talks, you mentioned that you sold neopets pages for donuts.

Cassie: [00:01:11] Yes.

Nate: [00:01:11] Like when you were a child. Can you tell me more about that?

For context, I think you and I grew up with some of the similar early web stuff. For example, when I was younger, I once got on the Internet for hours and then my parents were furious, because my dad had gotten an accident at work and his boss was supposed to call. I’d been tying up the Internet, because I was on dial-up for hours.

Yeah, I just love the old classic web style, like Myspace and neopets. We can get into that some, but can you tell me about how you sold neopets pages for donuts?

Cassie: [00:01:40] Yes, definitely. Yeah, firstly you mentioned dial-up. I missed that so much. It's so close to my heart, because I remember we had one computer at home, that was our home computer and I was only allowed to use it for educational things for a lot of times.

I used to wait until my parents were asleep and then I’d creep downstairs with blankets and I’d have to wrap the whole computer up in the blanket, so that it wouldn't make the noises, so that I could dial-up to the Internet. I just sit there clutching it to my chest, trying to dampen down the noises, so they wouldn't wake up.

Why

Nate: [00:02:15] were modems so loud, right?

Cassie: [00:02:17] So loud.

Nate: [00:02:18] Yeah.

Cassie: [00:02:21] Even that noise now gives me anxiety, because it sounds like being downstairs, terrified that my parents are going to wake up at any moment. I love that. Yeah, the donuts. I didn't have money for the tuck shop when I was younger. I got school dinners. I didn't have packed lunch boxes and they weren't really into giving us sugary snacks.

They were quite healthy. I got quite jealous about all of the other kids having donuts from the tuck shops. Around that time, everyone started making Myspace profiles and neopets pet pages. My one was really good and lots of people asked me whether I could make them sparkly cursors and stuff. I started up a little side hustle and swapped sparkly cursors for donuts.

It was excellent.

Amelia: [00:03:11] What is the deal? Is it one cursor for one donut?

Cassie: [00:03:15] Yeah, I think it was something like that; a cursor for a donut. This

Nate: [00:03:19] is amazing. I don't actually understand how this would work. How much programming was it? Were you finding GIFs? I’m interested in particularly one, for the entrepreneurship side, two, because it's on-brand that you're adding sparkles.

Then three, is the learning programming aspect. I love this idea, for example, that some of the best ways to learn are just when you're self-motivated and you're just trying to do stuff. I learned how to program, because I was tweaking web pages this similar way and I worked my way down. I’m interested. I didn't actually use neopets necessarily, but what were these cursors and how did that work for as much as you remember?

Cassie: [00:03:53] As much as I remember. I think it was very much accidental. I don't think that I realized that I was coding at the time. I didn't really have much of an awareness of what coding was. I used to play The Sims me other early games as well

and they had cheat codes that you could type in. I saw it as the same thing. It was Internet cheat codes that you went to some websites and they had pictures of different sparkly cursors, or different backgrounds, or different CSS effects and you just copied a cheat code and then you put that cheat code onto your – and I didn't really know that that's what the building blocks of the web were.

I didn't understand that at the time. I thought that they were a little magical snippets that you just – I mean, they still are.

Nate: [00:04:42] Right, they still are. They still are

Cassie: [00:04:43] magical snippets, aren't they? I still feel like that nowadays. Some new CSS comes out and I’m just like, “Wow, another magical snippet.

Amelia: [00:04:52] This is amazing.”

They keep making them.

Cassie: [00:04:54] Yeah.

Nate: [00:04:56] I learned some early programming, we would play these old games, they were called MUDs. You'd Telnet in. It's before SSH, you Telnet. It’s like SSH, but insecure. You Telnet into these servers and play these text games, where you're go to the sword shop or whatever and you buy a sword.

Then I remember that what we would do is we were like, “Oh, we could host our own server.” It’s the same thing. We didn't know we were We were just copying and pasting these codes, make our own server and then we're like, “Oh, we can give ourselves our own items.” We're copy this snippet and then you realize now you have these God-like powers of playing this game that you enjoy and then realize like, “Oh, shoot.

What else could I do with this power?” That was actually one of my entry points to programming too. I think that's really special. One of the things that you've talked about too is well, I don't know. What are some of these entry points that people have now? What could we do to give this, serendipitous entry point into coding for kids today?

Cassie: [00:05:46] It's really difficult, because I’ve looked around and I haven't found anything that has that same accidentally educational aspect to it. There's some really amazing things that have the same sense of community, because neopets for me and Myspace to a degree had this community aspect, where there were lots of other young kids who were all hacking around and changing things and you learnt things from each other.

I think that we definitely got that in platforms like CodePen and Glitch. They're really great, because they lower the barrier to entry. They abstract away all of the fiddly setup and build tools and all of that stuff and they allow people to just jump in and start making things and remix things that other people have made and fork things that other people have made.

I think that's really great, but I don't think we already have any of those accidentally educational things around anymore, which is a shame. People have to be a lot more intentional. They have to want to learn and know what they're there for in order to start off. I

Amelia: [00:06:58] also think about this with cars. I think it's a little bit related.

When I first started dating my husband, he had a – it was 69 Mercury Cougar, a really old car. He could work on it, because there's no computer, you can understand what the parts are pretty easily. You can just look at them and be like, okay, this turns and it turns this other thing. I think the Internet today is so

much

more complicated.

The bar for what's cool on the web is so much higher that when we were kids and we made a sparkly cursor, even our parents would be like, “Oh, wow. How did you do that?” It's hard to make something impressive now and it's just so overwhelming. I think that's also part of why Glitch and CodePen

can be so

helpful, because they take care of the nitty-gritty for you, so you can focus on being creative.

Nate: [00:07:51] I’m

optimistic. I think that I’ve seen some movement there with Minecraft maybe, Roblox is interesting. Yeah, there's some interesting ideas happening there. There's even some interesting, like more deliberate code for kid tools. There's one called Microsoft MakeCode Arcade. It's like Scratch, but it's designed for building games.

Even that, board is on educational. I think there's something special, where it's not deliberately educational, but you learn from it that it's important.

Cassie: [00:08:19] Scratch is so cool. I really love Scratch. The Harvard computer science course, the first thing that they get you to do is a thing in Scratch. When I started that, I was like, “Oh, I bet this is really – it's really hard.

It's that like Harvard computer science course.” Then they were like, “We're going to build a game in scratch.” Wow, it’s

Nate: [00:08:39] cool. You’re like, “I can do this. Yeah.” I hope that there's more tools that come out, particularly on tablets, because one of the things I notice with my kids is that they're using an iPad a lot more frequently than they're using a computer.

I think just the ethos and the ecosystem of tablet apps is it's a lot more locked down. You can't necessarily look under the covers, like you would with Vue source on a webpage. I think any tools like that that let you learn are really interesting. There's a scratch junior that my kids use just to build little stories and little animations and I love that, but there's not too many tools yet, but I’m hoping we can create more.

I

Cassie: [00:09:15] feel there's some stuff in the hardware hacking, crafting worlds. I think that coding and crafting, the intersection of that, there's some quite interesting stuff happening, because I think you can fall into that accidentally as well if you're interested in hacking around with things. You can end up, “Oh, well.

I want to make

these lights flash and oh, I’m going to have to learn Python in order to do that.” I think that that's

still yeah, accidental gateway

Amelia: [00:09:51] into things. Yeah, I love that. I think some of the people I used to work with, they would spend time with their kids making a Halloween skull with an Arduino that makes its eyes flashed. It's such good bonding time, and because it's fun for everyone. I enjoy doing that.

Cassie: [00:10:05] I was

Amelia: [00:10:06] like, “I need a kid, so I mean,

Cassie: [00:10:08] I can have an excuse

Amelia: [00:10:09] to do

Nate: [00:10:10] this.”

Right. Yeah, I know. Right.

But our kids are doing that now with cosplay stuff, is they first were doing little paper craft creatures. They would print off a template and they cut it out and they'd be like, “Oh, we want to make our own,” so then they're learning how to use blender to do their own 3D modeling.

Then use, there's this tool called Pepakura, which you can use to slice 3D models down into a little papercraft, like Minecraft creature or whatever. Then they're learning computer skills for using Figma to edit the templates and they're using Blender to learn 3D modeling. They're not good at that yet, but you can see the progression.

They're going to take over the world. Yeah. I recently watched one of your talks on CSS filters and it totally blew my mind. I’ve been programming for since we talked about since dial-up, and I didn't even know that SVG had filters. I thought that was so fascinating. Can you talk

a little bit about your recent work on doing paintings with SVG?

Cassie: [00:11:05] Yes. I’ve really been loving SVG filters recently. I got into a little bit of a slump at the beginning of lockdown, where I wasn't feeling creative at all. The idea of programming, coding sounded not so much fun. I wanted to do something a little bit more relaxing.

Yeah, I find SVG and SVG filters really fun to play around with, because it's more declarative. You have some filter primitives and filter primitives they work – well, filters they work a lot like audio programming, where you've got inputs and outputs. You can chain things together. You have different filter primitives inside a filter element and you can feed the output of one into the input of the next one and the output of the first two into the input of another one.

That means that there's infinite possibilities. Ultimately, all you're doing is just changing a couple of values and some attributes. It feels like putting Lego blocks together. You don't really have to think through any intricate logic. You can just put some filters together and see what happens. Yeah, I find that really fun, the randomness that you get not being able to predict the outcome.

I’ve played around and I accidentally ended up with something that looked a little bit like a pencil line. Then I just riffed on that and made some things that looked a bit like hand sketched paintings, which was a lot of fun.

Nate: [00:12:42] It's gorgeous. It is one of the most beautiful SVGs I’ve ever seen. We'll put a link in the show notes.

It was just delightful and mind-blowing. I think that yeah, your talks on SVG are really a

Cassie: [00:12:55] delight. That's so lovely to hear. When you have the chance to play with these things, is

Amelia: [00:12:57] that all through just side projects? I know when my – at least my job title was developer, most

jobs you don't get

to play around or do something super creative. Is this something you get to do in your day-to-day job, or is it mostly just side? Yeah, what is

Cassie: [00:13:16] your day job? My day job, I am a front-end developer at a company called Clearleft in Brighton.

I’m lucky, because my job we have a mixture of client projects, but we also – well, not so much right now, because of the pandemic, but we also do events. The event sites are a chance to flex your creative muscles a little bit, try out new things. I get to explore things creatively through the event sites and then focus on building accessible, solid front-end websites for

Amelia: [00:13:55] my day job.

Oh, that's a nice balance of the more focused and the more creative. Are you usually working with designers?

Cassie: [00:14:02] We have a lot of really good designers at Clearleft. It's hard, but we try to avoid pigeonholing people into just one role.

If people want to explore a little bit more design, but they're a developer, then they try to give people space to do that. I’m currently working on a little side project site at work. I’m getting to do design and stuff on that, which is really nice.

Nate: [00:14:28] You mentioned that you used to draw a lot and I feel that , experience in your work.

Your chameleon, for example, is just adorable and obviously done by someone who has art skills outside of programming. What does your process look like? Are you sketching out ideas for what you want to see on paper, or do you just go straight to SVG? How does that work?

Cassie: [00:14:48] It's very much technology-driven, rather than aesthetics first, actually.

I tend to get ideas, because I’ll be looking at a particular technology and then I’ll think, “Oh, how could I demonstrate that? Or how could I play with that in a way that is aesthetically pleasing, or fun?” The chameleon, I wanted to play around with getting colors from a webcam. I did that and it was just changing

Amelia: [00:15:16] a rectangle

Cassie: [00:15:17] on the screen to different colors.

I was like, “Well, that's fun, but it would be so much more fun if it was a chameleon.”

Nate: [00:15:25] I love that in your work. Amelia does this too, I think, in that you build something and then it's like, okay, that's fine, but how do we make that more fun? Then you'll take the time to put in those details and it's really delightful.

Cassie: [00:15:38] Yeah, I am such a huge fan of Amelia's work. Your article about the SVG viewBox, I have directed so many people at that. I had a whole lengthy explanation in a workshop that I did about the viewBox and then I was just like, well, actually just look at this wonderful article, because it explains it a million times better than I could.

That's so

Amelia: [00:15:59] good to hear. I feel like I do these things for myself. I’m like, okay, well I need a little toy example. Then I’m like, well, I might as well make it into a telescope. Might as well just let other people use it, I think the way you described your processes, it's very just like, playing around for your own personal benefit.

Then just like, “Well, if I enjoy this, other people may also enjoy this.” You released your new website recently and I feel like it got a lot of attention, especially for the bottom. You have a little SVG of yourself and the eyes follow the cursor around. It's just really delightful to play around with, because there's so many websites out there.

It's nice to even stumble across one, where you're like, “Oh, this person didn't just make a nice looking well-designed website, they took the next step to make it delightful and take a chance to connect with the user.”

Cassie: [00:16:56] I love that so much. I’m not a huge fan of really whiz-bang websites, so websites that you land on and just everything animates and your cursor gets hijacked and your scroll gets hijacked and all of that thing.

I find that really overwhelming. I absolutely love it when I’m navigating around a website that looks on the surface, like it's just your average website and then you hover over something, or you click something and it does something unexpected and joyful. It makes you smile. It makes the website feel a lot more human.

Amelia: [00:17:32] I think you have to really understand how the web works to create a website that's both really easy to read and accessible and also has that next level. I feel it's easy to do the scroll-jacking, or just animations everywhere, but to have a little bit of restraint and to make it so that people with slower connections, or using screen readers can even navigate it as well.

I think that's really awesome.

Cassie: [00:17:58] Yeah. I think I had a head start, because I was using 11T. You get out of the box just a lot of performance benefits there. It's a static site generator. I think the tagline is it's a very simple static site generator.

Nate: [00:18:12] On the tooling side, I’ve noticed that you use GreenSock for a lot of your animations. I’ve never really used GreenSock, but I’ve seen that a lot of CodePen people use it. Can you just talk about GreenSock a little bit, like what you about it and explain to me why it's so popular?

Cassie: [00:18:29] Yeah. I have to start with the disclaimer that I don't work for GreenSock and GreenSock don't pay me any money.

Because whenever I get really excited about GreenSock people are like, “She's got to be selling something.” Yeah, I love GreenSock so much. There are a whole bunch of different animation libraries out there, like JavaScript animation libraries. I think if you're doing things with HTML DOM, or say you're using a JavaScript animation library to trim some 3JS stuff, you're mostly just concerned with changing some numbers and a lot of the animation libraries handle things exactly the same way.

The problem with SVG land is different browsers handle SVG transforms differently. You can end up with things moving around in unexpected ways in some older browsers and GreenSock, they have gone above and beyond to iron out all of these browser inconsistencies. You can be very sure that your SVG animations are going to work the way that they should do.

They

Amelia: [00:19:31] a lot more. They'll make really nice animations between things. They have this new scrolling library, right?

Cassie: [00:19:39] Yeah. This is another really cool thing about GreenSock is that they've got the core GreenSock library. Their licensing model gets a bit misunderstood, because they're one of the only JavaScript animation libraries that aren't open source.

But their core animation library is free for the majority of use cases. I think if you're selling an end product to multiple users, then you have to pay for it, but for 99% of people, it's free. Then they have these additional plugins. The core library does everything that you would need it to do and then the plugins are extra fun and some of the plugins are free and then some of them are behind a membership fee, but they've got a whole bunch of different SVG-specific plugins.

They've got ones that help with SVG stroke animation and they've got ones that do morphing. Yeah, they've just released scroll trigger, which is amazing. I’ve played around with it a little bit. It uses one event listener behind the scenes, so it's really performance and just really intuitive as well. I think that's, yeah, another thing that I really love about GreenSock is the docs.

They're just really good. They've got so many good animated examples in there and the forums are really, really friendly. It's like the opposite of stack overflow, can I say that? People are nice there. You post a question and I think as a newbie, I started off doing banner ads animation. That was my first job.

I didn't have anyone to learn from and I had no idea what I was doing and I’d post on the GreenSock forum and someone would just jump in and help me out immediately. Yeah, it's really good. That's a

Amelia: [00:21:22] really interesting business model.

Cassie: [00:21:23] It's difficult to explain to people, but I understand why they do it, because it means that they don't have to rely on any external sponsors.

They can just focus their time purely on updating it, which is why a lot of the other animation libraries don't have the time to put in the effort to make sure that things work with SVG cross browser, whereas GreenSock do. Oh,

Amelia: [00:21:45] and it also looks like you can use any of the plugins on CodePen?

Cassie: [00:21:50] Yes. It's super cool. That's the coolest thing. I think that's why so many people on CodePen use GreenSock, because everything's available to use on there.

Amelia: [00:21:58] Yeah, that's super cool. I haven't had a chance to play with it yet, but it seems like it's – just a really great way to lower the overhead of if you're like, “Oh, I want this button to have a particle system and explode, or I want it to morph into this other thing.”

It might just be too much work

Cassie: [00:22:13] to do. We all have deadlines at

Amelia: [00:22:14] work.

If anything, even haves that effort, it might just make it worthwhile. Yeah, definitely. I think there's been quite a few times where people have gone, “Wow, that's

Cassie: [00:22:23] a really cool animation that you've done.” Then see that it's five lines of green top coat. That's all

Amelia: [00:22:32] it takes

Nate: [00:22:33] sometimes, though. Yeah. It's

Cassie: [00:22:35] also a lot easier to tweak your animations with green chords, or just an animation library in general.

I’ve struggled with very complex animations with CSS, because you can't chain them together. It's really nice to have a timeline and all that.

Amelia: [00:22:54] Yeah, are there any other tools like GreenSock that might be really useful for someone who is new to the more creative coding

Cassie: [00:23:02] space? I don't

Nate: [00:23:03] know. I’m curious on how to learn how to do SVG animations as well, because I feel the things that actually both of you create just feel like black magic to me.

I don't really understand SVG super well, or particularly CSS animations. Golly. I am not good

Amelia: [00:23:18] at

Cassie: [00:23:19] that. Golly.

Amelia: [00:23:21] I thought of one, which is similar. I’ve always felt like I’ve seen 3D stuff on the web. I don't know what wizard you have to be to have this 3D scene in a web page, but I will never be there. Then you discover 3JS

Cassie: [00:23:38] and it's like – A frame as well.

A

Amelia: [00:23:41] frame.

Cassie: [00:23:41] Yeah, A frame is really cool. It's a web framework for building virtual reality experiences. Oh, my goodness. Yeah. Amazing.

Amelia: [00:23:51] I love it. I love how these libraries make even, just you have three lines of code and you're like, “I have no idea how I did this either.”

Cassie: [00:23:59] I remember when I made my first Taurus knot in 3JS and I was so excited about it.

I think pretty much out of the box, you have to import

Amelia: [00:24:10] a plugin, but you can rotate it, you can zoom in and out, you can pan around. It's definitely magic.

Cassie: [00:24:16] What's the D3 version of that? Is there a good entry point into D3? I

Amelia: [00:24:23] have this spectrum in my head of things that are really complicated, but down to the metal.

You can do whatever you want with them. Then the other end is a chart library that'll make a chart for you. You say, do a line chart with this data and it'll make a line chart. D3 is definitely on the former end, where it's like,

it gives you tools you need.

There's a lot of tools and you have to dig into each one of them.

I feel if you want that oh, my God. This is magic feeling with D3, a lot of people, especially at the beginning, they'll just look up, there's so many examples online. They'll copy the code and then they'll paste it and then over two years, they'll

understand what each line is doing,

which I think everyone who learns D3, this is the way they learn it, just because those end examples are so cool and you're like, “I want this.

I’m going to have it.” Then you take it and don't really understand all of it. Then there's also the chart libraries

that make it super

easy to do a really fancy chart really easily.

Nate: [00:25:23] We talked a lot about this when we were working with React and D3. I mean, D3 is like React, in that it's a ton of different little modules that all work together.

If you try to use for example, D3 with React, it's obnoxious, because D3 also takes over rewriting the DOM for you. One of the things that I would complain to Amelia when she was teaching me this is that to use D3 with React, you basically use React to form all the SVGs and you almost don't need D3, except for the utility functions.

I don't actually know what is a good tool that's magic

for D3. There's

Amelia: [00:25:55] React

chart libraries that

you'll get something really amazing and be like, “I

did this.”

We're all on the shoulders of giants.

Cassie: [00:26:04] I remember looking into D3. We got a solar panel installed on the roof of our work and I wanted to hook in.

Well, you could hook into the API, which is really cool. I wanted to do that and see what we'd saved. I looked into D3 and it terrified me. Then I ended up making an illustration of our office building in SVG. I’ve set it up, so that with every certain amount of CO2 we save, it grows another plant out of a rooftop garden.

Amelia: [00:26:44] I love how this was easier.

Nate: [00:26:46] Yeah.

Cassie: [00:26:49] It's like reaching for the tool that you understand. It's really difficult to make yourself learn new things. I was like, this is a great opportunity to learn D3. Then about 24 hours later I was like, “I’m going to make an SVG.” I think about this a

Amelia: [00:27:05] lot where the flow state is in between something that's really boring and something that's really challenging.

If something's too challenging and overwhelming, your brain will just shut off. You'll be like, “I can't learn this.” Then if it's too boring, your brain also shuts off and it's like, “I can just do this in my sleep.” I think a lot of people when they first look at D3, the needle goes all the way and they’ll like, “This is overwhelming.

I don't know where to start direction.” Then I think even with SVG, that was probably not in the boring area for you, even though you know SVG it was in the middle flow state of this is a good challenging.

Cassie: [00:27:45] Yeah.

Nate: [00:27:45] Cassie, in one of your talks you mentioned this idea that limitation breeds creativity. Could you talk a little bit more about that and your thoughts there?

Cassie: [00:27:53] I have quite bad anxiety. I’m quite bad with procrastinating as well. I overthink things and I procrastinate. When I was learning how to code, there were lots of times where I’d sit down and stare at an empty VS code screen and just be like, “Right. I need to make something.” Then not knowing what to do. It felt a lot like when I was younger.

I really loved drawing. At a certain point, I started doubting myself a little bit and overthinking it. My mom started what we called the scribble game. The scribble game was great. She'd take the paper from me and she'd draw a scribble on it, so that the paper wasn't blank anymore and then she'd hand it back to me and I had to make that scribble into something.

It was a challenge, but there was a starting point. I think that that's so important when you're trying to make some things, to have a limitation and a challenge and a starting point. If you've got those three things, I think it's a lot easier.

Amelia: [00:29:02] I love that. I

Cassie: [00:29:03] love the scribble game. Yeah, it's wonderful. How

Amelia: [00:29:07] can we apply this to code?

How can we do a code scribble in order to lower that barrier?

Cassie: [00:29:14] I guess, that's what you're saying about D3 having examples that you can copy and paste and start with. CodePen as well, like other people's pens that you can fork and Glitch

has things that you can remix. I think that's a really great place to get started with

something new, is just start with something and then see what you can make it into, or see how you can break it. I think it's a good way to learn things.

Amelia: [00:29:40] Yeah, I think that's great. I was also reading an article yesterday. I’ve been meaning to learn 3D modeling, like you're talking about, Nate, that your kids are doing.

It was this article, someone did a 100 days of 3D modeling to learn. They had a few things where it was like, one day they'll do a tutorial and the next day they'll make something with that knowledge. Every other day, they're doing a tutorial and it's an easier day, or every other day they do something easy and then they do something really hard.

That's a good idea, because otherwise, you're either burning yourself out, or you're not learning as much as you could.

Nate: [00:30:17] I feel like we are so early in programming education in that there's not really – I’m lumping 3D modeling into this too. There's not really a good place that you can go that will give you this off-the-shelf curriculum to learn 3D modeling, as you learn D3.

Cassie: [00:30:32] Yeah, it's definitely a tricky thing. I find it really hard, even just trying to figure out what I need to learn to be a good front-end developer nowadays, because I feel there's just so much and I inevitably just go off on rabbit hole tangents all the time into the stuff that I’m really interested in.

I’m like, “I should be learning webpack, but I’m going to learn some 3JS instead.”

Amelia: [00:30:59] I feel whenever I try to write an article, I turn into a grade school version of myself that would tweak the PowerPoint slide styles, instead of actually writing my presentation, where this is the only reason idea in my blog posts have something fun in them is I don't like writing.

Cassie: [00:31:16] I’d rather

Amelia: [00:31:17] just do something fun, like scribble on the page with SVG. It's also a strength, I guess. Because most of these things I do, I’ll end up using them

Cassie: [00:31:26] in work. I work with someone who uses the phrase procrasti-working. That's when you know that you're really bad at procrastinating. You have a couple of things that you want to do.

Then if you're not doing one of them, then you're going to be doing the other one to procrastinate them. Right,

Nate: [00:31:43] procrastinate doing something else you should be doing, so that at least, you're moving

Cassie: [00:31:48] I was to

Amelia: [00:31:49] my friend about this. She said, she cleans when she has a deadline. That sounds like such a superpower.

At least something's clean.

Cassie: [00:31:57] Before I do a talk, my house is the tidiest it's ever been. Everything is alphabetically organized. Everything is polished.

Nate: [00:32:06] Can you tell us about how you prep for your talks? What does that workflow look like? I prep with

Cassie: [00:32:11] great difficulty, is the honest answer. I’m very lucky, because there's a lot of people at Clearleft who do a lot of public speaking.

Jeremy Keith being one of them and he helped me huge amounts with my talk writing. I think that the first ever talk I did, it was just a little talk at a meet-up. I was just doing a show and tell, basically, of some of my CodePens I clutched a glass of wine for the whole thing and just showed people the fun stuff I was working on.

Doing a conference talk, it needs to have a little bit more structure than just a list of things. I think that it's very rare that you see a talk that's just a list of things that is engaging. I think Jeremy really helped with that, because he's very good at telling stories and he said to me, what you need is you to make sure that your talk has a narrative structure.

You need a flow to it. I wrote down everything that I wanted to talk about on post-it notes. Then Jeremy prompted me with different narrative structures. One being the hero's journey, I think was the one I used, so you've got a hero. The hero learns something along the way and overcomes something. I looked at all of the notes that I had and tried to arrange them into different narrative structures and then, eventually found one that I was happy with.

Amelia: [00:33:39] What are the other narrative structures? What do you even google find this story to narrative arts?

Nate: [00:33:45] The Wikipedia page on the hero's journey is pretty good. There's another one. There's a graph. I’ll link to this in the show notes. There's a blog called Reedzy, and they've actually diagrammed out. There's a talk by Kurt Vonnegut, where he actually goes through all these different narrative arcs.

One of them that he talks about is the hero's journey, but they actually plot out Cinderella. Here, I’ll send you the link.

Cassie: [00:34:10] I love graphs of Cinderella. Excellent.

Nate: [00:34:14] Yeah, so Kurt Vonnegut, he wrote Slaughterhouse-Five and he also gave this really fantastic talk. There's a YouTube video of it, where it's Kurt Vonnegut graphs the plot of every story.

There's actually a database of these different narrative plot lines. Dativism

Cassie: [00:34:28] storytelling. Yeah, this is right up my street. Yeah, I love cart when I get as well.

Amelia: [00:34:34] I also found this chart of how happy Harry Potter is throughout all the books. It looks like he just gets progressively less happy. Yeah,

Nate: [00:34:42] progressively sadder the whole time, right?

Amelia: [00:34:44] Yeah. It's pretty dark by that in there.

Cassie: [00:34:47] What are some other narrative arcs? Oh, the rags to riches. That's a narrative arc. Oh, rags to riches has two, so there's the rags to riches rise and riches to rags full Icarus, where you rise and then fall. I feel that'd be such a

Amelia: [00:35:03] disappointing book.

Cassie: [00:35:04] Yeah.

Amelia: [00:35:04] Everything's happy until the end. You definitely wouldn't want to choose that for a conference talk. Right. For a conference, you got to end on the up. Yeah,

Cassie: [00:35:08] definitely.

Amelia: [00:35:15] Yeah, I love the concept of using storytelling in talks, because I think, especially with technical talks, it can be very like, all right, people want facts. I’m going to tell people how to use this thing. I’m just going to have slide after slide of here's a fact, here's a best practice and then it can be really hard to sit through an hour of that and keep paying attention and just keep learning things.

Cassie: [00:35:39] I think it's the human element, isn't it? Again, you need more whimsy and more human elements to things. I think some of the best conference talks that I’ve seen have been – I learnt this thing by doing it wrong for ages. This is what happened, because I was doing it wrong and I learned this lesson the hard way.

I think that that's really good, because it feels – you have empathy with them. It feels more relatable.

Amelia: [00:36:06] Brain, it's like, I can avoid this pain myself.

Cassie: [00:36:11] Everybody likes to laugh at other people's misfortune as well. You

Amelia: [00:36:16] just started a creative coding meetup.

Cassie: [00:36:19] Yes.

Amelia: [00:36:20] Right before lockdown, right?

Cassie: [00:36:23] Yeah. We had about three meet-ups and then lockdown happened.

It was really great. There's a conference in Brighton called FFConf and Charlotte Dan did a talk. She's amazing. She does lots of really cool generative art. She makes degenerative jewelry as well, which is very cool. A lot of my Brighton nerd friends, we all went to this conference and we saw her talk and she talks through pen plotting and generative art with CSS and generative art with JavaScript and using hardware and creating physical things, like jewelry and stuff.

We were all really inspired. Afterwards, we were like, “Let's have a meet-up,” because it's really hard to find time to do all of that stuff and motivation to do side projects outside of work. We decided to do a meet-up that wasn't the normal talk structure, where you go along and watch people talk and then leave again.

It was more of we call it a knitting circle for nerds. Everyone just goes along and we all have our laptops and we just tinker on projects and help each other. Then do a little show-and-tell at the end and eat crisps. Sometimes there's a very, very small dog. A very, very small dog. Very, very, very small chihuahua.

Amelia: [00:37:48] [inaudible] .

Cassie: [00:37:50] Yeah, now that's all moved online now, because of the plague. It's been really lovely, because we've got this little Slack community that has been there the whole time the lockdown's been happening and quarantine's been happening. It's just been such a great bunch of people. Creativity without the pressure and coding without the link to work and career development and stuff.

It's just feels a very free space. Everyone there has been super open about feeling a bit creatively restricted, or battling with balancing out life stuff and coding. Yeah, it's been a really, really lovely group of people. Chris, one of the people from Brighton Generator, he is just a project machine. Even when everyone else hasn't been making stuff, he's just been knocking out projects pretty much every week.

It's been wonderful watching what he's been making. That

Amelia: [00:38:51] sounds so nice to just have that group, especially in these times. On Twitter, I feel a lot of people are having just such a hard time with a lot of people get inspiration from nature, or talking to people, or going places. It's just so hard when you always stay in the same house, if you see the same things and the same people all the time.

Yeah,

definitely. I think that that's fine. People shouldn't be outputting stuff all

Cassie: [00:39:18] the time. You shouldn't feel like you have to constantly be producing things. Sometimes you have to take time to absorb stuff. If that's reading books, or watching tutorials, or going for walks, or that thing. I think it's all just as important.

Amelia: [00:39:34] Totally agree.

Cassie: [00:39:35] Ooh, if you're wanting to learn more about SVG filters, Sara Soueidan has an amazing set of articles on Codrops, which I

Amelia: [00:39:43] learned everything from. They're really great.

Nate: [00:39:45] One of the things I appreciate about you is that you remember people's names. I’ve noticed that in your talks as well. When you are saying, you're not just like, “Oh, there's a blog post on SVG filters.”

You're like, “Sara Soueidan wrote this filter.” You should know her as well as her article. I really appreciate that. I think I would like to see more of that in general.

Cassie: [00:40:06] It's so important. One of the things that brings me the most joy, which I’ve started doing is there are a few times where I had made a CodePen or something, or written a blog post and someone actually just sent me a direct message just saying, “Oh, I just read your article and it was really helpful.

Thank you for that.” I do that now. Every time I read something and it's useful, I get hold of the person directly and just say, thank you. It's such a small thing, but yeah, I think it's really nice, especially for people who don't have analytics and tracking on their things, because I don't. I don't really want to know who's on my blog, because I get a bit too overwhelmed with numbers and statistics.

But it's really nice to get a message from someone saying that they enjoyed it.

Amelia: [00:40:51] I love that. Also, I feel for me, the better something is, probably the less likely I’ll reach out to someone to say that I enjoyed it, because I’m like, “Oh, there's so many people who are telling them that it's great.” As a creator, it's so nice to get any message.

I think being on the other side has helped that anxiety.

Cassie: [00:41:12] Yeah. I think we put people on pedestals and don't reach out for that reason. I think we should stop doing

Amelia: [00:41:19] also recently released new newsletter. I think it's monthly. What was your motivation behind starting it? I think it's solely focused on SVG, which is just a great niche.

Where do you find inspiration for that newsletter? There is

Cassie: [00:41:36] a little patch of time where GreenSock were hosting the CodePen challenges. I mean, it was about a month. Every week, Jack from GreenSock got hold of me with a whole load of CodePens for me to look through and judge. I just loved it. It was so much fun.

I spent every Sunday evening just going through all of these different CodePens and writing people messages and telling them what I liked about it. I got so many lovely messages back. It just felt so joyful and so lovely to be able to signal boost some people who are making really cool things and give people some feedback.

I basically just loved it, so I thought that I would like to carry on doing that. Then I had also, just before lockdown happened, I did a workshop in Brussels and I met Louie, who's also putting the newsletter together with me and we've been Internet friends for quite a while, but it was we met in person for the first time.

We just got along really well. We decided we wanted to do a little side project together. Yeah, he's been writing some SVG tips for a while as well on Twitter and I’ve been looking at those and thinking, “Oh, it'd be great if we could get these tips out to some more people.”

Amelia: [00:42:50] Oh, I’ve seen those. They're so good.

Cassie: [00:42:52] Yeah, I learned things.

Amelia: [00:42:54] Yeah,

Cassie: [00:42:57] me too for sure. He's a creative coding tour de force, he is.

Nate: [00:43:00] Cassie, thank you so much for being with us today. It was really delightful.

Cassie: [00:43:04] Oh, it's an absolute pleasure. It was lovely to meet both of you, and especially because I’ve been such a huge fan of

Amelia: [00:43:11] Amelia's work for a while.

Nate: [00:43:19] Thank you. Hey, you made it to the end. I hope you enjoyed this conversation.

Amelia: [00:43:22] If you have a minute, a review on iTunes would help other people find the podcast. We have a lot of great content coming up. To be notified of new episodes, hit that subscribe

Cassie: [00:43:37] button.