Test programs can be fun too

I was working on QubedPeas a bit lately and needed a semi-complete system to run tests against. The relationships I was testing dealt with everything from URLs to dynamic rewriting and since there were so many changes happening I thought I’d make sure my test tools were up to the task.

For this one I would need a real “product” to test, a real app. Something that used resources from multiple places around the patch to make sure linkages between those resources stuck when things were changed. To do this I started simply like we all do and had a few pods that loaded one another. Then slowly that formed into a more and more polished test program.

There are notes on each version, but the over-riding message here is “make your test programs awesome too”. If you take care in building your test environment you will have better results.

See the final version:  http://qubedpeas.com/examples/rabbitPatch/

or, start at the beginning:  http://qubedpeas.com/examples/rabbitPatch/?v=1

rabbit-patch

read more

Web Component Diagram – Navigation Controller (1.0)

I’ve been working on creating a generalized navigation controller that I will release as a Pea Pack (more on that later). Basically this is a general distributable component that any web system can use immediately.

navcontroller_designI set out to create a reasonably simple interface so it would be simply to use but deep enough to do the things we commonly do when we show screens and need to navigate through them. It follows some quasi-standards that have become somewhat defacto in the industry in the last few years as well, to help. It is far from complete but the first stab here will get many projects jump-started.

Note: At the time of this writing this is only the design document, I still have some of the coding left to do, so there are no links to the pack itself. I will come back and add those later once it is in a complete enough place.

The image links to a full PDF for better viewing.

read more

Better Bash Terminal

Okay, this is highly subjective, but I’m going to drop my preferences here to setting up a bash environment. I use this for OSX but also share most of it in my unix/linux environments as well.

First, you want to be IN CONTROL. So let’s get some SIMPLE understandings out of the way.

.profile

When you log in to a shell (launch new terminal window) a “profile” is run. In many places this file is called your “.profile”. At least back in the Bourne days. The new world of linux (OSX included) is dominated by “Bash Shell”. So our files are called things like “.bash_profile” instead. Same thing for the most part.

In any case, this is the file that sets up the environment for that shell session. For our purposes that means what it looks like and what commands are available.

.bash_profile .bashrc

Okay, one more diversion before we start. I use the .bashrc file for my settings. It’s a holdover of years gone by and really doesn’t matter any more. So if I say “.bashrc” and you’re putting your entries into your “.bash_profile” then you’re fine, same thing really.

Ain’t got one

If you don’t see these files or know where to find them open a shell (terminal) and that’s where you should see them. Your home directory. Try this to see everything there:

If you don’t see .bash_profile or .bashrc then you need to create them.

Now you have those files. Because I use my .bashrc file I have an off .bash_profile file. This is what is in mine:

All this says is “if you run this file, run the .bashrc file instead”. This way my bashrc always runs.

Then we’re off and racing.

Opening your file

Let’s get started. Open your .bash_profile or wherever you are adding these rules (henceforth: profile file). I won’t go into how to open these hidden files, but there are lots of ways. It depends on your editor of choice. But get your profile file opened in your favorite editor.

Command Prompt

This one is an obvious one. When we log into our shells we want to see what we need — all the time. Some people will drop the whole path in there, some just a simple > prompt. It’s personal taste. But being able to change it quickly and easily helps a lot so you can try a lot of things out.

That is a VERY simple one that will show you your location followed by a prompt. There are lots of little tricks you can do in your prompt. Maybe this resource will help: http://www.cyberciti.biz/tips/howto-linux-unix-bash-shell-setup-prompt.html

That happens to be the standard prompt on OSX if you want that.

Color!

The world is so much more interesting in color. Don’t skip this step. It’s not 1984 any longer. The color commands in bash are crazy looking, and I really don’t understand them. But here is a quick shortcut to getting started. As a note you should be able to open a shell and drop these commands in one at a time to see what you end up with. That should help you debug a bit.

Let’s simply change that prompt we created:

Okay, so now we have a prompt that is much cleaner if you ask me. Note though I use a dark BG to my shell windows (later) so this may look like crap to you.

So what is this mess? Well, I’ll try:

Something like this:

  • \[\0 - start color assignment
  • 33 - x-value of the color
  • [0; - basically a comma between the x and y
  • 38 - y-value
  • m\] – stop color assignment

Wow, that’s a mess. I agree. But all you care about is the 33 and the 38 in there. Honestly the format is a train wreck. but we’re just dealing with color pairs here. I also have some other stuff in the middle of my prompt to keep things succinct. Basically I end up with 3 parts:

path_in_dark_yellow    prompt_in_green    text_input_in_white

This looks great to me on a dark background shell window.

Color Code
Black 0;30
Blue 0;34
Green 0;32
Cyan 0;36
Red 0;31
Purple 0;35
Brown 0;33
Blue 0;34
Green 0;32
Cyan 0;36
Red 0;31
Purple 0;35
Brown 0;33

And maybe a URL: http://www.cyberciti.biz/faq/bash-shell-change-the-color-of-my-shell-prompt-under-linux-or-unix/

Your List (LS)

All that is fine, but you need your LS to be colored also. This is a simple one also. Add this to your profile file:

That will “enable” color ls results in your shell session. Talk about simple.

Your window

Finally, go into the settings of your terminal program and set up your favorite font choices and background colors. This helps so much you’ll love to be in Terminal!

My Settings

Here is how I’m set up:

In my .bashrc file I have this:

Then my Terminal settings are:

mbm2_terminal_settings.terminal

That’s it! Enjoy

 

read more

iOS Language Selection map

I had so much trouble figuring out what was what when switching languages that I decided to make a really simple map to them. Maybe it will help someone else:

2014-01-13_11-14-35

read more

NFL Playoff Bracket 2014

This is a simple one. I thought I’d pull together a printable 2014 NFL Playoff bracket. Simple and attractive. Enjoy

2014_playoff_bracket 2014-playoff-bracket

read more

CSS Compression tests

I’ve been spending all of my personal time working on a rather complicated system to help improve development in JavaScript/HTML. One of the steps of the deployment process is to “minify” or “collapse” CSS (JS is a whole other topic).

I had high hopes for minifiers. It seems like a really obvious thing to do, take all the required CSS, load it into memory, inspect obvious scenarios for collapse, remove redundant definitions, combine duplicate definitions and then remove all extraneous white-space. Sounds simple… well reasonable.

So I decided to put together a simple side-by-side comparison of the tools on a very simple CSS sheet. I’m less concerned with the exact amount of compression (which it seems is the only thing anyone else cares about), and more interested in what rules are being followed here.

 

The CSS

The starting CSS looks like this:

The Challenges

There are a few very simple things I’ve done in here to see what the tools can do.

First you will see that in .secondView the display attribute is duplicated. This seemed simple.

Next, and likely not as obvious, is that .firstView and .mainView are the same (and adjacent to one another, which matters in CSS due to precedence order). With any second pass processor this should be obvious as well.

Then, .test1 class defined at the end is a duplicate selector that, again, is adjacent. Unlike the first and main items above, these rules have different attributes, so can they be combined properly.

There are a few simple items, like: are comments removed properly and does the IE specific !important rule stick around.

And lastly I was looking for the standard reductions in white-space while maintaining any obvious needs like the space in the middle of the .mainView .title definition. Anything that messes that up needs to be thrown our immediately.

The Challengers

There are a few CSS minifiers out there and it’s fair to say I didn’t try all of them. But I tried the big hitters. I’m a Node.JS lover and built this test there. So these tools happen to all be node-capable as well.

Clean-CSS
CSSO - this was my favorite going in, but the test is well worth it
NCSS
YCSS-Min
YUI Compressor - somewhat of a standard in the world of js and css compression. It’s slow as heck, but extremely well-tested and complete

The Results

The results (shown here) of the test show that for my very simple test file there were only a few things that could be done. But given that fact there were still some interesting findings. First, no one found the duplicate display:none definition. That remained in every case. And, second, most of these compressors are doing nothing to attempt to collapse adjacent or similar rules. Though 2 of them are:

 

My Favorite

CSSO remains my go-to for CSS compression and it really hits almost all of the marks. I’m disappointed that it doesn’t find the duplicate definition. This is the resulting CSS (with line-breaks added for readability) from CSSO.

 

The Test Script

And finally I will include the script here so you can run the test yourself and possibly include your own tools to test with.

 

read more
%d bloggers like this: