Ben Crowder

Blog: #web

14 posts :: archive

Javascript name box

In genealogy web apps, I kind of like consolidating name fields into a single textbox. Simpler is better. But then you run into the problem of distinguishing the surname from the rest of the name — because of surnames like “Gutierrez Sanchez,” you can’t just assume the surname is the last word in the string.

I’ve been thinking for a while about a clean way to deal with this (as well as giving a nice visual indication of the surname instead of just slashes), and here’s what I’ve got so far, which I’m dubbing (rather unimaginatively) the Javascript name box:

When you click on the name, it becomes editable:

How it works

Basically, you give it an input.namebox element and it creates a corresponding div tag for displaying the highlighted surname. It then flips back and forth between the input and the div, parsing the name field and changing the highlight appropriately.

Live demo

Javascript name box


About a month ago I was thinking about how I want to read more long, hard books — specifically The Brothers Karamazov. Back in college I plowed through Don Quixote in a week for my Comp Lit class (and I still think that’s slightly insane), and I read lots of other long books as well, all because I had a deadline.

Enter Bookkeeper. My coworker Chad and I have been working on it for the past couple weeks and it’s finally ready for an initial release. And we’re super excited.

What Bookkeeper is

It’s a reading goal tracker. You give it a book, the number of pages in the book, a start date, and a deadline, along with which days you’d like to read (since sometimes you’ll want to take weekends off or what have you), and Bookkeeper will tell you how many pages per day you have to read to hit your goal. If you miss a day, or if you read ahead, it’ll adjust that number (the red line on the chart).

Where to get it

Right now it’s just available on Github (it’s a PHP/MySQL app), and there are installation instructions in the README. It uses Google Accounts for authentication.

I’m not planning to host a public instance of it, at least not right now, but if anyone wants to do that, let me know so I can forward people to it. And of course anyone is welcome to fork the code and do whatever they want with it.

How to use it

You add books, then whenever you read, you update the page number (in the upper right). And that’s about it. The list of tabs on the left shows you your current books; the All Books tab will let you also see books you’ve finished and books you’ve hidden (for when you temporarily put a book on the back burner).

On the Account page (the link’s at the lower right) you can export your book/entry data as JSON. We figured it’d be nice to have some easy way to get your data out. (And the link doesn’t change, so you could set up a cronjob to curl the JSON weekly or something if you really want regular backups.)

The future

As we make Bookkeeper more social going forward, we’re thinking it’d be cool to build book recommendations based at least partly on reading curves. Looking at my Well of Ascension reading curve up there, you can see that it starts to go up quickly and it’s ahead of the curve, which pretty much means I really got into the book and must have liked it. That’s not a surefire method for determining which books are good and which aren’t, but we’re interested in seeing what kinds of recommendations we can get from reading data like this.

More screenshots

Ruby glosses

A while ago I came across the CSS3 Ruby spec, but it seemed to only apply to East Asian texts. Then today I ran across it again (see User Agent Man’s post) and realized it’s perfect for glossing texts.

For example, here are the first few verses of the Chapter 2 exercise in Bennett’s An Introduction to the Gothic Language:

  1. In ( in, into ) dagam ( days ) Hērōdis ( of Herod ) þiudanis ( king ) qēmun ( came (3 pl.) ) Iōsēf ( Joseph ) jah ( and, also ) Maria ( Mary ) in ( into ) Bēþlahaím ( Bethlehem ) .
  2. jah ( and, also ) jáinar ( there, yonder ) gabar ( bore (3 sg.) ) Maria ( Mary ) Iēsu ( Jesus ) .
  3. jah ( and, also ) haírdjōs ( herdsmen ) wēsun ( were (3 pl.) ) jáinar ( there, yonder ) ana ( on, upon, in ) akra ( field )

The syntax:

    in, into


    of Herod

Kind of verbose, though. If I end up using this a lot, I’ll probably write a preprocessor that lets me use abbreviated syntax — something like this:

In::(in, into) dagam::(days) Hērōdis::(of Herod)

Sidenote: I was originally using a combining macron for the macrons (U+0304), but Georgia doesn’t do the combining correctly. Times New Roman does, though. Weird. I ended up just going with the precomposed characters. Oh well.

Pedigree chart sharing

I needed a web app to share pedigree charts with my sister on the other side of the country, so I wrote one. It’s called Pedigree, and all I have to do now is fill in the chart online, save it, and send the URL to my sister.

Here’s what the pedigree looks like:

You can put anything you want in the boxes, actually, which means you can do family pedigree charts that look like this:

Or you can make a chart listing each person’s occupation, or their age at death, or whatever else you want. It’s flexible.

Pedigree is still very much a work in progress — you can only do three-generation charts for now, and all pedigree charts are public to anyone who knows the URL, you need a Google Account to sign in, and the code isn’t very beautiful — but it’s a start.

Behind the scenes

I took those table-based pedigree charts I worked on a few years ago and wrote a Python program to automatically generate them, then expanded it into a Google App Engine app yesterday.

The Pedigree code is open source and is on Github. If anyone wants to help out, feel free to tackle any of the issues posted there. (I also feel compelled to add that the chart display algorithm isn’t particularly beautiful.)

I do plan to extend it eventually to take JSON or XML input so you can automatically generate a pedigree from another program, rather than having to type it in manually. And I want to come up with a better manual input method.