terriko: (Default)
I got a really interesting query today that boiled down to, "How much math do you need to write code?"

The short answer to this is, "Not that much" or perhaps "it depends on what you want the code to do." But here's part of what I actually wrote back:

---

To be honest, the level of math required to write code is pretty small. A grade school understanding is often sufficient; there's a reason we can teach 7 year olds to program! Modern programming languages are much less math-oriented: I once spent an afternoon teaching my then 11 year old sister and her friends how to write dynamic database-driven websites, and the only math they used was to add up the scores on the "what animal are you most like?" quizzes they wanted to write.

The math in computer science comes a lot later: for deeper analysis of algorithms and running time, we use algebra and mathematical proofs in an academic setting. But... to tell the truth, relatively few programmers need or use this kind of deeper understanding in their day-to-day jobs. And in my experience teaching students, many people find this stuff easier to learn by doing, so they only really begin to grasp it *after* they have gotten comfortable writing programs.

In short: you probably have all the math skills you need to write code, and if you decide you want to do more hardcore CS later, it'll be easier to learn the math along the way anyhow!

---

There's some nuance there that I didn't really tease out -- the deeper understanding of algorithms and program behaviour is what characterizes the real "science" out of computer science. And maybe the world would be a better place if more programmers did actually use deeper analysis in their day-to-day jobs. But you don't have to be an academic-style computer scientist to write code! Still, it's a very interesting question, given that historically programming actually did require a lot more math, and our perceptions and stereotypes haven't really kept up with the reality of the field.

Perhaps it's time for me to write another presentation? ;)

(For context: my old slideshow about women, computing and math got included in this TechCrunch post about Racism and Meritocracy, so I've been getting a lot of mail, including the one that spawned this post.)
terriko: (Default)
More notes from getting myself set up to write code:

The fink project has a page about upgrading from 10.5 to 10.6 with fink.

It's very easy to get distracted by the nice step-by-step description that takes up most of the page.

The pertinent bit of information is at the top, though:

you will probably find it easier to do a clean install from source instead.


I probably should have just done that first, since the lovely instructions didn't work at all for me. Oh well.
terriko: (Default)
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!
terriko: (Default)
Another flickr interface hack test:

Pumpkins chez Dan 2010

IMG_1075IMG_1076Glowing vodka skullIMG_1080IMG_1081IMG_1082
IMG_1085IMG_1086IMG_1087IMG_1088IMG_1091IMG_1092
IMG_1093IMG_1094IMG_1095IMG_1096IMG_1097IMG_1098
IMG_1099IMG_1101IMG_1102IMG_1103IMG_1104IMG_1105
IMG_1106IMG_1107IMG_1108IMG_1109IMG_1110IMG_1111
IMG_1112IMG_1113IMG_1114IMG_1117IMG_1119IMG_1123
IMG_1124IMG_1129IMG_1131IMG_1132IMG_1135IMG_1137

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;



terriko: (Default)



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;


Page generated May. 23rd, 2013 12:07 am
Powered by Dreamwidth Studios