Episode 86: Really Good Emails, Credit Card Detection, Epic Editor

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Tree House Show, your weekly dose of 0:02 internet where we talk about all web design, web development and more. 0:04 >> In this episode we will be talking about really 0:08 good emails, detecting credit cards in JavaScript, Mark-Down Editing and more. 0:09 >> Let's check it out. 0:15 First up is really good emails, which just. 0:21 >> That's all the emails I send. 0:25 >> [LAUGH] Just as the name implies, this is a website dedicated to Jason's emails. 0:26 No actually, it's. 0:32 >> Oh. 0:33 Don't scroll down. 0:33 >> It's a website for really great marketing emails, 0:34 and look at that, Treehouse is up at the top. 0:38 That's really all you need to know about this site. 0:41 >> Yeah. 0:43 >> Now on the left side here, they have a bunch 0:43 of different categories for different types of marketing emails you might send. 0:47 For example, if your on boarding new users you 0:51 might send them an email welcoming them to the site. 0:54 So here's a couple of examples of how that works from Flow and from [INAUDIBLE]. 0:59 If we go back here, you'll see that there's quite 1:06 a few on this site that you can check out. 1:10 And just has, continuous loading here or lazy loading. 1:13 So you can just scroll through these. 1:17 Not a whole lot to say about the site, but if you're trying 1:20 to write, maybe, a newsletter on an 1:23 onboarding email, or maybe a support email. 1:25 There's some pretty good examples on this 1:29 site, and you should definitely check it out. 1:32 >> Then you'll know how to send really good email, like me. 1:36 >> Mm-hm. 1:38 >> Next up, we have a blog post from Joyant, on handling errors in Node.js. 1:39 This is actually a bit more complicated than it might seem at first, 1:45 so let's go through, and take a look at some of the things. 1:48 This is actually an extremely long article, 1:50 so we're not going to get into everything. 1:53 But it can be really difficult to handle certain errors in Node.js. 1:56 So, this post goes through and breaks down the different kinds of 2:01 errors that you might encounter, for 2:05 example, operational errors versus programming errors. 2:07 Now, this is gonna be an example of, 2:11 let's say something, like you're doing a DNS call. 2:13 And operationally, your server can't figure out what the DNS 2:16 address, or the IP address is, or a DNS server. 2:22 Well that's not gonna be programmer error, that's gonna be an operational error. 2:25 And in that case, sometimes all that you can do is just log the error and move on. 2:29 This blog post takes the stance that 2:34 for programmer errors, sometimes it's better to just 2:36 have your app fail, log that, and then have a different process that restarts it. 2:39 So, there's just a ton of different options, and different 2:44 types of errors that can happen inside of a Node.js application. 2:48 Now, here is some of their suggestions for 2:52 handling the operational errors that we talked about. 2:55 Not handling or handling programmer errors 2:58 and even patterns for writing different functions. 3:02 And what you're going to do, should you throw an error, should you 3:05 catch an error, should you handle it in a call back or not? 3:08 Anyway, this is an extremely detailed blog post. 3:11 We don't have time to go through it all. 3:14 Definitely check it out in the show notes, which you 3:16 can get to at youtube.com/gotreehouse, or search for us on iTunes. 3:17 We are the Treehouse show. 3:22 >> Nice. 3:24 Well, next up is refills, and refills are. 3:25 >> I could go for a refill on this show. 3:28 >> Refills are prepackaged patterns and components, 3:31 built on top of Bourbon, Bitters and Neat. 3:35 >> It all sounds delicious. 3:38 >> It does. 3:39 Bourbon if you're not familiar with it. 3:41 >> Oh I'm familiar with it. 3:43 >> It is a simple and lightweight mixing library for Sass. 3:44 And of course, Bitters and Neat go very 3:48 well with Bourbon, both the framework and the beverage. 3:51 If we scroll down here you can see exactly what the site is all about, they 3:54 have these different design patterns such as Navigation, 3:58 or a hero unit or an icon bullet points. 4:01 And if you click on the button show code, you can see exactly what the markup looks 4:04 like for this example, as well as the Sass that you can go ahead and click Copy. 4:10 And it will copy it to your clipboard, and you can use it on your site. 4:17 If you click over here on the left, you can get to the navigation to drop in 4:22 directly into any one of these patterns, and 4:27 they also have components a little bit further down. 4:30 So if you need something a little bit smaller such as a modal window, or a 4:34 sliding menu or badges and so forth, you can use some of these components. 4:38 Pretty cool stuff. 4:44 If you're not familiar with Bourbon, I highly recommend you 4:46 check it out, and try out some of these patterns. 4:48 >> Oh I, oh, I think I will check it out, Nick. 4:53 Think I'll check out some bourbon. 4:55 Next up we h ave a post on how to correctly detect credit card types. 4:57 This is actually a little bit more in depth than you might think at first. 5:02 And this is a post that goes through avoiding the 5:07 common mistakes when you're trying to implement credit card type detection. 5:09 Now it gives you the different card types, and what the card number prefix 5:14 will be and then, hey, should I use a regular expression to detect these? 5:19 Well, no, because now you have two problems. 5:23 So what is it say you should do? 5:27 Well it goes through and suggest using an inversion map to look 5:28 at all of the different card types, and then render it declaratively. 5:34 Now it's also a bonus here, they tell you a 5:38 pretty good user experience pattern when implementing a credit card form. 5:41 Let's take a look at it here. 5:45 So, here is an example of the confusing card type user interface. 5:47 So, it wants you to enter a card number and then above it, okay, well it 5:51 accepts these cards, do I have to click on the type of credit card I have? 5:55 I don't know. 5:59 I, I'll just post my credit card on 6:00 Twitter, and have somebody else do it for me. 6:01 No, a better way of doing this type of form is having a text field for 6:04 your credit card, and then right below that 6:08 it shows you which kind of cards are accepted. 6:11 It removes the confusion of having to click on that. 6:13 They're also dimmed, quite a little bit. 6:16 Now they do have a, a really nice user interface on here where it 6:18 shows you the card number that you can enter, along with the security code. 6:22 And as you enter it, it shows on the 6:25 bottom right what type of credit card it is. 6:27 And also you'll notice it uses combinations 6:30 of bigger, and smaller type to accomplish this. 6:34 Anyway, there's a really good blog post that goes a little bit 6:36 more in depth than what I talked about, so definitely check it out. 6:38 >> Very nice. 6:42 Well next up is Font To Width, and if your 6:43 familiar with the FitText.js project this one is actually very similar. 6:46 And they do call out the FitText.js project, but they say unlike other text 6:52 fitting tools like FitText.js, Font To Width does not scale the font size. 6:58 So, if your familiar with FitText.js you'll know that, that is a kind 7:05 of a weird limitation of it, so where it does scale the font size. 7:10 Instead this tries to use font variance. 7:14 Now, I might be getting a little bit ahead of myself. 7:18 What does this do? 7:21 Well, it's great for titles that go across the width of a containing element. 7:21 So, for example, we have shuffleboard standings across the top here. 7:27 And it expands across the full width of 7:32 this element, and then inside here, we have 7:34 a ton of different names, or different teams, 7:37 I guess, yeah, looks like these are teams. 7:41 And you'll notice that they have different lengths, so some of these are really 7:43 short, some of them are really long, and they fill up the width of the container. 7:50 Regardless of their length and do that again not by adjusting 7:56 the font size, but they do it by adjusting the font variance. 8:01 So they look for a variance that has different 8:05 letter spacing, or might be slightly color and so on. 8:09 So, a couple of notes about this. 8:13 It's not meant for paragraph text, so it's just 8:14 good for headlines and other short pieces of text. 8:18 And yeah shuffleboard pucks are called biscuits. 8:22 Who knew? 8:27 >> I didn't know, know that at all. 8:28 Next up, we have a book, it, that 8:31 is, right now, for free called Speaking JavaScript. 8:34 This is written by Dr. Axel Rauschmayer. 8:37 Now, the eBook is going to be available to buy online by O'Reilly. 8:40 You could also buy it in print starting March 8:46 7th, 2014 or 014, as we say on the show. 8:48 But why are we talking about it here, because they're not 8:52 sponsoring the show, well, there is a free online version in HTML. 8:53 Now we're just gonna take a look at the Table of Contents right here. 8:58 it's, it's pretty wonderful. 9:02 It goes through basic syntax of JavaScript, gives you the syntax, all the 9:03 different built in types, talks about 9:08 functions, exception handling, and so much more. 9:09 Then it goes through, talks about why you would want to use Javascript, what you 9:13 should watch for, what is elegant about Javascript, 9:18 hint not much, its a very short chapter. 9:21 And then a little bit more of the history. 9:23 Finally it goes into a little bit more depth in 9:27 JavaScript, talks about the syntax, 9:29 different values, operators, Booleans, numbers. 9:31 It's really just a great overview of the JavaScript language. 9:34 If you're new to JavaScript, definitely recommend checking this out 9:37 because it is free it's very thorough and easy to learn. 9:40 >> Very nice. 9:45 Well, next is EpicEditor. 9:46 >> Sounds pretty epic. 9:48 >> And I do have to say, it is pretty epic. 9:49 I'm pretty impressed by this. 9:52 It's an Embeddable JavaScript Markdown Editor. 9:53 So, if you're familiar with markdown, it's basically this syntax where you can use 9:56 maybe like a pound sign like this, and it will turn this into a headline. 10:02 Or you can use maybe underscores, and turn this text into Italics and so on. 10:07 So there is a bunch of different little 10:13 language tokens here where you can format text. 10:15 And if we click the Preview button down in the bottom right, 10:19 you can see exactly what this text is going to look like. 10:22 So, there's the headline then there's the italicized [INAUDIBLE]. 10:25 >> Pretty fast. 10:30 >> You can also go full screen with this. 10:30 So look at that. 10:33 Wow, it uses the full screen API from the browser, and you 10:34 can edit text on the left and see the preview on the right. 10:38 So that's pretty handy, and yeah like you said Jason, 10:43 it is pretty fast it's pretty amazing that they're doing this. 10:45 So, why would you want to do this? 10:50 Well, this markdown language is actually used in a 10:52 number of different places across the internet and most [UNKNOWN] 10:56 editors are not very good, so it's really nice to 11:02 have one that actually does seem to look pretty great. 11:05 To use it, just go ahead and download it off 11:09 of your hub, you create your container element, just like 11:13 this, then you add the epic editor.js file and you 11:16 just initialize it, and it should take care of the rest. 11:20 But if you want to get more into it, there is 11:23 an API, so you can go ahead and check that out. 11:26 >> Alright, very very cool. 11:31 I would say it's, it is epic. 11:32 It does, it does earn its moniker. 11:33 Finally, we have a blog post on 11:36 debugging asynchronous JavaScript, with the Chrome dev tools. 11:38 >> Wow. 11:42 >> Yeah, this is a brand new feature in the latest builds of Chrome 11:43 Canary, so you'll have to be on the really total bleeding edge to use it. 11:47 But, it lets you, like it says, 11:51 asynchronously debug JavaScript with the Chrome dev tools. 11:53 Now, why in the world would you want to do something like that? 11:57 Well, it can be really difficult to get through and find an error in the 12:00 function with JavaScript when it's doing postbacks 12:04 to the server, and tons of different ajax. 12:07 So this is a wonderful blog post that has animated GIFS showing 12:09 what exactly you can do when you enable the async functionality right here. 12:14 And you can see the differences later on in the post let's 12:20 see, so they give an example of the late timer events and responses. 12:25 Really nice walk through of what's going on in gmail 12:30 and say alright, oops the system encountered a problem, retrying now. 12:32 Well, here is a nice little breakdown of how that happens. 12:36 And, without the async handling, all you get with your 12:39 debugging, is seeing these few different steps in the code. 12:44 Now, if you do enable the async functionality, you can go 12:49 a lot farther back in the stream, and see exactly what happened 12:52 before the HTTP request went out, when it came back, all the 12:57 different call stack and places that it went through when that happened. 13:03 Now, in addition to just this, it shows you how 13:07 to watch the expressions asynchronously even evaluating code from past scopes. 13:10 Isn't that awesome? 13:15 It's basically like time travel in your browser. 13:15 In fact they even use a nice little little Doctor Who TARDIS there to unravel that. 13:18 Now this doesn't support Java Script promises 13:24 just yet, but that is coming soon. 13:26 >> So you could say they're promising support for that? 13:28 >> You could say that if you were awesome. 13:31 So anyway, yeah great blog post. 13:33 Definitely recommend checking this out because it 13:37 really does make debugging so much easier. 13:38 >> Very nice stuff, well I am @nickrp on twitter. 13:41 >> And I am @jseifer. 13:43 For more information on anything we talked about, check out 13:44 our show notes, which you can get to at youtube.com/gotreehouse. 13:47 You can also check em out in iTunes. 13:50 Search for us, we are The Treehouse Show. 13:52 And by the way, if you like this show and wanna sign up for Treehouse, 13:54 use the code at the bottom of this video, to get a free one-month trial. 13:57 And of course, if you'd like to see more videos like this 14:02 one about web design, web development, mobile business, and so much more. 14:04 Be sure to check us out at teamtreehouse.com. 14:08 And use that link to get a free month. 14:12 Thank you so much for watching, and we will see you next week. 14:14 [MUSIC] 14:21