Hate UML?

Draw sequence diagrams in seconds.
http://www.websequencediagrams.com

An instant rhyming dictionary for any web site
Posted on: 2011-06-04 21:30:00
Many good web applications, and many bad ones, have an API, and my hobby project, RhymeBrain.com, is no exception. The trouble is: the target users of both the web site and the API don't know the difference between Javascript and Java. They don't even know what "A.P.I." stands for. The most they can do is edit some HTML and paste in some code, so that's what my API has to be.

I managed to get it down to that using a technique called JSONP. This technique avoids any problems with cross domain requests, and allows non-coders to use the API using a short, customizable HTML snippet.

Demonstration

Paste this in your web site:

... and you get this:

How it works

1. The API user pastes a form and reference to a script into their web page.

2. The script inserts some more DIV elements to contain the search results. The DIVs could have been included in the pasted code, but this way is more flexible in case I want to change it later on.

var resultDiv;
document.write("<div id='RhymeBrainResultDiv'></div><div style='clear:both'></div>");
resultDiv = document.getElementById("RhymeBrainResultDiv");

When the user clicks the Rhyme button, this function is called. It creates a special URL that points back to a program on my server. For example, this one: http://rhymebrain.com/talk?function=getRhymes&maxResults=10&word=javascript&jsonp=RhymeBrainResponse. It adds a brand new script element to the end of the document, and sets it source to point back to a program on the rhymebrain server.

function RhymeBrainSubmit()
{
    var input = document.getElementById("RhymeBrainInput");
    var word = input.value;

    $(resultDiv).empty();
    resultDiv.appendChild( img );

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://rhymebrain.com/talk?function=getRhymes" +
        "&word=" + encodeURIComponent(word) +
        "&maxResults=" + MaxResults + 
        "&jsonp=RhymeBrainResponse";

    document.body.appendChild(script);
}
3. The server does some super intensive processing involving C, mmap() and 100 MB files, and sends back a response. The response happens to be executable javascript.
RhymeBrainResponse([ {"word":"equipped", "freq":22,"score":"300","flags":"c","syllables":"2"},
 {"word":"manuscript", "freq":22,"score":"300","flags":"bc","syllables":"3"},
 {"word":"script", "freq":21,"score":"300","flags":"bc","syllables":"1"},
 {"word":"shipped", "freq":21,"score":"300","flags":"c","syllables":"1"},
 {"word":"slipped", "freq":21,"score":"300","flags":"c","syllables":"1"},
 {"word":"stripped", "freq":21,"score":"300","flags":"c","syllables":"1"},
 {"word":"dipped", "freq":20,"score":"300","flags":"c","syllables":"1"},
 {"word":"tipped", "freq":20,"score":"300","flags":"c","syllables":"1"},
 {"word":"whipped", "freq":20,"score":"300","flags":"c","syllables":"1"},
 {"word":"gripped", "freq":19,"score":"300","flags":"c","syllables":"1"}]);

4. The browser executes the javascript, which calls the function name that was passed as the jsonp parameter to the script URL. It calls a function which displays the results on the web page.

That's all there is to it. JSONP neatly sidesteps the problem cross domain requests, since script tags can be included from any domain, and it provides a way for non-coders to create mashups.

Want more programming tech talk?
Add to Circles on Google Plus
Subscribe to posts

Post comment

Real Name:
Your Email (Not displayed):

Text only. No HTML. If you write "http:" your message will be ignored.
Choose an edit password if you want to be able to edit or delete your comment later.
Editing Password (Optional):

Jason Persampieri

2011-06-04 23:23:49
Very cool, but please, please, please remove the use of document.write. Heck, you already have a handy id to latch on to "RhymeBrainInput"... create the result div as necessary.

Search for Steve Souder's post on the Digg widget for an explanation (hint: scripts with 'document.write' can block downloading of other scripts).

Otherwise, very, very cool :)

_jason

Steve Hanov

2011-06-04 23:35:32
Jason: Thanks for the tip. The article you mentioned said that the problem is only in an older version of Firefox, and all other browsers would have no problem with document.write(). Since the document.write() code is much cleaner than the alternative, I am keeping it in the tutorial.

Jason Persampieri

2011-06-05 11:53:42
Well, FF 3.6 was the current version when the article was written, but it seems I've missed a more important point. It's not simply *using* document.write that can cause the bad behavior, it's specifically loading *scripts* with it. Bah, reading comprehension fail.

Dr. Mike Reddy

2011-09-20 04:41:11
This is excellent. I would like to use this in an educational game project. Details at caldys2.net.newport.ac.uk and caldys2.eu or please email me if you want further details:

mikeDOTreddyATnewportDOTacDOTuk

I think it unlikely that we will exceed 350 requests per hour, as the script will be called in game editor, rather than in game (unless players put in words that the software doesn't recognise) but if this does get more popular I'll be in touch.

Dr. Mike Reddy

2011-09-20 06:17:40
Just noticed - reading through your excellent blog filled my coffee break - that the original rhyme engine post mentioned using parts of speech. Is this available in the new API? Specifically, I'd like word, part of speech, syllable no. Ideally the break down of syllables, but could probably generate this for most words u/sing com/mon syn/tax rules...

Steven Tolkin

2012-06-02 05:41:42
Either the server code or the data structures for the rhyming dictionary have a flaw or bug. On June 2, 2012 5:40 ET

I input "fact" and the output (for exact rhymes) was just impact

I input "tact" and the output was: fact and impact

I input "impact" and the output was just: fact

Steven Tolkin

2012-06-02 05:48:33
Following up on my previous comment. there is really a problem.

lacked and hacked produce output fact and impact

pact produces fact and impact

But lacked hacked pact tact etc. are never seen in the output, not even in the near rhymes or slant rhymes.

The rhyming functionary is symmetrical, if a rhymes with b then b rhymes with a. But this code + data does not meet that requirement.

P.S. I am only posting because your blog is otherwise excellent & I thought you might want the feedback on your hobby project.

Email
steve.hanov@gmail.com

Other posts by Steve

Yes, You Absolutely Might Possibly Need an EIN to Sell Software to the US How Asana Breaks the Rules About Per-Seat Pricing 5 Ways PowToon Made Me Want to Buy Their Software How I run my business selling software to Americans 0, 1, Many, a Zillion Give your Commodore 64 new life with an SD card reader 20 lines of code that will beat A/B testing every time [comic] Appreciation of xkcd comics vs. technical ability VP trees: A data structure for finding stuff fast Why you should go to the Business of Software Conference Next Year Four ways of handling asynchronous operations in node.js Type-checked CoffeeScript with jzbuild Zero load time file formats Finding the top K items in a list efficiently An instant rhyming dictionary for any web site Succinct Data Structures: Cramming 80,000 words into a Javascript file. Throw away the keys: Easy, Minimal Perfect Hashing Why don't web browsers do this? Fun with Colour Difference Compressing dictionaries with a DAWG Fast and Easy Levenshtein distance using a Trie The Curious Complexity of Being Turned On Cross-domain communication the HTML5 way Five essential steps to prepare for your next programming interview Minimal usable Ubuntu with one command Finding awesome developers in programming interviews Compress your JSON with automatic type extraction JZBUILD - An Easy Javascript Build System Pssst! Want to stream your videos to your iPod? "This is stupid. Your program doesn't work," my wife told me The simple and obvious way to walk through a graph Asking users for steps to reproduce bugs, and other dumb ideas Creating portable binaries on Linux Bending over: How to sell your software to large companies Regular Expression Matching can be Ugly and Slow C++: A language for next generation web apps qb.js: An implementation of QBASIC in Javascript Zwibbler: A simple drawing program using Javascript and Canvas You don't need a project/solution to use the VC++ debugger Boring Date (comic) barcamp (comic) How IE <canvas> tag emulation works I didn't know you could mix and match (comic) Sign here (comic) It's a dirty job... (comic) The PenIsland Problem: Text-to-speech for domain names Pitching to VCs #2 (comic) Building a better rhyming dictionary Does Android team with eccentric geeks? (comic) Comment spam defeated at last Pitching to VCs (comic) How QBASIC almost got me killed Blame the extensions (comic) How to run a linux based home web server Microsoft's generosity knows no end for a year (comic) Using the Acer Aspire One as a web server When programmers design web sites (comic) Finding great ideas for your startup Game Theory, Salary Negotiation, and Programmers Coding tips they don't teach you in school When a reporter mangles your elevator pitch Test Driven Development without Tears Drawing Graphs with Physics Free up disk space in Ubuntu Keeping Abreast of Pornographic Research in Computer Science Exploiting perceptual colour difference for edge detection Experiment: Deleting a post from the Internet Is 2009 the year of Linux malware? Email Etiquette How a programmer reads your resume (comic) How wide should you make your web page? Usability Nightmare: Xfce Settings Manager cairo blur image surface Automatically remove wordiness from your writing Why Perforce is more scalable than Git Optimizing Ubuntu to run from a USB key or SD card UMA Questions Answered Make Windows XP look like Ubuntu, with Spinning Cube Effect See sound without drugs Standby Preventer Stock Picking using Python Spoke.com scam Stackoverflow.com Copy a cairo surface to the windows clipboard Simulating freehand drawing with Cairo Free, Raw Stock Data Installing Ubuntu on the Via Artigo Why are all my lines fuzzy in cairo? A simple command line calculator Tool for Creating UML Sequence Diagrams Exploring sound with Wavelets UMA and free long distance UMA's dirty secrets Installing the Latest Debian on an Ancient Laptop Dissecting Adsense HTML/ Javascript/ CSS Pretty Printer Web Comic Aggregator Experiments in making money online How much cash do celebrities make? Draw waveforms and hear them Cell Phones on Airplanes Detecting C++ memory leaks What does your phone number spell? A Rhyming Engine Rules for Effective C++ Cell Phone Secrets