Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1586 Appendix B: ASP.NET Ultimate Tools Figure B-3 IE WebDeveloper Toolbar and Firefox WebDeveloper Both of these toolbars are free and absolutely essential for Web development. The IE Web Developer Toolbar is from Microsoft and extends Internet Explorer with a docked ‘‘Explorer Bar’’ offering features such as DOM inspection and element outlining. You can edit the CSS and see what styles are applied to specific elements as seen in Figure B-4. Figure B-4 Firefox has a similar but even more powerful Web Developer Toolbar created by Chris Pederick. It takes a slightly different direction for its user interface by including a number of menus, each literally chock full of menu options. You can disable cookies, CSS, images, inspect elements, form inputs, and outline tables, as shown in Figure B-5. 1586 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1587 Appendix B: ASP.NET Ultimate Tools Figure B-5 ASP.NET developers today need their sites to look great in both browsers. These two toolbars put a host of usefulness at your fingertips. Highly recommended. 1587 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1588 Appendix B: ASP.NET Ultimate Tools Aptana Studio — Javascript IDE Aptana offers a pay-for Professional Edition and a Free Community Edition. It’s a Web development environment based on the Eclipse codebase. It’s not optimized for ASP.NET, but it includes some amaz- ing JavaScript-specific support that makes it worth looking at for AJAX or JavaScript heavy sites. One of Aptana’s most compelling features is its understanding of browser compatibility of JavaScript properties and functions. Aptana’s IntelliSense includes icons for the various browsers and dims them out appropriately for unsupported features, for not only JavaScript, but also HTML and CSS, as well. The Professional Edition also includes a JSON (JavaScript Object Notation) editor with syntax highlight- ing for JSON datasets. This is a great feature if you’re passing a large and deep dataset back and forth via AJAX. Aptana also includes all the major open source AJAX libraries such as Prototype and Scriptaculous, as shown in Figure B-6. Adding support for them simply requires checking a check box. It also integrates with Firebug. The Pro edition integrates with Internet Explorer. Figure B-6 1588 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1589 Appendix B: ASP.NET Ultimate Tools Profilers: dotTrace or ANTS If you’re not measuring your code with a good profiler you really don’t realize what you’re missing out on. Only a profiler can give you extensive metrics and a clear understanding of what your code is doing. Visual Studio Team System 2008 includes a Profiler in the top-level Analyze menu. If you’re not running VSTS, there are excellent third party profilers such as Jetbrain’s dotTrace and Red Gate Software’s ANTS that are worth your 10-day trial. .NET Profilers instruments a runtime session of your code and measure how many times each line is hit and how much time is spent executing that line, as shown in Figure B-7. They create a hierarchical series of reports that allow you to analyze time spent not only within a method, but within child methods executed through the stack. Reports can be saved and multiple versions can be analyzed as you improve your applications, revision after revision. Figure B-7 If you haven’t already done so, consider adding profiling of your ASP.NET application to your software development lifecycle. You’d be surprised to learn how few developers formally analyze and profile their applications. Set aside some time to profile an application that you’ve never looked at before and you’ll be surprised how much faster it can be made using analysis from a tool such as ANTS or dotTrace. 1589 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1590 Appendix B: ASP.NET Ultimate Tools References ‘‘He who lends a book is an idiot. He who returns the book is more of an idiot.’’ — Anonymous, Arabic Proverb PositionIsEverything.net, QuirksMode.org, and HTMLDog.com When you’re creating Web sites that need to look nice on all browsers, you’re bound to bump into bugs, ‘‘features,’’ and general differences in the popular browsers. Web pages are composed of a large com- bination of standards (HTML, CSS, JS). These standards are not only open to interpretation, but their implementations can differ in subtle ways, especially when they interact. Reference Web sites, such as PositionIsEverything and QuirksMode, collect hundreds of these hacks and workarounds. Then they catalog them for your benefit. Many of these features aren’t designed, but rather discoveredorstumbledupon. HTMLDog is a fantastic Web designer’s resource for HTML and CSS. It’s full of tutorials, articles, and a large reference section specific to XHTML. QuirksMode includes many resources for learning JavaScript and CSS and includes many test and demo pages demonstrating the quirks. PositionIsEverything is hosted by John and Holly Bergevin and showcases some of the most obscure bugs and browser oddities with demo examples for everything. Visibone Visibone is known for its amazing reference cards and charts that showcase Color, Fonts, HTML, JavaScript, and CSS. Visibone reference cards and booklets are available online and are very reasonably priced. The best value is the Browser Book available at www.visibone.com/products/browserbook.html . I recommend the laminated version. Be sure to put your name on it because your co-workers will make it disappear. www.asp.net I work for Microsoft on the team that runs www.asp.net . The site is a huge resource for learning about ASP.NET and the various technologies around it. Figure B-8 shown part of the Community page for the site, where you’ll a link to my Weblog, among others, and links to other community resources. The www.asp.net/learn/ section includes dozens and dozens of videos about general ASP.NET and how to use it. 1590 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1591 Appendix B: ASP.NET Ultimate Tools Figure B-8 Tidying Up Your Code ‘‘After every war someone has to tidy up.’’ — Wislawa Szymborska Refactor! for ASP.NET from Devexpress Refactoring support in Visual Studio 2008 continues to get better. The third party utilities continue to push the envelope adding value to the IDE. Refactor! for ASP.NET adds refactoring to the ASP.NET source view. For example, in Figure B-9 while hovering over the Refactor! context menu and selecting the ‘‘Extract UserControl’’ refactoring, a preview of the changes that would be made appear within the source view. A new UserControl would be created in a new file WebUserControl0.ascx . The currently selected label control would turn into a WebUserControl0 control. You can then choose a new name for the UserControl immediately after the refactoring. The most amazing thing about Refactor! for ASP.NET is that it’s a free download from www.devexpress.com/Products/NET/IDETools/RefactorASP/ . It includes 28 refactorings that make it easier to simplify your code and your ASP.NET markup. 1591 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1592 Appendix B: ASP.NET Ultimate Tools Figure B-9 Code Style Enforcer Code Style Enforcer from Joel Fjord ´ en does just that. It’s a DXCore Plugin that enforces code style rules that you configure. DXCore is the free engine from DevExpress that Refactor! uses to extend Visual Studio. Every team has a coding standard that they’d like programmers to follow, but it’s not only hard to keep track of all the rules, it’s tedious. Are methods supposed to be CamelCased or pascalCased? Are we putting ‘‘m_’’ in front of member fields? Code Style Enforcer is a lot like Microsoft Word’s spelling and grammar checker except for code. As shown in Figure B-10, identifiers that do not meet the code style guidelines are underlined in red. You can right-click on each error and Code Style Enforcer will use DxCore to refactor and fix each violation. Style guidelines are configurable and the default uses Juval Lowy’s excellent C# Code Style Guidelines available from www.idesign.net . The latest version will also generate code rule violation reports for a solution using XML and XSLT providing customizable different templates. Code Style Enforcer is an excellent tool to add to your team’s toolbox. 1592 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1593 Appendix B: ASP.NET Ultimate Tools Figure B-10 Packer for .NET — Javascript Minimizer When creating an ASP.NET Web site, you often find yourself creating custom JavaScript files. During development, you want these files to be commented and easy to read. During production, however, every byte counts and it’s nice to reduce the size of your JavaScript files with a JavaScript ‘‘minimizer.’’ Packer for .NET is a C# application that offers compression of JavaScript or simple ‘‘minification’’ by stripping comments and white space. You’d be surprised how well these techniques work. For example, Steve Kallestad reported that a copy of the JavaScript library Prototype 1.50 was 70K before JavaScript-specific compression. It became 30K after the process, and then reached only 14K when gzip HTTP compression was applied. From 70K to 14K is a pretty significant savings. JavaScript-specific compression does things such as renaming variables to single letters, being aware of global variable renaming vs. local variable renaming, as well as stripping unnecessary white space and comments. 1593 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1594 Appendix B: ASP.NET Ultimate Tools Packer includes utilities for compression at both the command line and within MSBuild projects. The MSBuild targets can be added to your build process. Consequently, your integration server is continuous so you receive these benefits automatically and unobtrusively. As an example, a JavaScript library might start out looking like this: var Prototype = { Version: ’1.5.0’, BrowserFeatures: { XPath: !!document.evaluate }, ScriptFragment: ’(?: < script.*? > )(( \ n| \ r|.)*?)(?: <\ /script > )’, emptyFunction: function() {}, K: function(x) { return x } } Packed, the JavaScript might end up looking like this (as an example) but it will still work! (c(){f 7.2q(/ <\\ /?[^ > ]+ > /5a,"")}),2C:(c(){f 7.2q(P 5d(1m.5s,"9n"),"")}),9j:(c(){k 9m=P 5d(1m.5s,"9n");k 9k=P 5d(1m.5s,"ce");f(7.E(9m)||[]).1F((c(9l){f(9l.E(9k)||["",""])[1]}))}),3P :(c(){f 7.9j().1F((c(4s){f 6A(4s)}))}),cd:(c(){k 1h=N.4f("1h");k 2V=N.cc(7);1h.63(2V);f 1h.2P}),cb:(c(){k 1h=N.4f("1h");1h.2P=7.9i();f 1h.2O[0]?(1h.2O.o > 1?$A(1h.2O).2A("",(c(3Y,1G){f 3Y+1G.4j})):1h.2O[0].4j):""}),6J:(c(9h){k E=7.4d().E(/([^?#]*)(#.*)?$/);h(!E){f{}}f E[1].3m(9h||"&").2A({},(c(2E,Q){h((Q=Q.3m("="))[0]){k v=9g(Q[0]);k l=Q[1]?9g(Q[1]):1b;h(2E[v]!==1b){h(2E[v].3k!=1M){2E[v]=[2E[v > }h(l){2E [v].M(l)}}1k{2E[v]=l}}f 2E}))}),2F:(c(){f 7.3m("")}) There are many JavaScript minimizing libraries available; this is just one of them. However, it’s options, completeness, and integration with MSBuild that make Packer for .NET worth trying out. Visual Studio Add-ins ‘‘If I had eight hours to chop down a tree, I’d spend six sharpening my axe.’’ — Abraham Lincoln 1594 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 1595 Appendix B: ASP.NET Ultimate Tools ASPX Edit Helper Add-In for Visual Studio Sometimes an add-in does something so small and so simple that you might dismiss it at first glance. But when you find yourself doing the same action over and over again, you’ll be thankful for the ingenuity of developers who create time savers like this little gem. The ASPX Edit Helper does two things, and it does them well. Not everyone likes to use the visual designer in Visual Studio 2008. Some users prefer to type ASPX mark-up directly in the source view. This add-in automatically fills in "runat="server" and id="randomid" when you type a server control. It also includes short codes for automatic insertion of snippets. For example, if you type /lbl and press Enter, you’ll get: < asp:Label runat="server" id="lbl5394" Text="" / > A nice touch is that the cursor will be automatically positioned within the id attribute in the random ID selected so you can immediately begin typing a new ID for the control. This thoughtful design will allow you to create complicated forms with minimal typing very quickly. Figure B-11 shows the moment just before I press Enter after typing the /txt short code. Figure B-11 Installation is easy. Just unzip into your Visual Studio Add-ins folder. As an aside, the authors also include source code, which is useful if you’re interested in writing your own Add-in. 1595 . resources. The www .asp. net/ learn/ section includes dozens and dozens of videos about general ASP. NET and how to use it. 159 0 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 159 1 Appendix B: ASP. NET Ultimate. space and comments. 15 93 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 159 4 Appendix B: ASP. NET Ultimate Tools Packer includes utilities for compression at both the command line and within MSBuild. from www.devexpress.com/Products /NET/ IDETools/RefactorASP/ . It includes 28 refactorings that make it easier to simplify your code and your ASP. NET markup. 159 1 Evjen bapp02.tex V2 - 01/28/2008 4:40pm Page 159 2 Appendix B: ASP. NET