Episode 142: Vendor Prefixes, Media Queries, JavaScript

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:00 >> And you're watching the Treehouse Show, your weekly dose of 0:01 Internet where we talk about all things web design, web development, and more. 0:04 >> In this episode, 0:08 we'll be talking about vendor prefixes, media queries, JavaScript, and more. 0:08 >> Let's check it out. 0:13 [MUSIC] 0:14 Before we get started, 0:20 we wanted to let you know about a brand new Treehouse course all about MailChimp. 0:21 >> Now when we say MailChimp, 0:25 we are talking about the amazing email marketing tool and not a boy ape. 0:27 Anyways, this free course on Treehouse will teach you how to 0:31 use the MailChimp API, and I just wanna make it clear, 0:34 you do not have to be a TreeHouse member to take this course. 0:37 You can just head on over to Treehouse from the link in the show notes and 0:40 immediately jump right in. 0:44 >> And of course, the MailChimp API allows you to connect MailChimp to hundreds of 0:45 third party add-ons and plug-ins and other useful services. 0:50 You can add newsletter sign-ups to your website, 0:54 sync email activity with your database, integrate MailChimp and Shopify, 0:56 and a whole bunch of other stuff with the MailChimp API. 1:00 >> So anyways, go ahead and take this free course now, over on Treehouse. 1:04 And again, make sure to check out the link in the show notes. 1:09 >> First up is this really cool tool called autoprefixer. 1:12 >> Which automatically sets the menu price, if you're eating the entire menu. 1:17 >> That is not correct. 1:21 Actually, it parces your CSS and adds vendor prefixes to rules based on CanIUse, 1:23 which is of course the popular service for determining browser compatibility. 1:31 >> Which we have covered on this show before. 1:37 >> If we scroll down here, you can see Autoprefixer here in action, 1:39 actually it's just an example of how it works. 1:45 But basically, you can write your CSS just as you normally would. 1:47 So let's say you're using something more advanced like Flexbox, 1:50 that may not necessarily be supported in every browser just yet. 1:55 Well, it will automatically prefix it for 2:02 you so here's an example of what that looks like. 2:04 Its added the webkit prefixes for the older and 2:08 newer syntaxes, as well as the Microsoft syntax, and 2:13 then it just has the final W3C recommendation down there at the bottom. 2:18 So you can write in pure CSS as you would to the W3C specs, 2:24 and then autoprefixer will produce the code for older browsers. 2:30 So it works just like that. 2:35 Also, if you have prefixes that are no longer needed, so 2:38 let's say, maybe you're using some other plug-in or something and it's added things 2:43 that are not necessary, or you're just not able to break the habit of say writing 2:47 webkit border radius, and then a proper border radius right after that. 2:52 Autoprefixer will actually remove that because a prefix for 2:57 border radius based on browser popularity is really no longer needed. 3:02 Theres lots of other cool features in autoprefixer. 3:08 So definitely be sure to check this one out. 3:12 >> Very cool. 3:16 Next up we have a project called Clusterize,js. 3:16 This takes all the letter i's on the page and puts them into one dumb object. 3:19 No, I'm just kidding, it doesn't cluster i's. 3:24 >> That didn't sound quite right. 3:27 >> Nope. 3:29 This is a tiny plug-in to display large datasets easily. 3:30 So here, check this out. 3:36 They have a nice little thing right on the page here that shows you what's going on. 3:37 We fill this table with 5,000 rows. 3:41 I scroll and it's pretty laggy. 3:44 What happens, let's go ahead and use clusterize, right? 3:48 We initialize it, now we scroll this, and look at how smooth it is. 3:51 Now there are 100,000 rows in this table, and it scrolls just as smoothly. 3:56 Now how does this work? 4:03 So this is really interesting. 4:05 What this does is it doesn't pollute the DOM with tags, 4:06 it splits a list into clusters. 4:10 Then shows element for the scroll position, and adds rows to the top and 4:13 bottom, to emulate a full height of the table. 4:17 So it's kinda tricking the browser into displaying only a little bit at a time. 4:21 But still, it does a great job and is very, very quick. 4:26 So look at that, it supports more than tables. 4:30 We have an ordered list right here. 4:33 All of these, that has 50,000 rows. 4:34 I scrolled a little bit too far here. 4:36 Here's an unordered list and also different DIV's. 4:39 So they can it can be used with basically any tag that you want. 4:43 So you can install clusterize with Bower, include it on your page, 4:47 and then give it the data, and call a new clusterize. 4:52 As you'd expect, it supports different options for initialization, tags, 4:56 how many rows are in a block, and how many blocks are in a cluster. 5:00 So really great plug-in, 5:04 especially if you have large datasets that you need to display on your page. 5:05 Go ahead and check that out. 5:09 We'll have a link in the show notes right below this video. 5:10 >> Next up on the Sass Break Blog, there is an article titled 5:13 Making our Media Query Mixins More Flexible. 5:18 And there's a great picture here demonstrating 5:23 how you need to code these in a flexible manner. 5:25 >> I think if I were to do that, I would Sass Break my back. 5:28 >> Probably. 5:32 [LAUGH] So here is a mixin demonstrating how 5:33 many queries are sometimes written and then how that mixin is used. 5:39 So you might have something like this, where you have a mixin called breakpoint, 5:45 and you're passing in a variable point, and you say something like, 5:50 well if it's small, then apply this media query. 5:54 And if it's medium, do this. 5:59 If it's large, do this. 6:01 And of course, they're using ems here. 6:03 Well, that may not necessarily be the best way to do it. 6:05 You want to have something that may be a little bit more flexible than that, 6:10 rather than just predefining these ems. 6:14 Because the problem is that it's hard to figure out 6:18 what ems are representing anyway. 6:22 You have to sort of do the calculation on your own beforehand, and it's difficult 6:25 because we're a little bit more used to dealing with things in pixels. 6:29 We're always given the width of the browser in pixels, for 6:33 example, with lots of developer tools. 6:37 So if we scroll down here, the article does talk about that a little bit. 6:40 And there's also some nice links 6:46 to why you would want to use ems over pixels in your media queries. 6:49 Basically, the reasoning is that when you zoom in on the browser, 6:53 it will adjust accordingly. 6:59 So if you're maybe leaned back in your chair a little bit, or 7:01 if you need the browser size to be larger so 7:05 you can read it more easily, using ems in your media queries will make the browser 7:08 adjust a little bit more nicely, whereas pixels are fixed units. 7:12 So the solution here, instead of using those fixed, 7:17 small, medium, and large mixins that are named, or 7:22 media queries that are named, you can actually use a mixin that looks like this. 7:26 And you can do the calculation using pixels, 7:32 and the base font size, and then get the em results. 7:37 So instead, you could say something like, well I want this 7:42 to happen if the browser is 600 pixels or 7:47 what have you, and then it automatically takes that in and 7:52 does the calculation for you, and you get something that looks like this. 7:55 So that's a much more flexible way to handle SASS 8:00 mixin media queries, and I think 8:04 it's a much better way of approaching it than using small, medium, and large. 8:09 >> Me too. 8:14 Next up we have a re-introduction to JavaScript 8:16 over on the Mozilla Development Network. 8:19 Now, why in the world do you want a re-introduction to JavaScript? 8:22 Well let's go ahead and 8:25 re-write a JavaScript tutorial based on modern JavaScript. 8:26 So this is a really great article. 8:31 It starts off with a little bit of history of JavaScript, and when I say a little 8:32 bit, I mean there's only five paragraphs and one of them is a single sentence. 8:35 So that catches you up to speed with the previous versions of JavaScript. 8:40 And what's nice about this tutorial is it goes over the built in types, 8:44 including symbols, which are new in ECMAScript 6. 8:48 So this is going to be a very modern JavaScript tutorial and introduction. 8:52 So what I really liked about this, and 8:58 we're not gonna go into the whole thing because this is a very, very long article. 9:00 But what I really liked about this was how they talk about functions and 9:04 then lead up to using your own objects and classes. 9:08 So they talk about using a Person object or a Person class, 9:13 and there's more depth if you wanna go into object-oriented JavaScript. 9:19 But they show you how you would do the same thing using just functions to create 9:22 a Person, and then this builds up all the way into a class and 9:27 object-oriented based function for creating a Person. 9:33 So anyway this is a great introduction. 9:38 If you're familiar with JavaScript already, you can even get a little bit out 9:41 of this, just kind of have a refresher on maybe some of the finer points. 9:45 And if you know anybody who is learning JavaScript, send them to this page, 9:48 just for a general introduction of what modern JavaScript is like. 9:52 >> Next up is this neat tool that basically will take 9:56 your confirmation boxes and just make them a little bit nicer. 10:00 It's called medium-style-confirmed and it's available on GitHub and 10:04 right here, we have some examples of how it works. 10:10 So, I can just click on this simple example, where I'm presented with this 10:14 confirmation box that says, delete?, and I can either choose OK or CANCEL. 10:20 I'll say CANCEL and it will just close. 10:25 However, if I hit OK, I'll be presented with a JavaScript alert 10:27 in the browser that says, the post has been deleted. 10:32 Now this is useful because when you present confirmation boxes, 10:35 typically just using the Nella JavaScript, it's often hard 10:41 to phrase the confirmations the way that you might want to phrase them. 10:46 It's hard to say 10:50 what you're doing or what you're deleting- >> Are you not sure you don't wanna 10:53 delete this? 10:56 >> Are you gonna cancel the deletion, or- >> Do you have any regrets 10:57 about cancelling this deletion? 11:01 Yes or no. 11:03 >> It's very confusing and 11:03 you end up with situations where there's a lot of double negatives and 11:05 the user isn't necessarily sure what it is, OK or CANCEL is actually going to do. 11:08 So this kind of prettifies that whole situation and makes it look a lot nicer, 11:14 and you can even do it with a subtitle to add some further clarification. 11:20 Saying, delete, are you sure you want to delete this post? 11:26 And you can say OK or CANCEL. 11:29 So of course, you could do this for more than just deletions. 11:30 You could do this for any type of action that you might want, and 11:33 you can customize the text however you want. 11:37 But really, it just simplifies those confirmations a whole lot and 11:39 makes it much better for say, a copywriter on your team. 11:44 So, to use it, you can install it via Bower, or 11:50 you can download the media-style-confirmation-style.css file. 11:54 Wow, that was difficult to say. 12:02 And you have to get the associated JavaScript file, as well. 12:04 And then you just include it into your HTML as you normally would. 12:07 And then you can just call the code mscConfirm() 12:12 function as you see in these demos. 12:17 So pretty easy to use, and 12:20 solves a typically somewhat difficult problem, really nicely. 12:22 I really like this. 12:27 >> So let me just confirm, is that all we have time for this week. 12:28 >> I think it is. 12:31 I am @nickrpm twitter. 12:32 >> And I am @jseifer. 12:34 For more information on anything we've talked about, 12:35 check out the show notes right below this video. 12:37 Thanks everybody for watching, and well see you next week. 12:39 [MUSIC] 12:41

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

Sign up