1 00:00:01,540 --> 00:00:03,540 [Nick Pettit] I'm Nick Pettit. >>[Jason Seifer] I'm Jason Seifer. 2 00:00:03,540 --> 00:00:06,220 [Nick Pettit] And you're watching the Treehouse Show—your weekly dose of Internets 3 00:00:06,220 --> 00:00:09,480 where we talk about all things web design, web development, and more. 4 00:00:09,480 --> 00:00:12,750 [Jason Seifer] In this episode we will talk about JAVA Script diagramming, 5 00:00:12,750 --> 00:00:16,160 SASS, HTML5 form elements, and more. 6 00:00:16,160 --> 00:00:18,560 [Nick Pettit] Let's check it out. 7 00:00:18,560 --> 00:00:24,630 [The Treehouse Show] 8 00:00:24,630 --> 00:00:29,630 [Nick Pettit] First up is Macaw like the sound that a bird makes. 9 00:00:29,630 --> 00:00:34,610 It's basically a code savvy web design tool. 10 00:00:34,610 --> 00:00:39,270 And what I mean by that is that it is a Mac app that's coming soon to the app store 11 00:00:39,270 --> 00:00:44,980 that will allow you to actually design your Web sites in an application 12 00:00:44,980 --> 00:00:50,190 rather than designing it in like Photoshop or—which I guess is an application technically— 13 00:00:50,190 --> 00:00:52,930 or in code and designing in the browser. 14 00:00:52,930 --> 00:00:57,960 So—it is a little bit different in that it actually will output code. 15 00:00:57,960 --> 00:01:01,830 And now we just talked about a tool similar to this called WebFlow 16 00:01:01,830 --> 00:01:06,020 on last weeks episode, and this tool is very similar 17 00:01:06,020 --> 00:01:10,080 except instead of being in the browser it is actually a Mac application. 18 00:01:10,080 --> 00:01:14,020 So—as you can see here—pretty similar in that you can adjust 19 00:01:14,020 --> 00:01:19,120 all of the different CSS properties using this WYSIWYG interface. 20 00:01:19,120 --> 00:01:25,690 It will go ahead and output code; it does a bunch of cool responsive and typography stuff. 21 00:01:25,690 --> 00:01:31,390 And if we scroll down here to the bottom they say that Macaw is built on 22 00:01:31,390 --> 00:01:37,160 this revolutionary engine called Alchemy which will produce code that 23 00:01:37,160 --> 00:01:40,040 you'd be proud to hand over to developers. 24 00:01:40,040 --> 00:01:44,260 And they offer up this example where they have this button class 25 00:01:44,260 --> 00:01:48,710 which I presume is applied to all these buttons over here on the left. 26 00:01:48,710 --> 00:01:54,460 And then they have these secondary classes that actually just apply 27 00:01:54,460 --> 00:01:57,840 a different background color which is the only thing that is different 28 00:01:57,840 --> 00:02:00,170 between each of these three buttons. 29 00:02:00,170 --> 00:02:05,010 So Alchemy—I guess—must be fairly intelligent to know that 30 00:02:05,010 --> 00:02:11,750 it should consolidate the common code and only apply code that is different to each element. 31 00:02:11,750 --> 00:02:14,680 So this is pretty interesting; they offer up a few more details 32 00:02:14,680 --> 00:02:18,490 about how Alchemy works, but you can go ahead and watch 33 00:02:18,490 --> 00:02:22,680 a preview video—I believe that is up here at the top. 34 00:02:22,680 --> 00:02:27,280 So I will let you go ahead and watch that preview video on your own time. 35 00:02:27,280 --> 00:02:31,250 It is 20 minutes long, and—. >>[Jason Seifer] I say we watch the whole thing right now Nick. 36 00:02:31,250 --> 00:02:36,030 [Nick Pettit] Let's just play it then. >>[Jason Seifer] We'll get comfortable—maybe light some candles. 37 00:02:36,030 --> 00:02:39,860 [Nick Pettit] Make some popcorn. >>[Jason Seifer] Yeah. Make a night out of it. 38 00:02:39,860 --> 00:02:43,730 [Nick Pettit] They also have it split out into various chapters here, 39 00:02:43,730 --> 00:02:47,900 so you can skip along, and then they also are collecting email addresses 40 00:02:47,900 --> 00:02:51,530 if you'd like to be notified when it hits the app store. 41 00:02:51,530 --> 00:02:55,440 There is actually another tool that is similar to Macaw 42 00:02:55,440 --> 00:03:01,340 that we are going to be talking about later in the show, so I will leave additional thoughts for that one. 43 00:03:01,340 --> 00:03:06,320 [Jason Seifer] I hope you don't mind I signed you up for their mailing list 20-30 times. 44 00:03:06,320 --> 00:03:11,340 [Nick Pettit] I'm looking forward to it. >>[Jason Seifer] Next up we have a project called Joint JS. 45 00:03:11,340 --> 00:03:14,970 This is a JAVA Script diagramming library. 46 00:03:14,970 --> 00:03:20,340 Now—you might wonder why we are talking about yet another JAVA Script joint diagramming library. 47 00:03:20,340 --> 00:03:23,420 We have talked about that before—well this one let's you get interactive 48 00:03:23,420 --> 00:03:27,210 with your JAVA Script diagrams; it also has a really, really easy to use API. 49 00:03:27,210 --> 00:03:31,340 Now if we take a look at the site you can see it is got just a ton of features 50 00:03:31,340 --> 00:03:35,380 that it tells you about, but what is really neat—let's just get to the demos. 51 00:03:35,380 --> 00:03:39,610 Here are some demos right on here—look—they got a chess board that you can do 52 00:03:39,610 --> 00:03:43,200 right in the browser there; you can even move the chess pieces. 53 00:03:43,200 --> 00:03:46,970 Well—you know—whatever—it is cool. It is just a diagramming library or is it? 54 00:03:46,970 --> 00:03:52,270 Look—you can create an organizational chart right there very, very easily in JAVA Script. 55 00:03:52,270 --> 00:03:56,600 Now I cannot vouch for the accuracy of this chart since it has Bart Simpson 56 00:03:56,600 --> 00:03:59,840 as the CEO of this hypothetical company. 57 00:03:59,840 --> 00:04:01,910 I think we all know that would be LIsa. 58 00:04:01,910 --> 00:04:04,600 But—anyways—see they have got a ton of different demos. 59 00:04:04,600 --> 00:04:10,630 And there is a very, very thorough API that you can see here on the left 60 00:04:10,630 --> 00:04:15,000 just how many different attributes and options you have. 61 00:04:15,000 --> 00:04:18,800 So—anyway—this is just a really great piece of JAVA Script— 62 00:04:18,800 --> 00:04:21,140 a great library to use in your applications. 63 00:04:21,140 --> 00:04:23,450 And go ahead and check that out; we'll have a link to it in the show notes 64 00:04:23,450 --> 00:04:30,070 which you can get to at YouTube.com/GoTreehouse or in iTunes search for us at the Treehouse Shop. 65 00:04:30,070 --> 00:04:33,350 [Nick Pettit] Very cool stuff—now—as I said previously— 66 00:04:33,350 --> 00:04:36,010 where I was so rudely interrupted—. 67 00:04:36,010 --> 00:04:40,570 [Jason Seifer] I brought the pain with that Nick—that was rudely interrupted 68 00:04:40,570 --> 00:04:43,080 with some gold information. Thank you. 69 00:04:43,080 --> 00:04:47,460 [Nick Pettit] That's true—it was worthwhile. >>[Jason Seifer] Highly offensive. Got me right in the feels. 70 00:04:47,460 --> 00:04:51,740 [Nick Pettit] Anyway—there was this other app that I wanted to talk about 71 00:04:51,740 --> 00:04:55,570 that's very similar to Macaw, but this one is called Dimensions. 72 00:04:55,570 --> 00:04:59,360 And actually I should take that back—it is not very similar to Macaw— 73 00:04:59,360 --> 00:05:06,120 it actually does far less, but it's similar in the same vein that it allows you to 74 00:05:06,120 --> 00:05:08,380 test responsive Web sites. 75 00:05:08,380 --> 00:05:15,730 So this is another tool that I think is—you know—once again—outside the realm 76 00:05:15,730 --> 00:05:21,810 of your normal text editor, photoshop, the tools that you typically think of 77 00:05:21,810 --> 00:05:24,430 when you think about Web design and development. 78 00:05:24,430 --> 00:05:27,700 So I guess I actually have a question for the viewers 79 00:05:27,700 --> 00:05:30,370 and that is do you use any of these tools? 80 00:05:30,370 --> 00:05:39,710 I personally don't; I haven't really found a good flow to include a tool like Web Flow or like Macaw. 81 00:05:39,710 --> 00:05:43,990 But there is actually another one—I think it's called—gosh I cannot think of the name of it. 82 00:05:43,990 --> 00:05:48,660 It is an Adobe tool, but Adobe is in this as well, so they're making 83 00:05:48,660 --> 00:05:51,780 all sorts of tools like this where you can—you know—manipulate things 84 00:05:51,780 --> 00:05:53,910 in this WYSIWYG interface. 85 00:05:53,910 --> 00:05:58,070 I am not sure how I feel about that just because of the way the 86 00:05:58,070 --> 00:06:03,570 code has been historically from WYSIWYG tools—it is usually pretty bad. 87 00:06:03,570 --> 00:06:07,230 So I am kind of interested to know if anybody is actually using these 88 00:06:07,230 --> 00:06:09,610 and what their experiences have been like 89 00:06:09,610 --> 00:06:14,150 because I feel like I have absolutely no pulse on the popularity of these things. 90 00:06:14,150 --> 00:06:17,510 [Jason Seifer] What's nice about this one is it's a Chrome app too. >>[Nick Pettit] Yes. 91 00:06:17,510 --> 00:06:20,210 [Jason Seifer] So that has—you know—far less for you to do than 92 00:06:20,210 --> 00:06:23,760 go all the way to the app store and fill out someone else's email address 93 00:06:23,760 --> 00:06:25,760 20 times for the mailing list. >>[Nick Pettit] Exactly. 94 00:06:25,760 --> 00:06:28,650 I really should emphasize that this tool is different. 95 00:06:28,650 --> 00:06:30,830 I shouldn't lump it into the same category. 96 00:06:30,830 --> 00:06:35,500 It is actually for responsive testing, and it doesn't generate any code, 97 00:06:35,500 --> 00:06:39,840 but it is still—you know—just yet another tool on top of all the other ones. 98 00:06:39,840 --> 00:06:43,200 And I am kind of curious—you know—how many web developers 99 00:06:43,200 --> 00:06:48,400 and designers actually use stuff like that versus just resizing the browser. >>[Jason Seifer] Yeah. 100 00:06:48,400 --> 00:06:52,050 [Nick Pettit] Or testing on devices—it seems kind of strange. >>[Jason Seifer] So tweet Nick. 101 00:06:52,050 --> 00:06:55,470 [Nick Pettit] That's right—you should tweet me @NickRP on Twitter. >>[Jason Seifer] Yeah. 102 00:06:55,470 --> 00:07:00,640 I actually don't care how you guys work, so leave me out of this. Don't CC me on that one. 103 00:07:00,640 --> 00:07:03,750 [Nick Pettit] You should CC @JSeifer. 104 00:07:03,750 --> 00:07:07,400 [Jason Seifer] So next up—and I am not calling you this Nick. 105 00:07:07,400 --> 00:07:10,460 This is an actual site that we are talking about called SassMeister. 106 00:07:10,460 --> 00:07:12,670 [Nick Pettit] It is okay—you can call me SassMeister—I don't mind. 107 00:07:12,670 --> 00:07:15,680 [Jason Seifer] I would prefer to keep it professional. >>[Nick Pettit] Okay. 108 00:07:15,680 --> 00:07:20,570 [Jason Seifer] So SassMeister.com will let you try out SASS and SCSS, 109 00:07:20,570 --> 00:07:26,330 and then it will show you the CSS that it compiles down to right next to you in the second column there. 110 00:07:26,330 --> 00:07:29,840 [Nick Pettit] And after just a couple hours you too can be a SassMeister. 111 00:07:29,840 --> 00:07:33,220 [Jason Seifer] Yeah—buy our free eBook. 112 00:07:33,220 --> 00:07:37,880 So I pasted in some SASS over on the left column there. 113 00:07:37,880 --> 00:07:41,330 And if you click on one of these things you can see that 114 00:07:41,330 --> 00:07:46,800 the—I have pasted some incorrect SASS in here which is a little bit bizarre 115 00:07:46,800 --> 00:07:50,630 since I got it from the SASS Web site as an example. >>[Nick Pettit] Weird. 116 00:07:50,630 --> 00:07:54,190 [Jason Seifer] Yeah—but trust me for the most part this works. 117 00:07:54,190 --> 00:07:57,380 I was messing around with it before the show. 118 00:07:57,380 --> 00:07:59,400 I am going to just leave that train wreck where it is. 119 00:07:59,400 --> 00:08:03,220 Check it out at SassMeister.com. 120 00:08:03,220 --> 00:08:08,180 [Nick Pettit] Next up is Typer.JS which is this really cool 121 00:08:08,180 --> 00:08:12,610 jQuery plugin that will actually type out code onto the screen 122 00:08:12,610 --> 00:08:16,300 which—you know—could be good for—Jason brought up the example— 123 00:08:16,300 --> 00:08:21,270 like a movie Web site or—I don't know—it is just kind of a cool visual effect. 124 00:08:21,270 --> 00:08:24,960 [Jason Seifer] I got another idea too. >>[Nick Pettit] What's that? >>[Jason Seifer] It could be for a restaurant Web site. 125 00:08:24,960 --> 00:08:29,010 And as you scroll past an item it types out some delicious sides 126 00:08:29,010 --> 00:08:32,450 you might want to get with it. >>[Nick Pettit] That is clever. 127 00:08:32,450 --> 00:08:34,919 So if we could go ahead and scroll down the page. 128 00:08:34,919 --> 00:08:36,919 [Jason Seifer] Or perhaps a wine pairing. 129 00:08:36,919 --> 00:08:40,380 [Nick Pettit] They have this little demo here where they're actually 130 00:08:40,380 --> 00:08:45,000 suggesting different flowers to pair with your meal. 131 00:08:45,000 --> 00:08:50,540 But you can see here how it actually types out the text, 132 00:08:50,540 --> 00:08:53,690 and—you know—it does this all auto magically. 133 00:08:53,690 --> 00:08:56,310 So it is a really cool jQuery plugin. 134 00:08:56,310 --> 00:09:00,170 Go ahead and check it out—it's Typer.js. 135 00:09:00,170 --> 00:09:05,320 [Jason Seifer] Very nice—next up over on the HTML5 Doctor Web site 136 00:09:05,320 --> 00:09:10,690 there is this absolutely great list of every HTML5 element 137 00:09:10,690 --> 00:09:13,270 As well as a short description of that element 138 00:09:13,270 --> 00:09:17,830 and a link to the documentation in the specification. 139 00:09:17,830 --> 00:09:19,930 How cool is that Nick? >>[Nick Pettit] Pretty cool. 140 00:09:19,930 --> 00:09:22,400 [Jason Seifer] Yeah—this is just super thorough too. 141 00:09:22,400 --> 00:09:25,600 And—you know—it includes all the elements you would think would be there. 142 00:09:25,600 --> 00:09:28,780 You know—it has got the A link, abbreviation, address. 143 00:09:28,780 --> 00:09:34,100 It is separated by—you know—it is in order—alphabetical order. 144 00:09:34,100 --> 00:09:37,480 And there might be some that you don't even know existed. 145 00:09:37,480 --> 00:09:41,170 For example—did you know that WBR tag elements? 146 00:09:41,170 --> 00:09:43,790 [Nick Pettit] I actually did know about that tag coincidently, 147 00:09:43,790 --> 00:09:46,250 but—yes—it is a very rarely used tag. 148 00:09:46,250 --> 00:09:49,300 [Jason Seifer] This element represents a line break opportunity. >>[Nick Pettit] That's right. 149 00:09:49,300 --> 00:09:51,870 [Jason Seifer] Because you don't want to have any line break regrets 150 00:09:51,870 --> 00:09:54,980 in your HTML5 document. >>[Nick Pettit] Very true. 151 00:09:54,980 --> 00:09:57,020 [Jason Seifer] Yeah—so we'll have a link to that one in the show notes. 152 00:09:57,020 --> 00:10:00,990 And that's on the HTML5 Doctor Web site—not too much to say about that. 153 00:10:00,990 --> 00:10:04,960 [Nick Pettit] Very cool stuff—well next up is Zero Clipboard. 154 00:10:04,960 --> 00:10:09,230 This is basically a way to copy things to the clipboard 155 00:10:09,230 --> 00:10:12,340 and then the user can go ahead and paste them elsewhere. 156 00:10:12,340 --> 00:10:16,420 Now there is actually really not a very good way to do this. 157 00:10:16,420 --> 00:10:21,120 The only way you can do it is using Adobe Flash. 158 00:10:21,120 --> 00:10:24,930 And this is basically a JAVA Script interface for it. 159 00:10:24,930 --> 00:10:33,240 So it creates an invisible Adobe Flash movie, and you can have say this text area here. 160 00:10:33,240 --> 00:10:37,940 And you can go ahead and type stuff in, and then you can say copy to the clipboard. 161 00:10:37,940 --> 00:10:42,950 And now when I paste here—this is risky—I go ahead and paste. 162 00:10:42,950 --> 00:10:49,170 And you can see that it is actually just copied exactly what I typed in there. 163 00:10:49,170 --> 00:10:55,090 So—pretty cool if you need a way for your users to get stuff over to the clipboard. 164 00:10:55,090 --> 00:10:58,770 This is definitely one to check out because it is notoriously difficult. 165 00:10:58,770 --> 00:11:03,020 [Jason Seifer] Yeah—it is cool how it works—it floats the invisible Flash movie 166 00:11:03,020 --> 00:11:06,160 on top of the dom element of your choice. 167 00:11:06,160 --> 00:11:10,680 So that is kind of neat—anyway—I guess that is all we got for this episode, huh? 168 00:11:10,680 --> 00:11:13,220 [Nick Pettit] Who am I on Twitter? >>[Jason Seifer] Who are you on Twitter? >>[Nick Pettit] Is that what you were about to ask? 169 00:11:13,220 --> 00:11:16,490 [Jason Seifer] That is. >>[Nick Pettit] I am @NickRP. >>[Jason Seifer] It's like your read my mind. 170 00:11:16,490 --> 00:11:20,320 We finish each other's sandwiches. >>[Nick Pettit] Sentences. 171 00:11:20,320 --> 00:11:23,710 [Jason Seifer] I am @JSeifer—for more information on anything we talked about 172 00:11:23,710 --> 00:11:26,890 check us out on YouTube.com/GoTreehouse. 173 00:11:26,890 --> 00:11:29,100 You'll find the show notes there, and you can also get us in iTunes. 174 00:11:29,100 --> 00:11:31,100 Search for the Treehouse Show. 175 00:11:31,100 --> 00:11:33,530 [Nick Pettit] And—of course—if you'd like to see more videos like this one 176 00:11:33,530 --> 00:11:37,740 about web design, web development, mobile development, business, 177 00:11:37,740 --> 00:11:42,170 and so much more be sure to check us out at TeamTreehouse.com. 178 00:11:42,170 --> 00:11:46,490 Thanks so much for watching, and we'll see you next week. >>[Jason Seifer] Sentences. 179 00:11:46,490 --> 00:11:48,490 [Nick Pettit] Sandwiches.