Episode 127: Time Pickers, Decimals, Text Areas

I'm Nick Pettit. 0:00 >> And, I'm Jason Seifer. 0:01 >> And, you're watching the Treehouse Show, your weekly dose of internet, 0:02 where we talk about all things web design, web development, and more. 0:05 >> In this episode, 0:08 we're talking about time pickers, decimals, text areas, and more. 0:09 >> Let's check it out. 0:14 [MUSIC] 0:15 First up is Clock Picker. 0:20 Now, if you've ever seen, like a date picker for maybe a calendar, where you 0:23 wanna pick a specific date, and you click on it, and a little calendar flies out. 0:27 Well, this is the same thing, only for picking times. 0:31 This is a time picker for Bootstrap, but you can also use it with jQuery. 0:35 It was originally designed to be used for Bootstrap. 0:40 So, Bootstrap and jQuery are the only dependencies. 0:46 But, it's pretty cool, so, when you have a time here, you could go ahead and 0:50 just type it in or, whoa, you could use this cool UI widget that flies out. 0:55 Now, here you can pick an hour, or you can pick, you know, 1:02 the military time if you prefer that, and then you can pick a minute here. 1:07 So, you can swing all the way around, and then you just click this button that 1:15 I assume says okay, and that will give you the time. 1:20 So, not a whole lot to say about it, 1:25 there's a few more features that you can dig into here yourself. 1:28 But, very cool piece of UI, I've never really seen anything quite like that. 1:31 So, definitely be sure to check this one out. 1:37 >> Yeah, very nice. 1:39 I pick that one for my time picking library. 1:40 Next up, we have a project called decimal.js, 1:44 which is an arbitrary precision Decimal type for JavaScript. 1:46 Now, if you need to use decimals, rather than floating point numbers in 1:51 your JavaScript programs, this is the library for you. 1:56 This is a fast, small, and 2:02 easier to use version of JavaScript for Java's big decimal library. 2:04 It's a very simple and full featured API. 2:09 I know, because it says that right in the feature list. 2:12 And, these are all of the different methods that it supports. 2:15 You can do division, subtraction, addition, 2:20 all of the math that you would expect to. 2:23 It also does exponential, floors, 2:25 negation, logarithms, and just a ton of different things. 2:29 Now, it has a very comprehensive documentation suite, 2:33 so you can see how exactly to work with the decimal library. 2:37 Now, you're gonna want to use this if you need to use arbitrary precision decimals, 2:42 rather than just regular floating point numbers in JavaScript. 2:46 You can see it supports random, square root, power, max, min, 2:50 exponents, just a ton of different things. 2:54 And, it has all the different properties, so if you are looking for 2:57 a decimal library, ahead and check this out. 3:00 We will have a link to it in the show notes. 3:03 >> Sounds like they did the math. 3:07 >> Should have seen that coming, but I just didn't put two and two together. 3:12 >> Next up is International Telephone Input. 3:15 This is a jQuery plugin for entering and 3:17 validating international telephone numbers. 3:20 >> Now- >> I hope those bad 3:24 jokes don't cause a division between us. 3:24 [SOUND]. 3:26 Here's a really cool demo of International Telephone Input. 3:31 Here is what a phone number looks like when it's formatted for the United States. 3:36 Uses +1, I guess, cuz the U.S. thinks it's number one. 3:41 There's the United Kingdom, which is +44, that's the country code there. 3:45 But, if I click off of this to remove it from my browser focus, 3:50 you can see that it shows how a number should be formatted for the UK. 3:55 Now, this little flag icon is pretty cool, because you can click here, and 4:00 scroll through all these different countries from all around the world. 4:05 And, you can select one of them. 4:11 And, again, same thing, you can see the country code, and 4:13 how a phone number should be formatted for that country. 4:16 Now, this is very useful if you've ever tried to do internationalization on 4:20 an app, you know that that is something that's pretty complex. 4:25 And, it's because of things like this. 4:29 Little things like phone numbers that you wouldn't really think about, 4:31 it wouldn't end up being a very complicated affair, 4:34 because you have to properly format the phone number for every single country. 4:37 So, this is a very handy plug-in for jQuery if you need to, 4:43 again, internationalize your phone numbers. 4:49 >> Very nice. 4:53 Next up, we have a library called Squire, which is a text area of the future. 4:54 I know that, because it says that right there in the header of the website. 5:01 So, here is a sample text area, 5:05 and you can see I have already filled it in with some information. 5:07 And, up across the top here, we have a toolbar which will let us do 5:12 different formatting for these items, and we can choose what we want. 5:17 Let's go ahead and put that in mono space and make it medium sized, okay, 5:22 that looks good, we can even change the font, or do different lists. 5:27 Now, this is in HTML5 rich text editor, it is very, very easy to use. 5:32 Instead of a text area, you just give it a link to an iFrame. 5:39 You can get the code up on GitHub, we'll have a link to that in show notes, and 5:45 then it tells you how to go through, and install, and use it. 5:48 Now, you can use more than one text area on the page if you want to. 5:52 This works pretty well with node, but you do not have to use node unless you 5:55 want to use the test suite, and build it yourself. 6:00 Not too much to say about it, 6:04 it's just a really good, really fast, HTML5 rich text editor. 6:05 So, check that out if you are in the market for one. 6:09 >> Very cool stuff. 6:13 Next up is The State of Web Type. 6:13 This is an up-to-date data on support for type and typographic features on the web. 6:17 You can search or choose from the features below to get started. 6:24 So, basically, this is just like, can I use, but 6:28 it's a little bit more in depth and focused specifically on fonts. 6:32 So, for example, I can click on something like font-face here. 6:38 And, it will tell me, oh, okay, font-face is supported in all of 6:42 these major browsers, and it's supported as far back as Internet Explorer 6. 6:48 Okay, great, this is something that's definitely going to be safe to use. 6:55 However, if you click on something else like SVG fonts, 6:59 there's not as good support there. 7:04 There's partial support in a lot of versions of Chrome, and 7:07 there's only some support in other browsers. 7:12 There's not support in Firefox, or Internet Explorer. 7:17 And, oh look, recently they have also been marked as deprecated in Chrome and 7:20 Opera, do not use them. 7:26 See, that's a kind of great stuff that you can find on this website. 7:27 Anyway, there's a whole lot of other font features here. 7:34 So if you are using fonts on your website, which you probably are. 7:38 >> You probably are. 7:42 >> Definitely be sure to check that out. 7:43 >> Next up Nick, we have something that we don't often have on this show. 7:45 In fact, this would be the first time, which is what I mean by not often. 7:49 One of our students, a man named Johnny Rate, got in contact with us, 7:52 and asked us for help proposing to his girlfriend, Lauren Clark. 7:57 So, let's see if we can get a picture of the happy couple up on the screen here. 8:02 Lauren, Johnny would like to say that he is immensely proud to have been able to 8:07 call you his girlfriend for almost the last five years. 8:11 And, was hoping you would do him the honor of agreeing to be his wife. 8:15 And, he promises to never make you second rate. 8:20 Get it, cause his last names Rate. 8:24 >> I got the joke. 8:25 You know, I'm really sad that we couldn't be there for that photo. 8:26 Could we maybe get us in the picture there? 8:30 Cuz, there we go. 8:33 >> That looks good. 8:35 >> That is, that is so much better. 8:36 >> And, now we re, we really tie the room together in that picture. 8:39 >> Yeah that just, that feels right. 8:41 >> Anyway, they're going on a trip to Amsterdam, so have a lot of fun. 8:43 Congratulations. 8:47 And, we'll see you next week. 8:49 >> See you later. 8:51 [MUSIC] 8:52

You need to sign up for Treehouse in order to set up Workspace

Sign up