Episode 55: Web Typography, JavaScript Progress Bars, CSS 3D

I'm Nick Pettit. >> I'm Jason Seifer. 0:01 >> 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, we'll be talking about 0:09 web typography, JavaScript progress bars, CSS 3D, and more. 0:10 >> Let's check it out. 0:15 [MUSIC]. 0:16 First up is FlowType.js. 0:21 This is a really cool jQuery plugin that will actually resize 0:24 your text as the browser window resizes, so great for responsive designs. 0:28 If we head over to FlowType.JS here, we can go ahead and try it out. 0:34 We can drag this little slider. 0:39 And as you can see, as the browser window gets smaller, and smaller, 0:41 the type gets smaller. 0:46 And as the browser window increase in size, the type also increases in size. 0:47 >> It's pretty easy to use. You just set a couple of thresholds. 0:54 You say what the minimum and maximum sizes, should be. 0:58 And then you can go ahead and include 1:02 the jQuery plug-in along with jQuery onto your page. 1:05 And you set 1:10 those options when you actually call it, and that's pretty 1:11 much it, it's, it's actually really super simple to use. 1:15 And what's even better is that is works just fine with Typekit, Cloud, 1:19 Typography and Google Webfonts and pretty much any other web font service. 1:24 So pretty cool stuff. 1:30 >> It's really neat. 1:31 You know, it says on the page there that the ideal typography for legibility 1:31 is 45 to 75 words on a line. >> I did not know that. 1:36 >> I did not either. 1:39 But it makes sense. >> Mm-hm. 1:41 >> Either way I tldr'd it. 1:42 Next up we have something called admin js. 1:44 This is a, an backend agnostic 1:47 administration framework written entirely in Javascript. 1:50 It uses ember js and a couple of plug-ins. 1:53 So if we take a look at the site here. 1:55 You can see they have an example of admin js, and this is 1:58 listing customer zero through 10,000, and it 2:01 gives you a really nicely formatted table. 2:05 You can search and you know, even filter by name, email, and the different notes. 2:07 What's really interesting about this is that 2:14 this is all created dynamically in JavaScript. 2:16 It uses something called EPF which is a plug-in for ember. 2:19 All you need to do is 2:25 tell it what your models are, and what attributes they 2:26 have, and that's pretty much all you need to do. 2:30 This little block of code right here was all that's needed. 2:34 To make this entire table up here. 2:37 And the nice thing is this even does relations so you can see a customer 2:39 has a certain number or orders and you can even go over to the orders tab. 2:43 And even though it crashed a little bit in my browser right here I promise you 2:47 that it works. 2:51 You can see it's version 0.0.1 so clearly if you have a couple bugs to work 2:52 out, but so far it's looking like a great project so check that out, admin js. 2:57 >> Pretty cool stuff. 3:01 Well, next up, we're going to check out 3:02 The Corner, which is the Square engineering blog. 3:04 That's pretty clever. >> I get it. 3:08 >> Square, corner. 3:10 >> Corner. >> Edges. 3:11 >> Geometry joke. 3:12 >> Polygons. >> Yeah. 3:14 >> So, 3:15 over on the corner, they have this amazing blog post about responsive images. 3:16 So they were putting together their Japanese translation for 3:21 Square and they wanted to have a couple of different layouts on their home page. 3:27 Now, each layout uses the same image or at least the same 3:32 photograph, but they're actually storing different different images. 3:37 They're cropped slightly differently. They're positioned differently. 3:42 Here on the smallest version they have the text below the picture and 3:46 the medium and large they have the text over on the right side. 3:51 So, how do they do this? 3:55 Well you don't wanna go ahead and just 3:56 send the same image to every browser because that's 3:58 actually kind of a waste, especially when you have 4:01 this beautiful full screen photograph that would be way 4:03 too big for a mobile device. Instead, they wrote a Compass 4:07 extension, and they're calling Apropos, I believe is how it's pronounced? 4:12 >> Your, Apropos? 4:18 >> Apropos, not really sure on that. Jason is probably right. 4:19 Listen to him. 4:23 and. 4:25 >> Apropos is an animal, its closely related to the hippopotamus. 4:25 >> Oh, I, I didn't know that, true facts. 4:28 >> Yep. >> half-truths. 4:30 Here is all the images that they used for this the different layouts. 4:32 You can actually specify the different images that you want 4:38 to use, maybe leave a comment in there, so you remember. 4:41 And then, in your media queries, you can go ahead and bring in those images. 4:44 So pretty cool idea, a great way to save bandwidth and, you know, check it out. 4:49 Pretty cool. 4:56 >> Might be a fruit. 4:56 The apropos fruit. >> That is, this is very possible. 4:58 I have no idea. 5:01 >> Mm. 5:02 Next up, we have a project called N Progress. 5:02 This is a Javascript library for creating a really slim progress bar on your site. 5:05 It's really, really great if you're using an Ajax heavy application. 5:10 So let's check a little bit about how it works here. 5:15 It's really easy. 5:17 You just call start, set, inc, or done. 5:18 Now you'll have to take a look at the top of the browser here. 5:20 If we hit the play button, you can 5:23 see that it is incrementing, decrementing, and done. 5:25 Start it again in case you missed it, 5:29 watch the top of the screen, little blue line. 5:31 Whoa! Hey, there we go. 5:33 It's going. Whew. 5:35 >> That's amazing. 5:35 Wow. >> It's going, wow. 5:36 All, all that stuff. 5:37 Anyway you can see there's just four methods that 5:39 you can use to control it so pretty easy. 5:41 Really great library and really easy to integrate. 5:44 You can find that in the show notes 5:47 which you can get to at youtube.com/gotreehouse or 5:48 search for us on iTunes at the treehouse show. 5:51 Very cool stuff. 5:54 Well, next up is One Pixel Deep, which is a website 5:55 that allows you to create a Bootstrap theme based on a color. 5:59 So, they describe it as a flatish Bootstrap 3 theme. 6:04 Of course Bootstrap 3 was just recently released. 6:09 It's very cool, 6:13 check it out. 6:13 But here you can go ahead and select a 6:15 seed color and this really nice little color picker here. 6:17 I'm going to go ahead and try to select a color that's not going to be a 6:20 completely horrible actually, let's go with something really 6:24 bright so you can really see what it does. 6:28 I'm gonna go with this bright yellow here, and then over here, you 6:30 have a color wheel where you can pick a couple of different color schemes. 6:34 They have accented, analogue, monochrome, complement, triad, And tetrad so, if 6:39 you're familiar with color theory you'll know exactly what those things mean. 6:46 >> Pretty sure those are all video games. 6:50 >> Yup exactly. 6:51 Soo I'm gonna hit scheme now and bam look at that. 6:53 >> Bam. 6:56 >> Of this absolutely terrifying theme. Let's go to. 6:56 >> Glad I brought my sunglasses. 7:00 >> A slightly darker color here, see what that looks like. 7:01 Hey that looks a little bit nicer and more legible. 7:04 And we can make it purple, try out complementary theme here. 7:08 Should be. 7:12 Yeah, pretty nice. >> It's lovely. 7:13 >> Mm-hm. >> It's a delicious grape color. 7:15 >> So, [LAUGH] you can check out One Pixel Deep and go ahead, pick 7:17 a color, pick something on the color wheel and see what you come up with. 7:22 This is very a very good tool for developers that 7:26 may not necessarily be too sure about 7:30 their design skills or color picking abilities. 7:32 They can go ahead and just use Bootstrap 3, 7:35 pick a nice color, and you're set to go. 7:38 >> What are you trying to say, Nick? 7:40 >> I'm trying to say that you know, you need to stay out of the CSS. 7:42 And I'll stay out of the models. >> All right. 7:47 Next up, Thankful presents JavaScript best practices. 7:49 This is part one of a multi-part series and 7:52 if you could possibly guess based on the 7:55 title, they're going over best practices when coding JavaScript. 7:56 And it's really great. 8:01 They start with some bad examples of how to do 8:02 something and then show you how you could actually restructure it. 8:04 This came from a slideshow that they did for a talk somewhere. 8:07 So first thing they're telling you, you know, make understandable variable names. 8:12 This is programming advice that is applicable not just to JavaScript I 8:16 mean, as you can see they give you some 8:20 examples of bad variable names, either being too short 8:22 and non-descriptive or having way too much information, and 8:25 they go through and tell you how that is. 8:29 How it would be formatted much better. 8:31 Avoid global variables, things that you probably already know 8:34 if you're more familiar with JavaScript, and they're just going 8:37 through and showing you a ton of different things that 8:41 you're gonna need to keep in mind when coding JavaScript. 8:44 Now, again, this is the first part of a multi-part article, so stay tuned. 8:47 And you can find the link in the show notes. 8:51 Really digging it. 8:53 >> Very cool. So next up is Tridiv, that's T-R-I-D-I-V, 8:54 and this is basically a 3D modeling program for 3D CSS. 9:01 It's pretty amazing, actually, and let's just go ahead and check it out right now. 9:07 I'm going to click start using the app. 9:12 Of course, it shows browser compatibility, compatibility down here. 9:14 Does not yet work in Firefox or Internet Explorer. 9:19 I believe in Internet Explorer, it probably doesn't work, 9:23 because it does not support the preserve 3D property. 9:25 So here we have a, just your basic 3D editor, and we can go ahead and 9:31 create some shapes here. We can look at it in perspective. 9:38 We can go ahead and move it around the screen. 9:43 We can rotate it. 9:46 All sorts of amazing things here. There we go. 9:48 Edit. 9:52 I can actually drag a handle here, and just rotate it. 9:53 I can adjust the size of it. 9:55 >> Wow. 9:59 >> It's pretty awesome. And pretty robust. 9:59 Now if we actually go back to Tridiv 10:02 here, we can scroll down and see a couple of examples. 10:04 They have an iPhone 4S a Super NES -- I guess they like retro electronics there. 10:08 >> Nick, that's a regular NES. 10:14 >> Then they, then they. >> There's nothing super about that. 10:15 >> Oh wow, you're right. 10:17 Excuse me. Even more retro. 10:18 And then, an X-wing, which is actually also retro 10:20 because it's from a galaxy a long time ago. 10:24 >> [LAUGH] >> Alright, so let's go ahead and 10:26 load up the X-wing here. 10:29 We have it loaded into the Tridiv preview window here. 10:30 I can drag this around. 10:34 As you can see we have 3D geometry in the browser here. 10:36 This is pretty impressive and the cool thing about 10:39 it is that it even has shading on it. 10:42 They're doing this with a plug-in called Photon. 10:44 Actually I don't know if it's a plug-in to anything, necessarily. 10:48 It's just a piece of JavaScript, or a JavaScript 10:51 project called Photon, and it will actually shade your geometry 10:54 that's transformed in the browser. Now, over here, you can get the HTML code. 11:00 You can get the CSS code and you can even edit it. 11:07 On Codepen, so I'm just going to go ahead and click 11:11 that and we're gonna load up this X-Wing into Codepen here. 11:15 Now, I want you to take a look at the HTML here. 11:20 Here you can see it has all the Photon shader 11:24 classes and there is just a ton of DIVs here. 11:26 Really, really non-semantic markup. I don't want to take anything 11:32 away from Tridiv but I do have a little bit of an opinion on 3D in the browser. 11:39 I actually think that while this is pretty cool. 11:46 Maybe you can use it for some kind of splash page or something. 11:50 I don't think that the DOM is a really good place to store 3D geometry. 11:54 I actually think that you should do something like this with 3JS or, you know, 11:58 some other 3D library that will actually do this either in Canvas or in web GL. 12:04 There's less support for that or I guess I 12:12 should say there's not great support for web GL. 12:14 It doesn't work in Internet Explorer yet but then again neither does this. 12:17 So what's the difference really? Right? 12:21 anyway, I, I think Tridiv is really cool but I 12:24 do think if you're going to do 3D in a browser. 12:27 You should try to avoid putting a ton of unsemantic divs into your markup. 12:29 >> And, and for more examples 12:35 of how to program well in 3D, check out previous episodes of the Treehouse Show. 12:37 >> Bam. 12:41 There you go. 12:41 >> Next up we have something called the iOS Design Cheat Sheet. 12:43 This is a cheat sheet for designing with iOS 7. 12:46 Now with iOS sev, iOS 7 they've updated just a bunch of stuff. 12:49 The grid system has changed, so over here on this site they've 12:54 taken all this information and put it into a handy dandy cheat 12:58 sheet for you. 13:02 So it'll list the different dimensions for the different devices going from 13:03 the iPad all the way to different models of iPhones and iPod touches. 13:07 The pixels per inch, color mode, what the different app 13:12 icon sizes is, and also important is the grid system. 13:16 So that'll tell you how to lay it out when designing an icon for your application. 13:20 As well as just different 13:25 pixels and dimensions for pretty much everything you can think of. 13:27 So this is great just a quick handy cheat sheet for you. 13:30 And think that's about all we have for this episode. 13:34 Nick, who are you on Twitter? 13:37 >> I'm @nickrp. >> And I am @jseifer. 13:38 For more information on anything we talked about in this show, check our 13:40 show notes at youtube.com/gotreehouse or search for 13:44 us on iTunes at The Treehouse Show. 13:47 >> And, of course, if you'd like to see more videos like this one about web 13:49 design, web development, mobile business and so much 13:52 more, be sure to check us out at teamtreehouse.com. 13:56 Thanks so much for watching and we'll see ya next week. 13:59 [MUSIC] 14:02

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

Sign up