Episode 25: Web Developer Checklists

I'm Nick Pettit. >>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 HTML and CSS frameworks, 0:10 CSS3 prefixes, and HTML5 projects. 0:14 Let's check it out. 0:18 [Morse code beeping sound] 0:20 [The Treehouse Show] 0:24 First up is Workless. >>That is my New Year's resolution. >>Mm-hmm. Work less. 0:26 Yep. >>Yeah. Great. [trhou.se/14402qU] 0:31 Workless is a CSS3 framework and HTML5 framework 0:34 that, well, is kind of a mishmash of lots of other frameworks we've already talked about. 0:41 [Seifer] Awesome. >>[Pettit] What is it? 0:47 It's a mashup of all the great things that this person liked about Twitter Bootstrap 0:49 and HTML5 Boilerplate. 0:53 They also included some of their own additions, which was very generous of them, 0:56 and you can check it out on GitHub or download the zip file. 1:01 Honestly, we've talked about so many HTML5 and CSS3 frameworks on this show 1:06 it's hard to even say what's different about them 1:11 other than go ahead and try it out on your own and see if it works for your project. 1:14 Maybe it will, maybe it won't. Use it. Or don't. 1:19 This one has pretty widgets. So there's that. 1:22 You can't find pretty widgets anywhere else on the Web-- 1:25 except for later in this episode. >>That is quite true. 1:28 Next up we have an article on the CSS-Tricks blog on how to deal with vendor prefixes. 1:31 [trhou.se/144Ollr] This is going to be talking about CSS3 prefixes. 1:36 Right now since things are not completely finalized, 1:39 the different browser vendors prefix the different attributes 1:42 with their own browser or vendor name. 1:45 So that's when you see -webkit or -moz. >>Right. >>Got it. 1:49 There's a couple different ways of dealing with this, 1:54 and this is what the CSS-Tricks article goes over. 1:56 Some people prefer to do hand coding, 1:59 and if that's the case then, hey, you can refer to this website, CSS3Please, 2:02 and then get the values and paste them right into your code. 2:07 The other way to do it is to let -prefix-free, the -prefix-free project, do it client side for you. 2:11 This is a piece of JavaScript that runs through 2:18 and automatically adds the vendor prefixes for you. 2:20 The other idea that you have besides all these different hand authoring ideas 2:23 is to use mixins and popular frameworks such as Sass, Compass, or Bourbon 2:28 which will automatically put in these attributes for you and prefixes. 2:33 So it's a quick list of dos and don'ts with the quality that you've come to expect 2:38 from the CSS-Tricks blog, and we'll have a link to that in the show notes. 2:42 That's super awesome. I love CSS-Tricks, actually. 2:45 They're just an amazing website. Chris Coyier does an awesome job of writing up blog posts. 2:49 If you haven't checked out CSS-Tricks, make sure you do. 2:54 I feel like the Web community talks a lot about hand coding 2:57 but doesn't really talk about feet coding and what that might mean. 3:01 I was going to write a blog post about that, but I got distracted by cat pictures. 3:06 Hmm. I hate it when that happens. 3:10 Next up is the Web Developer Checklist, which is just a web page [trhou.se/144Ok0R] 3:13 with a whole bunch of checkboxes to make sure that you're doing all the right stuff 3:17 before you launch your next web project. 3:21 There's Best practices, which is kind of a general category, 3:24 but then there's all the little things that you might forget about like Favicons 3:28 or Traffic analysis with, say, Google Analytics. 3:32 There's also categories for SEO, Security, Code quality, Accessibility, 3:38 and finally, Add-humans.txt 3:42 So all sorts of just little pieces that make up a website before you go ahead and launch it. 3:46 Really good checklist, actually. Very comprehensive. 3:54 Suspiciously lacking is coffee on launch day. >>That's very important. 3:57 Indeed it is. >>Indeed. 4:02 Next up we have a project called Gradient Scanner. [trhou.se/144Ollu] 4:04 This is actually a really, really cool project. 4:07 What it does is it lets you upload an image with a gradient to the site, 4:09 or you can use the one that they have built in, 4:12 and then you can drag your mouse over the different parts of the image. 4:14 The gradient will preview right below it, then you click Next 4:19 and you get the CSS version of this. 4:23 So you could just paste this right into your CSS file. 4:27 And it is even properly prefixed with WebKit linear gradients, 4:30 Mozilla linear gradients, and Opera linear gradients. >>[Pettit] Wow! That's amazing. 4:35 [Seifer] I know. Wow! 4:39 And then also if you click Next again, it will give you the different hex colors 4:41 that go into the gradient. 4:45 You're free to do whatever you want with this information. 4:48 You could discard it, you could paste it into your CSS file--whatever you want to do-- 4:51 print it out, frame it, put it on your coworker's desk. 4:55 Just a few suggestions. 4:58 Anyway, you can find a link to CSS Gradient Scanner in our show notes. 5:00 That's actually really awesome, all of your suggestions of course. 5:05 What's also really awesome is that you could use this when you're slicing up, say, 5:08 a high-fidelity mockup. 5:12 Say you mocked up a website in Photoshop 5:14 and you made some sort of gradient somewhere. 5:17 This would be a good tool to go ahead and just drag very quickly and say, 5:19 "How do I make that complex gradient that I just made in Photoshop in CSS?" 5:23 Pretty nifty tool. 5:28 Next up is Web Interface Lab. [trhou.se/144Ollv] 5:30 I have to pause; otherwise it sounds like I'm saying Web Interface Slab. >>Slab. 5:34 It's Lab. 5:39 This is a collection of CSS3 code snippets and UI kits for web developers. 5:41 I know that because it says it right on the home page here. >>[Seifer] Spoiler alert. 5:47 [Pettit] This is basically a gallery of a whole bunch of widgets, 5:52 which we promised earlier in the episode. 5:56 You'll notice a whole bunch of different design patterns that you're probably familiar with. 5:58 Say horizontal navigation here. 6:03 This one includes some colorful notification badges. 6:06 And then you can go ahead and click on these and see a demo of it 6:10 or go ahead and download it to include in your website. 6:14 What's also really nice is that they have compatibility details here 6:18 so you'll know if this is going to work for the browsers that you're targeting. 6:22 What's also really nice about this is that it's all in CSS, 6:28 so if you want to go ahead and include this in your website 6:31 and you want to restyle it, you can go ahead and do that. 6:34 It's not that hard to do. It's just code. 6:38 Pretty nifty stuff. >>That is pretty fantastic. 6:40 It's also a really nicely designed site. >>Yes. 6:43 It is very well organized, very impressive, actually. 6:45 Next up we have a project called Junior. [trhou.se/144Ok0U] 6:49 This is a front-end framework for building HTML5 mobile apps with a native look and feel. 6:52 This is pretty interesting. 6:57 You can see a built-in simulator that they have on the right side of the screen, 6:59 and this is going to let you easily create mobile applications. 7:03 So here's the Show me more! button, and I can't do it on the simulator that they have here, 7:08 but if you were on a mobile device, you could actually swipe the different transitions 7:13 here in the slide show. 7:19 Anyway, you click Show me more! and you can see that it's got a very smooth CSS transition 7:21 and it does look very native-feeling. 7:26 So you can click Next. It uses the HTML5 pushState API 7:28 as well as Backbone.js's views and routers and just a whole bunch of stuff. 7:32 So this is a very good project that's going to be a starting point 7:37 when building your mobile application. 7:41 It's not going to build your app for you, but it will give you a nice cross-mobile starting point. 7:43 [Pettit] Pretty cool stuff. 7:47 Next up is Ori Domi. [trhou.se/144Olly] >>Bless you. >>Like origami. >>Oh! 7:49 Yeah. >>Huh. >>Ori Domi. 7:55 Basically, it's just a piece of JavaScript that allows you to fold up divs on your web page. 7:57 So let's go ahead and scroll down and look at a couple of examples here. 8:06 I can go ahead and click and drag and fold up this paper. 8:11 I can go ahead and fold this one up like stairs. 8:16 There's also an accordion, 8:21 and it looks like it even has support for animated gifs there or something. 8:24 That's pretty nifty. 8:28 And then finally, they have a page curl which is actually just 10 of their different panels 8:29 put together, and there are so many of them 8:35 that it actually just looks like a nice, smooth curve. 8:38 There are several more examples. It's worth checking out. 8:41 It uses JavaScript, obviously. 8:45 I'm not really sure what you would use this for on an actual website, 8:48 but jeez, is it really cool. >>I know what I would use it for. >>What's that? 8:53 Let's say you had an image gallery and you wanted to delete an image. 8:57 You just fold it up a bunch of times until it deletes. 9:00 You can't fold it anymore. That's when it's gone. 9:04 It's gone forever. 9:05 Or if you wanted to show, say, the location of something, 9:07 you could go ahead and fold out a map if you wanted a little bit more interactivity. 9:11 So there's some novel uses, certainly. 9:16 I'm not sure what the practicalities would be. 9:19 But pretty cool stuff. You should definitely check it out. 9:21 Possibilities are limited. 9:24 Next up we have a project called Frank. 9:27 This is an open source WordPress theme that's designed for speed. [trhou.se/144OllB] 9:29 This is loosely based on the foundation framework 9:33 that we talked about a little while ago, kind of taking the best parts 9:36 to create a WordPress theme just specifically for speed. 9:40 It's flexible so you get a few different options for grids. 9:44 It works with HTML5 and CSS3. 9:47 And it is also responsive. 9:50 This is a good starting point, I would say, to check out if you want to build a really fast, 9:54 really lightweight WordPress theme which uses all the latest technologies. 9:58 I don't want to use a really slow, heavy WordPress theme 10:02 that uses all the old technologies, so this fits right into my needs. 10:06 Oh yeah, definitely. It's awesome. 10:09 We could even make a mobile version of Frank using the last project and call it Frank Junior. 10:11 Whoa. >>Yeah. >>You just blew my mind, to be frank with you. 10:16 All right, moving on. 10:20 Next up is Sequence, which is the responsive slider with advanced CSS3 transitions. 10:22 [trhou.se/144OllC] This is all coming from these websites, folks. 10:29 [Seifer] They're really selling it though. 10:31 [Pettit] If you go ahead and hit Play here, you can start to learn about Sequence, 10:33 which is available at sequencejs.com. 10:38 The summary of this website or tl;dr, if you will, 10:42 is it's almost like Keynote. 10:47 They have some premium themes here. 10:50 So not only can you go ahead and use this presentation software; 10:52 you can also apply themes. 10:58 They do have premium themes; they also have free themes, 11:01 so you can go ahead and apply those and see how it works. 11:03 This is pretty nifty, and I highly encourage you check it out 11:07 and also go ahead and check out the code because it's open source 11:12 and there's probably quite a bit to learn here. 11:16 [Seifer] That's a really, really good point. 11:18 Next up we have a clip from some Treehouse Gold member content. 11:20 This is our expert teacher, Jim Hoskins, going through how to do AngularJS development. 11:26 If you've been curious about the AngularJS framework from Google, 11:32 boom, here you go, Jim Hoskins is going to walk you through. 11:37 Let's check it out. 11:40 [Treehouse Workshops] 11:43 Hi, I'm Jim Hoskins, and in this workshop we'll be learning about AngularJS. 11:44 AngularJS is a framework design to make building large, interactive, 11:49 single-page applications easy. 11:53 Angular's approach is to try to remove the complications of keeping your HTML view 11:55 and your JavaScript data in sync by using 2-way data binding. 12:00 With 2-way data binding you use special syntax in your template 12:04 anywhere you want to have a dynamic piece of information. 12:09 AngularJS will replace that data binding statement with the correct information, 12:12 and it will notice any time that data changes and update the HTML appropriately. 12:16 This means no longer do we have to get references to our HTML elements 12:22 from our JavaScript and update them manually. 12:26 AngularJS handles it all for us. 12:29 Angular also takes a declarative approach to building dynamic interfaces. 12:31 Instead of writing a lot of JavaScript code describing how to assemble our interface, 12:36 Angular instead introduces special HTML attributes that allow us to specify 12:40 what we want our interface to be, not how we want it to be generated. 12:45 Combine that with the automatic view updates through data binding 12:48 and you have to write very little JavaScript to achieve a lot of interactivity. 12:52 In this workshop we'll see how to get up and running with AngularJS 12:57 starting from scratch building a dynamic JavaScript app powered by the Dribble API. 13:00 We'll see how data binding will keep our HTML code up to date, 13:05 how to consume APIs with ease, and how to simulate multiple pages in 1 page using routing. 13:09 I'm Jim Hoskins. Thanks for watching. 13:15 If you want to learn more, check out teamtreehouse.com 13:17 for more great resources on web design, web development, and more. 13:19 [Treehouse Workshops] 13:23 Pretty cool stuff from Jim. That about wraps things up for this week's episode. 13:24 I am @nickrp on Twitter. >>And I am @jseifer. 13:29 For show notes and more information on anything we talked about on this episode, 13:33 check out our YouTube channel at youtube.com/gotreehouse/. 13:37 And of course this episode was brought to you by Treehouse, 13:42 the best place to learn how to design and develop for the Web and mobile. 13:45 You can check us out at teamtreehouse.com. 13:49 We'll see you next time. 13:53 [Morse code beeping sound] [The Treehouse Show] 13:56

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

Sign up