Episode 126: Font Families, Hamburger Menus, Flux

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of 0:02 internets where we talk about all things web design, web development, and more. 0:04 >> In this episode we'll be talking about font families, the hamburger menu, 0:08 Flux, and more. 0:12 >> Let's check it out. 0:14 [MUSIC] 0:15 First up is this really cool site called font family reunion. 0:20 Now, whenever you. 0:26 >> Get it? 0:27 Family Reunion? 0:28 >> But font family, which is a CSS property. 0:29 >> Yeah, like if it were Wheel of Fortune, that would be like the before and after. 0:31 >> It's like a play on words. 0:35 I wish there was a name for that. 0:38 >> Yeah, I don't know. 0:40 This is font family reunion. 0:42 It says compatibility tables for default local fonts, 0:44 so, basically what this tells you is, if you're using the font family property, 0:50 and you just give it, well, in this case, nothing. 0:56 This is what's going to happen. 1:00 It's going to use the Operating System default font and that, 1:02 in this case on all these different variations on Mac OSX, Windows, 1:08 iOS, Android and so on it's using the Times or Times New Roman font. 1:15 And actually, excuse me, on Android it's going to use Droid Sans. 1:23 On Windows Phone it will use Se, Segoe. 1:27 >> Segwa, Segway. 1:33 >> Let's just, let's segway right out of that one. 1:35 And that, that's our OS default. 1:37 But if we actually type in something like, 1:41 say, Helvetica, which clearly I've already done here. 1:43 And click show, these are the fonts that will be used. 1:47 Now in most cases since Helvetica is 1:52 a pretty standard system font across the board, it's supported most places. 1:56 It will actually render Helvetica just like you'd expect. 2:03 So on OS ten it will render Helvetica. 2:06 Here on Windows, 2:09 it's actually going to switch over to Arial because Helvetica is not installed, 2:11 but it, it at least uses a Sans Serif font instead of using Times New Roman. 2:17 Again, on iOS it's going to use Helvetica. 2:24 Android's just like, I don't know. 2:26 I just, I love Droid Sans so much. 2:28 I'm just gonna use that. 2:30 And then, once again, we get sigwa, Segue. 2:31 [CROSSTALK]. >> Segoe. 2:35 >> On. >> Seego. 2:38 >> Windows Phone. 2:39 And, yeah. 2:41 Any who, really cool site. 2:42 You can type in any font here and figure our whether or 2:43 not that's going to be well supported. 2:48 On different operating systems. 2:50 >> Yeah, very nice. 2:52 Next up, we have a very, very thorough post called all this, 2:54 which goes on to tell what the value of this will be 2:59 in different contexts in your JavaScript applications. 3:04 Now it starts with the most simple version, the global this. 3:09 In a browser, this is the window object. 3:13 And right here they have a script that says, hey log to the console whether or 3:17 not this is equal to the window and that returns true. 3:21 If you are going to test for more equality here, 3:26 we have this variable Foo which is going to be defined in the global context. 3:30 This.foo will equal foo, and so will window.foo. 3:36 Now, if you create a new variable without using the var or 3:41 let keyword in ECMAScript 6, you're adding or changing a property on the global this. 3:45 So, here, we are using another variable called foo. 3:51 It's set equal to the word, bar. 3:55 We redefine that in a function. 3:58 And as we expect, when we run this, and 4:00 then run the function, it changes bar to foo. 4:03 Now if you are in node using the repl, this is the top namespace. 4:07 And you can refer to it as global. 4:14 And it does exactly what you would expect. 4:16 But, JavaScript is a language with many. 4:19 Possible different scopes. 4:22 Inside of functions, this can be different, 4:24 it can refer to a function or global. 4:27 And it can have different meanings depending on whether or 4:30 not, you're using the strict version of JavaScript. 4:32 And you can also get type errors by trying to set that inside of a global function. 4:36 Now you might think that's it, but no there are even more 4:42 possible definitions and scopes of this, and there are so many in fact 4:45 that I'm going to allow you to read this for yourself because it is so nuanced. 4:50 There is actually a ton to know. 4:56 And you can get yourself into trouble if you don't know exactly what this is, 4:58 because you may be setting different variables and different scopes. 5:04 So, definitely check this post out. 5:07 It will be in the show notes, which you can see right below this video. 5:08 >> I get it. 5:11 Check this. 5:12 Post out. 5:14 >> Yep. 5:15 >> See what you did there. 5:15 Next up is a wonderful article called Testing The Hamburger Icon for 5:17 More Revenue. 5:22 Now we've talked about the hamburger icon many, many times in the past. 5:23 This is the three bar icon that you see on lots of web sites, 5:28 that usually represents an icon for. 5:33 A menu, in fact it's so 5:36 enlarged here I wasn't even really sure what I was supposed to be looking at. 5:38 And maybe that is in fact part of the problem with the hamburger menu. 5:44 It's not necessarily clear that it's a menu. 5:49 Now, I really like this blog post because a lot of mobile or 5:52 where, really any kind of test results will focus on. 5:57 Things that engagement or page hits or whatever. 6:01 This was a really, literally dollars and cents test. 6:05 It, it figured out, does a different type of menu icon making more money. 6:12 And it turns out. 6:17 The answer is yes. 6:18 There there's has been a couple different test that were done here, 6:21 and this ended up being the winner. 6:24 So they had a three lined menu here and 6:27 they also had the word menu right underneath there. 6:30 And like I said. 6:36 All four treatments brought in more revenue than the control, 6:39 just the normal free line hamburger menu. 6:43 And they say not, just clicks Engagement or other soft metrics, dollars. 6:46 That was really pretty cool. 6:53 So the lesson here is, 6:55 is that the hamburger menu might not be so money after all. 6:56 I bet they're pretty full after all that hamburger menu testing. 7:02 >> Next up, we have an article explaining 7:06 the Flux Application Architecture is something that Facebook. 7:10 Has recently put out. 7:17 And there's even libraries and examples to work with flux. 7:18 Now, this whole article walks through understanding flux, 7:24 which can be pretty complicated. 7:28 Now, here we have a to do component, and a to do store. 7:31 This is going to be a very very basic stripped down version, 7:37 of a Flux application. 7:41 So, what's going to happen is this to do store is going to store the different 7:43 to do items, and then the do f component will render them. 7:48 So, what happens when you create a new to do item? 7:54 Well the user will enter that and 7:58 then something called the to do action creators will create it. 7:59 Fire this action that says, hey, this has been created. 8:04 And then something called the Dispatcher will figure out 8:08 what to do with that action. 8:11 Finally, the Dispatcher will call the callback of ToDo Store, 8:15 send that to the ToDo Store. 8:19 Which waits for and emits a change event, 8:21 sends that back to the to do app component which will potentially re render it and 8:24 then this whole thing can happen very many times. 8:29 Now, this critical walks through and shows you what happens, 8:33 at each of these different points in the application with code. 8:36 You can, of course, download the entire app, application example. 8:40 But what's great about this, is it shows you where exactly everything is happening. 8:45 And it gives you the snippets from the different parts of the example. 8:50 Along with commentary on what happens. 8:55 Now, I'm not gonna go through and read everything here. 8:57 But if you've been struggling to understand the flux architecture. 8:59 Definitely check this out. 9:03 Now, something else that's important to remember about Flux is, 9:04 it is different from the model view controller architecture in JavaScript. 9:07 It's a completely different paradigm of thinking that involves one-way data flow. 9:11 >> Also, completely different architecture than. 9:16 What was featured in Back to the Future. 9:19 >> Right. That would be the flux capacitor. 9:21 >> That's wha- 9:23 >> Which interfaces with the time circuits. 9:24 >> That's what I thought this article was gonna be about. 9:26 Very >> Wonder what's gonna happen when 9:28 this website hits 88 miles per hour? 9:30 >> Very disappointing it wasn't about time travel. 9:33 Next up is a ux project checklist. 9:37 This is a wonderful checklist that is well about ux. 9:41 And it's broken down into research, planning, exploration, communication and 9:46 it's a lot of stuff that you want to make sure that you're doing. 9:52 Kinda as you move through these different phases of your project. 9:55 And the nice thing is that they have links for everyone of these that go to 9:59 different resources that sort of describe what each one of these aspects is. 10:05 Now, research planning, exploration communication that's all. 10:11 Kinda boring stuff. 10:15 There we go, creation. 10:17 Let's just get right into it, not do any kind of research. 10:18 UI elements, we've got those. 10:22 We got some some gestures, responsive. 10:24 All right. 10:27 >> Good. 10:28 >> I think the the website's all done. 10:28 I don't wanna hear any feedback about it. 10:31 >> No. >> Just kinda- 10:33 >> You don't need to. 10:33 >> Finalize stuff, and yeah, I think, I think that's it. 10:34 Testing, [SOUND] I'm not going to do that. 10:38 >> No [LAUGH]. 10:40 But anyway. >> Waste of time. 10:40 >> Really cool stuff. 10:42 Definitely be sure to use this maybe on your next project and kinda look 10:43 through each step and kinda think about whether or not, you want to do these. 10:50 And as you go through, we can check them off. 10:55 >> Yeah, don't launch your website without each one of these being checked. 10:56 >> Exactly. You've got to do 10:59 every single one of them, maybe. 11:00 >> Yeah, whatever. 11:03 >> Yeah. 11:05 That's all we have time for this week. 11:05 I'm @nickrp on Twitter. 11:07 >> And I am @jseifer. 11:08 For more information on anything we talked about, 11:09 check out the show notes right below this video. 11:11 Thank you everybody for watching, and we will see you next week. 11:13

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

Sign up