Scripting News for 10/18/07

A new view of NY Times news 

After spending a day with the old keyword page, and getting bored with it, I came up with a new way to look at news, something I’ve not tried before, that might be fun and/or useful

http://nytimesriver.com/keywords.html

Since it’s likely to change again soon, here’s a screen shot.

How it works. Every hour, as usual, it does the nytimesriver scan. Every story is linked to in the database undern all the keywords it references. Then the report, in HTML, is prepared, with the keywords in the left column, and links to all the stories in the right colum. The list is sorted by number of references, the keywords with the most references appear at the top of the list.

So today, baseball is the top item, with 15 references. The teams, the Cleveland Indians and Colorado Rockies, rank high. For some reason (heh) the Boston Red Sox don’t appear, even though they’re still in it, and the Yankees, even though they’ve been eliminated (yay!) are near the top at position 10.

It’s another leaderboard! (Oh shit.)

The stories age, and are removed after 24 hours. After all this is news, not olds. :-)

If you have comments, post them under the screen shot, linked above.

PS: Note that since the list just started up today, the initial stories, even though some are already 24 hours old, will remain in the queue until tomorrow morning at this time. So the list will be artificially fat today, it’ll thin down tomorrow.

North Berkeley BART station 

Robert Scoble 

Ted Leonsis 

Help, I need really solid expand-collapse code 

I really need a rock-solid expand-collapse display that I can integrate with Scripting News.

If you’re reading this in RSS, flip over to the home page and have a look. See how the pluses and minuses work? There are a bunch of problems:

1. Doesn’t work in Opera. Deal-stopper. Opera users are cool folk.

2. I don’t like the indentation. I want the text flush-left.

3. Takes too long to display. I want it to be instantaneous.

4. Must be multi-level. I haven’t tested the code I’m using with more than two levels.

I know it can be much better, because I see it done better in lots of places.

Looking for help from people who know their Javascript. Me, I’m into other things (obviously).

Mock up a Scripting News home page with your code, and post a pointer, and we’ll test it out. When it’s done, everyone will be able to use it.

BTW, I know there are people from the Radio community that have stuff in this area, I just don’t know how well supported the stuff is these days. It’s been a while.

Colin Faulkingham has a mockup that works in Opera, etc.

More NY Times digging 

Before heading over to the Web 2.0 conference at the Palace Hotel in SF this morning, I couldn’t resist doing some more digging into alternate user interfaces for news reading based on the NY Times keywords.

One thing I learned the hard way is that when you access the Times site from a script (not through a browser) if you try to read an article that’s too old (not sure what the time limit is) it tries to redirect you to a login page (which is pretty pointless considering that there’s no human being around to log in). I hit this problem yesterday, and then hit it again this morning, but couldn’t remember what the problem was. So by writing it up this time I hope to remember. :-)

No doubt some debunked hack journalist posing as a tech industry mogul will slander me for this, but the asshat asshole has no idea how blogging works, and who the fuck cares what he thinks anyway.

12 responses to this post.

  1. Posted by Colin on October 18, 2007 at 5:52 am

    Dave,

    Here is a very simple way.

    add attribute class=”” to each of your <li elements also add a id=”unique_id_name” to each of your story <li elements.

    Example [CONTENT]

    Then create 2 CSS classes
    .hide{
    visibility: hidden;
    position:absolute;
    }
    .show{

    }

    function expandCollapse(id){
    if(document.getElementById(id).className == ‘hide’){
    document.getElementById(id).className=’show';
    }
    else{
    document.getElementById(theDiv).className=’hide';
    }
    }

    It’s very simple code but it should work with any browser.

    Hope this helps

    Reply

  2. Dave, sorry no time to draw it up, but:

    1. http://dynamicdrive.com/dynamicindex1/slashdot.htm

    2. Colins will work well. Maybe add jQuery or Script.aculo.us library to it for some good fx

    Reply

  3. I took a crack at it with jQuery (which is *GREAT*). You can find the results here:

    http://dev.echoditto.com/~tom/scriptingnews/

    The relevant code:

    $(function(){
    $(‘ul.mktree li.liOpen b’).prepend(”);
    $(‘img.toggle’).click(function(){
    $(this).parent().parent().toggleClass(‘liClosed’);
    $(this).attr(‘src’,(($(this).attr(‘src’)==’minus.gif’) ? ‘plus.gif’ : ‘minus.gif’));
    });
    });

    ul.mktree, ul.mktree ul
    {
    margin-left: 0;
    padding-left: 0;
    }

    ul.mktree .toggle
    {
    position: relative;
    left: -5px;
    top: 5px;
    }

    ul.mktree b
    {
    position: relative;
    display: inline;
    left: -25px;
    }

    ul.mktree li.liOpen, ul.mktree li.liClosed, ul.mktree li.liBullet
    {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    }

    ul.mktree li.liClosed ul
    {
    display: none;
    }

    Some CSS tweaking would no doubt help, but this should provide a start. And by using the library it’ll be easy to drop in effects later on (as well as gaining all of its cross-browser robustness).

    One suggestion: you might want to alter your markup a little. I’m not entirely sure what will happen right now with nested list items (they *ought* to be fine) or bold used in entry bodies. This could be more easily worked around if post titles used a distinctive tag or class instead of just being bolded. I imagine that this is just a leftover artifact from when SN used excerpts as entry titles, so maybe it won’t be a big deal for you to fix. Some of it also appears to be from the mktree library, which of course you’re trying to get rid of. The CSS mishmash above could be reduced to a very few lines if the markup was refactored.

    Reply

  4. Hi Dave, I’ve taken the index opml from your blog and published it through ThinkFold, as a ‘public outline’ – http://www.thinkfold.com/public/?q=index . I’d love to see more blogs published in the outline format you’re using – so much easier/efficient to read in a browser.

    Reply

  5. Dave,

    I didn’t really have anywhere to upload test file. (Blog services suck for that reason.) However, I did email them to you. You’re more then welcome to publish and use the code freely.

    Reply

  6. Ok I uploaded the code to my work server.

    Here is my blog post about it.

    http://noisemore.wordpress.com/2007/10/18/scripting-news-working-in-opera/

    Reply

  7. Once you get a working code sample, but want something maximally elegant, I suggest you submit it to my friend Marc-Andre’s refactormycode.com for feedback.

    Reply

  8. Posted by Klark on October 18, 2007 at 12:12 pm

    Dave, personally, i don’t like the pluses and minuses. Why make your readers work?

    Reply

  9. Colin: Nice.

    Dave: Always so fun to watch you dig. Mr. Feature-or-3-a-Day.
    Early comic-book MAD mag. had an excellent Kurtzman/Elder collaboration: The Mole! Melvin Mole ! Sound effect kept floating thru the panels: Digga-digga-digga-digga-dig. Another karass of yours. I’ll try to get a scan. It all fits.

    — stan

    Reply

  10. I don’t understand much of the advice I’m getting here.

    What I need is a page I can copy code from. Colin has that, so I’ll start my investigation there.

    I don’t know what language the code with the dollar signs is in. Perl? I don’t use Perl. We’re talking static HTML here.

    Reply

  11. Dave: jQuery (and several other popular JS libraries, for that matter) declares an important, widely-used function called $() that’s used to access elements. There’s no Perl here — it’s all Javascript, although that’s not necessarily obvious since your comment filter (understandably) killed the surrounding script tags.

    I didn’t touch your HTML at all. You’d just have to copy and paste the code into your document’s head (and make sure the paths to plus.gif, minus.gif and the jquery library are correct).

    But Colin’s is a little easier to grok, and certainly does the job. I don’t mean to imply that I don’t think clarity is a virtue. The only advantage my code has is that it’ll automatically figure out which block of text a given button is supposed to toggle — no need to manually hook up element IDs.

    Either way, I really would encourage you to check out jQuery — it’s very nice, and is being adopted by a lot of projects (Drupal, WordPress). With it, Colin’s function could be rewritten as $(‘#your-list-item-id’).toggle(), and his CSS could be omitted entirely!

    Reply

  12. Tom, thanks for explaining, now it makes much more sense. Don’t over estimate how much I know about programming in the browser environment. I’ve been kind of lazy there. That’s why I asked for help in this area, because now I need to go beyond the usual tables and blockquotes. :-)

    Reply

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

Follow

Get every new post delivered to your Inbox.

Join 60 other followers

%d bloggers like this: