nerkalog

nerkles October 30th, 2004

Here’s a little tree i drew.

This one goes out to dad — happy birthday!

click it to see full-size

• General , arts
• Comments(5)

nerkles October 28th, 2004

For some reason, I can’t stop making sound effects for everything today. I just dropped something in the trash and before I knew it, I’d said, “DOIINNGGGG” out loud. And yes, I’m at work! And on the way in, I answered the elevator’s DING with my own “biiing”. WTF?

• bits
• Comments Off

nerkles October 24th, 2004

it’s super great. 4 stars out of 5. brilliant. sorry this is a very facile review. but it’s late, i should really be in bed. but uhhh, go see it. now.

• movies , reviews
• Comments Off

nerkles October 24th, 2004

I’ve concluded I don’t like the name ‘nerkalog,’ which was chosen a bit hastily. So, dear friends & family, and anybody else who sees this…

Let’s play Name That Blog!

Please “vote” for one of these names, or add in your other ideas by adding a comment below. Or email me if you have the address.

Here’s a few gems we came up with so far, but don’t let your imagination be limited to these ideas.

• talkin’ sh** about a pretty website (a reference to a song by Modest Mouse)
• the cheesecake truck
• “other possibilities”
• “sueños en realidad”
• The System Is Down
• WebThumper
• fighting in a sack (or maybe “fyt sak”)
• double jesus! [an inside joke–you had to be there]

To help fuel you, I’m planning this site mainly to be a place for sharing my tricks of website-making and general nerdery, and secondarily for movie & music reviews and recommendations, ‘deep thoughts,’ and the occasional random idea, silly story, or rant.

• General
• Comments(4)

nerkles October 21st, 2004

A funny, sarcastic thing about the vagaries of web design. If Architects had to work like web designers.

• bits , web stuff
• Comments Off

nerkles October 19th, 2004

Here is a technique to add eye-grabbing knockout quotes (a.k.a. pull quotes) to your pages which:

• doesn’t require the semantic blemish of repeating the quotes in order to include them as knockouts
• lets you decorate the knockouts any way you want with CSS
• allows for an attribution line that does not appear in the document’s body
• allows you to use non-contiguous segments of text as knockouts
• works on modern browsers, causes no harm on old ones*

Please view The Example.

To use it, you just add the JavaScript noted below to your document (in the head section or in a separate file), add a few lines of CSS (see example below; you can and should customize it to your liking, of course), and then mark up your text like this:

<p>Bunch of text that says something so important you 
just can’t stand it. You are truly blown away by the 
greatness of this paragraph. It’s like nothing you’ve 
ever seen before 
<strong><span class="koq" id="koq1"></strong>and 
the implications are earth‐shattering<strong></span></strong>! 
And furthermore, this sentence really does it for you, 
whatever <em>it</em> is. </p>

Notice the span tag. If you want to add attribution to your quote, just add an id attribute. The script will then look for a meta tag with a name that matches the span’s id. If it finds one, the content from the meta tag becomes your attribution.

Here is the corresponding meta tag that gives an attribution line for the quote above:

But What If You Don’t Want to Quote a Contiguous Chunk of the Text?

This is easy too, as long as you don’t need your quote to span across paragraphs or divs (pun intended). In that case, you’re on your own. (Although if somebody has a reason to tackle this one, please share your solution.)

Here’s how to do it:

<p>Bunch of text that says something so 
important you just can’t
stand it. You are truly blown away by the greatness of this paragraph. 
<span class="koq" id="koq2">It’s like
nothing you’ve ever seen before 
<strong><span class="skip"></strong>and
the implications are <strong></span></strong>earth‐shattering</span>!
And furthermore, this sentence really does it for 
you, whatever <em>it</em> is.</p>

Simply insert a span of class skip and you are on your way. The JavaScript will insert an ellipsis for you.

Here is a simple example of the CSS you need:

/* the box */

div.koq {
        font-size: 1em;
        float:right;
        margin: 0 0 0.75em 0.75em;
        padding: 1em;
        background-color: #CCCC99;
        width:27%;
        border:1px solid #999;
        color: #3A2000;
        text-decoration: none;
        clear:right;
}

/* the text of the quote */

div.koq p {
        margin:0; padding:0;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1.3em;
        font-style: italic;
        font-weight: bold;
}


/* be sure skipped phrases are invisible */

div.koq span.skip { display:none; }

/* the attribution line */

span.koqsrc {
        color:#333333;
        font-style:normal;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        float:right;
        margin: 0.4em 0 0.25em 0;
        padding:0;
        font-size: 0.7em !important;
}

Remember to download X Library. View source on the example to get the JavaScript code. [Note: you may need to make a small adjustment to the code, depending on where your xlib is located.]

Looking Ahead

• I’d like to figure out a way to place the knockouts more in the middle of the paragraph instead of flush with the top. (Feel free to post your suggestions in the comments section.)
• It’s possible that this could be made to work with more of the older browsers, but it currently works on what most people use.
• I bet this code could be tweaked without much effort to do something similar for images, moving them into a floated box with captions derived from the alt text and/or meta tags.
• Maybe this can be hacked into a WordPress plug-in (feel free to use the code to do this if you want—for any open source system).

That’s it. Enjoy.

* Tested on Safari, Firefox, IE4,5,6, Netscape 4.7/Mac, and IE for Mac OS X. [back to text]

This article is copyright ©2004 by Isaac Csandl. All Rights Reserved. Code portions (the CSS and JavaScript parts written by me) are free to use as you wish as long as you do not claim authorship. Feel free to inquire about reposting/printing this article.

• articles , web stuff
• Comments(18)