Episode 13: LLJS, Navicons, and Framework Fights

[Nick Pettit]: I'm Nick Pettit. >>[Jason Seifer]: I'm Jason Seifer. 0:01 [Nick Pettit]: You're watching The Treehouse Show, 0:03 your weekly dose of Internets where we talk about all things web design, 0:05 web development, and more. 0:08 [Jason Seifer]: In this episode, we'll be talking about JavaScript languages 0:10 and plug-ins, PHP best practices, and more. 0:13 [Nick Pettit]: Let's check it out. 0:16 [The Treehouse Show] 0:22 [Jason Seifer]: The first thing that we're going to be talking about 0:24 this week is a project from Mozilla 0:26 called, "LLJS" or "Low-Level JavaScript." 0:28 This is a really, really interesting project 0:33 that is a dialect of JavaScript 0:36 that offers a C-like type system 0:39 with manual memory management. 0:42 [Nick Pettit]: I understood some of those words. 0:45 [Jason Seifer]: Yeah. Well, what's interesting about it 0:47 is that it compiles down to JavaScript, 0:49 and if you like having types 0:51 in your JavaScript and C-like structures, 0:53 this will let you do that. 0:56 It's, right now, a bit of an experiment, 0:58 and the syntax is pretty interesting. 1:01 There's all sorts of stuff that you can run on the site. 1:03 We can't get into everything here, 1:06 but it's an interesting project. 1:09 Check it out. 1:11 Too much to summarize. 1:13 It looks fun. 1:15 This is if you really,really want to nerd out with your languages, 1:17 give this a try. 1:20 [Nick Pettit]: Very cool stuff. >>[Jason Seifer]: It's similar to CoffeeScript. 1:22 [Nick Pettit]: Similar, right. 1:24 So, over on Smashing Magazine they wrote this really interesting post 1:26 about this icon that I've been seeing all over the place, 1:28 but I guess I've never actually seen anyone talk about it 1:32 or formalize it and say, 1:36 "Hey, this is a thing." 1:38 Basically, they're calling it the Responsive Navicon. 1:40 [Jason Seifer]: Is that the little icon that shows 1:43 what's going on in like a mobile application? 1:46 [Nick Pettit]: Kind of like that, yeah. 1:48 It's this little icon here that is those 3 little lines, 1:50 and you see this in the Facebook app, 1:54 on the iPhone, you see this really just all over the place, 1:58 and in some instances 2:01 you'll hit this, and the app will slide over, 2:04 and you can see navigation. 2:08 Sometimes it'll pop out a menu. 2:10 Basically, it's this design pattern 2:12 that's been developing across many different websites 2:15 and apps that when you hit this icon, 2:17 it will show you some sort of navigation. 2:19 So, I thought it was pretty cool that they went ahead 2:22 and talked about it for once, you know? 2:24 I haven't heard anyone else actually formalize that. 2:26 I think think it's been everybody just kind of copying one another. 2:30 [Jason Seifer]: Yeah, that's interesting because everybody does seem to use that. 2:34 [Nick Pettit]: Yeah, very interesting. >>[Jason Seifer]: Cool, so we'll check that out. 2:36 Next up is a project called, 'JavaScript Stack Trace.' 2:39 This is a piece of JavaScript that you can include 2:42 in your webpages that will give you a 2:45 stack trace when something goes wrong 2:47 or when there's an error in your JavaScript. 2:50 This can be really difficult 2:52 in certain situations where you have an error in 2:54 one method in JavaScript, but you're not 2:57 exactly sure where it came from. 2:59 So, what this piece of JavaScript does 3:01 is it shows you the entire method call, 3:03 and stack chain of what happened 3:06 in JavaScript, letting you debug things very, very easily. 3:08 [Nick Pettit]: So, with that stack trace, it'll show you from that 3:11 first line where something happened and go all the way back up 3:15 and show you where it ultimately ended up? 3:18 [Jason Seifer]: Exactly. >>[Nick Pettit]: Got it. 3:21 [Jason Seifer]: You can get this at stacktracejs.com. 3:23 There is documentation 3:25 and download links right there as well as in our show notes. 3:27 [Nick Pettit]: Pretty nifty. 3:29 So, next up is PHP The Right Way, which is good, 3:31 because I don't want to do PHP the wrong way. >>[Jason Seifer]: Right. 3:35 [Nick Pettit]: PHP The Right Way is just really good documentation for PHP 3:38 because I think there's a lot of bad documentation out there 3:42 and a lot of really old blog posts, 3:45 just because PHP has been around for so long, 3:47 I think it is one of the easier back-end languages 3:50 to get into, and there's less of a barrier to entry. 3:53 So, a lot of people are using it, and there's a lot of documentation out there. 3:57 PHP The Right Way tries to fix all of that 4:00 and just create really nice documentation for PHP. 4:05 So you can go ahead and scroll through here 4:08 and see language highlights and everything that you would want to know. 4:10 [Jason Seifer]: Yeah, that's really good that it establishes 4:15 some of the best practices that you wouldn't pick up 4:17 in just reading the normal documentation. >>[Nick Pettit]: Exactly. 4:20 [Jason Seifer]: Next up, I think everybody's excited. 4:22 It's our app of the week. 4:25 [Nick Pettit]: Let's check it out. 4:27 [App Preview] 4:31 [Jason Seifer]: Our app of the week this week 4:34 is a project called, 'Anvil.' 4:36 This is a free application for managing 4:38 Ruby web applications on OSX. It's really nice. 4:41 It's a menu-bar application, 4:44 and it uses the POW server 4:46 on the back end to spin up sites for you. 4:48 So, what you do is you drop something-- 4:51 like you click the plus button, import your site 4:53 into Anvil and it will automatically set up 4:55 a local.dev version of the site. 4:59 So, you have myproject.dev. 5:03 Click that to turn it on, and you can go to that right in your browser. 5:05 Really quick, doesn't require too much messing around with 5:08 or anything, and, like I said, that's a free download. 5:12 You can get that at AnvilForMac.com. 5:15 [Nick Pettit]: That's pretty amazing that we live 5:18 in an age where you can manage web applications 5:20 from your menu bar. 5:22 You're just kind of surfing Reddit, and you say, 5:24 "Oh, I better check up on that thing." 5:26 [Jason Seifer]: I better do some work. 5:28 [Nick Pettit]: Yeah, so, next up is Verimail.js. 5:30 [Jason Seifer]: I saw some awesome cat pictures on Reddit the other day, though. 5:34 [Nick Pettit]: Oh yeah? I haven't seen any. >>[Jason Seifer]: I'll show you later. 5:37 [Nick Pettit]: Oh, sweet. All right. 5:39 Verimail.js is basically a piece of JavaScript 5:41 or a jQuery plug-in 5:44 that allows you to validate email addresses. 5:46 Now, I know that sounds really lame, 5:50 but if you've ever tried to validate an email address before-- 5:52 [Jason Seifer]: Yeah, don't you just make sure there's an @ in it? 5:55 [Nick Pettit]: Not quite because, Jason, that could be a Twitter handle. 5:58 [Jason Seifer]: Oh, that's true. >>[Nick Pettit]: Boom. 6:02 [Jason Seifer]: Email me @JSeifer. 6:04 [Nick Pettit]: It's actually really complicated to verify 6:06 an email address--well, not verify, but validate 6:10 an email address when somebody is typing it into a form. 6:12 So, Verimail.js just makes it really easy to do that. 6:15 [Jason Seifer]: I think it's really cool that it also handles typos. 6:20 [Nick Pettit]: Yeah, yeah, yeah. 6:23 So, if you type in '.cmo' instead of '.com,' for example, 6:25 it will actually say, Hey, did you mean to type '.com,' instead? 6:30 and it will offer you alternatives for your typo. 6:34 So, pretty nice. It's very feature rich. 6:38 It has a lot more to offer than what I've seen 6:41 from typical JavaScript plug-ins that do the same thing. 6:45 [Jason Seifer]: Yeah, it's really neat. >>[Nick Pettit]: Pretty nifty. 6:48 [Jason Seifer]: Next up is a website called, 'js2coffee.org.' 6:51 I really love this. 6:55 If you're using CoffeeScript, which is a dialect of JavaScript-- 6:57 [Nick Pettit]: It's what all the cool kids are using. 7:01 [Jason Seifer]: All of them, and some of the not-cool kids, but we let them, anyway. 7:03 This is a really nice site. It has 2 panels. 7:07 You can put your JavaScript on one side, 7:10 and it will show you the equivalent CoffeeScript 7:13 on the other side. 7:15 It works also with CoffeeScript to JavaScript. 7:17 This can be pretty useful if maybe you're just learning CoffeeScript, 7:22 and you want a bit of a refresher on what's actually happening in the code. 7:25 So, check that out. That's at js2coffee.org. 7:29 Super useful. Not much to say. I love CoffeeScript. 7:34 [Nick Pettit]: Very cool stuff. 7:36 Well, next up we have a blog post from 7:38 Design Shack where they compare Zurb Foundation 7:40 to Twitter Bootstrap. 7:43 I read this whole post and-- 7:45 [Jason Seifer]: These are 2 frameworks we've gone over before 7:48 on The Treehouse Show. >>[Nick Pettit] Yes, that's true. 7:50 [Jason Seifer]: So, watch all of our back episodes before you read this post. 7:52 [Nick Pettit]: Then you can read this post 7:55 after you've gone through the prerequisites. 7:57 Right? >>[Jason Seifer]: Yeah. 8:00 [Nick Pettit]: And you can basically get down to the bottom 8:02 where they have the conclusion, 8:04 and they say, 'Cut the Crap, Who Wins?' 8:07 And they say, "It's difficult to declare a winner." 8:09 Now, I don't think there's any kind of surprise there. 8:11 It's kind of like going for 2 or 3 seasons 8:15 of 'will they, won't they' romance on television, 8:17 and ultimately nothing happens. 8:20 Basically, the answer is-- >>[Jason Seifer]: I saw that show. 8:22 [Nick Pettit]: It's all the shows, Jason. 8:25 [Jason Seifer]: Too many times. >>[Nick Pettit]: Perhaps, it's The Treehouse Show? 8:27 [Jason Seifer]: I've heard--I'm not trying to get involved in this framework fight, 8:30 but, I've heard that Foundation has a great grid. 8:33 That's what the design people say. 8:37 [Nick Pettit]: Exactly, yeah. 8:39 There's small differences and larger differences, 8:41 but basically the answer is the try out both of them, 8:44 and see which one you like better, 8:47 because sometimes one is going to work for one project, 8:49 and one is going to work better for another project. 8:53 The answer is, it depends. 8:56 [Jason Seifer]: Try it on. >>[Nick Pettit]: That's right. Try before you buy. 8:58 [Jason Seifer]: And that's it. We're going to end the show with a blog post 9:02 on setting up the perfect developer environment 9:05 on OSX 10.8 Mountain Lion. 9:08 Now, perfect is obviously a relative term. 9:11 This is just one man's opinion with a blog. 9:14 However, he does offer some 9:17 really good advice and interesting defaults 9:19 when setting up a new development environment. 9:22 He goes through installing X code in iOS 9:24 as well as even setting your sidebar icon size to 'small' 9:26 in system preferences. 9:31 [Nick Pettit]: Wow. That's detail. 9:33 [Jason Seifer]: But other than that he does have a link 9:35 to a really useful set of dot files for 9:37 setting up your terminal and commands 9:39 as well as using Alfred.app, which is one of my favorites. 9:41 So, great blog post. 9:45 Go ahead and give it a read. 9:47 Again, try it on, see if these preferences fit you 9:49 and then report back. 9:52 [Nick Pettit]: You can decide for yourself what's perfect. 9:54 [Jason Seifer]: Exactly. 9:56 [Nick Pettit]: So, Jason, what did we learn today? 9:58 [Jason Seifer]: We learned that 3-line icons 10:00 can be very important. 10:03 [Nick Pettit]: All right. Well, that's it for this week's episode 10:05 of The Treehouse Show. 10:08 If you'd like to follow us on Twitter, I'm @NICKRP. 10:10 [Jason Seifer]: And I'm @JSEIFER. We want to thank you so much for watching 10:12 this edition of The Treehouse Show. 10:15 For show notes and more, check out our YouTube channel 10:17 at youtube.com/gotreehouse. 10:20 [Nick Pettit]: And, of course, if you'd like to see more videos like this one, 10:23 you can check us out at TeamTreehouse.com. 10:26 Thanks so much for watching. See you next week. 10:29 [The Treehouse Show] 10:33

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

Sign up