1 00:00:00,250 --> 00:00:01,010 I'm Nick Pettit. 2 00:00:01,010 --> 00:00:01,990 >> I'm Jason Seifer. 3 00:00:01,990 --> 00:00:05,092 >> And you're watching the Treehouse show, your weekly dose of Internets where 4 00:00:05,092 --> 00:00:07,730 we talk about all things web design, web development, and more. 5 00:00:07,730 --> 00:00:12,480 >> In this episode we'd talking about web features, form design, color pickers and 6 00:00:12,480 --> 00:00:13,240 more. 7 00:00:13,240 --> 00:00:14,330 >> Let's check it out 8 00:00:14,330 --> 00:00:19,492 [MUSIC] 9 00:00:19,492 --> 00:00:20,393 >> First up, Nick, 10 00:00:20,393 --> 00:00:24,000 we've gone over the website caniuse.com previously on this show. 11 00:00:24,000 --> 00:00:25,330 >> It's true, it's very true. 12 00:00:25,330 --> 00:00:29,630 >> Now, caniuse.com is a very, very informative website where if you 13 00:00:29,630 --> 00:00:33,680 are looking to see whether or not you can use a certain element or 14 00:00:33,680 --> 00:00:38,770 attribute on your webpage, it will tell you what browsers have support. 15 00:00:38,770 --> 00:00:43,239 So, for example, if I click on the audio element, it will tell me which we 16 00:00:43,239 --> 00:00:48,232 browser and which versions support it, as well as any features and known issues. 17 00:00:48,232 --> 00:00:51,541 Now while this website is completely awesome, 18 00:00:51,541 --> 00:00:56,375 there is now a Command Line Tool that interfaces with caniuse.com. 19 00:00:56,375 --> 00:01:01,032 You can install this with Node.js, just do a global 20 00:01:01,032 --> 00:01:05,942 npm install of caniuse-cmd, and then you can go ahead and 21 00:01:05,942 --> 00:01:10,122 use the caniuse command and put something in there afterwards. 22 00:01:10,122 --> 00:01:11,742 Let's go ahead and see what it looks like. 23 00:01:11,742 --> 00:01:14,720 So for example here we are on my MacBook Pro, 24 00:01:14,720 --> 00:01:17,680 and say can I use and something like SVG. 25 00:01:17,680 --> 00:01:22,800 And then we can see right here on the output it will tell me, oh, 26 00:01:22,800 --> 00:01:28,160 can't use it in IE 5.5, but SVG is supported in IE 9 and up. 27 00:01:29,370 --> 00:01:32,910 There we can also do something like can I use websockets. 28 00:01:32,910 --> 00:01:36,750 Okay, we have partial support, and IE, and Firefox and 29 00:01:36,750 --> 00:01:41,640 Chrome, and then there's also different options like can I use oneline 30 00:01:43,360 --> 00:01:47,770 websockets, and it will give you a very short summary of whether or 31 00:01:47,770 --> 00:01:50,090 not you can use that particular feature. 32 00:01:50,090 --> 00:01:54,590 Tells you what percentage is supported, and whether or not it is recommended. 33 00:01:54,590 --> 00:01:57,730 So, just a quick little command line tool that we thought 34 00:01:57,730 --> 00:01:59,040 you might find very useful. 35 00:01:59,040 --> 00:01:59,710 Go ahead and check it out. 36 00:01:59,710 --> 00:02:01,400 We'll have a link in the show notes. 37 00:02:01,400 --> 00:02:02,170 >> Very cool stuff. 38 00:02:02,170 --> 00:02:07,810 Well, next up is The 10 Commandments of Good Form Design on the Web. 39 00:02:07,810 --> 00:02:12,600 So, if you wanna have good form for your forms, this is the place to look. 40 00:02:12,600 --> 00:02:15,620 First one says that you should always provide a clear, 41 00:02:15,620 --> 00:02:18,880 always visible label for each field. 42 00:02:18,880 --> 00:02:23,660 So here is a bad example where there's labels, and you type stuff in, and 43 00:02:23,660 --> 00:02:26,930 then well, you're not really sure what the label said originally. 44 00:02:26,930 --> 00:02:30,690 And this is better, where you always have the labels visible. 45 00:02:30,690 --> 00:02:34,110 So that when you type things in, it's easy to understand, and 46 00:02:34,110 --> 00:02:36,000 I actually like the design of this article. 47 00:02:36,000 --> 00:02:39,740 They show stuff in red when it's bad and green when it's good. 48 00:02:39,740 --> 00:02:43,630 So, these are small labels, and then they make the labels larger. 49 00:02:43,630 --> 00:02:46,430 That's an important thing to keep in mind when creating forms. 50 00:02:46,430 --> 00:02:51,345 It sounds really obvious, but you should have a big enough font size so 51 00:02:51,345 --> 00:02:55,030 that you can easily scan the form and go down the page and 52 00:02:55,030 --> 00:02:58,930 figure out what kind of information you need to put in. 53 00:02:58,930 --> 00:03:02,820 There's 10 of these, but I'll just keep it to the first three. 54 00:03:02,820 --> 00:03:07,240 The last one, I really like this, is to provide easily tappable areas. 55 00:03:07,240 --> 00:03:11,850 You want to provide an area on the screen that is going to be easy, 56 00:03:11,850 --> 00:03:16,900 not only for people using a mouse and keyboard to input their data into, but 57 00:03:16,900 --> 00:03:19,480 also for people who are on mobile. 58 00:03:19,480 --> 00:03:22,550 And really, when you're designing sites, you should be be thinking about 59 00:03:22,550 --> 00:03:26,690 mobile first, and then working your way up to larger and larger screen sizes. 60 00:03:26,690 --> 00:03:29,800 So, if your site looks good on a mobile device and 61 00:03:29,800 --> 00:03:35,050 you have these large tappable areas that are better for a crude input device like 62 00:03:35,050 --> 00:03:39,370 your finger versus a cursor, then you should be good to go. 63 00:03:39,370 --> 00:03:42,160 Anyway, there are a couple more of these on the page, so 64 00:03:42,160 --> 00:03:44,140 definitely be sure to check that one out. 65 00:03:44,140 --> 00:03:45,260 >> Very cool. 66 00:03:45,260 --> 00:03:48,160 Next up, we have a project called tiny color picker. 67 00:03:48,160 --> 00:03:50,120 As you might guess from the name, this is a very, 68 00:03:50,120 --> 00:03:52,930 small, color picker that you can use on your web pages. 69 00:03:52,930 --> 00:03:58,210 >> I was thinking it was for smaller colors rather than big colors. 70 00:03:58,210 --> 00:04:03,390 >> Yeah, like a deep burgundy red rather than a bright big red. 71 00:04:03,390 --> 00:04:05,350 >> Right. >> No, that's not it at all. 72 00:04:05,350 --> 00:04:08,370 This is just a small color picker that you can use on your webpage. 73 00:04:08,370 --> 00:04:11,440 Let's go ahead and take a look at an example. 74 00:04:11,440 --> 00:04:15,330 Here is a little circle on the page and if I tap that, oh look at that, 75 00:04:15,330 --> 00:04:16,790 we've got a color picker, and 76 00:04:16,790 --> 00:04:19,980 we can pick from literally any of these colors in this circle. 77 00:04:19,980 --> 00:04:21,170 I am gonna tap on purple, look at that. 78 00:04:21,170 --> 00:04:23,310 >> Wow, that's at least like a dozen colors, wow. 79 00:04:23,310 --> 00:04:25,560 >> Yeah, look at that, huh, ready? 80 00:04:25,560 --> 00:04:26,880 Do that again, look at that, what? 81 00:04:26,880 --> 00:04:28,305 >> Whoa. 82 00:04:28,305 --> 00:04:29,930 Literally any one of those colors. 83 00:04:29,930 --> 00:04:31,980 >> Are we on a web page or in Photoshop? 84 00:04:31,980 --> 00:04:34,236 >> This is a webpage. 85 00:04:34,236 --> 00:04:37,250 I know you couldn't believe that to begin with, but boy. 86 00:04:37,250 --> 00:04:38,550 >> I can't belive it. 87 00:04:38,550 --> 00:04:41,160 >> Well suspend that disbelief, buddy, because here we go. 88 00:04:41,160 --> 00:04:42,950 This has an image. 89 00:04:42,950 --> 00:04:43,640 >> Oh my Gosh. 90 00:04:43,640 --> 00:04:46,960 >> And then anywhere that I click inside of this image. 91 00:04:46,960 --> 00:04:48,460 Look at that, that the color, yeah. 92 00:04:48,460 --> 00:04:49,410 >> What is happening? 93 00:04:49,410 --> 00:04:52,380 >> What is happening is your mind being blown. 94 00:04:52,380 --> 00:04:53,780 >> Tomorrow is today. 95 00:04:53,780 --> 00:04:56,290 >> Yesterday is not the future. 96 00:04:56,290 --> 00:05:00,250 So anyway, you can take pretty much any one of these that has some properties. 97 00:05:00,250 --> 00:05:03,470 You can give it the hex or the RGB value. 98 00:05:03,470 --> 00:05:07,200 And then it has only single event, the change event, and 99 00:05:07,200 --> 00:05:08,580 that triggers when a new color is set. 100 00:05:08,580 --> 00:05:11,740 And then you can do something when that is set. 101 00:05:11,740 --> 00:05:15,620 This works either on forms or just anywhere on your webpage. 102 00:05:15,620 --> 00:05:17,460 Go ahead and check that out. 103 00:05:17,460 --> 00:05:18,810 >> What a time to be alive. 104 00:05:18,810 --> 00:05:23,130 Next up is a mobile-friendly test to test whether or 105 00:05:23,130 --> 00:05:26,680 not your site is going to look good on mobile devices. 106 00:05:26,680 --> 00:05:31,420 Of course, when you are testing, you should always try to use a real device. 107 00:05:31,420 --> 00:05:34,530 But, if you're just doing something really quickly, 108 00:05:34,530 --> 00:05:38,670 Google has this awesome mobile-friendly tester. 109 00:05:38,670 --> 00:05:41,660 So we can type in something like, 110 00:05:41,660 --> 00:05:46,500 I don't know, my website, nickpetit.com, and it's going to analyze it. 111 00:05:46,500 --> 00:05:50,340 And this is actually doing more than just analyzing the design. 112 00:05:50,340 --> 00:05:54,590 It's Google going through and analyzing your page, and 113 00:05:54,590 --> 00:06:00,320 giving you an idea of how the Googlebot is actually going to see 114 00:06:00,320 --> 00:06:05,850 the content on this page, and hey look, it says I am co-host of the Treehouse show, 115 00:06:05,850 --> 00:06:08,850 and in fact, that is what I'm doing right now. 116 00:06:08,850 --> 00:06:11,680 But anyway, mobile friendly test, pretty cool. 117 00:06:11,680 --> 00:06:17,470 You can go ahead and analyze any webpage, are you okay, Jason? 118 00:06:17,470 --> 00:06:20,020 >> Is it analyzing the Treehouse show right now? 119 00:06:20,020 --> 00:06:22,740 >> I think so, I think Google is, yeah. 120 00:06:22,740 --> 00:06:23,910 >> Hi, Google. 121 00:06:23,910 --> 00:06:25,135 >> Yeah, it's watching us. 122 00:06:25,135 --> 00:06:27,338 >> [SOUND] Let's go ahead and move on, very quickly. 123 00:06:27,338 --> 00:06:31,940 Next up we have the ECMAScript 6 features guide. 124 00:06:31,940 --> 00:06:36,590 Now ECMAScript 6 is the next evolution of JavaScript. 125 00:06:36,590 --> 00:06:40,540 New version and the new standard has recently come out, and 126 00:06:40,540 --> 00:06:44,520 you can start using some ECMAScript 6 features today. 127 00:06:44,520 --> 00:06:49,120 If you would like to learn about them, this wonderful repository on GitHub, 128 00:06:49,120 --> 00:06:53,010 which you can find in the show notes, will walk you through some of the new features. 129 00:06:53,010 --> 00:06:56,490 Now, some of the new features, we're not gonna go over all of them because this is 130 00:06:56,490 --> 00:07:00,610 quite a bit of stuff, but arrows, which you might have seen and 131 00:07:00,610 --> 00:07:05,810 been used to in CoffeeScript, are now available in ECMAScript 6. 132 00:07:05,810 --> 00:07:11,690 Now, these allow you to define functions in a shorthand manner. 133 00:07:11,690 --> 00:07:16,130 For example, this for each statement usually would take a function, but 134 00:07:16,130 --> 00:07:22,010 instead of writing function with parenthesis and open curly brace, 135 00:07:22,010 --> 00:07:26,440 we can just use this fat arrow and then place our function inside. 136 00:07:27,620 --> 00:07:31,750 Now there is a little bit of a difference between fat arrows and skinny arrows. 137 00:07:31,750 --> 00:07:36,560 We're using the fat arrow syntax, which binds to this. 138 00:07:36,560 --> 00:07:41,260 So normally we would have to define a different variable to 139 00:07:41,260 --> 00:07:46,190 keep place of the scope, but the fat arrow does that for us. 140 00:07:46,190 --> 00:07:49,229 So the inner this refers to the outer this. 141 00:07:50,540 --> 00:07:54,160 Next up, ECMAScript 6 defines classes as well. 142 00:07:54,160 --> 00:07:55,660 Now this is interesting. 143 00:07:55,660 --> 00:07:59,790 Class based design was something that we would use quite a bit in JavaScript, but 144 00:07:59,790 --> 00:08:02,185 there were, I don't wanna say hacks, but 145 00:08:02,185 --> 00:08:07,450 this is just simple syntactic sugar over the normal object oriented pattern. 146 00:08:07,450 --> 00:08:11,300 So, use this class statement and extend it from another class. 147 00:08:11,300 --> 00:08:16,550 You get this nice constructor syntax which is very, very useful, and 148 00:08:16,550 --> 00:08:20,350 we're not gonna go over everything, but go ahead and give this a read. 149 00:08:20,350 --> 00:08:23,490 This is going to be the next version of ECMAScript 6. 150 00:08:23,490 --> 00:08:26,970 There's no time better than the present to get familiar with it. 151 00:08:26,970 --> 00:08:27,860 >> Very nice stuff. 152 00:08:27,860 --> 00:08:29,730 Well, that's all we have time for this week. 153 00:08:29,730 --> 00:08:31,070 I am @nickrp on Twitter. 154 00:08:31,070 --> 00:08:31,980 >> And I am @jseifer. 155 00:08:31,980 --> 00:08:33,930 For more information on anything we talked about, go ahead and 156 00:08:33,930 --> 00:08:35,850 check out the links in our show notes. 157 00:08:35,850 --> 00:08:39,283 We wanna thank everybody for watching, and we'll see you next week. 158 00:08:39,283 --> 00:08:46,419 [MUSIC]