Episode 141: TinySort, Push Notifications, Responsive Tables

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of Internets, 0:02 where we talk about all things Web design, Web development, and more. 0:05 >> In this episode, we'll be talking about Flexbox [SOUND], 0:08 push notifications [SOUND], responsive tables, and more. 0:10 >> Let's check it out. 0:13 [MUSIC] 0:14 >> First up, we have a small piece of JavaScript called TinySort. 0:20 TinySort is a plugin that allows you to sort html elements 0:24 by any text or attribute value. 0:29 I know that, because it says it on the webpage right here at the top. 0:32 Now, why in the world would this be useful? 0:36 Well, let's say you have a bunch of different nodes. 0:38 I'm gonna just jump to the example so we can see it here. 0:40 Here is a list of list items and we can sort that. 0:43 And it will sort in alphabetical order by the first item in the list. 0:48 The first character here. 0:55 So, you just initialize that by calling tinysort, and then give it a selector. 0:57 Now, there are a ton of different options for this. 1:01 You can sort by different nodes inside here, so, here we have a span with 1:03 the same information, hit Sort, and once again, it goes in alphabetical order. 1:09 This also works on numbers as we can see right here. 1:15 I'll just hit this little Sort button, and wow, 1:17 these numbers are sorted right in the list. 1:19 Now this isn't limited to just list items. 1:22 They show here, oh, hey, maybe I want to sort a table. 1:24 Go ahead and do that. 1:29 Wait that was the wrong item. 1:31 Let me find the actual table. 1:32 Here we go, sorting tables. 1:34 With just this little amount of code, 1:36 you can get a sortable table using only one single plugin. 1:38 So, really to use, just go ahead and 1:42 initialize it on your page, then call tinysort with the list of nodes. 1:43 We'll have a link to this in the show notes which you can get to 1:48 right below this video. 1:50 >> Very cool stuff. 1:52 Well, next up is a really cool tool called Flexbox Playground. 1:53 And you can adjust all sorts of different settings that basically determine 1:58 which properties are going to be applied to this group of elements. 2:05 Now, Flexbox is a little bit challenging to understand, and 2:10 so that's why this tool is so great. 2:15 It's basically an educational tool. 2:17 You can use it to figure out what these different properties and 2:19 values are going to do to each element in a Flexbox container. 2:23 So first, you can adjust the width of each one of these children, so that's helpful. 2:29 You can add children if you want to or delete them. 2:35 And you can also adjust individual properties on each one 2:39 of these child elements. 2:45 But first, let's do the Parent Flex Properties, the flex container properties. 2:46 So I could change, for example, the flex direction. 2:51 So right now, it is row, so each element is right next to one another horizontally. 2:55 But I could also do row reverse. 3:00 And now, they will be reversed. 3:02 So you can see the ordering is right there, four, three, two, one. 3:05 And we can go back. 3:09 You can also do these in columns, or column reverse, so 3:10 you could so something like that. 3:13 And with just this one value, you can change how all of these elements 3:15 are laid out, so that sort of demonstrates some of the power of Flexbox right there. 3:21 You can also justify the content by using the justify content property. 3:26 And right now, it's at flex-start. 3:33 But you can move it to the end of this container, and 3:35 of course, that will change based on the flex direction. 3:39 So that's sort of Neat to note there. 3:44 You can also center this or you can space them evenly, so that's sorta neat as well. 3:47 And then finally, 3:53 I'll just show you how you can adjust some of the properties on the child elements. 3:54 So, for example, let's say we had number one or two here, or 3:59 something like that, and as I change that order value, I said, well, 4:04 I want this to be one, and now one is at the end because it comes after zero here. 4:08 So I could maybe change three to be like two or something like that, and 4:16 now that will be at the end, so I think you get the idea. 4:21 But anyway, this is a really wonderful tool to 4:24 help you get familiar with how FlexBox works. 4:29 Very nice. 4:34 Next up, we have a very long tutorial on the HTML 5 Rocks Blog. 4:35 And this is talking about push notifications on the open web. 4:40 Now, if you are trying to do development and 4:45 send push notifications in Chrome versions 42 and up. 4:47 There is a new push notification API that you can use. 4:51 Now there are a lot of things that you need to do in order to start using 4:56 this push API, and it starts by using service workers. 5:00 Now, this is a really long article, so 5:04 I'm just gonna touch on some of the finer points of this. 5:06 There are a lot of things that you need to check for 5:09 when you are implementing a service worker and also implementing push notifications. 5:11 Not all of the devices and browser versions that are out there 5:17 support push notifications, especially in Chrome. 5:20 Again, this article is only talking about Chrome, so 5:23 you need to check a whole bunch of things. 5:27 And they tell you to default to having 5:29 enabled push notifications off because the odds are pretty good that the browser 5:32 is not going to support service workers and push notifications at this point. 5:37 So here's a little flow chart saying, hey, is push supported and 5:41 do we already have a push subscription? 5:45 If yes, then okay, we can enable these push notifications. 5:48 If not, we don't need services workers working in the background and 5:51 doing a whole bunch of stuff. 5:54 So then, they show you, okay. 5:56 Here is the code that we need to check all of those different things. 5:58 And this is very thorough, it says, okay. 6:02 Do we have all this supported? 6:05 All right. Let's go ahead and 6:06 register a service worker. 6:07 And then, here is going to update the text saying, all right, 6:09 we've got that subscribed. 6:13 Now, let's go ahead and 6:14 disable the push notifications if the user doesn't want that. 6:15 So the other interesting part of this is that you need to make 6:19 a project on the Google developer console. 6:22 This uses the Google Cloud messaging API to handle sending push notifications. 6:26 Once you do that, you get a project and 6:31 you c, also can see some lit, little details about your API. 6:34 So okay, go, you got all that, write a web app manifest, and then, you need to 6:40 actually let the user say, hey, I do want to subscribe to push messaging. 6:44 Then finally, you can send a push message once you have all that. 6:48 And there's a nice little animated gif here that shows you what your push 6:54 notification might look like. 6:57 So these are just the basics of sending push notifications. 7:00 It gets to be a little bit more in-depth in the article, and 7:04 there is certain browser support that you need to take into account. 7:06 These push notifications are gonna work on Google Chrome 42 and 7:09 up on the desktop and on Android. 7:13 Now, on the desktop, the notifications are only gonna show up if Chrome is open. 7:16 But on Android, notifications will always show up 7:20 because the user is subscribed to a push messaging service. 7:23 Anyway, for more information check out the article in the show notes. 7:26 >> It's definitely pretty interesting how involved that is, 7:28 and how thin the browser support is right now. 7:34 So. >> Yeah. 7:36 >> I almost feel that's something that maybe you'd wanna hold off on for 7:37 a little while. 7:41 You know, if you really want to do it. 7:42 >> It depends on the app, because Safari supports push notifications and 7:44 they have their own separate API, and the reason it's so 7:46 involved is because it requires a server side component to it. 7:49 >> Right. >> So, 7:53 this is push notifications on the web on android. 7:53 Basically, if you want that push notification in the notification center to 7:58 come down. 8:01 >> Either way, very cool stuff. 8:01 Next up, we have a blog post on the living social blog 8:03 about responsive tables in pure CSS. 8:08 Now there have been a lot of blog posts about this historically over the past 8:11 five or so years where responsive design has been in existence because 8:16 tables notoriously don't look good on mobile devices. 8:20 It's really hard to make a large table 8:26 with a lot of data in it compressed down to a mobile device like this. 8:28 So a lot of those solutions have involved JavaScript. 8:33 But one of the requirements for LivingSocial is that they wanted to do 8:38 this without using any kind of JavaScripts because there are all sorts of 8:41 plugins that do that and they link to some of them there. 8:46 And, they also wanted to have localized text, so 8:49 one suggestion that Chris Coyer made was to store the texts in style sheets, 8:55 which Isn't too bad, but also, 9:01 not doing that as nice because it keeps the content in the views. 9:04 So keeps it in the HTML where it belongs. 9:08 And then, they also didn't want to just adjust the font size to eight pixels and 9:11 just cram all the text into this tiny table. 9:16 So, what do you do? 9:20 Well, they had this pretty clever solution and 9:22 it involves the pseudo elements before and after. 9:24 Now, you can use these elements to match the first and 9:29 last children of selected elements, but 9:33 this is just typically used for adding aesthetic elements. 9:37 So adding an arrow on a tool tip or something like that. 9:41 However, they used this technique instead to apply data labels. 9:45 So in their HTML here, 9:51 they have these attributes that they're calling a data label, and then, they 9:53 use these values here to sort of label each part of their table. 9:58 And then, in their CSS, they can use those before and after pseudo 10:04 elements to apply the content property. 10:08 Now using the content property, they then plugin the value attribute and 10:13 they grab that data label value, so 10:18 that then gets plugged into the before and after pseudo-elements. 10:22 So, where does that go? 10:25 Well, it ends up in tables that look like this. 10:26 You could have a table that goes across, or, on a mobile device, 10:29 you can have something that ends up looking more like this. 10:34 So you can have the label on the left side, and then the data on the right side. 10:36 So basically, 10:43 this technique makes it really easy to shuffle around labels and data. 10:44 And they have this whole example on CodePen. 10:48 So, you can head over to CodePen and check out how they laid out their HTML and 10:52 how they did their CSS, and it's actually pretty tidy. 10:57 There's not a whole lot of CSS here. 11:01 But you can see right here how they used the before pseudo class 11:04 to apply the content property and the data label value, just like that. 11:09 Anyway, really cool stuff. 11:15 So, definitely, be sure to check that one out. 11:16 >> Yeah. >> [MUSIC] 11:19 That is all we have time for this week. 11:20 I am @nickrp on Twitter. 11:22 >> And I am @jseifer. 11:25 For more information on anything we talked about, go ahead and 11:27 check out the show notes right below this video. 11:29 Thanks so much for watching, and we'll see you next week. 11:31 [MUSIC] 11:33

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

Sign up