Episode 121: Multi-Touch Gestures, UI Logic, SVG Animation

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse show. 0:02 Your weekly dose of internets where we talk about all things web design, 0:03 web development, and more. 0:06 >> In this episode we'll be talking about JavaScript multi-touch gestures, 0:08 browser UI logic, SVG animation, and more. 0:11 >> Let's check it out. 0:15 [MUSIC] 0:16 First up we have a project called Interact.js, 0:22 this actually might be pronounced inter delta C, T.js. 0:25 I am not 100% sure. 0:28 >> Who can really say? 0:30 Who, who, who's to say? 0:32 Anyway, this is a really cool JavaScript library that supports drag and 0:34 drop, resizing, and multi-touch gestures with inertia and snapping for 0:38 modern browsers and IE8 and above. 0:43 I know that because it says it on the webpage. 0:46 So let's go ahead and just look at some of these examples. 0:49 Here is a simple example of dragging and dropping. 0:52 You'll notice that I am dragging this element. 0:56 And then, hey look, it moved a distance of 196 pixels. 0:59 And this time, it moved 155 pixels. 1:03 Now, you'll notice on the left side right here, 1:07 we have interact, the interact function. 1:09 We have what we wanna call it on and then the particular action that we want. 1:12 And then we get callbacks for different parts of the process. 1:16 On here we have the on move callback which is going to 1:22 be called every time the object is dragged and moved. 1:25 And the on end which is going to be when the item has stopped being drag or ended. 1:29 Now you can also have inertia or, and even have some restrictions. 1:36 Now, the restrictions are in effect right here. 1:41 You look at this object right here, and 1:44 as I'm dragging it you'll notice that nothing is happening. 1:46 I can drop it. 1:49 But well, whatever, it just kind of stays within this outer element. 1:50 Now this one when I drag this element you'll see that these items highlight to 1:54 denote that I can drop the element inside one of these drop zones or not at all. 2:00 Now if I drop it inside the drop zone the text changes to dropped. 2:07 Dragged in and dropped and then you can see we now have 2:12 different events available for that particular example. 2:16 And we can add to the list of classes and change the text content just. 2:22 Ton of different things. 2:26 Now this can be constrained to snapping on a grid, or 2:28 we can even resize elements from the bottom left, on this particular example. 2:33 Now I can't show you these with multi-touch rotation and 2:38 gesture pinch to zooms, but 2:41 they are supported on devices that support these, such as, your cellular telephone. 2:43 Or tablet, you know, so use it in SVG files. 2:49 Anyway this is a great plugin, interact.js. 2:53 If you wanna know about it, check it out. 2:56 Very easy to use. 2:58 >> Next up, we have a blog post over on the Parse Blog called Let 3:00 the Browser Handle Your UI Logic for You. 3:03 Now what do they. 3:06 >> Sounds reasonable. 3:08 >> What do they mean by that? 3:09 Well, sometimes when you're creating interactive elements, 3:10 say a nice stylized checkbox here, it can be tempting to 3:14 actually just use something like a div or some sort of non-semantic element. 3:18 Put some JavaScript on top, maybe an animation, and 3:23 then it looks like this super cool checkbox. 3:26 But that's not a very progressively enhanced way to think about things, and 3:29 in fact, it's not a great use of browser technology that's already there for you. 3:33 The browser already has checkboxes. 3:40 So, what they're saying is why not just style those instead? 3:42 And that's a pretty, simple and obvious example. 3:47 But what about when you have something like a calendar where you need to 3:50 pick a date? 3:54 There's not really a great or 3:55 well-supported element that is equivalent to this type of UI widget. 3:58 So, what do you do? 4:04 Well, each one of these days in their calendar is 4:05 actually a radio button behind the scenes. 4:08 So, these are all just very nicely and cleverly styled radio buttons. 4:12 It's a little bit more work to get this to function properly in all sorts of. 4:17 Different web browsers that would need to use something like this, but it looks 4:23 really nice and it's progressively enhanced, which is always good. 4:27 Next up, there is a file tree here. 4:32 So this is another example of something that's a little bit more complicated. 4:35 But this file tree where you can click on a folder, open it up and 4:39 see its contents in the tree is actually not using any JavaScript at all, 4:43 which I thought was pretty amazing. 4:49 Instead they just use some CSS selectors and check boxes. 4:52 So they say if something is checked, well, then go ahead and show. 4:57 This other bit here. 5:02 Its pretty cool, pretty clever way of thinking about how to 5:05 use form elements to create these more complex UI widgets. 5:08 >> And keep them accessible. 5:13 >> Yeah. Without, you know, pouring in a ton of 5:14 JavaScript and non-semantic elements to do the same thing. 5:17 Pretty smart. 5:21 >> Yeah. Very thoughtful. 5:21 Next up we have a project called purplecoat.js. 5:23 This is a pretty cool little piece of JavaScript that lets you 5:26 create overlays on elements without using a single line of JavaScript. 5:28 So what does that mean? 5:34 If you check this button right here it says click me for a demo. 5:35 I click that and it says hey, hello from Purplecoat. 5:39 Click the button to hide this again. 5:42 So it turns those particular divs into overlays. 5:43 Now, there are some different options for this. 5:47 If you wanna use it, you can, here's an image right here on the left. 5:50 And it has a data attribute for Purplecoat and 5:53 then an identifier and then the label that you want it to have. 5:57 So once you hit Click Me over here, that label goes in to effect. 6:02 And then, we can see it on the right side. 6:07 We have the toggle, with the same identifier that was used over on the left. 6:09 Now, the example use case is a Jekyll blog theme that the author created. 6:16 And she uses that to show you which parts are customizable. 6:22 So when you click that button, the navigation, the post header and 6:27 the sidebar are all highl-, 6:32 highlighted as customizable. 6:34 And you can create multiple triggers for odds and evens as an example. 6:36 And you can even customize the color. 6:40 Anyway, a pretty cool little plugin. 6:43 Really quick. 6:45 Go ahead and check that out. 6:46 Purplecoat.js. 6:47 >> Next up is an SVG animation library thing called Walkway. 6:49 It's an easy way to animate simple SVG elements. 6:55 What do I mean by that? 7:00 Well, there was this wonderful review over on Polygon a little while back, 7:01 a game review site, where they had this really cool SVG animation. 7:06 So, I'll show you a simple demo here. 7:10 And this is actually Walkway doing all this. 7:13 So, it can draw all of these lines and 7:16 create objects basically that are done with SVG's. 7:20 How does that work? 7:24 Well, first, you need to actually install it so you can use it via CDN. 7:25 And just include this JavaScript file or you can use your favorite package manager, 7:30 whether that's Bower or Node. 7:35 Then, you just instantiate a Walkway object in your JavaScript, 7:37 and you pass it some options. 7:43 So, you can tell it things like which selector you want to use, 7:46 how long the animation should actually last. 7:49 And you can do a little bit of easing as well. 7:52 And then you call the draw function and 7:55 you can do that wherever you might need to in your JavaScript logic. 7:59 Maybe that's on a page load or maybe that's after the users clicked a button. 8:03 I don't know. It's up to you. 8:07 And then. 8:08 >> We're not here to tell you what to do. 8:10 >> And then, it will actually draw that SVG with those nice lines and 8:11 stroke paths and everything that you saw there. 8:17 Pretty cool stuff. 8:20 I like that there's actually not a whole lot of options to configure. 8:22 And you can just apply it to an SVG, and you are good to go. 8:26 >> Very nice. 8:31 Next up we have a quick little blog post on native two-way binding in JavaScript. 8:32 And this blog post goes over a couple of different ways to accomplish this 8:40 using the brand new Object.observe, which will be standard in ECMAScript seven, but 8:44 is also in the latest versions of Chrome. 8:49 And then another version that is widely supported. 8:51 Now, this is gonna be interesting if you wanna go through and see how some of 8:56 these different JavaScript libraries might implement this observation pattern. 8:59 So, in the first example, it says, observe this object. 9:05 And then for each change, 9:09 well we're gonna be binding that to this user's full name attribute. 9:11 But, we can actually go ahead and extract that, and then update a certain div. 9:14 While we do that exact observation. 9:21 And then later the author goes through and extracts that into a function. 9:25 And then goes ahead and 9:31 makes it even more generic and puts an alert in there just for fun. 9:33 Now the other way to do that is changing the get and 9:38 set methods, and this is done using object.defineProperty. 9:41 So you can define a property on this user object right here, each time get and 9:46 set are called, then the different values are going to be get and set accordingly. 9:51 Now, if you want to, you can go ahead and do this with a DOM element as well. 9:57 So the author goes through this, okay as long as we are getting and 10:03 setting these items let's go ahead and update this DOM element's value. 10:06 And then you can see later that as these are updated it stays consistent each way. 10:10 And then, the author is also nice enough to give us a TLDR with that 10:16 one function using defined property, which has more support in different browsers. 10:20 Anyway, I didn't do that justice. 10:25 I really recommend reading the blog post to get a little bit more in depth with how 10:27 you wanna do that, if this is something you're curie about, to, curious about. 10:31 It's always good to know how these things work under the hood. 10:35 >> Definitely. 10:37 Well, that's all we have time for this week. 10:38 [MUSIC] I am @nickrp on Twitter. 10:39 >> And I am @jseifer. 10:41 For more information on anything we talked about, 10:42 check out our show notes right below this video. 10:44 Thanks so much for watching, and we'll talk to you next week. 10:47 [MUSIC] 10:49

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

Sign up