1 00:00:00,290 --> 00:00:01,100 I'm Nick Pettit. 2 00:00:01,100 --> 00:00:02,180 >> I'm Jason Seifer. 3 00:00:02,180 --> 00:00:04,500 >> And you're watching the Tree House Show, your weekly dose of 4 00:00:04,500 --> 00:00:08,060 internet where we talk about all web design, web development and more. 5 00:00:08,060 --> 00:00:09,960 >> In this episode we will be talking about really 6 00:00:09,960 --> 00:00:15,610 good emails, detecting credit cards in JavaScript, Mark-Down Editing and more. 7 00:00:15,610 --> 00:00:16,600 >> Let's check it out. 8 00:00:21,720 --> 00:00:25,380 First up is really good emails, which just. 9 00:00:25,380 --> 00:00:26,945 >> That's all the emails I send. 10 00:00:26,945 --> 00:00:32,350 >> [LAUGH] Just as the name implies, this is a website dedicated to Jason's emails. 11 00:00:32,350 --> 00:00:33,410 No actually, it's. 12 00:00:33,410 --> 00:00:33,730 >> Oh. 13 00:00:33,730 --> 00:00:34,970 Don't scroll down. 14 00:00:34,970 --> 00:00:38,940 >> It's a website for really great marketing emails, 15 00:00:38,940 --> 00:00:41,250 and look at that, Treehouse is up at the top. 16 00:00:41,250 --> 00:00:43,000 That's really all you need to know about this site. 17 00:00:43,000 --> 00:00:43,840 >> Yeah. 18 00:00:43,840 --> 00:00:47,050 >> Now on the left side here, they have a bunch 19 00:00:47,050 --> 00:00:51,350 of different categories for different types of marketing emails you might send. 20 00:00:51,350 --> 00:00:54,990 For example, if your on boarding new users you 21 00:00:54,990 --> 00:00:59,670 might send them an email welcoming them to the site. 22 00:00:59,670 --> 00:01:06,260 So here's a couple of examples of how that works from Flow and from [INAUDIBLE]. 23 00:01:06,260 --> 00:01:10,080 If we go back here, you'll see that there's quite 24 00:01:10,080 --> 00:01:13,840 a few on this site that you can check out. 25 00:01:13,840 --> 00:01:17,350 And just has, continuous loading here or lazy loading. 26 00:01:17,350 --> 00:01:20,020 So you can just scroll through these. 27 00:01:20,020 --> 00:01:23,340 Not a whole lot to say about the site, but if you're trying 28 00:01:23,340 --> 00:01:25,990 to write, maybe, a newsletter on an 29 00:01:25,990 --> 00:01:29,860 onboarding email, or maybe a support email. 30 00:01:29,860 --> 00:01:32,700 There's some pretty good examples on this 31 00:01:32,700 --> 00:01:36,160 site, and you should definitely check it out. 32 00:01:36,160 --> 00:01:38,445 >> Then you'll know how to send really good email, like me. 33 00:01:38,445 --> 00:01:39,690 >> Mm-hm. 34 00:01:39,690 --> 00:01:45,740 >> Next up, we have a blog post from Joyant, on handling errors in Node.js. 35 00:01:45,740 --> 00:01:48,670 This is actually a bit more complicated than it might seem at first, 36 00:01:48,670 --> 00:01:50,900 so let's go through, and take a look at some of the things. 37 00:01:50,900 --> 00:01:53,360 This is actually an extremely long article, 38 00:01:53,360 --> 00:01:56,000 so we're not going to get into everything. 39 00:01:56,000 --> 00:02:01,440 But it can be really difficult to handle certain errors in Node.js. 40 00:02:01,440 --> 00:02:05,280 So, this post goes through and breaks down the different kinds of 41 00:02:05,280 --> 00:02:07,380 errors that you might encounter, for 42 00:02:07,380 --> 00:02:11,000 example, operational errors versus programming errors. 43 00:02:11,000 --> 00:02:13,440 Now, this is gonna be an example of, 44 00:02:13,440 --> 00:02:16,820 let's say something, like you're doing a DNS call. 45 00:02:16,820 --> 00:02:22,280 And operationally, your server can't figure out what the DNS 46 00:02:22,280 --> 00:02:25,030 address, or the IP address is, or a DNS server. 47 00:02:25,030 --> 00:02:29,020 Well that's not gonna be programmer error, that's gonna be an operational error. 48 00:02:29,020 --> 00:02:33,290 And in that case, sometimes all that you can do is just log the error and move on. 49 00:02:34,490 --> 00:02:36,730 This blog post takes the stance that 50 00:02:36,730 --> 00:02:39,920 for programmer errors, sometimes it's better to just 51 00:02:39,920 --> 00:02:44,920 have your app fail, log that, and then have a different process that restarts it. 52 00:02:44,920 --> 00:02:48,390 So, there's just a ton of different options, and different 53 00:02:48,390 --> 00:02:52,850 types of errors that can happen inside of a Node.js application. 54 00:02:52,850 --> 00:02:55,870 Now, here is some of their suggestions for 55 00:02:55,870 --> 00:02:58,920 handling the operational errors that we talked about. 56 00:02:58,920 --> 00:03:02,560 Not handling or handling programmer errors 57 00:03:02,560 --> 00:03:05,300 and even patterns for writing different functions. 58 00:03:05,300 --> 00:03:08,130 And what you're going to do, should you throw an error, should you 59 00:03:08,130 --> 00:03:11,940 catch an error, should you handle it in a call back or not? 60 00:03:11,940 --> 00:03:14,700 Anyway, this is an extremely detailed blog post. 61 00:03:14,700 --> 00:03:16,150 We don't have time to go through it all. 62 00:03:16,150 --> 00:03:17,830 Definitely check it out in the show notes, which you 63 00:03:17,830 --> 00:03:22,200 can get to at youtube.com/gotreehouse, or search for us on iTunes. 64 00:03:22,200 --> 00:03:23,680 We are the Treehouse show. 65 00:03:24,980 --> 00:03:25,580 >> Nice. 66 00:03:25,580 --> 00:03:28,590 Well, next up is refills, and refills are. 67 00:03:28,590 --> 00:03:31,240 >> I could go for a refill on this show. 68 00:03:31,240 --> 00:03:35,200 >> Refills are prepackaged patterns and components, 69 00:03:35,200 --> 00:03:38,500 built on top of Bourbon, Bitters and Neat. 70 00:03:38,500 --> 00:03:39,710 >> It all sounds delicious. 71 00:03:39,710 --> 00:03:41,040 >> It does. 72 00:03:41,040 --> 00:03:43,130 Bourbon if you're not familiar with it. 73 00:03:43,130 --> 00:03:44,290 >> Oh I'm familiar with it. 74 00:03:44,290 --> 00:03:48,560 >> It is a simple and lightweight mixing library for Sass. 75 00:03:48,560 --> 00:03:51,110 And of course, Bitters and Neat go very 76 00:03:51,110 --> 00:03:54,700 well with Bourbon, both the framework and the beverage. 77 00:03:54,700 --> 00:03:58,420 If we scroll down here you can see exactly what the site is all about, they 78 00:03:58,420 --> 00:04:01,730 have these different design patterns such as Navigation, 79 00:04:01,730 --> 00:04:04,190 or a hero unit or an icon bullet points. 80 00:04:04,190 --> 00:04:10,200 And if you click on the button show code, you can see exactly what the markup looks 81 00:04:10,200 --> 00:04:17,550 like for this example, as well as the Sass that you can go ahead and click Copy. 82 00:04:17,550 --> 00:04:22,770 And it will copy it to your clipboard, and you can use it on your site. 83 00:04:22,770 --> 00:04:27,900 If you click over here on the left, you can get to the navigation to drop in 84 00:04:27,900 --> 00:04:30,810 directly into any one of these patterns, and 85 00:04:30,810 --> 00:04:34,000 they also have components a little bit further down. 86 00:04:34,000 --> 00:04:38,730 So if you need something a little bit smaller such as a modal window, or a 87 00:04:38,730 --> 00:04:44,840 sliding menu or badges and so forth, you can use some of these components. 88 00:04:44,840 --> 00:04:46,310 Pretty cool stuff. 89 00:04:46,310 --> 00:04:48,930 If you're not familiar with Bourbon, I highly recommend you 90 00:04:48,930 --> 00:04:53,120 check it out, and try out some of these patterns. 91 00:04:53,120 --> 00:04:55,550 >> Oh I, oh, I think I will check it out, Nick. 92 00:04:55,550 --> 00:04:56,750 Think I'll check out some bourbon. 93 00:04:57,750 --> 00:05:02,700 Next up we h ave a post on how to correctly detect credit card types. 94 00:05:02,700 --> 00:05:07,420 This is actually a little bit more in depth than you might think at first. 95 00:05:07,420 --> 00:05:09,660 And this is a post that goes through avoiding the 96 00:05:09,660 --> 00:05:14,620 common mistakes when you're trying to implement credit card type detection. 97 00:05:14,620 --> 00:05:19,220 Now it gives you the different card types, and what the card number prefix 98 00:05:19,220 --> 00:05:23,910 will be and then, hey, should I use a regular expression to detect these? 99 00:05:23,910 --> 00:05:27,180 Well, no, because now you have two problems. 100 00:05:27,180 --> 00:05:28,990 So what is it say you should do? 101 00:05:28,990 --> 00:05:34,000 Well it goes through and suggest using an inversion map to look 102 00:05:34,000 --> 00:05:37,680 at all of the different card types, and then render it declaratively. 103 00:05:38,890 --> 00:05:41,560 Now it's also a bonus here, they tell you a 104 00:05:41,560 --> 00:05:45,790 pretty good user experience pattern when implementing a credit card form. 105 00:05:45,790 --> 00:05:47,070 Let's take a look at it here. 106 00:05:47,070 --> 00:05:51,920 So, here is an example of the confusing card type user interface. 107 00:05:51,920 --> 00:05:55,660 So, it wants you to enter a card number and then above it, okay, well it 108 00:05:55,660 --> 00:05:59,190 accepts these cards, do I have to click on the type of credit card I have? 109 00:05:59,190 --> 00:06:00,220 I don't know. 110 00:06:00,220 --> 00:06:01,450 I, I'll just post my credit card on 111 00:06:01,450 --> 00:06:03,010 Twitter, and have somebody else do it for me. 112 00:06:04,170 --> 00:06:08,480 No, a better way of doing this type of form is having a text field for 113 00:06:08,480 --> 00:06:11,110 your credit card, and then right below that 114 00:06:11,110 --> 00:06:13,410 it shows you which kind of cards are accepted. 115 00:06:13,410 --> 00:06:16,220 It removes the confusion of having to click on that. 116 00:06:16,220 --> 00:06:18,870 They're also dimmed, quite a little bit. 117 00:06:18,870 --> 00:06:22,140 Now they do have a, a really nice user interface on here where it 118 00:06:22,140 --> 00:06:25,290 shows you the card number that you can enter, along with the security code. 119 00:06:25,290 --> 00:06:27,210 And as you enter it, it shows on the 120 00:06:27,210 --> 00:06:30,640 bottom right what type of credit card it is. 121 00:06:30,640 --> 00:06:34,090 And also you'll notice it uses combinations 122 00:06:34,090 --> 00:06:36,580 of bigger, and smaller type to accomplish this. 123 00:06:36,580 --> 00:06:38,740 Anyway, there's a really good blog post that goes a little bit 124 00:06:38,740 --> 00:06:41,160 more in depth than what I talked about, so definitely check it out. 125 00:06:42,560 --> 00:06:43,120 >> Very nice. 126 00:06:43,120 --> 00:06:46,780 Well next up is Font To Width, and if your 127 00:06:46,780 --> 00:06:52,890 familiar with the FitText.js project this one is actually very similar. 128 00:06:52,890 --> 00:06:58,950 And they do call out the FitText.js project, but they say unlike other text 129 00:06:58,950 --> 00:07:05,880 fitting tools like FitText.js, Font To Width does not scale the font size. 130 00:07:05,880 --> 00:07:10,560 So, if your familiar with FitText.js you'll know that, that is a kind 131 00:07:10,560 --> 00:07:14,700 of a weird limitation of it, so where it does scale the font size. 132 00:07:14,700 --> 00:07:18,210 Instead this tries to use font variance. 133 00:07:18,210 --> 00:07:21,100 Now, I might be getting a little bit ahead of myself. 134 00:07:21,100 --> 00:07:21,870 What does this do? 135 00:07:21,870 --> 00:07:27,940 Well, it's great for titles that go across the width of a containing element. 136 00:07:27,940 --> 00:07:32,230 So, for example, we have shuffleboard standings across the top here. 137 00:07:32,230 --> 00:07:34,200 And it expands across the full width of 138 00:07:34,200 --> 00:07:37,570 this element, and then inside here, we have 139 00:07:37,570 --> 00:07:41,370 a ton of different names, or different teams, 140 00:07:41,370 --> 00:07:43,600 I guess, yeah, looks like these are teams. 141 00:07:43,600 --> 00:07:50,550 And you'll notice that they have different lengths, so some of these are really 142 00:07:50,550 --> 00:07:56,280 short, some of them are really long, and they fill up the width of the container. 143 00:07:56,280 --> 00:08:01,200 Regardless of their length and do that again not by adjusting 144 00:08:01,200 --> 00:08:05,140 the font size, but they do it by adjusting the font variance. 145 00:08:05,140 --> 00:08:08,050 So they look for a variance that has different 146 00:08:09,240 --> 00:08:13,090 letter spacing, or might be slightly color and so on. 147 00:08:13,090 --> 00:08:14,610 So, a couple of notes about this. 148 00:08:14,610 --> 00:08:18,310 It's not meant for paragraph text, so it's just 149 00:08:18,310 --> 00:08:22,810 good for headlines and other short pieces of text. 150 00:08:22,810 --> 00:08:27,390 And yeah shuffleboard pucks are called biscuits. 151 00:08:27,390 --> 00:08:28,010 Who knew? 152 00:08:28,010 --> 00:08:31,180 >> I didn't know, know that at all. 153 00:08:31,180 --> 00:08:34,130 Next up, we have a book, it, that 154 00:08:34,130 --> 00:08:37,440 is, right now, for free called Speaking JavaScript. 155 00:08:37,440 --> 00:08:40,510 This is written by Dr. Axel Rauschmayer. 156 00:08:40,510 --> 00:08:46,400 Now, the eBook is going to be available to buy online by O'Reilly. 157 00:08:46,400 --> 00:08:48,380 You could also buy it in print starting March 158 00:08:48,380 --> 00:08:52,150 7th, 2014 or 014, as we say on the show. 159 00:08:52,150 --> 00:08:53,750 But why are we talking about it here, because they're not 160 00:08:53,750 --> 00:08:58,350 sponsoring the show, well, there is a free online version in HTML. 161 00:08:58,350 --> 00:09:02,560 Now we're just gonna take a look at the Table of Contents right here. 162 00:09:02,560 --> 00:09:03,670 it's, it's pretty wonderful. 163 00:09:03,670 --> 00:09:08,020 It goes through basic syntax of JavaScript, gives you the syntax, all the 164 00:09:08,020 --> 00:09:09,760 different built in types, talks about 165 00:09:09,760 --> 00:09:13,750 functions, exception handling, and so much more. 166 00:09:13,750 --> 00:09:18,110 Then it goes through, talks about why you would want to use Javascript, what you 167 00:09:18,110 --> 00:09:21,510 should watch for, what is elegant about Javascript, 168 00:09:21,510 --> 00:09:23,780 hint not much, its a very short chapter. 169 00:09:23,780 --> 00:09:27,360 And then a little bit more of the history. 170 00:09:27,360 --> 00:09:29,670 Finally it goes into a little bit more depth in 171 00:09:29,670 --> 00:09:31,410 JavaScript, talks about the syntax, 172 00:09:31,410 --> 00:09:34,430 different values, operators, Booleans, numbers. 173 00:09:34,430 --> 00:09:37,920 It's really just a great overview of the JavaScript language. 174 00:09:37,920 --> 00:09:40,630 If you're new to JavaScript, definitely recommend checking this out 175 00:09:40,630 --> 00:09:44,610 because it is free it's very thorough and easy to learn. 176 00:09:45,880 --> 00:09:46,510 >> Very nice. 177 00:09:46,510 --> 00:09:48,370 Well, next is EpicEditor. 178 00:09:48,370 --> 00:09:49,590 >> Sounds pretty epic. 179 00:09:49,590 --> 00:09:52,210 >> And I do have to say, it is pretty epic. 180 00:09:52,210 --> 00:09:53,360 I'm pretty impressed by this. 181 00:09:53,360 --> 00:09:56,710 It's an Embeddable JavaScript Markdown Editor. 182 00:09:56,710 --> 00:10:02,320 So, if you're familiar with markdown, it's basically this syntax where you can use 183 00:10:02,320 --> 00:10:07,410 maybe like a pound sign like this, and it will turn this into a headline. 184 00:10:07,410 --> 00:10:13,060 Or you can use maybe underscores, and turn this text into Italics and so on. 185 00:10:13,060 --> 00:10:15,100 So there is a bunch of different little 186 00:10:15,100 --> 00:10:19,230 language tokens here where you can format text. 187 00:10:19,230 --> 00:10:22,660 And if we click the Preview button down in the bottom right, 188 00:10:22,660 --> 00:10:25,730 you can see exactly what this text is going to look like. 189 00:10:25,730 --> 00:10:30,180 So, there's the headline then there's the italicized [INAUDIBLE]. 190 00:10:30,180 --> 00:10:30,860 >> Pretty fast. 191 00:10:30,860 --> 00:10:33,650 >> You can also go full screen with this. 192 00:10:33,650 --> 00:10:34,400 So look at that. 193 00:10:34,400 --> 00:10:38,520 Wow, it uses the full screen API from the browser, and you 194 00:10:38,520 --> 00:10:43,240 can edit text on the left and see the preview on the right. 195 00:10:43,240 --> 00:10:45,520 So that's pretty handy, and yeah like you said Jason, 196 00:10:45,520 --> 00:10:50,500 it is pretty fast it's pretty amazing that they're doing this. 197 00:10:50,500 --> 00:10:52,610 So, why would you want to do this? 198 00:10:52,610 --> 00:10:56,770 Well, this markdown language is actually used in a 199 00:10:56,770 --> 00:11:02,320 number of different places across the internet and most [UNKNOWN] 200 00:11:02,320 --> 00:11:05,570 editors are not very good, so it's really nice to 201 00:11:05,570 --> 00:11:09,920 have one that actually does seem to look pretty great. 202 00:11:09,920 --> 00:11:13,360 To use it, just go ahead and download it off 203 00:11:13,360 --> 00:11:16,390 of your hub, you create your container element, just like 204 00:11:16,390 --> 00:11:20,410 this, then you add the epic editor.js file and you 205 00:11:20,410 --> 00:11:23,850 just initialize it, and it should take care of the rest. 206 00:11:23,850 --> 00:11:26,070 But if you want to get more into it, there is 207 00:11:26,070 --> 00:11:30,560 an API, so you can go ahead and check that out. 208 00:11:31,740 --> 00:11:32,690 >> Alright, very very cool. 209 00:11:32,690 --> 00:11:33,990 I would say it's, it is epic. 210 00:11:33,990 --> 00:11:35,560 It does, it does earn its moniker. 211 00:11:36,570 --> 00:11:38,770 Finally, we have a blog post on 212 00:11:38,770 --> 00:11:42,780 debugging asynchronous JavaScript, with the Chrome dev tools. 213 00:11:42,780 --> 00:11:43,210 >> Wow. 214 00:11:43,210 --> 00:11:47,170 >> Yeah, this is a brand new feature in the latest builds of Chrome 215 00:11:47,170 --> 00:11:51,220 Canary, so you'll have to be on the really total bleeding edge to use it. 216 00:11:51,220 --> 00:11:53,800 But, it lets you, like it says, 217 00:11:53,800 --> 00:11:57,000 asynchronously debug JavaScript with the Chrome dev tools. 218 00:11:57,000 --> 00:12:00,180 Now, why in the world would you want to do something like that? 219 00:12:00,180 --> 00:12:04,270 Well, it can be really difficult to get through and find an error in the 220 00:12:04,270 --> 00:12:07,310 function with JavaScript when it's doing postbacks 221 00:12:07,310 --> 00:12:09,960 to the server, and tons of different ajax. 222 00:12:09,960 --> 00:12:14,800 So this is a wonderful blog post that has animated GIFS showing 223 00:12:14,800 --> 00:12:20,090 what exactly you can do when you enable the async functionality right here. 224 00:12:20,090 --> 00:12:25,450 And you can see the differences later on in the post let's 225 00:12:25,450 --> 00:12:30,370 see, so they give an example of the late timer events and responses. 226 00:12:30,370 --> 00:12:32,660 Really nice walk through of what's going on in gmail 227 00:12:32,660 --> 00:12:36,360 and say alright, oops the system encountered a problem, retrying now. 228 00:12:36,360 --> 00:12:39,460 Well, here is a nice little breakdown of how that happens. 229 00:12:39,460 --> 00:12:44,770 And, without the async handling, all you get with your 230 00:12:44,770 --> 00:12:49,360 debugging, is seeing these few different steps in the code. 231 00:12:49,360 --> 00:12:52,890 Now, if you do enable the async functionality, you can go 232 00:12:52,890 --> 00:12:57,740 a lot farther back in the stream, and see exactly what happened 233 00:12:57,740 --> 00:13:03,150 before the HTTP request went out, when it came back, all the 234 00:13:03,150 --> 00:13:07,420 different call stack and places that it went through when that happened. 235 00:13:07,420 --> 00:13:10,010 Now, in addition to just this, it shows you how 236 00:13:10,010 --> 00:13:15,330 to watch the expressions asynchronously even evaluating code from past scopes. 237 00:13:15,330 --> 00:13:15,930 Isn't that awesome? 238 00:13:15,930 --> 00:13:18,710 It's basically like time travel in your browser. 239 00:13:18,710 --> 00:13:24,630 In fact they even use a nice little little Doctor Who TARDIS there to unravel that. 240 00:13:24,630 --> 00:13:26,770 Now this doesn't support Java Script promises 241 00:13:26,770 --> 00:13:28,680 just yet, but that is coming soon. 242 00:13:28,680 --> 00:13:31,690 >> So you could say they're promising support for that? 243 00:13:31,690 --> 00:13:33,750 >> You could say that if you were awesome. 244 00:13:33,750 --> 00:13:37,120 So anyway, yeah great blog post. 245 00:13:37,120 --> 00:13:38,850 Definitely recommend checking this out because it 246 00:13:38,850 --> 00:13:41,360 really does make debugging so much easier. 247 00:13:41,360 --> 00:13:43,790 >> Very nice stuff, well I am @nickrp on twitter. 248 00:13:43,790 --> 00:13:44,810 >> And I am @jseifer. 249 00:13:44,810 --> 00:13:47,180 For more information on anything we talked about, check out 250 00:13:47,180 --> 00:13:50,490 our show notes, which you can get to at youtube.com/gotreehouse. 251 00:13:50,490 --> 00:13:52,020 You can also check em out in iTunes. 252 00:13:52,020 --> 00:13:54,480 Search for us, we are The Treehouse Show. 253 00:13:54,480 --> 00:13:57,610 And by the way, if you like this show and wanna sign up for Treehouse, 254 00:13:57,610 --> 00:14:02,220 use the code at the bottom of this video, to get a free one-month trial. 255 00:14:02,220 --> 00:14:04,470 And of course, if you'd like to see more videos like this 256 00:14:04,470 --> 00:14:08,810 one about web design, web development, mobile business, and so much more. 257 00:14:08,810 --> 00:14:12,030 Be sure to check us out at teamtreehouse.com. 258 00:14:12,030 --> 00:14:14,620 And use that link to get a free month. 259 00:14:14,620 --> 00:14:21,021 Thank you so much for watching, and we will see you next week. 260 00:14:21,021 --> 00:14:24,130 [MUSIC]