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

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