1 00:00:00,470 --> 00:00:01,320 I'm Nick Pettit. 2 00:00:01,320 --> 00:00:02,300 >> I'm Jason Seifer. 3 00:00:02,300 --> 00:00:04,930 >> And you're watching The Treehouse Show, your weekly dose of 4 00:00:04,930 --> 00:00:08,480 internets where we talk about all things web design, web development, and more. 5 00:00:08,480 --> 00:00:12,160 >> In this episode we'll be talking about font families, the hamburger menu, 6 00:00:12,160 --> 00:00:14,010 Flux, and more. 7 00:00:14,010 --> 00:00:15,592 >> Let's check it out. 8 00:00:15,592 --> 00:00:20,776 [MUSIC] 9 00:00:20,776 --> 00:00:26,180 First up is this really cool site called font family reunion. 10 00:00:26,180 --> 00:00:27,488 Now, whenever you. 11 00:00:27,488 --> 00:00:28,220 >> Get it? 12 00:00:28,220 --> 00:00:29,013 Family Reunion? 13 00:00:29,013 --> 00:00:31,180 >> But font family, which is a CSS property. 14 00:00:31,180 --> 00:00:35,409 >> Yeah, like if it were Wheel of Fortune, that would be like the before and after. 15 00:00:35,409 --> 00:00:37,259 >> It's like a play on words. 16 00:00:38,410 --> 00:00:40,228 I wish there was a name for that. 17 00:00:40,228 --> 00:00:42,340 >> Yeah, I don't know. 18 00:00:42,340 --> 00:00:44,780 This is font family reunion. 19 00:00:44,780 --> 00:00:50,330 It says compatibility tables for default local fonts, 20 00:00:50,330 --> 00:00:56,270 so, basically what this tells you is, if you're using the font family property, 21 00:00:56,270 --> 00:01:00,540 and you just give it, well, in this case, nothing. 22 00:01:00,540 --> 00:01:02,450 This is what's going to happen. 23 00:01:02,450 --> 00:01:08,140 It's going to use the Operating System default font and that, 24 00:01:08,140 --> 00:01:15,060 in this case on all these different variations on Mac OSX, Windows, 25 00:01:15,060 --> 00:01:23,440 iOS, Android and so on it's using the Times or Times New Roman font. 26 00:01:23,440 --> 00:01:27,870 And actually, excuse me, on Android it's going to use Droid Sans. 27 00:01:27,870 --> 00:01:33,320 On Windows Phone it will use Se, Segoe. 28 00:01:33,320 --> 00:01:35,650 >> Segwa, Segway. 29 00:01:35,650 --> 00:01:37,860 >> Let's just, let's segway right out of that one. 30 00:01:37,860 --> 00:01:41,180 And that, that's our OS default. 31 00:01:41,180 --> 00:01:43,530 But if we actually type in something like, 32 00:01:43,530 --> 00:01:47,540 say, Helvetica, which clearly I've already done here. 33 00:01:47,540 --> 00:01:52,960 And click show, these are the fonts that will be used. 34 00:01:52,960 --> 00:01:56,810 Now in most cases since Helvetica is 35 00:01:56,810 --> 00:02:03,050 a pretty standard system font across the board, it's supported most places. 36 00:02:03,050 --> 00:02:06,120 It will actually render Helvetica just like you'd expect. 37 00:02:06,120 --> 00:02:09,780 So on OS ten it will render Helvetica. 38 00:02:09,780 --> 00:02:11,180 Here on Windows, 39 00:02:11,180 --> 00:02:17,180 it's actually going to switch over to Arial because Helvetica is not installed, 40 00:02:17,180 --> 00:02:22,850 but it, it at least uses a Sans Serif font instead of using Times New Roman. 41 00:02:24,160 --> 00:02:26,970 Again, on iOS it's going to use Helvetica. 42 00:02:26,970 --> 00:02:28,290 Android's just like, I don't know. 43 00:02:28,290 --> 00:02:30,000 I just, I love Droid Sans so much. 44 00:02:30,000 --> 00:02:31,510 I'm just gonna use that. 45 00:02:31,510 --> 00:02:35,063 And then, once again, we get sigwa, Segue. 46 00:02:35,063 --> 00:02:38,052 [CROSSTALK]. >> Segoe. 47 00:02:38,052 --> 00:02:39,216 >> On. >> Seego. 48 00:02:39,216 --> 00:02:41,210 >> Windows Phone. 49 00:02:41,210 --> 00:02:42,380 And, yeah. 50 00:02:42,380 --> 00:02:43,780 Any who, really cool site. 51 00:02:43,780 --> 00:02:48,090 You can type in any font here and figure our whether or 52 00:02:48,090 --> 00:02:50,140 not that's going to be well supported. 53 00:02:50,140 --> 00:02:52,520 On different operating systems. 54 00:02:52,520 --> 00:02:53,330 >> Yeah, very nice. 55 00:02:54,630 --> 00:02:59,700 Next up, we have a very, very thorough post called all this, 56 00:02:59,700 --> 00:03:04,240 which goes on to tell what the value of this will be 57 00:03:04,240 --> 00:03:09,230 in different contexts in your JavaScript applications. 58 00:03:09,230 --> 00:03:13,990 Now it starts with the most simple version, the global this. 59 00:03:13,990 --> 00:03:17,350 In a browser, this is the window object. 60 00:03:17,350 --> 00:03:21,180 And right here they have a script that says, hey log to the console whether or 61 00:03:21,180 --> 00:03:24,870 not this is equal to the window and that returns true. 62 00:03:26,080 --> 00:03:30,940 If you are going to test for more equality here, 63 00:03:30,940 --> 00:03:36,135 we have this variable Foo which is going to be defined in the global context. 64 00:03:36,135 --> 00:03:41,800 This.foo will equal foo, and so will window.foo. 65 00:03:41,800 --> 00:03:45,200 Now, if you create a new variable without using the var or 66 00:03:45,200 --> 00:03:51,520 let keyword in ECMAScript 6, you're adding or changing a property on the global this. 67 00:03:51,520 --> 00:03:55,350 So, here, we are using another variable called foo. 68 00:03:55,350 --> 00:03:58,250 It's set equal to the word, bar. 69 00:03:58,250 --> 00:04:00,740 We redefine that in a function. 70 00:04:00,740 --> 00:04:03,140 And as we expect, when we run this, and 71 00:04:03,140 --> 00:04:06,470 then run the function, it changes bar to foo. 72 00:04:07,930 --> 00:04:14,040 Now if you are in node using the repl, this is the top namespace. 73 00:04:14,040 --> 00:04:16,550 And you can refer to it as global. 74 00:04:16,550 --> 00:04:19,230 And it does exactly what you would expect. 75 00:04:19,230 --> 00:04:22,100 But, JavaScript is a language with many. 76 00:04:22,100 --> 00:04:24,440 Possible different scopes. 77 00:04:24,440 --> 00:04:27,230 Inside of functions, this can be different, 78 00:04:27,230 --> 00:04:30,350 it can refer to a function or global. 79 00:04:30,350 --> 00:04:32,660 And it can have different meanings depending on whether or 80 00:04:32,660 --> 00:04:36,350 not, you're using the strict version of JavaScript. 81 00:04:36,350 --> 00:04:42,390 And you can also get type errors by trying to set that inside of a global function. 82 00:04:42,390 --> 00:04:45,730 Now you might think that's it, but no there are even more 83 00:04:45,730 --> 00:04:50,980 possible definitions and scopes of this, and there are so many in fact 84 00:04:50,980 --> 00:04:56,240 that I'm going to allow you to read this for yourself because it is so nuanced. 85 00:04:56,240 --> 00:04:58,920 There is actually a ton to know. 86 00:04:58,920 --> 00:05:04,350 And you can get yourself into trouble if you don't know exactly what this is, 87 00:05:04,350 --> 00:05:07,390 because you may be setting different variables and different scopes. 88 00:05:07,390 --> 00:05:08,870 So, definitely check this post out. 89 00:05:08,870 --> 00:05:11,680 It will be in the show notes, which you can see right below this video. 90 00:05:11,680 --> 00:05:12,610 >> I get it. 91 00:05:12,610 --> 00:05:14,460 Check this. 92 00:05:14,460 --> 00:05:15,260 Post out. 93 00:05:15,260 --> 00:05:15,890 >> Yep. 94 00:05:15,890 --> 00:05:17,600 >> See what you did there. 95 00:05:17,600 --> 00:05:22,910 Next up is a wonderful article called Testing The Hamburger Icon for 96 00:05:22,910 --> 00:05:23,560 More Revenue. 97 00:05:23,560 --> 00:05:28,030 Now we've talked about the hamburger icon many, many times in the past. 98 00:05:28,030 --> 00:05:33,700 This is the three bar icon that you see on lots of web sites, 99 00:05:33,700 --> 00:05:36,620 that usually represents an icon for. 100 00:05:36,620 --> 00:05:38,890 A menu, in fact it's so 101 00:05:38,890 --> 00:05:44,160 enlarged here I wasn't even really sure what I was supposed to be looking at. 102 00:05:44,160 --> 00:05:49,080 And maybe that is in fact part of the problem with the hamburger menu. 103 00:05:49,080 --> 00:05:52,210 It's not necessarily clear that it's a menu. 104 00:05:52,210 --> 00:05:57,730 Now, I really like this blog post because a lot of mobile or 105 00:05:57,730 --> 00:06:01,280 where, really any kind of test results will focus on. 106 00:06:01,280 --> 00:06:05,800 Things that engagement or page hits or whatever. 107 00:06:05,800 --> 00:06:12,110 This was a really, literally dollars and cents test. 108 00:06:12,110 --> 00:06:17,520 It, it figured out, does a different type of menu icon making more money. 109 00:06:17,520 --> 00:06:18,600 And it turns out. 110 00:06:18,600 --> 00:06:21,030 The answer is yes. 111 00:06:21,030 --> 00:06:24,690 There there's has been a couple different test that were done here, 112 00:06:24,690 --> 00:06:27,160 and this ended up being the winner. 113 00:06:27,160 --> 00:06:30,640 So they had a three lined menu here and 114 00:06:30,640 --> 00:06:36,150 they also had the word menu right underneath there. 115 00:06:36,150 --> 00:06:38,250 And like I said. 116 00:06:39,360 --> 00:06:43,910 All four treatments brought in more revenue than the control, 117 00:06:43,910 --> 00:06:46,740 just the normal free line hamburger menu. 118 00:06:46,740 --> 00:06:53,350 And they say not, just clicks Engagement or other soft metrics, dollars. 119 00:06:53,350 --> 00:06:55,040 That was really pretty cool. 120 00:06:55,040 --> 00:06:56,540 So the lesson here is, 121 00:06:56,540 --> 00:07:01,190 is that the hamburger menu might not be so money after all. 122 00:07:02,320 --> 00:07:05,050 I bet they're pretty full after all that hamburger menu testing. 123 00:07:06,770 --> 00:07:10,080 >> Next up, we have an article explaining 124 00:07:10,080 --> 00:07:17,530 the Flux Application Architecture is something that Facebook. 125 00:07:17,530 --> 00:07:18,880 Has recently put out. 126 00:07:18,880 --> 00:07:24,240 And there's even libraries and examples to work with flux. 127 00:07:24,240 --> 00:07:28,240 Now, this whole article walks through understanding flux, 128 00:07:28,240 --> 00:07:31,280 which can be pretty complicated. 129 00:07:31,280 --> 00:07:37,150 Now, here we have a to do component, and a to do store. 130 00:07:37,150 --> 00:07:41,100 This is going to be a very very basic stripped down version, 131 00:07:41,100 --> 00:07:43,430 of a Flux application. 132 00:07:43,430 --> 00:07:48,810 So, what's going to happen is this to do store is going to store the different 133 00:07:48,810 --> 00:07:54,540 to do items, and then the do f component will render them. 134 00:07:54,540 --> 00:07:58,050 So, what happens when you create a new to do item? 135 00:07:58,050 --> 00:07:59,980 Well the user will enter that and 136 00:07:59,980 --> 00:08:04,510 then something called the to do action creators will create it. 137 00:08:04,510 --> 00:08:08,400 Fire this action that says, hey, this has been created. 138 00:08:08,400 --> 00:08:11,780 And then something called the Dispatcher will figure out 139 00:08:11,780 --> 00:08:14,160 what to do with that action. 140 00:08:15,240 --> 00:08:19,710 Finally, the Dispatcher will call the callback of ToDo Store, 141 00:08:19,710 --> 00:08:21,710 send that to the ToDo Store. 142 00:08:21,710 --> 00:08:24,750 Which waits for and emits a change event, 143 00:08:24,750 --> 00:08:29,370 sends that back to the to do app component which will potentially re render it and 144 00:08:29,370 --> 00:08:33,230 then this whole thing can happen very many times. 145 00:08:33,230 --> 00:08:36,660 Now, this critical walks through and shows you what happens, 146 00:08:36,660 --> 00:08:40,710 at each of these different points in the application with code. 147 00:08:40,710 --> 00:08:45,000 You can, of course, download the entire app, application example. 148 00:08:45,000 --> 00:08:50,370 But what's great about this, is it shows you where exactly everything is happening. 149 00:08:50,370 --> 00:08:55,180 And it gives you the snippets from the different parts of the example. 150 00:08:55,180 --> 00:08:57,270 Along with commentary on what happens. 151 00:08:57,270 --> 00:08:59,810 Now, I'm not gonna go through and read everything here. 152 00:08:59,810 --> 00:09:03,060 But if you've been struggling to understand the flux architecture. 153 00:09:03,060 --> 00:09:04,390 Definitely check this out. 154 00:09:04,390 --> 00:09:07,680 Now, something else that's important to remember about Flux is, 155 00:09:07,680 --> 00:09:11,660 it is different from the model view controller architecture in JavaScript. 156 00:09:11,660 --> 00:09:16,320 It's a completely different paradigm of thinking that involves one-way data flow. 157 00:09:16,320 --> 00:09:19,130 >> Also, completely different architecture than. 158 00:09:19,130 --> 00:09:21,380 What was featured in Back to the Future. 159 00:09:21,380 --> 00:09:23,450 >> Right. That would be the flux capacitor. 160 00:09:23,450 --> 00:09:24,140 >> That's wha- 161 00:09:24,140 --> 00:09:26,030 >> Which interfaces with the time circuits. 162 00:09:26,030 --> 00:09:28,820 >> That's what I thought this article was gonna be about. 163 00:09:28,820 --> 00:09:30,460 Very >> Wonder what's gonna happen when 164 00:09:30,460 --> 00:09:32,230 this website hits 88 miles per hour? 165 00:09:33,890 --> 00:09:37,840 >> Very disappointing it wasn't about time travel. 166 00:09:37,840 --> 00:09:41,170 Next up is a ux project checklist. 167 00:09:41,170 --> 00:09:46,720 This is a wonderful checklist that is well about ux. 168 00:09:46,720 --> 00:09:52,190 And it's broken down into research, planning, exploration, communication and 169 00:09:52,190 --> 00:09:55,460 it's a lot of stuff that you want to make sure that you're doing. 170 00:09:55,460 --> 00:09:59,770 Kinda as you move through these different phases of your project. 171 00:09:59,770 --> 00:10:05,620 And the nice thing is that they have links for everyone of these that go to 172 00:10:05,620 --> 00:10:11,610 different resources that sort of describe what each one of these aspects is. 173 00:10:11,610 --> 00:10:15,900 Now, research planning, exploration communication that's all. 174 00:10:15,900 --> 00:10:17,790 Kinda boring stuff. 175 00:10:17,790 --> 00:10:18,890 There we go, creation. 176 00:10:18,890 --> 00:10:22,190 Let's just get right into it, not do any kind of research. 177 00:10:22,190 --> 00:10:24,200 UI elements, we've got those. 178 00:10:24,200 --> 00:10:27,690 We got some some gestures, responsive. 179 00:10:27,690 --> 00:10:28,300 All right. 180 00:10:28,300 --> 00:10:28,990 >> Good. 181 00:10:28,990 --> 00:10:31,430 >> I think the the website's all done. 182 00:10:31,430 --> 00:10:33,100 I don't wanna hear any feedback about it. 183 00:10:33,100 --> 00:10:33,760 >> No. >> Just kinda- 184 00:10:33,760 --> 00:10:34,770 >> You don't need to. 185 00:10:34,770 --> 00:10:38,730 >> Finalize stuff, and yeah, I think, I think that's it. 186 00:10:38,730 --> 00:10:40,219 Testing, [SOUND] I'm not going to do that. 187 00:10:40,219 --> 00:10:40,990 >> No [LAUGH]. 188 00:10:40,990 --> 00:10:42,640 But anyway. >> Waste of time. 189 00:10:42,640 --> 00:10:43,650 >> Really cool stuff. 190 00:10:43,650 --> 00:10:50,000 Definitely be sure to use this maybe on your next project and kinda look 191 00:10:50,000 --> 00:10:55,330 through each step and kinda think about whether or not, you want to do these. 192 00:10:55,330 --> 00:10:56,940 And as you go through, we can check them off. 193 00:10:56,940 --> 00:10:59,320 >> Yeah, don't launch your website without each one of these being checked. 194 00:10:59,320 --> 00:11:00,370 >> Exactly. You've got to do 195 00:11:00,370 --> 00:11:03,860 every single one of them, maybe. 196 00:11:03,860 --> 00:11:05,000 >> Yeah, whatever. 197 00:11:05,000 --> 00:11:05,790 >> Yeah. 198 00:11:05,790 --> 00:11:07,330 That's all we have time for this week. 199 00:11:07,330 --> 00:11:08,690 I'm @nickrp on Twitter. 200 00:11:08,690 --> 00:11:09,700 >> And I am @jseifer. 201 00:11:09,700 --> 00:11:11,440 For more information on anything we talked about, 202 00:11:11,440 --> 00:11:13,500 check out the show notes right below this video. 203 00:11:13,500 --> 00:11:16,490 Thank you everybody for watching, and we will see you next week.