In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Web Developer Checklists.
Here are the links for the week:
How To Deal With Vendor Prefixes
Web Developer Checklist
Web Interface Lab
Nick: I’m Nick Pettit.
Jason: I’m Jason Seifer.
Nick: You’re watching the Tree House show, your weekly dose of internets,
where we talk about all things web design, web development, and
Jason: In this episode, we’ll be talking about HTML and CSS
frameworks, CSS3 prefixes, and HTML5 projects.
Nick: Let’s check it out. [music] First up is Workless.
Jason: That is my New Year’s resolution.
Nick: Work less.
Nick: Yeah. Great. That’s done. Workless is a CSS3 framework and HTML5
framework that is kind of a mish-mash of lots of other
frameworks we’ve already talked about.
Nick: What is it? It’s a mash-up of all the great things that this person
liked about Twitter bootstrap and HTML5 boiler plate. They also
included some of their own additions, which was very generous of
them. You can check it out on GitHub or download the zip file.
Honestly, we’ve talked about so many HTML5 and CSS3 frameworks
on this show. It’s hard to even say what’s different about them,
other than, go ahead and try it out on your own and see if it
works for your project. Maybe it will, and maybe it won’t. Use
it or don’t.
Jason: This one has pretty widgets. There’s that.
Nick: You can’t find pretty widgets anywhere else on the web, except for
later in this episode.
Jason: That is quite true. Next up, we have an article on the CSS
tricks blog on how to deal with vendor prefixes. Now, this is
going to be talking about CSS3 prefixes right now, since things
are not completely finalized. The different browser vendors
prefixed the different attributes with their own browser or
Nick: That’s when you see like, webkit or-MOZ. [SP].
Jason: Right. Got it. Now, there’s a couple different ways of dealing
with this. This is what the CSS tricks article goes over. Some
people prefer to do hand coding. If that’s the case, then you
can refer to this website: CSS3please, then get the values and
paste them right into your code. The other way to do it is to
let Prefix-Free, the Prefix-Free project, do it client-side for
you. This is a piece of java script that runs through and
automatically adds the vendor prefixes for you. The other idea
that you have, besides all these different hand offering ideas,
is to use mix-ins and popular frameworks, such as Sass, Compass,
or Bourbon, which will automatically put in these attributes for
you, and prefixes. It’s a quick list of do’s and don’t’s with
the quality that you’ve come to expect from the CSS tricks blog.
We’ll have a link to that in the show notes.
Nick: That’s super awesome. I love CSS tricks, actually. They’re just an
amazing website. Chris [?] does an awesome job of writing up
blog posts, like, ‘If you haven’t checked out CSS tricks, make
sure you do.’ I feel like the web community talks a lot about
hand coding, but doesn’t really talk about feet coding and what
that might mean.
Jason: I was going to write a blog post about that, but I got
distracted by cat pictures.
Nick: I hate it when that happens. Next up is the web developer checklist,
which is just a webpage with a whole bunch of check boxes to
make sure that you’re doing all the right stuff before you
launch your next web project. There are best practices, which is
kind of a general category. Then, there’s all the little things
you might forget about, like favicons or traffic analysis with,
say, Google Analytics. There’s also categories for SEO, security
code quality, accessibility, and finally, Addhumans.txt. All
sorts of just little pieces that make up a website before you go
ahead and launch it, really good checklist actually, very
Jason: Suspiciously lacking is coffee on launch day.
Nick: That’s very important.
Jason: Indeed it is.
Jason: Next up, we have a project called Gradient Scanner. This is
actually a really, really cool project. What it does is it lets
you upload an image with a gradient to the site, or you can use
the one that they have built in. Then, you can drag your mouse
over the different parts of the image. The gradient will preview
right below it. Then, you click ‘next’, and you get the CSS
version of this. You can just paste this right into your CSS
file. It is even properly prefixed with web kit linear
gradients, Mozilla linear gradients, and opera linear gradients.
Nick: Wow. That’s amazing.
Jason: I know. Wow. Also, if you click ‘next’ again, it will give you
the different hex colors that go into the gradient. You’re free
to do whatever you want with this information. You could discard
it. You could paste it into your CSS file, whatever you want to
do. Print it out, frame it, put it on your coworker’s desk; just
a few suggestions. Anyway, you can find a link to CSS Gradient
Scanner in our show notes.
Nick: That’s actually really awesome, all of your suggestions of course.
What’s also really awesome is that you could use this when
you’re slicing up, let’s say, a high fidelity mock-up. Let’s say
you mocked up a website in Photoshop, and you made some sort of
gradient somewhere. This would be a good tool to go ahead and
just drag very quickly and say, ‘How do I make that complex
gradient that I just made in Photoshop, in CSS?’ Pretty nifty
tool. Next up is Web Interface Lab. I have to pause, otherwise
it sounds like I’m saying, ‘Web Interface Slab.’
Nick: It’s ‘lab’. This is a collection of CSS3 code snippets in UI kits for
web developers. I know that because it says it right on the
Jason: Spoiler alert.
Nick: This is basically a gallery of a whole bunch of widgets, which we
promised earlier in the episode. You’ll notice a whole bunch of
different design patterns that you’re probably familiar with,
say, horizontal navigation here. This one includes some colorful
notification badges. Then, you can go ahead and click on these
and see a demo of it, or go ahead and download it to include in
your website. What’s also really nice is that they have
compatibility details here, so you’ll know if this is going to
work for the browsers that you’re targeting. What’s also really
nice about this is that it’s all CSS, so if you want to go ahead
and include this in your website, and you want to restyle it,
you can go ahead and do that. It’s not that hard to do. It’s
just code, pretty nifty stuff.
Jason: That is pretty fantastic. It’s also a really nicely designed
Nick: Yes. It is very well organized. Very impressive, actually.
Jason: Next up, we have a project called Junior. This is a front-end
framework for building HTML5 mobile apps with a native look and
feel. This is pretty interesting. You can see a built-in
simulator that they have on the right side of the screen. This
is going to let you easily create mobile applications. Here’s
the “show me more” button. I can’t do it on the simulator that
they have here. If you were on a mobile device, you could
actually swipe the different transitions here in the slide show.
Anyway, you click ‘show me more’, and you can see that it’s got
a very smooth CSS transition. It does look very native feeling.
You can click ‘next.’ It uses the HTML5 push date API, as well
as Backbone.js’s views and routers, and just a whole bunch of
stuff. This is a very good project that’s going to be a starting
point when building your mobile application. It’s not going to
build your app for you, but it will give you a nice cross-mobile
Nick: Pretty cool stuff. Next up is OriDomi.
Jason: Bless you.
Nick: Like origami.
Nick: Yeah. OriDomi. Basically, it’s just a piece of java script that
allows you to fold up div’s on your webpage.
Nick: Let’s go ahead and scroll down and look at a couple of examples here.
I can go ahead and click and drag, and fold up this paper. I can
go ahead and fold this one up like stairs. There’s also an
accordion. It looks like it even has support for animated gifts
there or something. That’s pretty nifty. Then, finally, they
have a page curl, which is actually just 10 of their different
panels put together. There’s so many of them that it actually
just looks like a nice smooth curve. There are several more
examples. It’s worth checking out. It uses java script,
obviously. I’m not really sure what you would use this for on an
actual website. Geez, is it really cool.
Jason: I know what I would use it for.
Nick: What’s that?
Jason: Let’s say you had an image gallery, and you wanted to delete an
image. You just fold it up a bunch of times until it deletes.
You can’t fold it anymore, that’s when it’s gone.
Nick: It’s just gone forever.
Nick: Or, if you wanted to show, say, the location of something. You could
go ahead and fold out a map, if you wanted a little bit more
interactivity. There’s a novel of uses, certainly. I’m not sure
what the practicality would be, but pretty cool stuff. You
should definitely check it out.
Jason: Possibilities are limited. Next up, we have a project called
Frank. This is an open source word press theme that’s designed
for speed. This is loosely based on the foundation framework
that we talked about a little while ago, kind of taking the best
parts to create a word press theme just specifically for speed.
It’s flexible, so you get a few different options for grids. It
works with HTML5 and CSS3. It is also responsive. This is a good
starting point I would say to check out, if you want to build a
really fast, really lightweight word press theme which uses all
the latest technologies.
Nick: I don’t want to use a really slow, heavy word press theme that uses
all the old technology. This fits right into my needs.
Jason: Oh, yeah. Definitely. That’s awesome. We could even make a
mobile version of Frank, using the last project, and call it
Nick: You just blew my mind.
Jason: Mind blown.
Nick: To be ‘Frank’ with you. Alright. Moving on. Next up is Sequence,
which is the responsive slider with advanced CSS3 transitions.
This is all coming from these websites folks. Basically . . .
Jason: They’re really selling it though.
Nick: If you go ahead and hit ‘play’ here, you can start to learn about
Sequence, which is available at Sequencejs.com. The summary of
this website, or TLDR, if you will, is almost like keynote. They
have some premium themes here. Not only can you go ahead and use
this presentation software, you can also apply themes. They do
have premium themes. They also have free themes, so you can go
ahead and apply those and see how it works. This is pretty
nifty. I highly encourage you to check it out. Also, go ahead
and check out the code because it’s open source, and there’s
probably quite a bit to learn here.
Jason: Yeah. That’s a really, really good point. Next up, we have a
clip from some Tree House Gold member content. This is our
expert teacher, Jim Hoskins, going through how to do angular JS
development. If you’ve been curious about the angular JS
framework from Google, well boom, here you go. Jim Hoskins is
going to walk you through.
Nick: Let’s check it out. [music]
Jim: Hi. I’m Jim Hoskins. In this workshop, we’ll be learning about
angular JS. Angular JS is a framework designed to make building
large interactive single page applications easy. Angular’s
approach is to try to remove complications of keeping your HTML
view and your java script data in sync, by using two-way data
binding. With two-way data binding, you use special syntax in
your template anywhere you want to have a dynamic piece of
information. Angular JS will replace that data binding statement
with the correct information, and it will notice anytime that
data changes and update the HTML appropriately. This means no
longer do we have to get references to our HTML elements from
our java script and update them manually. Angular JS handles it
all for us. Angular also takes a declarative approach to
building dynamic interfaces. Instead of writing a lot of java
script code, describing how to assemble our interface, angular
instead introduces special HTML attributes that allow us to
specify what we want our interface to be, not how we want it to
Combine that with the automatic view updates through data binding, and you
have to write very little java script to achieve a lot of
interactivity. In this workshop, we’ll see how to get up and
running with angular JS, starting from scratch, building a
dynamic java script app, powered by the Dribble API. We’ll see
how data binding will keep our HTML code up to date, how to
consume API’s with ease, and how to simulate multiple pages in
one page, using routing. I’m Jim Hoskins. Thanks for watching.
If you want to learn more, check out Teamtreehouse.com for more
great resources on web design, web development, and more.
Nick: Pretty cool stuff from Jim. That about wraps things up for this
week’s episode. I am @NickRP on Twitter.
Jason: I am @JSeifer. For show notes and more information on anything
we talked about on this episode, check out our Youtube channel
Nick: Of course, this episode was brought to you by Tree House, the best
place to learn how to design and develop for the web and mobile.
You can check us out at Teamtreehouse.com.
Jason: We’ll see you next time. [music]
A: If you’d like to see more advanced videos and tutorials like this
one, go to Teamtreehouse.com and start learning for free.