00:01If you're like me, I'm kind of frustrated this is the last day of the DevSummit.

00:04Last time I was here was in 2008, but since I...used to program in the web ADF.

00:11My name's Chris Sergent, and now I program in the JavaScript API...

00:16...because when I was programming in the web ADF, I looked behind the scenes and saw JavaScript...

00:20...and thought, everything's in JavaScript if you look inside the web ADF...

00:24...so I said, Let's take the short route, and I'll just go with JavaScript completely.

00:30And then we got the Flex and Silverlight, but I decided to pull a number on Esri and I do the .NET in JavaScript...

00:39...which kind of throws them when I submit a question to them, because they ask me what I'm programming in all the time.

00:45But I go online and I go to the sample programming and I go...anybody go search for something that's not necessarily GIS...

00:53...and you find 99,000 answers, or just 99 answers that are wrong, and then you finally find one that is correct?

01:01It's just bad code. Here's the worst-case scenario for me.

01:05I posed a question to the Esri Forum, and then I go search while I'm waiting for somebody to answer a question...

01:11...and what pops up in my search engine? My own question.

01:16It's on somebody else's site, and it's like, I need answers.

01:21And then I find some code someplace, and people's code do not work, you can't get ahold of them...

01:27...so I get technology books. They're supposed to work. They don't always work. You can't get ahold of them.

01:34So, I'm saying people are just publishing things, and simply put...over here.

01:43This was no coding accident. People are intentionally publishing bad code...

01:49...that you can't follow, that doesn't work, and it's not documented.

01:58That's not a picture of me. But I go there, and I say, Your code doesn't work.

02:05And documentation is important for yourself as well as others, 'cause you have to know, right now, your code is in your head.

02:15If I look at your code, can I read it? You've got to have your documentation, 'cause I do not know what you're thinking.

02:21And I need to know this. If you publish a sample online and you don't document your code...

02:26...it has to work exactly, and if anything goes wrong...

02:29...documentation is my last line of defense of figuring out what you were trying to say in your code to get it to work.

02:39I have something I call separation of concerns. If you haven't heard of this, it's going to help you out...

02:43...separate a few things. One thing you need to know, content is king.

02:48Who looked at the agenda today? Or anytime during the DevSummit?

02:52You were looking for content. When you come here, you want your web page to just have your content on it only.

03:00You don't want to have your style sheets with this presentation...

03:03...and you don't want to have your JavaScript [unintelligible] functionality of your application.

03:06Only your content for your page so it can load fast.

03:16Anybody accidentally wipe out a DIV section on their HTML page?

03:21You have a beginning section where you have the ID and you have thousands of lines...

03:26...and you have these DIVs and you wiped out, and, oh, my gosh. And I saved it and closed it in one shot.

03:33Then you open it back up. Well, right here, this is what I call your dom problem.

03:40I created something I call MODS, which stands for My Own Darn Documentation Structure.

03:48I kind of have to use the Force on this one, 'cause I...okay. Let me go a little further down.

04:01This is tricky. Trying to see the scroll bar here.

04:15Thank you out there. Okay.

04:28There you go. Where we do everything has a beginning and an ending comment.

04:29Right here with My Own Darn Documentation...somebody say it for me.

04:33So your DIV section, see right here where we have the ending DIV in our ASP panel?

04:38Well, the DIVs continue. We have our DIV ID, but they all enclose in tagged DIVs.

04:42All my DIVs have sidebar top, begin, and an end.

04:47So when you start collapsing these and you want to know what you're missing...

04:55...it's real easy to see the structure of your application.

05:03See, you can see if you would've wiped out part of it now, if I would have deleted this...

05:09...I would have had the sidebar title begin, but the sidebar title end would have been missing.

05:15So I do this through the entire HTML page and I do a little bit of it in JavaScript and CSS...

05:21...but for my HTML document, for the content, it just gets so tall eventually, you just have to do it that way.

05:41There wasn't a shortcut key.

05:47Okay, the second thing is style sheets.

05:51Here is your website, side by side. In the applications, you have style sheets.

05:58There's embedded, in-line, and external.

06:03Your embedded style sheets are when you go through your document...

06:06...and you have your styles throughout the content page where I just showed you.

06:09You style each element. But for every single page in that website, style, style, style, style, style.

06:18Who wants to maintain that, and who wants to maintain only one style sheet?

06:24So you create an external style sheet, not on your main page, and you only maintain it once.

06:31So as soon as you say, your boss comes to you and says, I want the background for our entire site purple.

06:37Yeah, it's ugly, but well, depending on the purple they want.

06:40But as soon as you...oh, and here I'm wearing a purple shirt. Good to go.

06:46But as soon as you do this, you that use the external style sheet to update your site, do it one time.

06:53You that do the embedded style sheets, which...embedded, I'm sorry, is at the top of your page...

07:01...and you can go ahead and style the whole page. That's better than your in-line.

07:04Your in-line, you're going to style every single element on the page.

07:08So what you do is, you go use your external style sheets, and then the way you do that [unintelligible] gets me a little bit...

07:24...it's the twenty-first century.

07:46Next time I do this...it's like, Chris, you've got it open already.

07:50Here's the style sheets. This is an external style sheet. You can see right here, we have our external style sheet.

07:59This controls the entire website. Of course, this is one page.

08:05If we go back, instead of throughout the document, or at the top, we find our style sheet in our themes...

08:24...and our style sheet here, and at the very top of your document, this is where you put your styles in.

08:28Right here you can see I put Esri styles for the Dojo grid, and everything else you put style sheets.

08:34There's an alternative to doing this. Go back to your style sheet.

08:52This is the JavaScript API external style sheet.

08:56I have a reference to Esri's JavaScript API 2.7 right now in my external style sheet.

09:02Now I can use this, I can reference the CSS style on every web page.

09:06So if you have multiple map pages, there you go. You're done.

09:09You don't have to go throughout the site and keep adding this reference to another style every time.

09:31Now, here's what I like. Want to show you guys, this is where it gets kind of cool is...

09:36...we're going to start getting into the area which I like JavaScript. It's really light in a lot of areas.

09:40And the biggest thing that makes things light is the JavaScript framework.

09:46So all the different JavaScript frameworks that you can put into your application to make it move.

09:50Unlike this snail, where you used to have to program all your JavaScript code.

09:55Now, I saw somebody post something about QR codes and I've got 24 of them.

10:05Reason I did this, the QR codes, these are some of the JavaScript libraries that are used.

10:09The Dojo, which Esri's JavaScript API is built on; have Prototype and Scriptaculous here.

10:15Prototype is a base language where some actions that I'm going to show you in just a second which Scriptaculous uses...

10:23...is built on animation on top of Prototype.

10:26YUI, so Yahoo user interface, has a nice JavaScript library.

10:32Lot of people's favorite is jQuery.

10:34MooTools, My Own Objects.

10:36Sencha, also known as ExtJS.

10:40And some of you may not know or have heard of Rico, which me being from the '80s, I always think of Suave.

10:58Okay, so I'm going to show you the map now. And I went ahead and brought a project that I have.

11:19To me it's not fun with these demos until you actually get to see the map on the screen.

11:23With this...I'm thinking about connections. Crossing my fingers here.

11:33This application that's coming up is a sex offender application.

11:37And just so you know, there's just a kind of a disclaimer here, we have private day cares; they're fake.

11:47There's day cares that are in the streets on this...

11:48...because we just kind of moved them off to the side someplace so they'd be random.

11:52Anything that's public information's on here and is okay.

11:55But right now I want to show you a few pieces.

11:57This is a sidebar, which you can actually move.

12:02I always see the maps and we see these sidebars on the top or sidebars on the side and everything.

12:07I always want more real estate on my map.

12:10So, with this one, you can move your map independent of your sidebar.

12:18And you can move your sidebar independent of your map.

12:24One area I used, if you look at the top here, those corners that're curved, this will be available online later.

12:33Everyone can steal my code. I always tell people that, 'cause I would steal yours.

12:40But we have this curved corner. This is Rico in action.

12:44And then when I drag this around, this is Scriptaculous. It's all in the code.

12:50And then the last thing we have here, you're seeing...this is the Dojo.

12:56All in code, documented where all the information is for you already.

13:01And then you kind of see the map in action. Now, I want to know if like a sex offender comes in.

13:06I want to know if 111 Main Street, if, well, I'm not a sex offender...

13:10...but the person that's a sex offender comes in and wants to know if they can live there.

13:14They've got to be 500 feet away from day cares and schools, stuff like that.

13:20So I say, Okay, can this person live there? And now we're going to go ahead and run.

13:28And our Dojo grid immediately fills out, okay, I have found two addresses...

13:34...it draws the point, and I say, okay, I wanted to know about 111 East Main Street.

13:47And here's why I like about the real estate of this.

13:50I need to see what I've...just pop that out of the way for me now.

13:58Drew the point on the address, drew the parcel, and then creates the buffer by 500.

14:05Now what you don't see, it did one more thing too.

14:09It also lets you know. It says we have our day cares and our parks...

14:15...but it's too close to a school, so we tell the sex offender, you can't live there.

14:20And it's all in one click of one button one time.

14:23Another little thing they'll say, is that really, if somebody's kind of concerned, it says...

14:29...they want to know what this is. You know, this was all customized for identify results.

14:36They know it's a school property. The name of the school property is Teen Challenge.

14:39So they can verify this, you know, if they know the city layout and everything...

14:44...they can call and say, Hey, that's not what that is. But it is.

14:52Another thing I was asked to do is, if you zoom in so you know where you're at on the map...

14:58...what's the last button you clicked? Who has zoomed in to something, they think they're zooming in...

15:03...but they accidentally click the Zoom Out button and as soon as they click on...

15:08...they wrap their cursor around that and then all of a sudden they're way out on the map.

15:12That's to kind of let you know ahead of time, you know, this is where you're at.

15:15But you have your previous zoom and the full extent and everything.

15:27Well, we lost the city, didn't we? There it is.

15:35Let's go back to a click event you might not normally see.

15:54Oh, we're getting close on time here, aren't we?

16:08I'm going to tell you what it is without trying to search for it.

16:10On the Find Address button, what had happened, there is JavaScript code and .NET code that work in tandem.

16:30As soon as I click that Find Now button, I want you to just notice down here.

16:34We don't have any graphics so we have a button that's not there at the moment.

16:39That single button runs JavaScript and C# simultaneously.

16:45So as soon as I click this, JavaScript found the address, but if you look in the C# code, it says to show this button.

16:54In all the full extent, zoom in, when you look at the code online later, you see, those are all C# code.

17:02None of that's JavaScript. It's not in your content because I do my...either I do it behind the...code behind...

17:11...or I programmatically add the JavaScript as needed.

17:22Okay, time for speeding up our map.

17:25You've got your content, which is your HTML, or your ASPX page in my case...

17:30...and if you don't know how to lay out that, just kind of follow along.

17:33If you have questions later, we've got more of that on the end.

17:36But now it's time to get our style sheets and our JavaScript files running faster.

17:41Using the YUI compressor, Yahoo user interface, got the link for you but when they publish this you can scan the QR code...

17:48...send it back to your text wherever you like, and then you can use the YUI compressor...

17:54...to shrink down your JavaScript and your style sheets by 40 percent.

18:00And one step further I like to do is I like to use PowerShell.

18:05If you don't know PowerShell, I'll take you through these lines of code real quick.

18:09All you have to do in PowerShell...or...I hate...I just used the phrase, I hate to say, All you have to do.

18:17'Cause so many people tell me, All you have to do, and say...

18:18...Well, what do I have to do, instead of just telling me all I have to do.

18:22But if you have PowerShell on your Windows interface, this basically, this line here is copy item.

18:28It's saying, Copy this to the Java...Copy all JavaScript files, this asterisk, JS, so send it to JavaScript and copy these files, my CSS...

18:40...same way, and then I move my location to Java, and then I say, Okay, run the YUI compressor...

18:48...change all my .css files to -min.css, and JS the same way.

18:54And once that's done, I say, Move all these files over, and then I say go ahead and remove these files.

19:03There's one step and I'll add code later that also gets rid of IntelliSense.

19:09I can't let you go away here without seeing what IntelliSense looks like in JavaScript API.

19:19Because this was a huge help for me. Right here, if you have JavaScript libraries, Prototype...

19:24...Scriptaculous, all the different ones, when you add these for...three forward slashes...

19:29...and then you put these opening bracket and closing-tag type bracket...

19:33...you start getting IntelliSense when you're typing your code, and I love all the help I can get when I'm coding.

19:39So, when I code...it'll give you possibilities of what you can code when you're coding your application.

19:44So that will give you IntelliSense for your libraries.

19:57Okay, so it showed the YUI compressor. I want it to go even faster.

20:01We still have odd JavaScript files and a lot of style sheet files.

20:05This is SquishIt. I usually use uppercase and lower...I usually use uppercase between the files...

20:12...but based on the syllables, it just doesn't look good when I do it this way with SquishIt, so...

20:19...but there's a tutorial on SquishIt, and then you can download SquishIt.

20:22What SquishIt does is all the JavaScript files and all the CSS files you have...

20:27...how many of them you have, you just turned them into one CSS and one JavaScript file...

20:32...because that's how many you should have when you're all said and done.

20:35YUI compressor will decrease the size of your style sheets and your JavaScript by 40 percent...

20:41...because it removes comments, white spaces, and changes your variable.

20:45So, some folks like this 'cause it's less readable for people...

20:48...when they're looking at trying to see your code when it's published in...on the server.

20:53But they have a nice tutorial on this. I recommend you go through the tutorial.

20:57If you can't follow and you have questions, feel free to ask me. I'm very easy to find on the web.

21:02I searched myself plenty of times and I've always found myself.

21:07Nice tools you have here. Notepad++, and on a Windows machine, don't tell anybody you don't have Notepad++.

21:15It's a nice...it's like it's regular like Notepad but it colors your JavaScript CSS and BB and everything else you do.

21:25Fiddler. Nice little utility. You see what's going on behind the scenes when you're running your application.

21:31You can use Git, which is a nice little utility to...for version control.

21:37GIMP for your graphics, Inkscape for SVG. If you went to my Lightning Talk, my favorite thing using CamStudio.

21:44When you post questions to the forums, don't try to figure out how you're going to say things.

21:48Use CamStudio to record it and then post your question.

21:51You need a quick screen print? Greenshot. All these things, it's like, Can I afford all these things?

21:57There's not one thing in this presentation I'm showing you that's not free. It's all free.

22:04Go to the forums. You can publish your questions to YouTube or Dropbox if you're dealing with Esri support.

22:10Publish it to Dropbox and then give them the URL. That's the way you want to go. They can't use YouTube.

22:16If you say, Well, Chris, it was too short, or you want to give comments or anything, there I am on Twitter.

22:24If you want to have QR codes in your own presentation, I have a QR code of QR codes.

22:33You need to get ahold of me, e-mail, or at the end, I'll leave that up there.

22:38You can scan my e-mail in there and ask all the questions you want, 'cause I ask plenty of questions myself.

22:45But I'll be posting this, trying to kind of get through really quick for you folks...

22:49...but I will add even more documentation online, and take it from me...

22:52...and give me grief, because I give everybody else grief when I see their code.

22:56If there's something you don't like in my code, we'll give each other grief.

22:58We can help each other improve our code together.

23:02But, one last thing about SquishIt, I said 40 percent on the YUI compressor. SquishIt will reduce your file size by 50 percent.

23:15Really nice. And you say you want every little help you can get...

23:22...because one second might be the difference between having somebody stay on your site and leave your site.