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