Episode 82: Web Font Generators, ECMAScript 6 Features, Accessibility

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of 0:02 internet where talk about all things web design, web development, and more. 0:04 >> In this episode we'll be talking about 0:08 web font generators ECMAScript 6 features, accessibility, and more. 0:09 Let's check it out. 0:15 First up, we have this app for Mac OSX called 0:17 font prep, really sorry Windows users. 0:22 But, this is pretty cool if you are on OSX. 0:28 It's called the Missing Font Generator for Mac OSX. 0:31 Oh, look at that. 0:36 There's a little asterisks there. 0:36 Aw, yeah. 0:39 It says requires Mac. 0:39 So I was hoping it was gonna say Windows coming soon. 0:42 It doesn't it's a free app though. 0:44 You can go ahead and download it and then you can drag your fonts 0:47 onto the font prep window and it does a couple of things for you. 0:52 First, it can convert your TTF or OTF font files to WOOF 0:57 EOT, or SVG. 1:05 I actually got that first one wrong, WOFF. 1:07 >> WOFF. 1:09 >> See? 1:10 Thank you, Jason. 1:11 It can also do CSS for you. 1:13 So you drag it on and you can get the CSS font 1:17 face declarations that you're going to need to imbed that into your site. 1:21 So they have a little video here of what it looks like. 1:26 I'll play this really quick, but basically if you have. 1:29 Some font files on your desktop you can drag them over to 1:33 the app and then after you've done that for all of your fonts 1:38 you can look through them and see what each character is going to 1:43 look like so if you use a lot of different fonts if you're. 1:46 Constantly designing websites trying to look for the perfect font 1:50 in your collection of fonts, this is a great handy little 1:53 app, because you can look through them, see what each 1:57 font looks like, and then grab the code that you need. 2:00 I personally like to use, Google fonts, but some 2:03 people don't like Google fonts because of the variety. 2:07 There's not every font on the planet is on there of course, so. 2:11 >> Yeah, thanks, Google. 2:15 >> Yeah, seriously. 2:16 >> How about putting every font on the planet in there next time. 2:17 >> So, if there's some fonts that you wanna use that 2:19 you need your own code for and you have them legally licensed. 2:21 You can, go ahead and use font prep. 2:26 >> You know, it was kinda cool how you had a YouTube video playing 2:29 on there, and there's like people were 2:31 probably watching the tree house show on YouTube. 2:33 >> It's like YouTubeception. 2:34 >> Yeah. 2:36 >> Wow. 2:36 >> Next up, we have a code guide by Mark Otto. 2:37 Now you may know Mark Otto who is @mdo 2:41 on Twitter is one of the original creators of Bootsrap. 2:44 So he put up a code guide on here which is 2:48 going to be standard when developing your different web pages and projects. 2:51 Now why in the world would you want to have a code guide? 2:56 Well, it says it right here in the golden rule. 3:00 You need to enforce these different code variables 3:03 and things on your project so that every single 3:08 line of code should appear to be written by 3:10 a single person no matter the number of contributors. 3:12 Now this is going to make a lot more sense when you get more people on the project. 3:15 And as you're projects starts getting larger and larger, it's very 3:19 important to have standards so that new people can just jump on. 3:23 And everything looks, like he says, it was written by a single person. 3:25 So, there are a bunch of different suggestions 3:29 on here, from how to write your HTML. 3:31 What doc type to use. 3:33 What character encoding to use. 3:35 And this even specifies things like attribute 3:37 order in, all the different HTML attributes. 3:40 So maybe start with class, IDs, names, and the different data attributes. 3:43 Now, it's important to note that you don't 3:47 need to follow every single one of these things. 3:49 What you need to do is. 3:51 Follow what makes sense for your particular 3:53 team and then create your own code guide. 3:55 Now this is just a set of suggestions for 3:58 which works for him so definitely check it out. 3:59 We'll have a link to that in the show notes. 4:02 >> Well next up is Marvel which is a web app that allows you to rapidly 4:05 prototype your websites, web applications, and other sorts of digital interfaces. 4:10 So if we scroll down the page here, there's a 4:17 couple of different areas where you can see how Marvel works. 4:21 Basically, you take your PSDs, JPGs JIFs or 4:24 PNG images and you can drag them into Marvel 4:28 or sync them with Dropbox, that's actually the 4:33 big thing here is that there is Dropbox integration. 4:35 And then you can make them interactive. 4:37 So you can take these static images and add some interactivity to them. 4:41 What does that look like? 4:48 Well once again, we are gonna look at this little demo video real quick. 4:49 First, you. 4:52 >> Youtube-ception. 4:53 >> Actually, it's vimeo-ception, >> What? 4:55 >> On this one, I know. 4:58 So you can take your static mock-ups and you highlight. 5:00 Different areas of them, that you want to be clickable. 5:03 And then you tell marvel where that needs to link to next. 5:06 And once you've done that, you can click through your app. 5:10 Just like this. 5:13 Whoa. 5:14 Look at that. 5:15 >> What? 5:15 >> You click on that button. 5:16 >> Are we in an app right now? 5:17 >> And, it will look, interactive and you can 5:18 actually apply nice little transitions to each screen there. 5:20 So, this is really handy if you're doing pixel-perfect 5:25 mockups in Photoshop and you want to really nail the 5:27 interactivity of the app before maybe you spend a 5:31 lot of time say building an iPhone app in Objective-C. 5:34 You don't want to like rapidly iterate on it, you 5:37 just wanna make sure you get it right first time. 5:41 This is a really great way to do that. 5:43 >> Yeah. 5:45 >> It's very cool stuff. 5:45 >> I would call it marvelous. 5:46 Next up, we have a link to a 5:49 GitHub repository on the upcoming features of ECMAScript 6. 5:52 Now, ECMAScript 6 is going to be 5:57 the upcoming version of the ECMAScript standard. 5:59 Which is more commonly referred to as JavaScript. 6:02 Now, we'll slowly see ECMAScript 6 support rolling out in browsers. 6:06 And, maybe even something like node, as this language standard gets 6:11 to be a little bit closer to the standardization raw sets. 6:16 Now, some of the features that you'll see in there is the concept of arrows. 6:20 If you've used Coffee Script, you'll be used to the arrow, and the. 6:24 Fat arrow. 6:29 Now what in the world does this do? 6:30 Well, this changes the binding of the different 6:32 function that you get that you send in there. 6:34 So, the scope inside of a function with a fat arrow is going to apply. 6:37 To the scope that it is immediately outside of. 6:45 Wow, that's quite a bit to take in but if you've 6:49 ever spent a lot of time wrestling with the different property 6:51 of this or Scope in JavaScript this is a very welcome 6:55 addition because it saves you just a little bit of coding. 6:58 Now, there's a ton of different features in here. 7:02 ECMAScript 6 has classes which is going to 7:04 be syntactic sugar over prototype based object inheritance. 7:07 It's got enhanced object literals so you can actually create 7:13 prototypes for different objects and just a ton of different stuff. 7:15 Now, we don't have time to go into absolutely everything on here. 7:20 But for more information, check out the show notes. 7:24 Which you can get to at youtube.com/gotreehouse. 7:25 Or find us in iTunes. 7:28 Search for The Treehouse Show. 7:30 >> Next up on the Negativity Sandwiches blog. 7:32 That sounds kind of, tasty? 7:36 Maybe not? 7:38 >> Doesn't. 7:38 >> I don't know. 7:39 No, I'd send that back. 7:39 >> Yeah. 7:41 There's this wonderful post about accessibility from Jenn Schiffer. 7:42 I think I'm saying her last name wrong. 7:47 I hope not. 7:49 But, it's a really wonderful post reminding 7:50 all of us why accessibility is important. 7:53 So it doesn't necessarily go into the details about how to 7:56 make a website accessible because as she says in the article. 7:59 There are plenty of resources like Treehouse that can help you do that, but 8:03 it's a reminder about why accessibility is important. 8:08 So in this post, she offers a couple of anecdotes that are pretty fascinating 8:13 and really highlight very specific instances about 8:18 why you want to make your site accessible. 8:23 And she also highlights this, kind of, logical fallacy basically. 8:26 Where people that are able-bodied and sighted will create these websites. 8:31 And they make them, you know, kinda low contrast. 8:37 Or, they include these small, cute icons because they're 8:41 you know, aesthetically pleasing to somebody that has perfect vision. 8:46 But it really doesn't take into consideration people that maybe don't 8:50 have perfect vision or particularly people that don't have vision at all. 8:55 So, definitely check this one out. 9:00 She offers a couple of resources at the bottom that can help you learn. 9:02 About accessibility techniques, but it's something that's very important, 9:06 and it's always good to be reminded of why you should make your sites accessible. 9:11 It's easy to forget about it, when you're kind 9:16 of, you know, in a hurry, trying to get 9:18 an app out the door, and you just wanna get it done and get it in front of people. 9:20 It's, it's easy to forget about accessibility, 9:24 when in fact it's really, really important. 9:27 >> Nick, speaking of vision. 9:29 >> You're a vision. 9:31 Is that what you were gonna say about me? 9:33 >> Yeah. 9:34 >> Samesies. 9:36 >> Next up we have a blog post about Promise anti-patterns. 9:38 Now when we say Promises, it's not like I'm telling Nick, hey, I'm just 9:41 gonna go to the grocery store for milk, and then I never come back. 9:45 We're talking about JavaScript Promises, which is going to be a little different 9:47 snippets of code that you can execute after asynchronous code has already run. 9:52 Now, Promises aren't part of JavaScript right now, 9:57 but they are part of a project called 10:00 q.js, so if you can't wait for them to be a standard, you can download that. 10:02 Right now, so let's take a look at some of the different problems with Promises. 10:06 So let's say you wanna run a different bit of code after one Promise completes. 10:12 So you can load something and then 10:16 do something else and then load another thing. 10:18 Well, hey, that's not exactly what you wanna do. 10:21 To fix that you can use the all method of Promises and 10:24 then spread that out among the different return values and or functions. 10:28 So this breaks it down into a bunch of different anti 10:33 patterns that you might see from the broken chain the collection kerfuffle. 10:36 The ghost promise, these all sound like dance moves. 10:42 I, I can't get past that, but anyway. 10:45 >> Let's see a few of them right now. 10:49 >> [LAUGH] You know, I, I can't. 10:51 There's just not enough room. 10:52 I'm miked up. 10:53 But, you know, otherwise, yeah. 10:54 Totally. 10:55 anyway. 10:56 This is a great guide to read and 10:57 it's definitely going to improve your JavaScript coding. 10:58 So check that out. 11:01 >> Well, if you're not in the mood 11:03 for a negativity sandwich, how about a graphic burger? 11:03 >> Oh, I am suddenly very hungry. 11:07 >> See how this all ties together? 11:09 >> Yeah. 11:11 >> Graphic burger is tasty design resources made with care for each pixel. 11:12 So, basically it's just a gallery where 11:17 you can check out resources for graphic designers. 11:20 So if you're designing a website, which maybe 11:23 you are if you're watching this show, you can 11:26 check out mock-ups, so there's a couple of 11:28 different mock-ups here that you can use for inspiration. 11:31 There are UI kits so if you're trying to 11:36 prototype an app quickly, you just wanna get something together. 11:38 You can use UI kits like these to prototype 11:42 your app or maybe actually make a pixel perfect, mockup. 11:45 There's an icons category so if you love all 11:50 of the icons we talk about on the show here. 11:53 You can check out a lot of them along 11:55 with others right here, and there's a few other categories. 11:57 Not a whole lot to say about it but it is very cool. 12:02 I haven't really seen something like this put 12:05 together where it has nice categories like this. 12:07 Or you can check out resources for designers. 12:09 So very nice stuff, I like it a lot. 12:11 >> Very, very cool. 12:14 Next up we have a a project called nanobar.js. 12:15 Now this is similar to projects we've talked about on the show before. 12:18 What this is is a YouTube-style small progress bar that goes across 12:21 the top of the webpage, and then you can call it programatically. 12:26 So let's take a look at that. 12:29 If you take a look at the top of my screen here, You'll see there 12:30 is a bar up there, and I, if I hit nanobar.go60, whoa, look at that. 12:33 It moves to the right. 12:39 Or if I say nanobar.go100, bam. 12:39 We're all the way, all the way across there. 12:42 Now that's it. 12:45 It does one thing, and it does it very, very well. 12:46 In fact, this is only 730 bytes GZIP that's practically non existent. 12:48 Now it's got just a couple of different options, it does 12:53 not require jQuery at all and then boom you're good to go. 12:56 Just include the script and then say new nanobar and you are done. 12:59 You can change the background color and give it. 13:05 The ID of the div you want it to use, 13:08 and then you just call the go method, and that's it. 13:11 You are done. 13:13 You got nanobarred. 13:14 >> Well, that's all the time we have for this episode. 13:14 I'm @nickrp on Twitter. 13:19 >> And I am @jseifer. 13:20 For more information on anything we talked about check out 13:21 our show notes at youtube.com/gotreehouse, or check us out on iTunes. 13:24 Search for the Treehouse Show and please leave us a rating. 13:28 >> And of course if you'd like to see more videos like this one about web 13:31 design, web development, mobile business and so much 13:35 more, be sure to check us out at teamtreehouse.com. 13:38 Thank you so much for watching and we will see you next week. 13:41 [MUSIC] 13:44

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

Sign up