Episode 147: Web Features, Form Design, Color Pickers

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse show, your weekly dose of Internets where 0:01 we talk about all things web design, web development, and more. 0:05 >> In this episode we'd talking about web features, form design, color pickers and 0:07 more. 0:12 >> Let's check it out 0:13 [MUSIC] 0:14 >> First up, Nick, 0:19 we've gone over the website caniuse.com previously on this show. 0:20 >> It's true, it's very true. 0:24 >> Now, caniuse.com is a very, very informative website where if you 0:25 are looking to see whether or not you can use a certain element or 0:29 attribute on your webpage, it will tell you what browsers have support. 0:33 So, for example, if I click on the audio element, it will tell me which we 0:38 browser and which versions support it, as well as any features and known issues. 0:43 Now while this website is completely awesome, 0:48 there is now a Command Line Tool that interfaces with caniuse.com. 0:51 You can install this with Node.js, just do a global 0:56 npm install of caniuse-cmd, and then you can go ahead and 1:01 use the caniuse command and put something in there afterwards. 1:05 Let's go ahead and see what it looks like. 1:10 So for example here we are on my MacBook Pro, 1:11 and say can I use and something like SVG. 1:14 And then we can see right here on the output it will tell me, oh, 1:17 can't use it in IE 5.5, but SVG is supported in IE 9 and up. 1:22 There we can also do something like can I use websockets. 1:29 Okay, we have partial support, and IE, and Firefox and 1:32 Chrome, and then there's also different options like can I use oneline 1:36 websockets, and it will give you a very short summary of whether or 1:43 not you can use that particular feature. 1:47 Tells you what percentage is supported, and whether or not it is recommended. 1:50 So, just a quick little command line tool that we thought 1:54 you might find very useful. 1:57 Go ahead and check it out. 1:59 We'll have a link in the show notes. 1:59 >> Very cool stuff. 2:01 Well, next up is The 10 Commandments of Good Form Design on the Web. 2:02 So, if you wanna have good form for your forms, this is the place to look. 2:07 First one says that you should always provide a clear, 2:12 always visible label for each field. 2:15 So here is a bad example where there's labels, and you type stuff in, and 2:18 then well, you're not really sure what the label said originally. 2:23 And this is better, where you always have the labels visible. 2:26 So that when you type things in, it's easy to understand, and 2:30 I actually like the design of this article. 2:34 They show stuff in red when it's bad and green when it's good. 2:36 So, these are small labels, and then they make the labels larger. 2:39 That's an important thing to keep in mind when creating forms. 2:43 It sounds really obvious, but you should have a big enough font size so 2:46 that you can easily scan the form and go down the page and 2:51 figure out what kind of information you need to put in. 2:55 There's 10 of these, but I'll just keep it to the first three. 2:58 The last one, I really like this, is to provide easily tappable areas. 3:02 You want to provide an area on the screen that is going to be easy, 3:07 not only for people using a mouse and keyboard to input their data into, but 3:11 also for people who are on mobile. 3:16 And really, when you're designing sites, you should be be thinking about 3:19 mobile first, and then working your way up to larger and larger screen sizes. 3:22 So, if your site looks good on a mobile device and 3:26 you have these large tappable areas that are better for a crude input device like 3:29 your finger versus a cursor, then you should be good to go. 3:35 Anyway, there are a couple more of these on the page, so 3:39 definitely be sure to check that one out. 3:42 >> Very cool. 3:44 Next up, we have a project called tiny color picker. 3:45 As you might guess from the name, this is a very, 3:48 small, color picker that you can use on your web pages. 3:50 >> I was thinking it was for smaller colors rather than big colors. 3:52 >> Yeah, like a deep burgundy red rather than a bright big red. 3:58 >> Right. >> No, that's not it at all. 4:03 This is just a small color picker that you can use on your webpage. 4:05 Let's go ahead and take a look at an example. 4:08 Here is a little circle on the page and if I tap that, oh look at that, 4:11 we've got a color picker, and 4:15 we can pick from literally any of these colors in this circle. 4:16 I am gonna tap on purple, look at that. 4:19 >> Wow, that's at least like a dozen colors, wow. 4:21 >> Yeah, look at that, huh, ready? 4:23 Do that again, look at that, what? 4:25 >> Whoa. 4:26 Literally any one of those colors. 4:28 >> Are we on a web page or in Photoshop? 4:29 >> This is a webpage. 4:31 I know you couldn't believe that to begin with, but boy. 4:34 >> I can't belive it. 4:37 >> Well suspend that disbelief, buddy, because here we go. 4:38 This has an image. 4:41 >> Oh my Gosh. 4:42 >> And then anywhere that I click inside of this image. 4:43 Look at that, that the color, yeah. 4:46 >> What is happening? 4:48 >> What is happening is your mind being blown. 4:49 >> Tomorrow is today. 4:52 >> Yesterday is not the future. 4:53 So anyway, you can take pretty much any one of these that has some properties. 4:56 You can give it the hex or the RGB value. 5:00 And then it has only single event, the change event, and 5:03 that triggers when a new color is set. 5:07 And then you can do something when that is set. 5:08 This works either on forms or just anywhere on your webpage. 5:11 Go ahead and check that out. 5:15 >> What a time to be alive. 5:17 Next up is a mobile-friendly test to test whether or 5:18 not your site is going to look good on mobile devices. 5:23 Of course, when you are testing, you should always try to use a real device. 5:26 But, if you're just doing something really quickly, 5:31 Google has this awesome mobile-friendly tester. 5:34 So we can type in something like, 5:38 I don't know, my website, nickpetit.com, and it's going to analyze it. 5:41 And this is actually doing more than just analyzing the design. 5:46 It's Google going through and analyzing your page, and 5:50 giving you an idea of how the Googlebot is actually going to see 5:54 the content on this page, and hey look, it says I am co-host of the Treehouse show, 6:00 and in fact, that is what I'm doing right now. 6:05 But anyway, mobile friendly test, pretty cool. 6:08 You can go ahead and analyze any webpage, are you okay, Jason? 6:11 >> Is it analyzing the Treehouse show right now? 6:17 >> I think so, I think Google is, yeah. 6:20 >> Hi, Google. 6:22 >> Yeah, it's watching us. 6:23 >> [SOUND] Let's go ahead and move on, very quickly. 6:25 Next up we have the ECMAScript 6 features guide. 6:27 Now ECMAScript 6 is the next evolution of JavaScript. 6:31 New version and the new standard has recently come out, and 6:36 you can start using some ECMAScript 6 features today. 6:40 If you would like to learn about them, this wonderful repository on GitHub, 6:44 which you can find in the show notes, will walk you through some of the new features. 6:49 Now, some of the new features, we're not gonna go over all of them because this is 6:53 quite a bit of stuff, but arrows, which you might have seen and 6:56 been used to in CoffeeScript, are now available in ECMAScript 6. 7:00 Now, these allow you to define functions in a shorthand manner. 7:05 For example, this for each statement usually would take a function, but 7:11 instead of writing function with parenthesis and open curly brace, 7:16 we can just use this fat arrow and then place our function inside. 7:22 Now there is a little bit of a difference between fat arrows and skinny arrows. 7:27 We're using the fat arrow syntax, which binds to this. 7:31 So normally we would have to define a different variable to 7:36 keep place of the scope, but the fat arrow does that for us. 7:41 So the inner this refers to the outer this. 7:46 Next up, ECMAScript 6 defines classes as well. 7:50 Now this is interesting. 7:54 Class based design was something that we would use quite a bit in JavaScript, but 7:55 there were, I don't wanna say hacks, but 7:59 this is just simple syntactic sugar over the normal object oriented pattern. 8:02 So, use this class statement and extend it from another class. 8:07 You get this nice constructor syntax which is very, very useful, and 8:11 we're not gonna go over everything, but go ahead and give this a read. 8:16 This is going to be the next version of ECMAScript 6. 8:20 There's no time better than the present to get familiar with it. 8:23 >> Very nice stuff. 8:26 Well, that's all we have time for this week. 8:27 I am @nickrp on Twitter. 8:29 >> And I am @jseifer. 8:31 For more information on anything we talked about, go ahead and 8:31 check out the links in our show notes. 8:33 We wanna thank everybody for watching, and we'll see you next week. 8:35 [MUSIC] 8:39

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

Sign up