pancake theorem a tech/life blog

Monthly Archives for July 2012

Unpin all “Pinned” Posts on Tumblr – A bookmarklet for cool people 07.19.2012

It’s bookmarklet week y’all. I said so, in case you’re wondering why.

I EFFING SAID SO.

Recently, Tumblr added the ability to “pin” posts to the top of user dashboards for more exposure.

They’re not too intrusive and, if you follow cool people, you probably won’t get any uncool posts pinned to the top of your dashboard. If there are a dozen pinned posts, though, it does kind of annoying having to click each of those little red pins.

~*I wonder if I can make a bookmarklet that unpins all of them at once*~

Why yes, dream sequence Jenn, you can. Here is how:

There are two steps to the algorithm:
1. Get all items that have “pins”.
2. Automagically “click” them so they become unpinned.

If you investigate the source code of your dashboard, either through your browser or developer tools, you will see that the “pins” to click class of “pin”. We can use JavaScript to grab all of document objects with the class name “pin” and then use the click() function to trigger a click event on these objects – which, in this case, make them disappear.

Here is the code:

Edit: (7/20/2012) The day after I published this, the code stopped working. Hmmmm. Anyway, I’ve updated the code now to include MouseEvents that should make this cross-browser friendly. xoxo j

// create array and fill it with all "pin" posts
var pinArray = document.getElementsByClassName("pin");
 
// create a click event
var pinClick = document.createEvent("MouseEvents"); 
pinClick.initMouseEvent("click");
 
// for each pin post, trigger that click event
for(var i=0; i<pinArray.length; i++) {
    pinArray[i].dispatchEvent(pinClick);
}

So now, I will put this code in my base bookmarklet code:

javascript:(function(){ 
 
    // create array and fill it with all "pin" posts
    var pinArray = document.getElementsByClassName("pin");
 
    // create a click event
    var pinClick = document.createEvent("MouseEvents"); 
    pinClick.initMouseEvent("click");
 
    // for each pin post, trigger that click event
    for(var i=0; i<pinArray.length; i++) {
        pinArray[i].dispatchEvent(pinClick);
    }
})();

Then I shall minify this code – remove the comments (lines that begin with //) and remove extra whitespace – and this is the code I pop into the bookmark I add to my browser:

javascript:(function(){var pinArray = document.getElementsByClassName("pin");var pinClick = document.createEvent("MouseEvents");pinClick.initMouseEvent("click");for(var i=0; i<pinArray.length; i++) {pinArray[i].dispatchEvent(pinClick);}})();

Now whenever there are a gazillion pinned Tumblr posts, you can unpin them all at once with one click of the bookmarklet.

Boom shakalaka.

3 notes • leave another

Make a bookmarklet that replaces all images on a web page 07.18.2012

The other day, I told you what bookmarklets are and how to make them if you’ve got some knowledge of JavaScript.

Today I’m going to show you how to make another one.

One of the easiest things to do with JavaScript is to grab images and change their source. If you go on basically any web page these days, there are tons of images. If you view the source of the web page to see how an image is added, you’ll find HTML similar to this snippet:

<img src="http://example.com/example.png" alt="My example image" />

The src part is an attribute of the img tag. To replace all the images on a page with another image, we just need to do the following things:

1. Get all items with the img tag.
2. Change the value of each image’s src attribute to the new image we want to replace everything.

Here is the image that I want to replace all the original web page images when I click the bookmarklet:

Here kitty, kitty!

For the sake of this tutorial, I’m going to say that the source of my image is http://example.com/example.png. You would replace that in the code with the source of any image you would like to use, of course.

Here is the code:

// create array and fill it with all items with tag "img"
var imgArray = document.getElementsByTagName("img");
 
// for each item in our new array, change the "src" value to our new image source
for(var i=0; i<imgArray.length; i++) {
    imgArray[i].src="http://example.com/example.png";
}

So now, I will put this code in my base bookmarklet code:

javascript:(function(){ 
    // create array and fill it with all items with tag "img"
    var imgArray = document.getElementsByTagName("img");
 
    // for each item in our new array, change the "src" value to our new image source
    for(var i=0; i<imgArray.length; i++) {
        imgArray[i].src="http://example.com/example.png";
    }
})();

Then I shall minify this code by removing my comments (lines that begin with //) and unnecessary whitespace. The resulting code is what I enter in the URL field when I create the bookmark in my browser:

javascript:(function(){var imgArray = document.getElementsByTagName("img");for(var i=0;i<imgArray.length;i++){imgArray[i].src="http://example.com/example.png";}})();

Kitties everywhere!

leave a note

How to make a bookmarklet and be cool 07.16.2012

What is a bookmarklet?

You know how when you’re browsing the Web and you want to save links for reading later, you’ll “favorite” them or “bookmark” them? The bookmark you are saving contains the title of the page and the URL of it. For example, you can save a bookmark of “Facebook” with “http://facebook.com” as its URL. That’s your bookmark. You can then go into your bookmarks folder within your browser and access those bookmarks whenever you want to revisit them.

Here, I am creating a bookmark for Facebook.
Later, I can just click the bookmark instead of typing in the URL all over again.

As you can see in my example, you can type basically anything into the URL box, and the browser (I’m using Chrome, but it’s pretty standard for other browsers) will execute or go to that URL when you click the bookmark. Now, let’s say you enter code instead of just a URL…

A bookmarklet is JavaScript stored in the URL field of a browser bookmark, or the href attribute of a hyperlink in a web page.

What is JavaScript?

JavaScript is a scripting language. If you don’t know this already, or you do not know how to code at all, then what I’m about to talk about may drive you insane. If you want to learn JavaScript, I highly recommend Marijn Haverbeke’s Eloquent Javascript. It’s online and in print, and it’s one of my favorite books.

Whatever. How do I make a bookmarklet?

Well, my base for bookmarklets is just a simple anonymous function call:

javascript:(function(){ 
 
    // MY SCRIPTS WILL GO HERE, Y'ALL
 
})();

Obviously, you can see where I’m going to put the scripts that perform the job I want to accomplish. Let’s say that I want to create a bookmarklet that just says “You are the best; everyone else is crazy.” whenever you click it. Kind of like a pep talk, you know? Here would be my bookmarklet code:

javascript:(function(){ 
 
    alert("You are the best; everyone else is crazy.");
 
})();

You should then “minify” this code by getting rid of unnecessary whitespace, and then paste it into the URL part of your “add bookmark” box. Or put it in a link by popping it in as a value to your hyperlinks href attribute.

javascript:(function(){alert("You are the best; everyone else is crazy.");})();

That’s it, minified.

Instead of entering a “real” URL, I paste in my minified JavaScript

And here is what happens when I select/click the bookmarklet in my browser:

If the browser says it, that means it’s true.

Throughout this week, I’ll show you how to make some cooler bookmarklets that will make you even cooler than you are already.

Yes, you’ll be cool like me.

3 notes • leave another

A Summer of Coding: In-browser Code Tutorials 07.13.2012

I NEVER HAVE TIME TO WRITE BECAUSE ALL I DO IS CODE.

I don’t think that’s a real problem, but it is whenever I see how neglectful I’ve been of my precious pancake theorem, here. You can blame my job at the university for extending my work hours Mondays through Thursdays – although I can’t hate on them since I get Fridays off.

I’m doing a lot of work with the Zend PHP Framework lately, and until several weeks ago it was completely new to me. If you’re on break from class, or have downtime (downtime, what’s that?), there is no reason that you cannot learn something new.

To follow my mantra that “learning by doing” is the way to go, here are some sites that allow you to play around with different languages and inspire you to make something awesome, right in your browser!:


TryRuby is a short 10-15 tutorial that brings you through the basics of Ruby, right in your browser.

 


CodingBat used to be called JavaBat back when I had to do exercises in it for my freshman-year Foundations in CS courses. “Practice makes perfect” applies to programming as well, and I credit this site for keeping me challenged and interested in programming. I use it now to brush up on Python, now and then!

 


If you want to optimize your coding workflow, or just brush up on your vim editor usage – like I plan to over the summer – this OpenVim in-browser tutorial is a great start.

 


A Tour of Go is, well, just that. Another fairly young language, it’s gaining traction with a lot of companies beyond the folks at Google who created the language.

These should keep you busy for a while. If you know of any other good in-browser programming tutorials, let me know in the comments or tweet me @jennschiffer.

leave a note