Appendix C
ASP.NET Ultimate Tools
I’ve always believed that I’m only as good as my tools. I’ve spent years combing the Internet for excellent tools to help me be a more effective developer. Thousands of tools are out there to be sure, many overlapping in functionality with others. Some tools do one thing incredibly well and others aim to be a Swiss Army knife with dozens of small conveniences packed into their tiny toolbars. Here is a short, exclusive list of some of the ASP.NET tools that I keep turning back to. These are tools that I find myself using consistently while developing ASP.NET-based websites. I recommend that you give them a try if they sound useful. Many are free; some are not. In my opinion, each is worth at least a trial on your part, and many are worth your hard-earned money because they’ll save you precious time.
There has never been an unexpectedly short debugging period in the history of computers.
—Steven Levy
There are so many great things about this application one could write a book about it. Firebug is actually a Firefox plug-in, so you’ll need to download and install Firefox to use it.
Figure C-1 shows Firebug analyzing all the network traffic required to download the web page. This shows a very detailed graph of when each asset is downloaded and how long it took from first byte to last byte.
It has a wealth of interesting features that enable you to inspect HTML and deeply analyze your CSS, including visualization of some more complicated CSS techniques such as offsets, margins, borders, and padding. Firebug also includes a powerful JavaScript debugger that enables you to debug JavaScript within Firefox. Even more interesting is its JavaScript profiler and a very detailed error handler that helps you chase down even the most obscure bugs.
Finally, Firebug includes an interactive console feature similar to the Visual Studio Immediate window that lets you execute JavaScript on the fly, as well as console debugging that enables classic “got here” debugging. Firebug is indispensable for the web developer and it’s highly recommended.
YSlow is an add-on to an add-on. Brought to you by Yahoo!, YSlow extends Firebug and analyzes your web pages using Yahoo!’s 13 rules for fast websites. In Figure C-2, you can see Yahoo!’s YSlow analyzing the website.
YSlow is free and is an excellent resource to help you get a clear understanding about how hard the client’s browser must work in order to view your website.
The IE10 Developer Tools are from Microsoft and come built-in with IE10. They are free and absolutely essential for web development. You just activate them by pressing F12. They extend Internet Explorer 10 with features such as DOM inspection, JavaScript profiling, and element outlining. You can even visualize the box-model as shown in Figure C-3.
ASP.NET developers today need their sites to look great. This toolbar puts a host of usefulness at your fingertips and is highly recommended.
Although not explicitly “tools,” the JavaScript libraries jQuery and its partner jQuery UI make complex JavaScript tasks a joy. Yes, there were JS libraries before jQuery, but it’s hard to overestimate how much jQuery not only changed the web, but made JavaScript fun again.
JQuery includes a clean selector engine that makes moving around the HTML document object model (DOM) trivial, allowing you to select and filter nodes and easily apply events and animations to them.
jQuery also includes methods for easily making Ajax calls. It’s such a great library that the Microsoft ASP.NET MVC team decided to ship jQuery with ASP.NET MVC, making it the first open source product to ship with .NET along with full support. The IntelliSense improvements in the Visual Studio 2012 IDE also make it really easy to work with JavaScript.
JQuery UI is an additional library that adds even more animation support on top of jQuery, but more importantly adds a scaffold for themeable high-level widgets like sliders, calendars, and more. Check them out at http://jquery.com and http://jqueryui.com as shown in Figure C-4.
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.
Some SKUs of Visual Studio 2012 include a profiler in the top-level Analyze menu. In addition, excellent third-party profilers are available, such as JetBrains’ dotTrace and Red Gate Software’s ANTS, that are worth your time.
.NET profilers instrument 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 C-5. They create a hierarchical series of reports that enable you to analyze time spent not only within a method, but within child methods executed through the stack. You can save reports and analyze multiple versions as you improve your applications, revision after revision.
If you haven’t already done so, consider adding profiling of your ASP.NET application to your software development life cycle. 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.
He who lends a book is an idiot. He who returns the book is more of an idiot.
—Anonymous, Arabic Proverb
When you’re creating websites 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 combination 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 websites, such as QuirksMode, collect hundreds of these hacks and workarounds. Then they catalog them for your benefit. Many of these features aren’t designed, but rather discovered or stumbled upon.
HTML Dog 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.
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 is a huge resource for learning about ASP.NET and the various technologies around it. Figure C-6 shows the website, where you can find links to blogs and other community resources.
www.webdevchecklist.com is known for having a comprehensive checklist of tools to run to ensure that your website is in compliance with the best practices for web developers.
This is a Visual Studio Extension that you can download from http://visualstudiogallery.msdn.microsoft.com/69023d00-a4f9-4a34-a6cd-7e854ba318b5. You can use this tool to transform your app.config (or any file) using different transformation files based on your build configuration. For example, you can have different database and application settings when you are debugging versus running your application.
After every war someone has to tidy up.
—Wislawa Szymborska
Refactoring support in Visual Studio 2012 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.
Refactor can be downloaded from www.devexpress.com/Products/NET/IDETools/RefactorASP/. It includes refactorings that make it easier to simplify your code and your ASP.NET markup.
When creating an ASP.NET website, 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.”
Microsoft Ajax Minifier is a C# application that offers compression of JavaScript or simple “minification” by stripping comments and white space. It’s been released on CodePlex at http://ajaxmin.codeplex.com/.
You’d be surprised how well these techniques work. For example, Steve Kallestad once 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.
Microsoft Ajax Minifier 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 }
}Minified, 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(){f7.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("")})Many JavaScript minimizing libraries are available; this is just one of them. However, its options, completeness, and integration with MSBuild make Microsoft Ajax Minifier worth trying out.
Oh man! :-) I have shoot into my foot myself ;-) Sorry!
—Matz
The Ajax Control Toolkit is a collaboration between Microsoft and the larger ASP.NET community. Its goal was to provide the largest collection of web client components available. It includes excellent examples if you want to learn how to write ASP.NET AJAX yourself, and then it gives you the opportunity to give back and have your code shared within the community.
Literally dozens of controls build on and extend the ASP.NET AJAX Framework. Some of the controls are simple and provide those nice “little touches” such as drop shadows, rounded corners, watermarks, and animations. Others provide highly functional controls such as calendars, popups, and sliders.
Complete source is available for all the controls so that you can extend and improve them. These controls are more than just samples; they are complete and ready to be used in your applications.
The toolkit is available at http://www.asp.net/ajax/ (see Figure C-7) There’s even a Content Delivery Network (CDN) so you can let Microsoft pay the bandwidth for hosting these JavaScript libraries. They’ll be faster and closer to the user as well!
Troubleshooting errors and unhandled exceptions in your applications can be a full-time job. Rather than writing your own custom global exception handlers every time, consider looking at the ELMAH (Error Logging Modules and Handlers) from Atif Aziz. It’s a very flexible application-wide error logging facility with pluggable extension points to the interfaces at nearly every location. You can even configure it in your application without recompilation or even redeployment. Simply modify your web.config to include the error logging modules and handlers, and then you’ll receive a single web page to remotely review the entire log of unhandled exceptions.
ELMAH captures so much information about exceptions that it can reconstitute the original “yellow screen of death” that ASP.NET would have generated given an exception, even if customErrors was turned off. It’s almost like TiVo for your exceptions! Figure C-8 shows ELMAH providing a developer’s view, including all the details you might need to debug this error.
Another clever feature is an RSS feed that shows the last 15 years from your log. This flexible tool is open source and the recent beta includes support for medium trust environments. You can plug in SQL Server or use an XML file to manage your error logs. I highly recommend you take the time to learn about ELMAH.
Users of the Apache web server sing the praises of the power of mod_rewrite, its URL rewriting mechanism. IIS6 users have this available to them in the form of the ISAPI_Rewrite module from Helicon. It’s incredibly fast because it’s written in pure C. It integrates nicely with ASP.NET in the IIS “Classic” pipeline because URLs are rewritten before ASP.NET realizes anything has happened. IIS7 users can use the URL Rewriting Module discussed in a moment.
Because it uses regular expressions, ISAPI_Rewrite can initially be very frustrating due to its terse syntax. However, if you are patient, it can be an incredibly powerful tool for your tool belt.
There’s also an IIS7-specific URL Rewrite Module available at http://www.iis.net/extensions/URLRewrite. It is easier to use than ISAPI_Rewrite because it includes a complete UI for managing and creating rewrites and an import tool for bringing your existing Apache-style rewrites into IIS7.
An extra bonus is that the IIS7 rewrite tool runs inside the managed pipeline for an extra performance boost when you’re using it on ASP.NET applications.
If you get the dirty end of the stick, sharpen it and turn it into a useful tool.
—Colin Powell
Creating samples that should appear in both C# and Visual Basic can be very tedious without the assistance of something like Telerik’s CodeChanger.com.
Although it’s not an officially supported tool, this little application will definitely get you 80 percent of the way when converting between Visual Basic and C#.
Everyone has their favorite merge tool. Whether yours is WinMerge, or Beyond Compare, or the old standby WinDiff, just make sure that you have one in your list of tools that you’re very familiar with. When managing large numbers of changes across large numbers of individuals on software development teams, a good merge tool can help you untangle even the most complicated conflicting checkins.
A number of different plugins are available for WinMerge that extend its functionality to include comparison of Word and Excel documents and XML files.
Other highly recommended merge tools include Beyond Compare from Scooter Software and DiffMerge from SourceGear. Each of these tools integrates with Windows Explorer, so the comparing files are as easy as a right-click.
If you’re not using .NET Reflector, your .NET developer experience is lesser for it. Reflector is an object browser, decompiler, help system, powerful plug-in host, and incredible learning tool. This tiny utility, originally from Microsoft developer Lutz Roeder and now maintained by Red Gate, is consistently listed as the number-one most indispensable tool available to the .NET developer after Visual Studio.
Reflector is amazing because it not only gives you a representation of the programmer’s intent by transforming IL back into C# or VB, but it includes analysis tools that help you visualize dependencies between methods in the .NET Base Class Library and within your code or any third-party code.
Last, but unquestionably not least, is Process Explorer from Mark Russinovich. To call it “Task Manager on steroids” would not even begin to do it justice. Process Explorer puts Windows itself under a microscope by allowing you to peer inside your active processes, their threads, and the environment to get a clearer understanding about what is actually going on. Advanced and detailed use of this tool, along with the entire SysInternals Suite of Tools, should be required for all developers.
In Figure C-9, I’m looking at all the processes running on my machine. I can use this tool to find which process has a lock on a dll.
Having the right tools can mean the difference between a week of time spent with your head against the wall versus 5 minutes of quick analysis in debugging. The right tool can mean the difference between a tedious and keyboard-heavy code slogging or a refactoring session that is actually pleasant. I encourage you to try each of the tools listed here, as well as to explore the ecosystem of available tools to find those that make your development experience not just more productive, but more enjoyable.
