I created a bookmarklet which enables pressing Shift to insert pencil marks on sudoku.com.

Want to use the bookmarklet?

• Drag this link into your bookmark bar
  • Sudoku.com keyboard shortcuts

Or

• Make a new bookmark in your browser (right-click on the bookmarks bar and click Add Page...)
• Set the "Name" to something like "Sudoku.com keyboard shortcuts"
• Paste the following codeblock into the "Location" of the bookmark

javascript:(function()%7Bdocument.addEventListener(%22keydown%22%2C%20(e)%20%3D%3E%20%7Bif%20(event.key%20%3D%3D%3D%20%22Shift%22)%20%7Bdocument.querySelector(%22div.game-controls-item.game-controls-pencil%22).click()%3B%7D%7D)%3Bdocument.addEventListener(%22keyup%22%2C%20(e)%20%3D%3E%20%7Bif%20(event.key%20%3D%3D%3D%20%22Shift%22)%20%7Bdocument.querySelector(%22div.game-controls-item.game-controls-pencil%22).click()%3B%7D%7D)%7D)()

Why

In the midst of the 2020 pandemic I was very entertained for a couple of weeks watching the cracking the cryptic youtube channel solve sudoku puzzles. The channel uses a couple of basic techniques to solve some pretty challenging problems, most notably Snyder notation.

The basis of Snyder notation is that you pencil mark a number in a cell when there are two possible locations for the number in the cell's block. (Check out this cracking the cryptic video for a visual explanation)

In the cracking the cryptic videos, the authors use a self made app to solve their puzzles. Part of the allure of watching the authors solve sudoku puzzles is the clear speed and expertise the authors have using their app. They are able to solve the sudoku puzzles at the speed of thought. It is very clear that they are using keyboard shortcuts.

Although the cracking the cryptic app is quite good it is only available for puzzles shared on the cracking the cryptic Youtube channel. Like a couple other people I found it pretty frustrating that there were so few apps which support keyboard shortcuts for pencil marks.

How

I built a bookmarklet for Sudoku.com which clicks on the pencil mark button when you press the shift key.

The code is pretty straightforward and I've added an annotated version below.

// if the bookmarklet hasn't been run
if (window._sudoku_bookmarklet !== true) {
  // when user presses shift click the pencil mark
  document.addEventListener("keydown", (e) => {
    if (event.key === "Shift") {
      document
        .querySelector("div.game-controls-item.game-controls-pencil")
        .click();
    }
  });

  // when user release shift click the pencil mark
  document.addEventListener("keyup", (e) => {
    if (event.key === "Shift") {
      document
        .querySelector("div.game-controls-item.game-controls-pencil")
        .click();
    }
  });
}

// mark that the bookmarklet has been run
window._sudoku_bookmarklet = true;

What's the point

It's cool that the browser is relatively hackable by end users. I found an issue with an application on the internet and I aded a feature in just a couple of lines of code.

Unfortunately most of these solutions suffer from usability issues. For many people dragging a bookmarklet and clicking it is already too complex. Not because it is a complicated thing to do per se, but because it does not fit into their mental model of how browsers work. For people who do drag the bookmarklet into their menu bar it is easy to forget the bookmarklet exists, and clicking a bookmarklet for every feature you want to add to a website isn't really a nice experience.

Tools like tampermonkey and greasemonkey are interesting because they can run when a page loads but they are even more complicated than dragging a bookmarklet to the bookmark bar.

Want More?

If you really truly enjoy bookmarklets and keyboard shortcuts check out sudoku exchange which has a set of bookmarklets for importing puzzles from other apps and has a bunch of nice keyboard shortcuts.