They say you learn something new every day.

Posts tagged ‘javascript’

Couting Words (27/02/2012)

So, as I said, proof reading is hard. Really, to misquote Douglas Adams, hard. You just won’t believe how vastly, hugely, mind-bogglingly hard it is. I mean, you may think doing maths is hard, but that’s nothing compared to proofreading.

One of the things I find difficult to spot is duplicate words. Being a techie sort, I decided to code myself out of it, so I wrote a little internet app: the repeated word finder.

Basically it searches for cases of the same word being used in close proximity and highlights them. Obviously, there are lots of legitimate uses for repeated words (like both the ones in the illustration), and I know that you can never code better writing, but it helps you see the errors. My hope is that by highlighting these things  it’ll help me spot them.

It’s interesting – there are some things humans are good at, and some things computers are good at. Humans are very good at reading what should be there, and improving phrasing etc. Computers are very good at reading what is actually there and highlighting things that humans would just gloss over.

Hopefully, this is just the beginning of a larger proof reading tool. It’s something of a sister to the uber-wordcount tool, which needs a bit of a rewrite really. My plan is to handle all of this sort of thing – stats, wordcounts, etc, in one javascript based application. There’s no need to do anything server side with this at all.

I’ve written the app in javascript, and I have to admit, my javascript is rusty. I was quite exicited to find a javascript minifier. This is the original:

function countit(){

var formcontent=document.wordcount.words.value
formcontent = formcontent.replace(/\n/g, “

”)
formcontent = formcontent.split(” “)
var recentbits = “”

for ( var i = 0; i < formcontent.length; i++ )
{
if ( recentbits.toLowerCase().indexOf(” ” + formcontent[i].toLowerCase()) > 0)
{
formcontent[i] = “” + formcontent[i] + “
}

recentbits = “”

for (var count=0; count < 20; count++)
{
recentbits = recentbits + ” ” + formcontent[i-count]
}

}

var totalwords = formcontent.length

document.getElementById(‘totalwords’).innerHTML = “Output: (” + totalwords + ” words)

” + formcontent.join(” “)

}

And this is after minifying:

function countit(){var a=document.wordcount.words.value;a=a.replace(/\n/g,”

”);a=a.split(” “);var b=”“;for(var c=0;c0){a[c]=””+a[c]+””}b=”“;for(var d=0;d<20;d++){b=b+” “+a[c-d]}}var e=a.length;document.getElementById(“totalwords”).innerHTML=”Output: (“+e+” words)

”+a.join(” “)}

Obviously, you can’t read it, but it’s so much more compact.

Going through it, I don’t think it does anything cleverer than renaming all the variables to consecutive letters and getting rid of all the space. But it’s pretty nifty for loading into the live system.

Client side (25/02/2012)

I was reading an article in .Net Magazine the other day and someone had asked a developer:

“Is it better to run your code on the server side or the client side?”

 And the developer said something along the lines of:

“Client side. This will scale better since the users’ computers will do all the work”.

It’s kind of obvious really, but I realised I’ve been doing this wrong. Take my wordcount tool, for example (the design of which is beginning to look a bit crappy to me, which is good, because it means I’m getting better at designing things). It’s built in PHP, which means it uploads all the content to my server and runs the commands on my server.

If you think about it, this is kind of stupid for two reasons:

  1. I’m having to submit a load of data over the internet, which is slow.
  2. I’m having to run all the commands on my server. Which doesn’t scale and means my computer is doing the work.

This is a prime example of when doing it on the user’s computer would be better.

So I’ve started rebuilding it in javascript. It turns out I’m a bit rusty at javascript, and also PHP has some “lovely” built in functions (like a wordcount functions). I think I see what Jeff meant about PHP now. It’s such a weird language:

PHP isn’t so much a language as a random collection of arbitrary stuff, a virtual explosion at the keyword and function factory

Nevertheless, I still quite like it, but it makes it quite difficult to translate form PHP to javascript. I’m going to have to rewrite my wordcount code more or less from scratch.

This is no bad thing though – it’ll be some good javascript practice.

Pimp my Tumblr Search (18/01/2012)

Yesterday I was looking for something I’d learnt before (about adding a new table in SQL, I believe), so I thought I’d search my Tumblr for it. Wrong. It turns out the Tumblr search box doesn’t work. What on Earth? Did I break my theme when I pimped my Tumblr?

It turns out I didn’t. This is quite a common problem. The search on Tumblr just doesn’t work. I genuinely found this hard to believe at first. “It must work”, I thought to myself, “they wouldn’t just leave a broken feature there”. But, it doesn’t.

I was left really stumped that a Web 2.0 project which seems to care so much about usability, would make such a mistake. I suppose the themes are made by individuals so Tumblr can’t get rid of the search box. But it must have worked at some point for people to add it in. Maybe it causes too much load on the system. Whatever the reason, we have to deal with the problems that we’re dealt. The Tumblr search just does not work.

It’s a problem to which some people have come up with some innovative solutions.

The standard solution seems to be to use a tag search:

You put this bit of code in the HTML head of your theme:

<!—
function handleThis(formElm)
{
window.location=”http://yourtumblrURLhere.tumblr.com/tagged/”+formElm.number.value+”“;
return false;
}
// —>

And then edit your search box:

It’s quite a nifty bit of code – and a bit like the code that I hacked together (and didn’t really understand) years ago to make my own custom search page:

Looking at this code, I understand it completely, which is a really nice feeling.

It takes “this” (the value from the form) and adds it to the string to get a new page location. It then uses “window.location” to load the new page created. Technically you could create any page with this. And hence, point to any form that uses GET variables.

The problem of course is that all it’s doing is loading tag pages, which isn’t really a proper search.

One option would be to add it into a Google search using the “site:” feature, like this:

http://www.google.co.uk/search?q=SEARCH TERM+site%3Alessstupidthanyesterday.tumblr.com

But the problem with this is that it takes you to Google and away from Tumblr, which is a bit jarring. It’s like opening the fridge door and finding yourself in Tesco. It’s great and thanks for all the choice and that, but I only wanted the milk.

Added to this is the fact Google’s crawling may be a few days out of date. It’ll be fine for the old pages, but given I update this every day, that might be a bit annoying for me when searching.

Dropping the JavaScript Off (12/01/2012)

I have an Amazon Associates account. I’ll put my hands up and admit it – sometimes I try to make some money. Sue me! (Well, don’t that would be a bit ironic, seeing how as what I’m trying to do is get some money, not lose it). Maybe the internet doesn’t think too highly of this, and it makes me a bit of an advertising weasel. But hey, we’re all those these days, whether we like it or not.

The good thing with Amazon Associates is that it’s not blatant marketing. You just put a link to an Amazon product and if anyone buys it, you get a small percentage of the sale.

Some of you may be thinking that this could produce a conflict of interests, since it’s in your interests to say “this is great, oh and by the way, here’s a link to buy it on Amazon, which you should totally do if you’re not an idiot.” However, Amazon sells everything. So if you’re writing about something you like anyway, you’ll be able to find it on Amazon, so as long as you do it that way, rather than linking to the most expensive thing you can find on Amazon.

However, the problem is, I’m very lazy. And converting the standard Amazon link to an Associates link is sometimes a bit of a pain.

So I thought I’d have a look at the Associate links and figure out how they work. It seems each item on Amazon has a 10 digit alpha-numeric ID number.

For example, the link to the book I’m reading at the moment (Emma Forrest’s Your Voice in My Head, which really is very good and I strongly recommend it), is:

http://www.amazon.co.uk/Your-Voice-Head-Emma-Forrest/dp/1408808218/ref=sr_1_1?ie=UTF8&qid=1326224120&sr=8-1

 And the ID number is 1408808218

To convert this to an associate link (so I get a teeny, weeny little bit of the money), you need to add that ID into this template link, (twice):

http://www.amazon.co.uk/gp/product/ 1408808218 /ref=as_li_qf_sp_asin_tl?ie=UTF8&tag=imagedisse-21&linkCode=as2&camp=1634&creative=6738&creativeASIN= 1408808218

That’s neat. However, I’m not quite sure it’s simple enough. In actual fact, during the course of writing this, I discovered Amazon have an Associates bar you can turn on, which allows you to click to generate the links while searching Amazon.

Amazon already let you do this

So that, in fact, is problem solved. However, now I’ve started looking at this, I thought I’d finish off my learning. As Jeff Atwood says:

Don’t Reinvent The Wheel, Unless You Plan on Learning More About Wheels

Well, I’ve come this far, maybe it wouldn’t be too bad to learn a bit more about wheels. Always helps if you ever need to fix one.

I’ve noticing an increasing number of sites saying “drag this button onto your bookmark bar”.

There's loads of these around!

I know it takes advantage of some sort of weird javascript hack, but I thought it was time to see if I could create my own today.

In actual fact, it was easier than I thought:

// You need to begin with javascript and then a colon
javascript:

// This gets the URL of the current document
var url=document.location.href,

// This trims out the link to leave just the product ID
id=url.substr(url.indexOf(‘dp/’)+3,10);

// Echos out the new link
alert(“http://www.amazon.co.uk/gp/product/” + id + “/ref=as_li_ss_tl?ie=UTF8&tag=imagedisse-21&linkCode=as2&camp=1634&creative=19450&creativeASIN=” + id)

You need to put it all onto one line, but other than that you’re away. And once you’ve got this there are loads of possibilities for extending it further.

In actual fact, now that I’ve realised the Amazon associates bar does this for you, I probably won’t bother with this, but I’ll definitely look at doing something with this in the future.

Tag Cloud