You've already started watching Episode 83: Web Icons, Webshims, jQuery Coding Standards
In 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, 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
web Icon, webshims, JQuery Coding Standards, and more.
-
0:15
>> Let's check it out.
-
0:15
[MUSIC]
-
0:21
>> First up we're gonna be talking about the iconic web icon system.
-
0:25
Now this is just to be clear.
-
0:28
A paid project and they are not sponsoring the show.
-
0:31
But people have been talking about it quite a bit lately.
-
0:33
So we're gonna through and take a look at
-
0:35
why people have been talking so much about Iconic.
-
0:38
So we talked about ton of different icon systems on
-
0:41
the show here before but why talk about this one?
-
0:45
Well its interesting because as it says on the site right here, which
-
0:48
verifies that I can read it is much more than a static icon set.
-
0:53
So, these are actually different pieces of SVGs that are layered
-
0:59
together to create what you see as the icons on the screen.
-
1:03
Now, one of the benefits that you get when all these icons are in a bunch of
-
1:07
different pieces is that you can style these
-
1:09
elements and you can style different parts of it.
-
1:12
So, if we take a look at this camera right here we can see that the lens, the
-
1:17
barrel, the glass, all of these different things are different parts of the icon.
-
1:22
So, you can make them different colors if you choose to.
-
1:26
You see an example right here where there are just tons of different colors
-
1:29
inside these icons, and you can even create different themes for the icon set.
-
1:35
So, here it is, contained, multi toned, ton of different things.
-
1:39
Now, one other great thing about this icon set is it is responsive and scalable.
-
1:45
So it's a few different sizes, 16x16, 32x32, and 128x128.
-
1:51
Now you can do the.
-
1:52
You can see how it reacts to responsive resizing.
-
1:56
If we drag the slider right here, you can see that the smallest size, the details
-
2:00
that aren't important, are hidden and then, as
-
2:03
it gets larger, we get more and more detail.
-
2:06
into these large icons.
-
2:08
So we'll have a link in the show notes to the iconic icon set.
-
2:12
Now, as I said they're not sponsoring the show.
-
2:13
We just thought it was a really cool project so make sure to check it out.
-
2:17
>> Very nice stuff.
-
2:18
Well, next up is first time user experiences.
-
2:22
This is a Tumblr blog.
-
2:23
That, I think it's called a tumblelog.
-
2:26
>> Tumblelog?
-
2:27
>> Yeah.
-
2:27
Tumb, tumblog.
-
2:28
>> That makes more sense.
-
2:29
This is a tumblelog that basically categorizes and catalogs first time user
-
2:37
experiences or the blank slate, which is something that we've talked about before.
-
2:43
Basically, they take an existing app, and this
-
2:47
looks like it's some kind of running app,
-
2:50
and they say what they think is good about it and what they think should be improved.
-
2:55
And this is a really important and subtle part of building user experiences.
-
3:00
So, this is a really great blog to keep up with.
-
3:03
If you are trying to build up the blank slate
-
3:06
in your app, or the empty state in your app.
-
3:09
So for example on this running app they say that, the
-
3:13
app defers its intro until after a person selects try Strava.
-
3:18
I guess that's the name of the app.
-
3:21
And it doesn't force people to see that, that
-
3:25
intro tour until after they've gotten started with it.
-
3:29
It also offers a limited functionality trial so you can try out the app.
-
3:34
So, that's pretty cool.
-
3:36
And then, they offer a couple of things for improvement.
-
3:40
There's a whole bunch more posts here.
-
3:42
It's a pretty nice blog.
-
3:44
I love the nice big screen shots here and
-
3:46
how detailed they are for each individual user experience.
-
3:51
>> Yeah.
-
3:51
>> Definitely worth checking out.
-
3:53
>> Definitely.
-
3:53
You know, we talk about white slates here all the time.
-
3:55
So, that's great for further in-depth reading.
-
3:58
>> Definitely.
-
3:58
>> Next up, we have a project called Web shim or maybe it's Webs him.
-
4:01
I'm not really Sure how to pronounce it but this is a poly-fill that
-
4:06
lets you reliably use HTML-5 features across
-
4:09
browsers even if native support is lacking.
-
4:12
>> You know, Jason, I just looked at it again, I think it says we BS him.
-
4:16
>> Oh.
-
4:17
Treehouse show theme.
-
4:19
>> That must be it.
-
4:21
So this gives you just a ton of different things that you'll use, if you
-
4:24
want to start using HTML 5, but maybe
-
4:26
for business reasons you're limited to older browsers.
-
4:29
And you really start want, really want to start using these HTML 5 features,
-
4:33
you can see bunch of different things
-
4:35
are supported here, you can support Geo location.
-
4:38
And it's very, very easy to use.
-
4:40
You know, you throw this webshim or web BSHIM library into your
-
4:43
project, start it up and you are pretty much ready to go.
-
4:47
You just call the different attributes that you want to start, so if we
-
4:52
wanna use the polyfils we call this
-
4:53
polyfill method, that sets up everything for us.
-
4:57
And currently, it supports these features equiscript five, geolocation,
-
5:01
canvas, forms, media elements, tracked file readers, and details.
-
5:05
So we talk a lot about polyfills, and here's an
-
5:08
actual project that you can use in your own projects.
-
5:11
You can find a link to this in the show notes, which you can get to is at
-
5:13
youtube.com/gotreehouse, or search for us on iTunes, we're The
-
5:17
Treehouse Show, and make sure to subscribe and rate us.
-
5:21
>> Very nice.
-
5:21
Well next up is WireFi.
-
5:23
This is a very simple front end framework that allows you to prototype your apps
-
5:29
before you go on to maybe a more
-
5:31
robust front up framework like Bootstrap or Foundation.
-
5:36
So here's what the homepage looks like.
-
5:38
It says build intuitive powerful wireframes for smarter web development.
-
5:43
Let's take a look at the Lists example here.
-
5:48
And, you can see that they're basically just
-
5:51
styling this using almost no classes at all.
-
5:55
In fact, this is what it looks like when there's no classes.
-
5:58
So, they've opted for no bullet points here, just
-
6:01
some spacing to indicate where each element is nested.
-
6:07
If you apply some classes, you can start to get some basic styling.
-
6:11
So if you want maybe square bullet points, you can apply the square class and so on.
-
6:16
So.
-
6:17
It just provides some super basic stylings so
-
6:20
that you can wire frame your app using code.
-
6:24
So you can create these really quick
-
6:26
prototypes without having to include all of
-
6:29
the classes that you might find in
-
6:32
Foundation, Bootstrap and other [INAUDIBLE] and frameworks.
-
6:35
So pretty cool stuff.
-
6:36
>> Yeah, that, that's great.
-
6:37
Next up we have a post on jQuery coding standards and best practices.
-
6:43
Now, as you might expect from that title, you're going to learn
-
6:46
how you should be programming jQuery if you aren't doing these things already.
-
6:51
Now, in addition to just Best Practices, it's kind of going
-
6:55
over things that are gonna be more performance improvements, as well.
-
6:58
So first up is just great advice like store and cache your jQuery variables.
-
7:05
Which means that if your doing a selector, like
-
7:07
grabbing my div in jQuery, assign that to a variable
-
7:10
so that you don't have to perform this look
-
7:12
up and applying jQuery to each element every single time.
-
7:16
Every sing, every time you go back and
-
7:18
use my div, you would use the variable instead.
-
7:21
Now then it goes through it talks about the
-
7:23
different selectors and what is slow and what is fast.
-
7:27
Now in the most general sense you wanna use I.D. Selectors when you can, or when
-
7:33
you're using Class Selectors don't use the element type in your Class Selector.
-
7:38
Now it goes through and has just a ton of
-
7:40
different advice for selectors, DOM Manipulation, events, even AJAX requests.
-
7:47
So too much to go through here on the show, but really these
-
7:51
are things you should be doing if you're using jQuery in your projects.
-
7:55
>> Next up is the Random User Generator, which is a plugin for Photoshop
-
8:01
that allows you to generate pictures of random people with some random names.
-
8:07
So they have a little example here of what
-
8:10
it will look like once it's actually installed in Photoshop.
-
8:13
So you can choose if you just want to generate man, woman or both.
-
8:17
And you can click the New Random User button.
-
8:20
To generate some different photos and different names.
-
8:24
This is really helpful if you're trying to prototype an app.
-
8:28
And maybe you're using wireFi, for example,
-
8:31
and you want to actually include some images.
-
8:35
So, you could do this in your Photoshop mockups, or you
-
8:37
could actually carry these over to your code, if you wanted to.
-
8:41
so.
-
8:42
This is helpful if you don't wanna just include, you know lot
-
8:46
of maps, some texts, and a bunch of boxes for your prototype.
-
8:50
You actually want to include real copy and real images to get
-
8:54
an idea of what the app is actually going to look like.
-
8:56
And kind of test its limitations, see what your margins, padding
-
9:00
and all that sort of stuff looks like, with real information.
-
9:03
So that's pretty nice.
-
9:05
It's easy to install, and you can basically, just
-
9:10
use it as simply as the example shows you.
-
9:14
You just click the New User button or New Random User, and it will generate
-
9:20
a some text that, and an image that you can paste directly into your document.
-
9:25
>> So, check this out.
-
9:26
See, see the little this little box on
-
9:28
the site there where it says Random User Generator?
-
9:30
>> Uh-huh.
-
9:31
>> If you move that ready?
-
9:33
Look.
-
9:33
Look at that.
-
9:33
Look at that.
-
9:34
>> Whoa
-
9:34
>> Oh, look there's a kitten waving at you.
-
9:36
Huh.
-
9:37
>> Look at that.
-
9:37
>> Who ever even knew that?
-
9:39
>> I'm just going to use that for everything instead.
-
9:41
>> Yeah, I had to really pause for a second to see it.
-
9:46
>> Very nice.
-
9:47
>> Get it?
-
9:47
>> I get it.
-
9:48
I got the joke.
-
9:49
>> Yeah.
-
9:50
Next up we have a project called Scroll Magic, oooo.
-
9:55
>> Magic!
-
9:56
>> Yeah.
-
9:56
This is one of those paralax scrolling libraries, look at
-
9:59
this there's a there's a magic top hat on the site.
-
10:02
>> What?
-
10:02
>> And if I start scrolling down.
-
10:04
What?
-
10:04
Look at that, it's a wand.
-
10:06
That's ScrollMagic.
-
10:08
But that's not all.
-
10:09
You were saying you want more?
-
10:10
Hey, we got more buddy.
-
10:12
Check this out.
-
10:12
We can fade, we can move, we can spin, scale, adjust text properties.
-
10:18
Pin if you wanna, don't have to.
-
10:20
Look at this.
-
10:21
Just a ton of different possible options for parallax scrolling on your site.
-
10:24
We're seeing a lot more sites use parallax effects these days.
-
10:28
So here it, here is ScrollMagic.
-
10:31
Boom, that's it.
-
10:32
Do, do you need more than the examples?
-
10:34
Do you need more than that?
-
10:35
Cuz I, I don't have any more.
-
10:36
And that's all I got.
-
10:37
And all I got's ScrollMagic.
-
10:39
>> You can use magic to impress your friends.
-
10:42
>> Yeah.
-
10:43
I hope you're all impressed.
-
10:45
>> Next up is a post from the Mozilla Hacks blog on The Gamepad API.
-
10:51
So, if you were to work, there's actually a W3C specification, that's in draft
-
10:57
form right now, for adding Gamepad controllers to your site.
-
11:03
Now, why would you do this?
-
11:05
Well, if you're working on an HTML5 game or maybe you're building a project in
-
11:09
WEB-DL, you might wanna provide an alternative
-
11:12
control scheme other than the mouse and keyboard.
-
11:15
So, that you can open up your game to new audiences.
-
11:19
Say that you want to attract more than just the PC gaming
-
11:22
crowd, and you want to try to get console users into your game.
-
11:26
This is a great way to do that.
-
11:28
Alternatively, Gamepads could also be used as an alternative controller for something
-
11:35
that's like a living room experience, or the ten foot experience, and you can
-
11:38
use that to navigate some kind
-
11:41
of entertainment experience where you're trying to
-
11:44
maybe choose a, a video to watch on like Netflix or something like that.
-
11:48
Now it has okay ish browser support right now, it,
-
11:54
it works in Firefox and it works in Google chrome chrome it works out
-
12:00
of the box, there's a couple of small [INAUDIBLE] right now but
-
12:04
with Firefox you actually have to enable it until Firefox 28 is released.
-
12:10
And the current version is Firefox 27.
-
12:13
So, that should be coming soon by default.
-
12:14
[CROSSTALK]
-
12:15
>> Actually, it just came out the other day.
-
12:16
>> Did it really, Jason?
-
12:18
>> Yeah.
-
12:18
>> Thank you so much.
-
12:19
>> Okay.
-
12:21
>> Wow.
-
12:22
So it's enabled by default now.
-
12:24
That's really cool.
-
12:25
And you can use the game pad API in
-
12:28
a couple of different ways, you can detect, you
-
12:31
know, the analog, control sticks, the different buttons the
-
12:36
different triggers and d pads, bumpers, that kind of stuff.
-
12:39
And it will map those to an array and you
-
12:44
can use that in your game or in your entertainment experience.
-
12:49
So here's what that object looks like, there's a bunch of
-
12:52
stuff in this object, I definitely recommend you check it out.
-
12:57
Don't have time to go into all of it on the show here,
-
13:00
but, if you're building an html five game it's definitely worth taking a look.
-
13:04
>> Yeah.
-
13:05
I'm personally really happy that I implemented the Konami
-
13:08
code on my website way back in the day.
-
13:10
>> Smart.
-
13:11
Well, that's all we have time for today, I'm @nickrp on Twitter.
-
13:15
>> And I am @jseifer.
-
13:16
For more information on anything we talked about
-
13:18
check out our show notes which you can get
-
13:19
to at youtube.com/gotreehouse or search for us in iTunes
-
13:23
and please rate us, we are The Treehouse Show.
-
13:26
>> And of course, if you'd like to see more videos like this one about web
-
13:29
design, web development, mobile business, and so much
-
13:32
more, be sure to check us out at teamtreehouse.com.
-
13:36
Thank you so much for watching and we will see you next week.
-
13:38
[MUSIC].
You need to sign up for Treehouse in order to download course files.
Sign up