You've already started watching Episode 108: Practical Typography, Date Pickers, Form Builders
Episode 108: Practical Typography, Date Pickers, Form Builders
11:08 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 Treehouse Show.
-
0:04
Your weekly dose of Internets where we talk
-
0:05
about all things web design, web development, and more.
-
0:08
>> For a free months trial of
-
0:10
Treehouse join Nick and I over at teemtreehouse.com/show.
-
0:13
In this episode of the Treehouse Show, we'll be
-
0:16
talking about practical typography, date pickers, form builders, and more.
-
0:22
>> Let's check it out.
-
0:22
[MUSIC]
-
0:28
First up, is this wonderful practical typography guide.
-
0:32
It's really, really extensive and you can purchase it if you find it useful.
-
0:39
So, how to pay for this book?
-
0:42
Of course, it is available for free right here on the web.
-
0:45
>> But, we are not sponsoring the show.
-
0:46
We should make that known.
-
0:48
>> It, they are not.
-
0:49
But it is really, really cool, incredibly.
-
0:53
In-depth here.
-
0:54
I'm just gonna click on apostrophes here cause
-
0:57
I learned something in here I did not know.
-
1:00
So first off, you usually are using a single
-
1:05
straight quote if you're just copying and pasting from a plain text source or just
-
1:10
typing in, in to, say a text editor when in fact, oftentimes
-
1:15
you probably mean to use an apostrophe which is a different character.
-
1:19
So, they have a couple examples here of what is wrong and what is right, and
-
1:26
how to use apostrophes properly because sometimes you
-
1:30
want them to face one way or another.
-
1:34
>> TIL.
-
1:35
>> Something, I did not know is
-
1:37
that if you're using Hawaiian spellings of Hawaiian
-
1:41
words, you actually are not using apostrophe
-
1:44
is, they, I believe, they are called okinas.
-
1:48
I am not quite sure how to say that word, but it's
-
1:51
actually a different character and you want them to be pointing upwards.
-
1:56
Anyway, that's just one example of the kind of depth
-
1:59
that this particular e-book, I guess I should say, goes into.
-
2:04
And it's just really pretty amazing, a lot of stuff in here I did not know myself.
-
2:09
>> That's really cool, and very practical.
-
2:11
>> Mm-hm.
-
2:12
>> It's way better than the impractical typography book.
-
2:14
>> I know, that one >> Yeah.
-
2:16
>> It's useless.
-
2:17
>> If one needed a sequel.
-
2:19
Next up, we have a project called
-
2:21
Shoelace, which is a visual bootstrap builder.
-
2:26
What does that mean?
-
2:26
Well, let's go ahead and check it out.
-
2:28
So, you'll notice on the left side of the screen here, we have different devices.
-
2:33
Phone, tablet, desktop and large desktop.
-
2:37
And then over on the right here, we have some
-
2:40
HTML and in the middle is a box and a grid.
-
2:45
Now, if I click inside of this box, and then start dragging my mouse,
-
2:51
I can name this row we'll name it nick, and now I have columns.
-
2:56
And as I re-size this column, it gives me the different boot strap class that
-
3:03
is associated with that column and then over on the left side of the screen it
-
3:09
displays what this would look like, now I can go ahead and add another column
-
3:15
so we'll do four and three and one and now I have a three column layout.
-
3:21
[BLANK_AUDIO]
-
3:23
And now I have a free column layout.
-
3:26
And I can of course adjust these different
-
3:28
columns and then go ahead and create more rows.
-
3:33
And repeat that process.
-
3:34
Now, as I do that it gives me the generated HTML over on this side.
-
3:40
Do it with a class of row and deal with
-
3:42
a class of row adjacent, and it gives me the HTML.
-
3:45
Or if I'm using.
-
3:46
Jade templates, that works as well, and if I want to,
-
3:50
it will even give me the Lex mix-in to generate this code.
-
3:54
Now you can copy all this and paste it inside of
-
3:57
your editor of choice and boom, you are good to go.
-
4:01
>> Wow.
-
4:01
Shoelace, they are really tying up the loose ends here.
-
4:04
Really you know.
-
4:09
>> Was that tongue in cheek?
-
4:12
>> It makes sense that this would be for boot strap.
-
4:14
>> I don't know I think I lost a little bit of my soul when I heard those jokes.
-
4:21
>> Next up, is a really cool
-
4:23
blog post called Creating Distraction Free-Reading Experiences.
-
4:27
Definitely not a disc, distraction-free show today.
-
4:30
>> Yes.
-
4:31
>> Basically it's an article about how to
-
4:34
create blog posts that look exactly like this one.
-
4:37
No, I'm just kidding.
-
4:38
But this is a good example of a distraction free reading experiencer.
-
4:43
And some of the best practices that they describe.
-
4:47
So for examples you don't want to have
-
4:49
embedded flappy bird right on your blog post, because.
-
4:52
You know
-
4:53
>> Oh I wish you could play flappy bird instead of finishing reading this article.
-
4:55
>> I just want to sign up for bank of America right now, look at that huh.
-
4:59
Wow, okay!
-
5:00
But basically, it's just an article, or it's
-
5:04
basically describing how Floppy Bird is all about focus.
-
5:09
And you wanna make sure you are focusing on the bird and not necessarily.
-
5:13
Your score up at the top.
-
5:15
>> I always focus on the score, maybe that's my problem.
-
5:18
>> They also bring up the practical typography
-
5:20
guide we just talked about so that's definitely a
-
5:24
useful resource in creating a distraction free reading
-
5:28
experience but one thing, that's actual substance here is.
-
5:34
Something I really liked and it says try not to use skeuomorphic metaphors such as
-
5:41
a book, so like iBooks on the iPad has this page flipping
-
5:47
mechanism that tries to make it feel and look like a real book,
-
5:51
but in reality that's kind of just a distraction that breaks up the pages.
-
5:56
Arbitrarily into, well, pages and since iBook has been
-
6:02
released, Apple has actually come out with a reading mode
-
6:05
where you can just scroll through the content and that's
-
6:09
actually a lot more conducive to reading and I think.
-
6:12
In summary, the article well, sums it up really nicely and says if you
-
6:17
want people to experience your content like
-
6:19
a physical book, well, go print a book.
-
6:22
Anyway, it's a really cool article.
-
6:25
They also go into fixed position elements, and
-
6:28
side bars, and it just describes how to kind
-
6:31
of break down a website, get rid of all
-
6:34
the elements that are gonna distract somebody from just.
-
6:37
Reading the content and enjoying the website.
-
6:39
>> All I got out of that was that I need to increase my flappy bird score.
-
6:43
>> Hey, I mean, that's as good as swimming.
-
6:46
>> Yeah, when in Rome.
-
6:48
Speaking of Rome is our next project.
-
6:50
This is a dependency free opt in UI.
-
6:54
For a date and time picker, dependency-free means
-
6:57
you do not need jQuery or anything like that.
-
7:00
Let's go ahead, let's click in this box and pick a date and time.
-
7:03
Wow, look at that.
-
7:04
>> What just happened?
-
7:05
>> This, the future just happened, right now, right here.
-
7:09
>> Literally we're going into the future.
-
7:10
It is not July first at, actually probably is by the time people are watching.
-
7:15
>> Yeah, look at this.
-
7:16
Here we go.
-
7:17
The future is now.
-
7:18
>> Wow.
-
7:18
>> You can tell it when to start the weeks.
-
7:21
Oh look, I dont' want my weeks to start on Sunday.
-
7:23
I want my weeks to start on Monday and end on Wednesday.
-
7:27
>> What about on funday?
-
7:29
Do that have an option to add for days?
-
7:31
>> no, that's actually integrated with Sunday.
-
7:34
>> Hm.
-
7:35
>> Usually, in the form of a hash tag.
-
7:36
>> I see.
-
7:38
>> so, next we have Pick a Date.
-
7:40
You can also pick a time, if you want to.
-
7:42
I like this little, little time drop down right there.
-
7:45
Boom, done.
-
7:46
You can remove and restore, roam at will, roam of
-
7:49
course being the name of this plugin, and not the place.
-
7:53
On the planet.
-
7:55
Anyway, ton of different options.
-
7:57
And like I said this is completely dependency free.
-
7:59
It's actually a pretty small plugin too so if you
-
8:01
need to implement a date and time picker on your website.
-
8:04
Go ahead and check out Rome.
-
8:06
>> Very nice.
-
8:07
Well neck up is pure CSS, one div, weather animated icons.
-
8:13
I know that because it says it right here on.
-
8:15
The website here are a bunch of animated weather icons,
-
8:19
so if you're building a weather app, bam, this is-
-
8:21
>> You're done.
-
8:21
>> Perfect for you.
-
8:22
Yep, it's all done.
-
8:23
Here is your seven day forecast.
-
8:27
Look like, looks like there's gonna be nighttime right there on the fifth day.
-
8:30
>> [LAUGH]
-
8:31
>> And, and that's gonna be preceded by a rainbow.
-
8:34
So that's, that's all really good information to know.
-
8:37
>> Cannot wait until Thursday, rainbow day.
-
8:40
>> This is, on Code Pen, so you can click edit
-
8:44
pen in lower right corner and see how this all works.
-
8:47
Now, whether or not this is totally practical, do you see what I did there?
-
8:51
Whether or not.
-
8:54
It, it's still pretty useful to learn from, so...
-
8:59
Here are those single divs, so that's exactly all the markup that
-
9:05
is present, so there's just one div for each one of those.
-
9:08
Woah, how are they doing that?
-
9:10
>> Yeah.
-
9:10
>> Well.
-
9:10
>> My forecast, impressed.
-
9:12
>> I [LAUGH].
-
9:18
So there's just one div for each one of these and how are they doing that?
-
9:21
Well for each one, I was guessing that they were using box shadows
-
9:28
and it looks like that that is indeed what they're doing for some of these.
-
9:34
So, here is the sunny one and they are using a box shadow right there
-
9:41
but actually it's mostly just gradients and
-
9:43
then they animate each one of these elements.
-
9:46
So, they just rotate and do a 360 degrees.
-
9:50
There is the key frames right there.
-
9:53
However for cloudy, here we go.
-
9:55
You have a bunch of box shadows right here.
-
9:59
And that's what makes those raindrops up here, so that's pretty cool.
-
10:04
And oh, actually I meant for raining, there we go.
-
10:08
Any way, you've got the idea.
-
10:09
It's basically all done with a little bit of fancy CSS
-
10:13
and some animations, and it's definitely really useful foe learning purposes.
-
10:18
So, if you wanna see how this works.
-
10:20
It's all, all on code pens.
-
10:21
So, you can go ahead and just kinda break away each individual
-
10:25
part and see what happens when you remove it or add stuff.
-
10:29
>> That's amazing.
-
10:31
>> Cool.
-
10:31
Well-
-
10:31
>> I like it.
-
10:32
>> That is all we have time for, this week.
-
10:34
I am @nickrp on Twitter.
-
10:35
>> Yeah, I am @jseifer.
-
10:36
For, for more information on anything we talked about,
-
10:38
make sure to check out our show notes at YouTube.com/gotreehouse.
-
10:43
And also search of us on iTunes.
-
10:44
We are the treehouse show.
-
10:46
>> And of course, if you like to see more videos like
-
10:48
this one, about web design, web
-
10:50
development, mobile business and so much more.
-
10:53
Be sure to check us out at teamtreehouse.com/show for a free month.
-
10:59
Thank you so much for watching.
-
11:00
And we will see you next week.
-
11:02
[NOISE]
-
11:02
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up