You've already started watching Episode 43: SVG and Icon Fonts, Typography and CSS Sliders
In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about SVG and Icon Fonts, Typography and CSS Sliders.
-
0:01
I'm Nick Petitt. >>And I'm Jason Seiffer. >>And you're watching the Treehouse Show,
-
0:05
your weekly dose of Internets, where we talk about all
-
0:07
things web design, web development, and more.
-
0:09
>>In this episode, we'll be talking about flat UI colors,
-
0:12
things you shouldn't be doing with jQuery,
-
0:15
usability, and much more. >>Let's check it out.
-
0:18
[? music ?]
-
0:21
[The Treehouse Show]
-
0:24
Well, first up is flat UI colors, and, of course,
-
0:28
we've talked about flat UI a little bit on the show. >>Talked so much.
-
0:32
>>It's basically the opposite of skeuomorphism.
-
0:35
So skeuopmorphism is where— >>It's right up there with CSS frameworks,
-
0:39
on the list of things we talk about a lot on here.
-
0:42
>>And icon fonts. >>And responsive websites.
-
0:45
>>That's right. Anyway, skeuomorphism is where stuff looks super realistic.
-
0:50
In a digital interface, it's basically trying to mirror a real-world
-
0:55
interface, so something like iCal on OS X,
-
0:59
where it has all this leather and papery texture and stuff,
-
1:02
whereas flat design is basically a response to that.
-
1:05
So it's what you see in, like, Windows 8 and
-
1:09
a lot of other websites these days.
-
1:12
So these flat UI colors basically allow you to draw upon this
-
1:19
pre-made color palette and create your website
-
1:22
with flat UI in mind.
-
1:25
So they just have these really nice, well put-together colors that
-
1:29
go really well together, and you can click on each one of these.
-
1:34
So I'll click on Midnight Blue here,
-
1:39
and it'll say Copied.
-
1:41
So if you click on one of these, it will copy it to your Clipboard.
-
1:45
And you can choose the format up here.
-
1:47
So I've chosen hexadecimal with the hash, or pound, sign there.
-
1:52
And so that's what's been copied into my Clipboard.
-
1:56
So it's a pretty handy tool.
-
1:59
I will admit I actually used this this week. >>Oh, you're willing to admit that?
-
2:03
>>I am willing to admit it. I know, big admission here.
-
2:06
No, I used it to build a website earlier this week.
-
2:11
This is Jason's surprised face. And it worked really well.
-
2:14
I was able to just click, copy these colors in, and it sped up my development a little bit,
-
2:19
because I was able to just put together the color scheme really quickly
-
2:23
and try out different things. >>I like some of these names here.
-
2:27
>>Yeah. >>Wet Asphalt. >>That's right. They should name one after you, Jason.
-
2:32
>>This one's called Nephritis. That sounds like a disease.
-
2:37
Sorry, I can't come to work today. My nephritis is flaring up.
-
2:41
>>They have Peter River. I mean, I don't understand why it's not Jason River.
-
2:44
It's obviously— >>Yeah. >>You know. >>Jason River— >>Jason.
-
2:47
>>Selling tickets. >>That's right. >>Next up, over on the Flippin' Awesome Blog,
-
2:51
we have 5 Things You Should Stop Doing With jQuery.
-
2:55
This is a wonderful list of, you guessed it, things that you should doing with jQuery
-
3:00
and, more importantly, why you should stop doing them.
-
3:03
Now we're not going to get into everything that they say on the show—
-
3:06
I'm sorry, say on the blog post here, but number one, stop
-
3:10
using Document Ready. It's 2013. We don't have to use Document Ready all the time.
-
3:15
The reason that you would want to use Document Ready is,
-
3:18
back in the day, when you put all of your scripts in the head of a web page,
-
3:22
it would have to wait until the rest of the page and scripts have loaded.
-
3:27
>>But, of course, now you put all of your scripts towards the bottom
-
3:29
and know that the document is indeed ready
-
3:33
by the time you're ready to execute that jQuery.
-
3:35
>>Yeah. Unless you're using the async attribute.
-
3:37
>>Boom. >>Next, choose the right iterator for the job.
-
3:41
jQuery provides a wealth of different iterators that you can use,
-
3:45
depending on what you need to do. So there's a nice description
-
3:49
of each of the different ones, as well as the context
-
3:51
in which you would use them. I'm a big fan of the map iterator,
-
3:54
which will iterate through an array, add that all to a new one.
-
3:58
Boom. Done. Anyway, a bunch of great advice on here.
-
4:01
Just head on over to the blog post at flippinawesome.org.
-
4:05
And you can also find it in the show notes on YouTube at youtube.com/gotreehouse
-
4:10
or on iTunes.
-
4:12
>>iTunes. >>Search for Treehouse. Leave us reviews.
-
4:14
>>On iTunes. >>Yeah. >>All right. Next up is the Young Persons
-
4:19
Guide to Programming in Minecraft.
-
4:22
Of course, Minecraft is the popular computer game that was created,
-
4:27
I think, a couple years ago and was developed in a very open fashion.
-
4:32
People could actually participate in the alpha and the beta,
-
4:35
and it's since been released, but it's a pretty cool game.
-
4:40
>>If I'm not specifically a young person,
-
4:43
can I still read this guide and get something out of it?
-
4:45
>>I think so, Jason. I don't know why it's specifically targeted at young people,
-
4:50
but, of course, yeah, you can get something out of it.
-
4:53
So Minecraft is this computer game where you mine stuff,
-
4:57
and then you craft stuff. So that's kind of an explanation of Minecraft.
-
5:00
Getting into what this article is actually about, basically, you can
-
5:05
create what are called mods, or modifications, for Minecraft,
-
5:10
and one such mod is called Scriptcraft.
-
5:13
And in Scriptcraft, you can actually program in the game,
-
5:17
using simple JavaScript statements.
-
5:20
And using those, you can add new items, you can change
-
5:23
the behavior of the game, and you can actually build metagames on top of Minecraft.
-
5:28
Build these simpler, you know, simple games within Minecraft.
-
5:33
It suggests learning JavaScript and then jumping into it.
-
5:38
Of course, you can learn JavaScript on teamtreehouse.com.
-
5:42
>>Shameless self-plug. >>That's right.
-
5:44
And then, after you've learned JavaScript, you can jump into
-
5:48
Scriptcraft, and they teach you how to do variables, functions, and
-
5:54
a whole variety of other things in Minecraft.
-
5:57
And eventually you will be able to actually build stuff.
-
6:01
So I think this is pretty neat, you know. It's not specifically related to
-
6:08
web development, but, of course, JavaScript is a very popular language
-
6:12
in the web-development space.
-
6:14
It's what we use to make things happen on the front end of the browser.
-
6:19
And I think this is a really cool way to get into JavaScript
-
6:24
and get yourself familiar with the language.
-
6:26
And that will make you a stronger programmer
-
6:29
when it comes to stuff on the web. >>Very nice. >>Interesting stuff. >>
-
6:33
Next up, we have a tool called Framer. This is a prototyping tool for animation
-
6:39
and interaction on desktop and mobile.
-
6:42
Now this is being billed as an alternative to Flash or Keynote when
-
6:47
prototyping an application, and it's going to be used
-
6:50
more for the interaction of the site.
-
6:52
So they've got some great examples here on the site.
-
6:55
So you click through. First example is the Google Search application,
-
7:02
and if I mouse in here, you can see, boom, it automatically animates up.
-
7:07
And you can kind of just get a feel for how the application's going to work.
-
7:10
The next example that they have is something that you should be familiar with:
-
7:15
Facebook. Pretty much everybody's on Facebook,
-
7:17
so you click that little three-button menu we've talked about before
-
7:21
on the show, and it kind of shows you how the news feed and events and
-
7:25
basically, everything on the side of the page is going to work.
-
7:27
So this is really not going to be for creating full applications.
-
7:31
It's going to be used just to get an idea
-
7:34
of how the interactions and animations are going to play out on the site.
-
7:37
And interaction and animation is quickly becoming a lot bigger
-
7:42
in the field of creating applications, so it's something to keep on the radar,
-
7:45
in case this is what you're doing. >>And I think it actually pairs really nicely
-
7:49
with flat design in that, you know, it's much easier to create
-
7:54
more complex animations, because you're not spending so much time
-
7:57
getting the textures or the round corners or
-
8:00
all these different design details just right.
-
8:03
But you can actually communicate a lot with nice smooth animation.
-
8:07
So I like it. I think it's pretty cool. >>I think pairs really nicely with a port wine.
-
8:11
>>So you, Jason. >>Thank you.
-
8:14
Next up is a Usability Checklist. It's in beta.
-
8:19
I'm not really sure what's in beta specifically.
-
8:22
>>The checklist? >>Yeah, it looks like the checklist itself is in beta.
-
8:25
>>Maybe there's more things they'll want to add to the checklist.
-
8:27
>>It's possible, but I really like this checklist quite a lot.
-
8:31
Basically, before you launch a website and you want to make sure that
-
8:38
everything is of quality, you can go through this checklist
-
8:42
and just kind of get a sanity check and say, like, what is the first impression
-
8:48
when people hit the home page?
-
8:51
Or is my site easy to navigate?
-
8:54
Am I hitting all the check boxes here with accessibility?
-
8:58
And am I doing a good job with search, etcetera, etcetera, etcetera.
-
9:03
It's a pretty exhaustive checklist, and I think it's really good
-
9:09
even for beginners or people that are much more advanced with
-
9:13
web development, because there are so many things to remember these days,
-
9:16
I mean, there is so much stuff that goes into a website
-
9:19
that it's great to just have a nice handy checklist like this to make sure
-
9:22
you're covering all the bases.
-
9:25
>>Yeah, definitely. >>So, pretty cool stuff.
-
9:27
>>Next up, we have an application called Ghostlab.
-
9:32
Now this is a paid application. They're not sponsoring the show,
-
9:35
full disclosure. Just thought that this was cool and that we would mention it.
-
9:38
So what this does, it's pretty interesting. You set up a site
-
9:43
inside of Ghostlab, you know, drag it in, and then it will launch an HTTP server for you.
-
9:48
You can then connect a browser to it,
-
9:50
or multiple browsers is where it really shines.
-
9:54
And then, as you're scrolling through on one browser,
-
9:57
it automatically updates all the other browsers.
-
9:59
>>That's pretty amazing. >>Yeah. This is wonderful if you were trying to test
-
10:03
mobile sites, because even as you're filling in a form on one browser,
-
10:07
it'll automatically fill it in on another as well.
-
10:10
And, if that weren't enough, you can automatically debug the stuff live.
-
10:15
Now you are going to need a browser that supports JavaScript
-
10:18
in order to get this to work. But definitely go ahead and check it out.
-
10:21
Synchronized testing is really, really the big deal, as well as inspection.
-
10:27
You can see immediately what's causing the problem in the browser
-
10:31
if you're getting some weird behavior or otherwise.
-
10:33
Immediately inspect it and see what's going on.
-
10:36
So. >>This pairs really nicely with that Usability Checklist,
-
10:41
because you can go through and make sure you're
-
10:43
covering all those check boxes in every browser.
-
10:47
>>Also, a Chardonnay. >>Hmm. Next up, we've got some handy—
-
10:54
We've got some Handy Sass Mixins.
-
10:58
Basically, Sass is a language that compiles to CSS.
-
11:07
So it can be read by the browser, but it's a much easier way to
-
11:11
write your styling, because you can use things like variables
-
11:16
and these pieces of code that are called mixins.
-
11:20
So you can mix in this Sass code into your Sass code very fluidly.
-
11:28
They have mixins here that are for responsive breakpoints.
-
11:32
So if you're building a website that uses responsive design, which really,
-
11:38
almost any website you're building should probably be using responsive design.
-
11:42
That's a handy mixin to use.
-
11:45
They also have mixins for targeting devices with retina displays or
-
11:51
high-resolution displays, and that's actually pretty simple to do.
-
11:56
There's just a lot of little steps here you got to remember,
-
11:59
and so that just encapsulates all of them really easily, and you can go ahead
-
12:04
and use it here as a Sass mixin, and you just say I want to go ahead and
-
12:08
include this 2x version of the image,
-
12:11
and it will go ahead and expand out that Sass into this CSS here.
-
12:16
They have a couple of others. There's a clear fix, one for box sizing,
-
12:20
border radii, which, I mean, that can get really complicated
-
12:24
if you're working with a lot of different browser shares,
-
12:28
so it covers all those. But pretty cool stuff, and if you use Sass,
-
12:33
this is definitely a handy set of mixins for you to use.
-
12:36
>>That would pair pretty well with Ghostlab, which we just talked about,
-
12:39
because it does support Sass. >>Or a nice Merlot.
-
12:42
>>I would have suggested a Pinot, but you know, your taste is your taste.
-
12:46
Next up, we have a JavaScript library called Hammer.js.
-
12:51
This is a library for multi-touch gestures, and I think it's incredibly well named.
-
12:57
Also, I really, really love the art on the site.
-
13:01
>>Conceptualist. >>Exactly. So this is going to be really useful if
-
13:04
you're working on, you know, phone, tablet, any device that supports multi-touch.
-
13:09
The Hammer JavaScript library will allow you to very easily attach elements—
-
13:15
attach certain events to elements.
-
13:18
So if somebody is swiping left, you can attach that to a specific div on the page,
-
13:23
capture that, and perform some sort of functionality
-
13:26
when somebody swipes left.
-
13:28
Now, this is a great library, and it's pretty small.
-
13:30
It's only 3 kilobytes when gzipped.
-
13:33
So check this out. They've got really thorough documentation, and
-
13:36
it is a great library.
-
13:40
So that's about all we got today. >>That is it for this week's episode.
-
13:43
I'm @nickrp on Twitter. >>And I am @jseifer.
-
13:46
If you like this show, please rate us in iTunes. Search for the Treehouse Show.
-
13:51
You can also find show notes and more on YouTube at youtube.com/gotreehouse.
-
13:56
>>And of course, if you'd like to see more videos like this one
-
13:59
about iOS, Android, HTML, CSS, business, and so much more,
-
14:05
Ruby, of course— >>Of course. >>This guy right here.
-
14:07
Be sure to check us out at teamtreehouse.com.
-
14:11
Thanks so much for watching, and we'll see you next week.
-
14:13
Stay tuned for our wine review podcast.
-
14:17
[? music ?]
You need to sign up for Treehouse in order to download course files.
Sign up