nater kane » blog » javascript

A Bulk Unfollow Bookmarklet for Twitter Karma

in javascript, social web | Friday, March 12th, 2010 | Comments

Dossy Shiobara wrote a nice little utility called the Twitter Karma Tool. It allows you to see in a single page who you’re following, who’s following you, and mutual relationships. One of it’s features that I’ve previously taken advantage of was the “bulk unfollow” button at the bottom of the “only following” view. It would allow you to unfollow anyone who isn’t also following you back. Very useful either if you’re an abusive Twitter user, trying to game their following/followed threashold, or are just a dick.

I haven’t used this feature, well, not for anything important.

bulk unfollowing is, apparently, the wrong kind of automation

About two months ago or so the “bulk unfollow” functionality was removed and this friendly little note was posted to explain.

On January 15, 2010, Twitter instructed us to remove the “bulk unfollow” capability of Twitter Karma as it has been determined to violate their Automation Rules and Best Practices. We have done so in order to comply with their request. We apologize to you, our users, for having to make this change, but hope you will understand it is outside of our control.

Each profile listing still has it’s own link to unfollow that user, but since Dossy removed the automation, I figured I’d recreate it with a super simple bookmarklet.

Twitter Karma Bulk Unfollow

Just drag it up to your bookmark toolbar, and unfollow all the people on the page. I decided to not care if a user’s profile checkbox is checked or not, so be warned.

*NOTE* I am very much aware of the irony in having written a bookmarklet to bulk unfollow users through a tool called Twitter Karma.

(Another) Scrollable Plugin for jQuery

in javascript, semantic web | Friday, October 31st, 2008 | Comments

I was having a bit of difficulty finding a jQuery plugin that not only provided scrolling behavior to a list of elements, but also used & then generated markup that could still be accessible, semantic & validate whether or not the user ran the javascript.

The best plugin that I could find that was already out there was Tero Piirainen's jquery.scrollable.js. If you check it out you'll quickly see that the markup that's used to generate the scrolling items could be improved upon. Nothing in my version of jquery.scrollable.js removes functionality from what Tero put together, and the improvements are basic.

make those items scrollable horizotally or vertically
decide how many items are visible at once
scroll elements with mouse, arrow keys and mousewheel (requires mousewheel.js)
make navigational buttons without programming
have programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
need to know when list is scrolled with custom event listener
You can now start with semantic markup
I want this all in single js file that weights only ~~3.9~~ 4.1 Kb minified!

First we start with simple & semantic markup

There's nothing fancy going on here at all, just a wrapping element, an anchor and an unordered list. Unfortunately due to the design requirements of this particular implementation, an additional <div> had to be added. If it wasn't for the creative constraint, and the lack of support for vertical-align: middle across many browsers, this extra <div> would have not been included.

PLAIN TEXT

HTML:

<div class="scrolling-list">
    <a href="#newspage" class="more-link">More News</a>
  <ol>
        <li><div><a href="#">Someone reports second-quarter 2008 earnings &raquo;</a></div></li>
        <li><div><a href="#">Bear scares comedian, everybody laughs &raquo;</a></div></li>
        <li><div><a href="#">Someone Completes Someone else's Acquisition &raquo;</a></div></li>
        <li><div><a href="#">Someone selected by Some Company, S.A.B. de C.V. for ADR program &raquo;</a></div></li>
        <li><div><a href="#">Someone wins landmark multinational asset pooling mandate &raquo;</a></div></li>
        <li><div><a href="#">Someone Announces Internal Restructuring Transactions and Guarantees Related to Acquisition &raquo;</a></div></li>
        <li><div><a href="#">Someone wins comprehensive custodial mandate with one of New Zealand's largest organizations &raquo;</a></div></li>
        <li><div><a href="#">Someone selected by East Timor to provide custodial services and training opportunities &raquo;</a></div></li>
        <li><div><a href="#">Someone launches latest Global Derivatives Collateral offering &raquo;</a></div></li>
        <li><div><a href="#">Someone expands Boston fund services operations &raquo;</a></div></li>
  </ol>
</div> 

Presentation

Now we add styling that makes it match the look & feel of the main site.

The css required to make this bit work for you will be different for every project, so take a look at the included styles and tweak as necessary.

More News

And now for the behavior

If the user's browser allows javascript to run, we add some additional unobtrusive behavior (including mousewheel support)

PLAIN TEXT

JavaScript:

jQuery(function( $ ){
    /**
     * make sure the CSS knows that we're modifying the DOM and then style accordingly
     **/        
    $('.scrollable').addClass('js');
    /** 
     * If you have an element you'd like to use the same style, but not attach the 
     * behavior you can turn it off by first adding the scrollable classname, but making 
     * sure the js classname is not applied to the element (this is what I did to show the 
     * "no javascript" version in the second example). Keeping the use of the scrollable 
     * classname for the general styles prevents having to write redundant styles
     **/
    $('.scrollable.nojs').removeClass('js');
    /**
     * a little DOM modification to keep all of the markup valid
     **/
    $('.scrollable.js ol').attr('id','items').wrap('<ul><li></li></ul>');
    $('.scrollable.js ul>li').attr('id','itemswrapper');
    var emptyLinkTarget = (window.opera) ? "#" : "javascript:function(){return}"; // a hash breaks a few flavors of IE & a javascript link (though it's poor form) breaks Opera.
    $('.scrollable.js ul').prepend('<li><a class="prev" href="'+emptyLinkTarget+'">&lt;&lt;</a></li>').append('<li><a class="next" href="'+emptyLinkTarget+'">&gt;&gt;</a></li>');
    /** 
     * and now we initiate 
     **/
    $('.scrollable.js').scrollable({
        size:3,
        horizontal:false,
        duration:1500,
        items:'#items',
        prev:'.prev',
        next:'.next'
    });
}); 

More News

This is the generated source we end up with... There's one thing you might notice, and that's the div class="__scrollable", though I initially placed that element outside of it's parent ol it did not work. It has something to do with how the xhtml 1.0 strict doctype is handled by the browsers. Though this may work in HTML 4.0 or various browser quirks modes, I haven't specifically tested all possible cases.

PLAIN TEXT

HTML:

<div class="scrollable js">
    <a href="#" class="more-link">More News</a>
    <ul>
        <li><a class="prev" href="javascript:function(){return}">&lt;&lt;</a></li>
        <li id="itemswrapper">
            <ol style="overflow: hidden; position: relative; visibility: visible; height: 124px;" id="items">
                <div class="__scrollable" style="position: absolute; height: 200000em;">
                    <li><div><a href="#">Someone reports second-quarter 2008 earnings »</a></div></li>
                    <li><div><a href="#">Bear scares comedian, everybody laughs »</a></div></li>
                    <li><div><a href="#">Someone Completes Someone else's Acquisition »</a></div></li>
                    <li><div><a href="#">Someone selected by Some Company, S.A.B. de C.V. for ADR program »</a></div></li>
                    <li><div><a href="#">Someone wins landmark multinational asset pooling mandate »</a></div></li>
                    <li><div><a href="#">Someone Announces Internal Restructuring Transactions and Guarantees Related to Acquisition »</a></div></li>
                    <li><div><a href="#">Someone wins comprehensive custodial mandate with one of New Zealand's largest organizations »</a></div></li>
                    <li><div><a href="#">Someone selected by East Timor to provide custodial services and training opportunities »</a></div></li>
                    <li><div><a href="#">Someone launches latest Global Derivatives Collateral offering »</a></div></li>
                    <li><div><a href="#">Someone expands Boston fund services operations »</a></div></li>
                </div>
                <br clear="all"/>
            </ol>
        </li>
        <li><a class="next" href="javascript:function(){return}">&gt;&gt;</a></li>
    </ul>
</div> 

This build is currently in a non-public svn repository, but I will be moving it to google code or github shortly (depending on whether or not I feel like learning how to use Git)

Standalone Demo:: http://www.naterkane.com/sandbox/scrollable/
Download:: First you'll of course need jQuery v.1.2.6; jquery.scrollable.js (7.5k); jquery.scrollable.min.js (4.1k); scrolling-list.css – the stylesheet used for the example; You can also grab a copy of jquery.mousewheel.js here

A wee bit o’ standards added to IE8b2

in css, editorial, javascript, programming, security | Thursday, August 28th, 2008 | Comments

IE8 beta 2 was made available yesterday. Many folks have already grabbed a copy and started playing and testing, some even read the release notes. PPK has even already updated his CSS compatibility table, that man is on the ball.

The additional standards and CSS support are of course noteworthy

CSS Expressions is no longer supported in Internet Explorer 8 Standards mode

CSS Expressions is a proprietary extension to CSS that has a high performance cost. (CSS Expressions is also known as "Dynamic Properties.") Starting with Internet Explorer 8 Beta 2, CSS Expressions is no longer supported in Internet Explorer 8 Standards mode. CSS Expressions is still supported in Internet Explorer 7 Strict mode and Quirks mode for backward compatibility.

Alternative style sheets

Internet Explorer 8 Beta 2 now supports alternative style sheets as specified by HTML4 and by CSS2.1. You can access the alternative styles that are defined by the Web page author by using the Style menu under the Page menu or under the View menu. You can use the No Style option on either menu to disable all author styling.
Windows Internet Explorer 8 Beta 2 Release Notes

That's the end of the good news, here's (some of) the rest...

That's all well and good, but it turns out, that there are a ton of other issues, that despite this release being a beta, I still feel are a bit rediculous...

JScript errors may occur when you upgrade from Internet Explorer 6 on Windows XP or on Windows Server 2003

Do not upgrade from Microsoft Internet Explorer 6 to Internet Explorer 8 Beta 2 on a system that is running Windows XP or Windows Server 2003. A rare installation issue may occur in which Internet Explorer may exhibit false JScript errors and an inability to add Favorites or Web Slices.

To work around this issue, uninstall Window Internet Explorer 8 Beta 2, install Internet Explorer 7, and then upgrade to Window Internet Explorer 8 Beta 2.

Windows Internet Explorer 8 Beta 2 Release Notes

Being required to install an interim version (IE7) to upgrade from IE6 (which so many folks are of course still unfortunately running) to avoid erroneous reports of JScript errors (which will of course halt the execution of pretty much any JavaScript/JScript app from running is absurd.

And this one is just downright unacceptable.

You are prompted to continue installing Internet Explorer 8 Beta 2 if you previously installed Internet Explorer 8 Beta 1

On a computer that is running Windows XP, you install Internet Explorer 8 Beta 1 and then install Windows XP Server Pack 3. Then, you try to install Internet Explorer 8 Beta 2. When you do this, you receive the following message:

Install Internet Explorer 8

Are you sure you want to continue installing Internet Explorer 8?

Setup has detected that you’ve installed a new service pack for your operating system since installing a previous version of Internet Explorer 8. After completing this installation, you will not be able to uninstall Internet Explorer 8.

You can click the ‘OK’ button to continue installing Internet Explorer 8 Beta 2, but you will not be able to uninstall it later.

To work around this issue, and to be able to uninstall Internet Explorer 8 Beta 2 later, click the ‘Cancel’ button and do the following before installing Internet Explorer 8 Beta 2:
• Uninstall Windows XP Service Pack 3
• Uninstall Internet Explorer 8 Beta 1
• Install Windows XP Service Pack 3
• Install Internet Explorer 8 Beta 2

Windows Internet Explorer 8 Beta 2 Release Notes

I was never able to actually install SP3 on my last XP laptop. My first attempt threw an error at the very end of the installation process, after over one hour, and then it took another 45 minutes to "undo" the installation attempt. Being optimistic, I tried it twice, totally over 3 hours of time wasted. So theoretically, if someone had installed SP3 after installing IE8b1, it could be a multi hour process just to make sure that a web browser could at some point be uninstalled in the future. It takes less time to install the full Adobe Creative Suite than a service pack. C'mon now, this is just dumb people.

How is it possible to measure a few positivities for developers when the new issues regarding security, usability, and system stability for a general user are so great? I can't. Though some folks are jumping up and down, the low adoption rate of IE7 has shown us that the additional support for standards in this new version is theoretically exciting, but the fantasy of being free of IE6 and onto a standards based world in the next few short years is exactly that, a fantasy.

Read the full release notes here: http://support.microsoft.com/kb/949787

I tend to run beta's of everything... but for this one, I'm not going to let it run anywhere other than in it's own instance of XP in VMWare.

A Dynamic “Paid” Stamp for Acrobat

in javascript, programming | Friday, August 22nd, 2008 | Comments

I have no plans on writing a tutorial, and I generally find building forms in Acrobat to be a pain, and I don't feel that Acrobat Forms are really worth getting into. On that note, I've never before delved into the weird (Flash 4 esq) world of writing javascript for Acrobat, until now...

Acrobat has a neat little feature called Stamps. They are simply other small PDF files that are added to a document to add the same sort of information that a rubber stamp might add to a paper document.

More often than not, I receive invoices and bills in non-paper format. Whether it's an html email, a Word document, a PDF, etc... Instead of printing these bills and invoices out, marking them paid, and filing them in a traditional paper filing cabinet, I decided I want to keep my filing as paper-free as possible.

After wasting over an hour looking though worthless tutorials on how to write javascript for Acrobat Forms, I came up with paidstamp1.pdf. Feel free to use it for yourself.

If anyone has anything along these lines that's better than my lazy attempt, please send it to me.

Parameters string and the Prototype Ajax.Request method

in ajax, javascript | Tuesday, May 6th, 2008 | Comments

I just noticed something that's a little funny about Prototype 1.6>. I've successfully deployed a number of projects with v1.5 of the library, with all of the improvements I've been reading about with v1.6, I decided to keep up with the times and use the newest version for a project that is very DOM Scripting intensive.

While making a request with either new Ajax.Request or new Ajax.Updater something kept going wrong.

Though the Prototype API Docs were giving examples such as this:

PLAIN TEXT

JavaScript:

new Ajax.Updater('products', '/some_url', { method: 'get' }); 

Firebug was throwing me an error. Hooray for Firebug for doing it's job. Well, that's what I thought at first, until it was time to see what this error was about. Long story short, Google returned nothing...

PLAIN TEXT

CODE:

pair has no properties
http://projectname.localhost/js/prototype.js
Line 417
 
[Break on this error]  if ((pair = pair.split('='))[0]) { 

It turns out that this error was being thrown by Prototype's toQueryParams method. toQueryParams was being called by Ajax.Base's initialize method...

PLAIN TEXT

JavaScript:

if (Object.isString(this.options.parameters))
    this.options.parameters = this.options.parameters.toQueryParams();
else if (Object.isHash(this.options.parameters))
    this.options.parameters = this.options.parameters.toObject(); 

I said to myself (in the third person) "Nater, you're not passing any params, the request URL is specified elsewhere, AND it's 'friendly' anyway... this seems silly". Looking up a couple of lines it turns out that the default Ajax.Base.options.parameters key is set to an empty string by default. Since toQueryParams() is not happy when it's passed an empty (albeit default) string, what else can we do? The simple answer is to pass an empty object instead!

PLAIN TEXT

JavaScript:

new Ajax.Updater('products', '/some_url', { method: 'get' ,parameters:{}}); 

Voila! Since this seems like it's something that's way too easy to come across, I haven't yet figured out if it's a bug or I'm just missing something that's even more basic.