URL Rewriting

As mentioned in my previous post, Regex Storm now has URL rewriting. It's nice to have simpler URLs. It's only used on 3 pages right now, but I expect to get a lot of mileage out of it as I keep building up the site. And then there's the SEO bonus, of course. More concise, more readable URLs tend to get better treatment with search engines.

My initial approach to implementing the URL rewriting was very tedious. Lots of code in Global.asax Application_BeginRequest() to manually pick apart the URI. I've done it this way before, but I don't recommend it. Too many little issues pop up as you go down this path.

I ended up going with the IIS URL Rewrite Module. Very easy, very systematic, and overall it just behaves better.

The reason I didn't do it this way at first was because I wasn't using IIS in my development environment. I finally sucked it up and got IIS running on my local box. So now my development and production environments are more similar, I can use (and test) modules locally, and my development environment is more robust. All good things.

Pretty Links

I did a lot of work behind the scenes to improve the URLs on Regex Storm. For example, now you can get to the tester page with this: http://regexstorm.net/tester.

I've also made searches on the reference page bookmarkable, so you can save (or share) a specific regex element. Like this:

1. Match a unicode character
2. Balancing group definition
3. Zero-width positive lookahead

And on and on.

Organized

I've decided to organize the blog posts with four tags:

• Announcements (news)
• Features (new site features)
• Technical (programmer stuff)
• Articles (regex knowledge)

I'll try to keep posts distinct between these 4 tags from now on. Because someone might be interested in new features, but not the geeky implementation tirade that comes with it. :)

I also thought it would be cool to actually write a few informational posts on regular expressions in general. Maybe add some value to this blog. I doubt I'll have the time to do that very often, but we'll see.

Housekeeping

I've spent the past few days takings things easy with Regex Storm. Mostly been replaying Mass Effect. :) But also fine-tuning things here and there on the site.

I made a few changes so that the ajax stuff feels zippier. I decreased the "are you done typing yet?" delay from 0.5 seconds to 0.25 seconds, and made the progress spinner pop up immediately (instead of after the delay) so the UI feels more responsive.

I also did some good old fashioned HTML/CSS reduction to save bandwidth and make ajax responses lighter. Tip: using shorter IDs for your controls in .NET can make a huge difference, especially with repeating or nested controls. Results vary depending on what's in the form, but in my test case I cut the response size by about 50%.

Also fixed a few browser bugs (silly IE7) and changed some styles (the site is in Arial now).

Maybe I'll finish Mass Effect this weekend. Then buy Mass Effect 2. :)

Regex Tester 2.0

Finally! My massive overhaul of the regex testing page has been deployed. Screenshot time!



So, the big crux of this was the introduction of real-time highlighting of matches, as you type, and where you typed them. I think it's really cool, especially since it's just straight up HTML, CSS and JavaScript.

The illusion is that spans of text within the input box are being styled, but that's not really possible. It's actually a textarea with a transparent background and a div carefully positioned behind it. The text in the textarea is replicated to the div, perfectly lined up. Then when I highlight text in the div, it shows through and makes it look like text in the textarea is being highlighted.

Of course, the devil is in the details. The whole thing requires pixel-perfect accuracy, and even the slightest nuances, like how text wraps in different browsers, had to be accounted for. It was mind-numbingly frustrating at times. On that note, it sadly does not work in Opera. Sorry, Opera users. I might fix it one day, but no promises.

Ajax is used to get fresh results anytime input is changed or info needs to be loaded for a tab. Clicking a tab does an ajax call immediately (and caches the results), but the input fields will wait 0.5 seconds before making an ajax call. This prevents a ton of unnecessary requests from being made if someone is typing really fast.

I also made some conceptual UI changes. I got rid of the match/replace/split "mode" concept. Doing a replace is now presented as a toggle option, and splits are shown in their own tab. I think this is more intuitive, and it doesn't force the user to pre-plan what type of data they want.

Alright, wrapping up.

This is the most complex UI (behind the scenes) that I've ever made. But if I did it right, it won't even occur to people using it. It'll just flow.

Gzip Compression

So today I did a little reading up on using Gzip to compress files served over the web. I kind of already knew it was a good thing, but didn't realize just how good. You can flip it on with very little effort in IIS (it's literally a checkbox) and dramatically cut the transfer size of all text files. Awesome.

So I flipped it on, went to this page, and compared the results (in bytes):

• Tester.aspx: 17329 -> 7151 (59% reduction)
  
• Base.css: 3785 -> 1550 (59% reduction)
  
• Tester.css: 8980 -> 2916 (68% reduction)
  
• Tester.js: 3416 -> 3290 (4% reduction)

As you can see, some files compress better than others, but the overall numbers are great. Just by flipping a switch, I've cut the total bandwidth of my pages, stylesheets, and scripts by more than half.

This should help keep the site zippy, especially as I start adding async features.

Speaking of, my massive revamp to the tester page is almost done. Just doing some final polishing and bug testing. I think it turned out really cool, and I can't wait to put it out there and see what people think.

Improved Regex Tester Layout

I spent some time streamlining the layout of the tester page. Compare, old on top, new on bottom:





The old layout pulled your eyes in a dozen different directions and took up too much vertical space. I had to sacrifice the tips, but I think it was worth it for the tighter layout. I even upped the size of the input box by 50% in the new layout to give people more room to work with, and the form as a whole still came out shorter.

This is just a stepping stone to a much bigger overhaul for the tester page.

I also upgraded to jQuery 1.4. All the pretty charts made me do it.