Hidden Springs Maple is a family-owned and operated Vermont company that has been making syrup for over 50 years. They produce 100% pure, Vermont maple syrup of the highest quality. We designed the site with the focal point on their wonderful product. Take a look!

Very beautiful display, enjoyed it a lot. And even though the evening was a bit foggy, it didn’t ruin the show — if anything, it made it dreamy. We had to park on 6th and Virginia and walk to the Marina, but it was well worth it. There were a LOT of people walking on University to see the fireworks, walking together with all was a very neat experience.

Hiiibrand 2010 is an international logo design competition organized by New Graphic, one of the biggest and influential Chinese design publications. Competition is open to design professionals from all over the world and anyone is welcome to submit their best designs. Our work was nominated in April 2010 and we’ve been in the lead since due to all the amazing support we’ve received from our clients, family, and friends. Thank you all so much for submitting your votes; our success wouldn’t be possible without all your help. Please keep voting for us; just click on the little “thumb” icon in the right bottom corner under the logo. You can vote once every 24 hours and there is no need to register. See you on the finish line in October!

Here is our first contestant in the “idiotics” category — our all time favorite Looza. Since 1952, this Belgian fruit juice manufacturer called l’Etablissement du Comté de Looz has been producing great fruit juices and drinks known for their excellent flavor and high quality. In 1966 they introduced a tropical fruit juice line (from imported concentrates) and begun distributing outside the Belgian borders under the shorter name — Looza. Too bad, that to an english ear Looza sounds an awful close to “looser”. But don’t be so harsh on these folks: the products they make are really good despite their funny name.

P.S. If you think you found any similarities to you, your business, product or project, or anything else that seems relative, please don’t take it personally. We don’t mean any offense whatsoever. We all could use a good laugh every now and then. Bottom line is that we love our clients, no matter what!

Took this picture last Sunday. Mendocino National Forest, Northern California.

In the creative world of design, you see a lot of interesting things. And one day we realized we’ve seen too many funny, ridiculous, and sometimes plain crazy comments, stories, designs, you name it! We knew the time had come for us to share this brilliant collection of absurdities with the rest of you.

If you find any similarities please don’t take it personally. We don’t mean any offense whatsoever. We all could use a good laugh every now and then. Bottom line is that we love our clients, no matter what! And there is just too many hilarious things out there to keep it all to ourselves. Plus, this is a great outlet for us to blow off some steam — you certainly don’t want to hire designers who are grumpy!

So, here we are. Please welcome a new section in our blog we lovingly called: “Idiotics”.

Logo design for Hidden Springs Maple LLC, a company that produces 100% natural pure Vermont maple syrup. The challenge: come up with a logo that has all three words from the company’s name integrated in. The solution: folded leaf for “hidden”, stream (water or syrup) for “springs”, and sugar maple tree leaf for “maple”.

Flyer for Baskerville, a project management and consulting company from San Francisco, CA.

I just attended my first RoR meetup yesterday where Sarah Allen gave an awesome presentation on teaching programming languages via Test Driven Development. It’s a fundamental shift in how to approach learning a new language, and one I am adopting to learn Ruby. But even more importantly, it’s changed the way I will do development from now on.

Prior to deployment, the typical development process ends with testing. TDD does the opposite; it essentially puts testing up front making it more like a highly focused part of planning. You setup all of your tests first (ostensibly you’re doing this in a modular approach), ensure they all fail, then implement only the code needed to make each test pass, and no more. Doing it this way makes sure you have valid working tests but it’ll also keep your code lean. While more work upfront, TDD improves reliability and makes maintenance/updates far easier.

No, it’s not a new curse word… it’s a blackberry ssh client… and it’s way cool. I’ve been tooling around in our server all morning. Here’s a pic of me using my favorite editor, VIM, to modify one of the files on the server:

If you’ve got a bb, you gotta get this app. It’s from software developer Marc Paradise, and you can get it here. Kudos Marc! Great app!

We saw this while taking Oscar for his walk

Here is one of the marks we did for LG Realty, a Californian real estate company owned by Lena Griffin. We did some brainstorming and found out that the owner’s first name meant “sunlight” in Latin. When people are looking for a house, they want a light and bright space they can relax in and really call home so we decided to use the concept of light as a representative of Lena’s company. As an additional bonus — the word “light” has L and G in it. Kinda cool!

Javascript is an odd language, especially if you are used to programming in languages like PHP. For example, take a look at how you would create a parent class in PHP followed by a child class that inherits from it:

<?PHP
    // A simple class in PHP
    class Footware
    {
        public $color;
        public $size;
 
        function __construct($color, $size)
        {
            $this->color = $color;
            $this->size = $size;
        }
 
        function showColor()
        {
            echo $this->color . "<br/>\n";
        }
    }
 
    // Another class that inherits from Footware
    class Boots extends Footware
    {
        public $style;
        public $laces;
 
        function __construct($color, $size, $style, $laces)
        {
            $this->color = $color;
            $this->size = $size;
            $this->style = $style;
            $this->laces = $laces;
        }
 
        function showUse()
        {
            switch ($this->style) {
                case 'Steel Toed': $alert = 'Used for work';
                    break;
                case 'Cowboy': $alert = 'Used for line dancing';
                    break;
                case 'Fashion': $alert = 'Used for looking good';
                    break;
                default: $alert = 'Not sure what you would use these boots for';
            }
            echo $alert . "<br/>\n";
        }
    }
 
 
    $myShoes = new Footware('Tan',11.5);
    $myBoots = new Boots('Red', 11, 'Cowboy', 0);
 
    $myShoes->showColor();
    $myBoots->showColor();
    $myBoots->showUse();
?>

Classes are clearly defined, both visually and functionally. Inheritance is also easy to see and implement. Now take a look at the Javascript implementation of the PHP code above:

<script style="text/javascript">
 
    // Parent class definition
    function Footwear(sColor, fSize) {
        this.color = sColor;
        this.size = fSize;
    }
 
    // Use prototype to add methods
    Footwear.prototype.showColor = function () {
        alert('Color is: ' + this.color);
    }
 
    // End of the parent class
 
 
    // Child class definition
    function Boots(sColor, fSize, sType, iLaces) {
        // inherit properties from the parent class
        Footwear.call(this, sColor, fSize);
 
        this.style = sType;
        this.laces = iLaces;
    }
 
    // ...and use prototype chaining to inherit methods
    Boots.prototype = new Footwear();
 
    // Add more methods afterwards
    Boots.prototype.showUse = function () {
        switch (this.style) {
            case 'Steel Toed': alert('Used for work');
                break;
            case 'Cowboy': alert('Used for line dancing');
                break;
            case 'Fashion': alert('Used for looking good');
                break;
            default: alert('Not sure what you would use these boots for');
        }
    }
 
    // End of the child class
 
 
    var oMyShoes = new Footwear('Tan', 11.5);
    var oMyBoots = new Boots('Red', 11, 'Cowboy', 0);
 
    oMyShoes.showColor();
    oMyBoots.showColor();
    oMyBoots.showUse(); 
 
</script>

This is just one way to do it in Javascript but in general this is the best approach. Essentially what your doing is creating the class in two steps, a constructor portion (the function ClassName (param) portion) which contains all your properties, followed by a prototype section which houses all your methods.

While visually, this hybrid approach, makes a class look like it’s not encapsulated, rest assured it is. This method also gives you single parent inheritance, good memory usage, and fewer unexpected behaviors vs using just a constructor paradigm (good if you need multiple inheritance), or a prototype method by itself.

If you’re wondering what a closure is, or how to use one, you should first understand scope. As an example, whenever you call a function, you expect it’s variables to die once the function ends. All it’s variables are limited in scope to the function, which is how you normally want it. To illustrate, let’s start with a typical javascript version of a class:

<script type="text/javascript">
 
function anObject() {
    this.publicVar = 'Accessible!';                // A public variable
    var privateVar = 'Not directly accessible...'; // A private variable
 
    var privateMethod = function() {
        // A private method
        alert('Can\'t call me directly either!');
    }
 
    this.publicMethod = function(param) { 
        // A public method
        this.publicVar += param;
    }
 
    this.accessPrivate = function() {
        // A privileged method
        alert(privateVar);
        privateMethod();
    }
}
 
newInstance = new anObject();
 
alert (newInstance.publicVar);
newInstance.publicMethod(' Modified by publicMethod.');  // Let's change the public var
alert (newInstance.publicVar); // Test to see if publicVar changed...
 
 
alert(newInstance.privateVar); // Undefined, You can't show private variables!
 
// Let's see if we can get at the privateMethod
try {
    newInstance.privateMethod();
}
catch(err) {
  alert("You can't get at the privateMethod directly. Let's try another way");
}
 
// Now try with a privileged method
newInstance.accessPrivate(); 
 
</script>

Now here’s a closure. At first brush, it seems to operate like a class but it’s quite different. Here you have a single object “aCat” that’s equal to a function. The (); following the function, tells javascript, to execute the function the second it’s parsed. So in a nutshell, “aCat” will equal whatever the function returns, and in this case it’s a collection of functions. Here, what’s returned is what creates the closure. Those functions are granting you access to the variables that have been closed over when the parent function ended and returned.

<script type="text/javascript">
 
var aCat = function() {
   // A bunch of private variables and functions
   var miceCaught = 1;
   var currentActivity = 'sleeping';
   var changeActivity = function(action) {
      alert('I was ' + currentActivity +", now I'm" + action);
   }
 
   return {
      /**
       * Here we are creating the closure.
       * Returning methods to access the
       * closed private variables.
       **/
      showMiceCaught : function () {
         alert(miceCaught);
      },
 
      catchMouse : function() {
         miceCaught++;
      },
 
      changeActivity : function(action) {
         changeActivity(action);
      }
 
   }
}(); // Here we tell javascript to run the function immediately
 
// We can now access the closed over variables and functions
aCat.showMiceCaught();
aCat.catchMouse();
aCat.showMiceCaught();
aCat.changeActivity('playing');
</script>

Rather than just being pedantic, closures do have at least one very useful function. Keeping the global namespace lean.

You create lots of functions, and global variables when you create your library, but each time you declare a function or variable, you increase the risk that you’ll have a collision with another library your using. A closure on the other hand gives you encapsulation. Creating all your global elements your library needs in a closure will help isolate your library from others.

As a simple example, lets say you want to show a message after the page loads. Normally you might do this:

<script type="text/javascript"> 
var msg = "Welcome!";
window.onload = function(){
    alert( msg );
};
</script>

What happens though if msg is already in use by another library? You’ve just clobbered it. So how do you get around this, and still use window.onload? Use a closure like this:

<script type="text/javascript">
(function(){
    var msg = "Welcome!";
    window.onload = function(){
        alert( msg );
    };
})();
</script>

Now javascript will execute the anonymous function immediately and tie the variable msg to the inner function. Later, after the page is loaded (including all the additional javascript code that might be there), the onload event is triggered, and your alert(msg) is run, BUT msg is kept out of the global scope. It’s truly private.

As a more sophisticated example, take a look at the source code for jQuery. Here the author has taken pains to not pollute the global namespace by using closures.