Episode 64: Touchscreen UI events, Sprite and checkbox animation, Lo-Dash

>> I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And you're watching The Treehouse Show, your weekly dose of internets 0:02 where we talk about all things web design, web development, and more. 0:05 >> In this episode, we'll be talking about 0:08 touch libraries, grid forms, circle type, and more. 0:10 >> Let's check it out. 0:14 [MUSIC] 0:15 >> First up, Nick, we have a library called touche.js. 0:20 Or touchy.js? 0:24 >> Touch, touchy, touché, one of those. 0:26 >> It's spelled touch with an E, but there's no accent on the E. 0:28 >> So we're not sure. >> So we're not sure, essentially. 0:32 Anyway, this is a pretty cool library that is, it's designed for touch screen devices 0:34 like phones and tablets and what it does is removes the delay that happens when 0:40 you touch an element on the page. 0:45 Now, there is a 300 millisecond delay, that happens on touch devices. 0:47 You know, it waits for a click, that 0:51 doesn't work, so then it registers the touch. 0:53 But you can access that in JavaScript, you can kinda remap it. 0:55 So this is a really, really great library. 0:59 now, what it does, removes the 300 millisecond delay. 1:03 And then it also takes your click events applied with JQuery and then remaps 1:07 them to the touch N event for devices that support touch. 1:10 And finally, if you're not using JQuery then it 1:14 gives you a method called On for you to use. 1:16 As you can see, it's very, very easy to use. 1:20 You just give it the path to touche.js. 1:22 And then all you need to do is call the touch or touche 1:26 function, and then say hey what happens on the click, well go ahead and 1:31 handle the click, pass the function, whatever. 1:36 If you're curious about how it works you can check it out on GitHub. 1:39 I really like this library. 1:43 It's pretty simple. 1:45 You know, we've covered other libraries that do similar things before, but 1:46 this one does just the bare minimum so definitely check that out. 1:49 >> Touché. 1:54 I don't think that was the correct use of touché at all. 1:54 >> I know, that's ironic. >> But, it felt 1:59 like an appropriate spot to use it in. 2:01 Next up is a small JavaScript library called Motio. 2:05 I know that because it says, small JavaScript library, on the page. 2:09 It's for sprite-based animations in panning so you 2:13 can see here we have this cloud background. 2:16 >> It's very relaxing. >> It's panning by slowly. 2:19 Man, I'm drifting off to sleep here. It's only three kilobytes in production. 2:21 1.5 kilobytes g-zipped so it's very, very small. 2:26 It has no dependencies, it works everywhere, 2:30 although there is a jQuery plug in. 2:32 If you would like to use that. 2:35 Now what the heck does this do? Well you can make some clouds pan by. 2:36 >> Okay 2:40 >> So if I hover my house over here you 2:40 can go ahead and see what that might look like. 2:43 >> I feel like I am falling. 2:46 >> Well that's wonderful and, you can also animate sprites, 2:47 so that's another example. 2:52 You can create these 360 interactive views, so 2:54 essentially that's just swapping one sprite for another, 2:58 so we're just seeing a bunch of different 3:03 pictures here and swapping them in and out. 3:04 And then you can have extreme spriting, as shown in the example here. 3:07 >> That's pretty extreme. 3:12 >> Or you can actually create a entire video game here. 3:13 Excuse me, 3:16 you can go ahead and kick there. That's pretty awesome. 3:17 But anyway, that's Motio, pretty, pretty cool stuff. 3:21 >> Yeah. It's nice. 3:26 Like, I like it, pretty relaxing except for that part 3:28 where I felt like I was falling through the clouds. 3:30 >> Hm. 3:32 >> Next up we have a project called Gridforms. 3:32 Their tag line is data entry can be beautiful. 3:34 This is a library that as you might guess arranges your forms in 3:38 a grid. >> Into a grid, oh. 3:42 >> Yeah, into a grid. 3:44 But it actually is pretty good looking, if you, if you take a look 3:46 at the site right here, you can give it basically the full width of 3:49 whatever container it's in and it gives it a nice highlighted area, so you 3:53 can see the rest of this page is like a, an off white color. 3:59 >> Look at that. 4:03 It's wonderful. I feel like I'm doing my taxes. 4:04 >> Yeah, doesn't it? If you want that, 4:05 that government look on your websites, you know, if you, if you don't have 4:07 enough bureaucracy feeling in your web applications, 4:11 then go ahead and use grid form. 4:13 [LAUGH] But it's you know it's pretty easy to use. 4:15 Here's, here's an example of a bank application, you 4:18 know this would be great obviously if you're a bank. 4:21 >> We're really selling it here. 4:24 >> Yeah, really, anyway no. 4:25 It's nice, you know, pretty, pretty easy to use. 4:28 A little 4:31 bit of JavaScript and CSS. You can download it on GitHub. 4:32 Take a look at it if you're interested. 4:35 You can find a link to this in our show notes at youtube.com/gotreehouse. 4:37 Or on iTunes, search for us at The Treehouse Show. 4:41 >> Next up there's this really cool post over at Codrops. 4:45 I love this blog so much. 4:48 It's called animated checkboxes and radio buttons with SVG. 4:50 Now when I first saw this, 4:56 I thought well, what could be so special about radio buttons or SVGs? 4:58 I mean, they're pretty cool on their own, but 5:02 when I went ahead and clicked, woah, look at that. 5:05 It actually X's those off. 5:08 >> Is that you doing that in real time? >> And animates the SVGs. 5:11 Nope. This is a, this is real life Internet. 5:14 >> Wow. 5:17 >> You can also get a couple of different effects uh,by using animated 5:18 SVGs here. 5:23 So, here you have this kind of filling in the bubble effect. 5:23 You can have a more organic check for checkboxes. 5:28 You can also have circles around radio buttons. 5:32 You can also fill in stuff for checkboxes as well similar to what 5:37 we saw previously, all sorts of different types of effects can be applied here. 5:43 So, how the heck are they doing this? Well, they're using SVG path transitions. 5:49 So, they link to this cool article about drawing animated lines in SVG's 5:56 and this takes the idea a step further, by applying them to form elements. 6:02 So they essentially hide the real form element and 6:07 then they display you a separate pseudo element that 6:11 actually is what gets animated. So, pretty cool stuff. 6:15 You can download the source code there or you can just play with the demo. 6:19 I could play with that all day. It's pretty awesome. 6:22 But here's all the CSS and HTML with a tutorial on how to do it. 6:25 So, pretty cool post. >> Very nice. 6:30 Next up, we have a project called Low Dash. 6:32 Low Dash is a JavaScript library that's kind of like an Underscore replacement. 6:35 If you've never 6:39 used Underscore, it gives you just a lot of utility 6:40 methods when working with arrays, collections, different things like that. 6:43 So, they recently released version 2.2.1. 6:47 And it's pretty great. So let's take a look. 6:51 Here's some of the features that are not in Underscore. 6:55 Things like dealing with currying, forEach being chainable. 6:58 Pull and remove for 7:04 doing different things to arrays. 7:06 But let's take a look at the documentation, you can see 7:07 on the left here, tons of different options when working with arrays. 7:09 You can get the first item, find the index, get a range, you can 7:13 chain different things, things dealing with collections 7:18 which may or may not be arrays. 7:21 You know a lot of these things are convenience methods that you might be 7:23 used to in other programming languages such 7:26 as you know, Ruby, Python, things that 7:29 you might be missing in JavaScript, this 7:31 library implements, and it does it really well. 7:32 So, I recommend checking it out. 7:35 Again, we'll have a link to it in the show notes. 7:36 Not to much to say, really easy to use. 7:39 >> Yeah, no, you really underscored why you might wanna use it. 7:40 Okay. 7:45 Next up is CircleType.js. 7:46 If we take a look at this beautiful looking red and white 7:51 text here, this lovely font. We can go ahead and highlight it. 7:56 And you see that it's actually real text on the page. 8:00 This is not an image. >> Wow. 8:03 >> CircleType.js is just a very small jQuery plug-in 8:06 and the way you use it is by selecting an element as you would in jQuery, 8:10 and then you, you use CircleType, and you just say, the radius that 8:16 you wanna use. 8:21 You can also change the direction here, so you can set 8:22 direction to negative one, if you want a reversed arc here. 8:25 >> It's like a smile. 8:29 >> Or you can just have an auto radius, so 8:30 if you don't give circle type a radius, it will just 8:33 put it in a complete circle and there's a whole 8:37 bunch of other cool little bits that you can play with. 8:40 This works in Internet Explorer 9 and up, 8:43 so that's probably the only browser where you might experience a couple of hiccups 8:47 with this but pretty much every other it browser works is in in heavy usage. 8:51 So, you should be fine there. 8:58 But pretty cool, so if you want to go ahead and make a little bit of Word Art. 9:00 >> Yeah. >> On your web page. 9:04 >> Was gonna say, it reminds me of MS Publisher. 9:05 >> You can go ahead and do that now. >> Circa 2002. 9:07 >> Hmm. 9:09 It's wonderful. >> Yeah. 9:10 >> Next up 9:11 we have a project called odometer. 9:12 As you might expect, it gives you odometer like functionality on you webpages. 9:14 So check it out. It's pretty cool. 9:20 I'll re-load the page here so you can see these letters coming in and wow. 9:22 Look at that. 9:25 >> Whoa. 9:26 >> Are we in a movie or on a web page? >> Whew. 9:26 anyway. 9:30 [LAUGH] This it has lot of different options on here. 9:30 This would be great on, you know, a movie site. 9:33 Maybe, you know, 9:36 a car site. 9:37 >> Or if you're counting down to something. 9:39 >> Yeah, like. >> Yeah. 9:41 >> The seconds until this show ends. 9:41 >> Or if you wanna have the number 9:43 of viewers for this show, which is zero right? 9:45 >> It's in the tens, I think. 9:48 >> Yeah. >> In the solid tens. 9:50 >> Alright. 9:51 >> Anyway, a bunch of different options. 9:52 Pretty cool, pretty easy to use and, that's it. 9:54 You know, just give it the HTML you want, and boom, you're in there. 9:57 Not too much to say, pretty cool. I like it. 10:02 Just, just a nice little tool to have in the arsenal there. 10:06 >> Nice. Alright, I like it a lot. 10:08 Well, speaking of tools in the arsenal, next 10:10 up is a huge list of front-end dev bookmarks. 10:12 This is a list on GitHub. 10:16 And pull requests are welcome. 10:19 So you can go ahead and contribute to this list. 10:21 And it's pretty extensive 10:25 here, so, no matter what you're into, or what you wanna 10:28 know about front end dev, its probably got something for you. 10:32 Here's typography, there's a whole bunch of stuff there. 10:37 >> [CROSSTALK] Not seeing any Tree House links in here. 10:41 >> No. Huh. 10:43 That's really weird. >> I'm gonna submit a poll request. 10:44 >> There's animation libraries. 10:47 One of which, I've put together, but I don't actually see it 10:50 listed there either, [COUGH], that's probably a good idea, not to list it. 10:53 there's, there's widgets here. 10:59 All sorts of things. 11:02 >> This is very extensive. >> Again. 11:03 >> Look at all that scrolling. 11:04 That's how big this webpage is. 11:05 >> Not a whole lot to say about 11:07 it, but wow, it's a really, really comprehensive list. 11:09 >> Yeah. 11:12 Next up we have another list from GitHub by the user MHM5000. 11:13 >> It's a list of lists, nest of lists. 11:17 >> Yeah, 11:18 he's done a wonderful thing and complied a list of all 11:18 of the links that you see here on the Tree House show. 11:22 >> Which now [LAUGH] the link to this list of Treehouse 11:25 Show links will appear on the list of Treehouse Show links. 11:29 >> Wow. 11:34 So if you click it, you'll be in the same spot. 11:35 >> Right. 11:37 >> Wow. 11:37 >> Wow. I just got incepted. 11:38 >> [LAUGH] Yeah. 11:39 No, this is this is a great list. How could it 11:40 not be great? We came up with it. 11:43 I mean, the original links. 11:45 >> Right. 11:46 >> Anyway, thanks so much for putting that together. 11:48 And yeah, we'll have a link to that, as Nick said, in the show notes. 11:50 >> That's right. 11:54 >> So, I think that's about all we got for this week. 11:55 Nick, who are you on Twitter? 11:57 >> I am @nickrp. 11:58 >> And I am @jseifer, I recommend following 11:59 me, on Twitter, maybe not, so much Nick. 12:02 For more information on anything we talked about on this show, check out the links 12:04 at youtube.com/gotreehouse, or search for us in iTunes at The Tree House Show. 12:08 >> And of course, if you'd like to see more videos like this one about web 12:14 design, web development, business, mobile, and so much 12:18 more, be sure to check us out at teamtreehouse.com. 12:21 Thanks so much for watching and we'll see you next week. 12:24 [MUSIC] 12:27