Introduction & Setup

[00:00:01]
>> Sarah Drasner: Hi, I'm Sarah Drasner. I work for Microsoft as a senior developer advocate. I also work on the Vue Core team and I work for CSS-Tricks as a staff writer. I'm so excited to be here with you today talking about my favorite thing in the world which is SVG animations.

[00:00:19]
And taking SVG and doing all of these amazing things with this technology. I did give this workshop two years ago but I have doubled the course content now. Not because there's so much more in SVG, it's pretty stable actually. It kinda just goes along, support is awesome. And everything that you could do then, you can do now.

[00:00:43]
But there's so many different ways to use it that I've expanded this course to show all of these different insights. Especially, there's a few little things that I'm going to show you with frameworks that I didn't have in the last class because frameworks weren't as big of a thing back then.

[00:01:02]
Cool, all right, let's talk about SVG. This is the repo, if you need to check it out. You don't necessarily have to download the entire repo if you don't want to or fork it but the links to all of the slides dex are in the read me. They are password protected, not to secure them or anything but just because I keep all of my slides for other talks on my profile and there's a lot of workshop materials.

[00:01:32]
So if you go over there, there's just like a little, in the read me, there's a password that you stick in and you can get in there. Another thing that would be good for you to do is to get a free CodePen account in order to play along with the exercises.

[00:01:46]
There's a lot of exercise and a lot of CodePen demos in here. You don't have to use CodePen. You can use something else but all of the exercises and all the collections are in CodePen so it might be easier for you if you use something else. You're gonna end up copy pasting a lot of stuff.

[00:02:03]
Great, so suggestions for getting the most out of this course. I really thinks it's imperative that you do the exercises. If you don't do the exercises, you're not really getting all of the information, all of the things that you can get out of it. I don't know if any of you have read, Learn Python the Hard Way.

[00:02:21]
But in that book, he talks a little bit in the beginning of the book about how you should actually type out all the exercises instead of just cloning the repo and looking at them. Physically typing everything that he's saying and trying everything out. And I think that that's so valuable, not just for this course, but for all of these kind of things where you're learning how to code.

[00:02:44]
It might seem like it takes a longer time to do all of the exercises that way but you're actually learning much better if you do it yourself. So we're gonna work with CodePen a bunch today. So I'm gonna show you some things that you can do in CodePen.

[00:02:59]
First, I have this CodePen propaganda poster. I don't work for CodePen, I just really like them. Yeah, because in Soviet Minneapolis, the CodePen is loaded with you. [LAUGH] Let's do, when we work inside CodePen, I'm gonna change view here. Notice that I'm in this Full View. I'm gonna change the view to this Editor View and that's where you can see HTML, CSS and JavaScript.

[00:03:27]
In JavaScript, you can see that you can add a JavaScript preprocessor. I usually start my pens with Babel, you don't have to use Babel if you don't want to. This is an older pen so it has jQuery. In CSS, I use SCSS as a preprocessor. Again, you can use whatever you like in here.

[00:03:46]
I also have normalize autoprefixer, prefixfree, all of those kind of things. Suff for the head is in here if you need to add classes to the HTML, that's here and same with HTML preprocessors. There are assets here, I think you'll only get assets if you have a paid account.

[00:04:04]
That's probably accurate. I can't remember, but one of the cool things, you see this little star that I have here. You won't have that star probably. I'm a CodePen picker. So if you make a CodePen that you're really proud of off of this class, you should let me know so that I can maybe pick it for the homepage and feature your work.

[00:04:26]
Cool, another couple of things to note. I have this extension that pops this open in a debug window and then it pops it back open over here. And that's what makes the extension code open. Full disclosure, my husband made that for me because we're both nerds and he was watching me open different tabs and stick the URL in.

[00:04:47]
So that was like an anniversary present he made for me, cuz nerds, we like each other sometimes. [LAUGH] It is actually really nice because this debug window, you notice that debug slug. I mean I can get between these two, I can just write pen and then I can change the slug again and write debug to get to the other window.

[00:05:10]
Really, what CodePen is doing, it's actually a React application. It has a bunch of iframes so this is an iframe, iframe, iframe, iframe. And so if you're trying to look at the elements inside of this, you have to navigate through all of the iframes and it's really complicated and not so great.

[00:05:29]
So if we open it up in here, inside here you can see the raw HTML, and raw CSS, and raw JavaScript. So it's really helpful to look at it in the debug window when you're going back and forth, cool. Also, one other thing. GreenSock, we're gonna be working with GreenSock today.

[00:05:50]
GreenSock's base thing of TweenMax that has a ton of features is free and open source, but there's a lot of extra things I'm gonna show you today that are paid for plugins. If you're working with CodePen, you don't have to pay for them though. You can play with them and try them out.

[00:06:05]
And this that's linked up here this CodePen safe plugins. This page has all of those things. So it has a list that they keep up to date, you can copy each one of them and there's also a collection for each one of them of relevant pens, so that's really cool.

[00:06:21]
So if you don't wanna buy a membership, you can try out all of those plugins there, cool.