You've already started watching Episode 64: Touchscreen UI events, Sprite and checkbox animation, Lo-Dash
Episode 64: Touchscreen UI events, Sprite and checkbox animation, Lo-Dash
12:34 with Nick Pettit and Jason SeiferIn this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, HTML5, front end development, and more.
-
0:00
>> I'm Nick Pettit. >> I'm Jason Seifer.
-
0:02
>> And you're watching The Treehouse Show, your weekly dose of internets
-
0:05
where we talk about all things web design, web development, and more.
-
0:08
>> In this episode, we'll be talking about
-
0:10
touch libraries, grid forms, circle type, and more.
-
0:14
>> Let's check it out.
-
0:15
[MUSIC]
-
0:20
>> First up, Nick, we have a library called touche.js.
-
0:24
Or touchy.js?
-
0:26
>> Touch, touchy, touché, one of those.
-
0:28
>> It's spelled touch with an E, but there's no accent on the E.
-
0:32
>> So we're not sure. >> So we're not sure, essentially.
-
0:34
Anyway, this is a pretty cool library that is, it's designed for touch screen devices
-
0:40
like phones and tablets and what it does is removes the delay that happens when
-
0:45
you touch an element on the page.
-
0:47
Now, there is a 300 millisecond delay, that happens on touch devices.
-
0:51
You know, it waits for a click, that
-
0:53
doesn't work, so then it registers the touch.
-
0:55
But you can access that in JavaScript, you can kinda remap it.
-
0:59
So this is a really, really great library.
-
1:03
now, what it does, removes the 300 millisecond delay.
-
1:07
And then it also takes your click events applied with JQuery and then remaps
-
1:10
them to the touch N event for devices that support touch.
-
1:14
And finally, if you're not using JQuery then it
-
1:16
gives you a method called On for you to use.
-
1:20
As you can see, it's very, very easy to use.
-
1:22
You just give it the path to touche.js.
-
1:26
And then all you need to do is call the touch or touche
-
1:31
function, and then say hey what happens on the click, well go ahead and
-
1:36
handle the click, pass the function, whatever.
-
1:39
If you're curious about how it works you can check it out on GitHub.
-
1:43
I really like this library.
-
1:45
It's pretty simple.
-
1:46
You know, we've covered other libraries that do similar things before, but
-
1:49
this one does just the bare minimum so definitely check that out.
-
1:54
>> Touché.
-
1:54
I don't think that was the correct use of touché at all.
-
1:59
>> I know, that's ironic. >> But, it felt
-
2:01
like an appropriate spot to use it in.
-
2:05
Next up is a small JavaScript library called Motio.
-
2:09
I know that because it says, small JavaScript library, on the page.
-
2:13
It's for sprite-based animations in panning so you
-
2:16
can see here we have this cloud background.
-
2:19
>> It's very relaxing. >> It's panning by slowly.
-
2:21
Man, I'm drifting off to sleep here. It's only three kilobytes in production.
-
2:26
1.5 kilobytes g-zipped so it's very, very small.
-
2:30
It has no dependencies, it works everywhere,
-
2:32
although there is a jQuery plug in.
-
2:35
If you would like to use that.
-
2:36
Now what the heck does this do? Well you can make some clouds pan by.
-
2:40
>> Okay
-
2:40
>> So if I hover my house over here you
-
2:43
can go ahead and see what that might look like.
-
2:46
>> I feel like I am falling.
-
2:47
>> Well that's wonderful and, you can also animate sprites,
-
2:52
so that's another example.
-
2:54
You can create these 360 interactive views, so
-
2:58
essentially that's just swapping one sprite for another,
-
3:03
so we're just seeing a bunch of different
-
3:04
pictures here and swapping them in and out.
-
3:07
And then you can have extreme spriting, as shown in the example here.
-
3:12
>> That's pretty extreme.
-
3:13
>> Or you can actually create a entire video game here.
-
3:16
Excuse me,
-
3:17
you can go ahead and kick there. That's pretty awesome.
-
3:21
But anyway, that's Motio, pretty, pretty cool stuff.
-
3:26
>> Yeah. It's nice.
-
3:28
Like, I like it, pretty relaxing except for that part
-
3:30
where I felt like I was falling through the clouds.
-
3:32
>> Hm.
-
3:32
>> Next up we have a project called Gridforms.
-
3:34
Their tag line is data entry can be beautiful.
-
3:38
This is a library that as you might guess arranges your forms in
-
3:42
a grid. >> Into a grid, oh.
-
3:44
>> Yeah, into a grid.
-
3:46
But it actually is pretty good looking, if you, if you take a look
-
3:49
at the site right here, you can give it basically the full width of
-
3:53
whatever container it's in and it gives it a nice highlighted area, so you
-
3:59
can see the rest of this page is like a, an off white color.
-
4:03
>> Look at that.
-
4:04
It's wonderful. I feel like I'm doing my taxes.
-
4:05
>> Yeah, doesn't it? If you want that,
-
4:07
that government look on your websites, you know, if you, if you don't have
-
4:11
enough bureaucracy feeling in your web applications,
-
4:13
then go ahead and use grid form.
-
4:15
[LAUGH] But it's you know it's pretty easy to use.
-
4:18
Here's, here's an example of a bank application, you
-
4:21
know this would be great obviously if you're a bank.
-
4:24
>> We're really selling it here.
-
4:25
>> Yeah, really, anyway no.
-
4:28
It's nice, you know, pretty, pretty easy to use.
-
4:31
A little
-
4:32
bit of JavaScript and CSS. You can download it on GitHub.
-
4:35
Take a look at it if you're interested.
-
4:37
You can find a link to this in our show notes at youtube.com/gotreehouse.
-
4:41
Or on iTunes, search for us at The Treehouse Show.
-
4:45
>> Next up there's this really cool post over at Codrops.
-
4:48
I love this blog so much.
-
4:50
It's called animated checkboxes and radio buttons with SVG.
-
4:56
Now when I first saw this,
-
4:58
I thought well, what could be so special about radio buttons or SVGs?
-
5:02
I mean, they're pretty cool on their own, but
-
5:05
when I went ahead and clicked, woah, look at that.
-
5:08
It actually X's those off.
-
5:11
>> Is that you doing that in real time? >> And animates the SVGs.
-
5:14
Nope. This is a, this is real life Internet.
-
5:17
>> Wow.
-
5:18
>> You can also get a couple of different effects uh,by using animated
-
5:23
SVGs here.
-
5:23
So, here you have this kind of filling in the bubble effect.
-
5:28
You can have a more organic check for checkboxes.
-
5:32
You can also have circles around radio buttons.
-
5:37
You can also fill in stuff for checkboxes as well similar to what
-
5:43
we saw previously, all sorts of different types of effects can be applied here.
-
5:49
So, how the heck are they doing this? Well, they're using SVG path transitions.
-
5:56
So, they link to this cool article about drawing animated lines in SVG's
-
6:02
and this takes the idea a step further, by applying them to form elements.
-
6:07
So they essentially hide the real form element and
-
6:11
then they display you a separate pseudo element that
-
6:15
actually is what gets animated. So, pretty cool stuff.
-
6:19
You can download the source code there or you can just play with the demo.
-
6:22
I could play with that all day. It's pretty awesome.
-
6:25
But here's all the CSS and HTML with a tutorial on how to do it.
-
6:30
So, pretty cool post. >> Very nice.
-
6:32
Next up, we have a project called Low Dash.
-
6:35
Low Dash is a JavaScript library that's kind of like an Underscore replacement.
-
6:39
If you've never
-
6:40
used Underscore, it gives you just a lot of utility
-
6:43
methods when working with arrays, collections, different things like that.
-
6:47
So, they recently released version 2.2.1.
-
6:51
And it's pretty great. So let's take a look.
-
6:55
Here's some of the features that are not in Underscore.
-
6:58
Things like dealing with currying, forEach being chainable.
-
7:04
Pull and remove for
-
7:06
doing different things to arrays.
-
7:07
But let's take a look at the documentation, you can see
-
7:09
on the left here, tons of different options when working with arrays.
-
7:13
You can get the first item, find the index, get a range, you can
-
7:18
chain different things, things dealing with collections
-
7:21
which may or may not be arrays.
-
7:23
You know a lot of these things are convenience methods that you might be
-
7:26
used to in other programming languages such
-
7:29
as you know, Ruby, Python, things that
-
7:31
you might be missing in JavaScript, this
-
7:32
library implements, and it does it really well.
-
7:35
So, I recommend checking it out.
-
7:36
Again, we'll have a link to it in the show notes.
-
7:39
Not to much to say, really easy to use.
-
7:40
>> Yeah, no, you really underscored why you might wanna use it.
-
7:45
Okay.
-
7:46
Next up is CircleType.js.
-
7:51
If we take a look at this beautiful looking red and white
-
7:56
text here, this lovely font. We can go ahead and highlight it.
-
8:00
And you see that it's actually real text on the page.
-
8:03
This is not an image. >> Wow.
-
8:06
>> CircleType.js is just a very small jQuery plug-in
-
8:10
and the way you use it is by selecting an element as you would in jQuery,
-
8:16
and then you, you use CircleType, and you just say, the radius that
-
8:21
you wanna use.
-
8:22
You can also change the direction here, so you can set
-
8:25
direction to negative one, if you want a reversed arc here.
-
8:29
>> It's like a smile.
-
8:30
>> Or you can just have an auto radius, so
-
8:33
if you don't give circle type a radius, it will just
-
8:37
put it in a complete circle and there's a whole
-
8:40
bunch of other cool little bits that you can play with.
-
8:43
This works in Internet Explorer 9 and up,
-
8:47
so that's probably the only browser where you might experience a couple of hiccups
-
8:51
with this but pretty much every other it browser works is in in heavy usage.
-
8:58
So, you should be fine there.
-
9:00
But pretty cool, so if you want to go ahead and make a little bit of Word Art.
-
9:04
>> Yeah. >> On your web page.
-
9:05
>> Was gonna say, it reminds me of MS Publisher.
-
9:07
>> You can go ahead and do that now. >> Circa 2002.
-
9:09
>> Hmm.
-
9:10
It's wonderful. >> Yeah.
-
9:11
>> Next up
-
9:12
we have a project called odometer.
-
9:14
As you might expect, it gives you odometer like functionality on you webpages.
-
9:20
So check it out. It's pretty cool.
-
9:22
I'll re-load the page here so you can see these letters coming in and wow.
-
9:25
Look at that.
-
9:26
>> Whoa.
-
9:26
>> Are we in a movie or on a web page? >> Whew.
-
9:30
anyway.
-
9:30
[LAUGH] This it has lot of different options on here.
-
9:33
This would be great on, you know, a movie site.
-
9:36
Maybe, you know,
-
9:37
a car site.
-
9:39
>> Or if you're counting down to something.
-
9:41
>> Yeah, like. >> Yeah.
-
9:41
>> The seconds until this show ends.
-
9:43
>> Or if you wanna have the number
-
9:45
of viewers for this show, which is zero right?
-
9:48
>> It's in the tens, I think.
-
9:50
>> Yeah. >> In the solid tens.
-
9:51
>> Alright.
-
9:52
>> Anyway, a bunch of different options.
-
9:54
Pretty cool, pretty easy to use and, that's it.
-
9:57
You know, just give it the HTML you want, and boom, you're in there.
-
10:02
Not too much to say, pretty cool. I like it.
-
10:06
Just, just a nice little tool to have in the arsenal there.
-
10:08
>> Nice. Alright, I like it a lot.
-
10:10
Well, speaking of tools in the arsenal, next
-
10:12
up is a huge list of front-end dev bookmarks.
-
10:16
This is a list on GitHub.
-
10:19
And pull requests are welcome.
-
10:21
So you can go ahead and contribute to this list.
-
10:25
And it's pretty extensive
-
10:28
here, so, no matter what you're into, or what you wanna
-
10:32
know about front end dev, its probably got something for you.
-
10:37
Here's typography, there's a whole bunch of stuff there.
-
10:41
>> [CROSSTALK] Not seeing any Tree House links in here.
-
10:43
>> No. Huh.
-
10:44
That's really weird. >> I'm gonna submit a poll request.
-
10:47
>> There's animation libraries.
-
10:50
One of which, I've put together, but I don't actually see it
-
10:53
listed there either, [COUGH], that's probably a good idea, not to list it.
-
10:59
there's, there's widgets here.
-
11:02
All sorts of things.
-
11:03
>> This is very extensive. >> Again.
-
11:04
>> Look at all that scrolling.
-
11:05
That's how big this webpage is.
-
11:07
>> Not a whole lot to say about
-
11:09
it, but wow, it's a really, really comprehensive list.
-
11:12
>> Yeah.
-
11:13
Next up we have another list from GitHub by the user MHM5000.
-
11:17
>> It's a list of lists, nest of lists.
-
11:18
>> Yeah,
-
11:18
he's done a wonderful thing and complied a list of all
-
11:22
of the links that you see here on the Tree House show.
-
11:25
>> Which now [LAUGH] the link to this list of Treehouse
-
11:29
Show links will appear on the list of Treehouse Show links.
-
11:34
>> Wow.
-
11:35
So if you click it, you'll be in the same spot.
-
11:37
>> Right.
-
11:37
>> Wow.
-
11:38
>> Wow. I just got incepted.
-
11:39
>> [LAUGH] Yeah.
-
11:40
No, this is this is a great list. How could it
-
11:43
not be great? We came up with it.
-
11:45
I mean, the original links.
-
11:46
>> Right.
-
11:48
>> Anyway, thanks so much for putting that together.
-
11:50
And yeah, we'll have a link to that, as Nick said, in the show notes.
-
11:54
>> That's right.
-
11:55
>> So, I think that's about all we got for this week.
-
11:57
Nick, who are you on Twitter?
-
11:58
>> I am @nickrp.
-
11:59
>> And I am @jseifer, I recommend following
-
12:02
me, on Twitter, maybe not, so much Nick.
-
12:04
For more information on anything we talked about on this show, check out the links
-
12:08
at youtube.com/gotreehouse, or search for us in iTunes at The Tree House Show.
-
12:14
>> And of course, if you'd like to see more videos like this one about web
-
12:18
design, web development, business, mobile, and so much
-
12:21
more, be sure to check us out at teamtreehouse.com.
-
12:24
Thanks so much for watching and we'll see you next week.
-
12:27
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up