>> I'm Nick Pettit. >> I'm Jason Seifer.

>> And you're watching The Treehouse Show, your weekly dose of internets

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

>> In this episode, we'll be talking about

touch libraries, grid forms, circle type, and more.

>> Let's check it out.

[MUSIC]

>> First up, Nick, we have a library called touche.js.

Or touchy.js?

>> Touch, touchy, touché, one of those.

>> It's spelled touch with an E, but there's no accent on the E.

>> So we're not sure. >> So we're not sure, essentially.

Anyway, this is a pretty cool library that is, it's designed for touch screen devices

like phones and tablets and what it does is removes the delay that happens when

you touch an element on the page.

Now, there is a 300 millisecond delay, that happens on touch devices.

You know, it waits for a click, that

doesn't work, so then it registers the touch.

But you can access that in JavaScript, you can kinda remap it.

So this is a really, really great library.

now, what it does, removes the 300 millisecond delay.

And then it also takes your click events applied with JQuery and then remaps

them to the touch N event for devices that support touch.

And finally, if you're not using JQuery then it

gives you a method called On for you to use.

As you can see, it's very, very easy to use.

You just give it the path to touche.js.

And then all you need to do is call the touch or touche

function, and then say hey what happens on the click, well go ahead and

handle the click, pass the function, whatever.

If you're curious about how it works you can check it out on GitHub.

I really like this library.

It's pretty simple.

You know, we've covered other libraries that do similar things before, but

this one does just the bare minimum so definitely check that out.

>> Touché.

I don't think that was the correct use of touché at all.

>> I know, that's ironic. >> But, it felt

like an appropriate spot to use it in.

Next up is a small JavaScript library called Motio.

I know that because it says, small JavaScript library, on the page.

It's for sprite-based animations in panning so you

can see here we have this cloud background.

>> It's very relaxing. >> It's panning by slowly.

Man, I'm drifting off to sleep here. It's only three kilobytes in production.

1.5 kilobytes g-zipped so it's very, very small.

It has no dependencies, it works everywhere,

although there is a jQuery plug in.

If you would like to use that.

Now what the heck does this do? Well you can make some clouds pan by.

>> Okay

>> So if I hover my house over here you

can go ahead and see what that might look like.

>> I feel like I am falling.

>> Well that's wonderful and, you can also animate sprites,

so that's another example.

You can create these 360 interactive views, so

essentially that's just swapping one sprite for another,

so we're just seeing a bunch of different

pictures here and swapping them in and out.

And then you can have extreme spriting, as shown in the example here.

>> That's pretty extreme.

>> Or you can actually create a entire video game here.

Excuse me,

you can go ahead and kick there. That's pretty awesome.

But anyway, that's Motio, pretty, pretty cool stuff.

>> Yeah. It's nice.

Like, I like it, pretty relaxing except for that part

where I felt like I was falling through the clouds.

>> Hm.

>> Next up we have a project called Gridforms.

Their tag line is data entry can be beautiful.

This is a library that as you might guess arranges your forms in

a grid. >> Into a grid, oh.

>> Yeah, into a grid.

But it actually is pretty good looking, if you, if you take a look

at the site right here, you can give it basically the full width of

whatever container it's in and it gives it a nice highlighted area, so you

can see the rest of this page is like a, an off white color.

>> Look at that.

It's wonderful. I feel like I'm doing my taxes.

>> Yeah, doesn't it? If you want that,

that government look on your websites, you know, if you, if you don't have

enough bureaucracy feeling in your web applications,

then go ahead and use grid form.

[LAUGH] But it's you know it's pretty easy to use.

Here's, here's an example of a bank application, you

know this would be great obviously if you're a bank.

>> We're really selling it here.

>> Yeah, really, anyway no.

It's nice, you know, pretty, pretty easy to use.

A little

bit of JavaScript and CSS. You can download it on GitHub.

Take a look at it if you're interested.

You can find a link to this in our show notes at youtube.com/gotreehouse.

Or on iTunes, search for us at The Treehouse Show.

>> Next up there's this really cool post over at Codrops.

I love this blog so much.

It's called animated checkboxes and radio buttons with SVG.

Now when I first saw this,

I thought well, what could be so special about radio buttons or SVGs?

I mean, they're pretty cool on their own, but

when I went ahead and clicked, woah, look at that.

It actually X's those off.

>> Is that you doing that in real time? >> And animates the SVGs.

Nope. This is a, this is real life Internet.

>> Wow.

>> You can also get a couple of different effects uh,by using animated

SVGs here.

So, here you have this kind of filling in the bubble effect.

You can have a more organic check for checkboxes.

You can also have circles around radio buttons.

You can also fill in stuff for checkboxes as well similar to what

we saw previously, all sorts of different types of effects can be applied here.

So, how the heck are they doing this? Well, they're using SVG path transitions.

So, they link to this cool article about drawing animated lines in SVG's

and this takes the idea a step further, by applying them to form elements.

So they essentially hide the real form element and

then they display you a separate pseudo element that

actually is what gets animated. So, pretty cool stuff.

You can download the source code there or you can just play with the demo.

I could play with that all day. It's pretty awesome.

But here's all the CSS and HTML with a tutorial on how to do it.

So, pretty cool post. >> Very nice.

Next up, we have a project called Low Dash.

Low Dash is a JavaScript library that's kind of like an Underscore replacement.

If you've never

used Underscore, it gives you just a lot of utility

methods when working with arrays, collections, different things like that.

So, they recently released version 2.2.1.

And it's pretty great. So let's take a look.

Here's some of the features that are not in Underscore.

Things like dealing with currying, forEach being chainable.

Pull and remove for

doing different things to arrays.

But let's take a look at the documentation, you can see

on the left here, tons of different options when working with arrays.

You can get the first item, find the index, get a range, you can

chain different things, things dealing with collections

which may or may not be arrays.

You know a lot of these things are convenience methods that you might be

used to in other programming languages such

as you know, Ruby, Python, things that

you might be missing in JavaScript, this

library implements, and it does it really well.

So, I recommend checking it out.

Again, we'll have a link to it in the show notes.

Not to much to say, really easy to use.

>> Yeah, no, you really underscored why you might wanna use it.

Okay.

Next up is CircleType.js.

If we take a look at this beautiful looking red and white

text here, this lovely font. We can go ahead and highlight it.

And you see that it's actually real text on the page.

This is not an image. >> Wow.

>> CircleType.js is just a very small jQuery plug-in

and the way you use it is by selecting an element as you would in jQuery,

and then you, you use CircleType, and you just say, the radius that

you wanna use.

You can also change the direction here, so you can set

direction to negative one, if you want a reversed arc here.

>> It's like a smile.

>> Or you can just have an auto radius, so

if you don't give circle type a radius, it will just

put it in a complete circle and there's a whole

bunch of other cool little bits that you can play with.

This works in Internet Explorer 9 and up,

so that's probably the only browser where you might experience a couple of hiccups

with this but pretty much every other it browser works is in in heavy usage.

So, you should be fine there.

But pretty cool, so if you want to go ahead and make a little bit of Word Art.

>> Yeah. >> On your web page.

>> Was gonna say, it reminds me of MS Publisher.

>> You can go ahead and do that now. >> Circa 2002.

>> Hmm.

It's wonderful. >> Yeah.

>> Next up

we have a project called odometer.

As you might expect, it gives you odometer like functionality on you webpages.

So check it out. It's pretty cool.

I'll re-load the page here so you can see these letters coming in and wow.

Look at that.

>> Whoa.

>> Are we in a movie or on a web page? >> Whew.

anyway.

[LAUGH] This it has lot of different options on here.

This would be great on, you know, a movie site.

Maybe, you know,

a car site.

>> Or if you're counting down to something.

>> Yeah, like. >> Yeah.

>> The seconds until this show ends.

>> Or if you wanna have the number

of viewers for this show, which is zero right?

>> It's in the tens, I think.

>> Yeah. >> In the solid tens.

>> Alright.

>> Anyway, a bunch of different options.

Pretty cool, pretty easy to use and, that's it.

You know, just give it the HTML you want, and boom, you're in there.

Not too much to say, pretty cool. I like it.

Just, just a nice little tool to have in the arsenal there.

>> Nice. Alright, I like it a lot.

Well, speaking of tools in the arsenal, next

up is a huge list of front-end dev bookmarks.

This is a list on GitHub.

And pull requests are welcome.

So you can go ahead and contribute to this list.

And it's pretty extensive

here, so, no matter what you're into, or what you wanna

know about front end dev, its probably got something for you.

Here's typography, there's a whole bunch of stuff there.

>> [CROSSTALK] Not seeing any Tree House links in here.

>> No. Huh.

That's really weird. >> I'm gonna submit a poll request.

>> There's animation libraries.

One of which, I've put together, but I don't actually see it

listed there either, [COUGH], that's probably a good idea, not to list it.

there's, there's widgets here.

All sorts of things.

>> This is very extensive. >> Again.

>> Look at all that scrolling.

That's how big this webpage is.

>> Not a whole lot to say about

it, but wow, it's a really, really comprehensive list.

>> Yeah.

Next up we have another list from GitHub by the user MHM5000.

>> It's a list of lists, nest of lists.

>> Yeah,

he's done a wonderful thing and complied a list of all

of the links that you see here on the Tree House show.

>> Which now [LAUGH] the link to this list of Treehouse

Show links will appear on the list of Treehouse Show links.

>> Wow.

So if you click it, you'll be in the same spot.

>> Right.

>> Wow.

>> Wow. I just got incepted.

>> [LAUGH] Yeah.

No, this is this is a great list. How could it

not be great? We came up with it.

I mean, the original links.

>> Right.

>> Anyway, thanks so much for putting that together.

And yeah, we'll have a link to that, as Nick said, in the show notes.

>> That's right.

>> So, I think that's about all we got for this week.

Nick, who are you on Twitter?

>> I am @nickrp.

>> And I am @jseifer, I recommend following

me, on Twitter, maybe not, so much Nick.

For more information on anything we talked about on this show, check out the links

at youtube.com/gotreehouse, or search for us in iTunes at The Tree House Show.

>> And of course, if you'd like to see more videos like this one about web

design, web development, business, mobile, and so much

more, be sure to check us out at teamtreehouse.com.

Thanks so much for watching and we'll see you next week.

[MUSIC]