Javascript Calculator

While working on a side project, for which I found a small amount of time to work on. I created this rather simple and basic calculator, made with jQuery (Of course).

You can view the calculator here: jQuery Calculator

It was rather simple to build, and I don't even think that the source is really worth describing or going into detail with.  The only thing I think is worth mentioning is the use of the 'eval' function, which allowed me to dynamically create javascript on the fly and take the result of it.

In this case, I passed in the Left and Right values along with the operator and simply stored the output.  For example, if you typed in "55", hit "+" and then entered "100".  I simply call:

Which resulted in the numeric value of 155, of course.

IE7’s Implicit CSS Quirks

If your developing an absolutely positioned site layout, and wondering why IE always seems to be a bit 'off', it might be because of the odd implicit CSS values that it has.  For example, the BODY element has an implied 2px (medium) thick border, that is set to the 'inset' style.

This is done, I guess, to give the page a visually appealing look inside the IE container ... but is obnoxious as it has to be overriden in CSS explicitly and if you forget ... your layouts are all off.

I wrote a rather simple QUnit test, as an exploration of the QUnit framework and found that my tests kept failing in IE due to a 2px difference in absolutely positioned elements offsets -- which, should always be the top/left values when the element is explicitly positioned absolutely (top and left are both set, no inheritence).

To determine this, my test utilized the isObj() function of QUnit, and looked similar to this:

The first assertion, 'ok', was done simply so I could see the top/left values in the event of a test failure. I think a nice addition to the QUnit framework would be a 'pretty print' function for objects so you could see exactly why a test failed when the expected result is a simple object (no functions attached to it).

QUnit for jQuery

I've been intriqued by the concept of Unit Testing for quite some time, though, honestly, have never really looked much into it.  A coworker sent me a link to a LosTechies.com blog and now I'm even more intriqued ... Unit Testing specifically for my jQuery, hrm .... now that sounds interesting.

I'll be exploring this on my free time for sure.

Optimizing Web-Forms with jQuery

Ever look at some of your forms and think, wow, that's repeatitive.  Yep, you know those multi-level search forms, or tabbed interfaces with repeated drop down values? Those are the ones.

Ever wonder how you could optimize them for the client and reduce some of the overhead? For example, say you've got a site that has multiple categories, and for each category you can search by State, Region and some other 'Long List' of filterable data (model, manufacturer, artist, author, etc) -- ever think it was a good idea to create a tabbed interface to help break it out ... since Searching by Artist really has different fields then searching by Author ... one's a song, the others a book ... they have similar qualities, but not the same so the form differs for each.

Say for example, you have 5 forms on your 'search page' and each form is hidden behind a 'tabbed user interface' (toggled display attributes with a little bit of simple javascript), now, on each of these forms you have the same select/option drop-down with the same values.  The only thing that differs, or may not, is the elements ID attribute.

Ever looked at how much space was consumed by a simple US State drop-down? Nearly 4kb of data is inside the <select /> tag <option value="xxxxx">Alabama</option> ... 50+ times (especially if you include regions and sub-regions in the list).  Now, you've got this same drop down in 5 places on the page -- thats 4kb times 5, nearly 20kb of bandwidth required by the end user to download your page now.

Be nice to trim that down to a simple 5kb, wouldn't it?

With jQuery, we can ... and here's how:

We start with this, and we populate all of our values into it -- pretty simple, your site probably already has this going on -- multiple times (gotta love CTRL-C/CTRL-V action, eh?).

Now, we add a little bit of jQuery:

Wait ... uhm, we're missing something ... the destination place holders, so let's add some in:

Repeat the above as many times as you need too, in as many places as you need, save and load up your page ... watch as all the 'replicated' drop downs automatically populate themselves using the first drop downs values ...

Pure magic, really.

Ok, it's not magic ... it's jQuery ... and even then, it's really just as simple with pure JavaScript.  If your site does not already include jQuery in it's list of requirements, then simply swap out the $() selector stuff with document.getElementById calls, and then write a simple 'clone' function (I'll probably write something about doing it this way later on ... right now, I'm hungry.)

Scheduling Projects

I'm a geek at heart, I love my job (software engineer) and I take my work home with me from time to time.  I love creating 'work' for myself at home too, in the form of little projects here and there -- most of which you can read about and explore through this blog.  However, my children (I have three) all started school this year, so now I have three children in school.  Kindergarten, First and Second grades - whoa.

Talk about a lot of work, I thought the whole point in school was for the kids to learn, they've only been in school for a couple weeks now and I've done more school work with my kids then I can remember ever having to do when I was in school myself.  Absolutely insane, but entirely enjoyable to watch them learning and bringing their newfound knowledge home at the end of the day.

Now, onto my topic ...

How do you work on personal projects, homework, and still have time to wind down at night and relax with a little TV.  While, at the same time, trying to spend more then an adequate amount of time with your significant other.  It's a serious juggling act, and I've not yet figured out how to solve the problem -- I'm anxious and ready to get cranking on some of my newest projects, and a little disappointed at the state of some of my older projects.

I just don't know where all the 'extra' time that I think I need is going to come from.  I will, however, continue to look for that 'time door' so I can walk through it and get back to my projects.

Inspiration and T-Shirts …

I was helping my mother setup a CafePress.com store and thought to myself, why not.  So, I decided to open my own store and explore the possibilities.  I downloaded a couple of there apparel templates and went at them with a little bit of PhotoShop magic.

I downloaded a couple of interesting fonts that were all listed as 'free' or 'public domain', thought of a few things I've heard or seen that made me laugh, chuckle or ponder 'why ...' and threw them together on a few t-shirts, hats and mugs.  I opened the store with the basic 'free' account, and realized the limitations rather quickly and then opted to go for the paid premium account.  I figure I can run the premium store for a few months, and at the end of that time I'll know whether or not it's worth keeping online  -- a store that can't pay for itself, is useless, yes?

So, I'm going to try to keep making new designs and hopefully come up with something that is just so creative and/or entertaining ... that hopefully, everyone wants to buy one.  Now, being as I'm a realist ... I simply set the money I'm going to pay for the premium store aside and waved good bye to it, but ... as with most things, you really never know until you try.

So, here's to hoping my store pays for itself.