JavaScript Stuff: CSS Dynamic Height and Width Using jQuery

by DL November 15th, 2010

While working away on Haven, our online development app, I found the need to be able to dynamically set the height and width of a few elements on the projects main editor page. It’s the part of the application that will look less like a web page and more like an application. I’m still rather new to JavaScript and extremely new to jQuery so figuring out how to do this was a little time consuming. The end result was so freaking awesome and flexible that I thought I’d share it with the world.

To use this code just add the class dynamic-height or dynamic-width to the elements you want to have fill the screen. Then add the class height-offset or width-offset to any elements that have a static height or width that should be taken into account when calculating the white space left on the screen. Then add setDynamicDimensions() as the onresize event and as a script block at the bottom of the page. Just like that you will have elements that fill your page without causing scrollbars and the users screen size or resolution won’t matter.

* Finds all elements that have a class of dynamic-height or dynamic-width and sets their
* heights and widths appropriately offset by the heights or widths of all elements that
* have a class of height-offset or width-offset.
function setDynamicDimensions()
var heightOffset = 0;
var widthOffset = 0;

// Calculate the height offset
heightOffset += $(this).outerHeight();

// Calculate the width offset
widthOffset += $(this).outerWidth();

// Take into account this objects margin, border and padding
var myOffset = 0;
myOffset += parseInt($(this).css('padding-top'));
myOffset += parseInt($(this).css('padding-bottom'));
myOffset += parseInt($(this).css('margin-top'));
myOffset += parseInt($(this).css('margin-bottom'));
myOffset += parseInt($(this).css('border-top-width'));
myOffset += parseInt($(this).css('border-bottom-width'));

$(this).css("height", $(window).height() - heightOffset - myOffset + "px");

// Take into account this objects margin, border and padding
var myOffset = 0;
myOffset += parseInt($(this).css('padding-left'));
myOffset += parseInt($(this).css('padding-right'));
myOffset += parseInt($(this).css('margin-left'));
myOffset += parseInt($(this).css('margin-right'));
myOffset += parseInt($(this).css('border-left-width'));
myOffset += parseInt($(this).css('border-right-width'));

$(this).css("width", $(window).width() - widthOffset - myOffset + "px");

Backpack API Throttling

by wikidlabs April 16th, 2010

A few weeks ago Greg received an email from Jeremy over at 37signals asking us why we were hitting the Backpack API so frequently (we were hitting it every 10 seconds looking for reminders that were in need of attention). At that time he informed us that they would be implementing some API throttling in order to limit how many requests could come in from one IP. We were a little unsure what the actual throttling would be so we did what any great new two man company would do…we did nothing.

The thought was that when 37signals finished up their API throttling implementation, our code would break and we’d fix it appropriately since then we’d know what 37signals was doing with their API. Well, it looks like that throttling was put in place because our code broke with the API returning this error.

WebServiceRequesterError: Error occured (503): You have exceeded 10 calendar requests in a 5-second period. Please wait 5 seconds before retrying.

We added some code to the begin rescue blocks that surround the API calls to sleep for 5 seconds when we get this error message. The end result is some uglier code and processing that’s a little sluggish but it works now.

If you are a Reveille customer that was impacted by this issue, then please accept our apologies. If not then check out Reveille, it’s a sweet little app that automatically creates Backpack Reminders for your Backpack Calendar events.

Create Reveille reminders in Backpack via SMS

by wikidlabs April 6th, 2010

Recently, 37signals rolled out an update to Backpack that allows calendar events to be created with an SMS message from your mobile device. This is a pretty cool new feature for Backpack users on the go, just like us. The great news is you can use Reveille via SMS too.

How does it work?

To create a Backpack event via SMS that includes Reveille reminders, simply add the reminder hash-tags to the event description as you would if you were logged into Backpack. Here’s what it looked like when I created a few:

Creating a Backpack calendar event via SMS with Reveille reminder hashtag

You can add as many reminder hash-tags to the description as you want, but be careful to not exceed your maximum SMS message length. Once the event is created, Reveille will do the rest to create the reminders for you. They will also show up in your schedule view in Reveille as you would expect.

That’s it! SMS event creation in Backpack enhanced with the power of Reveille reminders. Thanks for using Reveille!

Learn more about Reveille.

Reveille Product Update: Timezone issue has been fixed

by DL March 25th, 2010

What’s New?

We recently deployed an update which addresses some issues with reminders getting created at the incorrect time. In order to completely fix your account, you will need to set your timezone in Reveille. Go to your Settings page, and choose the time zone that matches what your Backpack timezone is. The change is saved automatically. After your timezone is set in Reveille, any new calendar events that include reminder hash-tags will have reminders created at the correct times.

Will My Existing Reminders Get Fixed?

Yes! We automatically scanned your Backpack calendar for you when you set your time zone and recreated all of the reminders that were scheduled for the wrong times.

What Happened?

A bug in the software that connects Reveille with Backpack was causing reminders to be created at the wrong time, sometimes off by many hours. Or, to put it in simpler terms, we screwed up and we are really sorry it happened. To make it up to you, we are going to reset the 30-day trial period on all accounts starting today. Thank you for your patience while we worked to fix this issue.

QUOTE: Director JJ Abrams on how much to prep projects

by Greg February 17th, 2010


“In general, what I tried to do, is prep as little specifics as possible in terms of shots, so I wanted to be able to go to the set and make things up as I went along, and sort of, you know, wing it. … Within the parameters of what we had, I tried to storyboard nothing so that the [movie] would have energy and would feel vital, and we’d get to make it up as we went along.”
- JJ Abrams, director of Star Trek, when asked how much of the movie was improvised versus planned ahead of time.

I heard this quote last week while listening to the commentary track on the latest Star Trek movie. It was a great reminder for me that the process of iterative design, and not planning out everything ahead of time, transcends software development. It also reiterated it’s effectiveness to me for creating inspired products that consumers really want. When your design decisions and inspiration are based on real world feedback rather than judgements made in a vacuum, I don’t think you can help but have a better outcome.

Photo courtesy Esquire.

Reveille: From Start to Finish in 85 Days

by wikidlabs February 15th, 2010

Screenshot of Reveille

Screen shot of Reveille

A few weeks back we introduced Reveille as a slick new way to tie your Backpack Calendar to Backpack Reminders.  Today we’re proud to say that Reveille is now available for anyone to check out.

Only 85 Days…Part time mind you

We built this fairly simplistic, but extremely useful application in 85 days while maintaining our current full time jobs, keeping our wives happy, spending time with our kids and helping with homework, serving at church, etc.  So, basically while we were living our normalish lives, we whipped this product out in our spare time.

How we 4HWW’d and Got Real with Reveille

As a “side” project, we had to make the most of our time and efforts.  We’re avid followers of 37signals and Tim Ferris so we applied many liberal doses of Getting Real and 4HWW to Reveille.  The end result of all the minimalist effort is that Reveille does basically one thing, it could do more, we’d like it to do much, much more, but for the time being it simply does this one thing:  Reveille automatically creates reminders for you based on your calendar items.

Ruby Stuff: Use retry to restart a begin rescue block

by DL February 11th, 2010

I recently needed to be able retry a begin block and was simply nesting begins within begins, then I ran across this little Ruby gym. The retry,

    rescue Exception => ex ex

Obviously this bit of code could end in a continuous loop so be careful to add a little logic to ensure a clean exit.

Introducing Reveille

by wikidlabs January 21st, 2010


We are very excited to introduce, and give you a little preview of the first application from Wikid Labs. It’s called Reveille, and it is going to add some great new features to 37signalsBackpack application that aren’t available today.

Before we tell you more about the features, we want to explain a little of the history behind the idea for Reveille.  We have been happy users of 37signal’s Basecamp and Backpack for about two years. In fact, we’ve used Basecamp to manage the development of Reveille.  The idea for Reveille came as Greg’s wife was trying to move the family calendar completely into Backpack from iCal on her Mac, but was finding the management of reminders to be a bit of a challenge.  She wanted an easier way to add the reminders she was used to having, for instance, reminders for friends birthdays, or other important appointments. The solution hit Greg one day, late October, in the place where all good ideas seem to come, the shower.

What Is The Character Of Your Company?

by DL September 8th, 2009

Bad Customer Service

That may sound like a silly question at first glance since we usually associate character with people. The idea of company character makes a ton of sense once you realize that a company is it’s own entity. Any company that employs at least one person has a character and since every company employs at least its owner then I think it could safely be said that all companies have character, be it good or bad.

Before you can answer the question “What is the character of my company?” it’s probably important to identify what defines the character of a company.


How ‘Getting Real’ Is Helping Us Build Haven

by Greg August 4th, 2009

Photo by: J Heffner
When you are a small team of developers who is building a web-based application with very limited resources, it’s very easy to get overwhelmed by the size and effort involved in bringing your idea to life. How in the world can you possibly design and build an application, make it full-featured, and attract customers in a relatively short period of time? We found ourselves asking these questions, and it took us a while but we finally found an answer.