Episode 51: JavaScript diagramming, SASS, HTML5 Elements

[Nick Pettit] I'm Nick Pettit. >>[Jason Seifer] I'm Jason Seifer. 0:01 [Nick Pettit] And you're watching the Treehouse Show—your weekly dose of Internets 0:03 where we talk about all things web design, web development, and more. 0:06 [Jason Seifer] In this episode we will talk about JAVA Script diagramming, 0:09 SASS, HTML5 form elements, and more. 0:12 [Nick Pettit] Let's check it out. 0:16 [The Treehouse Show] 0:18 [Nick Pettit] First up is Macaw like the sound that a bird makes. 0:24 It's basically a code savvy web design tool. 0:29 And what I mean by that is that it is a Mac app that's coming soon to the app store 0:34 that will allow you to actually design your Web sites in an application 0:39 rather than designing it in like Photoshop or—which I guess is an application technically— 0:44 or in code and designing in the browser. 0:50 So—it is a little bit different in that it actually will output code. 0:52 And now we just talked about a tool similar to this called WebFlow 0:57 on last weeks episode, and this tool is very similar 1:01 except instead of being in the browser it is actually a Mac application. 1:06 So—as you can see here—pretty similar in that you can adjust 1:10 all of the different CSS properties using this WYSIWYG interface. 1:14 It will go ahead and output code; it does a bunch of cool responsive and typography stuff. 1:19 And if we scroll down here to the bottom they say that Macaw is built on 1:25 this revolutionary engine called Alchemy which will produce code that 1:31 you'd be proud to hand over to developers. 1:37 And they offer up this example where they have this button class 1:40 which I presume is applied to all these buttons over here on the left. 1:44 And then they have these secondary classes that actually just apply 1:48 a different background color which is the only thing that is different 1:54 between each of these three buttons. 1:57 So Alchemy—I guess—must be fairly intelligent to know that 2:00 it should consolidate the common code and only apply code that is different to each element. 2:05 So this is pretty interesting; they offer up a few more details 2:11 about how Alchemy works, but you can go ahead and watch 2:14 a preview video—I believe that is up here at the top. 2:18 So I will let you go ahead and watch that preview video on your own time. 2:22 It is 20 minutes long, and—. >>[Jason Seifer] I say we watch the whole thing right now Nick. 2:27 [Nick Pettit] Let's just play it then. >>[Jason Seifer] We'll get comfortable—maybe light some candles. 2:31 [Nick Pettit] Make some popcorn. >>[Jason Seifer] Yeah. Make a night out of it. 2:36 [Nick Pettit] They also have it split out into various chapters here, 2:39 so you can skip along, and then they also are collecting email addresses 2:43 if you'd like to be notified when it hits the app store. 2:47 There is actually another tool that is similar to Macaw 2:51 that we are going to be talking about later in the show, so I will leave additional thoughts for that one. 2:55 [Jason Seifer] I hope you don't mind I signed you up for their mailing list 20-30 times. 3:01 [Nick Pettit] I'm looking forward to it. >>[Jason Seifer] Next up we have a project called Joint JS. 3:06 This is a JAVA Script diagramming library. 3:11 Now—you might wonder why we are talking about yet another JAVA Script joint diagramming library. 3:14 We have talked about that before—well this one let's you get interactive 3:20 with your JAVA Script diagrams; it also has a really, really easy to use API. 3:23 Now if we take a look at the site you can see it is got just a ton of features 3:27 that it tells you about, but what is really neat—let's just get to the demos. 3:31 Here are some demos right on here—look—they got a chess board that you can do 3:35 right in the browser there; you can even move the chess pieces. 3:39 Well—you know—whatever—it is cool. It is just a diagramming library or is it? 3:43 Look—you can create an organizational chart right there very, very easily in JAVA Script. 3:46 Now I cannot vouch for the accuracy of this chart since it has Bart Simpson 3:52 as the CEO of this hypothetical company. 3:56 I think we all know that would be LIsa. 3:59 But—anyways—see they have got a ton of different demos. 4:01 And there is a very, very thorough API that you can see here on the left 4:04 just how many different attributes and options you have. 4:10 So—anyway—this is just a really great piece of JAVA Script— 4:15 a great library to use in your applications. 4:18 And go ahead and check that out; we'll have a link to it in the show notes 4:21 which you can get to at YouTube.com/GoTreehouse or in iTunes search for us at the Treehouse Shop. 4:23 [Nick Pettit] Very cool stuff—now—as I said previously— 4:30 where I was so rudely interrupted—. 4:33 [Jason Seifer] I brought the pain with that Nick—that was rudely interrupted 4:36 with some gold information. Thank you. 4:40 [Nick Pettit] That's true—it was worthwhile. >>[Jason Seifer] Highly offensive. Got me right in the feels. 4:43 [Nick Pettit] Anyway—there was this other app that I wanted to talk about 4:47 that's very similar to Macaw, but this one is called Dimensions. 4:51 And actually I should take that back—it is not very similar to Macaw— 4:55 it actually does far less, but it's similar in the same vein that it allows you to 4:59 test responsive Web sites. 5:06 So this is another tool that I think is—you know—once again—outside the realm 5:08 of your normal text editor, photoshop, the tools that you typically think of 5:15 when you think about Web design and development. 5:21 So I guess I actually have a question for the viewers 5:24 and that is do you use any of these tools? 5:27 I personally don't; I haven't really found a good flow to include a tool like Web Flow or like Macaw. 5:30 But there is actually another one—I think it's called—gosh I cannot think of the name of it. 5:39 It is an Adobe tool, but Adobe is in this as well, so they're making 5:43 all sorts of tools like this where you can—you know—manipulate things 5:48 in this WYSIWYG interface. 5:51 I am not sure how I feel about that just because of the way the 5:53 code has been historically from WYSIWYG tools—it is usually pretty bad. 5:58 So I am kind of interested to know if anybody is actually using these 6:03 and what their experiences have been like 6:07 because I feel like I have absolutely no pulse on the popularity of these things. 6:09 [Jason Seifer] What's nice about this one is it's a Chrome app too. >>[Nick Pettit] Yes. 6:14 [Jason Seifer] So that has—you know—far less for you to do than 6:17 go all the way to the app store and fill out someone else's email address 6:20 20 times for the mailing list. >>[Nick Pettit] Exactly. 6:23 I really should emphasize that this tool is different. 6:25 I shouldn't lump it into the same category. 6:28 It is actually for responsive testing, and it doesn't generate any code, 6:30 but it is still—you know—just yet another tool on top of all the other ones. 6:35 And I am kind of curious—you know—how many web developers 6:39 and designers actually use stuff like that versus just resizing the browser. >>[Jason Seifer] Yeah. 6:43 [Nick Pettit] Or testing on devices—it seems kind of strange. >>[Jason Seifer] So tweet Nick. 6:48 [Nick Pettit] That's right—you should tweet me @NickRP on Twitter. >>[Jason Seifer] Yeah. 6:52 I actually don't care how you guys work, so leave me out of this. Don't CC me on that one. 6:55 [Nick Pettit] You should CC @JSeifer. 7:00 [Jason Seifer] So next up—and I am not calling you this Nick. 7:03 This is an actual site that we are talking about called SassMeister. 7:07 [Nick Pettit] It is okay—you can call me SassMeister—I don't mind. 7:10 [Jason Seifer] I would prefer to keep it professional. >>[Nick Pettit] Okay. 7:12 [Jason Seifer] So SassMeister.com will let you try out SASS and SCSS, 7:15 and then it will show you the CSS that it compiles down to right next to you in the second column there. 7:20 [Nick Pettit] And after just a couple hours you too can be a SassMeister. 7:26 [Jason Seifer] Yeah—buy our free eBook. 7:29 So I pasted in some SASS over on the left column there. 7:33 And if you click on one of these things you can see that 7:37 the—I have pasted some incorrect SASS in here which is a little bit bizarre 7:41 since I got it from the SASS Web site as an example. >>[Nick Pettit] Weird. 7:46 [Jason Seifer] Yeah—but trust me for the most part this works. 7:50 I was messing around with it before the show. 7:54 I am going to just leave that train wreck where it is. 7:57 Check it out at SassMeister.com. 7:59 [Nick Pettit] Next up is Typer.JS which is this really cool 8:03 jQuery plugin that will actually type out code onto the screen 8:08 which—you know—could be good for—Jason brought up the example— 8:12 like a movie Web site or—I don't know—it is just kind of a cool visual effect. 8:16 [Jason Seifer] I got another idea too. >>[Nick Pettit] What's that? >>[Jason Seifer] It could be for a restaurant Web site. 8:21 And as you scroll past an item it types out some delicious sides 8:24 you might want to get with it. >>[Nick Pettit] That is clever. 8:29 So if we could go ahead and scroll down the page. 8:32 [Jason Seifer] Or perhaps a wine pairing. 8:34 [Nick Pettit] They have this little demo here where they're actually 8:36 suggesting different flowers to pair with your meal. 8:40 But you can see here how it actually types out the text, 8:45 and—you know—it does this all auto magically. 8:50 So it is a really cool jQuery plugin. 8:53 Go ahead and check it out—it's Typer.js. 8:56 [Jason Seifer] Very nice—next up over on the HTML5 Doctor Web site 9:00 there is this absolutely great list of every HTML5 element 9:05 As well as a short description of that element 9:10 and a link to the documentation in the specification. 9:13 How cool is that Nick? >>[Nick Pettit] Pretty cool. 9:17 [Jason Seifer] Yeah—this is just super thorough too. 9:19 And—you know—it includes all the elements you would think would be there. 9:22 You know—it has got the A link, abbreviation, address. 9:25 It is separated by—you know—it is in order—alphabetical order. 9:28 And there might be some that you don't even know existed. 9:34 For example—did you know that WBR tag elements? 9:37 [Nick Pettit] I actually did know about that tag coincidently, 9:41 but—yes—it is a very rarely used tag. 9:43 [Jason Seifer] This element represents a line break opportunity. >>[Nick Pettit] That's right. 9:46 [Jason Seifer] Because you don't want to have any line break regrets 9:49 in your HTML5 document. >>[Nick Pettit] Very true. 9:51 [Jason Seifer] Yeah—so we'll have a link to that one in the show notes. 9:54 And that's on the HTML5 Doctor Web site—not too much to say about that. 9:57 [Nick Pettit] Very cool stuff—well next up is Zero Clipboard. 10:00 This is basically a way to copy things to the clipboard 10:04 and then the user can go ahead and paste them elsewhere. 10:09 Now there is actually really not a very good way to do this. 10:12 The only way you can do it is using Adobe Flash. 10:16 And this is basically a JAVA Script interface for it. 10:21 So it creates an invisible Adobe Flash movie, and you can have say this text area here. 10:24 And you can go ahead and type stuff in, and then you can say copy to the clipboard. 10:33 And now when I paste here—this is risky—I go ahead and paste. 10:37 And you can see that it is actually just copied exactly what I typed in there. 10:42 So—pretty cool if you need a way for your users to get stuff over to the clipboard. 10:49 This is definitely one to check out because it is notoriously difficult. 10:55 [Jason Seifer] Yeah—it is cool how it works—it floats the invisible Flash movie 10:58 on top of the dom element of your choice. 11:03 So that is kind of neat—anyway—I guess that is all we got for this episode, huh? 11:06 [Nick Pettit] Who am I on Twitter? >>[Jason Seifer] Who are you on Twitter? >>[Nick Pettit] Is that what you were about to ask? 11:10 [Jason Seifer] That is. >>[Nick Pettit] I am @NickRP. >>[Jason Seifer] It's like your read my mind. 11:13 We finish each other's sandwiches. >>[Nick Pettit] Sentences. 11:16 [Jason Seifer] I am @JSeifer—for more information on anything we talked about 11:20 check us out on YouTube.com/GoTreehouse. 11:23 You'll find the show notes there, and you can also get us in iTunes. 11:26 Search for the Treehouse Show. 11:29 [Nick Pettit] And—of course—if you'd like to see more videos like this one 11:31 about web design, web development, mobile development, business, 11:33 and so much more be sure to check us out at TeamTreehouse.com. 11:37 Thanks so much for watching, and we'll see you next week. >>[Jason Seifer] Sentences. 11:42 [Nick Pettit] Sandwiches. 11:46

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

Sign up