I'm Nick Pettit.

>> I'm Jason Seifer.

>> And you're watching The Treehouse Show.

Your weekly dose of Internets where we talk

about all things web design, web development, and more.

>> For a free months trial of

Treehouse join Nick and I over at teemtreehouse.com/show.

In this episode of the Treehouse Show, we'll be

talking about practical typography, date pickers, form builders, and more.

>> Let's check it out.

[MUSIC]

First up, is this wonderful practical typography guide.

It's really, really extensive and you can purchase it if you find it useful.

So, how to pay for this book?

Of course, it is available for free right here on the web.

>> But, we are not sponsoring the show.

We should make that known.

>> It, they are not.

But it is really, really cool, incredibly.

In-depth here.

I'm just gonna click on apostrophes here cause

I learned something in here I did not know.

So first off, you usually are using a single

straight quote if you're just copying and pasting from a plain text source or just

typing in, in to, say a text editor when in fact, oftentimes

you probably mean to use an apostrophe which is a different character.

So, they have a couple examples here of what is wrong and what is right, and

how to use apostrophes properly because sometimes you

want them to face one way or another.

>> TIL.

>> Something, I did not know is

that if you're using Hawaiian spellings of Hawaiian

words, you actually are not using apostrophe

is, they, I believe, they are called okinas.

I am not quite sure how to say that word, but it's

actually a different character and you want them to be pointing upwards.

Anyway, that's just one example of the kind of depth

that this particular e-book, I guess I should say, goes into.

And it's just really pretty amazing, a lot of stuff in here I did not know myself.

>> That's really cool, and very practical.

>> Mm-hm.

>> It's way better than the impractical typography book.

>> I know, that one >> Yeah.

>> It's useless.

>> If one needed a sequel.

Next up, we have a project called

Shoelace, which is a visual bootstrap builder.

What does that mean?

Well, let's go ahead and check it out.

So, you'll notice on the left side of the screen here, we have different devices.

Phone, tablet, desktop and large desktop.

And then over on the right here, we have some

HTML and in the middle is a box and a grid.

Now, if I click inside of this box, and then start dragging my mouse,

I can name this row we'll name it nick, and now I have columns.

And as I re-size this column, it gives me the different boot strap class that

is associated with that column and then over on the left side of the screen it

displays what this would look like, now I can go ahead and add another column

so we'll do four and three and one and now I have a three column layout.

[BLANK_AUDIO]

And now I have a free column layout.

And I can of course adjust these different

columns and then go ahead and create more rows.

And repeat that process.

Now, as I do that it gives me the generated HTML over on this side.

Do it with a class of row and deal with

a class of row adjacent, and it gives me the HTML.

Or if I'm using.

Jade templates, that works as well, and if I want to,

it will even give me the Lex mix-in to generate this code.

Now you can copy all this and paste it inside of

your editor of choice and boom, you are good to go.

>> Wow.

Shoelace, they are really tying up the loose ends here.

Really you know.

>> Was that tongue in cheek?

>> It makes sense that this would be for boot strap.

>> I don't know I think I lost a little bit of my soul when I heard those jokes.

>> Next up, is a really cool

blog post called Creating Distraction Free-Reading Experiences.

Definitely not a disc, distraction-free show today.

>> Yes.

>> Basically it's an article about how to

create blog posts that look exactly like this one.

No, I'm just kidding.

But this is a good example of a distraction free reading experiencer.

And some of the best practices that they describe.

So for examples you don't want to have

embedded flappy bird right on your blog post, because.

You know

>> Oh I wish you could play flappy bird instead of finishing reading this article.

>> I just want to sign up for bank of America right now, look at that huh.

Wow, okay!

But basically, it's just an article, or it's

basically describing how Floppy Bird is all about focus.

And you wanna make sure you are focusing on the bird and not necessarily.

Your score up at the top.

>> I always focus on the score, maybe that's my problem.

>> They also bring up the practical typography

guide we just talked about so that's definitely a

useful resource in creating a distraction free reading

experience but one thing, that's actual substance here is.

Something I really liked and it says try not to use skeuomorphic metaphors such as

a book, so like iBooks on the iPad has this page flipping

mechanism that tries to make it feel and look like a real book,

but in reality that's kind of just a distraction that breaks up the pages.

Arbitrarily into, well, pages and since iBook has been

released, Apple has actually come out with a reading mode

where you can just scroll through the content and that's

actually a lot more conducive to reading and I think.

In summary, the article well, sums it up really nicely and says if you

want people to experience your content like

a physical book, well, go print a book.

Anyway, it's a really cool article.

They also go into fixed position elements, and

side bars, and it just describes how to kind

of break down a website, get rid of all

the elements that are gonna distract somebody from just.

Reading the content and enjoying the website.

>> All I got out of that was that I need to increase my flappy bird score.

>> Hey, I mean, that's as good as swimming.

>> Yeah, when in Rome.

Speaking of Rome is our next project.

This is a dependency free opt in UI.

For a date and time picker, dependency-free means

you do not need jQuery or anything like that.

Let's go ahead, let's click in this box and pick a date and time.

Wow, look at that.

>> What just happened?

>> This, the future just happened, right now, right here.

>> Literally we're going into the future.

It is not July first at, actually probably is by the time people are watching.

>> Yeah, look at this.

Here we go.

The future is now.

>> Wow.

>> You can tell it when to start the weeks.

Oh look, I dont' want my weeks to start on Sunday.

I want my weeks to start on Monday and end on Wednesday.

>> What about on funday?

Do that have an option to add for days?

>> no, that's actually integrated with Sunday.

>> Hm.

>> Usually, in the form of a hash tag.

>> I see.

>> so, next we have Pick a Date.

You can also pick a time, if you want to.

I like this little, little time drop down right there.

Boom, done.

You can remove and restore, roam at will, roam of

course being the name of this plugin, and not the place.

On the planet.

Anyway, ton of different options.

And like I said this is completely dependency free.

It's actually a pretty small plugin too so if you

need to implement a date and time picker on your website.

Go ahead and check out Rome.

>> Very nice.

Well neck up is pure CSS, one div, weather animated icons.

I know that because it says it right here on.

The website here are a bunch of animated weather icons,

so if you're building a weather app, bam, this is-

>> You're done.

>> Perfect for you.

Yep, it's all done.

Here is your seven day forecast.

Look like, looks like there's gonna be nighttime right there on the fifth day.

>> [LAUGH]

>> And, and that's gonna be preceded by a rainbow.

So that's, that's all really good information to know.

>> Cannot wait until Thursday, rainbow day.

>> This is, on Code Pen, so you can click edit

pen in lower right corner and see how this all works.

Now, whether or not this is totally practical, do you see what I did there?

Whether or not.

It, it's still pretty useful to learn from, so...

Here are those single divs, so that's exactly all the markup that

is present, so there's just one div for each one of those.

Woah, how are they doing that?

>> Yeah.

>> Well.

>> My forecast, impressed.

>> I [LAUGH].

So there's just one div for each one of these and how are they doing that?

Well for each one, I was guessing that they were using box shadows

and it looks like that that is indeed what they're doing for some of these.

So, here is the sunny one and they are using a box shadow right there

but actually it's mostly just gradients and

then they animate each one of these elements.

So, they just rotate and do a 360 degrees.

There is the key frames right there.

However for cloudy, here we go.

You have a bunch of box shadows right here.

And that's what makes those raindrops up here, so that's pretty cool.

And oh, actually I meant for raining, there we go.

Any way, you've got the idea.

It's basically all done with a little bit of fancy CSS

and some animations, and it's definitely really useful foe learning purposes.

So, if you wanna see how this works.

It's all, all on code pens.

So, you can go ahead and just kinda break away each individual

part and see what happens when you remove it or add stuff.

>> That's amazing.

>> Cool.

Well-

>> I like it.

>> That is all we have time for, this week.

I am @nickrp on Twitter.

>> Yeah, I am @jseifer.

For, for more information on anything we talked about,

make sure to check out our show notes at YouTube.com/gotreehouse.

And also search of us on iTunes.

We are the treehouse show.

>> And of course, if you 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/show for a free month.

Thank you so much for watching.

And we will see you next week.

[NOISE]

[MUSIC]