Episode 24: JavaScript PDFS, CSS Transitions, and Web Design Trends

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 JavaScript plugins, 0:10 responsive design techniques, and some 2013 web trends. 0:13 Let's check it out. 0:18 [Morse code beeping sound] 0:21 [The Treehouse Show] 0:24 First up we're talking about a project called Zippopotamus. [http://zippopotam.us] 0:27 Nick, have you ever designed a website 0:30 where you needed to maybe interface with a-- 0:32 Hippopotamus? >>Yes, interface with a hippopotamus. >>Nope. 0:35 Well, this is exactly not like that, so you're in luck. >>Sweet. 0:38 Zippopotamus is a project that gives you an API for looking up ZIP codes and postal codes. 0:41 This can be really useful because until this has come out, 0:46 there has not been one very easy-to-use centralized repository for ZIP codes. 0:50 If you look at the site, you can actually try it out 0:55 and see exactly what you get back. 0:58 Right here they have the JSON response for California and the ZIP code 90210. 1:00 [Pettit] I'm familiar with that one. >>[Seifer] You may recognize that pop culture reference. 1:09 But it's a very, very easy-to-use API, 1:13 and you can actually do autocompletion with it. 1:16 Like if we start typing in our ZIP code here, boom, there's Orlando, Florida, 1:20 Treehouse location. 1:24 [Pettit] Now you know where we live. >>[Seifer] Yes. So come on by and visit. 1:26 Nick will make you cookies. 1:29 And that is at zippopotam.us. 1:31 Very, very useful. 1:36 Pretty nifty. 1:38 Next up is Conditionizr, which is this really amazing jQuery plugin [http://conditionizr.com] 1:39 that allows you to include assets like JavaScript or CSS into your website conditionally. 1:44 I thought this is what you use on your hair after shampoo. 1:51 No. That's actually something else, Jason. 1:53 Yeah. You should try using it sometime. >>Maybe. 1:55 So what does this do? 1:59 Conditionizr allows you to include stuff conditionally into your website. 2:00 So if you don't need all these JavaScript and CSS files for, say, a particular browser 2:04 or if somebody is using a Retina Display and you don't need to load up stuff, 2:11 then you can go ahead and just include them conditionally as you need them. 2:17 [Seifer] Very nice. 2:21 So is this something that you would use maybe for older versions of Internet Explorer as well? 2:23 [Pettit] Absolutely. It's available at conditionizr.com. 2:26 If we go ahead and scroll down here, they say that it's Modernizr compatible, 2:31 but I like to think of this as kind of Modernizr for older browsers, as you said. 2:38 It's good for legacy versions of browsers. 2:43 [Seifer] So like the opposite of Modernizr. 2:47 Legacy-izr. >>Legacy-izr. Yes. 2:49 But it's Conditionizr, available at conditionizr--with a Z--.com. 2:53 Nice. 2:58 Next up, if you're used to using the Rails NumberHelpers 2:59 but you miss them when you're developing in JavaScript, we have the project for you. 3:03 It's called NumberHelpers. [http://emcien.github.com/number-helpers-coffeescript/] 3:08 This is a CoffeeScript plugin that allows you to use all of the Rails NumberHelpers-- 3:10 well, not all, most of them that you're used to 3:15 and use them right in your CoffeeScript code. 3:18 It supports everything you would expect, like Number to Currency 3:21 as well as the different options: precision, unit, separator, and delimiter. 3:24 Number to Human format. 3:29 This is something that you would use with-- 3:31 The example they give is 1, 2, and all these 0s becomes 1.2 billion. 3:33 You guys can't see it, but I am actually lifting my pinky to the corner of my mouth. 3:39 You're pretty much obligated to say that after you say 1.2 billion. 3:44 It also includes the Number to Human Size 3:47 if you're dealing with file sizes 3:51 as well as Number to Percentage, Number to Phone, Number with Delimiter, 3:54 a ton of different options here. 3:58 And so you can find that in the show notes, 4:00 which you can get to at youtube.com/gotreehouse. >>[Pettit] Pretty nifty. 4:02 Next up is this really amazing blog post about CSS3 Transitions. 4:07 [http://blog.alexmaccaw.com/css-transitions] 4:11 It's written by Alex MacCaw, 4:13 and he is a JavaScript programmer, O'Reilly author, and he's working at Stripe. 4:16 And I know that because it says it in his biography on his blog. 4:21 I also know this is an awesome blog post because it has 3,610 kudos. 4:25 [Seifer] That's a lot of kudos. >>[Pettit] That's a lot of Internet currency right there. 4:30 [Seifer] We can redeem that for stuff, right? >>[Pettit] Yeah, absolutely. 4:35 There's a store you can trade it in for new stuff. Yeah. 4:38 [Seifer] Boy, I need to shop there. >>Woo! 4:42 "All you need to know about CSS Transitions." 4:44 And it turns out there actually is quite a lot that you need to know about CSS3 Transitions. 4:47 CSS Transitions are of course a way of animating stuff right in the web browser, 4:54 and you can do this natively with CSS, 5:00 and it will animate a little bit better than it would otherwise 5:03 with, say, JavaScript because it will process all of that animation on the GPU. 5:07 This is a really amazing blog post if you're just getting into CSS3 5:13 or you don't know a whole lot about Transitions, 5:17 and it will tell you everything you need to know about those tricky timing curves. 5:19 That can be pretty tough. >>Yeah. 5:25 But it's really kind of crazy how advanced we're getting with in-browser stuff 5:27 like CSS3 Transitions and even JavaScript APIs. 5:32 Yeah. It is pretty amazing. 5:36 Some of the animation that's now possible I would have never imagined 5:38 even just a couple of years ago. 5:42 Saturday morning cartoon quality. >>Yeah, absolutely. 5:43 Next up we have a project called jsPDF. [http://jspdf.com/] 5:47 This is pretty amazing. 5:51 This is JavaScript-generated PDFs that you can get right in your browser. 5:52 So this is an HTML5 JavaScript PDF generation library, 5:58 and it supports a ton of different things. 6:02 They have an example right here with the Octonyan. 6:05 This is generated programmatically on the left here. 6:07 You can see the example where they grab just an image, 6:11 the Octonyan PDF, and then add this image to a PDF, 6:15 then it's rendered on the right side of the screen here. 6:19 There's examples using different font faces, then circles, landscape, 6:22 lines, text colors, a bunch of different options here for generating PDFs. 6:28 And it's actually pretty crazy that we're at a point in JavaScript development 6:34 where you can do them right in the browser. 6:38 So you can access this at jspdf.com. 6:41 That's amazing. >>Yeah. >>You had me at circles. 6:45 I-- Circles. 6:47 Next up is another really cool blog post. 6:51 This one is about responsive web design, 6:53 and it's from Paul Stamatiou [http://paulstamatiou.com/responsive-retina-blog-desig] 6:56 who is @Stammy on Twitter, which is much easier to pronounce. 7:01 This blog post is called "Designing a responsive, Retina-friendly site." 7:05 Of course, responsive design has been all the rage for the past couple of years. 7:10 [Seifer] Have we ever talked about that before? >>[Pettit] I think we have, Jason. Just a little bit. 7:14 Of course, Retina Displays are popping up all over the place. 7:18 These are high-resolution displays, 7:23 and that's also a subject we've talked about a little bit. 7:25 This blog post basically combines the 2 ideas 7:28 and tells you how to make websites that are not only responsive 7:32 but able to work with these high-res displays. 7:35 This would be something pretty cool to use with, say, Conditionizr 7:39 and maybe include some of those assets for Retina Displays conditionally. 7:43 It's a really, really in-depth blog post. >>Yes. 7:50 This is also another really, really long blog post. 7:53 In fact, they even say, "This article got rather long (15,000 words)," 7:57 so just a little lengthy there, but it's really great. 8:03 It's a really great read, so I do highly recommend you check it out. 8:08 Just so we're all aware, that's a little over 14,000 tweets as far as length goes. 8:13 That's a lot. I'm impressed that you were able to math that. 8:19 Think about that. >>Hmm. 8:22 Next up, over on hongkiat.com we have "Web Design: 20 Hottest Trends 8:24 To Watch Out For In 2013," 8:30 or oh-13 as we say here at Treehouse Island. 8:32 First thing is Responsive Layouts. 8:36 This is not news if you've been watching this show for a little while. 8:38 We're not going to go over everything, 8:41 but some of the things that I'd like to point out, 8:43 Fixed Header Bars. 8:46 They actually demonstrate this because the header bar is fixed on this site. 8:48 Header bars are something that you're starting to see more often. 8:53 We've talked about that on this show here. 8:55 Large Photo Backgrounds, CSS Transparency. 8:58 Digital QR Codes. 9:02 This is something I think we'll be seeing more of as iPads and tablets are used in store displays. 9:04 Just throw up a QR code and then access more information on your phone. 9:09 Detailed Illustrations, also something that you see on the Team Treehouse site. 9:14 I know. Shameless self-promotion there. 9:19 And Mobile Navigation Toggle. 9:22 This is also something that we talked about on a previous episode of The Treehouse Show, 9:24 so make sure you check out the archive if you want to see a how-to 9:28 on how to have mobile navigation on your responsive sites. 9:32 Next up, we recently released a workshop about how to use WordPress 9:38 and WooCommerce in an e-commerce site. 9:43 And by "we," Nick, you mean teamtreehouse.com. >>Exactly. 9:47 This is a workshop that's from our WordPress teacher, Zac, 9:51 and let's go ahead and check out a clip. 9:55 [Treehouse Workshops] 10:00 In this workshop we're going to learn how to build an e-commerce site 10:01 using WordPress and WooCommerce [http://goo.gl/kHEuY], 10:04 the e-commerce plugin from WooThemes. 10:08 We'll learn how to install, set up, and configure WooCommerce, 10:10 add and manage our online products, 10:15 as well as work with products that require custom attributes such as sizes. 10:19 Of course, we'll also learn how to configure the entire checkout process, 10:25 from adding to cart to setting up payment gateways 10:28 and even determining what confirmations are given, 10:32 including customizing the emails that are sent. 10:35 Overall, you'll learn everything you need to know to set up an online store 10:39 using WooCommerce and WordPress. 10:43 This cutting-edge workshop is of course available to Gold subscribers of Treehouse, 10:48 so be sure to check it out. 10:52 I am @nickrp on Twitter. >>And I am @jseifer. 10:54 That about wraps it up for this episode of The Treehouse Show. 10:57 We want to thank you very much for tuning in to this episode of The Treehouse Show. 11:00 For show notes and more, head to our YouTube channel 11:04 at youtube.com/gotreehouse/] 11:07 And this episode was of course brought to you by Treehouse, 11:10 the best way to learn how to design and develop for the web and mobile. 11:14 Check us out at teamtreehouse.com. 11:18 [Morse code beeping sound] [The Treehouse Show] 11:22 [beeping continues] 11:24 [treehouse] 11:27 If you'd like to see more advanced videos and tutorials like this one, 11:28 go to teamtreehouse.com and start learning for free. 11:31

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

Sign up