Kent C. Dodds: 0:00 Hi, everyone. My name is Kent C. Dodds and I'm joined...I forgot to ask you how you pronounce your last name, Josh.

Josh Comeau: 0:05 Como.

Kent: 0:06 Como, that's right. I think I've asked you that in the past, and just forgot. I was telling my wife this morning that I'm going to meet with Josh, and I'm looking at my calendar and I'm like, "Ah, I can't remember how to say his last name."

Josh: 0:18 It's French, and that's what's tricky is it ends with an e and an a and a u, so it's three vowels. It's pronounced as an o, which makes no sense, if you're not [inaudible] French.

Kent: 0:29 I don't think I'll ever forget how to say your name now. That's great. Josh and I go back several years. I think I met you on Twitter first, and then we've met at conferences and stuff.

Josh: 0:44 Yep.

Kent: 0:45 It's been a pleasure to follow you. I'd love for folks to get to know you a little bit before we talk about Whimsy. Why don't you introduce yourself to us?

Josh: 0:53 Yeah, sure. My name is Josh. I'm a software developer in Montreal, up in Canada. I've been doing web development stuff for quite a while, but working as an IC software person for about seven years.

1:05 I recently left my job at Gatsby. I was a staff software engineer, and I teach part-time at Concordia University in partnership with Journey, teaching boot camps.

Kent: 1:13 I didn't realize that you were teaching at a university? Tell me a little bit about that.

Josh: 1:18 Yeah, the cool thing about it is, it started as a local startup the same as any other boot camp. They reached out and they partnered with a local university. It's not part of a typical three or four-year bachelor's degree. It's part of the continuing education department.

1:32 Essentially, we work with them. The classes are held on their campus and the students get a diploma from the University, which helps. Even though the curriculum is really quite similar to what you'd find at any boot camp, the fact that it goes through Concordia and the fact that we have grades and we hold people to pretty high standards, yeah, it's been an interesting experience.

1:50 I've been working with them for a couple of years now. I work at the part-time program, so it's 14 hours a week for the students. What's interesting about it is that it's built in such a way like it's the evenings on Tuesday and Thursday and then most of the day, Saturday.

2:04 Most of the folks that do this are often in their 30s or 40s and often, they have families and kids and complete lives. They have a full-time job and they've realized they wanted to do this. I've also worked at the full-time one and with that -- granted this is a generalization -- you find both types of folks in both groups.

2:25 But in the full-time one, it's a lot more folks that are just out of high school, just out of college, like early 20s, looking to start their careers. It's super satisfying, I find, working with the folks who are later looking for a second career.

Kent: 2:38 Yeah, I'm sure they're...

Josh: 2:38 It's just been really amazing.

Kent: 2:40 For me, I know that I became a lot more motivated. I was married and started having kids when I was still in my last couple of years at college and I became a lot more motivated. I can imagine people with those kinds of responsibilities are likewise more motivated.

Josh: 2:57 Yeah, they take it super seriously. It's great to see.

Kent: 3:01 That's awesome. What do you teach them?

Josh: 3:07 We have five modules. The stack is just HTML, CSS, JavaScript, React, Redux and Mongo. It's end node, [inaudible] elementary node. It's a full stack thing. It goes over eight months. It's the equivalent of a 12-week boot camp in terms of the number of hours, like 12 weeks full-time turns into 8 months part-time.

Kent: 3:30 Do you teach all up and down the stack? Are there multiple people that teach different parts?

Josh: 3:35 I'm the main instructor and then we have a few technical coaches. Yeah, I work with the full-time instructor on the curriculum. I developed the React portion, but I'm using his portion for most of the others. We both make tweaks as we go.

3:51 It's been fun to cover the whole stack like that. I consider myself mainly a front end person, but I've done enough work incidentally on the back end, that so far, so good, in terms of covering it and being able to teach it.

Kent: 4:04 How fun, very cool. I'm glad to hear that. I personally feel educating other people is a really noble thing. My wife is an elementary ed graduate. She taught second grade before transitioning to being a full-time mom.

4:25 My mom was a teacher. I have several sisters and sisters-in-law who are teachers. I guess, I'm a teacher too. I really think that education is wonderful, so that's great. I didn't know that.

4:39 I wanted to talk with you -- transitioning to our main topic here -- I wanted to talk with you about Whimsy. The reason that I think of you as the Whimsy guy is, aside from the fact that your website is full of Whimsy and I'd like to talk about the different things that you've done on your website. The first talk I remember seeing of yours was about Whimsy. Was it at React Rally, or React Comp? I can't remember which.

Josh: 5:02 It would have been React Rally. I've spoken at a couple of conferences, but the two that I do most years is React Rally and ReactEurope.

Kent: 5:09 Yeah. React Rally, it's my favorite conference. I love it, yeah.

Josh: 5:14 It's been a great time, yeah. It's got to be nice for you to, because you live in Utah, right? It's like right around the corner from you.

Kent: 5:20 It's very convenient too, which is quite nice. I can sleep in my own bed. Actually, the last couple of years, I don't think I did. I think I slept at the hotel, because it is like a 45-minute drive. Anyway, I haven't missed a year of React Rally. It's a fantastic conference.

5:38 I should have watched it before having our conversation. I remember you show a bunch of really interesting demos and justify the idea of why Whimsy should be included. Maybe we could even talk about what Whimsy is.

5:56 I'd love for you to talk a little bit about why Whimsy is a useful aspect to applications and what types of applications could use Whimsy more than others, and that kind of thing. What's the fuss around Whimsy?

Josh: 6:12 Yeah, the talk was called "The Case for Whimsy," and it was my attempt to make a reasonable...Like, here's why we should spend time on this stuff. It's so easy when you're working on a project to over-estimate or under-estimate how much work it'll be, and then look to cut the scope to make it so that you can still ship something.

6:30 Immediately, the first thing that goes is all of the nice interactions, animations and moments of delight in the process. Of course, that's totally justifiable and I think that it's the right call, a bunch of the time.

6:41 But it adds so much to the experience. I can come at this from a few different angles, but the one that I lean on the most is native apps have really good experiences and feel really nice to use.

6:53 Whimsy can be a lot of things. It can be like confetti explosions, but it can also just be really thoughtful interactions and really smooth, organic animations.

7:01 The fact that when you click on something it doesn't immediately show you a white screen and then immediately show you everything else, it's smooth transitions. All of that stuff combines to an overall feel of quality.

7:11 It affects how people view the thing that they're using, especially when they have this contrast when they go on the web compared to most native apps that prioritize this stuff. The big picture thing is, it's worrying to me, a little bit, if we don't compete on that level because there's so many reasons that the web is great.

7:34 I would hate to lose that if everyone starts getting so used to native apps, they try to avoid web apps. Granted, there's so many factors that go into it, not least of which is the fact that using the web is so low friction. You can just go to a website and it's immediate, so that's a really strong selling point, too.

7:54 Yeah, the other question I wanted to get to was which types of apps benefit from this? I've actually changed my mind a little bit since I gave the conference talk.

8:03 In the conference talk, I was saying anything can benefit from it. An example I gave was for an email client, that when you compose the email that little modal that pops up, folds up and then shoots off into the inbox. It was really adorable flourish. That still may be a decent idea.

8:20 But what I've come to realize is that if you're working on a government website or something that is a serious thing, it's not always the most...It can be a little inappropriate to have really delightful experiences during really serious things.

8:39 I read this book called "Technically Wrong" by Sara Wachter-Boettcher, I have no idea how to pronounce that. She makes the case that companies use delight as this sinister way to get people to give up their privacy and ultimately take advantage of them.

8:59 I've never worked for a huge company, so I've never really had to weigh that moral dilemma. I see now that, like anything, there are ways to misuse this. I always feel the reason that you should have this is partially for what I mentioned, which is to have web apps feel professional, and be comparable to the mobile apps people are used to.

9:21 Also, because there's an emotional component, right? If you want your thing to be memorable, it helps if it sparks some kind of emotion. We see how people take advantage of negative emotions. That's why headlines are always so horrifying, because people really don't really like it, but they find themselves drawn to reading things that make them angry, or frustrated.

9:41 There's a positive version of this, which is if you can spark a bit of delight, it makes what the person is doing a little bit more memorable, especially if it's surprising. In the email example, when you click send the email, you're not expecting it to fold up. You're expecting it to disappear.

9:55 The first time you see it, it's like, "Oh, that's neat." That's helpful that it reinforces the moment that you're having, and it makes you remember that this application exists and teaches you how to use it, especially if you integrate some of this stuff into onboarding. It makes it really easy to teach people how to use the thing if you can spark these little bits of emotion that make it more memorable.

10:21 All of that to say that there is definitely a sinister version of this where you leverage the emotional reaction to do something that people would otherwise not be all right with. I want to be conscious of it. It's not always the most appropriate thing.

Kent: 10:36 I suppose that, if somebody was paying their bill online, they wouldn't want to see a giant sack of money appear and like "Later" or something. "I was going to use that for medicine."

10:49 Probably not always appropriate. Where it is appropriate, it's lovely. Your website has some awesome ones. You added sound to the Web, where I've seen some websites that have little sound effects. You have this Hook U sound that makes it easy for people to do that.

11:13 Do you want to talk about what are some situations where sound on the Web enhances the users' experience?

Josh: 11:20 I use it on my blog in a few cases. The one that I hear the most about is I have a dark-light toggle essentially switching from dark mode to light mode. The sound makes the sound of flipping a light switch, which catches people off guard because you're not used to hearing things on the Web. I think that sound on the Web has a bad rap.

11:38 It started in the '90s with people auto-playing meaty tracks in the background and...

11:44 Remember that? You go to a website, and it's start playing cheesy meaty music? I think that a lot of people have gotten scared. The other place that you see sound and you don't see this anymore because browsers don't allow it, but those little banner ads. It's like, "Hey, kill the monkey," and it's making all these obnoxious noises.

12:01 There's a lot of bad historical stuff when it comes to sound on the Web. That has made people reluctant to use it. I find it adds a lot to an experience.

12:12 We're sensory beings as humans on the planet. Mobile apps take advantage of three of our senses because you can see it, it makes sound, and it vibrates. You can feel it in your hand.

12:22 The Web typically only uses one. It only shows you stuff. It's powerful to be able to have these little sounds. I use them mostly on interactions. When you click on a button, I have these little tags that, when you mouse over them, it makes a little popping noise. I have a little dropdown that it makes a whoop sound as it opens. Stuff like that. It's relatively minor. It's not overbearing.

12:47 The other one that I found people really like is, when you subscribe to my newsletter, it makes a trumpet-blaring sound. It makes a celebratory...The sound of winning a battle in "Final Fantasy." That kind of a sound.

Kent: 12:58 Where do you get these sounds? How do you acquire an appropriate sound for these things?

Josh: 13:04 I actually went to school for audio recording technology. I have a background in audio. I recorded some of them myself, but there is a fantastic resource called Freesound.org -- all one word, no dashes or anything. You do have to sign up for an account.

13:18 It has hundreds of thousands of both free in terms of you don't pay for them but also royalty-free, which is you can use them commercially or however you want with no attribution. Most of the sounds are not good.

13:30 It's not curated at all. It's just anyone can upload anything that they want. There's a bit of sifting involved. For the horn, for example, which I definitely did not record myself, I searched for trumpet and victory. I went through probably 10, 12 pages before finding one that I thought was nice.

13:49 There is...I don't even know what they're called. Audio Jungle might be one of them. There's these page services that generally have much better sounds, but you have to pay for them. You license them, essentially.

Kent: 14:01 It's like the difference between egghead and YouTube. With egghead, you're paying for the curation and the high-quality stuff. With YouTube, it's free, but now you have to sift through everything to find something good.

Josh: 14:12 Totally.

Kent: 14:13 That's fascinating. It almost feels like your website is a game in some ways. It's an educational game where I can go be educated but also enjoy the experience through these just little...I really love the idea of you invoking an emotion in me as I'm working through at your website or wherever the Whimsy applies.

14:41 A really great example that I super-wish that I'd been recording my screen when it happened was when I got Discord Nitro. It's the page thing. You get perks and stuff. If anybody listening doesn't have Discord Nitro and has been thinking about it, make sure you record your screen as you go through that because it is so cool.

15:08 It really does feel like you're playing a game as you're going through this experience. That makes a lot of sense for Discord.

Josh: 15:16 Right.

Kent: 15:19 When properly applied, it makes the whole experience a more positive one where I'm paying money to this company so I can have things. I want to do that. By the end of it, I'm happy that I did because I had this fun experience that they offered me, which I wasn't expecting or planning on or that's not why I did it. It made the whole experience more pleasant.

15:46 I can talk with you about it in a pleasant way, too.

Josh: 15:49 It really colors how you see the product or company. It makes you feel a little bit better about the thing that you've just done. I also think that part of it is, and this can be said for sound as well, it's rare. Most things are not like that. That's an advantage for people that do want to start doing stuff like this.

16:08 If every website had sound, first of all, it'd be annoying. Also, you'd get used to it. It would just be a typical experience, whereas right now, it's something that can help you stand out.

16:20 One of the things I did, too, which almost veers into the sinister lane maybe a little bit, is on my blog I have a bunch of conditions.

16:30 If you haven't seen it before, if you scrolled a certain amount and a certain amount of time has passed, a little avatar that I have of myself pops in from the side, and asks if you want to learn more about something I'm doing. It's like a newsletter update.

16:42 I hate when you're rolling and, bam, a modal's into your face, which is like, "Join our newsletter." I did this wondering if it would actually annoy people.

16:54 So far, I've heard from about five or six people about it who were delighted by it and told me that's why they joined my newsletter. No one has complained about it. It did double my newsletter conversions.

17:04 It's pretty impactful without being annoying. Certainly, maybe it will become annoying. It's still keeping even though I've removed the AB testing code that I had for it. I may still get rid of it at some point because I imagine that it might get annoying.

17:27 When I say "sinister," my newsletter itself is very seldomly sent and I think reasonably.

17:32 I'm not doing anything sinister with their email. It's taking something that often annoys people and trying to find a way to put a nicer spin on it.

Kent: 17:46 I have a couple thoughts around this. When I release a course like Epic React most of people watching this or many other people watching this probably experienced this. As I'm gearing up for releasing, I send a just ridiculous amount of emails. Just because every single time after the sale is over, whatever, I always get many people saying, "I had no idea."

18:15 I look at the history, and I'm like, "I literally sent you a bunch of emails, and I see that you opened it, I don't understand." I just want to make sure that people don't miss out.

18:27 To make it less annoying, because first of all, there's a very clear link that says, "I don't want to get any more notifications about this," but then also I try to make each email useful in its own right.

18:41 There will be actual content that people could appreciate. Even if they aren't appreciating the sales pitch, they at least get some usefulness out of it.

18:55 There's some things that just are not pleasant for people. Some things that you want to do that. Many people will appreciate it, otherwise, you wouldn't do it, but some people won't. For that group of category of people, you can at least deaden the pain, I guess, or the frustration by giving it some other redeemable quality. Whimsy can make sense with that.

Josh: 19:20 I would say that there's like Whimsy is a sub-genre of this idea of always trying to provide value. You are trying never to just market for the sake of your own benefit. You want to have something that's good for everybody. I think one way to do that is to provide knowledge that is helpful.

19:38 In other way, ideally do both of these things, but to make it whimsical as well. That it's even if maybe the content isn't the most salient for a person at least they had a nice little moment of like, "Oh, that's nice. I wasn't expecting that."

Kent: 19:53 Potentially even something that they would share with other people and be like, "Hey, this is cool." Another thing that you said that reminded me of something was how Whimsy can package things in a nice way it gives a sense of quality.

20:09 I was having a conversation with someone the other day about Epic React and my course material is all well-designed and stuff, but I didn't do it. I'm not a designer. The person who did design everything to make the course material look nice, his name is [inaudible] . He's amazing. He does most of the design for Epic React stuff.

20:40 The analogy that I use is, let's say you have this ice cream sundae that's just super delicious, but what I was doing was I was putting that in a shoebox and giving it to you like, "Enjoy this ice cream sundae." Then he swapped out that shoebox for this beautiful glass bowl.

20:59 The taste of the ice cream is totally unchanged by its container but the container completely changes your experience. In even eating the ice cream, you will assume, or your brain will naturally think that the ice cream in the glass bowl tastes better, just because of the presentation.

Josh: 21:18 Totally. It has like a surprisingly deep impact. The presentation of something really affects your experience of it. Sarah Drasner had that blog post recently in defense of fussy websites, which she was saying -- I was very honored that my site was mentioned as one of these examples -- that when you have a site that really pays attention to the details, and adds these little flourishes, it makes people more interested in the content, even if the content is the same.

21:48 My blog posts in one way and I have an RSS feed. I'm sure some people do get this experience, although a lot of my posts don't really work in RSS, so I just wind up linking to my site if there's interactive widgets or whatever.

Kent: 22:00 Yeah, sure.

Josh: 22:01 For the ones that are just articles because I have two variants of blog posts. I do think that there's the experience of reading them is better on the site than it would be just as plain text in an email like in your RSS reader. There's a lot to be said for that and Sarah Drasner in that article, it's on CSS tricks.

22:21 I'm sure if you Google fussy websites, you'll find it, has a couple other examples of just sites that put effort into it and, hopefully, at least I believe that it has the effect of increasing how much people pay attention to it, retain the information, are interested in it, all that stuff.

Kent: 22:39 I think that it does make sense. Aside from all of that it's probably we'd like...I can't really speak from experience because I haven't worked a lot in Whimsy. I get frustrated when I try to make something look nice or animate something. I just struggle with that aspect.

22:58 I can duplicate a design but I can't come up with one very well. I can't speak from too much experience. My guess is that it's just incredibly satisfying when you've got it done, right?

Josh: 23:14 Definitely. I would say that there's two things. One is I do all my own designing. I don't really consider myself...The 3D avatar I didn't make. I did commission that.

Kent: 23:25 It looks awesome. Well done.

Josh: 23:26 I was super happy. The actual designing I find challenging, but ultimately very rewarding. There's something nice when it comes to having an idea and then being the one that sees it through ideation, all the way through to implementation where it's you've molded this idea in your head into a tangible thing that exists.

23:48 The other thing I would say is that the kinds of animations...There's really interesting sub-genres, interactions, and animations, I'm just like, from a purely technical perspective. A lot of what I wind up doing either uses canvas, which is interesting and neat, and a whole different way of thinking about how you put stuff on the screen, or SDGs, which are like an incredibly deeply interesting well of stuff.

24:11 I learned a little bit about Bézier curve, and how to manipulate curves to do stuff. I've been learning recently about filters, that there's all kinds of filters that do all kinds of things. They're absolutely wild a lot of the fancy effects that you'll see on the web use that. There's also WebGL and three.js, and all of that.

24:29 Just the most fun I have technically is often implementing these little things because they get to...You get to use math for one, which isn't something you have a ton of opportunity. One of the things on my site is the like button is personified. It has two little eyes and the eyes track your cursor as your cursor moves around it.

Kent: 24:49 That's great.

Josh: 24:50 That's fun. If you move near it and move away, it gets sad like weather [inaudible] .

Kent: 24:54 That's awesome.

Josh: 24:56 It's also the silliest thing because, on medium, the like button serves a concrete first press, which is if people it sends a signal to the algorithm to like surface this article. I'm the only author on my site the like button does nothing other than make me feel good.

25:11 No concrete value, but people seem to like it. I really enjoyed building it [inaudible] . It's not a terribly advanced mathematical thing. There is like, if your cursor is here, and your center of your heart is here, you want to shift the eyes in that direction by a little bit. You have to work out the angle, and then do the use Pythagoras to figure out the delta X and the delta Y.

25:32 There's interesting middle school, high school math in there, that's always it feel good. I use trigonometry sometimes, too. That's the stereotypical when you're in ninth grade, like, when am I ever going to use this?

25:46 I should have paid more attention because that stuff would have been...I had to relearn that stuff. When I was [inaudible] at Khan Academy and when I was between accepting the offer, and starting work, I decided to just use Khan Academy to get a sense of the product.

26:00 I relearned trigonometry, which wound up is something that I use fairly often now that it just opened this new like, "That's how I do all these things that I've thought about doing."

Kent: 26:10 Wow. That's awesome. Sounds like a lot of fun. Aside from learning trigonometry, what are some good resources for people who want to get started building Whimsy stuff, like me?

Josh: 26:22 I wish I had a better answer to this because the truth is that I've figured a lot of this out just through experimentation and on-the-moment googling. I will say that someone who also used to work at Khan Academy, Jamie Wong, has a blog post on Bézier curves.

26:38 There's also a primer to Bézier curves by someone named Pomax which those two articles together are everything you would need to know about Bézier curves and more. If ever you want to do swoops, especially if those swoops are supposed to move in some ways.

26:52 I did one thing where it was a ball, and the ball was just wiggly and jiggly like a bubble in the air. For that, knowing about curves is super useful. I guess, Jamie's whole blog, and then the Pomax article are good starts. The trouble two is that it's surprisingly vast.

27:09 There's a cool project called React Fiber, which is essentially just react bindings for three.js, which is a library you can use to do 3D stuff on the web. I used it when I built a Beat Saber editor because I wanted to make my own maps for Beat Saber.

Kent: 27:25 That's awesome.

Josh: 27:26 It was a fun project. Especially because the existing editors, they're in 3D because you have blocks in 3D space, and you can scroll through time and the blocks come towards you. Honestly, I had learned a little bit of three.js before that, and that helped but the React bindings made it not too bad, you can pretty much just get started with it.

27:48 My most recent talk was about this and it was trying to...It was ReactEurope this year, the Remote ReactEurope, I spoke about the experience building that Beat Saber editor, but it also serves as an intro to React-Three-Fiber and three.js.

28:02 I'd say that's a pretty good resource if you're interested in doing anything 3D. I think there's a lot of interesting and unexplored territory.

28:09 Using 3D elements more commonly, for example, what if you had form inputs, and the inputs were like 3D blocks, and as you scrolled, they would pan through in the way the 3D objects do. Granted accessibility on that would be a little tricky and definitely something not to neglect but you could even just use a regular input that's just transparent and sitting in front of it.

28:29 You wouldn't have to redefine an input. It'd be cool if there was intro to Whimsy, like Whimsy 101 but the truth is that there's all kinds of different directions, you can take it that are pretty mutually exclusive, whether you want to do something with SVG, or canvas, the tool chain and the go-to APIs that you would use a totally different...The use cases themselves are slightly different.

28:51 I will just say, because this is something that I wish I had known a long time ago, there's this debate of like SVG versus canvas. I only reach for canvas if I need more than 15 things to move at a time because canvas doesn't...

29:06 SVG elements are DOM elements. If you try moving a bunch of DOM elements, there's just like a bottleneck there. Whereas canvas, it's just pixels, so you can move as many things as you want. That's what I would say if anyone's debating SVG versus canvas depends on how many things you want to move.

Kent: 29:19 That makes a lot of sense. Well, that's awesome. Is there anything else that I didn't ask you about, or we didn't talk about that you wanted to mention about Whimsy, React, and anything?

Josh: 29:31 I don't think so. The one thing I would say is I think that Whimsy in my mind is three pieces. It's the unexpected delight, which I guess is the fundamental thing. Then the way that you do that is through animations and/or interaction. You can have an interaction that doesn't technically animate, and you can have an animation that just runs when the page loads.

29:58 Interactions are, the more interactive you can make something the more valuable it is. This is like a core belief of mine. A long time ago, I made an intro to waveforms, which was just essentially like, sound theory 101. How sound moves through the air, I was able to use...I gave the person a graph of what the sound wave looked like.

30:17 Also, there was a couple other visualizations and sliders, and then you drag the slider...It allows you to play with the idea and get comfortable at an intuitive level with the mental model of...because it's one thing to read a bunch of words and to say, "OK, that makes sense. I understand all of these words and have a vague sense of how they all fit together," it's another thing to be like, "Ah, so this parameter affects that parameter. I can see that visually when I drag this slider."

30:44 It's a weird timing thing because, when this video is being viewed, it will be in the past, but it's currently in the future.

30:52 There's MVX Conf in late August, which has a bunch of talkers about MVX. MVX, which is just mark down with JavaScript with JSX built in, is a great tool for doing this kind of stuff. I would highly recommend it. If folks have blogs, look at MVX. Consider using it to make interactive little widgets because it really helps.

31:10 You can teach something so much more effectively when people are able to play with that. It could just be interactive code snippets. It doesn't have to be wildly things that are created entirely from scratch. Just being able to give someone something they can play with is super valuable I think.

Kent: 31:27 MVX is a great recommendation there, too, because it really enhances the experience of the blog. There are just some things that you can't explain with words. You need different dialects for teaching some of these things.

31:42 We talked about this. I was wondering. In situations where some Whimsy is appropriate, how do you know if you're going to too far? Giving people motion sickness, how do you avoid those...

Josh: 32:02 Oh, we should totally talk about the accessibility side of this. The first thing is, the moment that you are moving something, you should give people a way to opt out of that movement because there are people who get dizzy or nauseous or just malaise as the general bucket term.

32:19 The vestibular system, which has to do with how your brain regulates balance with the inner ear, can get thrown off especially parallax and things that are drastic movements.

32:30 There's a way to do this on the Web. You can use a media query called prefers reduced motion. It hooks into an operating-system level setting. In Mac OS, you can go into your accessibility settings and tick a box. By default, it just changes a bunch of operating-system animations. Web browsers are able to hook into this.

32:45 You can essentially just only specify that you want animations to run for folks that haven't ticked that box. You can also set it up so that, if people are using an older browser or an operating system that doesn't have that setting, the animations are disabled by default. I have a blog post on about this on my blog.

33:01 Maybe we can link to that, or you can just put it in my blog and search for accessible animations.

33:05 What else was I going to say about this? In terms of whether it's appropriate or not, it is true that, once you start developing these skills, it is very tempting to use them everywhere. One thing that I think is super valuable that almost nobody does.

33:22 The first thing is that it's generally seen as a bad practice if someone is sitting and waiting for an animation. If you close a modal and it takes a second where the modal's just slowly fading away, especially if it's something that someone has to do often, you don't want to add any duration to their workload. The animation ideally should happen at the same speed as whatever they're doing.

33:46 That's one thing. The other thing is that sometimes that's just not possible. In my example of my email client, you click send. The modal folds itself up and shoots off. That whole thing takes maybe a second and a half. I don't want that to happen in 300 milliseconds because it would be indiscernible.

34:00 The way that I solved for that was I just kept a counter in local storage, or you could do it in user settings, which is "How many times have they seen this animation?" After they've seen it two or three times, you get rid of it. It serves its purpose, which is to surprise someone. Then it goes away. You don't want to add friction to someone's workload.

34:18 If they only see it once or twice, it's not going to be disruptive really. It's only annoying when I have this flow that I do 10 times a day, and 10 times a day I'm sitting and waiting for the stupid folding thing to finish.

34:29 That's one thing. You can opt people out of this, which is just track how many times they've seen it. Then have that in your animation, which is just shorten the duration to zero, render a different component, or however you want to do it.

34:41 In terms of how much is too much and also just in terms of animation design, it's a whole thing. Motion designers...There's people who do that as their job.

34:53 It's hard to say. It is a whole separate skill set. I've just gotten there through a lot of trial and error. My general rule of thumb is go through whatever flow that you're working on. Maybe the best way is just to ask other people because, after a certain amount of time, you're too close to it. You can't see what it would be like for someone that hasn't had that experience building it.

35:15 Just see how people react to it. See if it's generally something that people enjoy. You can also set it up as an AB test where, granted, there isn't a one-to-one mapping of I enjoy this thing to I use the product. I did that with my newsletter thing.

35:32 If I had seen that a bunch of people were just not interacting with it or, worse, just bailing out of my site, just leaving in disgust, then I would have taken that as a signal to be like, "This maybe isn't the best idea."

35:44 I want to also just say that it's generally true that animation should be twice as fast as you think they should be. If it feels good to you with 800 milliseconds, make it 400 milliseconds.

35:56 Just tighten it up a lot because as a general range, a 250-millisecond animation is fast. A 350-millisecond is average. 500-millisecond is pretty slow. That's not long, right? Half a second is not a long time. It winds up being pretty sluggish when it comes to animations. Of course, these are rough guidelines.

36:18 If you have a really big thing animating, it makes sense that it would go a little bit slower. If you have a really small thing, it should go a little bit faster. I would say that in summary, focus on doing small things quickly, and test with real people.

Kent: 36:34 That's a great summary. Very good. Cool.

36:37 Josh, thanks so much for giving me some of your time and chatting with me about this. I really want to get into this. Maybe one of these days I'll add some whimsical instruction to Epic React. We'll see. I can envision a couple of things. I just got to learn it first.

36:59 Thank you so much for all that you do for the community. Your site is like an upstanding example of some of the things that we don't typically do that we could do to make our own experiences all that much better. Thank you for that.

Josh: 37:20 Oh, I appreciate it. It's my pleasure. It was great chatting.

Kent: 37:23 See everybody later.

Josh: 37:24 Bye.