terriko

I have a Firefox add-on I made several years ago to help me explore page composition and generate (theoretical) web security policies, and I decided to pull it out of storage and see if it could still be helpful. Of course, my browser decided to update Right Then, and I decided it wasn't worth fighting to stop it from doing so.

So I updated the add-on so that it included versions 5.* and actually, it mostly still worked (despite having been written for, I believe, a very early version of Firefox 3, or maybe a late version Firefox 2? This is one of my earliest add-ons.) except that apparently hasAttribute/getAttribute doesn't exist anymore.

I can't seem to find anywhere telling me that they've been deprecated, and more importantly, what I should be using instead, which is irritating. But the end result is that it doesn't work, so I needed to find something else. It looks like the solution for at least some of my code is to instead use a querySelector to look for all elements with that attribute.

Of course, I never seem to want to do exactly what the darned examples show. So in case you're like me, the way to search for any tag with a given attribute using querySelector is like this:

document.querySelectorAll("*[myattribute]");

And if you wanted to search just a specific type of tag, then you'd specify that instead of *. So if you were looking for the alt tags for every image, you'd do...

document.querySelectorAll("img[alt]");

But I'm concerned by this note in the querySelectorAll documentation, which tells me that it "Returns a non-live NodeList of all elements descended from the element on which it is invoked that match the specified group of CSS selectors."

There's a big warning elsewhere that it's non-live too, unlike other such methods. So my questions are... why is it non-live, and what do I need to do to get a live list? For my particular purpose at the moment I don't think I need it to be live, but for some of the older code that I might want to update in the future I probably do.

I'm mostly just recording this for my own reference later, but if someone happens to be able to tell me if there's another function that more directly replaces hasAttribute, or there's a good way to get a live list of elements with a given attribute, I'd love to know!

Another flickr interface hack test:

Pumpkins chez Dan 2010

This gives me a box with code for entire set of photos as thumbnails in an Nx6 grid. Again, no clue if it's going to break RSS/layouts/feed readers, so please let me know if it does.

Here's the code:

// ==UserScript==
// @name           Blog flickr set
// @namespace      tko-flickr-set
// @description    Make cut and paste code for blogging entire sets of flickr photos as thumbnails
// @include        http://www.flickr.com/photos/*/sets/*
// ==/UserScript==

var thumbsHTML = document.getElementById('setThumbs');

var allImages = thumbsHTML.getElementsByTagName('a');
var title = document.title.replace(/ - a set on Flickr/, '');

var code = '<h2><a href="' + location.href + '">' + title + '</a></h2>';

for (i = 0; i < allImages.length; ++i) {

	code += '<a href="' + allImages[i].href + 
	'" title="' + allImages[i].title + '">' +
	allImages[i].innerHTML + '</a>';

	if (i > 0 && (i+1) % 6 == 0) {

		code += '\n';
	}
}

// Insert after the date
var insertPlace = document.getElementsByClassName('vsDetails')[0];

var newBox = '<h4>Embed Code</h4>' +
	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' +

	'style="width: 250px;" wrap="virtual">' + code + '</textarea>';

insertPlace.innerHTML = insertPlace.innerHTML + newBox;

IMG_1082
by Terriko.

I'm testing out my greasemonkey script which generates boxes with the HTML for posting a flickr photo with title/caption, so you all get a picture of a pumpkin. It is the end of October, after all!

The script is still brittle if the interface changes, but it is just a little interface hack so I'm not too concerned about it. I'll just rehack if necessary, after all! What it does is makes a set of 3 boxes down the right hand side of the page containing HTML for cutting and pasting the photo with the title as a caption (the default code Flickr gives you doesn't include a caption, and I find the menus kind of irritating if I'm posting a lot of photos in one day).

Here's the script. You should be able to cut and paste it into greasemonkey if you want to use it yourself. (And here's to hoping that all these font colour, size and layout tricks won't break everyone's feed readers/friends pages/layouts!)

// ==UserScript==
// @name           Flickr Blog HTML
// @author         Terri Oda -- http://terri.zone12.com
// @namespace      tko-flickr
// @description    Adds a box with cut-and-paste code for blogging images
// @include        http://flickr.com/*
// @include        http://www.flickr.com/*
// ==/UserScript==


// Get all that necessary photo info
var img = document.getElementsByClassName('photo-div')[0].getElementsByTagName('img')[0];

var title = document.getElementsByClassName('photo-title')[0].innerHTML;

var url = location.href;
var imgsrc = img.src.replace(/_z\.jpg/, '.jpg'); 
	// we want the smaller of the medium photos for most blogging purposes


// find the username for credit
var userHTML = document.getElementsByClassName('username')[0].getElementsByTagName('a')[0];

var user = userHTML.innerHTML;
var userUrl = userHTML.href;


// Make that cut and paste-able code
var code = '<div style="float: right; margin-left: 10px; margin-bottom: 10px;">' +
	'<a href="' + url + '" title="' + title + '">' +

	'<img src="' + imgsrc + '" alt="' + title + 
	'" style="border: solid 2px #000000;" /></a>' +

	'<br /> <span style="font-size: 0.9em; margin-top: 0px;">' + 
	'\n<a href="' + url + '">' + title + '</a> <br />' + 
	'by <a href="' + userUrl + '">'+ user + 
	'</a>.</span></div><br clear="all" />';

var codeSmall = code.replace(/\.jpg/, '_m.jpg'); 
	// I'm amused how small is _m, but whatever works!

var noExtras ='<a href="' + url + '" title="' + title + '">' +

	'<img src="' + imgsrc + '" alt="' + title + '" /></a>';

// figure out where to put it
// this puts it right after the "this photo belongs to..." so I don't have to scroll much.
var insert = document.getElementsByClassName('secondary-contexts-label')[0];

// Make the actual box
var newBox = '<h4>Embed Code</h4><h5>Medium</h5>' +

	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' + 
	'style="width: 250px;" wrap="virtual">' + code + '</textarea>' + 
	'<h5>Small</h5>' + 
	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' +

   'style="width: 250px;" wrap="virtual">' + codeSmall + '</textarea>';
var noExtrasBox = '<h5>No Extras</h5>' +

	'<textarea name="embedHTML" onFocus="this.select();" rows="5" ' +
   'style="width: 250px;" wrap="virtual">' + noExtras + '</textarea>';

// Add it to the page
insert.innerHTML = newBox + noExtrasBox + insert.innerHTML;

I decided it was time to start backing up my dreamwidth entries. After looking at some of the available clients I decided the quickest way to do this was probably going to be a shell script, and thankfully there was a list of tools for the purpose of backing up livejournal entries.

So, I chose the one that seemed to back up the most stuff, LJSM, and tweaked it for Dreamwidth. This wasn't that much work (I needed to change livejournal.com to be dreamwidth.org in one place, then I needed to fix it so the titles were set correctly in the index) but in case anyone else wants it, here's my modified version, DWSM:

http://terri.zone12.com/code/dwsm.pl

I'm sure I'm not the only lazy person out there who'd do more backups if they didn't have to think too much about it. I think everyone's new year's resolutions should include "make more backups" and I'm doing my part to make this a reality. So here you go: one less excuse!

Instructions

Download DWSM: http://terri.zone12.com/code/dwsm.pl

Basically, you need perl and you need to know how to run stuff from the command line. If this makes no sense to you, you might want to ask someone else for help. For those you know what I'm talking about, you'll want to run something like:

./dwsm.pl -a -u terriko:password terriko

Only you need a real password and probably you'll want to supply your own username in both places. Or only the first if you really want a copy of my journal. Or you can set the second one to any journal name if random acts of backup are your thing. Grab all your friends' journals and print a newspaper! Automate it to run every day and never think about backups again! Whatever. You have fun there!

The exhaustion/stress from fixing crud and trying to get my thesis done at the same time hit me hard today, so I came home at 4pm and immediately fell asleep.

As these things usually go, this resulted in me awakening sometime later, still feeling like a zombie, but unable to go back to sleep. I completely failed to read a magazine because I found myself skimming before I'd read a couple of sentences. So I figured I'd go mess about with flickr... time flies, and I find I've written a greasemonkey script making it easier for me to blog photos. Which is fine, except how the heck does it work that I can't concentrate long enough to read two sentences, yet I can write JavaScript code just fine?

I am concerned that in the dystopian future, some evil megacorp will take advantage of this and generate worker drones who are incapable of reading but perfectly good at writing code.

No, wait, that's just the exhaustion talking. In that spirit, though... Have some tentacles, and I'm going back to bed:

Tentacles
by Terriko.

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Entries tagged with code

hasAttribute deprecated? using querySelector.

More pumpkins! More interface hacks!

Pumpkins chez Dan 2010

Pumpkin photo and my flickr interface hack

Backing up Dreamwidth entries using DWSM

Instructions

Coding brain != reading brain?

Profile

June 2025

Links

Syndicate

Page Summary

Style Credit

Expand Cut Tags