Episode 30: CSS and Frameworks w/ guest Ryan Carson

[Nick Pettit - @nickrp] I'm Nick Pettit. >>[Jason Seifer - @jseifer] I'm Jason Seifer. 0:01 And you're watching The Treehouse Show, your weekly dose of Internets 0:03 where we talk about all things web design, web development and more. 0:06 In this episode we'll be talking about CSS tooltips, 0:09 CSS frameworks, and the usual roundup of responsive web design. 0:12 We also have special guest Ryan Carson, founder and CEO of Treehouse, here. 0:16 Let's check it out. 0:21 [Morse code beeping sound] 0:24 [The Treehouse Show] 0:27 First up is Hint.css. [http://kushagragour.in/lab/hint/] >>Oh. I thought it was hintses. 0:30 No, it's actually Hint.css. I know. 0:34 I thought it was written by that guy from Lord of the Rings. 0:37 This is basically a tooltip library written in CSS. 0:39 Tooltips are these really cool little things you might have seen in web apps 0:43 where when you hover over or click on something 0:49 a little additional piece of help pops up 0:52 and tells you something about that button or widget or that particular piece of text. 0:56 Looks like you can also do it for images, 1:02 you can change colors here, 1:06 and they also have a tooltip that always shows all the time. 1:09 One of the things that I like about this particular tooltip library 1:14 is that it's written in pure CSS as opposed to a lot of them 1:17 which have a lot of JavaScript-heavy code to make it work. 1:19 So that's kind of cool. 1:23 And these can be such a pain to implement, especially when you want tooltips that are on the left 1:24 or on the right or up or down and kind of figuring out the logic of all of that. 1:30 This is actually really nice because all the work is done for you. 1:34 You can just go ahead and use this and just pop it right into your app. 1:38 Having all the work done for you is really nice. 1:43 I like it when all the work is done for me. 1:45 My question is, can you create a tooltip on all sides simultaneously 1:47 to mark out a really important element? >>You could. 1:52 I don't recommend it, though. >>Okay. 1:56 Don't know what could happen if you try to do that. >>Chaos. 1:58 That's right. Use at your own risk. 2:01 So next up, over on Bruce Lawson's blog 2:03 he has an article called Using the Main Element. [trhou.se/W4gubB] 2:06 The main element is something that's relatively new in HTML5, 2:10 but it's actually an element. 2:14 This is something that you would use in place of something like a div with the ID of main. 2:16 Something that's nice about it is there is support for it with the HTML5Shiv now. 2:22 The newest releases have support for it. 2:28 If you are using the main element in your web pages, 2:30 it's probably still a good idea to add an ARIA role of main for it 2:36 unless your users are using the latest Chrome or Firefox builds. 2:40 Most browsers don't have support for it just yet, so that's why you need to use the HTML5Shiv. 2:45 But anyway, we'll have a link to that in the show notes which you can check out on our YouTube channel. 2:50 Cool. Next up is yet another contender in the arena of CSS frameworks. 2:55 It's called Groundwork, and it's currently in beta. [trhou.se/W4gubz] 3:02 It has basically everything you would expect from a really awesome modern CSS framework. 3:06 It's built with Sass and Compass, it's flexible, responsive, works on a fluid grid system, nestable, etc. 3:13 [Seifer] All the buzzwords. >>[Pettit] That's right. And it's free and open source. 3:22 There's a few more. It's device agnostic, works in all the major browsers. 3:25 The really cool thing about Groundwork, in my opinion, is just how incredibly responsive it is 3:31 from a front end performance perspective. 3:38 I mean, you just click on each one of these navigation items here 3:41 and the pages load almost instantly. 3:45 In fact, the Groundwork site itself is almost more interesting than the framework. 3:48 But anyway, really, really great CSS framework. Definitely worth checking out. 3:54 Yeah. We were checking this out earlier and we were both very, very impressed at the speed. 4:00 Pretty awesome. 4:04 Next up we have a character entity map. [trhou.se/W4gw3c] 4:06 There's not too much to say about this, but if you're coding up a web page 4:10 and you're just racking your brain to see what the exact symbol is for maybe the copyright 4:13 or numeric symbols, there's a nice link that we'll have in the show notes 4:17 that has every single character you could possibly want to put on one of your web pages 4:22 and it shows you the symbol that you would have to use. 4:27 There is also the UTF character code. 4:31 Just a few different ways of having these display in your web page. 4:34 This is a really, really long list but it's also very visual, 4:37 which is something that I like about it because you can easily see the character 4:41 before you want to put it in your page. 4:46 So check that out. Pretty simple. Not too much to say about it but very useful. 4:48 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. 4:52 So it's nice to have a handy reference. 4:59 Next up is this really cool blog post called There Is No Breakpoint, 5:01 which is a reference to "There is no spoon" from The Matrix. [trhou.se/W4gw35] 5:05 [Seifer] Oh. I thought it was a reference to Ghostbusters. 5:10 [Pettit] No, it's actually not a Ghostbusters reference. 5:13 Anyway, There Is No Breakpoint is about breakpoints in responsive web design. 5:17 This is basically where you target your media queries towards certain resolutions. 5:23 So as you get down to an iPad size or a phone or get up to a large desktop, 5:30 you code in these breakpoints in pixels using media queries. 5:36 This article is saying that that's actually maybe not the best way to go about things. 5:42 Instead, you should do it based on each particular feature or component of your design. 5:47 So as your screen resolution is getting smaller or larger depending on the device, 5:53 you should actually just look at each part of the design 6:00 and decide on an individual basis where they work across that whole spectrum of resolutions. 6:03 So really interesting blog post. Definitely worth checking out. 6:10 [Seifer] That's thought-provoking. >>[Pettit] It is. 6:14 [Seifer] Sounds like a lot of work, though. 6:17 It does sound like a lot more work. I was thinking about that too. 6:19 But you know, maybe it actually isn't because you definitely spend a lot of time 6:22 figuring out where those breakpoints are. 6:26 You might spend a lot of time digging in to your site analytics 6:29 to try and figure out those breakpoints. 6:32 It's a lot of friction either way. 6:35 So this might be faster. It's hard to say. >>Hmm. Cool. 6:37 Read the blog post. Decide for yourself. >>That's right. 6:42 Next up we have a new JavaScript plugin from Twitter called typeahead.js. 6:45 This gives you the typeahead kind of autocomplete functionality 6:50 that you've seen on tons of different websites at this point. 6:53 [Pettit] So that's where you're typing something and it will actually type the rest of the sentence or think for you. 6:56 [Seifer] Right. As an example, I'm on the screen here. I type the letter B. 7:04 And then you can see the different projects that Twitter has that are open source, 7:06 and you can press the up and down arrows to select them. 7:11 Enter selects it and you can add this right into your text box. 7:14 Pretty easy to use, very fully featured. 7:18 It has a bunch of different configuration options. 7:21 And it's by Twitter, so you know it's going to be supported for at least a little while. 7:23 And if you're using a Bootstrap-based site it will work pretty well with that. 7:27 Cool. >>Yeah, I like it. >>That's awesome. 7:31 Next up is another blog post. This one is called How to Design for Android Devices. [trhou.se/W4gw36] 7:33 This is something that I have actually been interested in myself, 7:39 and this blog post makes a great point by saying that up until now, 7:43 the Android platform really hasn't had a very mature design language. 7:47 It's kind of been a little bit all over the place. 7:52 I think they started out a little bit differently from, say, iOS 7:54 which started out with a strong design language. 7:59 But Android has matured quite a lot in the past few years, 8:02 not just on the development side but also in terms of design. 8:06 And so this blog post just walks through all sorts of common design patterns 8:10 that you find on the Android platform, such as the back button and different screen resolutions. 8:15 They have this really nice starter kit. 8:20 So it's a really cool post. 8:22 If you are designing Android apps or if you're just trying to create a really great web experience 8:24 on an Android device, it is worth digging in to those platform-specific features 8:29 and making a really good experience for those particular users, 8:35 because any time you reuse a design pattern, 8:39 you're in a much better position to basically educate your users 8:43 about how to use that user interface. 8:47 Yeah. They're already used to it. 8:51 I think I said use, like, 5 or 6 times there. >>That's okay. We liked every single one of them. 8:53 [both chuckling] 8:57 Next up over on the Onextrapixel blog there is actually a great roundup post of 8:59 55+ Great and Useful Tools for Responsive Web Design. [trhou.se/YGanVW] 9:05 I don't want to shamelessly self-promote too much, but we did talk about quite a few of these 9:09 on previous episodes of The Treehouse Show. 9:13 So just maybe go and check out our archive too. 9:15 But there are tools for pretty much everything that you would need 9:18 when getting started with responsive web design, 9:21 different things on different tiles, sketch sheets, 9:24 different possible mockup and layout tools, 9:27 and then different tools that we've talked about— 9:31 things to resize your browser to check for the latest responsive web design. 9:33 It's a really thorough blog post and you'll probably pick up at least 1 or 2 things that you haven't seen before. 9:36 Sweet. >>Yeah. Definitely check that out. 9:42 Speaking of sweet— >>Yeah. >>we have a little bit of a special treat for you. 9:45 Yeah. You guys have been pretty good. >>You've been well behaved. You deserve it. 9:51 We got a chance to catch up with founder and CEO of Treehouse, Ryan Carson. 9:55 Let's see what he had to say. 10:01 You recently wrote a blog post titled A 90 Day Plan on RyanCarson.com. What's that all about? 10:05 [Ryan Carson - CEO and Founder of Treehouse] Well, it was brought about by a lot of pain and suffering. 10:14 And the reason why is because most of the stuff you learn when you start a business 10:18 is that you don't know anything about how to run a business or how to scale a team. 10:23 I think all of us at Treehouse realized, wow, we're really growing. 10:28 We're 50 people now. 10:32 We're past kind of the stage where we could all just chat to each other 10:36 and figure out what was going on. 10:39 And someone on the team, Mike Watson, had the idea of creating a 90 day plan. 10:41 It's been amazing for us because it's allowed us to focus on a couple things and get them done 10:48 without me completely distracting everybody and moving things around. 10:54 So the best thing I would say for everyone that's listening that's thinking about running a startup 11:00 or is involved in a company, whether it's a startup or not, 11:05 is that creating a plan that lasts 90 days allows everybody to gather around that and clarify, 11:08 okay, what are we doing here, what's important, what is the priority and then execute on that. 11:18 So the way a 90 day plan works is you all strategize about what do we think is important? 11:24 All right. Let's talk high level. 11:30 And then once we establish the high level things, let's prioritize them 1, 2, or 3. 11:32 And then after you prioritize them 1, 2, or 3 then you assign one person that's responsible to execute on that. 11:38 And then you freeze it and you say, "We're not going to mess with it." 11:45 As a founder, entrepreneur type person I had the tendency to come in and mess with things and say, 11:49 "Well, we were going to do that, but now we're going to do this." 11:57 And it basically was confusing because as the boss, people would say, 11:59 "Okay, well, I guess we're going to do that thing even though yesterday you said we were not going to do that thing." 12:06 And so it actually keeps everybody accountable to execute on what we all agreed was important. 12:11 I've really enjoyed it. 12:17 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 12:20 and communicate clearly what we want to do. 12:26 So it's been good, I think. >>Oh yeah. No. It's been great. 12:29 A lot of people might not know this, but Treehouse is a pretty distributed company. 12:33 We have an office in Orlando and another one in Portland, 12:38 and we have employees distributed all over. 12:41 What are some tools that you would recommend when running an online business 12:44 or a business that's distributed like that? >>[Carson] That's spread out. 12:48 I would say we have a core set of tools. 12:51 One is we use Trello. T-R-E-L-L-O.com. 12:55 I'm not being paid to say that. 13:00 It's just a great visual Kanban style to do system. 13:02 I personally use that for a delegated list. 13:07 When I speak to the people that report to me and we decide what needs to be done, 13:12 we create a board we share and it's called Delegated. 13:18 That just allows me to go down that list and say, "Hey, we talked about this. How is that going?" 13:21 It's really easy to ask people to do something and then forget you've asked it. 13:28 And then you don't check up on it and then it could— 13:32 That's one thing we use. 13:35 Trello is great not just for delegated lists but also it allows people to share things across the company 13:36 they want to get done, and it's visual so you kind of move cards around left to right. 13:43 That's great. It's free, so that's really good. 13:46 We've started to use Google Hangouts a lot more. 13:50 We do use GoToMeeting and Skype, 13:53 but GoToMeeting is I think about $50 a month. 13:57 And it's good but the friction is kind of high. 14:00 You have to have the app installed, and every time you install the app 14:03 it tells you you don't have the latest version, so it has to install the latest version. 14:08 And then you wait for that one and everyone is saying, "What's going on? Why isn't the meeting starting?" 14:11 So Google Hangouts have been pretty good. 14:15 And we use Campfire quite a bit. 14:19 Campfire is just our place. It's kind of like our water cooler really. 14:23 Because we're spread out, we don't get to hear all the funny jokes 14:26 or especially us people that are not in Orlando, we don't get to see the insanity that happens here. 14:31 And it's a nice way to tap in to that and hear some of the jokes and be a part of— 14:39 I don't really get any work done in Campfire. It's more just having fun. 14:44 I think some of the teams do use it to actually communicate a lot, primarily our app team. 14:49 The developers have a room in Campfire and they're really active in there. 14:53 And what I've learned about developers is that they are very efficient communicating through chat. 14:59 It used to frustrate me, like, "Why don't you guys just call each other and talk?" 15:04 "This is crazy that you type all this stuff." 15:07 And they're like, "Well, we type for a living. That's what we do." 15:10 It's much more efficient. 15:12 Campfire works well. 15:14 We tried to cut down on email but that never really worked, 15:17 so we just decided to try to be reasonable with email. 15:22 And what is one piece of advice you would give somebody wanting to start their own business? 15:26 Number one, I think, it's possible. 15:31 If you think you have a good idea, instead of presuming that it's too hard or it's not possible, 15:34 assume that it can probably happen. That's the beginning. 15:40 And then the second thing is try to do a very simple version of your idea 15:45 and explain it to some people and then ask what they think are the problems with it. 15:50 It doesn't really work to ask someone if your idea is going to work, 15:56 because if they like you, they'll feel pressured to say yes. 16:00 But if you say, "I'm thinking about doing this idea. What do you think will not work about it?" 16:03 it gives them the freedom to say, "Well, hmm, no one will buy it." 16:08 Then you can say, "Okay. That's probably not going to work." 16:12 So I think believing in the idea and then asking people if they will actually pay money for it 16:15 and then trying to build a simple version of that and get people paying for it right away is the key. 16:21 I think the other thing that fits into all of that is get spun up on some basic business concepts, 16:28 like how does profit and loss work and how does basic accounting work. 16:34 And then once you are ready to start the business, you'll be a little bit further ahead. 16:38 All right. Thanks so much for hanging out with us, Ryan. Really appreciate it. 16:42 Thanks for letting me invade. I appreciate it. 16:46 That's it for this week's episode of The Treehouse Show. 16:52 On Twitter I am @nickrp. >>And I am @jseifer. 16:54 Thanks so much for watching this episode of The Treehouse Show. 16:58 For show notes and more, check out our YouTube channel at youtube.com/gotreehouse. 17:01 And of course if you'd like to see more videos like this one and learn about web design, 17:06 web development, mobile development, business and more, 17:10 be sure to check us out at teamtreehouse.com. 17:14 Thanks so much for watching, and we'll see you next week. 17:18 [Morse code beeping sound] [The Treehouse Show] 17:22 [beeping continues] 17:24

You need to sign up for Treehouse in order to set up Workspace

Sign up