Web Typography, CSS Patterns and Simple Icons | Treehouse Show Ep 33

Treehouse Show

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Web Typography, CSS Patterns and Simple Icons.

Here are the links for the week:

Typeplate » A typographic starter kit encouraging great type on the Web
http://typeplate.com/

HTML’s New Template Tag: standardizing client-side templating – HTML5 Rocks
http://www.html5rocks.com/en/tutorials/webcomponents/template/

CSS3 Patterns Gallery
http://lea.verou.me/css3patterns/

The Beginner’s Guide to JavaScript Date and Time
http://www.sitepoint.com/beginners-guide-to-javascript-date-and-time/

Gumby – A Flexible, Responsive CSS Framework – Powered by Sass
http://gumbyframework.com/

SVGeezy – a JS plugin for SVG fallbacks
http://benhowdle.im/svgeezy/

Simple Icons
http://simpleicons.org/

Mobile Emulation – Chrome Developer Tools — Google Developers
http://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Video Transcription

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

Nick: You’re watching the Treehouse Show, your weekly dose of internets,
where we talk about all thing web design, web development, and more.

Jason: In this episode, we’ll be talking about web typography, CSS3
Patterns, and Simple Icons.

Nick: Let’s check it out. First up is Typeplate. This is basically a
typography starter kit or a Sass mix-in that you can go ahead and include
in your website.

Jason: I think it’s worth noting, Nick, when you say Sass mix-in you mean
the CSS framework, Sass.

Nick: Correct.

Jason: Not you know, a way of offering sassy comments into a normal show,
right?

Nick: You’re really mixing in the sass right now, but yes.

Jason: Just thought we would clarify that.

Nick: Thanks. Yes, so it’s a Sass mix in that allows you to, basically set
different typographic design patterns within your website. So if you’re a
developer and you have trouble setting your typographic scales, so for
example, as you start to get down to smaller and smaller font sizes, you
have to change the line height, this is definitely for you, because it
allows you to do that in a quantitative way, rather than just kind of eye-
balling it and guessing, and wondering if something looks right. So this is
a much faster way to just go ahead and implement those nice typographic
styles, without having to worry about it a whole lot.

Jason: As a developer I like that, because I can just assign line height
and font size to a variable, and then modify that for the different sizes
in the CSS.

Nick: As a designer I like it, because it means the developer can’t go in,
and mess up your nice design.

Jason: We’re all about compromise here on the Treehouse Show.

Nick: Yes.

Jason: Next up, we have a blog post on HTML’s new Template Tag. Now this is
a pretty awesome thing, and this is going to be mostly used for client-side
JavaScript libraries. So there’s a bunch of different JavaScript templating
libraries that we have right now, and they all work a certain way to
manipulate the Dom, and let you have content in them. The new HTML5
Template Tag is going to be an actual tag called Template, and this isn’t
going to exist in the Dom at all. So it’s just going to sit inside of your
page, and then you can call it when you need to.

This is something that’s going to be more useful for template language
authors to use, to really speed up the sight. Now there are a lot of
different properties that the template is going to have. So you call a
Template Tag, you give it an ID and then it sits there, until you’re ready
to use it. Now what’s really, really nice about the Template Tag is since
it’s sitting in the Dom, and not being used, and it’s actually invisible,
you don’t have any performance penalties, while it’s just sitting there.
Now this is something that’s going to be very useful for the perception of
speed. So there’s not going to be any page reflows or anything like that
while you’re using the Template Tag.

Anyway, there’s a great tutorial on how to use this over at HTML5rocks.com,
and you can find that link in the show notes at youtube.com/gotreehouse.

Nick: Very cool stuff. Next up is a CSS3 Patterns galley. Now of course you
can go ahead, and use images to generate nice patterns and textures on your
websites, and in your background images, but this is actually a way to do
it with CSS. Now if you scroll through here, you’ll see a bunch of really
cool looking patterns. There’s a rainbow pattern here, upholstery, zigzags,
arrows, etc. So if I go ahead and click on one of these, it will give you
the CSS that will actually generate this pattern.

Now again, this isn’t using any images this is all being built in pure CSS.
What that means is that you’ll get really fast load times, because you’re
not loading in these images that need to repeat You’re not worrying about
how they have to repeat across a background, and if you’re lining up the
seems just right. And the other nice thing is that it’s CSS, so it’s all
vector-based and that means that you can scale up to these high-DPI
displays really nicely without having to worry about any kind of jagged
pixels. Very cool stuff, definitely worth checking out.

Jason: Jagged pixels sounds like a great album name.

Nick: I agree.

Jason: For a web.

Nick: We’re starting a band, I don’t know if we mentioned that.

Jason: Yeah, web band.

Nick: Jagged Pixels.

Jason: First album.

Nick: Coming this fall.

Jason: Look for it. Next up we have an article on SitePoint called the
Beginner’s Guide to JavaScript Dates and Times. This is a great walkthrough
about learning how to use the date and times in JavaScript. It even goes so
far as talking about the new HTML5 date elements that you can attach to
different inputs.

Now it goes through, shows you very simply how to create a new JavaScript
date, and you can even do that with certain strings. So there are different
options that you can give it, you know, getting the date, getting the full
year, getting the month., and you can even go so far as programmatically,
setting the date via a blank date object.

So they walkthrough, they give a really nice walkthrough of just kind of
getting started, and an introduction to it. Once you get a little bit more
advanced, I recommend you using a library, such as moment.js. That’s a
really great one that handles formatting and abstractions for you, as well
as the inconsistencies in different browsers.

Nick: Very cool stuff.

Jason: So, Nick, Paul Boag was in town, and I had the chance to interview
him.

Nick: Cool.

Jason: Check it out.

Nick: Check it out.

Jason: I’m Jason Seifer, I’m here with the Treehouse Show, and we’re doing
an interview today with the one and only, Paul Boag. Paul, thank you very
much for being here today.

Paul: You’re welcome.

Jason: Web design.

Paul: Yes.

Jason: Mobile.

Paul: Oh, absolutely.

Jason: Web development.

Paul: No.

Nick: Wow, Jason, thanks for asking the real hard hitting questions.

Jason: No problem.

Nick: That was a really insightful interview. Next up is Gumby, which is
yet another CSS framework. We talk about a lot of CSS frameworks here on
the show, but it’s a very good one so we should take a look. If we go ahead
and scroll down here on the Gumby 2 website you will see that it’s using
Sass and Sass, of course, allows you to generate your CSS and gives you all
sorts of functionality on top of that. It’s a very flexible framework,
meaning that it will work across a wide variety of screen resolutions.

They tout is as being very simple of course, it should be. It’s very
robust. You get the idea. It’s another CSS framework. It’s a really good
one. When choosing a CSS framework you should definitely consult your
doctor first. No, I’m just kidding. You just definitely try out different
types of CSS frameworks to determine which one is the best for the project
that you’re working on. And also the one that matches your own personal
preferences because there’s so much different nuances there, and while one,
two, or ten different CSS frameworks might be the right one for a
particular project, it might not be the right one for you and your
particular style.

Jason: If it takes more than four hours to implement a CSS framework, you
might want to consider using a different one.

Nick: Yes, but basically there’s not a best CSS framework. That’s why we
cover a whole bunch of them here on the show.

Jason: And they’re all useful.

Nick: Very much so.

Jason: Next up we have a quick plugin called SBGeezy. This is a really
great JavaScript plugin that will look for SVG images on your site, and if
your browser does not support SVGs it will roll back to a PNG version
automatically. This is going to be good for older browsers. We’re not going
to name any names, but older browsers that don’t have SVG support.

Nick: Netscape.

Jason: Yeah, Netscape, Mosaic we’re looking at you. Very quick, there’s a
download on GitHub link. and you’ll be able to find that in the show notes.

Nick: Pretty cool. Next up is Simple Icons. As the name implies, it’s a
simple set of icons. These are all in PNG format in 11 sizes, from 16
pixels all the way up to 4096 pixels. If you have to go ahead, and create
say a favicon for your website and you want to try to use one of these,
that might be a good way to go or if you need to include one of these in an
IMAX feature film, they have the resolution that allows you to do that as
well. So pretty cool stuff and in all seriousness this is a way for you to
go ahead, and include an icon at normal size, and also include the same
file for retina resolutions.

Jason: They get extra points for having the Treehouse logo in there.

Nick: Boom.

Jason: Boom.

Nick: Boom.

Jason: So I think that’s all we’ve got for this episode. Nick, who are you
on Twitter?

Nick: I am @nickrp.

Jason: And I am @jseifer. For show notes and more about anything we talked
about check out our YouTube channel at www.youtube.com/gotreehouse.

Nick: Of course, if you’d like to see more videos like this one where we
talk about web design, web development, starting a business and more, be
sure to check us out at teamtreehouse.com. Thanks so much for watching and
we’ll see you next week.

Announcer: If you’d like to see more advanced videos and tutorials like
this one, go to teamtreehouse.com and start learning for free.

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

3 comments on “Web Typography, CSS Patterns and Simple Icons | Treehouse Show Ep 33

  1. great resource guys I really enjoy all the new tools you guys share. I only have one issue, I am brand new and sometimes have problems where to start, and sometimes I don’t know if I need to know something else before I dive into some of these new frameworks and tutorials.

  2. You guys rock! Team Treehouse is the best find for online learning. I’ve stopped taking community college web design courses because they are so outdated. You are officially my new heroes. Learning and loving every minute of it!

  3. I will use Simple Icons forever! Thank you! Gumby also looks awesome. I am definitely going to try that for my next project instead of Boostrap.