Aug 1

I hate having to go to a page every time I need dummy text like lorem ipsum. So I searched out for a random dummy text generator for my beloved TextMate. Unfortunately, the ones I did find, required another language installed, like Ruby, so I looked into creating one for bash. (since bash is installed by default and it’s the default language for making TM commands.

I created array’s of dummy paragraphs, then I echoe’d one of those paragraphs randomly.
Here is the code.


ARRAY[0]=”Auf ya strudel octoberfest hinder …”
ARRAY[1]=”Auf nine die stoppern nine nicht …”
ARRAY[2]=”Sauerkraut leiderhosen du er strudel …”
ARRAY[3]=”Poppin stoppern pukein, frau mitten …”
ARRAY[4]=”Verboten handercloppen zur hast spitzen …”
ARRAY[5]=”Glockenspiel flippin oof sparkin achtung …”
ARRAY[6]=”Rubberneckin blitz pretzel weiner heiden …”
ARRAY[7]=”Ya frau sightseerin noodle thinken stoppern …”
ARRAY[8]=”Deutsch, unter der meister spritz pretzel …”
ARRAY[9]=”Bin octoberfest sauerkraut meister hinder …”
echo ${ARRAY[((RANDOM%10))]}

and here is how to add it to your Textmate or BBEdit.

Textmate's command editor window with all it's settings

Textmate's command editor window with all it's settings

So I hope that helps, for those of you whom want an easy way to add dummy text to their coding.
type “lipsum” and press TAB..

Oh you say, you want to know where I got the dummy text?

That’s pseudo-german, using the Greeking Machine at Duck Island.

Or get regular Lorem Ipsum at www.lipsum.com.

Jul 26

I know, I know..  this is a really simple process for those of you who have had more than an hour with jQuery.  But this article’s intention is to show just how quickly and how easily you can utilize jQuery’s robust features that make it so easy and fun to use.

So I am going to keep the explanation short and sweet. I think the code speaks for itself for the most part.

$(document).ready(function(){... does as you would think. Waits for the document to fully load.

$('.hide').hide; finds all elements with the “hide” classname and actually hides them. I am using this as opposed to hiding the elements via css so that those with javascript turned off will see the elements that are hidden. If I used css to hide the elements, then anyone with javascript turned off but have a css capable browser, would have a dysfunctional experience. Hiding elements via javascript ensures that those without javascript will still be able to see the hidden paragraph. nuf said, I think

From there, we are finding #link1 and adding a toggle when clicking. I love this because I dont have to find out the toggle status myself. I just add the two different toggle scenarios, separated by a comma, and I am good to go.

$(this).next() is how I get to the element I want to change. In this case, it is the node / element below the link that has been clicked. I kept the traversal code generic so I could use this anywhere. The only worry I have, is to make sure that the element to show / hide is precisely below the link which it relates to. This simple technique makes the code re-usable.

Next, I am using another of jQuery’s strengths by “chaining” my code to run on click. I do this by using dot for each new behavior I am passing.

.slideDown('slow').removeClass('hide').preventDefault; does three things:

  • gives the element a slide down effect when showing
  • removes the hide class from the element
  • prevents the default behavior of the link

and that’s it!

JQuery uses very simple and familiar syntax for CSS developers and it uses techniques that make it much easier to focus on what you want the page to do as opposed to figuring out how to make it work.

Example:

Show

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

May 7

A quick note:
This is a fix to that dastardly bug where IE6 cuts off a background image that you bleed out of the container using a negative margin. It has to do with IE and hasLayout.. but it requires one more fix to avoid the peekabo bug.

.element {zoom:1;position:relative}

give that to the element that is negatively margined and suddenly it will show up in ie.

Yay.. and uh.. thanks to hasLayout

Jan 24

Sometimes this one creeps up on me as I forget to add my hasLayout hack. So lets say you made a tab or even better.. a link that has an arrow in front of it.. so I use padding on the anchor..


#testlink a
{
display:block;
padding-left:25px;
background: transparent url(right_arrow.gif) no-repeat top left;
zoom:1;
}

The zoom:1; gives IE “hasLayout” which makes the padding / container of the anchor clickable. Otherwise, IE only allows the text to be clickable. Which is different than the rest of the browser world.

« Previous Entries