Episode 12: Web Platform

>>I'm Nick Pettit. 0:01 >>I'm Jason Seifer. 0:02 >>And you're watching The Treehouse Show, your weekly dose of Internets, 0:04 where we talk about all things web design, 0:06 web development, and more. 0:09 >>In this episode, we'll be taking a look at Fokus 0:10 using Internet Explorer or on your Mac 0:13 and a nifty bookmarklet called DOM Monster. 0:15 >>Let's check it out! 0:18 [??] 0:20 >>First up is Fokus. 0:26 >>Nick, what do you think your favorite flavor of ice cream is? 0:28 >>Jason, let's try to stay focused. 0:30 >>Sounds good. 0:33 >>It's Neapolitan, by the way. 0:34 >>Neapolitan? 0:35 >>Yup, and Fokus is not spelled the way that you normal spell it. 0:36 It's spelled F-O-K-U-S, 0:39 and it's basically this nifty little piece of JavaScript 0:43 that you can include on your web page, 0:47 and when you go to highlight text, 0:49 it will actually black out the rest of the web page 0:51 and only show you the highlighted text. 0:54 You could use this for a number of different reasons, 0:57 maybe if you're building web-based presentation software 1:00 and you want to highlight something in particular, 1:04 or if you're showing a web page 1:06 and doing it like in a presentation format 1:08 and you want to just show a particular piece of the web page, 1:11 it's really a good to do that. 1:14 >>I'm gonna go with Cherry Garcia. 1:15 >>Alright, sounds good. 1:17 >>Next up, there is a new version of Flowplayer out. 1:19 Flowplayer 5 uses the video element 1:22 to display videos in HTML5. 1:25 What's new in Flowplayer? 1:29 Well, it is responsive, 1:31 which is something that we all talk about 1:33 on this show 1:35 I think a little bit too much, 1:37 but Flowplayer is something people used a lot before. 1:39 What was great about it is that 1:41 if HTML5 is available, it'll use that; 1:43 if not, it can always fall back to using Flash 1:46 to display video. 1:49 Probably the best part about the new Flowplayer 1:51 is it's very minimal 1:52 and also very easily skinnable, 1:54 as well as being very easy to use, 1:57 so you can check that out at flowplayer.org 1:59 and we'll have a link to that in the show notes 2:01 which you can check out on our YouTube channel. 2:03 >>Pretty nifty. 2:06 Next up is this really cool blog post from the BBC called 2:07 Cutting the Mustard. 2:10 Their web site is Responsive News, 2:12 but then there's this post called Cutting the Mustard, 2:15 which basically describes 2:17 this technique for progressive enhancement. 2:19 This very post is resorting to some old-school methods 2:23 that haven't been used in 2:27 I guess not quite some time, 2:29 but the author feels like people have generally forgotten 2:31 about them. 2:34 >>In this age of band with gluttony, 2:36 we have to return to making our sites 2:38 just a little bit more minimal. 2:40 >>So the author is describing this technique 2:42 for just building the HTML 2:44 for the most basic experience possible, 2:47 and then adding JavaScript on top of that 2:50 as an enhancement. 2:52 >>Right, and then I think you also mentioned 2:54 using the native implementations if the browser supports it 2:56 rather than falling back to a huge library 2:59 that maybe doesn't contain everything that you want. 3:01 >>It is really refreshing to see when 3:04 there's so many libraries that 3:07 are getting pretty huge, 3:09 and you have to include so many of them 3:10 to build kind of a modern front-end experience. 3:12 >>Exactly--a blog post worth reading? 3:14 >>It's definitely work reading. 3:17 It is a little bit long, but we just gave you the tl;dr, 3:19 so you can go ahead and read more if you'd like. 3:22 >>Awesome. 3:24 Next up, over on the OSX Daily Blog, 3:26 there's a really awesome blog post 3:29 on installing Internet Explorer for the Mac 3:32 the easy way. 3:34 This is a way to run IE7, 8, and 9 for free 3:36 in a virtual machine. 3:40 >>Whoa, for free? 3:42 >>For free; now this is actually an old blog post, 3:43 but since we are talking about 3:45 progressive enhancement, 3:47 it is kind of worth noting that you can still do this. 3:49 There are free images provided by Microsoft 3:51 for Windows 3:53 with versions of IE7, 8, and 9 on them, 3:55 and then this is just a quick post detailing 3:57 how to do that 3:59 and use Open Source Virtualization software 4:01 to get that all set up on your Mack, so check that out. 4:04 >>Very nifty; so next up is this really cool web site 4:07 at WebPlatform.org. 4:10 This is brand new, 4:13 and it's basically only documentation for 4:15 the normal front-end web stuff that you would expect, 4:17 like HTML, CSS, and more. 4:21 This is all organized by the W3C 4:24 and a number of other big-name companies 4:27 and it's just basically really good documentation. 4:30 It's kind of a community project, 4:34 so at this stage, it's a little bit rough. 4:37 I looked at actually the header element 4:39 in HTML5, and there was hardly any documentation there, 4:42 but I would imagine all of that stuff is going to 4:45 get filled out pretty quickly. 4:48 >>Yeah, they're working on it. 4:50 Right now, it's basically an import of content that was already on Microsoft's site, 4:52 Google, Mozilla Docs. 4:56 Their goal is to have 1 centralized spot 5:00 for knowledge about the latest standards 5:03 from a lot of the browser vendors that implement them. 5:06 So it looks like a really worthwhile project, 5:09 so go ahead and get involved with that if you can. 5:11 >>Very cool stuff. 5:13 >>Next up, we have a piece of JavaScript 5:15 called KeyMaster. 5:18 This is really awesome. 5:20 It's a simple library for defining keystrokes in JavaScript. 5:22 This can actually be a really cumbersome thing to do 5:26 when writing web pages, 5:30 so you get this one global method called key 5:32 and you can pass key a string 5:35 and inside of that string, you can abbreviate 5:38 the different keystrokes that you want 5:40 and then pass it a function 5:43 and this will go ahead and call that function every time that key is pressed. 5:45 This is very useful for 5:48 abstracting away shortcut keys 5:50 inside of your application 5:52 and just having 1 common interface 5:54 is very easy to do 5:56 rather than having to look up the key code all of the time, 5:58 although we did cover what the key code on a previous-- 6:00 >>Right, that tool where you can go ahead and look up key codes really quickly. 6:03 And that's helpful 6:06 but this is perhaps even more helpful. 6:08 >>We're always one-upping ourselves here on the Treehouse Show. 6:11 Or are we? 6:13 >>Next up is 6:16 DOM Monster, 6:18 which is a project from Thomas Fuchs 6:20 and Amy Hoy. 6:22 >>Are you sure you're pronouncing that name right? 6:24 >>I'm pretty sure I pronounced it just right; thanks, Jason. 6:25 Basically, it's just a 6:28 little book marklet 6:30 that you can grab and put into your Bookmarks toolbar 6:32 and of course, it has this scary little monster there. 6:35 >>Really scary. 6:39 >>So I'm going to go ahead and bring up my Bookmarks toolbar 6:40 and hit DOM Monster, 6:42 and bam! 6:44 We have this little console 6:46 and it tells us 6:48 basically some diagnostic information 6:50 about the web page 6:52 and it gives us some tips for improving front-end performance. 6:54 So in this particular case 6:57 for the DOM Monster page, 6:59 it says, "Reduce the number of tags 7:01 that use style attributes. 7:04 There are 199 bytes of end line JavaScript code," 7:06 which is actually not much at all, 7:10 but really pretty handy 7:12 and it's super important to get front-end performance 7:16 as fast as possible, 7:19 especially in this age of mobile devices. 7:21 >>Agreed. 7:24 I like the icon, even though it scares me a little bit. 7:25 >>It's just in time for Halloween. 7:28 >>So next up we're going to be talking about Compass.app. 7:31 In another episode, we talked about Compass, 7:34 which was a little framework for generating and working with CSS. 7:37 One of our members pointed out Compass.app, 7:41 which is an app for working with Compass. 7:44 And so what this will do is 7:48 it will give you a little interface for working with Compass 7:51 and then it will automatically update inside 7:53 of your browser 7:56 and just kind of compile everything as it needs to be compiled. 7:59 This is a $10 application, 8:02 but 30% of the proceeds go to charity, 8:05 so check that out at 8:07 compass.handlino.com. 8:09 >>And that is a pretty nifty feature, 8:12 because often times when you're developing with tools 8:14 like Compass or Sass, 8:17 you'll have to go ahead and refresh the browser constantly. 8:19 It's a bit back and forth, 8:22 so it's pretty cool that you can see those results 8:24 as they're developing. 8:26 >>Definitely worth $10; not sponsoring the show, 8:27 just to make that clear, yeah. 8:30 >>Next up is this really cool font 8:32 from Adobe called Source Code Pro 8:35 and there's not a whole lot to say about this. 8:39 There's a pretty nifty blog post 8:42 where they talk all about the advantages 8:44 of using Source Code Pro 8:46 over other fonts in any text setter, 8:48 but it's just a new font 8:51 that is worth trying out. 8:53 I think it looks pretty nice. 8:55 It looks like it's a little bit more 8:57 proportionally spaced 8:59 but also monospaced at the same time, 9:01 which is what you want for coding, 9:03 so pretty cool, I like it. 9:05 >>It's nice; I like their color scheme. 9:07 >>Yeah. 9:09 >>You know, your choice of source code font is a very personal choice, 9:10 so try to this on; if it doesn't work out, 9:12 you don't have to keep using it. 9:14 >>It is a very personal choice, 9:15 because it's going to be something that you're working with all of the time. 9:17 >>Yeah. 9:20 >>Alright, well I think that about wraps things up 9:22 for this episode of The Treehouse Show. 9:24 Jason, did we learn anything today? 9:26 >>Not really. 9:28 No, we learned that there's some pretty interesting tools for working with Compass 9:30 and DOM Monster. 9:32 That's pretty neat; 9:34 other than that, I learned practically nothing. 9:35 >>You learned my favorite flavor of ice cream. 9:37 >>That's true; that is very important. 9:39 >>And you're thinking Cherry Garcia. 9:40 >>Yes, yes I am. 9:42 So thanks so much for watching 9:43 this episode of The Treehouse Show. 9:45 For show notes and more, 9:47 check out our YouTube Channel at 9:49 youtube.com/gotreehouse 9:51 >>And if you'd like to follow us on Twitter, I'm @NickRP 9:53 >>And I'm @JSeifer 9:55 >>And of course, if you'd like to watch more educational videos like this one, 9:57 you can check us out at TeamTreeHouse.com. 10:00 Thanks for watching! 10:03 [??] 10:06

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

Sign up