Episode 115: Touch Events, Font Downloads, Native Webapps

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:00 >> And you're watching the Treehouse Show, your weekly dose of internet where we 0:01 talk about all things web design, web development and more. 0:04 >> In this episode we'll be talking about touch events, font downloads and more. 0:07 >> Let's check it out. 0:12 [MUSIC] 0:14 >> First up we have a project called Touchy. 0:19 Now this is not talking about Nick and mine's emotional state. 0:22 This is a jQuery plugin for handling different touch events on mobile devices. 0:25 Now if we go ahead and look at the webpage here, 0:31 we can see that what this does is a plugin that exposes event data like velocity for 0:34 these different kinds of events, longpress, drag, pinch, rotate and swipe. 0:41 Now you can use this to prevent a conflict between a drag and a swipe. 0:47 And the most useful part is that you get the pinch event 0:52 abstracted across Android and iOS devices. 0:55 Now we can go ahead and look at the code here on GitHub. 1:00 And you can see it's very easy to use, just drop jQuery and Touchy into your page 1:05 and then you can go ahead and set this all up into a function. 1:10 And we can see we grab this div and bind to the event. 1:16 Touchy-pinch if we wanna bind to the pinch event. 1:21 And then we send in the function that we want which in this case is to apply a CSS 1:26 transformation that scales and actually in this case just scales the target. 1:31 Now, the events that are supported are the longpress, drag, pinch, rotate and swipe. 1:38 And you get all sorts of data passed in to the different event handlers. 1:44 The event comes in as an object. 1:50 The phase which is the start, move or end of the gesture and you 1:52 can of course perform different functions at each of these different points and 1:56 also the target which is jQuery object wrapping the event target. 2:01 Some of these also support additional information about the gesture. 2:06 Now you get different options for each of the different events. 2:11 And this is just very, very nice to use and 2:15 you can also find things like required touches. 2:19 Which is how many touches it's going to take untill the event actually fires. 2:22 Anyway, this is a great plugin to use if you need to detect these events. 2:27 So go ahead and check it out in the show notes right below the video here. 2:30 >> Very nice stuff. 2:34 Well, next up we have a great blog post about how to minimize font downloads. 2:34 And I'll, there, there's good news and bad news here. 2:40 I'll tell you the good news first. 2:42 >> You just click a little button on the window, right? 2:44 >> Nope. 2:46 >> Minimize. >> Not. 2:46 >> Minimize while the fonts are downloading. 2:47 >> Not, not at all. 2:48 That's not how that works. 2:49 >> Not talking about the window? 2:50 >> Fonts can be big. 2:51 Fonts can take up, maybe 300 KB sometimes and if you have a bunch of 2:53 fonts that can add up pretty quickly to multiple megabytes on a website. 2:58 However, there's a way to let the browser deal with these larger fonts and 3:04 you'll notice here in this font face CSS we have this little 3:10 property here called Unicode range. 3:16 So what does that do? 3:19 Well it tells the browser that when it 3:20 gets it's font to only download this range of Unicode characters. 3:24 So for example, that could be the Unicode range u plus zero 3:29 to a zero, and that's gonna be basic letters, numbers, and punctuation. 3:35 And if you actually need more stuff you can 3:41 include this extended version which is basically the rest of them. 3:44 And the browser will be smart enough to only grab the subsets that it 3:50 actually needs. 3:54 So if you don't need these other characters, 3:55 it won't actually even download them. 3:58 And that's gonna result in much smaller downloads. 4:00 Now I said there was bad news. 4:03 Well? 4:04 >> I'm ready. >> The bad news is, 4:05 browser support, as you probably guessed, is not that great. 4:06 There's Safari, which downloads all the fonts. 4:10 There's Internet Explorer, which downloads all the fonts. 4:12 Firefox, which is kind of broken in some ways. 4:14 Chrome actually does the right thing. 4:18 It downloads only fonts that you need and then Opera is also good as well. 4:21 So, if you want this to actually work in your 4:27 browser you should go to the browser vendors and push for it to be fixed. 4:31 There's links here to the bug reports for Safari and Internet Explorer. 4:36 And you can tell them hey, this is something that's important to me and 4:40 I'd like you to work on this over other things first. 4:45 So- >> I hope they don't. 4:49 I hope, I hope they don't think you're too touchy if you do that. 4:49 You know, like if they say no. 4:52 >> I, I get what you're saying. 4:55 Anyway. 4:56 >> Cuz that was the first project we covered. 4:57 >> That is. 5:00 >> The joke. 5:01 >> One way you can make your, your fonts smaller in, in Chrome at least. 5:03 >> At least for now. 5:08 Until the browser venders support it based on all of our feedback. 5:09 >> So just whine and complain and and it could happen. 5:13 You can get what you want. 5:17 >> Yeah that's a really good message to send to, to the people. 5:18 >> Yep. 5:22 >> Next up we have a project called touch swipe. 5:22 This is a jQuery plugin for touch devices. 5:25 Now this is a little bit different than Touchy in that 5:28 it is used mainly for swiping. 5:31 Now, this detects swipes in four different directions, up, down, left, and right. 5:35 This also detects pinches, but 5:41 really, you're gonna be wanting to detect the swipes. 5:43 I'll go head and take a look at the demo right here. 5:47 You'll see this it, it says swipe me in this div here, and 5:50 I can just kinda grab it, click with the mouse, and it tells me that I swiped left. 5:54 Wow, it's great work for today Jason, you're pretty much done. 6:00 No, but what's really nice about this is this will tell you all sorts of 6:04 different things about what is going on with the status of your swipes. 6:09 So you can handle it. 6:14 You'll see I just started swiping. 6:15 It shows the different phase that we're in. 6:18 The direction which is left, and 6:20 the duration which is increasing as I go along here. 6:23 And it will also tell you the distance. 6:27 So you can set thresholds here, you can see over maxTime threshold. 6:30 Hey, alright, well somebody is swiping a little bit too long now, I'd like to 6:34 cancel the event that I was going to do because they got distracted or something. 6:38 And there's also a hanbler, 6:42 handler that you can trigger once you reach the different threshold. 6:44 Anyway there are a lot of different options in this plugin. 6:49 It's a great plugin, you might want to use this in case you need to do 6:51 more complicated swipes that Touchy doesn't support. 6:54 Anyway, check it out in the short notes which are right below the video. 6:56 >> Very nice stuff well next up is this wonderful blog post called iOS 8 and 7:00 iPhone 6 for web developers and 7:05 designers: next evolution for Safari and native webapps. 7:07 That's a really long title, but it's also a really long, long blog post. 7:11 I'm scrolling down here. 7:16 Look at this little, this little scroll bar over here. 7:18 >> Wow. >> Look at how long this post is. 7:20 But. >> Let me go get a book while you 7:23 read this post. 7:25 >> It basically is a book. 7:26 It's a, it's a great post though. 7:28 >> Small book. 7:30 >> All about iOS 8 and iPhone 6. 7:30 And basically, what it means for people like you and me, web designers and 7:34 web developers. 7:39 There's a couple of new HTML 5 API's particularly, or 7:41 one that I'm particularly excited about, is WebGL, it supported in iOS 8. 7:45 So you can now do real cool 3D graphics directly in a mobile web browser. 7:51 It is the future. 7:57 You can also do the navigation timing API which allows you 7:58 to get much more precise timing than you could in the past. 8:02 There's also Index DB. 8:06 It's pretty cool. 8:07 A bunch of cool stuff here. 8:08 Starts out with a couple of stats on the iPhone 6 and 6 Plus and tells you exactly 8:11 the view port's device width in CSS pixels different than actual pixels, 8:17 because, of course, these are some pretty high resolution devices. 8:22 As you can see down here, but here are the CSS pixels, and 8:27 that's really important to know if you're dealing in absolute values in your CSS. 8:31 And also- >> I don't think they're supposed to 8:37 deal in absolutes, right? 8:38 >> Or is that the Sith? 8:40 >> I think that's the, the Sith actually. 8:42 >> Huh. >> Yeah, they deal in absolutes. 8:44 >> Not webpages, okay. 8:46 >> Nope. >> Got it. 8:47 >> Nope, different topic. 8:49 here, [COUGH] here is the site mediaquerytest.com. 8:50 And it tells you a bunch of stats and this is of course rendered in iOS 8. 8:58 And it tells you all sorts of useful bits of information 9:04 if you're building a responsive sight which of course you probably should be. 9:10 Very cool stuff, anyway there's a whole lot more detail in this post. 9:14 Again said that iOS 8 supports WebGL. 9:19 There's a little screenshot of the fish GL example running on iOS8. 9:22 Pretty cool to check out if you haven't done so already. 9:26 But anyway there's lots more stuff in this post. 9:29 Not gonna get into all of it but, 9:31 definitely be sure to check this out because, of course the iPhone 6 and 9:33 6 Plus are pretty popular phones and it's important to support them. 9:36 >> Yeah, they're, they're not going away. 9:40 >> Nope. 9:42 >> Next up, we have a blog post for a Web Components punch list. 9:43 Now if you are developing sites and using Web Components, good for you. 9:48 Web Components are kind of a, 9:53 a big deal and something that you should be prepared to use. 9:55 We've talked about that on the show before, so 9:58 we're not gonna totally get into it right now. 9:59 But, there is a really nice punch list here that you should keep in 10:02 mind when you are developing web components. 10:06 Now this is really important if you're developing applications. 10:09 Now here's some of the things that you should keep in mind. 10:14 Is the web component focusable? 10:17 Can you get control of it from the keyboard? 10:19 >> Is Jason focusable? 10:22 I don't think he is focusable at all. 10:24 >> What were we talking about? 10:27 [BLANK_AUDIO] 10:28 Next up is the element operable. 10:42 Can you use the control with the keyboard? 10:45 Again, these are both things that are going to be very important when you 10:48 are developing rich internet applications. 10:51 And actually, they take note of the ARIA design patterns. 10:54 ARIA is the accessible rich internet application design guidelines. 10:58 >> Good job. 11:05 >> Anyway, all of these different attributes are things you 11:06 should keep in mind because web sites need to be accessibility. 11:09 Why do they need to be accessible? 11:15 Well, so people can use them. 11:16 Anyway, go ahead, take a look at this checklist. 11:18 We'll have a link to that in the show notes right below the video. 11:20 And that is all we have time for this week. 11:22 Nick, who are you on Twitter? 11:25 >> I am @nickrp >> And I am @jseifer. 11:26 It's been nice talking to you. 11:29 We will talk to you next week. 11:30 [MUSIC] 11:32 I'm Nick Pettit. 11:40 [LAUGH] Do you need me to start it again? 11:40 [LAUGH] [COUGH] I'm Nick Pettit. 11:43 >> Experts. 11:46