Skip to main content

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...
Tools Menu

The menu contains the following:

Save as...
Public Library
.NET Regex Reference
Generate .NET Code

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:
Recent Benchmarks

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.


Popular posts from this blog

Regex Hero for Windows 10 is Underway

Awhile back I began working on an HTML5 / JavaScript version of Regex Hero . However, it was a huge undertaking essentially requiring a complete rewrite of the entire application. I have not had enough time to dedicate to this lately. So I've begun again, this time rewriting Regex Hero to work in WPF. It'll be usable in Windows 10 and downloadable from the Microsoft Store. This is a much easier task that also has the advantage of running the .NET regex library from the application itself. This will allow for the same speedy experience of testing your regular expressions and getting instant feedback that Regex Hero users have always enjoyed. I expect the first release to be ready in Q4 of 2019.

Optimizing Your Regular Expressions

Regular expressions will backtrack.  That's an unfortunate thing about them because backtracking can be slow.    And in certain (rare) cases the performance can become so awful that executing the regular expression against a relatively short string could take over a minute.  There's a good article about catastrophic backtracking over at . And today I created a video about all of this called  Regex Lesson 5: Optimization .  In the video I start with a very poorly written regular expression and make several improvements to it, using the benchmarking feature along the way.  By the end of the video I make the regular expression over 3 million times faster. In addition, today's update to Regex Hero provides a little message in the event that you encounter a regular expression that takes over 10 seconds to evaluate... And then last of all, I changed the benchmarking feature a bit.  In the past it would simply test your regular expression against

Regex Analysis Bug Fixes

All of these updates relate to the analyzer, so if you're not a Regex Hero Professional user, then this won't affect you. I received a report of an analysis bug  related to character classes.  The regex analyzer wouldn't handle opening brackets inside a character class properly. It's one of the finer details of the regular expression syntax.  You wouldn't think that [[abc] would be valid, but it is.  You don't have to escape the opening bracket inside the character class.  So now the analyzer interprets this as it should. I've also fixed bugs around interpreting the \x00 (hex), \u0000 (unicode), and \k<group>  (backreference) expressions. P.S. The major updates I mentioned recently are still in the works.  So the price for Regex Hero Professional is still $20 for now.