Episode 26: jQuery Releases, Favicons and CSS Optimization

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 of The Treehouse Show, we'll be talking about jQuery releases, 0:09 favicons, and CSS optimization. 0:13 Let's check it out. 0:15 [Morse code beeping sound] 0:18 [The Treehouse Show] 0:22 First up is easing functions. [trhou.se/TspRkb] 0:23 It's this really cool website at easings.net 0:27 where you can learn about all the different types of easing functions 0:30 that you can apply to animations. 0:34 Now, what is an easing function? 0:37 It's a little bit complicated to think about if you've never encountered them before, 0:39 but basically you use them with CSS animations and transitions, 0:46 and you can also use them in JavaScript as well. 0:51 It basically determines how fast an animation plays over time, 0:54 not necessarily quantifying time itself. 0:59 So the animation could play over 4 seconds or 10 minutes, 1:03 and it determines how fast the animation occurs. 1:07 This is pretty complicated, which is why there is this whole website for it. 1:12 So if you want to, say, create an animation that is easeinCubic, 1:16 which kind of increases in speed over time, 1:22 you can go ahead and click on this and it will show you how to implement that in JavaScript, 1:26 Sass, as well as CSS. 1:33 So it would look something like this, which is pretty complicated 1:36 to just go ahead and do in pure numbers, which is why it's nice to have this little graph here. 1:42 Pretty nifty. 1:46 All of these different possible easing functions 1:48 would make great Twitter screen names, by the way, or BT dubs, as the kids say. 1:51 I will consider that. Thanks, Jason. >>Yeah, no problem. 1:57 Next up we have some new releases of jQuery. 1:59 jQuery 1.9 and 2.0 have recently come out. [trhou.se/Y1qSxg] 2:02 jQuery 1.9 is the next evolution of jQuery. 2:06 This includes support for older versions of Internet Explorer 6, 7, and 8. 2:09 jQuery 2.0 is dropping support for those older versions of IE 2:13 in order to have a smaller, more modular code base. 2:17 But kind of the big news about this jQuery release 2:20 is the jQuery Migrate plugin which can be used with either jQuery 1.9 or 2.0 2:23 to detect deprecated and removed features. 2:30 So if you do plan on upgrading a jQuery 1.8 site to 1.9 or 2.0, 2:33 make sure you test out with this Migrate plugin on your site locally 2:38 and then just get an idea of what features you may be using. 2:42 This is useful because even if you're using a plugin that uses these features, it will tell you. 2:46 So that's something that you'll have to watch out for on your own sites. 2:51 Wow. That's pretty amazing. 2:54 That's exactly what I was going to ask: if it can look at plugins 2:55 and also tell you if they're still compatible. 2:59 Yeah, because you can only control the code that you write. >>That's right. 3:01 That's really amazing because it makes upgrading so easy. 3:04 There's really no excuse, unless you are really using those deprecated features. 3:07 Yeah, exactly. >>Right. 3:11 I could probably come up with a few good excuses to not upgrade. 3:13 Yeah. Laziness, procrastination-- >>Yeah. Don't feel like it. >>Yeah. 3:15 Those are all good reasons for anything, really. 3:19 Next up we're going to talk about Maki icons [pronounces it Mak-ee] 3:23 or [pronounces it Mak-eye] icons. [trhou.se/TspOF1] I'm not really sure how to-- 3:27 Mah-key? >>Maki. I'm not really sure how to pronounce it. 3:29 This is a really nice icon set for pixel-perfect web cartography. 3:32 Let's say you're making the next Foursquare or some sort of cool mapping application-- 3:38 [Seifer] Call it Fivesquare. >>[Pettit] Yeah, Fivesquare. That's genius. 3:44 [Seifer] Or RecFiveTangle. >>[Pettit] That's right. 3:47 And you want to go ahead and drop in these really nice little bits of iconography. 3:49 That's exactly what this icon set is for. 3:56 You can drop in gas stations or bus stops or theaters or coffee. >>[Seifer] Or a minefield. 3:59 [Pettit] Exactly. That's good to know too. 4:06 And it comes in 3 different sizes: 24 pixels, 18, and 12. 4:08 And you'll notice as we scale down, the look of the iconography actually changes slightly. 4:13 It doesn't just scale down the pixel sizes; it actually changes what the icon looks like, 4:19 which is important because at smaller sizes, icons don't necessarily scale smoothly. 4:24 You want to really get into pixel perfection when you're doing that type of thing. 4:30 This is of course open source, available on GitHub, 4:35 and you should definitely check it out if you're planning on making applications 4:40 that deal with mapping. 4:45 Do you have any idea for a new mapping application, Nick? >>I do. 4:46 It's called Unexpected Coffee. 4:49 You basically go to places that are not coffee shops 4:51 and try to find really, really good coffee there. 4:54 I'm talking about fast food restaurants, public libraries, 4:57 office buildings that you're not authorized to be in. 5:02 So basically, a user would submit a random location to your app, Unexpected Coffee. 5:06 Right and then you'd go there and you'd be like, "Oh my gosh, this is the best coffee ever." 5:11 "Why don't they have this at Starbucks?" 5:14 I feel like that could be a really good opportunity for pranks. 5:17 I would definitely vote up a friend's house. >>Yeah. Cool. That one's for free. 5:20 Yeah. Look out for that one, Jarrett. 5:25 Next up we have a project called Parsley.js. [trhou.se/Y1qSxh] 5:27 This is JavaScript form validation. 5:30 It's powerful, UX aware, and dead simple. 5:32 This makes you not have to write JavaScript anymore to validate your forms on the front end. 5:36 We can see some examples here. 5:41 If you have a demo, here's a Name field, 5:43 and all you have to do is put in a couple of attributes to say that something is, 5:46 for example, required. 5:50 When you want to trigger these validations, it could be on the change event. 5:52 As an example on the Email field, say a@ something. 5:57 Hey, that's not valid. 6:00 It says, "Hey, this should be a valid email." 6:02 The nice thing about Parsley.js is it has a ton of different options 6:04 and it is also super easy to install. 6:10 You just include the Parsley JavaScript on your site 6:12 and then add the different data attributes to it and you are good to go. 6:16 There is a ton of different validations that it has on its site, 6:20 and you can find a link to that in our show notes at youtube.com/gotreehouse. 6:23 I really like how you can include Parsley in your website. 6:28 I feel like really every JavaScript framework and stuff should be named after foods 6:32 so it's kind of just like cooking. 6:38 You throw in some parsley, throw in some tomatoes or something. >>Yeah. 6:40 Get a little website ratatouille going. >>There's a 2013 trend for you. 6:44 Next up we're going to talk about this really cool blog post from Jonathan T. Neal. 6:48 called Understanding the Favicon or [pronounces it fave icon], if you will. 6:53 [trhou.se/VPljDx] 6:58 Much like Jonathan, I found the same thing when I was reading his article. 7:00 He said, "When I decided to dive in a little deeper, things got interesting." 7:04 "I realized how little I knew about favorite icons, touch icons, and tile icons. 7:09 One of the things I learned by reading this article 7:16 is that these were actually introduced in 1999 for Internet Explorer. 7:19 I feel a little silly not having known that, but-- 7:24 Internet Explorer has been driving the Web forward since 1999. >>Evidently. 7:27 So that's why they're ICO files, I guess. 7:32 It's a relic of the Windows desktop. 7:35 I also learned that the type attribute is basically useless, 7:39 and I also learned that if you want to implement a high DPI icon 7:44 it's actually a little messy if you want to go ahead and support all of the different browsers 7:50 using an ICO file and also using a PNG file. 7:56 The code for it is down here at the bottom, 8:01 and of course there's other little caveats that are covered in the article. 8:04 But really, really interesting read, 8:09 and I think it's something that is definitely worth learning about 8:11 because there's just such a huge multitude of devices, 8:14 and of course there are now also high resolution displays that you should be concerned with. 8:17 Pretty nifty. 8:23 Next up we have a project called Basket.js. [trhou.se/Y1qTBp] 8:24 This isn't completely ready for full time. 8:28 This is a project by Addy Osmani. 8:30 It's a beta, and what it does is if you've used a CDN before 8:32 to kind of cache JavaScript or get a JavaScript file to load quicker, 8:37 what Basket.js does is it uses local storage in a browser 8:41 to cache external JavaScripts inside of the browser using the HTML5 local storage. 8:47 This way if you go to a site where a script is used that is already in local storage, 8:55 instead of going out to fetch it, it will just pull it up inside of your browser 9:01 and load that much quicker. 9:05 If the script does not exist inside of local storage, it will go out and fetch that 9:07 using an AJAX request, save it to local storage, and load it up on the page. 9:12 This winds up being pretty quick. 9:17 It's a very, very simple API. 9:19 It just has a few different methods: basket.require, get, remove, and clear. 9:22 So check this out. 9:27 Like I said, it's still in beta, not quite ready for prime time 9:29 but a very interesting concept, and it kind of shows where we're going to be going 9:32 with HTML5 and local storage. 9:36 Pretty cool. 9:39 Next up is this really cool article about using the HTML title attribute. [trhou.se/TspOF4] 9:40 Similar to the favicon article, this has a lot of really interesting things 9:47 that I never really thought much about, just kind of used the title attribute 9:52 and didn't really think much of it. 9:57 Basically, the title attribute is only useful to people that are using a mouse, 9:59 which, as it turns out, is actually less and less people in recent times 10:05 because there's mobile users, tablet users, users that use assistive devices 10:11 and then a lot of users that just use the keyboard 10:17 and kind of navigate the Web that way. 10:20 The title attribute is only useful if you actually hover over something 10:22 that has a title attribute on it. 10:28 So you'd go ahead and hover your mouse over it 10:30 and you'd see some sort of text appear. 10:33 So for example, if you're a fan of the comic xkcd, 10:36 you can go ahead and hover over each comic 10:40 and some bit of ancillary text will come up. 10:43 This is interesting to me because everyone talks about the hover pseudo-class in CSS 10:49 not being useful for assistive devices or being useful for tablet or mobile users, 10:55 but the same is true for the title attribute. 11:02 So in this article they list a couple of places where it actually is useful, 11:05 so labeling frame or iframe elements or providing a programmatically associated label 11:10 for a control in situations where a visible text label would be redundant, 11:16 so useful in forms. 11:20 And then there's a much longer list of places where it's actually not useful 11:23 or not totally supported. 11:28 Pretty cool article, well worth reading for anyone that is interested in HTML, 11:30 which is-- >>Everybody. >>Basically everybody. 11:36 The entire world is interested in HTML-- >>You should be. >>even if they don't know it. 11:39 Next up, kind of to go along with that--actually, not really-- 11:43 there's a project called mincss or [pronounces it minces]--not really sure how to pronounce it. 11:46 [trhou.se/Y1qSxk] 11:51 This "clears the junk out of your CSS." 11:53 You guys couldn't see that, but I was doing air quotes when I said that. 11:55 What this does is it's a tool. 11:58 You give it a URL or a couple URLs. 12:00 It downloads all of the CSS and then it checks every single selector in your CSS 12:03 to find out which ones aren't used. 12:10 From there you can go through and delete these selectors from your CSS files 12:12 and trim down your pages. 12:17 On an example page that this author tried, he went from 82 kilobytes down to 7 kilobytes. 12:20 This is quite a bit of savings. 12:26 You probably don't want to just use this on a single page on your site 12:28 and then just delete all of your CSS. 12:33 Use it, compare the output on a bunch of different pages, 12:36 and see where you really can slim down all your different CSS. 12:39 I'm really appreciating this trend of food names. 12:43 You can use minces, mince your parsley. >>Yeah, there you go. 12:49 Yeah. Maybe throw in chef. 12:53 There's all sorts of terms coming up. I'm telling you, it's a new trend. 12:56 Yeah. The web design salad. That's what we're going to call it. >>That's right. 13:00 Web design salad. >>I think that about wraps it up for today. 13:03 If you want to catch us on Twitter, I am jseifer. >>I am @nickrp. 13:06 Thanks so much for watching this episode of The Treehouse Show. 13:10 For show notes and more, check out our YouTube channel at youtube.com/gotreehouse. 13:12 And of course if you'd like to see more videos like this one 13:17 and learn more about web design, web development, mobile development, 13:20 business and more, be sure to check us out at teamtreehouse.com. 13:24 See you next week. 13:29 [Morse code beeping sound] [The Treehouse Show] 13:30 [beeping continues] 13:33

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

Sign up