RegExr – An adobe air and web cousin the Rubular

Once again I am digging into regex to help me deal with monotonous tasks and cleaning up my own code. I wrote before about a couple of options I had found to help me learn/understand more about regex expressions and how the ones I was working with were actually doing. This one was, unfortunately not on the list.

RegExr vs Rubular

While Rubular continues to be a great resource, this new one has quickly made its way to the top in my opinion. The name of the webapp is RegExr and not only is available as a free webapp but also has a desktop adobe air companion; perfect for when the wifi dies or there is just flat out no internet. The UI is pretty straightforward and very similar to what I saw with Rubular. In the screenshot below we can see some of the features listed off and just how easy it is to navigate and find/save the code snippet you are looking for.

RegExr - Adobe Air
Again, a lot of what see here is very much like Rubular. They both have two input areas, one for the regex snippet and one for the text or code you want to work against and they both highlight the text that matches against that regex.

Saving Custom Snippets

Now there are a few more options in RegExr like global, ignoreCase, extended, etc, but I must admit I have not played with those yet and honestly they aren’t what sold me. What really pulled me in are the samples off to the right. Not only do you have snippets that you can pick and chain together but you also have the option to save the snippet you just made and come back to it later. In my case I needed to pull the text out of the tokens so I pass them on to get translated. What I found was a canned expression that gets html tags – <[^<]+?>. It needed a small mod -  ”[^"]+” – but with that done it didn’t take but a few seconds to pull all the text I needed. And now with the option to save this code I don’t need to write it again, just pick it up and go.

Final Thought

I still think there is no comparison to experience, especially in the regex department, but another resource to help me learn and save my progress is something I can’t pass up.



Regular Expression & Notepad++

I do NOT love regex, more accurately it confuses the sh** out of me, yet there are times when I need it.

At this point when I work on a design I know in the back of my mind that I will also probably be the one doing the markup. This isn’t really a problem with me however when it comes time to handle language/culture selection I’m out of my element, and the thought of manually stripping all of that html/css/jquery makes me sad inside. That is until I found a few awesome regex resources.

Regular Expressions Cheat Sheet

First up is the Regular Expressions Cheat Sheet available from Now if you have no idea what regex is, this really isn’t the best option for you. On the other hand if you can work your through without needing to know all of the nuts and bolts here you will find quick access to a few dozen key search options to help you out.


Next we have RegexOne, hands down the best step-by-step I have come across from approaching regex with only a rudimentary understanding. They have practical real world examples and an amazing lesson list that includes live examples and user interaction/testing. As a starting point you could definitely do worse.


Last, but certainly not least, Rubular. Now there are no lesson plans or tutorials here however what this site lacks in a walk-through it makes up for with live input and testing. Basically, you paste the content you want to search against and a “live” copy is displayed to the right showing you the highlighted sections that the regex input above matches.


And while the reference here is not quite as in depth as the cheat sheet mentioned about rubular does also have a quick reference to help you get kick started.

Final Note

While regex in its entirety is extremely daunting, for quick simple operations there is no reason to be afraid of it, rather a great reason to push through the confusion and learn something new. A little trial and error might be needed for us “noobs” but with the tools above we can all come to grips with regex and everything it has to offer.

FBD/JA Logo – Inspiration

First up, inspiration. What the heck do I want to make???

I am not sure how anyone else’s process works but for me I need a few good designs as reference to get my brain started. In this case google and deviantart as my best friends.

I have always been a huge fan of good typography so I think I will create a typographic logo. Only catch is that I am not so good at creating my own. Luckily for me over the past few years I have gotten very familiar with Photoshop’s pen tool and using it to create custom shapes.We’ll cover that in a bit but first lets snag a few ideas, courtesy of google.

I think that based on my name I want to go with something simple, like “JA”, so lefts find a few ideas for our letter J. First up are a few great examples of j’s in the wild, and while none of these exact designs made their way into the logo itself their overall flow ways definitely a great influence.

Now that I have an idea for the J I wanted to find a way to a way to make it stand out. Now in most cases, and for most clients, you can probably get away with some custom kerning and some simple text effects but this is going to be for me so I’ll step it up a bit. With that in mind the image below is exactly what I want to shoot for; clean, simple, stylish.

Next up, concept time.

FBD/JA Logo – Intro

As stoked as I am to have come up with a logo I love, I think it needs a little something extra. More specifically I want to break down my process and find places I can improve. I have always struggled with this type of project though, not really a big fan of documentation, but  over the next few posts I will try to break down the steps I went through when designing my new logo. Those will include:

  1. Inspiration – what the heck do I want to make?
  2. Concepts & Sketches
  3. Photoshop & Final Product

All of these will eventually lead to the final result…


JA Logo/Brand


Designing for clients, corporate vs artsy & client ideas

Designing for clients never fails to be challenge. Whether your dealing with a mom and pop business or largo corporation one thing you can’t overlook is the feel of the design, and EVERYONE has their take on it.

A great example of this is creating a simple business card/logo for my girl friend. Seems like an easy task write? Wrong. When it comes to smaller clients, in this case Cassie, you tend to see a lot of the client’s personality trying to work it’s way into the design. Your job? Fight it, with all your might. In most cases the client knows what they like but does not understand what the means to the rest of the world or how bad their taste might actually be. In this scenario she wanted a simple sun logo and name, so that is exactly what I delivered. Only…it was “too corporate”, so I gave a little bit.

We’ll skip over the details but the end result was that over the next hour or so I gave more than I normally would have and while the logo was definitely artsy, it ended up being something that I was too proud to put my name on. Not to say that there is anything wrong with Cassie’s likes, just that she has not had the experience in compromising her design ideas for a better final product. That being said…she was happy with it and I have seen this time and time again with smaller clients. When following the ideas of a client to the tee you will almost definitely end up with a product that is somewhat sub par, and the client will have one of two reactions; they will either love it and think you are the greatest designer ever, or they will hate it and it will be all your fault. Never-mind of course all you did was follow their ever changing ideas and direction.

All in all you can’t be afraid to tell someone that their idea or direction sucks. It’s not your fault. What you should aim for though is to help them reach a point where their ideas are appropriately blended with your eye and experience. This is of course no easy road (especially when designing for a friend, family member, or loved one) but with practice and lots of patience you will arrive at a place where both the client and yourself are satisfied and the final product is something you are proud to say you worked on.

Another way Photoshop CS6 & Windows 8 don’t always play nice…

It never fails, I am already late in delivering a product pricing sheet and wouldn’t you know it…my laptop crashes.

So far it has played out like this…

  1. I am close to the finish line on a product features pricing sheet when BOOM! Windows decides to die.I have been using this laptop and Windows 8 for about 2 months at this point and overall it has been a great experience, up to now. And just like this error message below I am immediate sad. Ok there may have been some angry words thrown around but overall just sad.

  2. I realize that I have enabled Auto Recovery and will be fine, maybe lose an hour but overall I’ll survive.
  3. Laptop reboots, I start up Photoshop, and uh…why isn’t it starting the automatic recovery I have seen before?
  4. Maybe it just failed to find the file for some reason so I go to look for the recovery files myself…not there. That’s weird.
  5. Well I know where the original file is I’ll just go open that…it’s corrupted…WTF.

At this point I will admit to being in panic mode. I have never seen this error before and it would appear that I just lost the last few hours of work.

Now to be fair, Adobe has gotten better in the past few years about how they handle corrupt or unsaved files however they still do not enable these features by default, rather they require you to go into settings and choose to enable them. Really Abode? Really?? Luckily for me I have been down this road before before and Auto Recovery is enabled across all of my machines. Unfortunately it appears that the very feature that could have saved me hours fails miserably in the event of a system error, go figure. So I start in on trying to find a work around to recover the files. Google here I come!

After about an hour and half I am 4 recovery apps deep with no luck. Each claims to have created a recovery version and in the process is returning the correct layer names, but once each file is opened they all show an error about the merge that has been applied to the layers and their blend modes leaving me with one, completely black background layer. In my searching though I did see a somewhat promising solution dealing with the rename of the extension associated with a .tmp file. Only catch is I don’t see one. More digging only proves to me that either I don’t know how to read, there is no CS6 .tmp file, or if the file does exist it is buried in a windows cave somewhere being guarded by a dragon.

For now the hunt continues for the mythical tmp file but as it does reality sets in and sleep seems to be farther and farther away.

Update: After my search for a recovery app failed, I gave in. At that point I was actually more frustrated that I hadn’t just started over as I could have reproduced something close in that amount of time. And so I did start over, and you know what? The end result of my restart was actually better than the first version that I had lost. So I guess there was an upside?

All in all though I did learn a few valuable lessons…

  1. The “Save As” function is your new best friend. 
    Seriously learn to love it. Having multiple versions of your file outside of the one you are working in is the way to go, especially in situations like this.
     Yes it may suck to lose 30 mins of work but it is definitely better than losing all of it.
  2. Windows can be evil.
    In event of a photoshop error you will have the recovery version to fall back to however if windows is what crashes the recovery file never gets created and your working file could be come corrupt. Again, the Save As function could save your life and those valuable hours in which you could be sleeping.
  3. 3rd party solutions don’t work with CS6.
    Most if not all of the products I tried  make the promise that they can recover a .psd for all versions of Photoshop, and for CS5 and earlier it appears they can. If however you are working in CS6, save yourself some time and just start rebuilding the file right off the bat. It may suck but in the long run will save you hours of frustration.

It lives!!!…kinda…

Some where along the line I had a great idea, I would build my own website. It would be perfect right? I could go in whatever direction I wanted without any regard for someone else’s design tastes and make a page that spoke to me and show cased my portfolio. Turns out there was a catch…I have no idea what represents me design wise.

And so I struggled against the endless options and never ending changes only to set the site off to the side to collect dust. But there was another catch…automatic billing. You know how it goes, you sign up because it is convenient and before you know it…wham! just shelled out $60 for a year in which you literally did nothing to the site, let alone every went to it.

So I am back at it again. Renewed with fresh confidence and a need to progress professionally. Maybe this time will be different??