The Treehouse Show Episode 1: CSS and Javascript Tools

Note: This is a previously filmed version of the Treehouse Show, a show where Treehouse teachers give tips on web design, web development, and more! Stay tuned for more episodes each week!

In this first episode of The Treehouse Show, Nick Pettit and Jason Seifer (@jseifer) talk about Responsive Web Design as well as several CSS and JavaScript tools that can help you develop websites more quickly.

Transcript:

Nick Pettit: Jason, I think the best way to go is with responsive web
design. I think if you’re coding for a whole bunch of different devices you
should really just stick to one code base.

Jason Seifer: I disagree with your position. I think you’re going to go
with device specific layouts and sites.

Pettit: I think it’s so much easier to just have…Wait, are we on?

Seifer: Yes, we’re on. I forgot to tell you we’re on.

Pettit: We should probably start the show then. I’m Nick Pettit.

Seifer: I’m Jason Seifer.

Pettit: You’re watching The Treehouse Show your weekly dose of
internets where we talk about all things web design, web development and
more in front of a live studio audience.

Seifer: I personally am a big fan of “the more”. On this episode of the
Treehouse show we’re going to be talking about CSS and JavaScript
frameworks and interesting applications you might find useful when
developing your websites and/or web applications. Let’s go ahead and kick
if off.

Pettit: The thing we were talking about before the show started:
responsive web design vs. mobile specific sites. Responsive web design is
basically a way for you to code with a single code base for multiple
devices. You have your desktops, tablet devices and also mobile phones. It
can be a real hassle to make your website work on all these different
devices. If you use responsive web design you can create a single code base
and all your dreams will come true.

Seifer: Not sure about that, Nick. When we’re talking about coding a
specific version of the site for all of the different applications, what’s
going to happen is you go to the desktop version of the site, they call
that the “full site” on a lot of websites. You get one single version of
the site.

You can also use a framework such as JQuery mobile to do an iPhone specific
version of the site, an iPad specific version of the site and maybe an
Android specific version of the site. The drawback to coding on a device
specific basis is that you wind up doing a bit more in the long run rather
than having one specific layout in a responsive web design.

Pettit: To me, that just sounds like a whole lot of work. I really
think there’s only one person that can settle this argument.

Seifer: Who’s that?

Pettit: That is 90s Web Design Guy. 90s Web Design Guy, what do you
think about all this responsive stuff?

Design Guy: I’m sorry. I was just watching Dawson’s Creek marathon. The
Responsive? When I’m web designing there is only one way you should go,
fall back on the skills we learned in the 90s. Here’s what you do: you give
people what they want. You give people a site that looks good. Am I right?
Am I right?

Seifer: It sounds right.

Pettit: I can’t really argue with that.

Design Guy: You start off with a flash intro on your splash page. Then two
links, and two links only, HTML or flash. Make sure you optimize for
Internet Explorer or Netscape Navigator and you’re good. Don’t worry about
Androids using it. Human beings are going to use your site.

Pettit: Thanks for your contribution, 90s Web Design Guy. Really good
advice.

Seifer: Very insightful.’

Pettit: Yes.

Design Guy: OK. Friends is coming on, so I’ll see ya.

Pettit: Really, really good advice there. Actually, not at all.

We’re going to move on and talk about this really cool called Ceaser.
Basically, it allows you to create CSS through transitions really easily.
There’s a cubic Bezier function when you’re creating a CSS transition that
allows you to create a custom animation curve.

Seifer: Nick. For those of us developers in the audience what is this
“Bezier curve” you’re talking about?

Pettit: A Bezier curve is basically this curve, where you have two
different handles and you can adjust the curve that way. That’s really
complicated when you’re just dealing with numbers and typing out code. What
Ceaser allows you to do is see a graphical representation of this. You can
drag these handles and it will change the numbers in real time.

You can see that at MatthewLein.com/Ceaser. Really, really cool stuff. When
you click left or width or height in this particular demo, you can actually
see how your animation curve changes as you’re adjusting it. You can also
adjust other things like the duration. It will create code that you can
copy and paste into your website. Pretty cool stuff for designers or for
developers.

Seifer: I believe we can both agree on that. The next thing we’re going
to talk about today is an application called “Slowy”. This is an
application for your Mac that sits inside your menu bar and what it does is
simulate different connection speeds. Not everybody has a high speed
internet connection, so as you’re designing or developing your website you
can simulate a 56k connection, you can simulate a 3G connection for your
iPhone or LTE if you’re lucky enough to have an LTE enabled device.

It is a paid application and it costs $4.99. They are not sponsoring the
show, shame on them, and you can download it at slowyapp.com. It is very
important to consider connection speeds when you are developing your
websites.

Pettit: Really, really cool stuff. Next thing we want to talk about is
Scrollarama. This is really fun. Basically people are trying to create this
effect called parallaxing or parallax scrolling.

Seifer: Like on the Nike website.

Pettit: Exactly. As you’re scrolling down the page all sorts of
different stuff will start to happen. I’m going to scroll down on the
Scrollarama site, or as this version 2.0 is called Super Scrollarama.

Seifer: Back in the habit.

Pettit: That’s right. As you scroll down, you can see all these different
effects happen; fade it, fly it, spin it. Sounds like a daft punk song,
right? It’s really, really, cool. It’s just a JQuery plug in so it’s super
easy to use. You put JQuery onto your site, you throw in Super Scrollarama
and then you have access to all of these effects.

Seifer: Next up we’re talking about MeteorJS. MeteorJS is a JavaScript
server and client side framework that helps with writing real time or not
real time web applications. What’s really nice about MeteorJS is that as
you are writing code and updating it for the client your data is
immediately pushed up to the server. If there is some sort of error this
can be a little bit strange. The errors will propagate back over to the
client side.

This can be a little bit weird in a situation where say you update your
email address and it’s already taken. If you click “save” it will update.
It goes to the server, the server says, “Hey. Sorry. That email address is
already in the database,” and sends back your old one to the client.

From a UI side how do you think you’d handle something like that, Nick?

Pettit: If it came back like that with some sort of error you might
want to put a border around the input area saying, “Something’s wrong with
this specific part of the form.” You might also want to have some sort of
text or tool tip next to it explaining a little bit more about what went
wrong or what the user needs to do to correct it. You might want to put an
“X” there instead of a border just to draw the user’s attention to that and
let them know they need to fix something here.

Seifer: That sounds correct. Other interesting thing about MeteorJS is
that it has hot code pushes. As soon as you push your new code out to the
server, not only is it updated immediately on the server with your new
version of the code, your clients get updated too. Somebody doesn’t even
need to reconnect to the site or refresh the page to get the new code. You
can check this out at Meteor.com. There are some interesting screencasts as
well as example code to download and play with.

Pettit: That’s hot.

Seifer: It is hot. Hot code pushes.

Pettit: It’s a hot domain name too, Meteror.com

Seifer: That’s great.

Pettit: Next up we’re talking about CSS frameworks. There are two
specifically that I want to draw our attention for this week’s episode
because we’re talking about responsive web design.

First up is Bootstrap from twitter. Bootstrap is just a CSS framework like
so many others out there except you can create all sorts of flexible
awesomeness that you would want to use in your responsive site. You can
create your 12-column grid but that will flex, or respond, as you’re
resizing the web browser.

The other one is Zerb Foundation 3. Obviously, this is the third version of
Foundation. It came out pretty recently and again, it’s just another CSS
framework that allows you to create grids really easily. This is great for
either designers or developers. It allows you to start out with a bunch of
code that’s going to make you code your site faster. It going to help you
along and get started much quicker.

Seifer: Also a bit more semantically. There are a ton of classes if
you’re building complicated forms…I’m sorry. That was me. I know this is
horrendously unprofessional.

Pettit: I think that was 90s Web Design Guy’s beeper, actually.

Design Guy: You’re talking about the Zerb Foundation?

Seifer:: Yes.

Designer Guy: Oh, man. They’re one of my favorite wrestling tag teams of
all time. All right, I’ll catch you later.

Pettit: Al right, cool.

Designer Guy: I sent you a message.

Seifer: Thanks for that. I got that on my pager. Check out Zerb
Foundation or Twitter Bootstrap. The interesting thing about Twitter
Bootstrap is now we’re getting plug ins on top of it. There are things
called Kickstrap which does theming on top of the regular Twitter Bootstrap
components.

The important thing is when you’re using one of these CSS frameworks you
start with about 80% of a really great framework already. Then a good
designer can add in anything you need. Also, it will help developers and
designers to get up to speed quicker on your projects.

Pettit: I think it’s really useful for developers as wel,l because if
you’re working alone, you’re a developer working all by yourself, it’s
helpful to use a CSS framework like this because it sets up certain design
constraints like a grid so you don’t go too terribly crazy outside of what
might be a very small comfort zone.

Seifer: We’ve got all this responsive web design now in these CSS
frameworks. I think I’m going to head on over to your camp and change my
opinion. Go with responsive web design. I think we found a common ground
today.

Pettit: I think we’ve made a lot of progress.

Seifer: I think so, too. Our therapist will be proud. Thanks everybody
for listening to the Treehouse Show. If you have any comments tweet NickRP
or JSeifer and check out Treehouse at TeamTreehouse.com.

Pettit: Thanks so much for watching. We’ll see you next week.

Seifer: Stay classy.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

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

Comments are closed.