In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about CSS and Frameworks w/ special guest Ryan Carson.
Here are the links for the week:
Using the main element
Character Entity Reference Chart
There Is No Breakpoint | Sparkbox
How To Design For Android Devices
55+ Great and Useful Tools for Responsive Web Design
Nick: I’m Nick Petit [SP].
Jason: I’m Jason Sypher.
Nick: And you’re watching the tree house show. Your weekly dose of
internet, where we talk about all things web design, web
development and more.
Jason: In this episode, we’ll be talking about CSS tool tips, CSS
frame works and the usual round up of responsive web design. We
also have special guest, Ryan Carson, founder and CEO of
Nick: Let’s check it out. First up is Hint CSS.
Jason: Oh I thought it was hintsess.
Nick: No. It’s actually Hint CSS. I know
Jason: I thought it was written by that guy from Lord of the Rings.
Nick: This is basically a tool chip library written in CSS. Now tool tips
are these really cool little things you might have seen in web
apps; where when you hover over or click on something, a little
additional piece of help pops up and tells you something about
that button or widget or that particular piece of text. Looks
like you can also do it for images, you can change colors here,
and they also have a tool tip that shows all the time.
Jason: One of the things that I like about this particular tool tip
library is that it’s written in pure CSS, as opposed to a lot of
them which have a lot of Java Script heavy code to make it work.
So that’s kind of cool.
Nick: And these can be such a pain to implement, especially when you want
tool tips that are on the left, on the right or up or down and
kind of figuring out the logic of all of that. So this is
actually really nice, because all the work is done for you. You
can just go ahead and use this and just pop it right into your
Jason: Having all the work done for you is really nice.
Nick: I like it when all the work is done for me.
Jason: Yep. My question is can you create a tool tip on all sides
simultaneously to mark out a really important element.
Nick: You could, I don’t recommend it though.
Nick: Don’t know what could happen if you tried to do that.
Nick: That’s right. Use at your own risk.
Jason: So next up, over on Bruce Lawson’s blog, he has an article
called “Using the Main Element”. The main element is something
that’s relatively new in html file, but it’s actually an
element. So this is something that you would use in place of
something like a div with the id of main. Something that’s nice
about it is there is support for the html5shiv, now. The newest
releases have support for it.
Now, if you are using the main element in your web pages, it’s probably
still a good idea to add an [inaudible 02:39] of main for it,
unless your users are using the latest chrome or firefox builds.
Most browsers don’t have support for it just yet, so that’s why
you need to use the html5shiv. Anyway, we’ll have a link to that
in the show notes you can check out on our YouTube channel.
Nick: Cool. Well next up is yet another contender in the arena of CSS
frameworks. It’s called “Ground Work” and it’s currently in
beta. It has basically everything you would expect from a really
awesome, modern CSS framework. It’s built with SAAS and Compass.
It’s flexible, responsive, works on a fluid grid system,
Jason: All the buzz words.
Nick: That’s right, and it’s free in open source. There’s a few more. It’s
device agnostic, works in all the major browsers. Now, the
really cool thing about ground work, in my opinion is just how
incredibly responsive it is from a front end performance
perspective. You just click on each one of these navigation
items here and the pages load almost instantly. In fact, the
ground work site itself is almost more interesting than the
framework. Anyway, really, really great CSS framework.
Definitely worth checking out.
Jason: Yeah, we were checking this out earlier and we were both very,
very impressed at the speed.
Nick: Pretty awesome.
Jason: So, next up we have a character entity map. There’s not too
much to say about this, but if you’re putting up a web page and
you’re just racking your brain to see what the exact symbol is
for maybe the copyright or numeric symbols there’s a nice link
we’ll have in the show notes that has every single character you
could possibly want to put on one of your web pages and it shows
you the symbol that you would have to use. There’s also the UTF
character code. Just a few different ways of having these
displayed in your web page. This is a really, really long list,
but it’s also very visual which is something that I like about
it because you can easily see the character before you want to
put it in your page. So check that out. Pretty simple. Not that
much to say about it. Very useful.
Nick: That’s really handy. No matter if you’re a beginner or really
advanced. That’s something that you have to look up all the
time. So that’s nice to have a handy reference. So next up is
this really cool blog post called, “There is no Break Point,”
which is a reference to “There is no spoon”, from “The Matrix.”
Jason: I thought it was a reference to “Ghostbusters.”
Nick: No, it’s actually not a “Ghostbusters” reference. Anyway, “There’s no
break point” is about break points in responsive web design.
This is basically where you target your media queries towards
certain resolutions. So as you get down to an i pad size or a
phone or get up to a large desktop, you put in these break
points in pixels using media queries; and this article is saying
that’s actually not the best way to go about things. Instead,
you should do it based on each particular feature of component
of your design. So as your screen resolution is getting smaller,
or larger depending on the device, you should actually just look
at each part of the design and decide on and individual basis,
where they work across that whole spectrum of resolutions. So
really interesting blog post. Definitely worth checking out.
Jason: That’s thought provoking.
Nick: It is.
Jason: Sounds like a lot of work though.
Nick: It does sound like a lot more work. I was thinking about that too,
but you know, maybe it actually isn’t, because you definitely
spend a lot of time figuring out where those break points are.
You might spend a lot of time digging into your site analytics
to try and figure out those break points and it’s a lot of
friction either way. So, this might be faster it’s hard to say.
Jason: Cool. Well read the blog post, decide for yourself.
Nick: That’s right.
Jason: Next up, we have a new Java Script plug in from Twitter called
typeahead.js. Now this kind of gives you the type ahead auto
complete functionality that you’ve seen on tons of different
websites at this point.
Nick: So, that’s where you’re typing something and it will actually type
the rest of the sentence or letter for you.
Jason: Right. As an example I’m on the screen here, take a letter “B”
and then you can see the different projects Twitter has that are
open source and you can press the up and down arrows to select
them and there is selects it and you can add this right into
your text box. Pretty easy to use, very fully featured. It has a
bunch of different configuration options, and it’s by Twitter so
you know it’s going to be supported for at least a little while;
and if you’re using a boot strap based site it will work pretty
well with that.
Nick: Cool. That’s awesome. So next up is another blog post. This one’s
called “How to Design for Android Devices”, and this is
something that I’ve been actually interested in myself and this
blog post makes a great point by saying that up until now, the
android platform really hasn’t had a very mature design
language, it’s kind of been a little bit all over the place. I
think they started a little bit differently from say, IOS which
started out with a strong design language, but android has
matured in the past few years not just on the development side,
but also in terms of design. So this blog post just walks
through all sorts of common designs that you find on the android
platform, such as a back button, different screen resolutions.
They have this really nice starter kit. So it’s a really cool
post if you are designing the android apps or if you’re just
trying to create a really great web experience on an android
device. It is worth digging into those platform specific
features and making a really good experience for those
particular users; because anytime you reuse a design pattern,
you’re in a much better position to basically educate your users
about how to use that user interface.
Jason: Yeah. They’re already used to it.
Nick: I think I said use like five or six times there.
Jason: That’s okay. We liked every single one of them. Next up over on
the “One Extra Pixel” blog, there is actually a great round up
post of 55 great and useful tools of responsive web design. I
don’t want to shamelessly self-promote too much, but we did talk
about quite a few of these on previous episodes of the Treehouse
show; so just maybe go and check out our archive too. There are
tools for pretty much everything you would need when getting
started with responsive web design; different things on
different tiles, sketch sheets. Different possible mock up and
lay out tools, and then different tools that we’ve talked about.
Things to re size your browser to check for the latest
responsive web design. It’s a really thorough blog post and
you’ll probably pick up at least one or two things that you
haven’t seen before. So definitely check that out.
Nick: Sweet. So, speaking of sweet, we have a little bit of a special treat
Jason: Yeah. You guys have been pretty good.
Nick: You’ve been well behaved. You deserve it. We got a chance to catch up
with founder and CEO of Treehouse, Ryan Carson. Let’s see what
he had to say. So you recently wrote a blog post titled “A 90
Day Plan” on ryancarson.com. What’s that all about?
Ryan: Well, it was brought about by a lot of pain and suffering. The reason
why is because, most of the stuff you learn when you start a
business is that you don’t know anything about how to run a
business or how to scale a team and I think all of us at tree
house realized how we’re really growing. We’re 50 people now.
We’re past kind of the stage where we can all just kind of chat
to each other and figure out what’s going on and someone on the
team, Mike Watson, had the idea of creating a 90 day plan, and
it’s been amazing for us, because it’s allowed us to focus on a
couple things and get them done; without completely distracting
everybody and moving things around. So the best thing I would
say for everyone that’s listening that’s thinking about when
they start up or is involved in a company, whether it’s a start
up or not is that creating a plan that lasts 90 days allows
everybody to gather around that and clarify, Okay, what are we
doing here? What’s important? What is the priority? Then execute
on that. So the way a 90 day plan works is that you all
strategize about, Okay what do you think is important? Let’s
talk high level and then once we’ve established the high level
things, Okay let’s prioritize them one, two or three. Then after
you prioritize them one, two, three, then you assign one person
that’s responsible to execute on that, and then you freeze it
and you say we’re not going to mess with it.
As a founder entrepreneur type person, I had a tendency to come
in and mess with things and say “So, we were going to do that,
but now we’re going to do this” and it basically was confusing,
because as the boss people would sort of say, Okay I guess we’re
going to do that thing, even though yesterday you said we’re not
going to do that thing. So it actually keeps everybody
accountable to execute and what we all agreed was important.
I’ve really enjoyed it. I don’t know what you guys think, I’d
like to hear that, but so far I think it’s helped us to stay on
task and communicate clearly what we want to do. So it’s been
good, I think.
Nick: It’s been great. A lot of people might not know this, but Treehouse
is a pretty distributed company. We have an office in Orlando
and another one in Portland, and we have employees distributed
all over. What are some tools that you would recommend when
running an online business or a business that’s distributed?
Ryan: That’s spread out. I would say we have a core set of tools. One is,
we use Trello. So Trello.com and I’m not being paid to say that
and it’s just a great visual [inaudible 13:06] style to-do
system. I personally use that for a delegated list. So when I
speak to the people that report to me and we decide to be done,
we create a board we share and it’s called delegated. That just
allows me to go down that list and say “Hey, you know we talked
about this, how’s that going?” Because it’s really easy to,
after you do something you’ll forget you asked them and then you
don’t check up on it. So that’s one thing we use, so Trello is
great. Not just for delegate list, but it allows people to share
things across the company they want to get done. It’s visual, so
you kind of move cards around left to right. That’s great. It’s
free, so that’s really good. We started to use Google Hangouts a
lot more. We do use GoToMeeting and Skype, but GoToMeeting is
about $50 a month and it’s good, but the friction is kind of
high. You have to have the app installed and every time you
install the app it tells you, you don’t have the latest version
and it has to install the latest version and then you wait for
that one, saying what’s going on? Why isn’t the meeting
starting? So Google Hangouts have been pretty good. We use
Campfire quite a bit. Campfire is just our place. It’s kind of
like our water cooler really, because we’re spread out we don’t
get to hear all the funny jokes; especially people who are not
in Orlando. We don’t get to see the insanity that happens here.
It’s a nice way to kind of tap into that and hear some of the
jokes and be a part of it. I don’t really get any work done in
campfire. It’s more just having fun. I think some of the teams
do use it to actually communicate a lot.
Primarily our app team, so the developers have a room in
campfire and they’re really active in there. What I’ve learned
about developers is that they are very efficient communicating
through chat. It used to frustrate me, like why don’t you guys
just call each other and talk? This is crazy that you type all
this stuff. Well we type for a living. That’s what we do. So
it’s much more efficient. So campfire works well and we try to
cut down on email, but that never really works so we just decide
to try to be reasonable with email.
Nick: What is one piece of advice you would give somebody wanting to start
their own business?
Ryan: Number one, I think it’s possible. So, if you think you have a good
idea, instead of presuming that it’s too hard or not possible,
assume that it can probably happen. So that’s the beginning; and
then the second thing is try to do a very simple version of your
idea and then explain it to some people and then ask what they
think are the problems of it. So it doesn’t really work past
someone if your idea is going to work, because if they like you,
they’ll fee pressured to say yes, but if you say “I’m thinking
about doing this idea, what do you think will not work about
it?” It gives them the freedom to say, “Well, no one will buy
it.” Then you can say, “Oh yeah that’s probably not going to
work.” So, I think believing in the idea and then asking people
if they will actually pay money for it and then trying to build
a simple version of that and get people paying for it right away
is the key. I think the other thing that fits into all that is
get spun up on some basic business concepts, like how does
profit and loss work and how does basic accounting work. Then
once you are ready to start the business you’ll be a little bit
Nick: All right, well thanks so much for hanging out with us, Ryan. I
really appreciate it.
Ryan: Thanks for letting me in [Beta], I appreciate it.
Nick: That’s it for this week’s episode of the tree house show on Twitter.
I am @nick[rp].
Jason: And I am @jsypher. Thanks so much for watching this episode of
the tree house show. For show notes and more, check out our you
tube channel at youtube.com/gotreehouse.
Nick: And of course if you’d like to see more videos like this one and
learn about web design, web development, mobile development,
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.