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.

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.

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.