Episode 84: CSS Frameworks, Facebook Predictions API, Development Techniques

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse show, your weekly dose of internets, 0:01 where we talk about all things web design, web development, and more. 0:04 >> In this episode, we're talking about a new CSS framework, 0:07 new Facebook API you might wanna use, new development techniques, and more. 0:11 >> Let's check it out. 0:15 [MUSIC] 0:17 First up, we're gonna be talking about a new CSS framework. 0:22 Now the hugely popular bootstrap and 0:25 foundation frameworks just announced a new merger. 0:27 Now with each framework steadily gaining popularity, the authors of 0:31 each framework decided that they didn't want to keep duplicating work. 0:34 Now, the new CSS framework is going 0:37 to be available immediately, and provide full backward 0:39 compatibility with all existing versions of both frameworks 0:43 by combining the CSS selectors and the markup. 0:47 Now, here is an example from the documentation for creating a three column 0:50 grid layout, which is something that we're all pretty well used to using. 0:54 Now you can see we have something right here. 0:58 We start with a regular div row. 1:01 So we say div class equals row. 1:04 Now what's nice about this is, we can use all of the 1:06 different CSS classes that we're already 1:09 used to from either Foundation or Bootstrap. 1:11 So we say div class equals row, and then we use Bootstrap-two-compatible. 1:14 Then we also wanna make this 1:20 Bootstrap one compatible, so we add Bootstrap-one-compatible. 1:21 Foundation-four compatible and then so on and so 1:25 forth all the way down to foundation one. 1:29 Now when we're going through and making the columns, that's also super easy. 1:32 We just add div class equals, small-two, large-four 1:36 columns, call-mdone, call-sssix, call-mdfour, and 1:42 that's it, that's all we have to do, to create a single column. 1:47 Go through, create again for each different 1:50 column we wanna make, nothing could be simpler. 1:53 Now this is great new system is so much 1:57 easier to develop with, by you know, by having 1:59 developers write less code, To work with all of 2:02 the different existing versions of Bootstrap and the foundation frameworks. 2:05 It targets all previous versions of HTML and 2:09 it works with Internet Explorer Beta and Up. 2:12 So the project they just settled on a name. 2:15 They're calling it Bootstrap Foundation Five. 2:19 So its' initials are nicely BFF. 2:22 One thing that is different about this project 2:25 is, compared to all of the previous ESS frameworks 2:27 is their gonna be offering long term support with 2:29 a different edition of the library called long term. 2:32 So Bootstrap Foundation 5 Long Term, project code name BFFL. 2:35 >> That's really smart and I'm glad that they combined both of those together. 2:40 So instead of having to pick between Bootstrap 2:44 or Foundation, you can just pick both and. 2:46 >> Yeah, why not both, right? 2:48 >> Yeah. 2:50 That's, that's great. 2:50 Well, next up is the Facebook prediction API. 2:52 >> Wow, it's almost like we knew they were gonna combine them at some point. 2:55 >> It's crazy. 2:59 This past week in a press release from 3:00 Facebook, Mark Zuckerberg announced the Facebook Prediction API. 3:02 Facebook will now allow developers to leverage Facebook's massive database 3:07 to make predictions about what a user will do next. 3:12 Such as when they'll take a picture of their 3:16 food, when they'll take a selfie at the gym. 3:19 And if they're in a relationship. 3:21 When they're likely to get into a very 3:23 public and horribly embarrassing argument with their significant other. 3:25 This will also allow Facebook advertising partners to display just the right 3:29 ad at the right time such as diet pills or relationship counseling. 3:34 So the API will also enable a new autopilot 3:38 feature, and this is really cool, where users can 3:42 have Facebook, like their friends statuses, and automatically post 3:44 witty comments and hash tags emulating the appearance of empathy. 3:49 And Actually giving a [INAUDIBLE]. 3:53 >> Hashtag I love it. 3:55 >> Yeah. 3:57 >> Hashtag I can't wait to implement that in my app. 3:57 >> It's great. 4:00 Yeah, yeah. 4:00 >> That was, that was one big hashtag, not a bunch of separate ones, by the way. 4:01 >> That's smart. 4:04 >> Yeah. 4:05 So next up, you know, Nick you may have heard of test-driven 4:06 development, before where you write your tests first and then you go. 4:10 Or even the Pomodoro technique where you code for 25 minutes 4:14 straight on a timer, then you take a five minute break. 4:18 >> Yup. 4:22 >> So this could be kind of cumbersome and you 4:22 know, sometimes your mind needs a little bit of a break. 4:24 After doing the latest test driven Pomodoro technique. 4:28 And scrumming your agile pair programming, your mind needs a little bit of a break. 4:31 Now recent scientific studies have proven that you're more likely to 4:36 be creative after the neurons in your brain have been stimulated. 4:40 This neuronal stimulation can be triggered by laughter, 4:45 but also has recently been discovered to be 4:48 triggered by an evolutionary response in humans which 4:50 is activated in the same areas of the brain. 4:53 As those responsible for protecting offspring. 4:57 Programming luminary Corey Haines has recently discovered how 5:01 to activate this technique, using pictures of young animals. 5:04 So a new application has recently come out that harnesses these findings. 5:08 Now the application works like this. 5:12 One or two people will be programming potentially impairers as pair programming. 5:14 Now, as soon as the web cam on 5:19 your computer detects your attention being diverted from 5:21 the coding task at hand a picture of a cute animal is shown on the screen. 5:24 Now, the coder can then click on the picture 5:30 of this animal for pictures of more cute animals. 5:32 So, this revolutionary programming methodology is 5:35 called Add driven development, or ADD. 5:38 >> That's smart, yeah, I, I really like that, 5:41 I mean, that's gonna make it a lot easier to. 5:45 You know, stay focused, but take a break when you need it. 5:47 And you know. 5:50 >> Yeah, I know and like let's go swimming. 5:51 >> Yeah, exactly. 5:52 Love it. 5:54 Well, next up is Google Sash. 5:55 Now, it's no secret that Google has been working on wearables and other forms of. 5:58 Technology that use the android operating systems, so like 6:05 Google Glass is an example of this as well. 6:08 This week, Google introduced Google Sash, a wearable computing 6:10 environment that sits on your hips in a pouch. 6:15 >> Ooh, fashionable. 6:18 >> Kinda Like a fanny pack basically. 6:20 So, in an attempt to compete with Apple and its minimalist. 6:22 Interface design. 6:26 Google Sash provides very few interface elements. 6:27 The Beta, Google Maps Sash application uses an internal gyroscope and haptic 6:30 vibrations in different parts of the pouch to let the user know. 6:37 Which way they should move. 6:40 >> That's pretty cool. 6:42 >> So, of course, Google has really high hopes for 6:43 the fanny pack, and announced a couple of launch partners. 6:46 >> Oh cool. 6:49 >> The first version of Sash will be available with 6:50 Google Sash Maps for directions as well as connectivity tracker. 6:52 >> Ok. 6:57 So like count your steps. 6:57 Kinda like a FitBit. 6:59 >> Yeah, exactly. 6:59 And some of the initial Partners are really excited about the prospect of 7:01 having the hip pack vibrate uncontrollably as users pass a sponsored establishment. 7:06 So, the vibrations can only be stopped by entering the place of business 7:12 and by using an in app purchase of $0.99 to $4.99 for the product. 7:16 >> And I'm sure we'll be covering the API's here on the Treehouse show. 7:21 >> Yeah. 7:24 Oh, definitely. 7:25 Version two of Google Sash will respond to 7:26 thrusting motions, to take photos from the integrated 7:30 camera, and will also be available in different 7:33 colors, compared to the denim only first release. 7:36 >> Wow, I can't wait to get my Google Sash, and wear it everywhere. 7:40 >> I'm super excited. 7:44 >> I will be the belle of the ball. 7:45 >> Well, that's all that we have time for this week. 7:47 I am @nickrp on Twitter. 7:50 >> And I am @jseifer. 7:52 For more information on anything we've talked about, make sure to check 7:53 out our show notes at youtube.com/gotreehouse 7:56 or search for us in iTunes. 7:59 We are The Treehouse Show. 8:00 And please don't forget to rate us. 8:01 >> And of course, if you'd like to see 8:03 more videos like this one, maybe better videos, about 8:04 web design, web development, mobile business, and so much 8:08 more, be sure to check us out at teamtreehouse.com. 8:11 Thank you so much for watching and we'll see you next week. 8:14 [MUSIC] 8:18

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

Sign up