My Work Articles

An addition to my website is the top commenters page.  Even though the page doesn't look that complex, there is still a bit going on behind the scenes.

To get the top commenter count I have to thank Ryan Peterson in helping me write this custom MySQL query.  I used Group By to lump the results together based on the commenter's email address.  Then use count(*) to count the number of records in the group. Also used the NOT function in MySQL to filter my email address.

Mysql:

SELECT `Comment`.`author`, `Comment`.`id`, `Comment`.`url`, count(*) AS `count` FROM `cake_comments` AS `Comment` WHERE 1 = 1 AND NOT(`Comment`.`email`=\'m@marcgrabanski.com\') GROUP BY `Comment`.`email` ORDER BY `count` DESC LIMIT 0, 10

Since I didn't want to load all of the related comments at once, I decied to use a little jQuery and Ajax to show comments that they have made.

First, I put a span tag around the comment count, because without JavaScript you won't see this functionality. On page load I swapped the spans into links with $(this).replaceWith('<a>' + $(this).html() + '</a>');

Instead adding behavior later after append, I used a jQuery object inside replaceWith  so I can attach behavior to the link and I like how the code looks.

JavaScript:

$(this).replaceWith(
    $('<a>' + $(this).html() + '</a>').click(function(){
        //code here
    })
);

Using CakePHP's JavaScript object generator, $javascript->object($data); it was easy to send JSON back to the client and parse with jQuery. Here is the full source of the JavaScript file.

JavaScript:

$(document).ready(function(){
    $('.get_comments').each(function(){
        $(this).replaceWith( 
            $('<a>'+$(this).html()+'</a>').click(function(){
                link = $(this);
                $.post('comments/get/comments', {
                    'data[Comment][id]': $(this).siblings('.author').attr('id')
                }, function(data){
                    out = '';
                    for (i in data) {
                        prefix = data[i].Article.type ? 'article/' : 'answers/';
                        out += '<li><a href="' + prefix + data[i].Article.slug + '#c' + data[i].Comment.id + '">' + data[i].Article.title + '</a>' + 
                            data[i].Comment.created + '</li>';
                    }
                    $('<ol>' + out + '</ol>').hide().appendTo(link.parents('li:first')).slideDown();
                    $(link).replaceWith( $(link).html() );
                }, 'json');
            })
        );
    });
});

Update: I think I'll post the CakePHP code just in case someone is interested. Here is the controller, I use the RequestHandler component var $components = array('RequestHandler'); and the Time helper var $helpers = array('Time'); in the top of the controller.

PHP:

function get($type = null) 
{
    if ($this->RequestHandler->isAjax()) {
        Configure::write('debug', 0);
        if ($type == 'comments') {
            $comment = $this->Comment->read(array('Comment.email'), $this->data['Comment']['id']);
            $results = $this->Comment->find('all', array(
                'conditions' => array('email' => $comment['Comment']['email']),
                'fields' => 'Article.title, Article.slug, Article.type, Comment.id, Comment.created'
            ));
            $this->set(compact('results'));
        }
    }
}

I also turn debug off with Configure::write('debug', 0);. Also, I only use $type  so that I can setup my code to get types of data if I want later - more of a design pattern I typically follow.

Then in my view I use the time helper and output a JSON object.

PHP:

<?php
if ($result):
        if (isset($result['Comment']['created'])):
            $results[$key]['Comment']['created'] =
                $time->timeAgoInWords($result['Comment']['created']); 
        endif;
    endforeach;
    echo  $javascript->object($results); 
?>

To see in action, click the comments count next to someone's name on the top commenters page.

After getting tired of not having business cards when people asked, I decided to buckle down and make some.

I sent the design over to www.overnightprints.com to get them printed.  They turned out exactly how I wanted them - A+ print job by my standards. These cards turned out great! 

It is exciting to have some business cards that are this nice. No more writing my email address on a napkin!!

A list of what personal projects I have going on.

• Rent Update - Rental property listing web application - I have high hopes for this project.
  Status: Well-Underway - backend data entry developed, design complete, UI development started.
   

• jQuery Datepicker v4 - Rewriting jQuery datepicker on top of the jQuery UI core.
  Status: Started - initial code structure is complete.
   
• CakePHP jQuery Integration - Integrating jQuery and jQuery UI into the core of CakePHP.
  Status: Concept - digging into current code. Thinking ways to integrate helpers to follow jQuery mindset.

• Carcassonne Online - Board game converted to JavaScript on top of jQuery UI and Comet.
  Status: Underway - much of the game interaction has been developed, some difficult parts left.
   
• Family Reminder - Web application to help those of us with bad memories to list family events and birthdays, members of a family can subscribe to reminders and get invitations, address where to send cards, etc.
  Status: Started - database structure and concept complete.
   
  
• Open Ad Sense - Open source ad system which gives more ad revenue to publishers instead of Google/Yahoo taking most of it.
  Status: Concept - industry professionals are excited about the concept after I explain it.
   

These are all unpaid (at the moment) and for my own personal career development.

I received a request for employment from a company who had gotten funding and was trying to assemble an, "all star team" (I made the above logo for fun). Most of the time I do not respond, but in this case the person hiring took so much time crafting the email that I decide that I needed to email back. My response was largely canned, but at least I took the time to respond:

I am currently not seeking full-time employment, however I do consult for agencies that know my work or have worked with me in the past. I find that working relationships are most beneficial if the agency has had experience with my work, because they are able to accurately judge my abilities. Typically, I am sought after for prototyping and user interface development. My rate is ___ per hour.

He then responded with a line of questions regarding why I was only open to consulting. Here was my response, which I think sums up a lot of where I am at in my professional life:

Employer: Thanks for the reply. May I ask why you are not open to full-time employment? Do you prefer consulting work?

Marc: Consulting allows me the ability to work from home and keep working for agencies to a minimum. I try to stick to 24 hours of consulting per week, allowing the rest of my time to be dedicated to personal projects. My projects are worth their weight in gold, more valuable to me than the fleeting cash that I get from consulting. That said, I still need to pay bills and I do love to do client work when it suits my talents and abilities.

Employer: One thing to mention is that we could talk about giving you the option to do consulting work on the side, while being a full-time employee of ours.

Marc: I tried full-time employment with working on side projects and got burnt out, so this is not an added benefit. Full-time employment is too demanding on time. You only have so many fresh-thinking development hours in a week.  My opinion is that if you do 60+ hours in a week, than a lot of that time you weren't spending on pressing your abilities to the maximum - not only do you end up having no life, but you most likely wasted a lot of time with clouded thinking.

The goal here is efficiency and making time as effective as possible.

Employer: We need an all-star team to turn our company into a multi-million dollar enterprise and we think you could be a great asset to our team.

Marc: Thanks again for considering me for your all-star team. As far as making a company into a multi-million dollar enterprise... I have worked with fortune 50 companies (UnitedHealth Group, HSBC, 3M and Ford) and have seen them make millions off of my work, which is a reason that ultimately led me to go off on my own as soon as I could.  I am happy to make people money, but the fact is that if you are full-time, then your rate is pretty much set and you don't have the time to dedicate to creating your own ideas.

Employer: Will you consider it with the right pay? Let me know.

Marc:  I do not consider full-time to be an option right now because it limits me from doing the projects that I feel the need to create.

Overall the goal is to create ideas, and full-time employment doesn't allow me to do that at this point in my life.

Here are some themes for jQuery UI Datepicker, I used ThemeRoller and then added a few fixes. The stylesheets are stripped them for use with datepicker only.  If you want these datepicker themes, download the theme pack.  Thanks to Filament Group for making ThemeRoller!

NEW! - Added the, "grabanski" theme.

My website has been updated with a, "Questions" section to fulfill a need I've had all along - to get questions about web development answered. The first question I'm asking is for a $5 reward to the best answer, "What is the Best Analytics Software?".

I've consantly been asking questions to people over Twitter, in IRC and instant messaging conversations. The responses and answers really need to be made public, because if I am asking the questions then other people are too.  

After working for RMG Connect (Minneapolis, MN) for two years, I would like to take this moment to wrap up what I've learned and pay them some due respect. For those of you wondering where I've gone from RMG, I moved on to being a consultant and to start my own business building web applications.

Note: My experiences at the Minneapolis RMG office may not reflect that of the broader organization of RMG Connect (30+ offices). This article is based on my personal opinions and is not sanctioned or endorsed by RMG Connect.

Business Structure of RMG Minneapolis

The biggest takeaway from my experience at RMG was structure. From a high level, this is how the office was broken down into roles and responsibilities on the production side of the business:

• Account Executive: Makes initial relationship with the client. Gets contract signed, presents RFP response, on-going client contact.
• Strategist: Interviews the client to find out their goals with RMG services, big picture people. Decides on a product and vision to pursue with RMG.
• (PM) Project Manager: Estimates hours, creates project plan and lays out project time-line.  Becomes client contact for anything project related.
• (BA) Business Analyst: Defines business requirements and use cases.
• (IA) Information Architect: Creates wire frames based on the business requirements.
• Copywriter: Writes copy for anywhere the client and IA deems it necessary.
• Designer: Creates templates and style guides for project based on wire frames.
• Developer: Takes all artifacts and creates the finished product.
• (QA) Quality Assurance: Checks everything to assure final product matches all artifacts signed off by client (content, design, wire frames, use cases, etc).
• Analytics: Ongoing tracking shows user trends and how to make the product more effective.

While at RMG, I had a chance to work with all of these core groups of production people, aside from the account exec and strategists.  I was always so interested in how each of these roles interacted with each other.  I would walk the floor throughout the day having brief conversations with coworkers to understand this structure more. It was fascinating to me and I always enjoyed learning bits about their expertise. All too often people don't realize that each one of these roles requires a specific and refined skill set. 

Important takeaway from a developer's perspective: If a developer sits down to develop an application without having the understanding and principles of each role, the developer will have to undergo an amazingly complex road of twists and turns.  Even if the product gets completed, it will most likely lack the cohesiveness and polish that having these roles provide.

If the proper time was given to each task and none of the steps were skipped, developing the final product based on these documents was a breeze.  The structure always left for an enjoyable experience for me, because I always knew where to find the answers to my questions depending on what artifact I was looking at.  Sure, there was a lot more, "social" overhead by tracking people down, but the end result was never a shot in the dark. The client always knew what to expect.

Overall

I had no complaints about RMG Minneapolis internally as a business. Some benefits of my experience there are worth noting:

• RMG paid me fairly for my experience at the time and the job market in Minneapolis, MN.
• I learned to meld artifacts from all different practices into one cohesive product.
• RMG subsidized my trip to a web development conference in Boston, The Ajax Experience 2007.
• I was able to grow my abilities by researching during down times.

There are so many words I could say about my last 2 years working with RMG Minneapolis, but I think I'll stick to the above for now. Thank you to everyone I worked with!

Visit the projects page to view some of the work I did with RMG Minneapolis.  The testimonials page also has many recommendations that I received from coworkers at RMG Minneapolis through LinkedIn.

Note on June 27th: The website is now usable on IE6 and IE7.

Rebuilt from scratch on top of CakePHP and jQuery, version 2 of MarcGrabanski.com has been launched!

The first version was on top of PHP and HTML, which turned into a mess to maintain. This time I really thought long and hard on how to code the website from the ground-up. It is a psuedo CMS, blog and takes advantage of much of CakePHP's strengths.  The code is 100% hand written in a text editor, as well as the design was done in illustrator. I purchased the computer/face, then heavily modified it and illustrated all of the items around the monitor and keyboard. I enjoy illustrating but don't get to do it very often (too much coding). 

Finally I feel like I have a website to be pleased about - despite the compliments on the old website by far and wide audiences, I was never too happy with it.  But, this one I enjoy and am pleased with.  Which is ultimately what matters.  With this website I will be able to post more (hopefully) and definately have a much easier time maintaining.

Enjoy the new website, I know I will!

P.S. Please report any bugs you find in the new site to m@marcgrabanski.com

jQuery UI Datepicker has been updated to v3.4 - view the v3.4 change log for a full list of changes.

Many functions have been renamed and will stay this way. There was much discussion around the API of the jQuery UI project. It was decided that the name of the plug in will be the main function and the first parameter will be the actions.

To migrate fully, the following steps need to be taken:

• Replace attachDatepicker with datepicker.
• Replace removeDatepicker() with datepicker('destroy').
• Replace changDatepicker(...) with datepicker('change', ...).
• Replace enableDatepicker() with datepicker('enable').
• Replace disableDatepicker() with datepicker('disable').
• Replace isDisabledDatepicker() function with datepicker('isDisabled').
• Replace showDatepicker() function with datepicker('show').
• Replace getDatepickerDate() function with datepicker('getDate').
• Replace setDatepickerDate(...) function with datepicker('setDate', ...).

For example, this old style code:

JavaScript:

$('inputs').attachDatepicker(...);
$('inputs').changeDatepicker(...);

becomes:

JavaScript:

$('inputs').datepicker(...);
$('inputs').datepicker('change',...);

I have come to love the new API - it fits with jQuery much better, don't you think?

Also, on the top of the datepicker documentation page you will notice links to legacy versions documentation for v3.2 and v3.3. That way if you don't need to migrate over to the new API right away you don't have to, while still having documentation.

Version 3.3 of jQuery UI Datepicker has been released. There has been many changes to the function names in preparation for the next release of the jQuery User Interface library.

• Changed $(selector).datepicker() to $(selector).attachDatepicker().
• Changed $.datepicker.enableFor(control) to $(selector).enableDatepicker().
• Changed $.datepicker.disableFor(control) to $(selector).disableDatepicker().
• Changed $.datepicker.isDisabled(control) to $(selector).isDisabledDatepicker().
• Changed $.datepicker.reconfigureFor(control, settings) to $(selector).changeDatepicker(settings).
• Changed $.datepicker.setDateFor(control, date) to $(selector).setDatepickerDate(date).
• Changed $.datepicker.getDateFor(control) to $(selector).getDatepickerDate().
• Changed $.datepicker.showFor(control) to $(selector).showDatepicker().
• Added $(selector).removeDatepicker.

We have added more features as well, Keith is a genius. Check out the full list of changes here: View the full Change Log for v3.3

This is geek abundance.

Not only did I receive 30+ energy drinks, I just received Adobe CS3 Master Collection and Adobe CS3 Web Premium from inside Adobe for minimal cost. For anyone who doesn't know, that is 4,000+ dollars worth of software - Master Collection is Adobe's entire line of software. I never pirate software and don't agree with it. I believe you will be blessed for doing things legit and paying the people who work hard to make it.

I got interviewed by Google and was turned down. I never expected to interview with Google because it was not something I sought out. I love where I work, but you can't say "no" to an opportunity to entertain the idea of working with Google. An internal developer over there saw my work and said I should work there, so I sent over a resume and got interviewed. Even though I didn't get the job, it was a good experience and really tested my convictions of where I am at in my career.

In the interview I botched the technical interview badly. That is what happens when you have no formal education in your area of expertise. I don't know inheritance in JavaScript because I have never seen it in any script I've ever looked at. I learn by doing. I don't know SOAP, REST or any other acronyms that I don't use at work. Another question I was asked was the difference between DTD and Schema. I didn't have an answer for that either. Oh well.

The part that went well was the interview with a developer. They said I would be going to conferences and helping other developers learn their APIs. I do that now with jQuery and CakePHP. I answer questions, emails, etc about their APIs - I spoke at jQueryCamp and soon I'll be speaking at CakePHP Fest. He asked me how I would go about solving certain problems and I think that went well too. I realized that I would like to do more teaching and explaining - I need to get more tutorials on my website and do some teaching sessions at work.

What had me worried for a bit is how much would be taken away from my work with open source and building client applications. I like building applications for the marketplace at work. I think I would miss that. Lately I've had some big successes with projects and I want to make sure it continues. All-in-all it was a nice little trip for a while to be considered by Google, but I'm glad its over with. I get to do all the things that I enjoy right now where I work so I have nothing to complain about.

This year has been an incredible year on the career front. I literally can't believe how far I've come from last year. To put things in perspective, it reminds me of back in college when I was was failing calculus and then buckled down and learned the entire semester's worth of calculus in an 18 hour stretch of time, receiving an "A" on my final. This year has been like that. I can't remember a single year of my life that I have learned so much as this year. Thank you to everyone who has helped make this possible, thank you.

Some of the this year's career highlights:

• I met a lot of great people where I work at RMG Connect. I got to lead UI development on some pretty big projects, and was the third to receive our internal company, "Rockstar" award.
• I launched this website 8 months ago (late April), all of it being hand written 100% from scratch. Since the launch, it has received 300k page views and grown to 15k unique visitors a month.
• I learned how to successfully code open source projects - helping thousands of developers around the world is worth its weight in gold.
• I gave two presentations at jQueryCamp, held on the Harvard campus.
• One week I was featured on Ajaxian and Smashing Magazine (jQuery Calendar), sort of an epiphany that people are noticing and really do care about what I do.
• To top off the year, my code is now being used by Google.

Looking Forward

I have goals and a plan for this website in 2008. I have so many things I want to do it is crazy, but I just need to keep things into perspective and it will be another stellar year. Thank you for watching, reading, helping and supporting me. Without the help and contributions of others I wouldn't have much, so thank you again. Here is to another great year in the horizon!

Google let me know that they are using jQuery UI Datepicker on Google Code (http://code.google.com/events/calendar/add/). This is great news, Google is actually adopting something I wrote! Here is a screenshot:

Google did a nice job of changing the colors to match their site (refer to the screenshot above). I think the simple skin provides an easy way to adopt the datepicker's look and feel into web applications, but I think that we need new skins for the datepicker. If anyone wants to contribute designs please let me know.

I can't leave this post without mentioning Keith Wood, thanks for all the great work. And to everyone who has sent me emails and feedback, thanks again!

As you may know, 100 percent of this website was written from scratch. I don't use Wordpress or any packaged solution because it goes against the grain of what I want this website to represent. I want MarcGrabanski.com to be unique and empowering to developers. It is time to take a step back and re-think what I am doing and why I am doing it. Let me start by brain-dumping the things I'd like to do:

• Write a forum to help support the code I've written.
• Put code into SVN so that other developers can contribute.
• Fix my unanswered emails problem - 30+ emails sitting in my inbox about open source projects right now.
• Finish articles I'm writing including:
  • Why jQuery
  • Part4 of Media Temple Setup : Deploying web applications
  • Post-Intro of Media Temple Setup : Why Media Temple
  • Developer's Guide to Corporate Communications
  • Why CakePHP
  • Developing for Big Business
  • More...
• Write version 2 of the blog including better UI and easier navigation.
• Change the website's design to actually reflect who I am.
• Code an Open Source Ad system.
• Code a collection of JavaScript/Ajax widgets to work inherently with CakePHP.
• Revamp/add features to each of my code examples.
• Write tutorials for the following platforms:
  • PHP
  • MySQL
  • ASP.NET (VB/C#)
  • Ajax
  • Flash/ActionScript
  • Windows
  • JSP/Java
  • Search Engine Marketing
• Add my design portfolio.

Keep in mind, these are just things off the top of my head that have been rolling around for a long time. This doesn't include my full time job or the web application/ajax framework that I am building on the side.

This all seems pretty crazy to do all this work for free, but I feel strongly that this is something that I need to do and continue on with. My career is built on top of the open web and I can't give up, or say it is too much work to do. I'm sure the fruits will come from the labor, because they always do when you believe and live for someone higher than yourself.

jQuery UI Datepicker v3.0

I am happy to announce UI Datepicker version 3! (previously named jQuery Calendar)
UI Datepicker Project Page

• Included in the official jQuery User Interface library.
• Date range selection
• Display multiple months at a time
• More customization options
• License changed to reflect jQuery
• Compatibility option to use existing code

UI Datepicker was presented at jQuery Camp in Boston at Harvard. Here are the slides from the presentation:
jQuery Datepicker / Calendar Success

Mods based on jQuery Calendar:

West Wind created an ASP.NET control out of jQuery Calendar

PHP Framework Symfony Plugin (ddJQueryCalendar)

Drupal jQuery Calendar Plugin

Featured on Smashing Magazine Date Pickers

Thank you all for your great feedback which has made this Datepicker so successful!

Recently, I started the employee review process at work. Sure, there is the normal "rate you out of 5 stars" form, but I was intrigued that they have a process for employee development. "Do you have specific career goals in mind that we can write down to monitor your career development?" We are to write down our career goals and make action items to achieve them. The following year we are graded by how well we meet those career objective. Interesting...but how can I answer that question?

I will answer it with a list of things that are broken down into categories.

Short-Term Career Goals (Now to 6 months)

1. Educating myself on Rapid Application Development with CakePHP.
2. Support open source projects, specifically CakePHP and the jQuery JavaScript Framework.
3. Develop a complete web application including:
   • table relationships
   • user authentication
   • custom analytics
   • user groups
   • custom components
   • secure validation
   • custom user interface elements
4. Speak at the jQuery Conference in Boston.

Persistent Career Goals (Daily)

1. Write more readable and compact code.
2. Become a better leader.
3. Become a better follower.
4. Educate those around me.
5. Keep in contact with other open source developers.
6. Continue to educate myself on a daily basis even on days I don't feel like it.
7. Press on when things are hard because I will probably learn an invaluble lesson from it.

Mid-Term Career Goals (6 months to 5 years)

1. Speak at conferences worldwide about my area of expertise.
2. Manage a team of developers.
3. Contribute to a technical book.
4. Hold a web conference in Minnesota.
5. Implement more efficient development processes across entire corporations.

Long-Term Career Goals (5-10 years)

1. Have sufficient residual income coming in to pursue personal projects.
2. Have family and kids a higher priority (time-wise) than work.

I finished the prototype of "Beyond Flash". Beyond flash proves that you can combine the accessibility of HTML with the beauty of Flash. It basically uses JavaScript to talk between the HTML and the Flash object.

Under the hood of Beyond Flash

• Unobtrusive Flash Objects embeds the flash into the page.
• CSS sets all of the pieces into its proper place.
• jQuery (JavaScript library) is used to manipulate the HTML to allow the flash page to roll over top of the HTML and then sink back under when the flash animation is done playing.
• HTML content slide-in animation also done with jQuery.
• JavaScript may also be turned off to allow you to see the page normally without the pretty effects
• Flash piece has call backs using Flash's "ExternalInterface" function to indicate what it is dong (Start, Stop or Closing the page).

After about four months of thinking about this I finally did it to prove to myself that this can be done. I wanted all of the functionality of HTML and the great animation interface that flash provides. I am trying to make this simple and cross-browser so anyone can use it.

Note on June 23rd, 2008: This project has been renamed to jQuery UI Datepicker.

Version 2 of jQuery Calendar has been released. The main new features include:

• Year and Month drop-downs for easier selection of dates.
• Full settings documentation that shows you how to customize almost any aspect of the calendar.
• Multi-lingual, easy to add support for any language.
• Attach the calendar using the jQuery selector.
• Keyboard navigation.

As you can see, a lot of work has been put into this calendar. It all started by programming a lean, simple calendar without a library (see the Clean Calendar) and since then was programmed on top of jQuery. I have heard people say that this calendar is the best one on the internet. The feedback you all have given me has been very encouraging!

Thanks to Keith Wood (kbwood@iprimus.com.au) for extending the calendar to add so many of its features.

Note on June 23rd, 2008: I don't have Ajax comments on my blog anymore due to my new blog redesign/reprogram. I'll considering adding them again in the future.

Today I finished my comments system. It works when javascript is disabled and enabled. The goal is to be able to plug this comments module into any PHP page with just a few lines of code. The ajax is written on top of jquery.

If everything goes well I will probably release this as a public plugin.

Note on June 23, 2008: The project was renamed to jQuery UI Datepicker.

I rewrote my Clean Calendar script on jQuery. jQuery is nice, it cleaned up the script quite a bit. I was able to reduce the script by over 60+ lines. The script loads just as fast. jQuery takes care of the redundant things can be difficult to script cross-browser.