I'm Nick Pettit.

>> I'm Jason Seifer.

>> And you're watching the Treehouse Show, you're weekly dose of Internets

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

>> For a free month of Treehouse, head on over to teamtreehouse.com/show.

In this episode we'll be talking about UI

Kits, Internet Explorer development tools, fast JavaScript, and more.

>> Let's check it out.

[MUSIC]

First up, is a UI Kit for iOS 8.

Now, not a whole lot has changed in iOS 8.

The big design change was, in iOS 7, but there's a few little tweeks.

And, this one is for Sketch, so, if you like to use Sketch, you can

download this and use this kit to build out interfaces.

So, for example, you could build an icon, just like this compass here.

It's already prebuilt.

You have North, South, East and West, and

all the little tick marks all the way around.

Pretty cool stuff.

So, if we scroll down here, you can see,

they have the entire springboard, completely built out for you.

Ready to go.

There is the share sheet, so, for example, in

the Photos App, you might have a share sheet

that looks like this, you can hit the share

button, comes up, and you have all these icons here.

Anyway, if you're mocking up apps in Sketch and in particular

you're mocking up mobile apps for iOS, this is really useful.

>> Yeah, very nice.

Plus, it was all made in Sketch, so-

>> Mm-hm.

>> Easy to import.

>> Yep.

>> Next up, we have an announcement

from Microsoft, on the Internet Explorer developer channel.

Now, Microsoft and Internet Explorer get a lot of hate

from the web development community because of IE6, but we are

way past that and they've actually been making a ton

of really great strides, and progress, on the Internet Explorer browser.

>> It's in the past, water under the bridge.

>> Yeah, water under the bridge.

Reloads of, under the page.

>> Sure.

>> JavaScript under the, mouse.

>> Getting worse.

>> On click.

>> Really bad.

>> Under the, anchor element.

So, anyway, there is now a Dev channel of Internet Explorer.

This is gonna be very similar to Chrome

Canary, or any of the Firefox nightlys, and

you can check out some of the new tools, that will be, inside of Internet Explorer.

They, are doing enhancements to their developer tools.

Something that's actually pretty nice, is a new

colorization of the dom in the UI responsiveness tool.

It can show you what parts, of your JavaScript

and dom are rending when and what's going too slow.

It even gives you, a CPU utilization percentage.

also, in the new version of Internet Explorer,

you can use your Xbox controller, for web gaming.

We've talked about web games, on the show before, so

it's cool that, Internet Explorer is going to support that.

Anyway, this is going to be an ongoing thing for Microsoft.

They are always going to be enhancing

Internet Explorer, so, you're going to need to

check out the Dev channel, if you wanna stay on top of those latest changes.

We'll have a link to that in the

show notes, which you can get to at youtube.com/gotreehouse.

Or search for us on iTunes, we're The Treehouse Show.

And make sure to check out Treehouse for a free month, at teamtreehouse.com/show.

>> Very nice stuff.

Well, next up, is a really cool post

from the Codrops blog called Hover Effect Ideas.

And exactly as the name implies.

It's a bunch of cool ideas for different hover effects,

so I scroll down the page here, whoa, look at that.

>> What, what?

>> I can hover over-

>> Are we floating?

>> Each one of these effects and-

>> I'm getting motion sickness.

>> They all look a little bit different, they

all kind of generally play on the same idea

of, movement, so you hover over and the text

moves slightly or the picture changes in some way.

There's a few more here.

Check that out.

You can have some icons pop up, if you wanna do that.

>> Like a share icon, >> Mm-hm.

>> Would be great there.

If, if only we could agree on one.

>> If only, someday.

There's also ones where, the border will actually be drawn on.

Let me try this out.

Whoa, look at that.

>> What?

>> Amazing.

>> Wow.

>> Anyway, really, really nice hover effects, very impressive, and

definitely useful if say, you're building out a photo gallery

or maybe you have a web design portfolio, and you

just want a really nice way to show off your work.

You can include some nice hover effects, to highlight each one of them.

>> Very nice.

>> Mm-hm.

>> Next up we have a project called Fast dot JS.

This is a small JavaScript library, that replaces

some of JavaScript's built-in functions, with faster versions.

There is literally no reason not to use it.

Except later, where they mention some reasons not to use it.

But we'll get to that, in just a moment.

So, as we see here, it says it is,

faster user-land re-implementations for several

common, built-in native, JavaScript functions.

And this is going to work using, installing it via NPM.

And then, you just require it and you are good to go.

So, if we scroll down here, we can see some of, the benchmarks right here.

Using Fast dot JS and the clone method, fast dot JS is 125% faster.

Same thing with index of, Fast dot JS is 73% faster.

So, why in the world wouldn't we use this?

Well, it does not conform 100% to the ecmascript specification.

And, it is not a drop in replacement 100% of the time.

So, there are a couple more caveats, that they specify in here.

So, as long as you are not doing anything that might

interfere with that, you are good to go on using this.

So, check it out.

Not a whole lot to say about it, other than that.

Really cool project.

And also cool to dive into the source code, if you wanna see how they did it.

>> Very nice.

Well next up is, Headstart, an easy to use automated front-end set up.

So you can just click this button right here.

Start using Headstart, basically it will give you a CLI, or

command line interface to help you scaffold your projects for example.

You can think in fragments.

In other words it says, learn to love folder structures.

So that's a way you can.

>> I already love folder structure [LAUGH] I don't need to learn that.

>> You can actually structure your project and dependencies that way.

And, it has a bunch of optimizations already

built in, such as hinting, uglyfication, concatenation, SVG optimization.

Revelation and more, it all rhymes, so it must be true.

Let's click on getting started here.

>> Do you think CSS or JavaScript gets upset when you say uglification?

>> [CROSSTALK].

>> I know I'd get upset if you said that about, something I was doing.

>> Next up is, installing so you can install it with the node package managery

type install, G headstart and it will give you a couple of, files to start out with.

And then, you can go ahead and

start developing with it, in either development, environment.

Or you can do your builds for production and include all of those optimizations.

Like, uglification.

>> Your words.

Next up, we have a project called Epoch.

This is, a real time charting library

for building beautiful, smooth, and high-performance visualizations.

This is a plug-in for D3.JS.

It is built for developers.

You can tell that because it says it right there, on the website.

Let's see some of the things we can do, when we explore what this library does.

Here is, a real time heat map, generated using just this code.

Here they, you give it just the heat map data and the labels that you want.

The ellipses here, denote that there is more than just this data.

Since it is real time, more data is constantly coming in.

And then, all you do is use this script tag call Epoch.

Give it the type of chart that you want and the data.

Course it has different options for how you want to display everything.

Wether or not you wanna give it a padding and how many buckets there are.

Now, the reason this sort of plug-in is great, is because D3.JS is a really,

really impressive library, but sometimes, it can

be a little bit difficult to start with.

So, some developers have created plug-ins to ease, creating some of m, some

more of these common things, like heat maps, bar charts, things like that.

We can see there's a lot more different examples that we can go through and

play with and we will have a link to that, here in the show notes.

It's a, it's a great library and actually, if you read through the

source code it's pretty Ep, Epic,

Epoch, Epich, [INAUDIBLE] Epic, Epoch, epoch, epoch.

>> Well, that's a good place to end it.

I am @nickrp on Twitter.

And I am @jseifer, for more information on anything

we talked about check out our show notes at youtube.com/gotreehouse.

You can also search for us on iTunes, we

are The Treehouse Show and don't forget to rate us.

>> And of course, if you'd like to try out Treehouse for

free for 30 days, be sure to check us out at teamtreehouse.com/show.

Thank you so much for watching, and we will see you next week.

[MUSIC]