Episode 119: SVG Animations, Charts, Color Palettes

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of Internets where we 0:02 talk about all things web design, web development, and more. 0:05 >> In this episode we'll be talking about SVG animation, responsive web design, 0:07 charting, and more. 0:12 >> Let's check it out. 0:14 [MUSIC] 0:15 First up is a website called Coolers, or co, colors. 0:20 >> Colors. 0:27 Colors. 0:28 >> I'm really not sure how to pronounce it. 0:28 It's at COOLORS.CO. 0:31 So, lot of O's in there. 0:37 >> Cool, cool, coolars >> Yeah. 0:40 Then I guess color.com was taken. 0:42 >> [SOUND] Weird. 0:45 >> Yeah. 0:45 But anyway, at this website you can. 0:47 >> I hope that doesn't color your perception of it. 0:49 >> You can press the Space Bar and generate colors. 0:53 I love how simple this website is. 0:57 This is actually pretty amazing. 1:00 UX taken by itself. 1:03 But if you press the Space Bar, which I am doing right now, 1:05 you can see that it generates different color schemes. 1:08 So that's pretty amazing, right? 1:13 These are all actually coming from users that have generated colors on this site. 1:14 Cause you can actually register for this and login. 1:21 And everything like that, actually save your color schemes, but 1:24 if you're not interested in that, 1:28 you just kind of wanna cycle through here, look at some cool color schemes. 1:29 When you find one that you really like, you can actually go down here and click on 1:34 some of these colors to, maybe edit them if you want a slightly different color. 1:41 Or you can lock a color so when you go to cycle through more of them, 1:46 that color will actually be locked, and you can just change some of the others. 1:53 So, really cool site, very simple, not a whole lot to say about it, 1:58 but if you're looking to generate some color schemes. 2:02 Definitely check this one out. 2:05 >> Next up we have a project called Vivus or Vivus? 2:07 And this is for SVG animation. 2:11 It says it's going to bring your SVG's to life. 2:14 Now SVG animation can be a little bit tricky so 2:18 this plug in helps to ease the burden. 2:21 There are three different options for animating the SVG's this is delayed 2:25 where every element is drawn at the same time with a small delay at the start and 2:31 then they all sort of finish at the same time. 2:35 Async where each line is drawn asynchronously and 2:38 once again they all start and finish at the same time and hence the Async method. 2:42 And then finally OneByOne where all of the different elements are drawn one 2:47 after the other. 2:52 Producing a very interesting animation. 2:53 They have another cool animation down here on the page, go ahead and 2:57 show that, replay this. 3:00 If you look to the left right there you can see a little Polaroid camera being 3:02 animated and you can actually rewind this animation. 3:06 And see it multiples times. 3:10 Now this does use a little bit of trickery to get the SVG animation to work. 3:12 The script uses the CSS property stroke-offset and 3:19 a little bit of Java script to update the value progressively. 3:24 But this only works on path elements so if you're using circles, rectangles, lines, 3:28 or poly lines this may break the animation. 3:33 So there is a simple work around on there. 3:37 Now it's very easy to use there are no dependencies so 3:39 you just call new Vuvis you give it your ID of the SVG. 3:43 The type of animation that you want from what we talked about earlier then you 3:48 give it the duration that you want in milliseconds and any call backs. 3:52 And that's pretty much all you need to do to get the plug in to work 3:57 at the end there's a self destroy option which removes all 4:03 extra styling on the SVG and leaves it as the original. 4:07 >> Oh God, I thought that did something completely different. 4:11 I'm glad you clarified that. 4:14 >> [LAUGH] Yeah well, I got your back, yeah guy, 4:15 I could see the worry in your face. 4:17 Anyway, that's about it. 4:20 There's some more options. 4:21 Recommend checking it out in the show notes if you're looking to do any 4:22 SVG animation. 4:25 >> Very nice. 4:26 Well, next up is a wonderful blog post called Nine Basic Principles of 4:27 Responsive Web Design. 4:31 Responsive web design is of course, a way to resolve multiple screen resolutions and 4:33 figure out how your website should look on tablets, and desktops, and 4:41 mobile devices and so on. 4:45 So if you're coming from the print world this is a really great introduction to 4:47 responsive web design because it has some really nice animations sort of showing you 4:53 the difference between, say, a responsive website and an adaptive website. 4:58 Which the difference is very subtle but it is indeed different. 5:03 You'll see that this particular layout is actually flexing very fluidly because it's 5:08 using a fluid grid, and this one just changes with a media query, and 5:13 there is no fluid grid. 5:17 But, when the screen size changes, just, sort of snaps. 5:19 This is actually not the best way to do things. 5:23 You wanna do things responsively, because, you can never actually predict what 5:26 the size of, even a window might be on a desktop browser, 5:30 let alone the huge multitude of different screen resolutions on mobile devices. 5:35 So, definitely a good lesson there. 5:40 There's a whole bunch more stuff here about say, how to use relative units 5:43 instead of static units like pixels, so you definitely want to use percentages. 5:48 It explains what a site looks like with break points and without breakpoints. 5:54 So say you have a two column layout. 5:58 With break points it's gonna go down to a single column flow which is ideal for 6:01 a mobile phone and without break points you might have that same two 6:06 column layout but it's just gonna look the same even if you have a fluid grid. 6:10 So you definitely need those media query break points. 6:14 Anyway, there's a whole bunch more tips there so 6:18 if you are pretty new to making websites and 6:21 you wanna wrap your head around what all this responsive design stuff is. 6:24 This is a great introductory post. 6:28 >> Hm, very nice. 6:30 Next up we have a project called MetricsGraphics.js. 6:32 This is a library built on top of D3. 6:35 For creating simple charts. 6:40 Now they only offer a few charts to start with, 6:43 line charts, scatter plots, and histograms. 6:46 And they do this in order to make creating these charts very easy and efficient. 6:50 So, here if you see this little snippet of code this is all you need to 6:56 do to make a chart. 7:00 If we click over on examples here you can see a bunch of 7:01 different examples of what this library can be used for. 7:06 So, at the simplest we have a line chart and you'll notice as I move the mouse 7:11 along this chart the dates and values in the top right are updating. 7:17 Now the scale on the X and Y coordinates are automatically set. 7:23 And you can even set this baseline option here. 7:29 You can see there are options for multi line charts. 7:31 Just a few observations as well as annotations inside a chart. 7:34 You can see. 7:39 At this point right here we have a spike. 7:40 Now there are more layouts available. 7:45 It uses Bootstrap's grid template to lay out graphics which means you can create 7:48 grids of arbitrary sizes and put the graphics anywhere you want to pretty much. 7:53 Anyway tons of different options here it also has a very simple API. 8:00 They get into a little bit about their design philosophy which wasn't to 8:05 make absolutely everything just to make a few different options, 8:09 really efficient and practical. 8:14 Now it's pretty easy to get the data. 8:16 Just use the D3 Library. 8:19 And here it is loading some JSON data. 8:21 Once you do that you can call this data graphic function. 8:24 Give it a title, a description, a link to the data which you 8:27 just fetched up here in that JSON request, a width and height, a target. 8:30 And you are pretty much good to go. 8:35 This little tiny bit of code right here creates this great chart right down here. 8:38 Anyway, this is a great library to check out. 8:43 It removes a lot of work from using D3 by itself. 8:47 >> That is something we probably should've mentioned at the beginning. 8:51 D3 is of course a generic SVG charting library but it is. 8:54 >> It's great. 8:59 >> Very generic. 9:00 I mean, you can do all sorts of stuff. 9:01 It has amazing amounts of flexibility but that also means it's pretty difficult to 9:04 use on its own if you just wanna make some cool looking charts. 9:08 >> Yeah. >> So it's really nice to use a library 9:12 like this that's built on top of D3 and takes advantage of all of that power. 9:13 Pretty cool stuff. 9:18 >> Very cool. 9:19 >> Well, next up is a really cool website that will help you 9:20 find the perfect font combo for your next project. 9:23 I know that because it says it right here. 9:27 >> That's genius. 9:29 >> So, so convenient. 9:30 So first you select a starter font, and they have a ton of fonts to pick from, you 9:32 can actually use the search function here >> Do they have Comic Sans? 9:37 Like, they might. 9:41 Let's see. 9:42 They have Comic Serif Pro. 9:43 I think that's the closest we're gonna get. 9:45 So let's, let's see what font would pair it with Comic Serif Pro. 9:46 You can click View Matches. 9:50 And it says hey, this font called Quicksand would pair pretty well with it. 9:53 So if you're going for this kind of a look, 9:58 you can have a wonderful font that pairs with it. 10:02 Let's pick another one just to see what this might look like. 10:04 Let's say we go with Droid Serif here, 10:09 review the matches, and it says hey you should use Montserrat. 10:13 I think that's how you say that font. 10:20 But pretty, pretty nice pairing there. 10:22 I'm actually pretty impressed. 10:25 And if you click down here you can actually see some additional options if 10:26 you don't like maybe the first one. 10:31 And these of course have all been hand selected so 10:33 it's pretty much guaranteed that they're gonna look nice, paired together. 10:37 >> I like how it gives you a, a source example there where you can 10:43 actually see these fonts in action if you like how that looks. 10:45 And then you can go through and just completely ripoff the code. 10:49 >> That is terrible advice. 10:52 But, yes, that example is there so you can go ahead and 10:55 look at it and see what the font might look like in action. 10:58 So pretty cool website, definitely be sure to check that one out. 11:01 Think that's about all I have time for this week. 11:06 I am @nickrp on Twitter. 11:08 >> And I am @Jseifer. 11:10 For more information on anything we talked about, 11:11 check out the show notes right below this video. 11:13 We want to thank everybody for watching, and we'll talk to you next week. 11:15 [MUSIC] 11:18

You need to sign up for Treehouse in order to set up Workspace

Sign up