Stopwatch Threshold Logging

Today's post is not related to regular expressions at all. In fact it's not really related to Regex Hero except that it potentially affects the website. But I figure I'd write about it here anyway.

I've been diagnosing some intermittent web server performance issues for awhile now. And in effort to gain some insight into which pages are slow and how often, I wrote a simple logger.

The idea is to time the ASP.NET page lifecycle from start to finish, and if it exceeds a certain threshold, then log it. The advantage of this approach is that it's not going to waste processing time logging the stuff I don't care about.

If you're interesting in this for yourself and you're running ASP.NET all you'd have to do is add the following to your global.asax:

private Stopwatch sw; protected void Application_BeginRequest() { sw = new Stopwatch(); sw.Start(); } protected void Application_EndRequest() { sw.Stop(); if (sw.ElapsedMilliseconds > 500) // 500 ms threshold { try { StringBuilder sb = new StringBuilder(); sb.AppendLine(DateTime.Now.ToUniversalTime().ToString()); sb.AppendLine(Request.Path); sb.AppendLine(sw.ElapsedMilliseconds + " ms"); sb.AppendLine(Environment.NewLine); System.IO.File.AppendAllText(Server.MapPath(@"~\App_Data\StopwatchLogger.txt"), sb.ToString()); } catch { } } }

The Application_BeginRequest and Application_EndRequest events are the first and last events in the page lifecycle, respectively. So this does a beautiful job of timing every single request throughout your web application, while only logging the slow stuff.

The result of a logged event might look like this:

4/10/2010 3:56:01 AM
/default.aspx
995 ms

Super simple and to the point. You could easily expand on this code if you wanted, adding get and post request variables, cookies or whatever might help you put this into context.

To test this initially I recommend setting the threshold to 1 ms just to make sure the logging works without throwing an error. Once you verify that you can set it back to something more reasonable like 500 ms and let it do its thing.

Bugs fixed, Improved Efficiency, UI Tweaked, and Code Hinting Improved

Bug fixes

1. When you press the down arrow key the focus shifts to the code hinting box, but holding down the key wouldn't do anything unless you lift and press again. Now as you press and hold the down arrow key, the selection will rapidly move down the list.
2. The code hinting box wouldn't go away when you shift focus to the target string or click in the regular expression box. Now it will.
3. The app would throw unfriendly errors if you have disabled Isolated Storage. Now it won't.
4. The app would throw unfriendly errors occasionally when trying to step to a match that doesn't exist. Now it won't.

Improved Efficiency

1. I've enabled output caching on the home page as well as the tester to improve ASP.NET performance, if only slightly.
2. I've combined three separate web service calls upon initialization to only one. This will reduce the time it takes for the tester to recognize your login.

UI Tweaks

1. I've changed the placement of the code hinting popup to line up perfectly with the regular expression above it, and I've changed the font to match.
2. I've restricted the size of the code hinting box and made it scrollable by arrow keys.
3. I added a subtle drop shadow to the code hinting box and dialog boxes.

Code Hinting Improvements

1. I added code hinting for all of the remaining constructs that have parenthesis.
2. I added code hinting for the commonly used expressions that begin with a back slash such as \n, \r, \s, etc.

Silverlight 4 release date confirmed: April 15th, 2010

What I had suspected is now confirmed. Silverlight 4 will be launched along with Visual Studio 2010 on April 12th. If you're in the Las Vegas area you can even register for the launch event. Or you can watch it online.

I've talked before about how Silverlight 4 will affect Regex Hero. So needless to say, I can hardly wait for it to 1.) be released and 2.) reach a large enough audience for me to make the switch. I'm going to be keeping an eye on riastats.com for adoption rates.

UPDATE:
So the official Silverlight 4 launch was broadcast live today. And I learned that in fact the actual release date will be April 15th (Thursday).

UPDATE #2:
Silverlight 4 is live!

Get it here:
http://www.microsoft.com/getsilverlight/get-started/install/

Major UI Overhaul

I was pretty proud of Regex Hero's simplicity in the beginning. But I've built Regex Hero little pieces at a time for the past year. As such, I've gone in a few different design directions and the usability has suffered a little. I'm a programmer 1st, designer 4th. That's no excuse, really. If I was a more disciplined designer I wouldn't have let this happen. But nothing in Silverlight development is final. So I sat down this weekend to solve some of these UI problems, and solve them well.

My Inspiration

Bill Buxton has talked about creating a common design language for an application. What he's getting at it is that the design of your application should be consistent throughout so that when you explore a new section of the application you'll instinctively know how things work. For instance, new dialog boxes, windows, and basic UI elements should always appear in a consistent, and therefore, predictable manner. Likewise, the color scheme of tabs should be consistent so that you can easily know which tab is selected. All of the tools the application has to offer should be grouped by function and should be easy for the user to find. So be consistent. It's such a simple design principle that even left-brained people like myself can grasp.

Beyond this, there was a quote I came across a few months ago:

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."
-- Antoine de Saint-Exuper

Words to live by. Every time I sit down, put on my turtle neck (not really), and do some design I think of this quote. It's all about simplifying the interface as much as possible for the given functionality.

The Improvements

First, I added a file menu...


The menu contains the following:

File
New
Open...
Save
Save as...

Tools
Public Library
.NET Regex Reference
Generate .NET Code
Benchmark
Permalink

Help
About

Everyone understands the ubiquitous file menu, so why fight it? The "New" and "Save" buttons offer completely new functionality. "New" will clear out the regular expression, target string, and replace text boxes for you so you can start fresh. "Save" will save your regular expression in a single click. And then the "New" and "Open..." commands will prompt you asking if you'd like to save your changes. All of this functionality is based on how Notepad works, even down to the wording of the dialog boxes. Oh yes, I took inspiration from Notepad as well.

By adding this menu I've also made the decision to remove some of the oddly placed buttons and links scattered through the application. For example, the buttons for .NET Regex Reference and Generate .NET Code are gone since they're now in the menu above. The same goes for the Benchmark and Permalink links that were on the right hand side of the app. It's a tough decision to simply remove buttons altogether but it does give me the ability to group all of these things by functionality and hopefully make everything easier to find and work with as a result.

By removing the Permalink and Benchmark links from the right-hand side I've also removed a purpose from the right-hand panel. For instance, instead of the Benchmark UI appearing in the right-hand panel, it now covers up the target string box just like everything else. This has allowed me to do a lot more with the Benchmarking feature thanks to the extra space:


The iterations per second concept is something that's been around a long time. And it is a useful term of measure so I've made that the prominent statistic. But I've also added a recent benchmarks section so that you can watch your progress as you tune and tweak your regular expression.

I also moved the error box 5 pixels downward so it won't cover up the last line of the regular expression box. And then I made the Grid splitter control 2 pixels thicker so it's easier to get your mouse cursor on it.

I think that about sums it up. Enjoy.