JavaScript Stuff: CSS Dynamic Height and Width Using jQuery

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 $(".height-offset").each(function(){ heightOffset += $(this).outerHeight(); }); // Calculate the width offset $(".width-offset").each(function(){ widthOffset += $(this).outerWidth(); }); $(".dynamic-height").each(function(){ // Take into account this objects margin, border and padding...

Backpack API Throttling

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...

Create Reveille reminders in Backpack via SMS

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: 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 Product Update: Timezone issue has been fixed

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...

Reveille: From Start to Finish in 85 Days

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. We’re bootstrapping the project so we are very picky about what we actually spend money on. We actually developed Reveille on a PC turned server in DL’s basement. We purchased a slice from Slicehost to run our production site on.  We used Basecamp to help us manage the project so we could easily see what was left to do and make judgment calls as to the importance of those tasks.  We took advice from Guy Kawasaki and Dharmesh Shah and we...

Ruby Stuff: Use retry to restart a begin rescue block

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, http://www.tutorialspoint.com/ruby/ruby_exceptions.htm. begin @calendarapi.calendars rescue Exception => ex logger.info ex switch_ssl() retry end Obviously this bit of code could end in a continuous loop so be careful to add a little logic to ensure a clean...

Introducing Reveille

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 37signals’ Backpack 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 we’ve ended up developing is a system for being able to automatically create reminders for Backpack calendar events by using special hashtags in the event names.  For example, you might want to create an event for an important meeting and be reminded of it two hours prior. Today, you have two choices in Backpack for doing this.  You could use the built-in event reminders set for 30 minutes before the event, which may not remind you when you want. Or, you could manually add a reminder for the event, which is way too much work in our opinion.  The new...

What Is The Character Of Your Company?

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. Company character IS NOT defined by a mission statement, what’s on the About Us page or by what the founder/owner says it is. Company character IS defined by the content that you put out, i.e. blog posts, Twitter and Facebook updates and public forum answers. It is also, and most importantly, defined by how you treat your customers. In order to gain a better idea of how you treat your customers answer these questions. Be honest with yourself. How do you treat potential customers? How do you treat your newest customer? How do you treat your oldest customer? How do you treat unhappy customers? How do you treat satisfied customers? How do you treat customers who are canceling their service? Now… notice that I used the word “treat.” I didn’t ask “What do you do for” or “What do you think of”, I asked “How do you treat”. The word “treat” infers to me the attitude take towards, the level of respect given to or the amount of schmoozing...

Anatomy of a Syntax Highlighting Engine – Part 1

This is the first of a series of posts where I’m going to discuss some of the, um… fun that we’ve had while writing Wikid Editor, the text editor that we built for our flagship product Haven (which is still being developed). In this post I’m going to focus solely on the choice in technology. Here are a few high level requirements for Wikid Editor. It had to run inside the browser and it needed to work in all browsers or at least the main ones, Firefox, IE, Safari and Chrome. It needed to be able to color text any way we wanted. It should be able to color the background of rows. It needed to be able to communicate with our servers without reloading the page and preferably be able to receive pushed data from our servers. It needed to perform well. We pretty much had it narrowed down to JavaScript, Flex or Silverlight. There may well have been other choices but we either didn’t find them or they didn’t seem practical or feasible to us. Any one of the three would technically work so for us it came down to these areas of concert. Cross browser compatibility (Winners: Flex, Silverlight) JavaScript – While there are several frameworks that have done a great job of dealing with this issue it’s still something that has to be dealt with or be concerned about, especially when new or updated browsers are released. Flex – The crew at Adobe are not flawless but they are tasked with keeping up with browser compatibility not us and not an open source community. Silverlight...

Technofunk Mind Maps

Greg and I had talked a little about building a Flex app that would help you to visualize your mind map and get it out of your head faster than drawing it on say a white board. So naturally I went looking for one that already existed. I found several but one stood out as the most horrible 1 minute of my life. Beware that as soon as the video starts you’re gonna get irritated. I hate telling folks that there software must suck but I’d guess, based on the blatant overuse of techno music, fast movements and quick dramatic sales speech, that the http://www.imindmap.com/ software needs a lot of selling to get anyone to try it. If you need all that hype you probably spent too much money on the development of the software and it probably sucks from over-engineering. Remember simple, fast, easy, no frills software is the stuff that gets people excited. Needless to say I’m not even going to try iMindMap, it reminds me too much of an Office application. It does so much that you can’t do anything useful with...