Episode 56: Node.js, CSS Buttons, PNG Compression

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And you're watching the Treehouse Show, your weekly dose of internets 0:02 where we talk about all things web design, web development, and more. 0:05 >> In this episode well be talking 0:08 about node.js, CSS buttons, PNG compression, and more. 0:10 >> Let's check it out. 0:14 [MUSIC] 0:15 First up is type hunting. 0:20 Which is this really cool Tumblr blog that captures all sorts of vintage typography. 0:22 So, if we take a look, there's just a bunch of really nice photographs here. 0:28 Can scroll down there's this 7up crest or 7up logo, I guess 0:33 maybe they had some sort of logo like this at some point. 0:38 Or maybe that's something somebody just made, I'm not really sure. 0:41 But they have all these just beautiful examples of typography. 0:46 A really great source of inspiration if you're 0:50 looking for some when you're making a website. 0:54 >> Aren't we all. 0:57 >> Pretty simple stuff. >> Always looking for inspiration Nick. 0:58 >> Really nice photos. >> Like it. 1:02 Next up we have a website called the random user generator. 1:04 When your programming and you need some seed data, 1:07 its a lot better than just using lorem ipsum text. 1:11 This will actually get user data for you, it'll give 1:13 you an avatar, names, email address, kind of everything you need. 1:16 >> That's much better than just using Jason for every single user on your site. 1:20 >> Depending on your preferences, I mean lets, let's 1:24 not make that kind of sweeping generalization right now. 1:27 >> That's true. >> I've got these pearly whites. 1:29 So, yeah, so, it's really, really easy to use. 1:31 You just do a quick ajax callback to randomuser.me. 1:33 You can return one to several users. 1:38 Give it gender you want and even 1:41 a different seed to speed up your application. 1:44 Very, very quick, very, very easy to use, but still something that's 1:48 really nice and useful when you're going through and developing a website. 1:51 >> Very cool stuff. 1:55 Well next up is Unsplash, now if you've been on the 1:56 internets recently you may have noticed that a lot of websites 1:59 are going for these really nice 2:03 full screen photographs where they're backgrounds, 2:05 and they'll usually overlay, like, white text over them or something like that. 2:08 >> And they occasionally have something to do with the website your on. 2:12 >> Sometimes, yeah. If you're lucky. 2:14 I I actually like the trend a lot. 2:17 I think the use of photographs is really, really nice. 2:19 It gives you something to kind 2:22 of fill these super huge, high-resolution monitors. 2:24 And Unsplash 2:28 is a website, or actually it's another Tumblr blog. 2:28 Look at that. 2:32 Where you can go ahead and download 2:33 free photographs to use as your background images. 2:35 Now like Jason said, if you don't want 2:39 your photos to have anything to do with the 2:41 website that or the text that you have on your page, then this is perfect for that. 2:43 You can just go ahead and throw up 2:49 any of these background images and bam, you've got 2:50 you've got a modern website on your hands. >> Yeah, there you go. 2:54 Unless you, unless your website is about trees. 2:57 And being artistic. 2:59 >> Or, or Ray-Ban sunglasses. >> It goes perfectly. 3:01 >> Yeah. 3:05 >> Next up we have a blog post that is the absolute beginners guide to node.js. 3:06 >> Oh, good that's me. 3:11 >> Yeah. 3:12 So, you can go ahead and read this article. 3:13 We'll wait, no just kidding. 3:15 As you would expect this is the great 3:17 introduction to node.js. 3:19 Node.js let's you to program in JavaScript outside of the web browser. 3:21 Now, there can be some quirks when you're getting this setup on your 3:25 system ,so this is a great walk through on how to get this setup. 3:27 It describes what node is, how to install it, how 3:31 to make sure it installed correctly, and then something that's 3:34 really nice, it even goes through using express.js to create 3:38 a really small web app that just serves static files. 3:41 anyway, really nice introduction. 3:45 We'll have the link in the show notes which you can get 3:46 to at youtube.com/gotreehouse or in iTunes, 3:48 search for us at the Treehouse Show. 3:52 >> That's really cool. 3:54 Jason, I just read the article, and I didn't node anything, but now I do. 3:54 >> That's wonderful. 4:00 >> All right, next up is buttons, a 4:01 CSS button library built with Sass and Compass. 4:04 >> When you say built with Sass, you mean the programming 4:08 language not somebody just being sassy while, while programming, right? 4:10 >> It can be both. 4:14 >> Hm. 4:15 >> ‘Specially for you, Jason. 4:15 So if we scroll down here, we have flat buttons. 4:17 We got icon buttons. 4:20 These are buttons that just have icons next to them, as the name implies. 4:21 There's glow buttons, when you hover over 4:25 them they actually glow, that's pretty cool. 4:27 >> I think that's also a disease you could look up on WebMD. 4:30 >> For that you just need to take these pill buttons 4:33 there's also square buttons, circle buttons drop 4:36 down menus, et cetera, you get the idea. 4:39 It's pretty cool. 4:43 I mean, there's just a ton of different buttons 4:44 here and so, you know, we cover a lot 4:46 of button libraries here on the Treehouse Show and 4:48 you can find a lot of them throughout the web. 4:51 But this one is pretty robust and should have everything you could possibly need. 4:53 >> Very nice. >> Mm-hm. 4:58 >> Next up we have compresspng.com. 5:00 As you might guess, this is a website that will compress your PNGs for you. 5:03 It will compress them with full browser support. 5:08 8-bit, I'm sorry PNG 8 format with full transparency. 5:12 It's really really easy to use. 5:17 You just drag and drop your files and then 5:18 it will convert them and you are good to go. 5:21 This also works for JPEGs as well. 5:23 I, I don't have Adblock on right now so you can see the advertisements 5:26 on the page too. >> That's wonderful. 5:29 Well next up is this new web browser called Blind. 5:32 Now if you're developing websites and you have a retina display, and you 5:37 wanna see what your website looks like for people that don't have a, 5:42 retina display, you can go ahead and download Blind on the App store, 5:45 and it will actually show you what your website looks that, looks like at 5:49 1x resolution. >> This is such a great idea. 5:55 So if you scroll down, here's what the browser looks like. 5:58 It pretty much looks like most brow-, [LAUGH] web browsers. 6:01 It has a back button, an address bar, refresh button, et cetera. 6:04 And, they give you a couple of examples here as to what things look like on a 6:09 retina display, a low resolution Safari display the 6:14 Blind browser, et cetera. Really, really cool idea. 6:20 Again, it's available in the Mac App store. 6:24 You can go ahead and download it there. >> It's, it's really cool. 6:27 I really love that idea. 6:31 >> Yeah, yeah. It's a really great idea. 6:32 >> Finally we have something called Formstone by Ben Plum. 6:34 I guess this could also be Formstreet One. 6:38 This is a collection of jQuery plugins that focus on structure and customization. 6:40 So we've talked about some of the, these things before. 6:46 The little navigation icon. 6:48 You could see this all support configuration and different methods. 6:51 So you can see right here, click on the demo, 6:55 oh hold on, don't, don't actually see it on here. 6:58 Anyway, most of the other ones work. We'll check out the jQuery picker. 7:01 You can see if you scroll down here this is 7:05 what the radio buttons and check buttons look like with 7:08 these different options right here. 7:11 So this is a nice collection of different interface plugins. 7:13 Really quick idea, but great to use if you need to customize your interface at all. 7:16 Yeah, very cool stuff. 7:21 >> Well, I am @nickrp on Twitter. >> And I am @jseifer. 7:23 If you want more information on anything we talked about, check out our 7:26 show notes at youtube.com/gotreehouse, or search for 7:29 us on iTunes at the Treehouse Show. 7:32 >> And of course, if you'd like to see more 7:34 videos like this one, about web design and web development, mobile, business, 7:36 and so much more be sure to check us out at teamtreehouse.com. 7:41 Thanks so much for watching and we'll see you next week. 7:44 [SOUND] 7:48 [MUSIC] 7:49

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

Sign up