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: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: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: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.
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:55Now, I saw somebody post something about QR codes and I've got 24 of them.
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: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: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:54In all the full extent, zoom in, when you look at the code online later, you see, those are all C# code.
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: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...
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: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: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: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:32...because that's how many you should have when you're all said and done.
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: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.
This Was No Coding Accident
- Recorded: Mar 29th, 2012
- Runtime: 23:40
- Views: 611
- Published: Apr 30th, 2012
- Night Mode (Off)Automatically dim the web site while the video is playing. A few seconds after you start watching the video and stop moving your mouse, your screen will dim. You can auto save this option if you login.
- HTML5 Video (Off) Play videos using HTML5 Video instead of flash. A modern web browser is required to view videos using HTML5.