Episode 61: Request Autocomplete, Navicons, CSS Preprocessing

I'm Nick Pettit. >>I'm Jason Seifer. 0:00 And you're watching the Treehouse Show, your weekly dose of internets where we talk about all things web design, 0:02 web development, and more. 0:06 In this episode we'll be talking about request autocomplete, navicons, CSS preprocessing, and more. 0:08 Let's check it out. 0:14 [Treehouse Show] 0:18 First up we've got a blog post on the HTML5 Rocks website talking about request autocomplete. 0:21 Take my money, not my time. 0:27 Now this is not the name of a song. This is actually the name of a feature in HTML5 and the newest builds of Chrome. 0:29 What request autocomplete does is, as you might guess, it requests the ability to auto complete certain pieces of information 0:36 inside of a field. 0:44 You know, Nick, how your web browser will attempt to autofill different data for you at times unless you turn that off? 0:46 All the time. >>It turns out in new builds of Chrome you can request certain data to be auto completed for you. >>Wow. 0:51 Now you might be wondering where this would be useful. 0:58 It integrates with Google Wallet so on a checkout page it can actually request your credit card data. 1:00 That's going to be really useful for people when they're checking out on a website. 1:06 It says a lot of shopping carts are abandoned like 97% of the time during the checkout process. 1:10 It sounds like it would also be a little bit scary if you didn't know what's going on at first. 1:15 That's true. It does ask you to authorize it. 1:19 You know how it says we'd like to use your address book? >>Right. 1:22 It authorizes it, and you can choose whether or not to actually fill in the data. >>That's cool. 1:25 There's a really, really great and thorough blog post on here. 1:30 There's even a video showing how it works. 1:33 But really all you have to do is add an event listener to certain events on your forms, 1:35 and then the browser will actually request this information and the user can choose to give it to the browser or not. 1:40 Now there's a bunch of different fields there supported for payments. It supports email, all the different credit card information, addresses. 1:48 It supports phone numbers, different street addresses, country code, building code, shipping code, and all that. 1:56 They've got just a really, really great breakdown on everything you need to know about using request autocomplete. 2:02 Something that's really interesting about it is it's not limited to just Google Wallet. 2:09 Browser vendors could choose different sources of information to give to request autocomplete. 2:13 Anyway I'm really excited about this so check it out. 2:19 You can find a link to it in the show notes which you can get to at youtube.com/gotreehouse, 2:21 or in iTunes search for us at the Treehouse Show. 2:25 Pretty cool stuff. Next up we have navicon transformicons. >>Whoa. >>I think I'm saying that right. 2:28 Sounds like a web show by Michael Bay. >>It does sound that way. 2:36 Anyway it's this really cool pen on CodePen from Bennett Feely. I believe that's how you say his name. 2:40 You'll recognize this very common UI pattern of the 3 lines that you see in a lot of web apps and iPhone and Android apps, 2:48 and you click on these and typically a little menu will slide out. 2:59 Now if you click on the ones here, they actually transform. Whoa. Super cool. 3:04 That one transformed into a little loading bar. 3:10 These will transform into arrows, and then you have a couple of other different shapes that you can make here 3:14 if you want to do some math I guess. 3:21 But these are pretty useful in a couple of different scenarios. 3:25 For example, with the loading bar one—you can actually click it and go back. 3:30 For the loading bar one, if you had something that needed to load in, say something on the menu or something in a different context, 3:35 you could go ahead and click that, and it could show a loading bar to the user so they would know what's going on. 3:44 In the case of the arrows, let's say that you switched over to a menu so you clicked the 3 bars, and a menu slid out. 3:50 Now you can identify what that button will do in the new context. 4:00 It could go back. It could serve some sort of different function. 4:07 Before the show Jason and I were talking about this, and Jason very cleverly pointed out that 4:11 while this UI pattern is being standardized across many different apps, 4:17 it's not really standardized in terms of its usage and what will actually occur when you click this button. 4:23 This is pretty cool, and I really like the animations on it. >>Yeah. Really well done. 4:29 I like the nuances. Of course we've talked about the navicon before. >>We have. 4:35 Go back and watch every episode of the Treehouse Show. >>Yeah, it's somewhere in there. 4:39 Except for the first few. Those were train wrecks. 4:43 Next up we have a project called prerender. 4:45 Something that can be a little bit of an issue on your webpages is if their JavaScript intensive 4:48 search engines might not be able to crawl them. 4:53 Now prerender is a very interesting middleware for NodeJS, Ruby on Rails, and Zend Framework 2 4:55 that when it detects a crawler going to your site it will prerender the page and serve that to the bot instead. 5:01 Whoa. That's pretty cool. >>Isn't that insane? 5:09 It's very, very easy to use. Here is basically all you need to do to install it in Node. 5:12 Here are the instructions for Ruby on Rails. Again very, very easy to use and also in Zend Framework 2. 5:16 As far as I can tell, there's basically no reason to not use this in your sites. 5:24 That was a great double-negative. Anyway check it out. 5:29 So wait, we should use it? >>You should use it. >>In our sites? >>In your site. >>Got it. >>You're welcome. 5:32 Two negatives make a positive. 5:37 That's why the show is so positive. >>Exactly. 5:40 Next up is processor or Pro CSS or that's it. PROCCSOR. 5:43 Basically it's this pretty nifty web app. It's actually available on the Mac app store now as well. 5:53 Then you can go ahead and copy and paste your CSS in here, or you can upload a file or even paste in a URL. 6:00 When you come to the page normally this would be blank. 6:07 I've pre-populated it actually with the CSS from this webpage that you're looking at right now. 6:10 I've just pasted it in there, and there's quite a lot of stuff in there. 6:15 It would take a pretty long time to format this yourself if you wanted a particular style of curly braces or what have you. 6:19 Now this process button down here—we'll go ahead and do the processing, 6:29 but before we do that let's open up the options and take a look here. 6:33 They have categories for neat, pretty, and awesome, very descriptive there. 6:37 But actually if you do click on these select menus, they will go ahead and twirl out these tool tips. 6:42 Lots of little UI words being dropped here. [laughter] 6:49 They will twirl out these tool tips and give you a description of what each selection will do, 6:54 and they're pretty detailed and pretty helpful. 7:01 They even give examples here, in this case, for the brace style, and everyone has a slightly different way of typing out their CSS. 7:05 I actually prefer the default one here. That's how I was taught to do CSS, and that's how I still like to format my CSS. 7:13 But that's not always the case with everybody. 7:22 There's a lot of different styles, and they're all perfectly acceptable. 7:25 [Jason Seifer] Except for indenting with anything other than 2 spaces. That's unacceptable. 7:28 [Nick Pettit] Yeah, I would tend to agree there, but they give you the option there just in case you want to do that. 7:32 They have a whole bunch of other options here. It's pretty cool. 7:40 You go ahead and click process, and once you do that it will go ahead and spit out the formatted CSS for you just like that. 7:42 You can go ahead and copy it, or you can actually download it. 7:53 Pretty cool, and it's really handy say if you're pretty deep into maybe a framework and you're modifying some stuff 7:56 or you're taking and old project and updating it. 8:05 Really great way to go ahead and just update all that CSS at once to a newer format rather than wasting time just typing out spaces 8:08 or line breaks or something like that. 8:17 Pretty cool stuff. >>Very nice. 8:19 Next up we have a project called FastActive. 8:21 This is a set of JavaScript and CSS files that attempts to replicate the field of a native app inside a regular web application, 8:24 one of those single-page web apps. The web. The Internet. >>I've been there. >>Great place. Most of it. 8:33 Anyway it's really, really easy to use. It's also really, really small. It's ultra lightweight. It's only 449 bytes minified. 8:44 That's practically nothing. 8:51 The way it attempts to replicate the native field of an application is by removing the delay that's present 8:53 in a lot of the different events as well as changing colors and giving UI feedback immediately. 9:00 The author says that one of the big reasons that native applications feel so much different than HTML, JSS, and CS applications 9:06 is because the visual feedback is not immediate. 9:15 He's got a set of styles that you can overlay and a bunch of different events that you can hook into as well. 9:19 Anyway really, really easy to use. It's called FastActive. Go ahead and check that one out. 9:27 Pretty nice. Next up we have an awesome blog post called Optimizing UI Icons for Faster Recognition. 9:32 It's written by Alla Kholmatova, I think is how you say his name or Malatov for short. 9:40 If we go ahead and look at this post, it's all about the psychology of icons. It's a really fascinating and in depth post. 9:49 Alla makes a lot of comparisons between real-world signage that you might see on the road 9:58 and icons you might see in a web app. 10:06 Now he actually did an AB test to study the recognition between solid icons and kind of these line-based icons, 10:09 very similar to what you might find in iOS 7 in a lot of instances. 10:19 He discovered that there's actually no difference between the recognition of the 2 groups. 10:23 That was kind of an interesting find. 10:31 What he did discover is that the shape of the icons actually has a lot more to do with the speed of recognition, 10:33 and he points out what a couple of good shapes look like and what a couple of not-so-good shapes look like. 10:40 There's a few other factors that he tested on. 10:47 One of them is whether or not you have a representative icon or an icon that just kind of looks like the actual thing. 10:51 That was actually a poor way of explaining it, but it's much more articulate in the article. 11:00 One other thing I do want to point out. 11:06 He says that adding labels to iconography or using labels in conjunction with iconography 11:08 is a really fast way to get users to recognize stuff. 11:14 If you do have that luxury, say for example you need them to recognize something very quickly like a stop sign, 11:19 then that's really the best way to do it. 11:26 Very fascinating article. There's a lot more stuff in there that I didn't talk about. 11:29 Like I said, he explains it much more articulately than I did. That was like the perfect word to flub. 11:33 That really was. He nailed it. 11:41 Next up we have a project called StackEdit. 11:43 If you've ever been to Stack Overflow, they have a markdown library called PageDown. 11:46 Now this guy on GitHub, Ben Wheat, that is his GitHub name, went ahead and made this huge fully featured markdown editor 11:51 using that library and a bunch of different technologies inside the browser. 11:59 First I'll show you what it looks like. 12:04 This is a screenshot. I'm sorry this is an interactive display of StackEdit. 12:06 You can see you have the markdown on the left side of the screen and the rendered version on the right side of the screen. 12:12 Now there are some toolbar buttons that you can use to format it bold, 12:19 and then you can see you get an immediate live preview on the right side of the screen. 12:24 What's so great about this? 12:28 It supports a ton of things. 12:30 You can export your documents in markdown or HTML. You can synchronize these documents in the Cloud. 12:33 You can import documents from Google Drive, Dropbox, and just a ton of different services. 12:38 If you're interested in how this works, you can also view all the code right there. 12:44 It's a really great way to see what's going on behind the scenes and how you might integrate some of this source code 12:48 into your own applications. 12:53 I have it on good authority that the best way to learn to code is to break existing code. 12:56 Not really sure where I heard that one. 12:59 Yeah. Might have been on the Treehouse blog. 13:02 Could have been. >>That's very possible. 13:05 Anyway that's all we have for this episode. Nick, who are you on Twitter? 13:07 I'm @nickrp. >>I am @jseifer. 13:10 If you want more information on anything we talked about on this show, 13:13 go ahead and check out the show notes at youtube.com/gotreehouse or check us out in iTunes. 13:16 Search for the Treehouse Show. 13:20 Of course if you'd like to see more videos like this one about web design, web development, mobile development, 13:23 business development, any many other types of development, be sure to check us out at teamtreehouse.com. 13:27 Thanks so much for watching, and we'll see you next week. 13:34 [Treehouse Show] 13:37

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

Sign up