Episode 32: SVGs, Dropdowns, and HTML5 Form Elements

I'm Nick Pettit. >>I'm Jason Seifer. 0:01 And you're watching The Treehouse Show, your weekly dose of Internets 0:03 where we talk about all things web design, web development, and more. 0:06 In this episode, we'll be talking about SVGs, dropdowns, 0:09 and HTML5 form elements. 0:13 Let's check it out. 0:16 [morse code beeping sound] 0:18 [The Treehouse Show] 0:21 First up is Spoiler Alert. [trhou.se/13T5kbU] 0:24 Spoiler alert: This is the best show on YouTube. >>Spoiler alert! 0:27 Basically this is a jQuery plugin that will blur elements on your page that you pick. 0:30 And if you go ahead and click on those blurred elements, 0:39 you can reveal them completely. 0:44 So this is something that works on text, it works on images, 0:46 and it's really easy to add in to your site. 0:51 It looks like there's compatibility currently on Chrome, Firefox, and Safari. 0:56 If we go ahead and head over to GitHub, you can download the code there. 1:02 To use it, you just add this Spoiler Alert to your JavaScript. 1:08 [Seifer] This would be really useful if you were creating a website 1:17 with Mad Libs in it, I think. >>Yeah, exactly. 1:20 You don't want to know too much. 1:23 You don't want to give too much away. >>You don't want to reveal it. 1:26 This would also be good on a video game review or movie review website 1:28 where you might have spoilers in the review and you don't want to reveal them. 1:35 I think it's a pretty cool way to do it. 1:39 Technologically, this uses CSS filters to blur the text and images, 1:42 which is why it doesn't quite work on Internet Explorer. 1:50 Oh. Spoiler alert: It doesn't work on Internet Explorer. >>Surprise. 1:53 That was actually a true statement. >>Yeah. All right. 1:56 I guess we can go ahead and move on. >>Let's move on. 1:59 Next up we have a project called svg.js. [trhou.se/ZzHL0V] 2:01 This is a lightweight SVG animation and manipulation library. 2:04 As you would expect, it supports a ton of different plugin options 2:10 and it is of course very easy to use. 2:14 If you click the see it in action button, 2:18 you can see a ton of different options that they have on the site here. 2:20 As I scroll down, you can see the different things that the svg.js plugin does. 2:23 It's a little bit hard to see as we're scrolling down here, 2:30 but if you go towards the bottom you can see the different animations that they do. 2:34 Isn't that just craziness--animating, moving, sizing, rotating, 2:37 and skewing these different SVGs. 2:41 There is a really great page for it over on GitHub. 2:44 The plugin page for it shows all the different options that it has. 2:49 As you would expect, it supports a ton of different options, 2:53 checks for SVG support, and there's really just way too much to go over on this show. 2:56 But if you want to check this out, we'll have a link to it in the show notes 3:02 on our YouTube channel at youtube.com/gotreehouse. 3:05 Check it out. 3:09 Next up is this really amazing blog post about Amazon's mega dropdown menu. 3:11 [trhou.se/13T5IN0] When you go to amazon.com, you go over to the left side 3:18 and they have this huge dropdown menu that basically breaks down 3:21 all the different sections of the site. 3:25 Prior to this blog post, I hadn't really thought a whole lot about this. 3:27 It just kind of worked, and I thought it was very straightforward 3:32 and just used HTML and CSS, possibly some JavaScript, 3:35 but it's actually much more complex than that. 3:40 In this blog post, they first say that you can scroll to the different elements 3:42 or different departments here, and it switches between each one pretty quickly. 3:49 If you look at your more traditional dropdown menu-- 3:56 this is a dropdown from Khan Academy and this one is from Bootstrap-- 4:00 you'll notice that there is a delay. 4:05 You need that delay there to make sure that when you scroll over to the next menu 4:08 it doesn't disappear. 4:15 As you can see in this example from Bootstrap, 4:18 you have this kind of maddening situation where there's no delay there 4:20 and the menu disappears before you can click on it. 4:25 So how are they doing this then on Amazon? 4:29 They're scrolling through here 4:32 and they're changing the menus very quickly with no delay. 4:34 And yet when you scroll over to the right side, there's no issue. 4:36 They are actually using some pretty complicated trigonometry and maths 4:42 to triangulate where your cursor is going to move next. 4:50 So if you're hovered over one of these items, it creates this little triangle 4:57 where your mouse can actually go to. 5:02 And so even if you hover over other departments in the list here, 5:05 it will not switch to them because it's anticipating 5:09 that you're actually going to go over to the menu on the right. 5:12 Pretty amazing post. 5:15 Definitely worth checking out and definitely worth possibly implementing on your own site 5:17 because the gentleman that wrote this article, Ben, 5:25 was nice enough to create a jQuery plugin that will actually do this for you. 5:30 So pretty amazing stuff, pretty deep web programming there. 5:37 Yeah. That's really awesome. 5:43 It's something that I never thought about either, 5:44 even having implemented dropdowns myself. 5:46 It can actually be a bit of a maddening process. >>Yeah. 5:48 They actually end up being really complicated for some reason. 5:51 So this is pretty amazing and provides really good usability. 5:54 Yeah. Definitely check that out. >>Cool. 5:58 Next up we have a website called How to Lose Weight (in the Browser). 6:00 [trhou.se/ZzHMSw] There is a wonderful illustration on this site. 6:06 What this site goes over is all of the different best practices that you have 6:09 for slimming down your web pages--things like minifying your CSS and JavaScripts, 6:14 where to place them in the browser for more speed-- 6:20 because, as I think we've gone over before on this show, 6:23 the speed of your web pages is very important 6:26 from a user experience point of view. 6:28 If your site is slow loading, your users might go ahead and disappear. 6:31 They have just an absolute ton of different best practices on the site. 6:36 It goes over what to do with your HTML, your CSS, JavaScript, jQuery, images, 6:41 and even on your server. 6:46 We've talked about most of these best practices here on the show before-- 6:48 things like minifying your CSS. 6:53 They even talk about minifying your HTML. 6:57 Browsers don't care if your HTML is nice-looking and well indented, 7:00 so there are tools that you can use to take all the line breaks out of your HTML 7:06 and slim that down because every single little bit helps 7:11 when you're going to display your web pages. 7:15 [Pettit] That's interesting because I've heard about minifying JavaScript and CSS. 7:18 I don't think I've heard of anybody minifying HTML. 7:22 So that makes sense. >>Yeah. 7:26 And they even point to a tool that you can use, 7:28 and it goes so far as even putting your stylesheets on the top 7:31 and then JavaScripts on the bottom. 7:35 There's actually way too much to go over here on the show, 7:37 but you can check this out at browserdiet.com. 7:40 That's very cool stuff. 7:44 Front end performance is one of the areas 7:46 where you can actually make the most performance gains 7:49 because you can have better hardware, you can certainly optimize your database schema 7:51 or SQL queries on the back end, but front end performance 7:57 ends up being a lot of the load time, 8:00 and it's the area where you can usually see the quickest wins in terms of performance. 8:03 Yeah. And it's a very deep rabbit hole. >>Yes, it is. 8:08 There's lots and lots of tips and best practices you can dig into there. 8:11 Nick, on that note, I feel like this show gets a little bit serious sometimes. 8:16 It does. >>Want to maybe take a little break and relax with Zac? >>I think so. 8:20 I'm starting to feel a little bit stressed out. Let's relax. 8:25 [monotone] Treehouse lullabies in spring. 8:31 [?tranquil music?] 8:42 Wow. I feel much better now, Jason. >>I didn't blink once. 9:14 I feel like we really needed that. >>Yeah. Nice little break. >>All right. Cool. 9:20 Next up is Preboot [trhou.se/13T5kbV] which is basically the precursor to Bootstrap, 9:26 which is the popular CSS or front end framework from Twitter. 9:33 [Seifer] That we've talked about maybe once or twice on this show. 9:38 [Pettit] Or a million times. [Seifer laughs] 9:40 [Pettit] Preboot is a collection of LESS mixins and variables 9:43 that allow you to write CSS a lot more effectively. 9:47 There's a lot to go over here in Preboot, 9:51 so I'm just going to go ahead and give you a small example here using colors. 9:54 They suggest that you can actually compute your colors 10:00 using these LESS mixins and variables. 10:04 For example, if you had a black color here, you could darken it 10:09 and then you could just use in your code something like black-90 or black-20, etc. 10:13 They also give an example where you could keep your brand colors consistent 10:22 by using these variables here where you say primary, success, warning 10:27 and then you use those in your code instead of using actual hexadecimal values 10:33 which can get copied and pasted everywhere 10:38 and then you could have slight inconsistencies, 10:42 and then if you want to change a color, it gets really crazy. 10:46 So with this you can go ahead and just change it all in one place. 10:49 Pretty cool stuff. Definitely worth checking out. 10:53 There's a lot to dig into here. 10:56 Yeah. I guess you would use this if you don't have the need for the full Bootstrap suite. 10:59 Yeah. >>Or even if you just want to learn and see how it works. 11:03 Yeah, yeah. No. It's definitely worth checking out if you're just starting to learn this stuff. 11:06 Next up the HTML5 Doctor is back in with a blog post on the HTML5 form input types 11:12 that you're going to be seeing a lot more lately. [trhou.se/ZzHL0W] 11:20 This is a pretty great list of all the different new input types that we have available. 11:23 There's search, email, URL, date ranges, date times, colors, 11:28 and then they also go through and show how each of these different input fields work. 11:33 Why are you going to want to use HTML5 inputs as opposed to just regular inputs 11:39 and then parsing that logic server side? 11:45 With HTML5 inputs you get certain helpers on different devices. 11:49 The Web is moving to phones and tablets and all that, 11:54 and it's something that you need to pay attention to. 11:58 So as an example that they have here, if you look at the email form input helper, 12:00 then if you use the email input, on the iPhone it will actually give you a different keyboard. 12:06 And the same thing is true for telephone numbers and URLs. 12:13 Here's a good example of the telephone input field on both iPhone and Android devices. 12:18 You get just a number keypad instead of the usual text input. 12:23 So this is a great blog post to go through and just kind of get a refresher, 12:29 get up to date about the new HTML5 form elements that we have access to. 12:33 That's very cool stuff. 12:37 I remember in years past, so many people have been waiting 12:39 for these HTML5 form elements to really come of age. 12:43 So it's exciting to see new developments like this. 12:46 Yeah, and actually be able to use them. >>Yeah, seriously. 12:50 Next up is this really cool icon set or this really cool icon font called Genericons. 12:53 [trhou.se/13T5IN1] We've talked about icon fonts on the show before. 13:00 Basically it's a vector icon font that you can embed as a web font, 13:07 and it will allow you to use all these various icons on your site. 13:14 The cool thing about using an icon font is that the file sizes are generally very small 13:20 and they're all vector-based, which means, according to this site, 13:26 you can use Genericons for instant HiDPI, to change icon colors on the fly, 13:29 or even with CSS effects such as drop shadows or gradients. 13:35 I was really hoping it would rhyme for the third verse there. [Seifer laughs] 13:40 Maybe we can get Zac to come up with a rhyme for that. >>But that's okay. 13:43 On that note, I'd give this site 4 out of 5 stars for not actually rhyming there. 13:47 [laughs] >>It's pretty cool. 13:53 You have all of your typical icons here like Facebook and Twitter, GitHub, 13:56 LinkedIn, Pinterest. 14:02 So overall, I'd say this is very pinteresting. >>I see what you did there. 14:05 It's a word I'm trying to make happen. >>Nice. Pinteresting. Got it. >>Pinteresting. 14:11 Next up we have a site called DevRef. [trhou.se/ZzHMSz] 14:16 This is a small collection of utilities that you might find useful 14:19 while you're developing your different websites. 14:22 This has things like a Base64 decoder, URL decoders and encoders, 14:25 decimal and hexadecimal and binary converters, a header analyzer-- 14:31 just kind of really small but useful tools that you might need when developing a website. 14:37 An example is a tag stripper. 14:43 If you have an HTML tag in here, strong-hello, you can hit Submit 14:46 and then it just gives you the text without the different tags. 14:54 So a bunch of different utilities that you can try out. 14:57 That's over at devref.com. 14:59 That's about all I've got for this week. Who are you on Twitter, Nick? 15:03 I am @nickrp. >>And I am @jseifer. 15:07 If you like this show, go ahead and check out our YouTube channel 15:10 at youtube.com/gotreehouse. 15:14 Over there you'll find show notes and links and more. 15:16 And of course if you'd like to see more videos like this one, 15:19 be sure to check us out at teamtreehouse.com. 15:23 Thanks so much for watching, and we'll see you next week. 15:26 Pinteresting. 15:29 [morse code beeping sound] [The Treehouse Show] 15:31 [beeping continues] 15:33

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

Sign up