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.

And Now a Blog

Alright, this is the first real post of the official Regex Storm blog. Blogger seems to be the popular choice, so I went with it. They have some really nice customization options and can publish directly to your domain, but I probably won't get around to that for a bit.

So why a blog? Because I am learning an unbelievable amount working on Regex Storm and wanted a place to put it all. Plus, I can talk about current plans and maybe get a little feedback.

This being the first real post, I guess I'll give the backstory.

I decided 6 months ago that I wanted to make a regex testing website. But I didn't have a good home PC to code on, and didn't want to spend the money for one with my wedding coming up, so I waited. And plotted...

I eventually got a new laptop and started working on Regex Storm in my free time. Regex Storm went live 6 weeks later, on the first day of 2010.

Of course, no website is ever "done", so I'm still chugging away. And I have very big plans.

First Post

Obligatory testing post. :)