I'm Nick Pettit.

>> I'm Jason Seifer.

>> And you're watching the Tree House Show, your weekly dose of

internet where we talk about all web design, web development and more.

>> In this episode we will be talking about really

good emails, detecting credit cards in JavaScript, Mark-Down Editing and more.

>> Let's check it out.

First up is really good emails, which just.

>> That's all the emails I send.

>> [LAUGH] Just as the name implies, this is a website dedicated to Jason's emails.

No actually, it's.

>> Oh.

Don't scroll down.

>> It's a website for really great marketing emails,

and look at that, Treehouse is up at the top.

That's really all you need to know about this site.

>> Yeah.

>> Now on the left side here, they have a bunch

of different categories for different types of marketing emails you might send.

For example, if your on boarding new users you

might send them an email welcoming them to the site.

So here's a couple of examples of how that works from Flow and from [INAUDIBLE].

If we go back here, you'll see that there's quite

a few on this site that you can check out.

And just has, continuous loading here or lazy loading.

So you can just scroll through these.

Not a whole lot to say about the site, but if you're trying

to write, maybe, a newsletter on an

onboarding email, or maybe a support email.

There's some pretty good examples on this

site, and you should definitely check it out.

>> Then you'll know how to send really good email, like me.

>> Mm-hm.

>> Next up, we have a blog post from Joyant, on handling errors in Node.js.

This is actually a bit more complicated than it might seem at first,

so let's go through, and take a look at some of the things.

This is actually an extremely long article,

so we're not going to get into everything.

But it can be really difficult to handle certain errors in Node.js.

So, this post goes through and breaks down the different kinds of

errors that you might encounter, for

example, operational errors versus programming errors.

Now, this is gonna be an example of,

let's say something, like you're doing a DNS call.

And operationally, your server can't figure out what the DNS

address, or the IP address is, or a DNS server.

Well that's not gonna be programmer error, that's gonna be an operational error.

And in that case, sometimes all that you can do is just log the error and move on.

This blog post takes the stance that

for programmer errors, sometimes it's better to just

have your app fail, log that, and then have a different process that restarts it.

So, there's just a ton of different options, and different

types of errors that can happen inside of a Node.js application.

Now, here is some of their suggestions for

handling the operational errors that we talked about.

Not handling or handling programmer errors

and even patterns for writing different functions.

And what you're going to do, should you throw an error, should you

catch an error, should you handle it in a call back or not?

Anyway, this is an extremely detailed blog post.

We don't have time to go through it all.

Definitely check it out in the show notes, which you

can get to at youtube.com/gotreehouse, or search for us on iTunes.

We are the Treehouse show.

>> Nice.

Well, next up is refills, and refills are.

>> I could go for a refill on this show.

>> Refills are prepackaged patterns and components,

built on top of Bourbon, Bitters and Neat.

>> It all sounds delicious.

>> It does.

Bourbon if you're not familiar with it.

>> Oh I'm familiar with it.

>> It is a simple and lightweight mixing library for Sass.

And of course, Bitters and Neat go very

well with Bourbon, both the framework and the beverage.

If we scroll down here you can see exactly what the site is all about, they

have these different design patterns such as Navigation,

or a hero unit or an icon bullet points.

And if you click on the button show code, you can see exactly what the markup looks

like for this example, as well as the Sass that you can go ahead and click Copy.

And it will copy it to your clipboard, and you can use it on your site.

If you click over here on the left, you can get to the navigation to drop in

directly into any one of these patterns, and

they also have components a little bit further down.

So if you need something a little bit smaller such as a modal window, or a

sliding menu or badges and so forth, you can use some of these components.

Pretty cool stuff.

If you're not familiar with Bourbon, I highly recommend you

check it out, and try out some of these patterns.

>> Oh I, oh, I think I will check it out, Nick.

Think I'll check out some bourbon.

Next up we h ave a post on how to correctly detect credit card types.

This is actually a little bit more in depth than you might think at first.

And this is a post that goes through avoiding the

common mistakes when you're trying to implement credit card type detection.

Now it gives you the different card types, and what the card number prefix

will be and then, hey, should I use a regular expression to detect these?

Well, no, because now you have two problems.

So what is it say you should do?

Well it goes through and suggest using an inversion map to look

at all of the different card types, and then render it declaratively.

Now it's also a bonus here, they tell you a

pretty good user experience pattern when implementing a credit card form.

Let's take a look at it here.

So, here is an example of the confusing card type user interface.

So, it wants you to enter a card number and then above it, okay, well it

accepts these cards, do I have to click on the type of credit card I have?

I don't know.

I, I'll just post my credit card on

Twitter, and have somebody else do it for me.

No, a better way of doing this type of form is having a text field for

your credit card, and then right below that

it shows you which kind of cards are accepted.

It removes the confusion of having to click on that.

They're also dimmed, quite a little bit.

Now they do have a, a really nice user interface on here where it

shows you the card number that you can enter, along with the security code.

And as you enter it, it shows on the

bottom right what type of credit card it is.

And also you'll notice it uses combinations

of bigger, and smaller type to accomplish this.

Anyway, there's a really good blog post that goes a little bit

more in depth than what I talked about, so definitely check it out.

>> Very nice.

Well next up is Font To Width, and if your

familiar with the FitText.js project this one is actually very similar.

And they do call out the FitText.js project, but they say unlike other text

fitting tools like FitText.js, Font To Width does not scale the font size.

So, if your familiar with FitText.js you'll know that, that is a kind

of a weird limitation of it, so where it does scale the font size.

Instead this tries to use font variance.

Now, I might be getting a little bit ahead of myself.

What does this do?

Well, it's great for titles that go across the width of a containing element.

So, for example, we have shuffleboard standings across the top here.

And it expands across the full width of

this element, and then inside here, we have

a ton of different names, or different teams,

I guess, yeah, looks like these are teams.

And you'll notice that they have different lengths, so some of these are really

short, some of them are really long, and they fill up the width of the container.

Regardless of their length and do that again not by adjusting

the font size, but they do it by adjusting the font variance.

So they look for a variance that has different

letter spacing, or might be slightly color and so on.

So, a couple of notes about this.

It's not meant for paragraph text, so it's just

good for headlines and other short pieces of text.

And yeah shuffleboard pucks are called biscuits.

Who knew?

>> I didn't know, know that at all.

Next up, we have a book, it, that

is, right now, for free called Speaking JavaScript.

This is written by Dr. Axel Rauschmayer.

Now, the eBook is going to be available to buy online by O'Reilly.

You could also buy it in print starting March

7th, 2014 or 014, as we say on the show.

But why are we talking about it here, because they're not

sponsoring the show, well, there is a free online version in HTML.

Now we're just gonna take a look at the Table of Contents right here.

it's, it's pretty wonderful.

It goes through basic syntax of JavaScript, gives you the syntax, all the

different built in types, talks about

functions, exception handling, and so much more.

Then it goes through, talks about why you would want to use Javascript, what you

should watch for, what is elegant about Javascript,

hint not much, its a very short chapter.

And then a little bit more of the history.

Finally it goes into a little bit more depth in

JavaScript, talks about the syntax,

different values, operators, Booleans, numbers.

It's really just a great overview of the JavaScript language.

If you're new to JavaScript, definitely recommend checking this out

because it is free it's very thorough and easy to learn.

>> Very nice.

Well, next is EpicEditor.

>> Sounds pretty epic.

>> And I do have to say, it is pretty epic.

I'm pretty impressed by this.

It's an Embeddable JavaScript Markdown Editor.

So, if you're familiar with markdown, it's basically this syntax where you can use

maybe like a pound sign like this, and it will turn this into a headline.

Or you can use maybe underscores, and turn this text into Italics and so on.

So there is a bunch of different little

language tokens here where you can format text.

And if we click the Preview button down in the bottom right,

you can see exactly what this text is going to look like.

So, there's the headline then there's the italicized [INAUDIBLE].

>> Pretty fast.

>> You can also go full screen with this.

So look at that.

Wow, it uses the full screen API from the browser, and you

can edit text on the left and see the preview on the right.

So that's pretty handy, and yeah like you said Jason,

it is pretty fast it's pretty amazing that they're doing this.

So, why would you want to do this?

Well, this markdown language is actually used in a

number of different places across the internet and most [UNKNOWN]

editors are not very good, so it's really nice to

have one that actually does seem to look pretty great.

To use it, just go ahead and download it off

of your hub, you create your container element, just like

this, then you add the epic editor.js file and you

just initialize it, and it should take care of the rest.

But if you want to get more into it, there is

an API, so you can go ahead and check that out.

>> Alright, very very cool.

I would say it's, it is epic.

It does, it does earn its moniker.

Finally, we have a blog post on

debugging asynchronous JavaScript, with the Chrome dev tools.

>> Wow.

>> Yeah, this is a brand new feature in the latest builds of Chrome

Canary, so you'll have to be on the really total bleeding edge to use it.

But, it lets you, like it says,

asynchronously debug JavaScript with the Chrome dev tools.

Now, why in the world would you want to do something like that?

Well, it can be really difficult to get through and find an error in the

function with JavaScript when it's doing postbacks

to the server, and tons of different ajax.

So this is a wonderful blog post that has animated GIFS showing

what exactly you can do when you enable the async functionality right here.

And you can see the differences later on in the post let's

see, so they give an example of the late timer events and responses.

Really nice walk through of what's going on in gmail

and say alright, oops the system encountered a problem, retrying now.

Well, here is a nice little breakdown of how that happens.

And, without the async handling, all you get with your

debugging, is seeing these few different steps in the code.

Now, if you do enable the async functionality, you can go

a lot farther back in the stream, and see exactly what happened

before the HTTP request went out, when it came back, all the

different call stack and places that it went through when that happened.

Now, in addition to just this, it shows you how

to watch the expressions asynchronously even evaluating code from past scopes.

Isn't that awesome?

It's basically like time travel in your browser.

In fact they even use a nice little little Doctor Who TARDIS there to unravel that.

Now this doesn't support Java Script promises

just yet, but that is coming soon.

>> So you could say they're promising support for that?

>> You could say that if you were awesome.

So anyway, yeah great blog post.

Definitely recommend checking this out because it

really does make debugging so much easier.

>> Very nice stuff, well I am @nickrp on twitter.

>> And I am @jseifer.

For more information on anything we talked about, check out

our show notes, which you can get to at youtube.com/gotreehouse.

You can also check em out in iTunes.

Search for us, we are The Treehouse Show.

And by the way, if you like this show and wanna sign up for Treehouse,

use the code at the bottom of this video, to get a free one-month trial.

And of course, if you'd like to see more videos like this

one about web design, web development, mobile business, and so much more.

Be sure to check us out at teamtreehouse.com.

And use that link to get a free month.

Thank you so much for watching, and we will see you next week.

[MUSIC]