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