You've already started watching Episode 102: UI Kits, Internet Explorer Development Tools, Fast.js
Episode 102: UI Kits, Internet Explorer Development Tools, Fast.js
9:44 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.
-
0:01
>> I'm Jason Seifer.
-
0:02
>> And you're watching the Treehouse Show, you're weekly dose of Internets
-
0:04
where we talk about all things, web design, web development, and more.
-
0:08
>> For a free month of Treehouse, head on over to teamtreehouse.com/show.
-
0:12
In this episode we'll be talking about UI
-
0:14
Kits, Internet Explorer development tools, fast JavaScript, and more.
-
0:19
>> Let's check it out.
-
0:20
[MUSIC]
-
0:25
First up, is a UI Kit for iOS 8.
-
0:29
Now, not a whole lot has changed in iOS 8.
-
0:32
The big design change was, in iOS 7, but there's a few little tweeks.
-
0:37
And, this one is for Sketch, so, if you like to use Sketch, you can
-
0:43
download this and use this kit to build out interfaces.
-
0:48
So, for example, you could build an icon, just like this compass here.
-
0:54
It's already prebuilt.
-
0:55
You have North, South, East and West, and
-
0:58
all the little tick marks all the way around.
-
1:00
Pretty cool stuff.
-
1:02
So, if we scroll down here, you can see,
-
1:03
they have the entire springboard, completely built out for you.
-
1:08
Ready to go.
-
1:10
There is the share sheet, so, for example, in
-
1:14
the Photos App, you might have a share sheet
-
1:17
that looks like this, you can hit the share
-
1:18
button, comes up, and you have all these icons here.
-
1:22
Anyway, if you're mocking up apps in Sketch and in particular
-
1:27
you're mocking up mobile apps for iOS, this is really useful.
-
1:31
>> Yeah, very nice.
-
1:32
Plus, it was all made in Sketch, so-
-
1:33
>> Mm-hm.
-
1:34
>> Easy to import.
-
1:34
>> Yep.
-
1:36
>> Next up, we have an announcement
-
1:37
from Microsoft, on the Internet Explorer developer channel.
-
1:41
Now, Microsoft and Internet Explorer get a lot of hate
-
1:44
from the web development community because of IE6, but we are
-
1:49
way past that and they've actually been making a ton
-
1:51
of really great strides, and progress, on the Internet Explorer browser.
-
1:55
>> It's in the past, water under the bridge.
-
1:57
>> Yeah, water under the bridge.
-
1:58
Reloads of, under the page.
-
2:00
>> Sure.
-
2:01
>> JavaScript under the, mouse.
-
2:04
>> Getting worse.
-
2:05
>> On click.
-
2:06
>> Really bad.
-
2:07
>> Under the, anchor element.
-
2:11
So, anyway, there is now a Dev channel of Internet Explorer.
-
2:16
This is gonna be very similar to Chrome
-
2:18
Canary, or any of the Firefox nightlys, and
-
2:22
you can check out some of the new tools, that will be, inside of Internet Explorer.
-
2:27
They, are doing enhancements to their developer tools.
-
2:31
Something that's actually pretty nice, is a new
-
2:34
colorization of the dom in the UI responsiveness tool.
-
2:38
It can show you what parts, of your JavaScript
-
2:41
and dom are rending when and what's going too slow.
-
2:45
It even gives you, a CPU utilization percentage.
-
2:49
also, in the new version of Internet Explorer,
-
2:53
you can use your Xbox controller, for web gaming.
-
2:57
We've talked about web games, on the show before, so
-
3:00
it's cool that, Internet Explorer is going to support that.
-
3:03
Anyway, this is going to be an ongoing thing for Microsoft.
-
3:06
They are always going to be enhancing
-
3:08
Internet Explorer, so, you're going to need to
-
3:10
check out the Dev channel, if you wanna stay on top of those latest changes.
-
3:14
We'll have a link to that in the
-
3:15
show notes, which you can get to at youtube.com/gotreehouse.
-
3:18
Or search for us on iTunes, we're The Treehouse Show.
-
3:21
And make sure to check out Treehouse for a free month, at teamtreehouse.com/show.
-
3:25
>> Very nice stuff.
-
3:26
Well, next up, is a really cool post
-
3:28
from the Codrops blog called Hover Effect Ideas.
-
3:32
And exactly as the name implies.
-
3:34
It's a bunch of cool ideas for different hover effects,
-
3:37
so I scroll down the page here, whoa, look at that.
-
3:41
>> What, what?
-
3:41
>> I can hover over-
-
3:42
>> Are we floating?
-
3:42
>> Each one of these effects and-
-
3:44
>> I'm getting motion sickness.
-
3:45
>> They all look a little bit different, they
-
3:48
all kind of generally play on the same idea
-
3:50
of, movement, so you hover over and the text
-
3:54
moves slightly or the picture changes in some way.
-
3:58
There's a few more here.
-
3:59
Check that out.
-
3:59
You can have some icons pop up, if you wanna do that.
-
4:03
>> Like a share icon, >> Mm-hm.
-
4:04
>> Would be great there.
-
4:05
If, if only we could agree on one.
-
4:07
>> If only, someday.
-
4:09
There's also ones where, the border will actually be drawn on.
-
4:13
Let me try this out.
-
4:14
Whoa, look at that.
-
4:15
>> What?
-
4:16
>> Amazing.
-
4:16
>> Wow.
-
4:17
>> Anyway, really, really nice hover effects, very impressive, and
-
4:22
definitely useful if say, you're building out a photo gallery
-
4:26
or maybe you have a web design portfolio, and you
-
4:29
just want a really nice way to show off your work.
-
4:32
You can include some nice hover effects, to highlight each one of them.
-
4:36
>> Very nice.
-
4:36
>> Mm-hm.
-
4:37
>> Next up we have a project called Fast dot JS.
-
4:40
This is a small JavaScript library, that replaces
-
4:44
some of JavaScript's built-in functions, with faster versions.
-
4:48
There is literally no reason not to use it.
-
4:51
Except later, where they mention some reasons not to use it.
-
4:54
But we'll get to that, in just a moment.
-
4:57
So, as we see here, it says it is,
-
4:58
faster user-land re-implementations for several
-
5:01
common, built-in native, JavaScript functions.
-
5:04
And this is going to work using, installing it via NPM.
-
5:08
And then, you just require it and you are good to go.
-
5:12
So, if we scroll down here, we can see some of, the benchmarks right here.
-
5:18
Using Fast dot JS and the clone method, fast dot JS is 125% faster.
-
5:27
Same thing with index of, Fast dot JS is 73% faster.
-
5:32
So, why in the world wouldn't we use this?
-
5:34
Well, it does not conform 100% to the ecmascript specification.
-
5:40
And, it is not a drop in replacement 100% of the time.
-
5:45
So, there are a couple more caveats, that they specify in here.
-
5:49
So, as long as you are not doing anything that might
-
5:52
interfere with that, you are good to go on using this.
-
5:55
So, check it out.
-
5:56
Not a whole lot to say about it, other than that.
-
5:58
Really cool project.
-
5:59
And also cool to dive into the source code, if you wanna see how they did it.
-
6:02
>> Very nice.
-
6:03
Well next up is, Headstart, an easy to use automated front-end set up.
-
6:08
So you can just click this button right here.
-
6:10
Start using Headstart, basically it will give you a CLI, or
-
6:14
command line interface to help you scaffold your projects for example.
-
6:19
You can think in fragments.
-
6:22
In other words it says, learn to love folder structures.
-
6:26
So that's a way you can.
-
6:27
>> I already love folder structure [LAUGH] I don't need to learn that.
-
6:30
>> You can actually structure your project and dependencies that way.
-
6:34
And, it has a bunch of optimizations already
-
6:38
built in, such as hinting, uglyfication, concatenation, SVG optimization.
-
6:43
Revelation and more, it all rhymes, so it must be true.
-
6:48
Let's click on getting started here.
-
6:50
>> Do you think CSS or JavaScript gets upset when you say uglification?
-
6:57
>> [CROSSTALK].
-
6:57
>> I know I'd get upset if you said that about, something I was doing.
-
7:05
>> Next up is, installing so you can install it with the node package managery
-
7:10
type install, G headstart and it will give you a couple of, files to start out with.
-
7:18
And then, you can go ahead and
-
7:19
start developing with it, in either development, environment.
-
7:23
Or you can do your builds for production and include all of those optimizations.
-
7:29
Like, uglification.
-
7:33
>> Your words.
-
7:35
Next up, we have a project called Epoch.
-
7:37
This is, a real time charting library
-
7:40
for building beautiful, smooth, and high-performance visualizations.
-
7:43
This is a plug-in for D3.JS.
-
7:48
It is built for developers.
-
7:49
You can tell that because it says it right there, on the website.
-
7:52
Let's see some of the things we can do, when we explore what this library does.
-
7:58
Here is, a real time heat map, generated using just this code.
-
8:03
Here they, you give it just the heat map data and the labels that you want.
-
8:08
The ellipses here, denote that there is more than just this data.
-
8:11
Since it is real time, more data is constantly coming in.
-
8:15
And then, all you do is use this script tag call Epoch.
-
8:20
Give it the type of chart that you want and the data.
-
8:25
Course it has different options for how you want to display everything.
-
8:29
Wether or not you wanna give it a padding and how many buckets there are.
-
8:33
Now, the reason this sort of plug-in is great, is because D3.JS is a really,
-
8:40
really impressive library, but sometimes, it can
-
8:42
be a little bit difficult to start with.
-
8:45
So, some developers have created plug-ins to ease, creating some of m, some
-
8:49
more of these common things, like heat maps, bar charts, things like that.
-
8:54
We can see there's a lot more different examples that we can go through and
-
8:58
play with and we will have a link to that, here in the show notes.
-
9:01
It's a, it's a great library and actually, if you read through the
-
9:04
source code it's pretty Ep, Epic,
-
9:07
Epoch, Epich, [INAUDIBLE] Epic, Epoch, epoch, epoch.
-
9:10
>> Well, that's a good place to end it.
-
9:14
I am @nickrp on Twitter.
-
9:15
And I am @jseifer, for more information on anything
-
9:17
we talked about check out our show notes at youtube.com/gotreehouse.
-
9:21
You can also search for us on iTunes, we
-
9:23
are The Treehouse Show and don't forget to rate us.
-
9:25
>> And of course, if you'd like to try out Treehouse for
-
9:28
free for 30 days, be sure to check us out at teamtreehouse.com/show.
-
9:34
Thank you so much for watching, and we will see you next week.
-
9:38
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up