Episode 117: OS X Apps, Fixed Headers, Arrays

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Tree House show your weekly dose of 0:02 internets where we talk about all things web design, web development, and more. 0:04 >> In this episode we'll be talking about [SOUND] building OS X 0:08 applications with JavaScript, [SOUND] fixed headers, and more. 0:11 [SOUND]. 0:14 >> Let's check it out. 0:15 [MUSIC] 0:16 >> First up, we have a very thorough blog post from tylerga on 0:21 building OS X applications with JavaScript. 0:25 In OS X Yosemite, JavaScript is now a first-class citizen for 0:30 building native OS X applications. 0:35 Now OS X Yosemite can be used with JavaScript very, very simply. 0:38 First going through and creating an Objective-C application, 0:45 just say Import, Cocoa, and boom you are done, that's it. 0:48 Your application is now completely built in JavaScript. 0:53 No, I'm just kidding. 0:55 There is a whole example application that he goes through and 0:57 creates using JavaScript. 1:01 This is just a very simple and very nice looking image selector and displayer. 1:03 It just grabs an image and then displays it right there inside this native OS X 1:11 application and this is done entirely in JavaScript. 1:16 So, like I said, very thorough walk through. 1:19 Go through create the application, specify how it needs to run, 1:22 and then like I said, this is extremely thorough. 1:26 It's a really long application like, I'm just holding the space bar and 1:29 scrolling through, really long. 1:31 But it's actually really great, go ahead read it, follow along and 1:34 then you can write OS X applications in JavaScript. 1:38 Link in the show notes, too long to summarize. 1:41 >> That is wonderful. 1:44 Well, next up is CSStyle or CS, sty. 1:45 >> No, I think it's just style because the two minuses means you 1:51 don't say the c and the s. 1:54 >> Oh, okay. 1:56 That makes more sence now. 1:57 So. 1:58 Anyway this is a modern approach for 1:59 crafting beautifully maintainable style sheets. 2:02 Basically it is a collection of SASS mix-ins that make your 2:06 CSS readable and semantic. 2:10 So, what does that mean? 2:13 Well, this kind of an interesting project and 2:15 frankly I'm not sure how I feel about it just yet. 2:18 I haven't tried it myself in a large project. 2:21 But let me know what you think along the way. 2:25 So basically there's- 2:28 >> That's pretty neat. 2:30 >> You think it's pretty neat? 2:31 I think that's just what the, the button says right there. 2:33 Basically we have this button here, right, and 2:37 there's a, there's a class called Button, and you can include this component, 2:40 which is what CSS Style organizes things into, these reusable components. 2:46 And you would pass it button. 2:53 So, so far, pretty basic stuff. 2:55 It's actually very similar to any other SASS mix-in. 2:57 However, you can also pass these components options. 3:02 So, here we have this option called action. 3:07 And, this would basically specify some styling that would say okay, 3:12 this is a button. 3:16 But, it's an action button and so, 3:17 we want to have, sort of this different color for it. 3:20 And you would have a button, and 3:24 then you would have these options that are passed as arguments. 3:26 Just like that. 3:31 And, then there's also parts. 3:32 So, here's yet another thing building on top of components. 3:36 They're composed of parts. 3:41 And these are child elements of the component that can be styled. 3:42 And, so, you end up with some syntax like this. 3:46 So you have a button, but inside of that button you also have an icon. 3:49 And that icon can be changed out 3:55 using another one of those options, and you end up with something like this. 3:58 So we have a button, but then we also have an icon inside of that, and 4:03 then we specify what icon we want. 4:07 And, we do that using options, there's also a couple of other things here, 4:09 this is kind of neat, locations you can basically specify, you know, 4:14 I only want these styles, and a particular part of my site, a lot of cool stuff here. 4:19 I personally feel like this is maybe getting into territory where you might 4:25 actually be overcomplicating your CSS in certain ways that it doesn't need to be, 4:30 or just including a lot of stuff into the markup that maybe could've just been 4:35 bundled into one class or something like that. 4:41 Anyway it's a little hard to say if this is actually going to be very useful. 4:44 Or if it will lead you to a place that's very difficult to maintain. 4:51 Hard to tell. 4:56 But anyway. 4:57 >> Use it in your project, and let us know how it works. 4:59 >> Yeah, yeah. 5:01 This would be a great thing to discuss in the forum. 5:01 >> Yeah. >> Maybe figure out what you think. 5:04 >> Go, go ahead and check it out, let us know. 5:06 >> Mm-hm. 5:07 >> Next up we have a really interesting project called JuliusJS. 5:09 This is speech recognition for the web. 5:13 So it uses the Julius speech recognition engine. 5:17 This is a full part, full port to JavaScript. 5:21 Let's go ahead and try the live demo. 5:25 I'm going to allow this website access to my microphone. 5:28 And we'll say you're watching The Treehouse Show with Nick Pettit and 5:33 Jason Seifer. 5:38 >> And then it says, dial two, three, eight, 5:38 oh, oh, two, oh, four, two, eight, two, oh, six, two, seven, four. 5:44 And then when you dial that phone number you'll hear what Jason just said 5:50 in a recording. 5:54 >> One, two, three, four, five, six. 5:55 [BLANK_AUDIO] 5:57 >> See, it got the numbers perfect. 6:00 >> Hm? 6:02 >> Look, it says the vocabulary is limited for this demo. 6:02 >> Oh, okay. 6:06 We probably should have read the instructions before we started. 6:07 >> I guess. Who know, who knows what the reasoning is. 6:09 Anyway, this is actually really simple to use. 6:13 Just instantiate a new Julius element I'm sorry object on your page. 6:16 And then it gives you this event right here on recognition passing the sentence 6:22 or the words that were recognized and then you can manipulate that. 6:28 Console.log here is just going to log the sentence that was heard to the console. 6:31 Now this is transcribed in real time. 6:37 You can use the provided grammar or write your own. 6:41 And this is 100% done in JavaScript. 6:44 And this is really interesting, because it uses background workers. 6:48 So, simple to use. 6:52 You can get started really quickly using Express 4.0. 6:55 Just install it with Bower, and include Julius JS on your page. 7:00 Require it, and then you are good to go. 7:04 Now this is still maybe a little bit early to use in production, but 7:07 very, very interesting to see what's going on, and 7:12 kinda get a sneak peek at the future today. 7:14 >> Wow, tomorrow is today. 7:19 Well next up is Midnight.JS. 7:21 This is- 7:23 >> Is that your Halloween costume? 7:24 >> Nope, it's a project that allows you to switch fixed headers on the fly. 7:25 So if I scroll down here. 7:31 Whoa, look at that. 7:34 >> What? >> The header is just sort of changing 7:36 on the fly, as I scroll down the page. 7:39 How is that happening? 7:42 Well, Midnight.js tells you to specify your normal fixed navigation. 7:43 So, you have navigation or your header kind of fixed at a particular point. 7:49 Usually that would be closer to the top of the page, but for 7:54 the purposes of the Midnight.js example, 7:56 they kind of have it towards the middle cuz that is the focus here. 7:59 Then you have different sections of your website, right? 8:02 So you have maybe a section, maybe a div, maybe a footer. 8:06 However you are organizing your site and 8:10 then you give it a data attribute, so you say data midnight. 8:13 So you're not using a CSS class here, right? 8:19 And you tell it, I want this part to be white, 8:23 I want this part to be blue, kind of like that. 8:25 And then, you can use those as actual CSS classes. 8:30 So slightly different things there, if you specify the data attribute. 8:35 You tell it where your class is the class you're going to use to style that 8:41 header, right? 8:46 So this needs to be reflected in your CSS, even though it's not an actual class. 8:47 So here, you style your headers, right, and you say, I want the background to be 8:52 none on this particular section and then I want to be black and 8:57 then I want the background to be white and the color to be black. 9:02 The background to be blue the color white and so on and 9:05 as you scroll down the page it will change colors. 9:08 Now this is of course a jQuery plugin so 9:13 you just go ahead and load jQuery then you load Midnight. 9:16 And then you call it on your fixed navigation. 9:21 So, you just select your fixed navigation there, and 9:25 then you call the Midnight function. 9:29 Anyway, pretty simple to use, 9:32 of course, there's a couple of ways that you can customize it with options, 9:34 as is is the case with most jQuery plugins that we talk about here on the show. 9:38 And you can download it right there, or you can get it on Git Hub. 9:43 Pretty cool stuff. 9:48 >> Yeah. Very nice. 9:49 Next up, we have a blog 9:50 post called 5 Array Methods That You Should Be Using Now. 9:51 And when they say now, they mean like kinda, you know, in this day and 9:55 age it's okay to be using these array methods, not stop what you're doing, and 9:58 just call these in the browser. 10:02 >> But maybe after you've read the article. 10:04 >> Yeah. >> Okay. 10:06 >> Yeah, cuz you won't know them until you read it. 10:07 >> Right. 10:09 >> But did you know that when the ECMAScript 5 was published in December 10:10 of 2009 it brought with it array methods that improved existing array methods. 10:17 But this did not really catch on, because it's only been relatively recently 10:24 that all of the modern browsers supported these array additions or extras. 10:30 So this is a blog post that kinda summarizes five that you should be using. 10:36 Here's an example of Index Of, which will check for 10:41 any occurrence of an item in an array. 10:45 Without this method, you have to pretty much create a For 10:47 loop and another variable called found. 10:52 And then if it was found in the array, you could log that. 10:55 But with Index Of you can just call the method index of and 10:58 specify whether or not it is equal to negative one, 11:04 zero or one depending on whether or not it was found in the array. 11:08 The Filter method will let you find all of 11:14 the items in a array that pass a certain test. 11:17 So, in this example we have an array of objects with names and counts and 11:21 using the filter method instead of again doing a for loop and 11:27 creating a new array, we can do this all in one statement. 11:31 Just say Filter, with this particular condition and 11:35 the new array will contain that. 11:39 There's also the For 11:41 Each method, which will iterate over different items using the index. 11:43 So here we have an array. 11:48 Using a For loop, we could start from zero, count all the way up to 11:49 the array's length, and then increment the iterator and 11:53 log it or we could use the For Each method to pass the item in and 11:57 the position inside of the array and then just log it that way. 12:02 Now, there are a couple of different items in here. 12:08 Map and Reduce, which you may familiar with from programming languages like Ruby. 12:10 Or even extension libraries that you've used to make writing or, and 12:15 working with arrays easy, easier. 12:20 For example, _.js has this functionality. 12:22 So anyway, thorough blog post. 12:26 Check it out. We'll have a link in the Show Notes. 12:28 Hopefully, it's taught you something that you can actually begin using now. 12:30 >> Very cool stuff. 12:34 >> Now that we've gone over it. 12:35 >> Well, that's all we have time for this week. 12:36 I am @nickrp on Twitter. 12:38 >> And I am @jseifer. 12:40 For more information on what we talked about, 12:41 check out the Show Notes below the video. 12:42 And feel free to discuss it in the forum. 12:44 [MUSIC] 12:46 Thanks so much for watching and we'll talk to you next week. 12:54 >> [LAUGH] 12:57 >> [LAUGH] >> Oh boy 12:59

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

Sign up