Episode 1: CSS and JavaScript Tools

[Nick] So Jason, I think the best way to go 0:00 is with responsive web design. 0:02 I think if you're coding for a whole bunch of different devices, 0:05 you should really just stick to one code base. 0:08 [Jason] I disagree with your position. 0:11 I think you're going to go with device-specific layouts and sites. 0:12 [Nick] I just think it's so much easier to just have--wait, are we-- 0:17 [Jason] Yeah, we're up. I forgot to tell you we're up. 0:21 [Nick] We should probably start the show then. 0:23 [Nick] I'm Nick Pettit. [Jason] I'm Jason Seifer. 0:24 And you're watching The Treehouse Show--your weekly dose of internets 0:26 where we talk about all things--web design, web development, and more-- 0:30 in front of a live, studio audience. 0:33 [Jason] And I personally am a big fan of the "more." 0:35 On this episode of The Treehouse Show, 0:38 we're going to be talking about CSS and JavaScript frameworks 0:41 and interesting applications that you might find useful 0:44 when developing your websites and/or web applications. 0:47 So, let's go ahead and kick it off. 0:51 [? music playing?] [The treehouse Show] 0:53 [Nick] So, the thing we're talking about before the show started-- 0:59 responsive web design versus mobile-specific sites-- 1:02 Responsive web design is basically a way for you to code 1:06 with a single code base for multiple devices. 1:10 So, you know, you have your desktops, you have tablet devices, 1:14 and you also have mobile phones-- 1:17 And it can be a real hassle to make your website work on all these different devices. 1:20 Now, if you use responsive web design, 1:24 you can actually just create a single code base, 1:26 and all your dreams will come true. [Jason laughs] 1:29 [Jason] I'm not sure about that, Nick. 1:32 Now, when we're talking about coding a specific version of the site 1:34 for all of the different applications, 1:37 what's going to happen is you go to the desktop version of the site-- 1:39 they call that the full site-- 1:42 on a lot of websites you get one single version of the site. 1:44 But, you can also use a framework--such as jQuery Mobile-- 1:47 to do an iPhone-specific version of the site, 1:50 an iPad-specific version of the site, 1:54 and maybe an android-specific version of the site. 1:56 The drawback to coding on a device-specific basis 1:59 is that you do wind up doing a bit more work in the long-run 2:03 rather than having one specific layout in a responsive web design basis. 2:07 [Nick] Now, to me, that just sounds like a whole lot of work, 2:11 and I really think there's only one person that can settle this argument-- 2:16 [Jason] And who's that? [Nick] And that is '90s-web-design guy. 2:18 '90s-web-design guy, what do you think about all this--this responsive stuff? 2:21 ['90s-web-design guy] Oh, I'm sorry. I was just watching the Dawson's Creek marathon. 2:25 Responsive? Um--well--I mean--When I'm web-designing-- 2:28 I mean--there is only one way that you should go. 2:33 Fall back on the skills that we learned in the '90s. 2:36 Here's what you do, okay? 2:39 You give people what they want. 2:40 You give people a site that looks good. Am I right? 2:43 Am I right? 2:47 [Jason] Sounds right. [Nick] I can't really argue with that. [Jason] Can't really argue with that. 2:48 ['90s-web-design-guy] So, you start off with a flash intro on your splash page. 2:51 And then, two links--and two links only, alright? 2:54 HTML or flash. Alright? And that's what you do. 2:57 Make sure you optimize for Internet Explorer or Netscape, Netscape Navigator-- 3:01 and, you know, you're all good. So don't worry about androids using it. 3:05 Human beings? They're gonna use your site. So. 3:09 [Nick] Okay, well, thanks. Thanks for your contribution, '90s-web-design-guy. 3:14 That's, uh--that's, uh-- [Jason] Very insightful. 3:17 ['90's-web-design-guy] I'm outta here. Friends is comin' on, so I'll see ya. 3:19 [Nick] Yeah, really, really good advice, there. Uh--actually, not at all. 3:22 We're going to move on, and we're going to talk about 3:27 this really cool tool called Ceasar. 3:29 And basically, it allows you to create CSS3 transitions really easily. 3:32 There's this cubic Bézier function when you're creating 3:37 a CSS transition that allows you to create a custom animation curve. 3:39 [Jason, interrupting] Now, Nick. [Nick] Yeah? 3:44 [Jason] For those of us developers in the audience-- 3:46 What is this "Bézier" curve you're talking about? 3:48 [Nick] A Bézier curve is--basically, this--this curve where you have 3:51 two different handles and you can kind of adjust the curve that way. 3:57 But, that's really complicated when you're dealing with just numbers, 4:02 or when you're typing out code. 4:05 What Ceasar allows you to do is to see a graphical representation of this, 4:06 and you can drag these handles and it'll actually change the numbers in real time. 4:11 And you can see that at--it's www.MatthewLein.com/ceasar/, I believe. 4:17 Some really, really cool stuff. 4:24 When you go ahead and click "left" or "width" or "height" 4:26 in this particular demo, you can actually see 4:29 how your animation curve changes as you're adjusting it. 4:32 And you can also adjust other things-- 4:37 like the duration and things like that-- 4:38 and it will create code that you can go ahead and just 4:40 copy and paste into your website. 4:43 So, pretty cool stuff for designers or for developers. 4:44 [Jason] I believe we can both agree on that. [Nick] I think so. 4:48 [Jason] The next that thing we're going to be talking about today 4:51 is an application called Slowy. 4:53 This is an application for your Mac. It sits inside of your menu bar. 4:55 And what this does is it simulates different connection speeds. 5:00 Not everybody has a high-speed internet connection, 5:03 so as you're designing or developing your website, 5:07 you can simulate a 56K connection. 5:10 You can simulate a 3G connection for your iPhone or 5:14 LTE if you're lucky enough to have an LTE-enabled device. 5:17 This is a paid application and it costs $4.99. 5:20 They are not sponsoring the show--shame on them-- 5:24 and you can download it at www.SlowyApp.com. 5:26 It is very important to consider the connection speed 5:29 when you are developing your websites. 5:32 [Nick] Really, really cool stuff! 5:35 The next thing we want to talk about is called Scrollorama. 5:38 Now, this is--this is really, really fun. 5:42 Basically, people are trying to create this effect called 5:43 parallaxing or parallax scrolling I guess. 5:48 [Jason] Like on the Nike website. 5:50 [NIck] Exactly. So as you're scrolling down the page, 5:51 all sorts of different stuff will start to happen. 5:53 So I'm going to scroll down on the Scrollorama site-- 5:56 or as this version 2.0 is called, Super Scrollorama-- 5:59 [Jason] Back in the habit. [Nick] That's right. 6:03 As you scroll down, you can see all these different effects happen-- 6:05 fade it, fly it, spin it--sounds like a Daft Punk song, right? [Jason laughs] 6:08 [Nick] It's really, really cool. 6:13 And it's just a jQuery plug-in, so it's super-easy to use. 6:14 You just put jQuery onto your site, 6:17 you throw in Super Scrollorama, 6:19 and then you have access to all of these effects. 6:21 [Jason] Next up, we're going to be talking about Meteor JS. 6:24 Meteor JS is a JavaScript server and client-side framework 6:28 that helps with writing real time--or not real time--web applications. 6:32 What's really nice about Meteor JS is that as you are writing code 6:37 and updating it on the client, 6:42 your data is immediately pushed up to the server. 6:45 If there is some sort of error, this can be a little bit strange. 6:49 The errors will propagate back over to the client side. 6:53 This can be a little bit weird in a situation where-- 6:57 say, you update your email address and it's already taken. 6:59 If you click Save--on the client it'll update. 7:02 Goes to the server, the server says 7:05 "Hey, sorry, that email address is already in the database." 7:07 It sends back your old one to the client. 7:10 From the UI side, how do you think you'd handle something like that, Nick? 7:11 [Nick] Well,if it came back like that and there were some sort of error, 7:14 you might want to go ahead and put a border around the input area-- 7:17 Just saying, like, "Hey, something's wrong with this specific part of the form." 7:19 You might also want to have some kind of text 7:24 or some sort of tool tip next to it 7:27 explaining a little bit more about what went wrong 7:30 or what the user needs to do to correct it. 7:33 Or you might even put an 'x' there maybe instead of 7:35 a border or something--just to draw the user's attention to that, 7:37 and let them know that "Hey, you need to fix something here." 7:41 [Jason] That sounds correct. 7:45 Other interesting things about Meteor JS is 7:46 that it has hot-code pushes. 7:49 As soon as you push your new code out to the server, 7:51 not only is it updated immediately on the server with the new version of the code, 7:54 but the clients get updated, too. 7:57 So, somebody doesn't even need to reconnect to the site 7:59 or refresh the page to get the new code. 8:01 You can check this out at www.Meteor.com. 8:04 There are some interesting screencasts, 8:07 as well as example code to download and play with. 8:08 [Nick] That's hot. [Jason] It is hot. Hot code pushes. 8:12 [Nick] That's a hot domain name, too--Meteor.com. [Jason] It is. That's cray. 8:14 [Nick] Next up, we're going to talk about CSS frameworks. 8:17 Now, there are two specifically that I want to draw our attention to 8:21 for this week's episode because we are talking 8:24 about responsive web design. 8:26 First up is Bootstrap from Twitter. 8:27 And Bootstrap is just a CSS framework--just like so many others out there-- 8:30 except you can create all sorts of flexible awesomeness that 8:35 you would want to use in a responsive site. 8:41 So you can create your 12-column grid, 8:44 but that will actually flex or respond as you're resizing the web browser. 8:46 The other one is Zurb Foundation 3. 8:52 Now, obviously, this is the third version of Foundation, 8:56 and it just came out pretty recently. 9:00 And again, it's just another CSS framework that 9:02 allows you to create grids really, really easily. 9:06 Now, this is--this is great for either designers or developers. 9:09 It allows you to start out with a bunch of code 9:13 that's going to make you code your site faster. 9:16 It's going to help you along and help you get started much quicker. 9:21 [Jason] And also a bit more semantically. 9:24 You know, there are a ton of classes if you're building complicated forms. 9:26 [sound of cell phone ringing] 9:28 There's a--I'm sorry, that was me. I know this is horrendously unprofessional. 9:31 [Nick] I think that was '90s-web-design-guy's beeper, actually. [Jason laughs] 9:34 ['90s-web-design-guy] What happened? What? 9:37 You talking about the Zurb Foundation? [Jason] Yeah. 9:38 ['90s-web-design-guy] Oh man, they're one of my favorite 9:39 wrestling tag-teams of all time, man! [laughs] 9:41 Man! Alright, I'll catch you later. [Nick] Alright, cool. Thanks. Thanks for that. 9:44 ['90s-web-design-guy] I sent you a message, okay? Cool. 9:48 [Jason] Thanks. Thanks for that. I got that on my pager. 9:51 Anyway. So go ahead, check out Zurb Foundation or Twitter Bootstrap. 9:52 The interesting thing about Twitter Bootstrap is 9:57 now we're getting plug-ins on top of it. 9:59 There are things called Kickstrap which does theming 10:00 on top of the regular Twitter Bootstrap components. 10:02 The important thing is, when you're using one of these CSS frameworks, 10:06 you start with about 80% of a really great framework already. 10:08 Then a good designer can go ahead and add in 10:13 on top of that anything that you're going to need. 10:16 Also, it'll help for developers and designers to get up-to-speed quicker on your projects. 10:19 [Nick] And I think it's really useful for developers as well 10:23 because if you're working alone--you're just a developer working all by yourself-- 10:27 it's helpful to use a CSS framework like this 10:30 because it sets up certain design constraints--like a grid-- 10:33 so that you don't go too terribly crazy outside of 10:37 what might be a very small comfort zone. 10:41 [Jason] You know, we've got all this responsive web design now 10:44 in these CSS frameworks-- 10:46 I think I'm going to head on over to your camp and change my opinion. 10:48 [Nick] Thanks, Jason. [Jason] Go with responsive web design. 10:51 I think we've found a common ground today. 10:53 [Nick] I think we've made a lot of progress. 10:55 [Jason] I think so, too. Our therapist will be proud. 10:56 So thanks everybody for listening to The Treehouse Show. 10:58 If you have any comments, 11:01 go ahead and tweet @NICKRP or @JSEIFER 11:03 and check out Treehouse at www.teamtreehouse.com. 11:06 [Nick] Thanks so much for watching! We'll see you next week! 11:09 [Jason] Stay classy! 11:12 [? music playing ?] 11:13 [The treehouse Show] 11:16 [treehouse™] 11:19

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

Sign up