I'm Nick Pettit.

>> I'm Jason Seifer.

>> And you're watching the Treehouse Show, your weekly dose of internet where we

talk about all things web design, web development and more.

>> In this episode we'll be talking about touch events, font downloads and more.

>> Let's check it out.

[MUSIC]

>> First up we have a project called Touchy.

Now this is not talking about Nick and mine's emotional state.

This is a jQuery plugin for handling different touch events on mobile devices.

Now if we go ahead and look at the webpage here,

we can see that what this does is a plugin that exposes event data like velocity for

these different kinds of events, longpress, drag, pinch, rotate and swipe.

Now you can use this to prevent a conflict between a drag and a swipe.

And the most useful part is that you get the pinch event

abstracted across Android and iOS devices.

Now we can go ahead and look at the code here on GitHub.

And you can see it's very easy to use, just drop jQuery and Touchy into your page

and then you can go ahead and set this all up into a function.

And we can see we grab this div and bind to the event.

Touchy-pinch if we wanna bind to the pinch event.

And then we send in the function that we want which in this case is to apply a CSS

transformation that scales and actually in this case just scales the target.

Now, the events that are supported are the longpress, drag, pinch, rotate and swipe.

And you get all sorts of data passed in to the different event handlers.

The event comes in as an object.

The phase which is the start, move or end of the gesture and you

can of course perform different functions at each of these different points and

also the target which is jQuery object wrapping the event target.

Some of these also support additional information about the gesture.

Now you get different options for each of the different events.

And this is just very, very nice to use and

you can also find things like required touches.

Which is how many touches it's going to take untill the event actually fires.

Anyway, this is a great plugin to use if you need to detect these events.

So go ahead and check it out in the show notes right below the video here.

>> Very nice stuff.

Well, next up we have a great blog post about how to minimize font downloads.

And I'll, there, there's good news and bad news here.

I'll tell you the good news first.

>> You just click a little button on the window, right?

>> Nope.

>> Minimize. >> Not.

>> Minimize while the fonts are downloading.

>> Not, not at all.

That's not how that works.

>> Not talking about the window?

>> Fonts can be big.

Fonts can take up, maybe 300 KB sometimes and if you have a bunch of

fonts that can add up pretty quickly to multiple megabytes on a website.

However, there's a way to let the browser deal with these larger fonts and

you'll notice here in this font face CSS we have this little

property here called Unicode range.

So what does that do?

Well it tells the browser that when it

gets it's font to only download this range of Unicode characters.

So for example, that could be the Unicode range u plus zero

to a zero, and that's gonna be basic letters, numbers, and punctuation.

And if you actually need more stuff you can

include this extended version which is basically the rest of them.

And the browser will be smart enough to only grab the subsets that it

actually needs.

So if you don't need these other characters,

it won't actually even download them.

And that's gonna result in much smaller downloads.

Now I said there was bad news.

Well?

>> I'm ready. >> The bad news is,

browser support, as you probably guessed, is not that great.

There's Safari, which downloads all the fonts.

There's Internet Explorer, which downloads all the fonts.

Firefox, which is kind of broken in some ways.

Chrome actually does the right thing.

It downloads only fonts that you need and then Opera is also good as well.

So, if you want this to actually work in your

browser you should go to the browser vendors and push for it to be fixed.

There's links here to the bug reports for Safari and Internet Explorer.

And you can tell them hey, this is something that's important to me and

I'd like you to work on this over other things first.

So- >> I hope they don't.

I hope, I hope they don't think you're too touchy if you do that.

You know, like if they say no.

>> I, I get what you're saying.

Anyway.

>> Cuz that was the first project we covered.

>> That is.

>> The joke.

>> One way you can make your, your fonts smaller in, in Chrome at least.

>> At least for now.

Until the browser venders support it based on all of our feedback.

>> So just whine and complain and and it could happen.

You can get what you want.

>> Yeah that's a really good message to send to, to the people.

>> Yep.

>> Next up we have a project called touch swipe.

This is a jQuery plugin for touch devices.

Now this is a little bit different than Touchy in that

it is used mainly for swiping.

Now, this detects swipes in four different directions, up, down, left, and right.

This also detects pinches, but

really, you're gonna be wanting to detect the swipes.

I'll go head and take a look at the demo right here.

You'll see this it, it says swipe me in this div here, and

I can just kinda grab it, click with the mouse, and it tells me that I swiped left.

Wow, it's great work for today Jason, you're pretty much done.

No, but what's really nice about this is this will tell you all sorts of

different things about what is going on with the status of your swipes.

So you can handle it.

You'll see I just started swiping.

It shows the different phase that we're in.

The direction which is left, and

the duration which is increasing as I go along here.

And it will also tell you the distance.

So you can set thresholds here, you can see over maxTime threshold.

Hey, alright, well somebody is swiping a little bit too long now, I'd like to

cancel the event that I was going to do because they got distracted or something.

And there's also a hanbler,

handler that you can trigger once you reach the different threshold.

Anyway there are a lot of different options in this plugin.

It's a great plugin, you might want to use this in case you need to do

more complicated swipes that Touchy doesn't support.

Anyway, check it out in the short notes which are right below the video.

>> Very nice stuff well next up is this wonderful blog post called iOS 8 and

iPhone 6 for web developers and

designers: next evolution for Safari and native webapps.

That's a really long title, but it's also a really long, long blog post.

I'm scrolling down here.

Look at this little, this little scroll bar over here.

>> Wow. >> Look at how long this post is.

But. >> Let me go get a book while you

read this post.

>> It basically is a book.

It's a, it's a great post though.

>> Small book.

>> All about iOS 8 and iPhone 6.

And basically, what it means for people like you and me, web designers and

web developers.

There's a couple of new HTML 5 API's particularly, or

one that I'm particularly excited about, is WebGL, it supported in iOS 8.

So you can now do real cool 3D graphics directly in a mobile web browser.

It is the future.

You can also do the navigation timing API which allows you

to get much more precise timing than you could in the past.

There's also Index DB.

It's pretty cool.

A bunch of cool stuff here.

Starts out with a couple of stats on the iPhone 6 and 6 Plus and tells you exactly

the view port's device width in CSS pixels different than actual pixels,

because, of course, these are some pretty high resolution devices.

As you can see down here, but here are the CSS pixels, and

that's really important to know if you're dealing in absolute values in your CSS.

And also- >> I don't think they're supposed to

deal in absolutes, right?

>> Or is that the Sith?

>> I think that's the, the Sith actually.

>> Huh. >> Yeah, they deal in absolutes.

>> Not webpages, okay.

>> Nope. >> Got it.

>> Nope, different topic.

here, [COUGH] here is the site mediaquerytest.com.

And it tells you a bunch of stats and this is of course rendered in iOS 8.

And it tells you all sorts of useful bits of information

if you're building a responsive sight which of course you probably should be.

Very cool stuff, anyway there's a whole lot more detail in this post.

Again said that iOS 8 supports WebGL.

There's a little screenshot of the fish GL example running on iOS8.

Pretty cool to check out if you haven't done so already.

But anyway there's lots more stuff in this post.

Not gonna get into all of it but,

definitely be sure to check this out because, of course the iPhone 6 and

6 Plus are pretty popular phones and it's important to support them.

>> Yeah, they're, they're not going away.

>> Nope.

>> Next up, we have a blog post for a Web Components punch list.

Now if you are developing sites and using Web Components, good for you.

Web Components are kind of a,

a big deal and something that you should be prepared to use.

We've talked about that on the show before, so

we're not gonna totally get into it right now.

But, there is a really nice punch list here that you should keep in

mind when you are developing web components.

Now this is really important if you're developing applications.

Now here's some of the things that you should keep in mind.

Is the web component focusable?

Can you get control of it from the keyboard?

>> Is Jason focusable?

I don't think he is focusable at all.

>> What were we talking about?

[BLANK_AUDIO]

Next up is the element operable.

Can you use the control with the keyboard?

Again, these are both things that are going to be very important when you

are developing rich internet applications.

And actually, they take note of the ARIA design patterns.

ARIA is the accessible rich internet application design guidelines.

>> Good job.

>> Anyway, all of these different attributes are things you

should keep in mind because web sites need to be accessibility.

Why do they need to be accessible?

Well, so people can use them.

Anyway, go ahead, take a look at this checklist.

We'll have a link to that in the show notes right below the video.

And that is all we have time for this week.

Nick, who are you on Twitter?

>> I am @nickrp >> And I am @jseifer.

It's been nice talking to you.

We will talk to you next week.

[MUSIC]

I'm Nick Pettit.

[LAUGH] Do you need me to start it again?

[LAUGH] [COUGH] I'm Nick Pettit.

>> Experts.