This site features its very own bespoke artisanal small-batch friendly crossword-solving interface. It’s been lovingly cobbled together by me, using the finest HTML/CSS/JavaScript that little experience and a dogged attitude to searching StackOverflow can buy. I thought here I’d explain a little more about how it works.
The Grid
The crossword grids themselves are made out of nothing more complicated that HTML tables. Each cell has a one-character text input box in it, and any combination of a black background, thick bar borders and a div with a little number in the corner as required.
The Puzzle
The grid layout, clues, title, preamble etc for each puzzle is stored in a JSON file. When the page is loaded or you click for a new puzzle, something I don’t fully understand called an XMLHttpRequest happens to pull the data in, and the grid and clues are populated on the page. I make the puzzles mostly in Crossword Compiler, but QXW has much easier-to-read salve files, so I make the grid in QXW too and a little script I wrote (in R, for some reason) converts it into the JSON format I use.
Solving
There’s a perhaps surprising number of things you probably want a crossword-solving interface to do. If you click a clue, you probably want its space in the grid to be selected, ready for you to start typing the answer – easy enough. Once you’ve typed the answer maybe you want the next clue to be selected. Maybe you also want to be able to tab to the next clue. Probably you want to be able to select a square in the grid and have a sensible clue be selected. Which clue is that? Well, if you’ve got a clue selected already I guess you just want to jump to a different bit of that clue (maybe you’ve worked out what the answer ends with). But if you select the square that’s already selected, it makes more sense you want to switch to the other clue that squares in – if there is one. If you select a fresh square that’s part of two clues, which are you after? If it’s the first square of one of the clues, probably that one. If it’s the first square of neither or both, try the across clue first? Across clues seem like the default position somehow: they’re first in the clue list, anyway. As far as I can see these behaviours are universal across various crosswording sites, and they’ve been painstakingly implemented here too.
One feature that’s available as an option on some sites (I don’t think anywhere is foolish enough to make it mandatory) is skip filled squares. This ‘useful’ feature is for when you’ve solved some of the crossing clues already. Say you’ve got I_I_T_C in the grid already. Who wants to waste keystrokes typing out an actual word that you’ve got in your head already, when you can squint at the screen for a minute and just press D O I? This option is for bad people and has not been implemented here.
Other Gubbins
Over time I’ve added in some requested1 features. You can save progress in puzzles: originally this was via save and load buttons that wrote to and read from your browser’s local storage, now you can sign in with a Google account and progress is saved automatically and can sync across your devices. One of the reasons I thought it would be good to program my own solver was so I could add embellishments like grid highlighting for the more complicated puzzles, and I’ve done this, though actually I’ve not written many crosswords that utilise any.
Mobile-friendly
In the old days when this site was just a Blogger showing crosswords hosted in my Dropbox inside iframes, mobile solving was not going to work2. But on a dedicated site and with some amateur CSS shenanigans, the site works pretty well on a phone. Largely modelled on The Guardian‘s rather nice mobile site crosswords, the clue list appears below the grid in one long column, but the selected clue appears at the top, so you can solve the puzzle without ever really needing to scroll down there.
Powered By
The site is hosted using Google’s Firebase. I think it’s really designed for people who are making phone apps, but they’ll happily host non-fancy websites too. It has the principal advantage of being free as long as the site doesn’t get more traffic than could plausibly be an issue. And they offer a bit of database storage and a user authentication system that even I could understand that runs the saving system. After blindly muddling my way through setup, I now have a folder on my computer which I can browse to in Command Prompt and type firebase deploy, and some strange magic puts that folder on the internet as an actual website.
This blog bit is made using Hexo, which converts a bunch of Markdown files into a nice blog.