 You have to do a lot of height adjustments when you're my size. So all right. I'm Sarah Drasner. I'm here to talk about creativity and programming for fun and profit. One of the really awesome things about being on this stage is that about a year ago, I was on the stage before. And I hadn't had a lot of experience speaking. Now I speak a ton. And it's because CSSConf really gave me a shot at it. And now I'm here giving a keynote. So I just wanted to thank CSSConf and Boku for allowing me to be up here again. Thanks. So creativity in programming is kind of like a huge topic, right? And there's no way to talk about all of it in 30 minutes. So I'm going to just talk about some of the key points that really make a difference for me and why it's even worth discussing. I think creativity tends to be something that we push off to the side as being not that important and maybe secondary to a lot of other processes. But I'm going to talk a lot about today about how it's kind of core to all processes. And like I said, my name is Sarah Drasner. I take being up here very seriously. And this is me as a child as well as my relationship to authority. I am a web technologies consultant. So I get hired by companies to come and help out with some of their tech stack, including SVG animations and component libraries. So let's dive right in. What does it mean to be creative? Why are we talking about this? Programming is not something that you think about and think, like, oh, creativity. But programming is, in essence, a creative act. This is a very normal kind of interview question, fizzbuzz, like how do you write out fizzbuzz? And here are two possible scenarios. So these are two functionally equivalent solutions to fizzbuzz. And they look completely different. Every time you're giving instructions to a computer, you're really communicating with other people, right? The compiler sees it a completely different way than the way that you type it. And Kyle Simpson talks a lot in his talks about how we spend 70% of our time maintaining code and only 30% of it writing. So this kind of the way that we write things and the way that we're communicating with each other is in an act of creativity. It is the way that we're expressing ourselves. So the one on the bottom, which is only 58 characters, was like a creative endeavor for someone. That's not something that you're gonna probably put in a code base, like the one on the top, that you can actually read and communicate with other humans more easily with. So it's important to your business. When we're talking about creative forces and questioning things and why we're even engaging in this, it might seem like that's secondary to business efforts, but Hewlett Packard puts a good amount of money into R&D. In 1999, they put $2 billion into R&D and saw profits of $42.37 billion. So that's a pretty huge return on investment. Frito Lay had a cost savings of almost $600 million due to creativity programs. And CEOs, when interviewed, say that creativity across the board is the number one thing they look for in potential candidates, over being hardworking, over being loyal. And that was a survey across 33 different industries in 60 different countries. So it's also important for you, and let's go into why that's important for you. A lot of you have probably heard of the phenomenon called flow. Flow is when you have complete immersion in your tasks. And what I mean by that is you kind of lose track of time, you're engaged totally fully in that activity. You maybe forget to go to the bathroom, forget to eat. You have to have somebody tell you like put the computer down now. And it shares traits with hyper-focus. And people kind of get these two things mixed up a little bit because when you're really trained on finding the solution to something, you can be in hyper-focus. But usually it's not the same thing, like you will notice if you're hungry, you will notice if you're stressed if you're in hyper-focus. So when you're like pushing out code for a deadline at your work, you're oftentimes in hyper-focus, not in flow. And creative programming tends to put you in a flow state. So you have this like loss of self-reflective consciousness and your experience of time is kind of altered. What ends up happening is people who experience flow talk about this being some of the happiest points in their entire life. So when we're talking about burnout at a company, if you're continually programming in order to get something pushed out and continually programming to like get something done and you're stressed when you're programming, you have this association with programming and this stress. So it's actually like a way that you can fight burnout. Burnout is fought a lot of times by resting, but it's not the only way that you can fight burnout. The way that your brain works is that our neural pathways get set. Once you have like these joint synapses of they're firing at the same time of like programming and stress and programming and stress, you kind of lock those two things together. If you start to do creative activities, you start to refocus those neural pathways. You start to join them. You actually increase plasticity in your brain and you can start to tie that creative and happiness and fun along to programming in a way that you didn't before. If you've ever done like a side project that works really well, sometimes I used to like do like really drudgy things at work and then I'd work on something that was a side project in my spare time and I'd come to work rejuvenated. I'd come to work feeling happy and excited and that's contagious. That actually like kind of ekes into all of your programming processes. So flow plus this varied thinking can actually reduce stress and cause happiness while you're programming other tasks. So I made this kind of like little silly demo to show like if this is your understanding of things and these are all of the things out there that you can learn, every time you're pulling something into that sphere it's actually growing your understanding but if you try to learn too much at once it's not really gonna work, right? Like you're just gonna kind of glaze over it. You have to really focus on that activity and bring it into that sphere. So we talked a lot about the why's. Now let's get into the house. I'm gonna just talk about my house. I'm not gonna go through every way that you can go through creative programming. There's tons and tons of ways but we're gonna break down as many as possible in this short amount of time. So one big thing is questioning the base premises. Another is to impose artificial bounds. Another one is repurposing. Another is combining. And the last one is using open source as a tool. So let's start with questioning the base premises because that's a really, really big one. So when we're thinking linearly, when we're thinking just like A equals B we'll think of something like we reduce costs by spending less money, right? So if you're thinking laterally, you might say like, okay, what if that's not true? What if we spend more money? Why don't we spend more money but on fewer vendors? We'll reduce the number of vendors and then we'll place larger orders on some vendors and get bigger price breaks. So this actually happened, the source here if you wanna read more is Igniting Innovation. And more than a million dollars worth of savings happened at a company based on this one hour creativity session. So this has happened in programming as well. So you've got stuff like the EMRT, like the Ethernet. Before Ethernet, which is a series of computer networks, there were token ring networks. And you can think of token ring networks, they're kind of like planned or coordinated systems where it's a little bit similar to a talking stick when you're in kindergarten where one person gets a talking stick at a time and the kid holds it and talks and then passes it on. And it's kind of coordinated and organized. What Ethernet did was question the base premises of that, like wait, what if we don't wait? What if we just do a completely different system, an emergent system? And that's a little bit more like a discussion where computers can all say stuff at the same time but if they see that somebody else is talking they kind of back off. And this system is way more chaotic but it ended up being surprisingly more efficient. So React questioned a lot of base premises, right? That like whether you like it or not, like this was tons of weird best practices thrown out the windows. What if we write inline JavaScript right in the component? What if we don't use the DOM? What if we use a completely different virtual DOM so we can do diffing? What if we create a syntax that replaces the use for HTML? These are base premises that were thrown out the window. SAS did this as well. There was a lot of, you know, we don't have X in CSS, CSS needed a hero. So we said, what if we had variables? What if we have for loops? What if we have mixins that are like functions and we can dry out our code? This shaped our specs. We didn't wait for variables to come in CSS and they're here now and Leah's gonna talk about them later today with a really, really great talk. But this like questioning the base premises and taking action actually pushed our web forward. So the second thing that we can do is impose artificial bounds. Sometimes like when you look at a blank page or a blank state, if I was just saying to you, okay, you now know why creativity is important. Go make a creative program. That's kind of okay. Where am I gonna start? By imposing artificial bounds, you actually have some rules to follow and some ways to be creative. A lot of times like when you have like an assignment for something, you find that your brain is like actively thinking up, you know, new ways of working with something. So I just wrote an article called The Nerds Guide to Color on the Web and I talked a lot about HSLA in it. There's RGB protocols and hexadecimal. So all of these other ways of working with color on the web were really meant so that the computer knows what color you're using. But HSLA is special because it was really built so that humans could understand what color we're using. So what it did is it used a Montsell way of thinking about color. So H, the hue, is rotating. It's a complete circle. So as I'm scrolling this list, it's just gonna go around in a circle. Whereas saturation goes from zero to 100%. Lightness goes from zero to 100%. And the opacity value goes from zero to one. But similarly, like zero to 100% pretty much. So through that, I can do stuff in SAS that write color functions and mixins and all sorts of really fun things. So this was done with this color function here. Also because it's a full circle, I can hope that my demo loads on my local host server. Come on, you can do it. What you're not seeing right here is a full circle of color. So what's really nice about that is that there's no errors. Even if I pass in 480 degrees, I'll still have a color. There's no top or bottom. So another thing we can do with that is kind of impose bounds. So I made this city construction site. Get it? Like it's a website and it's bad dad joke. I'm on a comedy stage, I got it. And so I can hit this button and I can change the hues and saturation values. And this one's slightly different than the other one and not exactly the same, but they're relative color mixing. So they're gonna play off of each other. And I can get weird colors and set it back to normal and play with perspective and do other weird stuff because it's fun. So and that's really simple. I'm using green sock here as in my animation and they allow for that kind of relative color mixing. I'm just caching this HSL, doing it relative to the color it's already at. So another way that we can kind of impose bounds is right artificial physics. This is probably a way, if you've ever made any kind of canvas demos or anything like that, this will be very familiar to you. So one thing is if you're programming in the computer and you've got a thing that's got mass and weight in physics, it's not gonna actually have mass and weight in physics unless you tell the computer to give it some. So luckily for us, there are books that tell us those physics equations if you don't wanna go learn physics from scratch. So you can actually just use those physics equations to update things and create things like a particle fountain. This particle fountain is done with just request animation frame in SVG. I'm just telling it to update its values based on these parameters and now all of these little circles are falling. Rachel Smith has a really great article called Hack Physics in JavaScript. She explains it really, really well in more finite detail than I will. There's also a book called The Nature of Code by Daniel Schiffman, that's really excellent. And I have a repo called JSStrawl where I kind of do master's copies of things. Like I copy other people's work and rewrite it in request animation frame in SVG just like really bare bones. And so Rachel Smith also did this demo which is also the answer to every software question that you can ask. And really what she's doing with these stars is she's updating their placement and position based on these parameters that she's changing. She's not using gravity in this case. She's updating them based on a different set of rules. She's not programming every single particle that's running in a for loop. So we can also use recursion. Recursion is a really, really simple and awesome way to make things like trees and things like that fractal trees. So one way of working with recursion is you check a boundary first and then you call itself again, basically. And the reason why we check that boundary is so that we don't run an infinite loop. So we check a boundary and maybe change it a little bit so we can make things like this tree. Oh, internet. Okay, the internet has forsaken me but there is a fractal tree that will come up here and it won't work. And, but fear not, because there's a better demo than the one I was gonna show you by a guy named Gregor Adams who's writing a book, I believe, on fractals. So you can kind of do, let me see if that helps the screen out a little bit. So you can like change the vertices here and you can move them around and change their shape. And it's very easy to write to make like completely different generative code. Change it to rainbow, all sorts of stuff. And this is open source on CodePen. Or we can, we don't have to make fractals just do like go from one place to another. We can actually make really organic things and change the color systematically like we just talked about with the HSLA. And this is by Survival. So repurposing. This is one of my favorite ways of working with creative technologies by taking things that you already know. You guys are all really smart and you have tons of, you know, technical knowledge under your belt already. You don't need to learn any new types of programming. So if I'm gonna open this up. I made a game out of React and SVG and basically like it's about this hipster elephant that's trying to get tacos and his friends keep texting him because they wanna change plans and that really sucks. So like if you get that like makes your power go down and this is based on real life events. Margaritas. And so you can see this like heart meter is going up and down so you can win and lose and things like that. So I just made this with regular web technologies. I made this with SVG, with React, with Request Animation Frame and Greensock and CSS. That's all I used. And you know, I didn't even have to use this tech stack. I could have done it with jQuery. I could have done it with PNGs. These are just the things that I like to work with. So you already know a lot of things that can help you with this. So I'm gonna talk about one of the like little implementation details to just talk about how we can use SVG. As Claudina mentioned before, I really love SVGs because you're drawing with math. So here is a component that's a very simple that div that's surrounding this SVG that's a heart meter. And it's got this with this.props.score. I'm passing down a number for the score and I'm not gonna show you all of that logic right now because what's really important here is seeing please load, please. There's a React demo here. So imagine I have an SVG with a rect that has an X and a Y coordinate and then a width and a height and that's all that's an erect. Those are the four attributes that are an erect. I can just change, here we go. I can just change the width of it. Do your things. And it will update. That width will get bigger or smaller and update. So I can actually make, and because SVGs are scalable, I can make the heart meter as big as I want to. I can make it a thousand pixels big and then shrink it down to any size that I need it for for its placement in the body and then update the score dynamically. So I'm using request animation frame to check those boundaries. So one thing that we have natively in JavaScript is get bounding client rect, which is really awesome. So get bounding client rect will return the X, Y coordinates and also the width and the height. So using that, I can check and see if they hit each other. And when they hit each other, I can call another function that does like an animation and plays noise and does all sorts of things. So it's actually like pretty simple to use request animation frame and some native JavaScript to check where things are and whether they're hitting each other. And then request animation frame calls itself again because it's similar to recursion, which we learned about earlier. And in this GSAP animation, we've got like this is what makes the tacos go across the screen. We've got this fly by function and then when it's complete, it calls itself again recursive and passes in those parameters. So there's actually like a history of generative art music before there are even computers. This stuff is really cool. Mozart made a musical dice game based off of chords and like a bunch of things that he knew already about color theory. So you could play the dice and mix and match pieces of Mozart's music and it would generate new musical scores. John Cage also in the 60s made ambient, this project called ambient noises where he'd do a similar kind of thing but because he's using ambient noises from outside and stuff, no two were the same. Max Ernst also was a painter. He did this thing called automatism. So you might be familiar with these kind of spirographs. He invented this and it kind of calls paint or chalk across the board and it's generative. So then he would make these like beautiful abstract pieces before abstract art was really around. And Solowit in the 70s did these wall drawings where he would basically send a museum a bunch of instructions and then have them do it. I mean, he wouldn't like explicitly say what they were supposed to do and it would generate these drawings. So that's, he's actually programming with the museum staff. So you know, thinking about this, I wanted to again play with SVG and sound. So if I'm hitting these keys, each of these keys do different, call different animations, call different sounds. And I'm using that again, that HSLA. So if I keep hitting some of these, I can make it very dark and like a completely different way. Oh, and I really like this pops. So, you know, that's like a really playful way of working with stuff that I already know. And really in it, I'm just setting the coordinates of the rects and the CY. And then I'm telling it what to do when it pops. And then I'm calling a set time out to bring it back to its original size. I also wanted to show a keyboard on mobile. The keyboard on mobile wasn't so great. So I just put my palette in as the keyboard on mobile and exposed that so that people could play with it that way. So other people are doing really, really cool stuff with this. This is by Jake Albaugh. He's a musical chord generator. And you can change these keys. Pretty awesome. So you can, I played with this for way longer than I'd like to admit to people. So that's really, really cool. You should check out his work on Code Pen. And Josh Ellis made this drum kit with just some SVGs and animation and sounds. Pretty neat as well. So you already know a lot of technologies that can probably help you make a ton of cool stuff. Another thing that is really important is combining things. So sometimes two things out there exist that are really great, but they're not great. They're not perfect yet together. You can combine things that are already around. So when we're talking about flow and how important it is for you, it's also really important for your users. Kathy Sierra has this great talk called Badass Making Users Awesome and talks about trying to get people closer to that flow state. Maybe not perfectly, but just like so that your users feel like they're engaging in a task really well. So she talks about mapping and cognitive leaks. This is a kind of common one. You have a burner and you have all of these controls for the burner and it's like, which one goes where? I don't know. So just by changing the order of this, you completely reduce the amount of cognitive leaks. It's not that much harder to configure and I definitely know that this one goes to this one. So I was just on a trip to Barcelona. So imagine you're on a trip and you're exploring a city and you wanna find out what you're gonna do. You wanna build out a day of activities in that city. And I love Lonely Planet has such good content. They always write really, really amazing reports and have great reviews and tons of great things to tell you. They point you to great sites if you're not familiar with it. But if you go here and then you go to Barcelona and then you go to the sites and then I go to Sagrada Familia, I have like three options. They show me Sagrada Familia and they show me a pub and they show me like a church nearby. But maybe I don't wanna go to one of those or I wanna eat or something. I mean, that doesn't really give me much option. I gotta go then go to Google Maps and look it up and do a whole nother thing. Or I could go back to sites and see if one is nearby and try to compare the two maps. That's not great. And then I can go over to Food and Drink section, which looks totally different and down way at the bottom, they have this Explorer Map section, which I was like, okay, great, Explorer Map. And it brings up these sites, which you can then see, but you can only look at the site and you can't look at other things in that area. So not too great for planning my day. Google Maps does something that's great and also great, but not exactly on the mark either. So, Las Sagrada Familia, if I already know the site I want, I can go look it up, that's great. But then if I do Restaurants Nearby, like I have this map of all the Restaurants Nearby, great. I can send that to my phone or something like that if I find one. But if I wanna find a bar for later, I have to go out of that and I lose all of the food and I'm not sure if they're near each other and I'm not sure where Las Sagrada Familia is anymore. And I can send it to my phone, but I gotta send each one to my phone. And their content is not great. So these are the reviews on Google Maps. A Google user five years ago, five stars. Cool. So let's empower the user by combining a couple of these things. So in this demo, I kind of was just doing a prototype of what I wished that I had. Come on, demos. Oh, the font is, okay, there we go. So we can search through these Las Sagrada Familia, we can pick the different foods and we can kind of read through them and then we can send it to our phone and create an entire itinerary for our trip. I'm gonna do that one more time because we kind of like are really small here. So we search for Las Sagrada Familia, we pick sites, we find all the sites in the area, we can look through a bunch of them, we can read more, we can decide if we wanna choose the destination, then we can look for food in the area and kind of pick a bunch and choose between choosing the destination or choose and send itinerary. So it works a lot better for the user, it's like that is actually what I would have wanted and those steps are a lot easier to manage. So the last thing is to make use of open source for tooling. I made this demo that's like A-frame and React, oh, that's the repo. So this is just spinning up a bunch of VR objects that I can look at with a camera and what's really cool about this is it's a fairly small amount of code because I'm basically resting on the shoulders of giants around me. A-frame is this awesome tool by Mozilla where they have these small kind of like spheres and boxes and things that you can overlay and they're just HTML elements that you can plug into really, really easy to work with and super awesome and then I'm, there's another tool called A-frame React where I can then use ES6 to like make a ton of different things. Here are some of the like functions I'm calling where I can spin up a bunch of these objects. So that's really, really great. Even this first demo about your understanding is not the first time I've seen something like this. So I'm pulling this in. This is a pen by Tiffany Rayside who's really, really awesome and very active on CodePen and she made this gooey object where you're kind of pulling it back and forth together. So I saw her demo and I was inspired but she saw this demo, which strangely works and this is on another site. So you can change the viscosity and the color here. And they were inspired by this demo by Lucas Bever on CodePen as well and the amazing thing is even though they all kind of visually look similar they're all built with completely different technologies. Some of them were made with SVG filters. Some of them were made with canvas. Some of them were made with draggable. They're all really, really different. None of them were forked from one another. And I actually took that gooey idea and created a candle out of it so it doesn't have to look visually similar either. Like the idea that SVG doesn't have to just be these straight lines that we can actually take filters and like animate those as well. So actually you can't animate a standard deviation in a filter in native CSS but you can do it with something like green soccer request animation frame. And so I'm just tweening that attribute here. So social coding sites I think are really, really awesome. I think they definitely help you learn and help you stay inspired. I made a CodePen propaganda poster because in Soviet Boston, the CodePen is loaded with you and I don't work for them. I just am a nerd and I like making things like this. And just to recap, creativity, some base premises, question the base premises, impose artificial bounds, repurpose other things that you already know, combine things that are already out there and use open sources tools. You don't have to start from scratch. The impact that happened that this kind of creative work has on your life is to make you feel happier and more engaged and productive in all sorts of different environments. And by doing so, you actually become a more pleasant human being to be around when you are at work, when things do get stressful and your coworkers will thank you. I'm giving some web animation workshops with Valhead. We're really excited. We're coming to Boston and Austin first, not Boston, New York and Austin first. I'm also writing an O'Reilly book called SVG Animation. This is not the cover of the O'Reilly book. This is my friend trolling me. I don't have the man blob animal. That's not even how you spell my last name. I do, however, have a fancy chicken. And this book is available for pre-order and it's also coming out at the end of the year. Thank you for having me. Finding your flow and combining all these things. Can you talk a bit about how you got yourself into this and how you just started creating? Sure, I mean, actually, it's on, but I can yell. I actually have a kind of dual background in both tech and also art. So I was a college art professor for many years. And I've also been debbing for the web since 2000. So I think for me it comes kind of naturally to think about both and I enjoy thinking about both. But I do think that most of the time at work I'm kind of in the like, I've managed giant component libraries where it's very just like thinking, using like technical ideas constantly all day and definitely creative, but parts of me were really, really rejuvenated by some of these projects that I did on the side. That was like the thing that got me excited about programming in times when I started to feel a little bit burnt out. Even when a vacation didn't kind of help with that. So yeah. Yeah, I was noticing on your site that you were talking about how those things that got you excited, that's the passion to pursue. And that's one of the things that led you to leave truly. And now you're basically doing what you love and to be passionate. Yeah. I'm doing a lot of web consultant work and stuff. Yeah, I basically like get to go around and talk to people like you at conferences like this. So that's awesome. Awesome. One last question. You talked about Green Sock. So for those folks that don't know it, can you give a little bit of background? Oh, sure, sure. Green Sock is an animation API. I think it's a really, really good one. It allows for a lot of cross browser stability. So if you're working in a production level site, it's really, really great. And they have a ton of plugins and things like that. I think it's a really, I also did benchmarks for a bunch of different SVG animation technologies a couple years back. And that's a couple years ago. So you should be running your own because the web moves a lot. But I found that it was a really, really performant as well. So that was a big part of the reason why I use Green Sock for a lot of projects. Great. All right. Thank you so much. Can we have another huge round of applause for Kara? Thank you. Thank you.