Episode 20: Batch Icon Set, Bootstrap Goodies, Git Aliases, JavaScript Shopping Cart

I'm Jim Hoskins. >>And I'm Jason Seifer. 0:01 [Jim Hoskins]: And you're watching The Treehouse Show, 0:03 your weekly dose of Internets where we talk about all things web design, 0:05 web development, and more. 0:08 [Jason Seifer]: In this episode we'll be talking about Git aliases, 0:10 shopping carts as well as off-line JavaScript. 0:12 Nick Pettit is out this week due to injuries sustained 0:15 by prolonged pokings on Facebook. 0:18 [The Treehouse Show] 0:26 [Jim Hoskins]: Jason, do you like free things? >>[Jason Seifer]: I love free things. 0:28 [Jim Hoskins]: Do you like 300 free things? 0:30 [Jason Seifer]: I like 300 free things 300 times more than I like 1 free thing. 0:32 [Jim Hoskins]: Well, I've got something for you. Batch. 0:37 Batch is a free icon set 0:39 that has some pretty awesome icons, and guess what? 0:43 There's 300 of them. >>[Jason Seifer]: Wow. 0:46 [Jim Hoskins]: So, if you take a look they are some pretty stylish icons, 0:49 and what I really like about it is the variety. 0:52 As you can see, these various speech bubbles 0:55 come with all orientations of little pointy things. 0:58 There are 2 separate keys that are slightly different. 1:01 Little variations on everything. 1:05 I've never actually seen an icon set with 2 different types of 1:07 feather icon for a pen and a fountain pen. 1:10 There's a lot of writing instruments there. 1:13 [Jason Seifer]: Well, you never know what you're going to need. 1:15 [Jim Hoskins]: Yeah. Well, what's really great about them is they come 1:17 pre-rendered in PNG in various sizes, 1:19 but they're also distributed as Photoshop layers 1:21 as well as SVPs, so they will scale well 1:24 and integrate into your Photoshop mockups really nice. 1:26 You can apply layer styles to them, change the colors, and export them 1:29 exactly how you want them to look. 1:31 [Jason Seifer]: Oh, nice. So I guess I would use this in 1:33 web apps or mobile apps or something like that? 1:35 [Jim Hoskins]: Yeah, it's a really great set, 1:37 pretty complete, and you could probably even 1:39 use some of the styles if you need to create your own icons. 1:42 You can reuse some of the shapes if you really need to get 1:44 something that's not in that massive pack of 300 different icons. 1:47 [Jason Seifer]: Oh, that's pretty sweet, 1:50 and free, who doesn't like free? >>[Jim Hoskins]: Love free. 1:52 [Jason Seifer]: I've got 18 more free things for you, Jim. >>[Jim Hoskins]: Okay. 1:54 [Jason Seifer]: The next post over on the Queness blog 1:57 is '18 Useful Twitter Bootstrap Goodies That You Should Know.' 2:00 You might already know about these. 2:04 You might not, but it goes through 2:07 and just concatenates a bunch of different resources for Twitter Bootstrap. 2:09 Twitter Bootstrap is the CSS framework 2:12 that is just slowly taking over the web. 2:15 We talk about it-- 2:17 [Jim Hoskins]: Uh, slowly? >>[Jim Seifer]: Okay, very quickly. 2:19 We talk about it most weeks here on The Treehouse Show. 2:21 So, they go through and they talk about tools for wireframing 2:24 and different generators and templates. 2:27 They link to 1 set of the famfamfam icon set. 2:30 This is not 300 free icons, it's, I think, actually a little more, 2:34 but they're a very small size. 2:39 That works really well with the Twitter Bootstrap buttons. 2:41 There's a ton of different resources out there for Bootstrap, 2:43 just for generating the different markup, 2:46 different templates that you need. 2:48 There's links to different buttons, 2:50 to generate buttons as well as PSD for working with it in Photoshop. 2:52 There's also about 14 more goodies 2:56 that we're not going to go over here on the show, 2:59 mainly due to time constraints, 3:01 and I don't like saying the word 'goodies' repeatedly, 3:03 but we'll have a link to them in our show notes 3:06 which you can get at YouTube.com/GoTreehouse. 3:09 [Jim Hoskins]: That's a lot of goodies. >>[Jason Seifer]: It is. 3:12 [Jim Hoskins]: And you know, Bootstrap itself is pretty good, too. 3:14 So, goodies for goodies. 3:16 Well, switching from design to a little bit more development-focused, 3:18 I've got a great article here about some of the must-have Git aliases. 3:22 So, if you ever use Git on the command line, 3:26 you have your built-in commands, like log and checkout and branch, 3:28 but Git also allows you to create aliases very easily 3:33 for commonly used commands and options, 3:36 and this one outlines a lot of good ones. 3:40 For instance, looking at your log in a very organized way, 3:42 and a lot of different ones--there's just too many to go over. 3:44 I haven't had a chance to use all of them, 3:48 but I've implemented some of them and they are really nice 3:50 if you want to just do some pretty common operations 3:52 on your code, like taking a look at the last few commits 3:55 and being able to see very quickly what happened 3:58 as well as moving files in and out of the Index and committing them. 4:00 So, it's a lot of the commonly used operations 4:03 combined as Git aliases that you can use very easily. 4:06 [Jason Seifer]: Huge time saver if you haven't gone through the process 4:11 of setting up aliases for commonly used commands. 4:14 [Jim Hoskins]: I don't have too many aliases, because I find that if 4:17 I overdo my aliases, I become completely dependent on them, 4:19 and then as soon as I get on a computer where I don't have the aliases 4:21 set up, I'm completely lost. 4:24 But a lot of these are really good because they are aliases 4:26 that are pretty long and pretty unlikely for you to type out when you really want them. 4:28 For instance, the decoration on the logs and things like that. 4:33 [Jason Seifer]: Do you think the plural of aliases is aliases? 4:35 [Jim Hoskins]: I believe so. With an 'ES.' Aliases? 4:38 [Jason Seifer]: Aliasi? >>[Jim Hoskins]: Aliasi. 4:41 [Jason Seifer]: Aliasites? 4:43 Next up we're going to be talking about a project called 'simpleCart.' 4:45 This is a completely free and open-source JavaScript shopping cart. 4:47 There's a demo on the site right here. 4:51 This is super easy to integrate with your website. 4:54 So, if you want to add a book to your cart, just hit this Add to Cart button. 4:57 Look at that. >>[Jim Hoskins]: Whoa. 5:00 [Jason Seifer]: This zooms out and then it goes right into your shopping cart 5:02 right up there, and then you can change the number of items 5:04 you want in there and click the Checkout button. 5:07 This actually will hook up to your Paypal account. 5:09 There are a ton of different callbacks, and it's just super easy 5:13 to integrate on your site, and you can get the link 5:17 to simpleCart(js) in the show notes, 5:20 which are at YouTube.com/GoTreehouse. 5:23 Tons of documentation and easy-to-read source code. 5:27 Really great project. 5:30 This came out relatively recently, 5:32 and I see, literally, no reason not to use it 5:34 if you're just looking for a simple shopping cart for your site. 5:37 [Jim Hoskins]: One thing you do want to watch out for, 5:39 especially since it's a JavaScript-based application, 5:41 you have to really check those orders if you're 5:43 delivering either physical items or digital items, 5:46 because you could really just change the Javascript on the page 5:49 as a client and maybe change the price from $9 to 1 cent. 5:53 [Jason Seifer]: Incredible bargain. >>[Jim Hoskins]: It's a real bargain. 5:58 So, that's something to look out for, 6:00 either validate using a little bit of server code, 6:02 or if you're selling shirts, just take a look and make sure they paid enough 6:05 for the shirt you're sending out or whatever piece of merchandise. 6:08 That's the only little gotcha versus sort of a full, backend based 6:11 e-commerce solution. 6:15 [Jason Seifer]: It's a really good point. Also, not something that we totally advocate. 6:18 You know. Stealing. 6:21 [Jim Hoskins]: Yeah, don't steal. No. 6:23 Okay. So, on mobile-- >>[Jason Seifer]: Mobile. 6:26 [Jim Hoskins]: Mobile's important. There's this problem. 6:29 [Jason Seifer]: Like a phone? Like a cellular telephone? 6:31 [Jim Hoskins]: Yeah. Like a pocket computer with a touchscreen on it. 6:33 So, what happens when, for instance, on a page 6:35 where you normally have your onclick event 6:39 there's a little problem, because the phone is actually waiting for you to do a double click? 6:41 So, when you click it or when you tap it, 6:45 you actually don't get your click event fired for about 300 milliseconds 6:48 while it's waiting to see if you're going to do a double click. 6:52 [Jason Seifer]: Oh, my, and this is in JavaScript? 6:55 [Jim Hoskins]: This is in most mobile browsers, 6:57 like Mobile Safari, Mobile Chrome, 6:59 and it becomes a real problem because it makes 7:01 your page seem less responsive, 7:04 because you click it and then there's a little bit of a pause. 7:06 [Jason Seifer]: I wish there was some sort of workaround for that. 7:08 [Jim Hoskins]: Well, I've got something, 7:10 called 'fastclick,' and it's a really small, really easy to use 7:12 JavaScript library that pretty much fixes it. 7:16 Basically, by using a different type of event 7:19 it can replace the touch event with the click event 7:21 making the taps instantaneous. 7:25 Now, this does have a couple things you need to work around. 7:28 For instance, if you are doing a double click, 7:31 you may have to work around it because it's going to fire your click event 7:33 immediately, and there are a couple of other problems, 7:36 because the click event that's created using the JavaScript framework 7:38 isn't a real native one, so there are some things 7:43 like focusing on forms or certain actions that might be restricted, 7:46 but it actually has a build-in class that you can apply to the elements 7:50 where you need a real native click 7:54 and it will fall back to that slightly delayed real click. 7:56 It's a nice drop-in solution. 7:59 If you're on a normal desktop browser, 8:01 it doesn't do anything. 8:03 So, it knows which browsers it needs to use, 8:05 and it fixes it for you and makes your sites just a little bit faster. 8:07 [Jason Seifer]: That's really fantastic. >>[Jim Hoskins]: Yeah, it's really nice. 8:09 [Jason Seifer]: And fast. >>[Jim Hoskins]: Fast. 8:11 [Jason Seifer]: Next up, we have a datepicker 8:13 for jQuery. 8:15 Why another datepicker? This one's called 'pickadate.js.' 8:17 The answer to why another datepicker 8:20 is that this is responsive and lightweight. 8:22 It clocks in at just 3.3 kilobytes gzipped, 8:25 and it just lets you turn any text element into a little date popup. 8:31 Scroll through, pick everything. 8:36 There's pretty easy code as well as just a 8:39 ton of different options. 8:42 It works with the native HTML5 type="date" element 8:44 as well as just tons of different options for clicking around 8:47 and finding different dates. 8:52 A really quick project, but like we said, 8:54 it's lightweight and responsive. 8:56 That's pickadate.js. 8:58 [Jim Hoskins]: Wow, that makes picking a date on the Internet really easy. 9:00 [Jason Seifer]: Yeah, it does. A lot easier than it used to be. 9:02 [Jim Hoskins]: Yeah. Okay. >>[Jason Seifer]: We've all been there. 9:04 [Jim Hoskins]: So, have you ever been filling out a form 9:07 and there's so much stuff and then hit Submit, 9:09 and it's like, Yo, you dropped your Internet. 9:13 I couldn't submit it, you're not online. 9:15 [Jason Seifer]: Oh, yeah. >>[Jim Hoskins]: Isn't that lame? 9:17 [Jason Seifer]: Then you have to type everything in again. 9:19 [Jim Hoskins]: Ugh. I've got a solution. >>[Jason Seifer]: What's up? 9:21 [Jim Hoskins]: What if the website you were typing everything in on 9:23 told you when you were offline? >>[Jason Seifer]: Whoa. 9:26 [Jim Hoskins]: So, that's where Heyoffline.js comes in. 9:28 It does exactly that. 9:30 If you were to disconnect, 9:32 it'll pop up a nice little box saying, Hey, you're offline. 9:34 But it does a couple extra things, too. 9:37 You can set it up so it only triggers that pop-up box 9:39 if they've filled in some text on a form. 9:42 So, if you're just browsing, it won't really yell at you 9:45 for being offline, but if you start filling in a form, 9:48 where you're treading in that dangerous territory 9:50 of losing some information, it can say, 9:52 Hey, you probably shouldn't submit this because you're not online. 9:54 And it has some really nice options. 9:58 It doesn't require jQuery or anything else; it's completely self-contained, 10:01 very small, and very easy to use. Just drop it right in. 10:04 [Jason Seifer]: Very nice. I like that it yells at you. 10:07 [Jim Hoskins]: It does. Hey, you're offline. 10:10 [Jason Seifer]: It's a great tagline. >>[Jim Hoskins]: Perfect. 10:13 [Jason Seifer]: Next up we have a WordPress theme 10:15 called, 'Bones.' 10:17 This has probably one of the best graphics I've ever seen on a theme website. 10:19 Look, it's got a guy made out of bones and a top hat, just throwing it around. 10:24 Anyway, this is a 10:27 starter theme for WordPress development. 10:30 This is not a framework. 10:34 So, you're just going to start with the Bones theme 10:36 and then add on to it. 10:38 This is a mobile-first and responsive theme. 10:40 It's built off of HTML5 Boilerplate, 10:43 so it gives you a great starting point 10:46 when building a WordPress theme. 10:48 It's also made with LESS and Sass, which is actually great for developers, 10:50 and the selectors that they use are really fine tuned, 10:55 so that you can see exactly what's going on when working with a theme. 10:58 This theme is actually completely free, so you can check it out over on GitHub. 11:02 Clone it, contribute to it, whatever you want to do. 11:06 Anyway, great theme, check that out. 11:09 Once again, we will have a link to that in the show notes. 11:11 [Jim Hoskins]: Awesome. It seems like a really good starting point 11:15 for building WordPress themes. It can be pretty tricky to get started with. 11:17 To pick a really full-blown theme that's close 11:19 and try to change it, 11:22 but starting from scratch, something nice and clean, simplified. 11:24 [Jason Seifer]: Yeah, very lightweight. >>[Jim Hoskins]: That's the way to go. 11:26 [Jason Seifer]: So, that's it. That's all we have for you this episode. 11:28 Jim, who are you on Twitter? 11:31 [Jim Hoskins]: I am @JimRHoskins at Twitter. 11:33 [Jason Seifer]: And I am @JSeifer on Twitter. 11:35 Thanks so much for tuning in to this episode of The Treehouse Show. 11:37 For show notes and more check out our YouTube Channel 11:40 at YouTube.com/GoTreehouse. 11:43 [Jim Hoskins]: This episode of The Treehouse Show was brought to you 11:46 by Treehouse, the best way to learn how to design 11:48 and develop for web and mobile. 11:50 Check us out at TeamTreehouse.com. 11:52 [The Treehouse Show] 11:57 [?music playing?] 11:59 [treehouse™] 12:01 [Narrator]: If you'd like to see more advanced videos and tutorials like this one, 12:02 go to TeamTreehouse.com and start learning for free. 12:06 [?music playing?] 12:09

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

Sign up