Ahead of the Bezier Curve

Whoa, welcome to Thunder Nerds. I'm Brian Anton, I'm Janelle Pizarra and I'm Fredrick Philipp von Vise, and thank you for consuming the Thunder Nerds. A conversation with people, geez, what they do and do. Tekken, Ah, don't Tech. Hey guys, we have a very special show today, we got some cool guests that I'm super excited to talk to. And before we do, we just want to go ahead and ask you. If you can, please subscribe to our YouTube channel, which we just reached a two hundred subscribers. So thank you so much everybody out there. And and if you can, go to iTunes and make it rain a few stars for us, right? As a review, we'd really and sincerely appreciate it. And just to say, today we have a sponsor, we have Pantheon, so thank you Pantheon for sponsoring our show. If you don't know Pantheon, I could personally vouch for Pantheon because I've been using it for, I think, two years.

I was looking for a Drupal solution for my website, house maintain. Make all the updates so I didn't have to update this every two months. When there was something new coming out. And I wanted something that was just quick and easy to use, and something that was Geht based? More importantly, and it's nice because it has a dev environment, a test environment, a live environment. So I could do all my stuff, I could push things around, I could easily add team members, and I could test stuff on my tests. I could pull my live database in, I could pull all my files in and see, make sure everything's working and then push it to live and have a safe environment to test in and get everything going. So it's it's a great solution, if you could just give it a look. It has fast page speeds, it's it's war WordPress, it's for a Drupal seven and eight. They have this super fast global CDN with 40 global pops, and they have free HTTP, which is nice.

So go to Pantheon, give him a look of him. A tribe would appreciate it, so thank you, Pantheon. And before we get to our guests, the last thing we do now is we're. We're going to start reading our every our reviews. And I believe that, you know, you're gonna take. It away. Yeah, this is a buy. Yeah, boy, Carl, right, this is pretty great. These guys are great. I know. Alright Carl, thanks. These guys are amazing. Super fun to listen to you and top with the energy is pure, upbeat and super lively. I especially love how they dive deep into talking with people currently in the industry and give viewers a way to interact and learn about information they normally wouldn't get anywhere else. Thanks man, oh my gosh, oh my gosh, Carl. If you want us to read your review live on the show, please go ahead and go to Thunder Nerds.

Calm, excuse me, Thunder Nerds to I/o last review and give us a review. We would really appreciate that. Now, without any further ado, we'll go ahead and get to our guests. And this is a long list of super or technical things. Let me read this correctly. Youuuu. We have front-end developer, tech author, international speaker, open source contributor, co-host of the key Framers. We're gonna get to that because that's pretty awesome. And pianist David course, she'd welcome to the show. David, welcome David. Hey, thanks for having me honored to have you on the show and I have you back on the show. Man, we talked to you back in. I think it was November of 2017 at Dev Fest, Florida. Yes, yeah, yeah, you're our first guest, and I think we had you on for about 20 minutes. Do you juggle, David, kid? Is there any like juggle? He writes? He ops, he speaks?

He? Yeah, yeah, there's nothing David doesn't do except juggle. That's the one I can't sing either, and I sleep sometimes, you know, like a healthy amount, you know, the two times of seventies, but you can't. Thinking you were a musician, I thought that kind of goes together with what, being a musician, what do you think? Yeah, absolutely like you could. You could definitely like, hear like keys or earned tones in your head, right? Like you could, like, it's you playing a, you could hear the a right? Yeah, yeah. That's typically what happens when you press down the key in the period. That's right, but you have to have like, hip, oh yeah, perfect pitch. Yes, I do. And I thought that everyone had it for a while, until people were just. Like, playing round up some fee on sing what note is this? And I'm like, Oh, that's an A, and it has to do that.

Exactly. Yeah, you should be able to do a little bit of lalalalala. No dancing perfect, it doesn't mean perfect voice, please, way to make and feel bad about it. Love to go into your story. What you told us that best part about how you were a going to school for music, you were gonna be a pianist professionally. And then you, by circumstance, you needed to build a website for your to market yourself. And that's kind of how you got into the whole web design thing. Because you some reason you didn't like iWeb, which was all the craze. Do you mind just telling our audience a little bit about that? I'm surprised to have, once you remember that, but yeah, so I always had an interest with computers. My dad is in a technical field as well, and so that's where I got my intro to computers.

I started playing around with basic and then visual basic and just learning some fun things. I was orbited, so I just liked playing around with just programming languages and sing. Like, you know, just making prime number generators. The things that they ask any front-end interview, you know, just had. How do you determine if a number's prime stuff like that? But I also really liked piano, and I've been playing piano for about over 20 years now, maybe 22 years. And so, yeah, I was going to school for music. We had this intro to music technology class, and our final exam was. We had to make a website marketing ourselves as a musician. And so we had to use this program called iWeb, which was drag-and-drop. And I didn't have a Mac, I had a PC. And I didn't want to walk all the way to the lab because it's like a mile and or I could take the shuttle anyway.

I was just a really lazy student, so I decided, you know what, I want to learn how to do this in the comfort of my own home, so I just studied up. I went to W3 schools, which I am NOT for money member, not the best resource to not go to them. It's like on the. Inside advertisement. But the end game web Doc's are so much better. But anyway, that's why I originally learned HTML, CSS and a little bit of JavaScript from. And so I. I worked hard, made the site and just because it looks so different and I spent so much time on it. My professor said you need to be doing this as a career, and so that's when I started looking into it. Don the internship doing Wordplay, Wordpress templates, and then worked at the college of Sciences at UCF University of Central Florida for about a year and a half. Doing sort of the same thing, that's what that's where you went to school to write, you graduated in, like 12 or something.

Yeah, yeah, yeah, so really convenient. So what's your plan actually? Gonna be? A musician like, what, what did that look like? What is your? What is your projected future look like to you before that? Yeah, yeah, just a musician playing for churches or concerts or something like that. And it's teaching piano, which I actually did for about five years while I was in college. What piano do you play? What's here? What choice, like, what do you have at home? So I have a Yamaha piano, and it's actually a grand piano that I got, adding steel. I was really excited to get it because, you know, I didn't ever think I'd get a grand piano, but I had that. It also very much limits my options for moving anywhere, which is why I'm very much set in Orlando. Because the pianos are heavy. Can't really just put her on. No, can't do that. Summer goes out, you have the piano, yeah, everything else is gone, you have your piano, your analog, your good mm-hmm.

And that's why I did the last big hurricane that came through, I just practiced piano. Yeah, and if I was just a coder, I would be just writing code on a piece of paper, which is no fun. You know, it was a lot more fun than that on paper. It doesn't have to show any results. It's weird, it's hard to build it, too hard to deal. You can compile it unless you actually poke holes in the paper, which is what they used to do. Yeah, I use sass with chalk. Nightmares, let's talk. About a similar code pen, Stefa you've got literally some of the most famous code pens like out there, one of the big ones that, I mean, at least I notice. I'm sure a lot of other people in the past two years have noticed it, as well as Alex, the CSS. Husky yeah, you've got the house that like, moves, so like. Talk about how you started getting into code pen and what your favorite pens are.

So it's sort of a while ago where I was just trying to create a small interaction that I saw on an old Android device. Where you tapped the address bar at the Chrome mobile application. And to sort of expand it. And I wanted to see if I can make that using only CSS, and so I did. And, you know, I closed his own code pen and it got all of 10 views or something like that it was. But I, I decide, you know, just for my own enjoyment, I just want to keep trying to make these things. So I went on dribble. I looked for interactions and I thought, I bet I could do this with only CSS, and so I just tried to make these CSS only things. And so at the time, I wasn't that good at JavaScript, I just came from a PHP environment and I was doing a lot of CSS.

And so I discovered that some of these pens were actually getting really popular and shared around a lot. And so I decided to just push the idea further and for until one day one, my coworker said one of my previous jobs challenged me to make this animated dog that someone made, she said, do this in CSS. And I was like, Okay. So I, you know, stayed up pretty late in the hotel rooms at night working on it. And I showed her and she was like, all right, this is cool, I'm sharing it and she shared it. And then all of a sudden just things blew up from there. So, yeah, incredible, I love the thing. The the animation that you did on code drops the of the walk, the walk. It's a fox and a wolf, yeah, oh, and when you hover over its nose, yeah, that, yeah, you do. You have any more articles or introductions?

Are coming on there and anytime soon, I think it's the only one you have on there on KO drops. No, yes, that's the only one. But I had various other tutorials on other sites, such as CSS tricks and others. I can't get the name right now. Yeah, yeah, no, Drops is awesome. That's, I think it's the first time I actually saw your work was via that, and then I ended up going visiting. Code Pen and the house, of course. Mm-hmm. Love the house. House is super cool. Yeah, I was actually surprised that that was like the number-one most hearted pen last year, and I, I was shocked. There reminds me of old Disney and Warner Brothers cartoons, where that the buildings would like hop and animate when music was playing. It gives that, yeah, similar effect of it. I mean, it's hard to make a house have personality.

Yeah, so that animation was originally by GAO's charities, and yeah, he's an animator and designer from Israel, and he does some incredible work. In fact, I've recreated a bunch of his animations already, just because it's so much fun to do. Like, there was one, a cat swinging on the string.

Play from 0:00

And the choose your weak thing, where you could delete all the weekdays and just extend the weekend, which I wish were like that. But yeah, he's doing a lot. Aisling when, when they? When you do, you use somebody's work, like, and you reach out to them first. Do you say, Hey, do you mind if I do this? What do you think we're? Afterwards, you go out to them and say, Hey, look, what I did of your work? Oh no, I'm asked for forgiveness all the way, and thankfully I've never had to do that. In fact, the designers very much appreciate that. I do it because number one, I credit them in multiple places, both when I share it out of the tweets, I'm like, this is who it's from. This is where I found it, and also in the codes and descriptions. That's, you know, where I put credit to them and say that it is inspired or directly just a recreation of their work.

And so that's very much the culture in Tribble anyway, where they have things called rebounds. Or you take a design. And you would just work off of that, and so I'm doing something similar, except just doing it in a different medium. Guys, it's beautiful, so I hope it's okay and I hope that, you know, the Indonesian cops don't come busting down. My yeah, was that look like? Could somebody animate that to see what would that would look like happen? Maybe? Oh, no justice, sorry, what is that? I said? Maybe in canvas, yeah. So what are some takeaways you want people to get from these bends? Well, the first thing, and well. One of the main things that I try to emphasize at the very beginning, and this was actually part of one of my first talks ever. Is the fact that you don't need JavaScript's for everything, and even if you could do something easily in JavaScript.

Play from 13:00

There's many advantages to just trying to use the least, the least powerful technology possible in order to accomplish something. And that's because it provides a very standard way, in a very declarative way of doing something. So when I make my animations, I just love the fact that I could do them in CSS and then inspect them in the animation inspector. And all. That's possible because I am doing them in either CSS or using the web animations API. Instead of immediately reaching for a library BlackBerry Sock or philosophy, or any of these other libraries. Why do you wanna not do manly code the curve then for the animation? How do you, how do you hand me handle that sort of thing? So you're not just, oh so, like, like Messier's, yeah, yeah, okay, so that's people actually make that a lot more complicated than it needs to be. So, if you imagine like the there's four numbers, which might seem like very, very magic numbers. And I'll tell you my favorite as he occur, cuz I use pretty much.

Everywhere is points five, zero, point five, one, and so it's very, very simple, like simple numbers, it's half 0, half 1. And so if you imagine that's a very smooth, you know, sort of sinusoidal curve, hmm, right, which it starts off smooth and it ends off smooth. And it's perfectly like you can see it levels off very flats, which is exactly what you want, because nothing starts from you. Know, just like that, it always starts from a zero and then accelerates, and then it accelerates to, you know, to zero again. And so that's why I use that. It looks nice. Some people swear by their magic numbers, but that's all you need. Point five, zero, point five, one very easy to remember. Well, I had that in the show. Notes. Yeah, he gave that talk at code Pen, it was like literally a seven minute talk, and he's like, that's it, that's it. Open event, speaking of which, right? We're going to be, yeah. So Janelle and I have been organizing the Orlando code Pen meetups, and we sort of been doing them semiannual.

H.E. Just because I've been extremely in South Janelle. And. But we're going to start trying to do that monthly and so we're going to be starting in September. What these Orlando coconuts are, just like all the other code penny ups are. It's a mixture of talks and show and tells, and it all revolves around the front end space and just doing really cool things with code. And so if any of you watching don't know, code 10 is a basically a scratch pad for just making these really cool front-end experiments? So, using HTML, CSS in JavaScript, there's a lot you could accomplish, and a lot that you could show off or experiments with in code, pen.

Play from 15:00

And so even if you're going to Cochin website, you're. You're definitely going to get a ton of inspiration from all of the interesting and innovative things that people have made. Right on that scratch pad, yeah, it's really great, just those challenges every week are amazing just to look at. Yes, Frederick, stop interrupting Jenelle, I didn't hear you. No, no, it's cool, it's cool, it's good, all right. So let's where are you right now? David? I am in Salt Lake City. Whoa, and what are you doing over there? So right now we are at Reacts Rally, and so today was the one that Reacts Rally. Tomorrow's D2. Are you having a lot of fun? Yeah, I am meeting a lot of people, meeting again, lots of people seeing new faces, old places. It's sort of like a reunion highlight. Sorry, don't lie to me, any cool face that you've been so far start here would be Beth, you're.

Breaking on yellow Ruin who broke up you? Oh, I said, any cool highlights, anything that you've seen so far? Derek? There were a few really cool talks of. Few of my favorites were actually all of them were just really good. Shirley Woo. She did a talk on using D3 with reacts, where it might seem like they're opposing forces, but she showed how they could actually naturally work together. And just helping us get rid of art for your muse. And III with Reacts. There was also a talk on how React is not really reactive, which I completely agree with, and so this the React team. And so it was talking about how you could use a functional, reactive programming paradigm with React, such as RxJS. And just some interesting experiments around there. There was also talk by Josh Kokomo. I don't know how to pronounce assessing homo or comeyou something like that anyway.

He makes these really cool explorable explore, explore, elects, Planation X' with React. And some of those are really famous, you might have seen them before, like describing how sound waves work and everything. And yeah, just some of the really cool tops. Yes, that sounds amazing. And then we could probably link the reaction Rally live feed to our show notes as well, because I know there's a live feed going on already. Nifty, nifty. And let's talk about maybe. Like the key framers, it's kind of a really big thing. You want to give a little tidbit about how awesome the key framers are on. Good, oh, I wouldn't ask it. But if that had something to do with your cope ends, if you were doing the this and that kind of transformed into this. So, yeah, me and my friends job we've been. It's something that we were talking about for a while before we started, and we started a few months or a couple months ago.

I don't know how many episodes, we don't, we just done so many. But basically, we both had the idea because we, we both make these, we both love doing these complex animated code fence and just recreating certain animation effects. And so we decide, like, why don't we team up, and why don't you just make them together? And you know, to see how much we could crank outs. And like a two-hour slot, every week, I used to be Thursday's, now it's Monday's give or take. And so, yeah, basically the key framers. It's a live stream weekly where we do we bring imaginative user interfaces to life.

Play from 18:00

So basically we'll pick something on triple. Or someone will challenge us and say, Hey, I thought you can't make this animation. And so we're, like, challenge accepted. And we try to do it on the air. And this is typically little-to-no preparation. We basically maybe chat for five minutes on our overall strategy, which sometimes works perfectly and sometimes we struggle with. But it's really cool because you see us live on the show. Even if we struggle, even if we can't figure stuff out. Where we just want to come across as normal humans and not alien people, not robots. Typing yeah, it's awesome that you guys do that live, that it has to be super scary sometimes. Oh no, and it's not scary because we, intentional or not intentionally, but we know that we're going to mess up and that's okay. You show how you're solving the problem, which I think is for exactly because I love that.

Yeah, there's so many tutorials out there where they're like, Oh, this is how you do this. It's like, perfect and works perfectly with no mistakes, you perfect. Yeah, I never works like that. No, we want to pull back the curtains and show you, just like the entire thought process of how everything works. Have you ever failed completely? Yeah, oh yeah, yeah. There have been times where we were doing this one show where we were just making a bunch of loaders. And there was one where, you know, it was like just a simple loader. But we had one squared like bouncing underneath all these other squares. I mean, we didn't get the timing just right and I know we spent another half an hour on that we would have gotten, but we just decided to mark that one that just failed. And what's awesome is that someone else in the community decided, let me try to do it.

And so he was able to fix the animation and make it work in. So that's, that's what, that's the rewarding part to us. We want to see and empower people to be able. To do these animations without fear, yeah, you're, and that's our main goal in the show. Yeah, you're just inspiring what we're trying to teach people as well. And so right now, the streams are a bit informal because it's not really a structured thing, it's more like, here's how we are doing it. But in the future, and I guess this is the first time it's being officially announced. We wants to actually have like tutorials, like either video tutorials or article tutorials or both, and so we want to provide that constants to users. Well, do it. I think you should do it in the same style that, like, dude like, decide this is a what I want to show how to do. And then, like, maybe do a rough outline so you know what you're planning on doing, but, like, show the mistakes as you're developing the tutorial.

Oh yeah, yeah, absolutely, that's a point of seeing the whole process. Yeah, yeah, even the parts where we disagree. That's the most fun part, really. Yeah, he has his silly M's versus friends, and I had my silly. The position:Relative for everything, which I think is totally cool. But 99% of the development world does not want to show. The other day what other day, the last show? You weren't there? I wasn't there on Monday, on Monday. No, I was traveling on Monday. Oh okay, yeah, yeah, he's always traveling, Frank, I'm always traveling. Never on that show. You're just always traveling. Is that how it works? Yeah, oh yeah. So first Monday, I was sort of being a ghost. And the reason why is because I had some unexpected travel where I landed in Seattle and I wasn't even planning on being in Seattle. I just messed up my flights big time and my luggage.

Like, let me just tell you, I wish that my luggage got as many frequent flyer miles because it traveled a lot further than me. OWENS I'm okay, so I wish I could redeem frequent flyer miles for just my luggage. And so I unexpectedly stayed insult in a Seattle. And it wasn't really a conducive environment for me to show my face and talk to people. So I decide to just ghost it. And that actually ended up being pretty fun, so yeah, it was fun I was doing. On the I was on the live chat, I loved that whole turntable thing, that was really cool. Yeah, yeah. So the second part of the animation is going to be even more fun. We're going to incorporate that turntable and just through the whole 3D animation with the app. So, and I love the yeah, I'd love to domain that you guys picked. Oh yeah. Keith brings out RS perfect spells, Kini framers. That wasn't a cheap domain either.

Oh, really, how much, I don't remember. Sean knows more than me. His full name is Stephen Schap. I just called Shaw, so this Twitter name is at Shaw shot, so I love that. How'd you guys hook up? How'd you guys become friends through the animation network community? So it's a it's a slab room, and so it. Basically, everyone who does any sort of web animation, or just, you know, animation in general, or people who want to learn more about animation. They go on to this community and just talk about anything that they're having trouble with, or anything they want to show up. And so it was started by Rachel Neighbors, who, if you don't know, she is like the one of the most prominent voices in the web animations community, in fact, there's. There's a lot of. Like. Her valve head Sarah Dresner, just like all of these people, are extremely talented and extremely prominence in that community.

So, and we all hang out there, so that's cool, that's a cool world, that's where the cool kids hang.

Play from 22:00

Well, I know we're we're getting a close to the show because you have a little bit short on time for this episode. Since you're, you're at the conference, so maybe we'll go ahead and start closing everything up. Ryan, you want to jump in your question? Oh, let's, let's do a few rapid fires to, kind of, I like that. I think we get a good insight into who David is when we do that. Oh yeah, yeah, lightning round. I didn't. - it's fine, it's fine. So this is where we ask you a ton of question. It's just really, really fast, or kind of relatively, and it's just like random things. So it could literally be like, what's your favorite soda? Or like, like, what's your favorite part of observables like that? Kind of thing Alton Brown's meatloaf, alrighty. So, first question what is your favorite color? Rather, what podcasts do you listen to? my own, not kidding.

Iid listen more podcasts? I really do. I don't really. Yeah, fair enough, I don't even listen to my own. Believe it or not, have you ever? I just, I just let y'all upload to YouTube and I'm like, that's it. Have you ever stepped on a nail? yeah, yeah, stepped on nails? Legos, you name it, really. Frank, is it true that you work with BS code? I do, in fact, at Microsoft, I mean, the I think make. I work on a team that worked on the Theists. Live share extension among BS code, which allows you to program collaboratively from anywhere in the world. Some heroes, heroines. I know I don't do heroin. I mean, I'm glad that we got that clearing out of the way. Yeah, so my biggest inspirations, I mentioned a few of them, but in the animation community definitely. I learned a lot from Val head. Sarah Dresner does a lot of really cool stuff.

Rachel Neighbors, who is a great friend. We breathe free 'if briefly work together at Microsoft. Also on Tiffany Asad Net code ROPS. I don't know if you've probably seen that. Yeah, just some amazing animation work by Manuela Alec. I think that's her name. Like I. I realized that she was someone behind so many of these really innovative animations. That's actually what got me started in just doing friend, trying to figure out all these animations.

Play from 28:00

So I owe a lots of her. Awesome coffee or tea coffee all the way. Black, no sugar. Woah, yeah, favorite all-time resource coffee. Honestly, just. And this is gonna sound really nerdy, but like just these really old papers. Because every single innovative idea that you could think of right now, it's already been done. It's already been researched, like 20 years ago, and so that's where you find the most interesting stuff. Yeah, what's your favorite thing about yourself? Next next favorite that? Well, all pizza toppings of choice, pepperoni. And please cut this out so that no one hates me. I like pineapple, sometimes pineapple. Boom, yeah, we can go with that. Brian's awesome question better be awesome. Oh yeah, a lot of pressure here, Ryan I. Actually, have no question at all, cuz I had a really busy day today, so I think we'll just leave it today. For Brian to have a busy. You didn't have to prepare.

So David, we're, we will close this up. Do you have any final words of wisdom for our audience? Anything you'd like to share? Yeah, so definitely keep watching. Well, Thunder Nerds, of course, and the key framers. Because we do have some exciting things to announce within the coming months, you know, as we work on more and more exciting materials beyond just the just the weekly shows we do. And also I'm I'm doing a lot of work, especially with other people in the statecharts community, and we haven't really talked about this too much. But a lot of the other things that I do is related to the state machines and statecharts. And so even if you go on the key framers, I talked about that a lot. Just because it makes both designing interactions and just dynamic you user interfaces, it makes it a lot easier to work with. So, yeah, I sorry. And what's the best way people could get a hold of you if they want to find out more?

So I'm at Stated K piano, and so pianos not my last name, it's David K. Piano, and that's because my last things too hard to spell. I probably get it wrong sometimes to join me on yeah, on Twitter, GitHub, lincoln. If you want to, don't do the LinkedIn, Instagram, all that fun stuff. All right, cool, yeah. And we'll put a link to all that stuff in the show notes, obviously, and we'll put LinkedIn really big and red. Yes, please do. I need more connects, more recruiters. Yes, in a day, I get it. So much for joining us, really appreciate it. And, you know, love watching you on all the talks that you do. And definitely the key framers is a amazing show and really appreciate what you're doing out there. Yeah, thanks for having me, it's been great. Yeah, absolute honor and thank you Pantheon for sponsoring this episode. Anybody else, any final words?

Anybody? And you can find a lot of David stocks online for state machines and awesome cool stuff, so definitely do those. Thanks everybody to those noodles.

Play from 31:00