1 00:00:00,000 --> 00:00:03,320 Hi, I'm Nick Pettit.>>I'm Jason Seifer. 2 00:00:03,320 --> 00:00:06,410 And you're watching The Treehouse Show, your weekly dose of internet, 3 00:00:06,410 --> 00:00:09,910 where we talk about all things web design, web development, and more. 4 00:00:09,910 --> 00:00:13,190 In this episode, we'll be taking a look at SVGs, 5 00:00:13,190 --> 00:00:16,170 JavaScript uploads, and responsive frameworks. 6 00:00:16,170 --> 00:00:18,550 Let's check it out. 7 00:00:18,550 --> 00:00:21,740 [? Music ?] 8 00:00:21,740 --> 00:00:23,580 [The Treehouse Show] 9 00:00:23,580 --> 00:00:28,700 First up is a primer to front-end SVG hacking. 10 00:00:28,700 --> 00:00:30,060 [A Primer to Front-end SVG Hacking] [trhou.se/11Xs3Ea] 11 00:00:30,060 --> 00:00:32,880 This is a really cool blog post that is basically just 12 00:00:32,880 --> 00:00:38,610 an introduction about how to include SVGs into your website. 13 00:00:38,610 --> 00:00:41,600 Now, of course, you can put SVGs anywhere 14 00:00:41,600 --> 00:00:46,510 where you can put images, but it's a little bit tricky. 15 00:00:46,510 --> 00:00:50,540 Sometimes there can be some tricky things with graceful degradation, 16 00:00:50,540 --> 00:00:54,560 and it's not quite as straightforward as it might seem. 17 00:00:54,560 --> 00:00:57,090 But this is a really amazing blog post. 18 00:00:57,090 --> 00:00:59,920 It teaches you how to actually include 19 00:00:59,920 --> 00:01:04,599 images in your CSS as something that's base 64 encoded 20 00:01:04,599 --> 00:01:08,600 and really a great way to get started with SVGs, 21 00:01:08,600 --> 00:01:11,880 which are really good if you're trying to create a website 22 00:01:11,880 --> 00:01:17,420 that's going to be retina ready, or ready for high DPI displays. 23 00:01:17,420 --> 00:01:20,780 Yeah, very nice, a really good post. I definitely learned a couple things there. 24 00:01:20,780 --> 00:01:22,410 Check it out. 25 00:01:22,410 --> 00:01:24,470 Next up we have a project called Toolbar.Js. 26 00:01:24,470 --> 00:01:26,090 [Toolbar.Js] [paulkinzett.github.com/toolbar/] Now, this is really interesting. 27 00:01:26,090 --> 00:01:29,760 This is a jQuery plugin that creates Tooltip-style toolbars. 28 00:01:29,760 --> 00:01:31,150 Now, what does that mean? 29 00:01:31,150 --> 00:01:34,500 Well, there's a great example on the site, so here's this little gear icon. 30 00:01:34,500 --> 00:01:38,890 You can click on that, and then boom, get a little popup 31 00:01:38,890 --> 00:01:43,020 with different possible functions for Toolbar. 32 00:01:43,020 --> 00:01:48,140 This uses the Bootstrap icons from the Twitter Bootstrap framework, 33 00:01:48,140 --> 00:01:52,140 which we pretty much can't get enough of and talk about here on the show constantly. 34 00:01:52,140 --> 00:01:54,350 It supports a bunch of different configurations. 35 00:01:54,350 --> 00:01:58,320 You can be on the top or bottom of a toolbar, 36 00:01:58,320 --> 00:02:02,840 and then it's pretty easy to customize the number of items inside the toolbar. 37 00:02:02,840 --> 00:02:07,030 It really just has a little bit of HTML and markup that you use. 38 00:02:07,030 --> 00:02:11,710 It can be horizontal, vertical toolbars on the right or left, 39 00:02:11,710 --> 00:02:15,900 and then there are, of course, toolbars that can be triggered by a link, 40 00:02:15,900 --> 00:02:21,190 and then it has a couple of different options for hiding the toolbar on click and things like that. 41 00:02:21,190 --> 00:02:25,560 This is Toolbar.Js, and you can find a link to that in our show notes 42 00:02:25,560 --> 00:02:28,910 at YouTube.com/GoTreehouse. 43 00:02:28,910 --> 00:02:30,130 Check it out. 44 00:02:30,130 --> 00:02:34,810 Next up is a really cool project from Intridea called Stately. 45 00:02:34,810 --> 00:02:36,120 [Stately] [intridea.github.com/stately/] 46 00:02:36,120 --> 00:02:41,630 It's basically an icon font that allows you to create maps of the United States. 47 00:02:41,630 --> 00:02:47,610 Let's say that you wanted to make a graph of the 2012 presidential election, 48 00:02:47,610 --> 00:02:53,210 or you wanted to show where all Intrideans are throughout the United States. 49 00:02:53,210 --> 00:02:55,070 You could go ahead and do that. 50 00:02:55,070 --> 00:02:59,530 You can go ahead and scroll down here, copy and paste this markup 51 00:02:59,530 --> 00:03:04,060 into your page, and you can go ahead and style Stately 52 00:03:04,060 --> 00:03:07,360 using a couple different styles here. 53 00:03:07,360 --> 00:03:09,510 They give some examples, and you can, of course, 54 00:03:09,510 --> 00:03:12,130 style individual states. 55 00:03:12,130 --> 00:03:15,410 This is pretty useful if you just want to quickly generate 56 00:03:15,410 --> 00:03:20,910 a map of the United States and show some data about different states. 57 00:03:20,910 --> 00:03:23,870 Of course, you can't do this for the entire world. 58 00:03:23,870 --> 00:03:27,370 It's just useful if you live in the United States or if you want to show data about 59 00:03:27,370 --> 00:03:30,480 the United States, but nonetheless, it's still pretty useful. 60 00:03:30,480 --> 00:03:32,980 Yeah, pretty cool how you can customize it too just via CSS. 61 00:03:32,980 --> 00:03:35,160 Yeah, it makes it really simple. 62 00:03:35,160 --> 00:03:38,600 You don't have to install any kind of crazy JavaScript 63 00:03:38,600 --> 00:03:42,820 mapping, plugins or use Google Maps or anything like that. 64 00:03:42,820 --> 00:03:44,820 It's very simple and straightforward. 65 00:03:44,820 --> 00:03:47,340 You just have to make sure that you have your list in order. 66 00:03:47,340 --> 00:03:49,530 That's right.>>And don't leave any states out. 67 00:03:49,530 --> 00:03:51,250 That's right.>>Unless it's Florida. 68 00:03:51,250 --> 00:03:53,090 That's okay.>>Yeah, you can leave out Florida. That's fine. 69 00:03:53,090 --> 00:03:56,310 Next up, we have a project called Dropzone.js. 70 00:03:56,310 --> 00:03:58,490 [Dropzonejs] [dropzonejs.com] This is a jQuery library 71 00:03:58,490 --> 00:04:02,300 that abstracts the HTML5 file upload API 72 00:04:02,300 --> 00:04:06,180 right into a jQuery plugin so you can drag and drop 73 00:04:06,180 --> 00:04:08,850 uploads right onto your page. 74 00:04:08,850 --> 00:04:12,700 Now, the other cool thing about it is it supports image thumbnailing, 75 00:04:12,700 --> 00:04:16,540 which is pretty awesome, so you can drop an image right there, 76 00:04:16,540 --> 00:04:20,950 and then it will upload it and automatically generate an image for you. 77 00:04:20,950 --> 00:04:25,150 It's very, very easy to use, and you just include a couple of JavaScripts, 78 00:04:25,150 --> 00:04:31,500 and then you can also add just a class to your different form fields 79 00:04:31,500 --> 00:04:35,660 for files in dropping them, and then it automatically creates it. 80 00:04:35,660 --> 00:04:39,220 You can also create the dropzones programmatically 81 00:04:39,220 --> 00:04:41,430 in a JavaScript tag. 82 00:04:41,430 --> 00:04:45,930 One of the really nice things about the plugin is it just abstracts everything away for you, 83 00:04:45,930 --> 00:04:49,080 so you only need to remember one API and not bother with 84 00:04:49,080 --> 00:04:52,240 a ton of different JavaScript in your page. 85 00:04:52,240 --> 00:04:54,100 Check that out. 86 00:04:54,100 --> 00:04:57,100 Nick, have you seen the new show The Real Developers World? 87 00:04:57,100 --> 00:05:01,870 I have not, but I have a feeling that we're going to see a clip of it right now. 88 00:05:01,870 --> 00:05:03,730 That's true. 89 00:05:03,730 --> 00:05:06,340 [? Music ?] 90 00:05:06,340 --> 00:05:08,040 [The Real Developers World] 91 00:05:08,040 --> 00:05:13,840 [? Music ?] 92 00:05:13,840 --> 00:05:16,650 Nick, you know, you could save yourself a keystroke 93 00:05:16,650 --> 00:05:20,830 if you typed in 60 instead of 1-0-0. 94 00:05:20,830 --> 00:05:24,150 What if I wanted to type in 1:15? 95 00:05:24,150 --> 00:05:30,020 Just do 75. You still save a keystroke. 96 00:05:30,020 --> 00:05:33,760 Yeah, or you could just save yourself some hand movement and type in 77, 97 00:05:33,760 --> 00:05:44,660 because no one cares about those extra 2 seconds. 98 00:05:44,660 --> 00:05:48,790 I mean, she's right. I've been wasting hand movement my entire life. 99 00:05:48,790 --> 00:05:57,070 [? Music ?] 100 00:05:57,070 --> 00:06:02,910 [The Real Developers World] 101 00:06:02,910 --> 00:06:04,170 Yeah, it's not very good. 102 00:06:04,170 --> 00:06:06,520 No, that was actually terrible. 103 00:06:06,520 --> 00:06:08,100 Yeah. What's next? 104 00:06:08,100 --> 00:06:11,490 Next up are labels in input fields. 105 00:06:11,490 --> 00:06:13,150 [Labels in Input Fields Aren't Such a Good Idea] [trhou.se/12RRer8] 106 00:06:13,150 --> 00:06:15,310 And apparently, it's not such a good idea. 107 00:06:15,310 --> 00:06:18,610 This is a blog post that's titled "Labels in Input Fields Aren't Such a Good Idea." 108 00:06:18,610 --> 00:06:23,010 And basically, they're saying that you should actually use labels 109 00:06:23,010 --> 00:06:26,670 as they were originally intended, so for example, 110 00:06:26,670 --> 00:06:32,360 you shouldn't put a label inside of a form field, like so, 111 00:06:32,360 --> 00:06:35,610 where you'll often see this design pattern where 112 00:06:35,610 --> 00:06:38,250 the text is kind of grayed out, and it says something like 113 00:06:38,250 --> 00:06:42,240 email address or whatever you're supposed to put into that form field, 114 00:06:42,240 --> 00:06:45,230 and as soon as you click, it's gone. 115 00:06:45,230 --> 00:06:48,910 The argument that's being made in this blog post is that 116 00:06:48,910 --> 00:06:52,470 although you might be saving some space by removing that label, 117 00:06:52,470 --> 00:06:55,630 you're actually making a more confusing interface, 118 00:06:55,630 --> 00:06:59,570 so in this particular example, they have a reference URL, 119 00:06:59,570 --> 00:07:02,680 and then they have 2 inputs, 120 00:07:02,680 --> 00:07:04,780 and one says the Encyclopedia of Life, 121 00:07:04,780 --> 00:07:07,330 and the next says Wikipedia. 122 00:07:07,330 --> 00:07:13,010 You're supposed to put in a URL in the first spot and a URL in the second spot. 123 00:07:13,010 --> 00:07:15,450 The problem is as soon as you click, 124 00:07:15,450 --> 00:07:18,710 you lose what you were supposed to put in there, 125 00:07:18,710 --> 00:07:22,650 and it can be easy to forget or get your URLs crossed 126 00:07:22,650 --> 00:07:27,990 or not really know where you were supposed to put stuff. 127 00:07:27,990 --> 00:07:30,300 It's a pretty good blog post. 128 00:07:30,300 --> 00:07:37,660 It makes a really good insight into the user experience of forms, 129 00:07:37,660 --> 00:07:43,850 and further down in the post they talk about the rise of the HTML5 placeholder, 130 00:07:43,850 --> 00:07:48,300 which leaves room for further abuse of this particular design pattern. 131 00:07:48,300 --> 00:07:51,840 A very interesting post for people that are interested 132 00:07:51,840 --> 00:07:55,080 in the user experience or UX. 133 00:07:55,080 --> 00:07:58,290 I guess the big takeaway to that is maybe use placeholders for examples 134 00:07:58,290 --> 00:08:02,310 and that labels are really good for accessibility and screen readers and things like that. 135 00:08:02,310 --> 00:08:04,250 Exactly. Good point. 136 00:08:04,250 --> 00:08:08,420 Next up we have something called the JS Compatibility Table. 137 00:08:08,420 --> 00:08:10,330 [JavaScript Function Compatibility Table] [compatibility.shwups-cms.ch/de/home/] 138 00:08:10,330 --> 00:08:12,450 This is a really great table listing the compatibility of different 139 00:08:12,450 --> 00:08:17,680 built-in JavaScript functions in a grid with different browsers across the top, 140 00:08:17,680 --> 00:08:19,800 and you can see if we take a look at it here, 141 00:08:19,800 --> 00:08:23,140 there's all of the different JavaScript functions available on the left, 142 00:08:23,140 --> 00:08:26,890 and as you scroll down, you can keep a view of what browsers 143 00:08:26,890 --> 00:08:30,760 do and don't support these different functions. 144 00:08:30,760 --> 00:08:34,620 There is just a ton of different JavaScript functions that you can use, 145 00:08:34,620 --> 00:08:38,320 and then you can even filter it by typing in something like "Geo," 146 00:08:38,320 --> 00:08:41,669 and it will show you a list of all the different browsers 147 00:08:41,669 --> 00:08:46,410 that support that, although that didn't exactly work for me right there. 148 00:08:46,410 --> 00:08:48,470 But trust me that it actually does later. 149 00:08:48,470 --> 00:08:50,590 I trust you, Jason. 150 00:08:50,590 --> 00:08:53,100 You can configure all the different browsers that you want at the top of the screen, 151 00:08:53,100 --> 00:08:58,180 which is great, and we'll have that in the show notes as well. 152 00:08:58,180 --> 00:09:00,250 Pretty cool. 153 00:09:00,250 --> 00:09:02,510 It's really useful if you're developing a JavaScript library or something. 154 00:09:02,510 --> 00:09:04,720 Yes, definitely. 155 00:09:04,720 --> 00:09:06,920 I thought tables were bad, but apparently tables are now good. 156 00:09:06,920 --> 00:09:08,810 They're good for tabular data. 157 00:09:08,810 --> 00:09:10,540 According to Jason. 158 00:09:10,540 --> 00:09:13,830 All right, next up is Sassaparilla. [sass.fffunction.co] 159 00:09:13,830 --> 00:09:15,080 I think I'm saying that right. 160 00:09:15,080 --> 00:09:19,030 It sounds like a parade.>>Yeah, or a root beer or something. 161 00:09:19,030 --> 00:09:26,200 It says, "Start your next web project faster with Sassaparilla." 162 00:09:26,200 --> 00:09:31,280 Now, this is basically some Sass files that you can go ahead 163 00:09:31,280 --> 00:09:37,960 and include in your website to start a project faster exactly as it implies. 164 00:09:37,960 --> 00:09:41,340 Now, looking at their documentation on Git, 165 00:09:41,340 --> 00:09:48,130 they say that this is in fact not a boilerplate or a theme. 166 00:09:48,130 --> 00:09:51,150 I kind of disagree with that a little bit. 167 00:09:51,150 --> 00:09:54,520 It's definitely not a theme, but it certainly is 168 00:09:54,520 --> 00:09:58,770 some nice default styling to go ahead and get your website going, 169 00:09:58,770 --> 00:10:02,680 which I feel like is exactly what a boilerplate is. 170 00:10:02,680 --> 00:10:04,470 It's okay to call it that. 171 00:10:04,470 --> 00:10:08,780 And the other thing that this does that's really nice is it 172 00:10:08,780 --> 00:10:11,300 sets up your fonts great. 173 00:10:11,300 --> 00:10:17,440 I mean, it says here, "A method to produce the perfect book." 174 00:10:17,440 --> 00:10:22,120 They give this awesome example of typography, 175 00:10:22,120 --> 00:10:27,460 and Sassaparilla is just great at that. 176 00:10:27,460 --> 00:10:29,070 Nice. 177 00:10:29,070 --> 00:10:32,690 I think the big draw here is that it lets you work in pixels in your Sass files, 178 00:10:32,690 --> 00:10:36,570 but it gets translated to EMs when it's compiled. 179 00:10:36,570 --> 00:10:39,210 Yes, which is super important. 180 00:10:39,210 --> 00:10:41,380 Yeah, that's going to be great for your responsive sites. 181 00:10:41,380 --> 00:10:43,090 Exactly. 182 00:10:43,090 --> 00:10:45,570 I think that's all we've got for today. 183 00:10:45,570 --> 00:10:47,590 If you want to get some background on what we talked about, check out our show notes 184 00:10:47,590 --> 00:10:50,230 at YouTube.com/GoTreehouse. 185 00:10:50,230 --> 00:10:52,130 [Treehouse YouTube Channel] [http://youtube.com/gotreehouse/] 186 00:10:52,130 --> 00:10:54,330 And who are you on Twitter?>>I am @JSeifer. 187 00:10:54,330 --> 00:10:56,230 I can't forget about that.>>I'm @NickRP. 188 00:10:56,230 --> 00:10:59,430 And of course, if you'd like to see more videos like this one about web design, 189 00:10:59,430 --> 00:11:02,240 web development, mobile development, or business, 190 00:11:02,240 --> 00:11:05,000 be sure to check us out at TeamTreehouse.com. 191 00:11:05,000 --> 00:11:07,780 See you next week, and thanks for watching. 192 00:11:07,780 --> 00:11:09,340 [? Music ?] 193 00:11:09,340 --> 00:11:12,020 [The Treehouse Show]