Up all nite with the sponge

Every developer have been up all night doing something completely ridiculous: forgetting a semi-colon and screwing your JS compression, writing hot new code for your acts_as_idiot functionality that unbeknownst to you the RoR team has already implemented and included in the latest version. Once in the C++ days I even forgot a bracket and to deallocate memory. Regardless, there are so many tricks I wish I knew before I was up all night with the sponge.

Let’s take our kimonos off and run around naked. I will show you mine if you show me yours.Kimono


Stylin and such…

Everyone at Spongecell knows how much I like styles and pretty colors. Especially pink! Last January I had no idea what a div is. Today I can round my borders with the best of ’em. Regardless of if you are stylin’ pages via a design background or coming into web dev from a hard core comp sci battle star background like most of us at Spongecell, you have been up all night because your rounded corners are too stiff in in Firefox or your padding is too voluptuous for IE. How appropriate that I start with my least favorite aspect of web dev.

1. Displaying hidden elements

Never hide an element with the id or class selector if you plan to later re-enable it in Javascript. Use style!

Somewhere in your JS (or rjs, yay!) code mine you want to show your object:
Element.show('upAllNite');
OR non-prototype way

// non prototype way: document.getElementById('upAllNite').style.display='';

THIS DOES NOT WORK
.badlyHideSomething {
display:none;
}

<div id="upAllNite" class="badlyHideSomething"> THIS IS ALWAYS HIDDEN</div>

This definitely works:
<div id="upAllNite" style="display:none">THIS CAN BE DISPLAYED IN JS</div>

2. Image resizing

Similarly, if you need to resize images later in javascript but wish to set the default size, use the style selector instead of specifying the intial image size in the class or id selector.

Bad:
#prettyImage{
width:80px;
height:80px;
}

<img id="prettyImage" onload="resizeImage()"/>

Good:
<img id="prettyImage" style="width:80px;height:80px;" onload="resizeImage()"/>

Later in JS

function resizeImage(){
prettyImage = $('prettyImage'); // or document.getElementById('prettyImage');
prettyImage.src = ''myPrettyImageSrc";
prettyImage.width = '80px';
prettyImage.height = '';
}

Note: images height will be proportional to the width. I.E. if the initial image is 160px by 100px the new image is 80px by 50px

So you’ve read this far. Let me know how your stylin’. This is how I do it.

halloween

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: