Episode 108: Practical Typography, Date Pickers, Form Builders

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