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