Episode 53: The ClassList API, CSS Frameworks, Animation

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And you're watching the Treehouse Show. 0:02 Your weekly dose of Internets where we talk 0:04 about all things web design, web development, and more. 0:05 >> In this episode, we'll be talking about 0:08 the classList element, CSS frameworks, animation, and more. 0:10 >> Let's check it out! 0:15 [MUSIC] 0:16 >> First up, we have a blog post over on 0:21 the HTML5 Doctor website about the classList API in JavaScript. 0:24 Now, prior to the classList API, if you wanted to get a list of 0:28 classes that an element had, well there's 0:33 a whole bunch of JavaScript that was involved. 0:35 and, you know, plugins like jQuery would make 0:38 this a little bit easier to work with. 0:40 However, now we have the classList API, and it's absolutely 0:42 wonderful if you want to get a list of class names that an 0:47 element has, you just say document.getElementByID 0:49 and then say classList on that variable. 0:53 Now, this gives you an array in this 0:57 example, it's it's got four different class names 1:00 oh, my, giddy, and aunt, and then you 1:03 can actually get a JavaScript object out of this. 1:07 Now, there is an API that can you use once 1:09 you have the list of classes, you can add to it, 1:12 remove, see if it contains, toggle just a few different things here. 1:15 I'm really, really happy to see the classList API because really, this 1:20 was just a ton of hacks that you had to use previously. 1:24 Anyway, go ahead and check out this blog post for more information. 1:27 It's definitely worth the read. >> Very cool stuff. 1:29 Well, next up, we've got animated books with CSS 3D transforms 1:32 over on the Codrops blog. Now, I know you're what you're thinking. 1:38 Animated books? 1:42 Whoa. >> Whoa! 1:43 >> That's way better than paper. 1:44 Well, it's not quite what you're thinking. >> It's what I'm thinking exactly. 1:45 >> But if we. 1:50 [LAUGH] >> Get out of my head, Nick. 1:51 >> If we check this out you can see that when I hover over each one of 1:52 these books, it actually opens up and allows you 1:56 to click a download link so it provides kind 1:59 of a traditional feel for books that are maybe are 2:03 actually e-books and you just download them on the internet. 2:07 They also have an example of paperback books that do very similar things. 2:11 So you can hover over these and maybe download them or see a preview and so on. 2:17 If we go to the Codrops article and scroll down here, we will see 2:23 right away that support in Internet Explorer is a little bit questionable. 2:28 I haven't looked, but I'm assuming that's 2:34 because Preserve 3D is not really supported there. 2:36 But it's a cool example nonetheless. 2:41 The way they're constructing the 3D object is by using pseudo-elements to provides 2:43 a little bit of a little bit of thickness to each one of these 2:49 covers and pages. And then they uses transitions or. 2:53 I'm sorry, yes. 2:58 Transitions and transforms. 2:59 And if we scroll down here a little bit more, you can see that they're using the 3:01 nth-child pseudo-selector on each one of the pages, 3:06 which are actually in the form of a list. 3:10 And they just delay each page by a little bit to give that nice smooth opening 3:13 effect where a few of the pages kind of flutter past. 3:18 Pretty cool stuff. 3:22 I'm actually very impressed by this, and I'm also impressed 3:24 by just how little code you need to actually do that. 3:28 >> Yeah. 3:31 >> Very cool stuff. >> The demo's really impressive. 3:31 I'd like to campaign for getting the Cliff 3:33 Notes when you hover over the book element. 3:34 >> That's a good idea. >> Yeah. 3:37 Say, save me some time. >> Always thinkin. 3:38 >> Yeah. Always looking for a TLDR. 3:40 Next up 3:43 we have a quick blog post on animated gifs the hard way. 3:43 Now this is really interesting. 3:48 This guy was designing the website for Sublime Text 2.0 and he 3:49 actually wanted to demonstrate the features via an animated gif on the site. 3:52 But instead he wound up doing something pretty amazing. 3:57 He took a series of PNG screenshots which he wanted to display and wrote an encoder. 4:01 Which just takes the meta data of the difference 4:06 between these PNG's and then displays it in the browser. 4:09 >> That is amazing. 4:12 >> Yeah it is pretty amazing. 4:13 It actually saves a lot of space when creating these animated GIF's. 4:15 The gif was 1MB in animation and this is a lot less than that. 4:21 So you can see the animation is pretty 4:27 smooth right here not really jagged at all. 4:28 Not choppy either. 4:32 And this is all packed into one single PNG file. 4:34 So this is 96K instead of one meg. 4:38 >> Wow. >> Yeah. 4:42 So it's really interesting. 4:43 The metadata looks like this, it has the timeline with the delay and what 4:44 parts of the image need to be changed, and you can actually download the encoder. 4:48 He has a link to his GitHub account here, where he has the animation encoder. 4:54 And then 4:58 you just run it with a directory that contains all the 4:59 different images you want and then you are good to go. 5:02 This is really interesting. 5:06 A long time ago on the Treehouse Show, Nick, we were dissecting the 5:07 Apple website and how they were doing the animation image for the iPhone. 5:11 >> And they used a very similar technique. 5:15 >> Yeah, exactly, so now we have an open 5:16 source version of that which you can check out. 5:18 >> That is pretty cool. 5:21 >> Yeah. >> Well next up is Topcoat, 5:22 which is basically a CSS framework that evolved from the 5:25 design language used by Adobe in products like Edge and Brackets. 5:29 So, here you can see a couple of 5:35 examples of what Topcoat looks like on various devices. 5:37 So it's of course responsive and if we click on the 5:42 usage guidelines here, you can see a whole ton of examples as 5:45 to what Topcoat actually looks like. And it's a pretty nice style. 5:50 It's kind of a dark theme, which you don't see 5:55 terribly often, but Adobe has adopted it in their in their 5:57 suite of image editing and video editing applications, probably because 6:02 you're able to focus on your content a little bit easier. 6:07 But, I kind of like it, and they use 6:09 some very common design patterns such as the three 6:12 line bar, you see that is used all 6:15 over the internet and across many different websites. 6:18 The thing that I think I really like about Topcoat is that it's very performance 6:23 focused, which, as we've discussed in past episodes, 6:27 is very important, particularly in mobile web applications. 6:31 So, not a whole lot to say about it, but 6:35 it's just a really nice CSS framework, and I highly 6:37 recommend you check it out. >> Very, very cool. 6:40 I really like the name, too. 6:42 It's very dignified, Topcoat. >> Yes, yes it is. 6:44 Next up we have a project called Kinetic JS. 6:47 This is build as Enterprise Class Interactive Web Graphics. 6:50 So, this is going to be another library that's gonna be 6:55 really useful for creating games and really rich graphics on the web. 6:57 >> Or going into outer space since it's Enterprise ready. 7:02 >> Oh, 7:05 there you go. Engage. 7:06 So it supports a ton of stuff. 7:08 It works with HTML5, Canvas, and JavaScript, 7:11 so you get high performance, web animation, transitions, 7:14 node nesting, layering, filtering, caching, event handling for 7:18 desktop and mobile applications, and much, much more. 7:21 Wow! 7:24 I just said all of that. So let's just see an example. 7:24 Let's see what you can do. 7:27 This is a game called Humans, Aliens, and Robots. 7:28 I'm just gonna click 7:30 the Go button, and look at that. Guest 1375 has, has joined the fray. 7:31 >> Wow that's amazing. 7:36 >> Isn't it? 7:37 >> Careful Jason you're wearing your red shirt. 7:38 >> I know, I know. >> You might not make it out. 7:40 >> Yeah there's not I, I have no idea how this game 7:42 works, but you can see the graphics are really, really smooth so far. 7:45 And I, I can zoom in and out and it's actually pretty performant. 7:48 But anyway there's a, there's a ton of different demos you can see here. 7:52 And it's really, really interesting to see how it works. 7:57 So basically you get a stage, which is composed of layers, and from 8:00 these layers you can add groups of images or shapes or something like that. 8:05 Once you get there, there's a very, very rich API that you can use to 8:09 interact with all of these elements, and 8:13 remain performant while you're creating these web applications. 8:15 I really, really recommend checking this out and just viewing the whole library. 8:18 There's great 8:22 documentation on there. 8:22 You can find that in the show note at youtube.com/gotreehouse 8:23 or search for us in iTunes at The Treehouse Show. 8:27 >> Pretty nifty stuff. 8:30 Well have you ever been on, say Amazon.com? 8:32 >> Yes. 8:36 >> Or really any website where you're buying 8:36 something and you're typing in your credit card information. 8:38 Usually it's kind of a hassle and occasionally 8:42 you'll come across a good example where it's like, 8:45 wow I can just type in my credit card number, and knows 8:47 what type of credit card I have and this looks really good. 8:50 Well, enter Skeuocard, which actually is a return to skeuomorphism. 8:54 Of course, the skeuomorphism is a way of designing 9:00 things so that they look like their real-world equivalents. 9:04 So with Skeuocard, when I go ahead and type in a credit 9:09 card number here, they give an example 9:12 of a couple of different popular credit cards. 9:15 I'll go ahead and type in a VISA card. 9:18 Hey, look at that, it knows that I'm using a VISA. 9:21 I'll go ahead and type in the expiration date here, and I'll type in my name. 9:24 [SOUND] And then I can click here to flip 9:31 to the other side and fill out other information. 9:34 So I can fill out, say, the security code here and then I'm all done. 9:38 This is way different than any other credit card than I've 9:43 ever seen and I think it's actually excellent use of skeuomorphism. 9:47 Because it looks exactly like your credit card and 9:52 it's really easy to find where those numbers are 9:55 so that, you know, when you have to explain 9:57 when the, where the security code is on the card, 10:00 you don't have to go into this really long explanation. 10:03 You can just say, hey, it's on the back of your 10:05 card right here, just like it looks in the web form. 10:07 So, pretty cool stuff. 10:11 You can go ahead and download the code and check it out. 10:13 >> I usually, if I wanna order 10:17 something, just take a picture of my credit 10:18 card and post it to Twitter or Facebook and ask somebody to order it for me. 10:19 >> And then, you know, a few extra things might come in the mail, too. 10:23 >> Yeah, then you don't even have to worry about, you know, if it looks 10:25 like my card in the website. >> That's a good tip. 10:28 >> Yeah. >> Heard it here first people. 10:30 Next stop, Alex McCall has a great blog post 10:33 on cross sight request forgery in Java Script web applications. 10:35 Now cross sight request forgery is something that 10:40 would let an attacker to the website simulate 10:43 a request to another website, As if it 10:45 was coming from and individually logged in user. 10:48 And example of this, say embedding 10:51 an image tag in a document that is no 10:53 on your website that contains you know maybe some code 10:56 or something that would go off and fire a 11:00 request on another web application on behalf of that user. 11:02 So there's different ways to protect against this and one 11:06 of the ways is to implement something called a CRF token. 11:09 And what that will do, that's just this token that's specific to that request. 11:14 It's usually a series of letters and numbers. 11:19 And that will let your web server know that 11:22 the request came from who it was intended for. 11:25 So one really neat way to do this using AJAX 11:28 for AJAX web applications, is something called the AJAX pre-filter. 11:32 And you can pass this token to your 11:37 JavaScript application, and then automatically add that jQuery's XHR 11:39 request right in JavaScript. 11:44 And then you don't have to worry about it For the rest of the requests. 11:46 You don't have to go through each individual Ajax call and add it. 11:49 So there's a quick bit of code that I recommend checking out. 11:52 It's right here on the blog. 11:55 And you can find that in the show notes. >> Nice. 11:56 Well, next up is animate.CSS. This is basically just a collection 11:59 of CSS animations, which, if you were to put these together on your own might 12:04 be a little bit tricky to actually do all 12:09 of these effectively or maybe in the best way. 12:13 This has already done all the work for you. 12:16 >> Wonderful. 12:19 >> So, if we go ahead and scroll down there's a couple attention seekers here. 12:20 So we can click on these. 12:24 It will actually flash this or do a little ta-da. 12:25 Apparently this is what a ta-da looks like. 12:29 It will wobble it. It can pulse it. 12:31 There we go. There's a ton of other examples here. 12:35 Let's see what light speed in looks like. 12:40 >> Whoa. [CROSSTALK] 12:42 >> Whoa, that's amazing. >> Slow down. 12:43 >> That's even better than the Enterprise. 12:45 Here you can hinge stuff, you can roll it in and out. 12:47 It's used by a couple popular companies that you may have heard of, and really, 12:51 you know, not a whole lot to say about it, but again putting together CSS 12:56 animations like this can be pretty tedious, time consuming. 13:01 You'll end up doing a lot of experiment-. 13:05 >> Work. 13:07 >> Yeah, work. Who likes that? 13:07 So you end up doing a lot of experimentation and 13:09 just changing numbers around and moving back and forth and trying 13:12 out different stuff, when these animations already look great and you 13:16 can go ahead and just drop the right into your website. 13:20 So definitely check that one out. 13:22 Very cool. Well who are you on Twitter? 13:24 >> I'm @nickrp. >> And I am @jseifer. 13:26 If you want more information on anything we talked about, check out our 13:28 show notes at youtube.com/gotreehouse or search for 13:31 us in iTunes at The Treehouse Show. 13:34 >> And of course if you'd like to see more videos like this one about 13:37 web design, web development, and so much more, 13:40 be sure to check us out at teamtreehouse.com. 13:43 Thanks so much for watching, and we'll see you next week. 13:46 [MUSIC] 13:49

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

Sign up