Episode 29: SVG Hacking

Hi, I'm Nick Pettit.>>I'm Jason Seifer. 0:00 And you're watching The Treehouse Show, your weekly dose of internet, 0:03 where we talk about all things web design, web development, and more. 0:06 In this episode, we'll be taking a look at SVGs, 0:09 JavaScript uploads, and responsive frameworks. 0:13 Let's check it out. 0:16 [? Music ?] 0:18 [The Treehouse Show] 0:21 First up is a primer to front-end SVG hacking. 0:23 [A Primer to Front-end SVG Hacking] [trhou.se/11Xs3Ea] 0:28 This is a really cool blog post that is basically just 0:30 an introduction about how to include SVGs into your website. 0:32 Now, of course, you can put SVGs anywhere 0:38 where you can put images, but it's a little bit tricky. 0:41 Sometimes there can be some tricky things with graceful degradation, 0:46 and it's not quite as straightforward as it might seem. 0:50 But this is a really amazing blog post. 0:54 It teaches you how to actually include 0:57 images in your CSS as something that's base 64 encoded 0:59 and really a great way to get started with SVGs, 1:04 which are really good if you're trying to create a website 1:08 that's going to be retina ready, or ready for high DPI displays. 1:11 Yeah, very nice, a really good post. I definitely learned a couple things there. 1:17 Check it out. 1:20 Next up we have a project called Toolbar.Js. 1:22 [Toolbar.Js] [paulkinzett.github.com/toolbar/] Now, this is really interesting. 1:24 This is a jQuery plugin that creates Tooltip-style toolbars. 1:26 Now, what does that mean? 1:29 Well, there's a great example on the site, so here's this little gear icon. 1:31 You can click on that, and then boom, get a little popup 1:34 with different possible functions for Toolbar. 1:38 This uses the Bootstrap icons from the Twitter Bootstrap framework, 1:43 which we pretty much can't get enough of and talk about here on the show constantly. 1:48 It supports a bunch of different configurations. 1:52 You can be on the top or bottom of a toolbar, 1:54 and then it's pretty easy to customize the number of items inside the toolbar. 1:58 It really just has a little bit of HTML and markup that you use. 2:02 It can be horizontal, vertical toolbars on the right or left, 2:07 and then there are, of course, toolbars that can be triggered by a link, 2:11 and then it has a couple of different options for hiding the toolbar on click and things like that. 2:15 This is Toolbar.Js, and you can find a link to that in our show notes 2:21 at YouTube.com/GoTreehouse. 2:25 Check it out. 2:28 Next up is a really cool project from Intridea called Stately. 2:30 [Stately] [intridea.github.com/stately/] 2:34 It's basically an icon font that allows you to create maps of the United States. 2:36 Let's say that you wanted to make a graph of the 2012 presidential election, 2:41 or you wanted to show where all Intrideans are throughout the United States. 2:47 You could go ahead and do that. 2:53 You can go ahead and scroll down here, copy and paste this markup 2:55 into your page, and you can go ahead and style Stately 2:59 using a couple different styles here. 3:04 They give some examples, and you can, of course, 3:07 style individual states. 3:09 This is pretty useful if you just want to quickly generate 3:12 a map of the United States and show some data about different states. 3:15 Of course, you can't do this for the entire world. 3:20 It's just useful if you live in the United States or if you want to show data about 3:23 the United States, but nonetheless, it's still pretty useful. 3:27 Yeah, pretty cool how you can customize it too just via CSS. 3:30 Yeah, it makes it really simple. 3:32 You don't have to install any kind of crazy JavaScript 3:35 mapping, plugins or use Google Maps or anything like that. 3:38 It's very simple and straightforward. 3:42 You just have to make sure that you have your list in order. 3:44 That's right.>>And don't leave any states out. 3:47 That's right.>>Unless it's Florida. 3:49 That's okay.>>Yeah, you can leave out Florida. That's fine. 3:51 Next up, we have a project called Dropzone.js. 3:53 [Dropzonejs] [dropzonejs.com] This is a jQuery library 3:56 that abstracts the HTML5 file upload API 3:58 right into a jQuery plugin so you can drag and drop 4:02 uploads right onto your page. 4:06 Now, the other cool thing about it is it supports image thumbnailing, 4:08 which is pretty awesome, so you can drop an image right there, 4:12 and then it will upload it and automatically generate an image for you. 4:16 It's very, very easy to use, and you just include a couple of JavaScripts, 4:20 and then you can also add just a class to your different form fields 4:25 for files in dropping them, and then it automatically creates it. 4:31 You can also create the dropzones programmatically 4:35 in a JavaScript tag. 4:39 One of the really nice things about the plugin is it just abstracts everything away for you, 4:41 so you only need to remember one API and not bother with 4:45 a ton of different JavaScript in your page. 4:49 Check that out. 4:52 Nick, have you seen the new show The Real Developers World? 4:54 I have not, but I have a feeling that we're going to see a clip of it right now. 4:57 That's true. 5:01 [? Music ?] 5:03 [The Real Developers World] 5:06 [? Music ?] 5:08 Nick, you know, you could save yourself a keystroke 5:13 if you typed in 60 instead of 1-0-0. 5:16 What if I wanted to type in 1:15? 5:20 Just do 75. You still save a keystroke. 5:24 Yeah, or you could just save yourself some hand movement and type in 77, 5:30 because no one cares about those extra 2 seconds. 5:33 I mean, she's right. I've been wasting hand movement my entire life. 5:44 [? Music ?] 5:48 [The Real Developers World] 5:57 Yeah, it's not very good. 6:02 No, that was actually terrible. 6:04 Yeah. What's next? 6:06 Next up are labels in input fields. 6:08 [Labels in Input Fields Aren't Such a Good Idea] [trhou.se/12RRer8] 6:11 And apparently, it's not such a good idea. 6:13 This is a blog post that's titled "Labels in Input Fields Aren't Such a Good Idea." 6:15 And basically, they're saying that you should actually use labels 6:18 as they were originally intended, so for example, 6:23 you shouldn't put a label inside of a form field, like so, 6:26 where you'll often see this design pattern where 6:32 the text is kind of grayed out, and it says something like 6:35 email address or whatever you're supposed to put into that form field, 6:38 and as soon as you click, it's gone. 6:42 The argument that's being made in this blog post is that 6:45 although you might be saving some space by removing that label, 6:48 you're actually making a more confusing interface, 6:52 so in this particular example, they have a reference URL, 6:55 and then they have 2 inputs, 6:59 and one says the Encyclopedia of Life, 7:02 and the next says Wikipedia. 7:04 You're supposed to put in a URL in the first spot and a URL in the second spot. 7:07 The problem is as soon as you click, 7:13 you lose what you were supposed to put in there, 7:15 and it can be easy to forget or get your URLs crossed 7:18 or not really know where you were supposed to put stuff. 7:22 It's a pretty good blog post. 7:27 It makes a really good insight into the user experience of forms, 7:30 and further down in the post they talk about the rise of the HTML5 placeholder, 7:37 which leaves room for further abuse of this particular design pattern. 7:43 A very interesting post for people that are interested 7:48 in the user experience or UX. 7:51 I guess the big takeaway to that is maybe use placeholders for examples 7:55 and that labels are really good for accessibility and screen readers and things like that. 7:58 Exactly. Good point. 8:02 Next up we have something called the JS Compatibility Table. 8:04 [JavaScript Function Compatibility Table] [compatibility.shwups-cms.ch/de/home/] 8:08 This is a really great table listing the compatibility of different 8:10 built-in JavaScript functions in a grid with different browsers across the top, 8:12 and you can see if we take a look at it here, 8:17 there's all of the different JavaScript functions available on the left, 8:19 and as you scroll down, you can keep a view of what browsers 8:23 do and don't support these different functions. 8:26 There is just a ton of different JavaScript functions that you can use, 8:30 and then you can even filter it by typing in something like "Geo," 8:34 and it will show you a list of all the different browsers 8:38 that support that, although that didn't exactly work for me right there. 8:41 But trust me that it actually does later. 8:46 I trust you, Jason. 8:48 You can configure all the different browsers that you want at the top of the screen, 8:50 which is great, and we'll have that in the show notes as well. 8:53 Pretty cool. 8:58 It's really useful if you're developing a JavaScript library or something. 9:00 Yes, definitely. 9:02 I thought tables were bad, but apparently tables are now good. 9:04 They're good for tabular data. 9:06 According to Jason. 9:08 All right, next up is Sassaparilla. [sass.fffunction.co] 9:10 I think I'm saying that right. 9:13 It sounds like a parade.>>Yeah, or a root beer or something. 9:15 It says, "Start your next web project faster with Sassaparilla." 9:19 Now, this is basically some Sass files that you can go ahead 9:26 and include in your website to start a project faster exactly as it implies. 9:31 Now, looking at their documentation on Git, 9:37 they say that this is in fact not a boilerplate or a theme. 9:41 I kind of disagree with that a little bit. 9:48 It's definitely not a theme, but it certainly is 9:51 some nice default styling to go ahead and get your website going, 9:54 which I feel like is exactly what a boilerplate is. 9:58 It's okay to call it that. 10:02 And the other thing that this does that's really nice is it 10:04 sets up your fonts great. 10:08 I mean, it says here, "A method to produce the perfect book." 10:11 They give this awesome example of typography, 10:17 and Sassaparilla is just great at that. 10:22 Nice. 10:27 I think the big draw here is that it lets you work in pixels in your Sass files, 10:29 but it gets translated to EMs when it's compiled. 10:32 Yes, which is super important. 10:36 Yeah, that's going to be great for your responsive sites. 10:39 Exactly. 10:41 I think that's all we've got for today. 10:43 If you want to get some background on what we talked about, check out our show notes 10:45 at YouTube.com/GoTreehouse. 10:47 [Treehouse YouTube Channel] [http://youtube.com/gotreehouse/] 10:50 And who are you on Twitter?>>I am @JSeifer. 10:52 I can't forget about that.>>I'm @NickRP. 10:54 And of course, if you'd like to see more videos like this one about web design, 10:56 web development, mobile development, or business, 10:59 be sure to check us out at TeamTreehouse.com. 11:02 See you next week, and thanks for watching. 11:05 [? Music ?] 11:07 [The Treehouse Show] 11:09

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

Sign up