1 00:00:00,150 --> 00:00:00,930 I'm Nick Pettit. 2 00:00:00,930 --> 00:00:01,920 >> I'm Jason Seifer. 3 00:00:01,920 --> 00:00:04,820 >> And you're watching the Treehouse Show, your weekly dose of internet where we 4 00:00:04,820 --> 00:00:07,670 talk about all things web design, web development and more. 5 00:00:07,670 --> 00:00:12,739 >> In this episode we'll be talking about touch events, font downloads and more. 6 00:00:12,739 --> 00:00:14,299 >> Let's check it out. 7 00:00:14,299 --> 00:00:19,314 [MUSIC] 8 00:00:19,314 --> 00:00:22,050 >> First up we have a project called Touchy. 9 00:00:22,050 --> 00:00:25,560 Now this is not talking about Nick and mine's emotional state. 10 00:00:25,560 --> 00:00:31,430 This is a jQuery plugin for handling different touch events on mobile devices. 11 00:00:31,430 --> 00:00:34,510 Now if we go ahead and look at the webpage here, 12 00:00:34,510 --> 00:00:41,210 we can see that what this does is a plugin that exposes event data like velocity for 13 00:00:41,210 --> 00:00:46,510 these different kinds of events, longpress, drag, pinch, rotate and swipe. 14 00:00:47,530 --> 00:00:52,250 Now you can use this to prevent a conflict between a drag and a swipe. 15 00:00:52,250 --> 00:00:55,580 And the most useful part is that you get the pinch event 16 00:00:55,580 --> 00:01:00,370 abstracted across Android and iOS devices. 17 00:01:00,370 --> 00:01:05,430 Now we can go ahead and look at the code here on GitHub. 18 00:01:05,430 --> 00:01:10,930 And you can see it's very easy to use, just drop jQuery and Touchy into your page 19 00:01:10,930 --> 00:01:16,380 and then you can go ahead and set this all up into a function. 20 00:01:16,380 --> 00:01:21,075 And we can see we grab this div and bind to the event. 21 00:01:21,075 --> 00:01:26,360 Touchy-pinch if we wanna bind to the pinch event. 22 00:01:26,360 --> 00:01:31,100 And then we send in the function that we want which in this case is to apply a CSS 23 00:01:31,100 --> 00:01:38,030 transformation that scales and actually in this case just scales the target. 24 00:01:38,030 --> 00:01:44,040 Now, the events that are supported are the longpress, drag, pinch, rotate and swipe. 25 00:01:44,040 --> 00:01:50,040 And you get all sorts of data passed in to the different event handlers. 26 00:01:50,040 --> 00:01:52,453 The event comes in as an object. 27 00:01:52,453 --> 00:01:56,590 The phase which is the start, move or end of the gesture and you 28 00:01:56,590 --> 00:02:01,360 can of course perform different functions at each of these different points and 29 00:02:01,360 --> 00:02:06,400 also the target which is jQuery object wrapping the event target. 30 00:02:06,400 --> 00:02:10,300 Some of these also support additional information about the gesture. 31 00:02:11,550 --> 00:02:15,970 Now you get different options for each of the different events. 32 00:02:15,970 --> 00:02:19,040 And this is just very, very nice to use and 33 00:02:19,040 --> 00:02:22,290 you can also find things like required touches. 34 00:02:22,290 --> 00:02:27,090 Which is how many touches it's going to take untill the event actually fires. 35 00:02:27,090 --> 00:02:30,740 Anyway, this is a great plugin to use if you need to detect these events. 36 00:02:30,740 --> 00:02:34,030 So go ahead and check it out in the show notes right below the video here. 37 00:02:34,030 --> 00:02:34,990 >> Very nice stuff. 38 00:02:34,990 --> 00:02:40,320 Well, next up we have a great blog post about how to minimize font downloads. 39 00:02:40,320 --> 00:02:42,740 And I'll, there, there's good news and bad news here. 40 00:02:42,740 --> 00:02:44,270 I'll tell you the good news first. 41 00:02:44,270 --> 00:02:46,150 >> You just click a little button on the window, right? 42 00:02:46,150 --> 00:02:46,680 >> Nope. 43 00:02:46,680 --> 00:02:47,253 >> Minimize. >> Not. 44 00:02:47,253 --> 00:02:48,275 >> Minimize while the fonts are downloading. 45 00:02:48,275 --> 00:02:49,528 >> Not, not at all. 46 00:02:49,528 --> 00:02:50,805 That's not how that works. 47 00:02:50,805 --> 00:02:51,858 >> Not talking about the window? 48 00:02:51,858 --> 00:02:53,976 >> Fonts can be big. 49 00:02:53,976 --> 00:02:58,791 Fonts can take up, maybe 300 KB sometimes and if you have a bunch of 50 00:02:58,791 --> 00:03:04,510 fonts that can add up pretty quickly to multiple megabytes on a website. 51 00:03:04,510 --> 00:03:10,940 However, there's a way to let the browser deal with these larger fonts and 52 00:03:10,940 --> 00:03:16,170 you'll notice here in this font face CSS we have this little 53 00:03:16,170 --> 00:03:19,820 property here called Unicode range. 54 00:03:19,820 --> 00:03:20,950 So what does that do? 55 00:03:20,950 --> 00:03:24,100 Well it tells the browser that when it 56 00:03:24,100 --> 00:03:29,600 gets it's font to only download this range of Unicode characters. 57 00:03:29,600 --> 00:03:35,320 So for example, that could be the Unicode range u plus zero 58 00:03:35,320 --> 00:03:41,560 to a zero, and that's gonna be basic letters, numbers, and punctuation. 59 00:03:41,560 --> 00:03:44,740 And if you actually need more stuff you can 60 00:03:44,740 --> 00:03:50,480 include this extended version which is basically the rest of them. 61 00:03:50,480 --> 00:03:54,750 And the browser will be smart enough to only grab the subsets that it 62 00:03:54,750 --> 00:03:55,580 actually needs. 63 00:03:55,580 --> 00:03:58,190 So if you don't need these other characters, 64 00:03:58,190 --> 00:04:00,500 it won't actually even download them. 65 00:04:00,500 --> 00:04:03,180 And that's gonna result in much smaller downloads. 66 00:04:03,180 --> 00:04:04,420 Now I said there was bad news. 67 00:04:04,420 --> 00:04:05,220 Well? 68 00:04:05,220 --> 00:04:06,610 >> I'm ready. >> The bad news is, 69 00:04:06,610 --> 00:04:10,180 browser support, as you probably guessed, is not that great. 70 00:04:10,180 --> 00:04:12,440 There's Safari, which downloads all the fonts. 71 00:04:12,440 --> 00:04:14,830 There's Internet Explorer, which downloads all the fonts. 72 00:04:14,830 --> 00:04:18,750 Firefox, which is kind of broken in some ways. 73 00:04:18,750 --> 00:04:21,160 Chrome actually does the right thing. 74 00:04:21,160 --> 00:04:27,660 It downloads only fonts that you need and then Opera is also good as well. 75 00:04:27,660 --> 00:04:31,760 So, if you want this to actually work in your 76 00:04:31,760 --> 00:04:36,060 browser you should go to the browser vendors and push for it to be fixed. 77 00:04:36,060 --> 00:04:40,990 There's links here to the bug reports for Safari and Internet Explorer. 78 00:04:40,990 --> 00:04:45,160 And you can tell them hey, this is something that's important to me and 79 00:04:45,160 --> 00:04:49,120 I'd like you to work on this over other things first. 80 00:04:49,120 --> 00:04:49,820 So- >> I hope they don't. 81 00:04:49,820 --> 00:04:52,000 I hope, I hope they don't think you're too touchy if you do that. 82 00:04:52,000 --> 00:04:55,170 You know, like if they say no. 83 00:04:55,170 --> 00:04:56,700 >> I, I get what you're saying. 84 00:04:56,700 --> 00:04:57,200 Anyway. 85 00:04:57,200 --> 00:04:58,900 >> Cuz that was the first project we covered. 86 00:05:00,280 --> 00:05:01,520 >> That is. 87 00:05:01,520 --> 00:05:02,020 >> The joke. 88 00:05:03,400 --> 00:05:08,490 >> One way you can make your, your fonts smaller in, in Chrome at least. 89 00:05:08,490 --> 00:05:09,150 >> At least for now. 90 00:05:09,150 --> 00:05:13,310 Until the browser venders support it based on all of our feedback. 91 00:05:13,310 --> 00:05:16,280 >> So just whine and complain and and it could happen. 92 00:05:17,410 --> 00:05:18,300 You can get what you want. 93 00:05:18,300 --> 00:05:22,000 >> Yeah that's a really good message to send to, to the people. 94 00:05:22,000 --> 00:05:22,770 >> Yep. 95 00:05:22,770 --> 00:05:25,070 >> Next up we have a project called touch swipe. 96 00:05:25,070 --> 00:05:28,270 This is a jQuery plugin for touch devices. 97 00:05:28,270 --> 00:05:31,520 Now this is a little bit different than Touchy in that 98 00:05:31,520 --> 00:05:35,380 it is used mainly for swiping. 99 00:05:35,380 --> 00:05:41,220 Now, this detects swipes in four different directions, up, down, left, and right. 100 00:05:41,220 --> 00:05:43,420 This also detects pinches, but 101 00:05:43,420 --> 00:05:47,260 really, you're gonna be wanting to detect the swipes. 102 00:05:47,260 --> 00:05:50,400 I'll go head and take a look at the demo right here. 103 00:05:50,400 --> 00:05:54,380 You'll see this it, it says swipe me in this div here, and 104 00:05:54,380 --> 00:06:00,550 I can just kinda grab it, click with the mouse, and it tells me that I swiped left. 105 00:06:00,550 --> 00:06:04,660 Wow, it's great work for today Jason, you're pretty much done. 106 00:06:04,660 --> 00:06:09,250 No, but what's really nice about this is this will tell you all sorts of 107 00:06:09,250 --> 00:06:14,280 different things about what is going on with the status of your swipes. 108 00:06:14,280 --> 00:06:15,990 So you can handle it. 109 00:06:15,990 --> 00:06:18,320 You'll see I just started swiping. 110 00:06:18,320 --> 00:06:20,900 It shows the different phase that we're in. 111 00:06:20,900 --> 00:06:23,370 The direction which is left, and 112 00:06:23,370 --> 00:06:27,980 the duration which is increasing as I go along here. 113 00:06:27,980 --> 00:06:30,220 And it will also tell you the distance. 114 00:06:30,220 --> 00:06:34,980 So you can set thresholds here, you can see over maxTime threshold. 115 00:06:34,980 --> 00:06:38,790 Hey, alright, well somebody is swiping a little bit too long now, I'd like to 116 00:06:38,790 --> 00:06:42,890 cancel the event that I was going to do because they got distracted or something. 117 00:06:42,890 --> 00:06:44,510 And there's also a hanbler, 118 00:06:44,510 --> 00:06:49,380 handler that you can trigger once you reach the different threshold. 119 00:06:49,380 --> 00:06:51,512 Anyway there are a lot of different options in this plugin. 120 00:06:51,512 --> 00:06:54,434 It's a great plugin, you might want to use this in case you need to do 121 00:06:54,434 --> 00:06:56,913 more complicated swipes that Touchy doesn't support. 122 00:06:56,913 --> 00:07:00,443 Anyway, check it out in the short notes which are right below the video. 123 00:07:00,443 --> 00:07:05,020 >> Very nice stuff well next up is this wonderful blog post called iOS 8 and 124 00:07:05,020 --> 00:07:07,065 iPhone 6 for web developers and 125 00:07:07,065 --> 00:07:11,390 designers: next evolution for Safari and native webapps. 126 00:07:11,390 --> 00:07:16,920 That's a really long title, but it's also a really long, long blog post. 127 00:07:16,920 --> 00:07:18,230 I'm scrolling down here. 128 00:07:18,230 --> 00:07:20,640 Look at this little, this little scroll bar over here. 129 00:07:20,640 --> 00:07:23,290 >> Wow. >> Look at how long this post is. 130 00:07:23,290 --> 00:07:25,060 But. >> Let me go get a book while you 131 00:07:25,060 --> 00:07:26,400 read this post. 132 00:07:26,400 --> 00:07:28,120 >> It basically is a book. 133 00:07:28,120 --> 00:07:30,050 It's a, it's a great post though. 134 00:07:30,050 --> 00:07:30,590 >> Small book. 135 00:07:30,590 --> 00:07:34,994 >> All about iOS 8 and iPhone 6. 136 00:07:34,994 --> 00:07:39,538 And basically, what it means for people like you and me, web designers and 137 00:07:39,538 --> 00:07:41,100 web developers. 138 00:07:41,100 --> 00:07:45,540 There's a couple of new HTML 5 API's particularly, or 139 00:07:45,540 --> 00:07:51,050 one that I'm particularly excited about, is WebGL, it supported in iOS 8. 140 00:07:51,050 --> 00:07:57,350 So you can now do real cool 3D graphics directly in a mobile web browser. 141 00:07:57,350 --> 00:07:58,600 It is the future. 142 00:07:58,600 --> 00:08:02,680 You can also do the navigation timing API which allows you 143 00:08:02,680 --> 00:08:06,130 to get much more precise timing than you could in the past. 144 00:08:06,130 --> 00:08:07,230 There's also Index DB. 145 00:08:07,230 --> 00:08:08,430 It's pretty cool. 146 00:08:08,430 --> 00:08:11,280 A bunch of cool stuff here. 147 00:08:11,280 --> 00:08:17,110 Starts out with a couple of stats on the iPhone 6 and 6 Plus and tells you exactly 148 00:08:17,110 --> 00:08:22,700 the view port's device width in CSS pixels different than actual pixels, 149 00:08:22,700 --> 00:08:27,050 because, of course, these are some pretty high resolution devices. 150 00:08:27,050 --> 00:08:31,140 As you can see down here, but here are the CSS pixels, and 151 00:08:31,140 --> 00:08:37,770 that's really important to know if you're dealing in absolute values in your CSS. 152 00:08:37,770 --> 00:08:38,830 And also- >> I don't think they're supposed to 153 00:08:38,830 --> 00:08:39,870 deal in absolutes, right? 154 00:08:40,910 --> 00:08:42,640 >> Or is that the Sith? 155 00:08:42,640 --> 00:08:44,790 >> I think that's the, the Sith actually. 156 00:08:44,790 --> 00:08:46,730 >> Huh. >> Yeah, they deal in absolutes. 157 00:08:46,730 --> 00:08:47,810 >> Not webpages, okay. 158 00:08:47,810 --> 00:08:49,020 >> Nope. >> Got it. 159 00:08:49,020 --> 00:08:50,758 >> Nope, different topic. 160 00:08:50,758 --> 00:08:58,541 here, [COUGH] here is the site mediaquerytest.com. 161 00:08:58,541 --> 00:09:04,630 And it tells you a bunch of stats and this is of course rendered in iOS 8. 162 00:09:04,630 --> 00:09:10,240 And it tells you all sorts of useful bits of information 163 00:09:10,240 --> 00:09:14,950 if you're building a responsive sight which of course you probably should be. 164 00:09:14,950 --> 00:09:19,270 Very cool stuff, anyway there's a whole lot more detail in this post. 165 00:09:19,270 --> 00:09:22,000 Again said that iOS 8 supports WebGL. 166 00:09:22,000 --> 00:09:26,660 There's a little screenshot of the fish GL example running on iOS8. 167 00:09:26,660 --> 00:09:29,460 Pretty cool to check out if you haven't done so already. 168 00:09:29,460 --> 00:09:31,830 But anyway there's lots more stuff in this post. 169 00:09:31,830 --> 00:09:33,800 Not gonna get into all of it but, 170 00:09:33,800 --> 00:09:36,470 definitely be sure to check this out because, of course the iPhone 6 and 171 00:09:36,470 --> 00:09:40,570 6 Plus are pretty popular phones and it's important to support them. 172 00:09:40,570 --> 00:09:42,630 >> Yeah, they're, they're not going away. 173 00:09:42,630 --> 00:09:43,370 >> Nope. 174 00:09:43,370 --> 00:09:48,450 >> Next up, we have a blog post for a Web Components punch list. 175 00:09:48,450 --> 00:09:53,460 Now if you are developing sites and using Web Components, good for you. 176 00:09:53,460 --> 00:09:55,425 Web Components are kind of a, 177 00:09:55,425 --> 00:09:58,380 a big deal and something that you should be prepared to use. 178 00:09:58,380 --> 00:09:59,930 We've talked about that on the show before, so 179 00:09:59,930 --> 00:10:02,530 we're not gonna totally get into it right now. 180 00:10:02,530 --> 00:10:06,250 But, there is a really nice punch list here that you should keep in 181 00:10:06,250 --> 00:10:09,980 mind when you are developing web components. 182 00:10:09,980 --> 00:10:14,050 Now this is really important if you're developing applications. 183 00:10:14,050 --> 00:10:15,920 Now here's some of the things that you should keep in mind. 184 00:10:17,060 --> 00:10:19,440 Is the web component focusable? 185 00:10:19,440 --> 00:10:22,710 Can you get control of it from the keyboard? 186 00:10:22,710 --> 00:10:24,210 >> Is Jason focusable? 187 00:10:24,210 --> 00:10:26,660 I don't think he is focusable at all. 188 00:10:27,770 --> 00:10:28,356 >> What were we talking about? 189 00:10:28,356 --> 00:10:38,356 [BLANK_AUDIO] 190 00:10:42,584 --> 00:10:45,172 Next up is the element operable. 191 00:10:45,172 --> 00:10:48,490 Can you use the control with the keyboard? 192 00:10:48,490 --> 00:10:51,600 Again, these are both things that are going to be very important when you 193 00:10:51,600 --> 00:10:54,410 are developing rich internet applications. 194 00:10:54,410 --> 00:10:58,660 And actually, they take note of the ARIA design patterns. 195 00:10:58,660 --> 00:11:05,860 ARIA is the accessible rich internet application design guidelines. 196 00:11:05,860 --> 00:11:06,640 >> Good job. 197 00:11:06,640 --> 00:11:09,580 >> Anyway, all of these different attributes are things you 198 00:11:09,580 --> 00:11:13,600 should keep in mind because web sites need to be accessibility. 199 00:11:15,210 --> 00:11:16,480 Why do they need to be accessible? 200 00:11:16,480 --> 00:11:18,470 Well, so people can use them. 201 00:11:18,470 --> 00:11:20,370 Anyway, go ahead, take a look at this checklist. 202 00:11:20,370 --> 00:11:22,730 We'll have a link to that in the show notes right below the video. 203 00:11:22,730 --> 00:11:25,240 And that is all we have time for this week. 204 00:11:25,240 --> 00:11:26,370 Nick, who are you on Twitter? 205 00:11:26,370 --> 00:11:29,260 >> I am @nickrp >> And I am @jseifer. 206 00:11:29,260 --> 00:11:30,558 It's been nice talking to you. 207 00:11:30,558 --> 00:11:32,529 We will talk to you next week. 208 00:11:32,529 --> 00:11:40,061 [MUSIC] 209 00:11:40,061 --> 00:11:40,861 I'm Nick Pettit. 210 00:11:40,861 --> 00:11:43,246 [LAUGH] Do you need me to start it again? 211 00:11:43,246 --> 00:11:46,488 [LAUGH] [COUGH] I'm Nick Pettit. 212 00:11:46,488 --> 00:11:48,412 >> Experts.