Episode 27: Triangles, Sublime Text Plugins and HTML5 Geolocation

I'm Nick Pettit. >> I'm Jason Seifer. >> And you're watching The Treehouse Show, 0:00 your weekly dose of Internet, where we talk about all things web design, 0:04 web development, and more. 0:07 [Jason Seifer] In this episode, we'll be talking about triangles, 0:09 Sublime Text Plugins, and HTML5 Geolocation. 0:12 [Nick Pettit] Let's check it out. 0:16 ?music? 0:17 [The Treehouse Show] 0:21 [Jason Seifer] First up, we're going to talk about using the HTML5 0:23 Geolocation API. 0:26 The HTML5 Geolocation API is built into different web browsers, 0:29 and it gives you access to the users location if they give you permission. 0:33 So, there's a great blog post over on the Sitepoint blog 0:38 that goes through all the different things that you're going to need to know 0:41 when trying to access users location with the Geolocation API. 0:43 So, they go through a few different scenarios where you can use the 0:49 Geolocation API, somethings like movie theater sites can promote films playing nearby, 0:52 job postings including potential commute times, and just a few different use cases for that. 0:58 So, they also go through and tell you the different APIs that you can use-- 1:05 latitude, longitude, accuracy, and time stamp. 1:09 So, we're not going to really go through everything in this article, 1:13 but if you want to know more about how it works it's a great in-depth tutorial 1:17 to get you up to speed on using the Geolocation API. 1:21 [Nick Pettit] Pretty nifty. So, you know that moment in a project where you're 1:25 really getting going and you're using HTML5 boilerplate or Bootstrap 1:29 and you're like yeah-- >> Yeah. >> Yeah, this is going to be awesome. 1:34 And then you have to make a triangle in CSS and you're like, "Oh my gosh." >> OMG. 1:37 I don't know how to do that. What do you do? 1:43 Well, fortunately there's the CSS Triangle Generator that has solved this exact problem. 1:45 You can go ahead and check out the CSS Triangle Generator, 1:50 and if you need a triangle that points upwards, to the right, 1:55 bottom right, bottom left--you get the idea--it will go ahead 1:59 and generate the CSS for you over here, 2:03 and you can even pick the color of the triangle and it will adjust that, 2:07 you can adjust the size, and if you need to support Internet Explorer 2:12 there's a little check box for it--look at that. 2:19 Boom! >> I wish it was always that easy. 2:22 And you can even say if you want this triangle to be isosceles, 2:24 or scalene--Am I saying that right? >> I have no idea. 2:28 This is literally the first day I've ever heard of triangles. >> Boom! 2:35 It will go ahead and generate the CSS for you, and it even gives you a few 2:40 little browser compatibility tips. 2:44 So, pretty nifty. If you need to make a triangle in CSS to go ahead and point to something 2:46 in your application for instance, or maybe you're making a comment box 2:53 and you want a little triangle to look like a speech bubble in a comic book or something, 2:57 this would be great for that kind of thing. Pretty nifty. 3:03 [Jason Seifer] Very nice. Next up, got a tool called framer. 3:05 This is a prototyping tool that helps you build and test interactions 3:09 for your website. 3:13 Now, this doesn't use Flash or Quartz or anything like that. 3:15 It's a good alternative to Quartz Composer and Keynote. 3:21 So, what you're going to use this for is going through and just seeing how 3:24 the interactions work on a phone or a mobile device. 3:28 So, they have an example here on the right side. 3:33 There's a little Alcatraz Island here with a popup, click on that, 3:35 and it zooms out, so you can just kinda test 3:39 and see how these different interactions work on the site. 3:43 This is built for designers, and it's very, very easy to go through, 3:45 edit the code, and see how things are actually going to look live. 3:50 So, you can get that at framerjs.com. 3:54 There's a ton of different examples on the site, 3:58 and like I said--very, very easy to use. 4:00 You're basically just editing a couple of files to try and produce 4:03 these interactions and see what they're going to look like. 4:05 [Nick Pettit] That's really, really cool. I mean, it's good to have a tool 4:08 where you can quickly prototype user experience, 4:11 because a lot of time it's not just trying out wire frames and figuring out 4:13 the flow from one screen to the next. 4:16 You actually want to see what the interactions and clicks feel like. 4:19 [Jason Seifer] Yeah. >> So, it's nice to be able to prototype it quickly 4:23 without actually building this huge application and then realizing 4:26 "Oh, crap. This actually doesn't work at all." >> Right. 4:32 And then you'd need to go back and retool it. Just give it a try first. 4:34 [Nick Pettit] Yep. Pretty nifty. So, next up, are the top 10 Sublime Text Plugins. 4:37 This is a really nice blog post. 4:43 I won't go through all 10 of the plugins, 4:46 but there is one that I thought was particularly nifty here. 4:49 It's for JSLint which is a Java Script code quality tool put together by Douglas Crockford, 4:53 a Java Script expert, and before this you would have to actually go 5:01 and verify your code on the web. 5:06 You'd basically paste your Java Script code and figure out if it was good or not. 5:09 With this, it's actually just directly in Sublime Text 2. 5:15 So, if you're a Java Script developer, this is definitely a plugin that you'll want to use 5:18 in ST2. 5:24 There's, of course, 9 other really cool plugins, 5:26 and-- >> We don't want to spoil it, I guess. >> Yeah. 5:30 Don't want to give everything away here, 5:33 but if you're in Sublime Text 2 all day, it's really important to go ahead and 5:36 customize it to your workflow because it's just going to make you that much faster. 5:43 [Jason Seifer] Very nice. Next up, we have a project called RubyJS. 5:48 Now, this is an alpha project, but it's still pretty usable. 5:53 And this is a Java Script standard library based on the Ruby core lib. 5:55 What does that mean? Well, this gives you access to a bunch of functions 6:01 that you are probably used to in Ruby, and you can use them right in Java Script. 6:05 The example that they have on the site is written in CoffeeScript, 6:09 but it would work in Java Script as well, 6:13 and it introduces almost all of the API that you would expect. 6:16 You get strings, arrays, enumerators--which is very, very helpful. 6:21 Now, one of the places that this would be a lot more useful 6:26 is if you're going through and you're trying not to context switch too much 6:31 in between languages that you're developing. 6:36 So, without mentally switching from Ruby to Java Script, 6:37 you don't have to go and look up some documentation for methods that you're 6:42 probably used to using. 6:44 And you can check that out at RubyJS.com. 6:46 [Nick Pettit] Pretty nifty. 6:51 So, there's this really cool article on CSS-Tricks, 6:53 and, of course, Chris Coyier that runs CSS-Tricks is a friend of Treehouse, 6:57 and the article is called, "So you're going to start a huge new web project." 7:01 This is something that I think about a lot, and it's actually a question I receive a lot-- 7:07 "How do I start a new project? What's the best way to account for mobile? 7:12 Which CSS framework should I use? etc." 7:20 And Chris encountered this question when he was doing a consulting 7:23 gig for a huge new website, and so he wanted to share what he shared with that company. 7:27 And he said, "You cannot neglect mobile," which I think is pretty obvious. 7:36 Another thing that he said you should decide upfront is if you're going to build 7:41 a mobile-specific site, or if you're going to use responsive design or some variation thereof. 7:45 I thought that was a pretty good tip. 7:53 Your content management system needs to be in good shape. 7:55 Of course, that's important if you want to go ahead and do this work 7:59 and then pass it off to the client so that they can go ahead and update the site on their own 8:01 without having to bug you. 8:06 This is actually--this is the last tip I'll go over--but this is something that Chris has talked about 8:09 at a couple of conferences. 8:14 He says, "You need to plan your CSS." So, in other words, you can't just 8:17 run in and haphazardly start coding your CSS, 8:21 because it's going to grow organically, and it will probably end up as a mess. 8:26 CSS is one of those things that's really, really easy to get started with, 8:31 but it takes a long time to really master all of its nuances 8:35 and use it responsibly. 8:40 So, by coming up with a plan upfront, you'll make sure that you avoid 8:41 a mess of CSS. Look, it rhymes. That's you know it has to be right. 8:46 [Jason Seifer] Avoid a mess of CSS. >> Boom. 8:50 Boom. >> It's a quick tip. >> I usually start planning a website with about 8:52 10 hours of meditation followed by 20 hours of exercise. 8:55 [Nick Pettit] And then 5 minutes of actual work. >> Yeah. 9:00 Then you're done. Your site's good to go. >> Simple. 9:02 [Jason Seifer] Next up, we have a post over on the HTML5 Rocks blog 9:06 on the Shadow Dom. 9:11 Now, this is something that is not fully standardized, 9:14 and it says the API is still in flux, but this is really, really interesting. 9:17 So, they're talking about web components here. 9:22 Now, this is a new standard that essentially is for presenting different kinds 9:25 of widgets on your site. 9:31 Now, the problem that you would get is if you have a script that's injecting 9:32 some HTML and Java Script and CSS into a page; 9:38 well, some of your IDs and CSS selectors might conflict with something on the page 9:43 and that could just mess up a whole bunch of stuff. 9:48 So, the solution to this is something called the Shadow Dom, 9:50 which is kinda like a dom within a dom. 9:54 It's kinda like a CSS inception. 9:57 [Nick Pettit] It's just dom's all the way down. 10:00 [Jason Seifer] Yeah, dom's all the say down. 10:02 So, this tutorial over on HTML5 Rocks goes through 10:03 and discusses what the Shadow Dom is, how you're going to be able to use it in your pages, 10:07 and what it's going to look like. 10:13 This is a really long article, but it's really interesting. 10:15 So, go through it and this is generally right now only available on the latest versions of Chrome, 10:18 but it's something that's probably going to be used quite a bit in the future 10:25 with all these websites interacting differently. 10:28 [Nick Pettit] Now, that's actually a really good piece of advice. 10:31 A lot of times, I'll find that as soon as something gets implemented in Chrome or 10:34 a WebKit browser, usually it's a pretty strong indicator 10:38 that other browsers are going to follow suit. 10:42 [Jason Seifer] Yeah. >> Good to pay attention to that. 10:45 [Nick Pettit] Next up, is OverAPI.com, or Over-A-P-I.com, 10:47 and it's basically just a collection of cheat sheets for different languages 10:54 and frameworks like PHP, JQuery, Python, Java Script, and so on. 11:00 So, I can go ahead and click on one of these, 11:06 so I'll click on Ruby--this is just for you, Jason-- >> Ah, thanks Nick. 11:09 And it will come up with this cheat sheet-- >> Wow, look at that cheat sheet! 11:13 All of the arrays and files and strings and things--basically all of the functions in Ruby. 11:17 So, I can go ahead and click on one of these 11:25 and--look at that--it brings me straight to the documentation for that particular thing. 11:30 [Jason Seifer] That's really useful. >> So, pretty nifty. 11:35 It's a good way to just quickly get to any piece of documentation. 11:38 I really like how their cheat sheets are laid out. 11:43 [Jason Seifer] There's a ton of them. >> Yeah. They actually have quite a bit of them here. 11:46 So, it is pretty comprehensive. Really, really good. 11:50 You're unlikely to not find something here. 11:55 Did I get the double negatives right there? 11:58 [Jason Seifer] I'm completely positive. >> They have a lot of stuff. 12:01 You should check it out. >> Yeah, that's probably a good point to wrap up. 12:03 [Nick Pettit] Yep. >> Who are you on Twitter? 12:07 [Nick Pettit] I'm @NICKRP. >> And I am @JSEIFER. 12:08 Thanks so much for tuning in to this episode of The Treehouse Show. 12:11 For show notes and more, check out our You Tube channel 12:13 at youtube.com/gotreehouse. 12:17 [Nick Pettit] And, of course, if you'd like to see more videos like this one about web design, 12:19 web development, mobile, business, and more, 12:23 be sure to check us out at teamtreehouse.com. 12:27 Thanks so much for watching, and we'll see you next week. 12:30 [The Treehouse Show] 12:34

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

Sign up