static.andreasherten.de

Series Categorizer 2016

Welcome to my Series Categorizer 2016!

Last year I made a small JavaScript tool to manage my yearly TV show review, the Series Categorizer. This is the 2016 version. All shiny!

Apart from even more cluttered source code, this version features jQuery UI to enable a bit of interactivity.

• The sliders for placing shows on the map are gone. Instead, every show is draggable. Try it out!
• If you’d rather use your keyboard, that’s possible now as well. The following keystrokes are supported:
  • Arrow keys for moving a selected show. Holding shift (⇧) will move in larger increments.
  • +/- for increasing / decreasing the font size. You might need to use the num pad’s +/- keys, or ⌥+ and ⌥- on Mac.
  • Apparently, Meta+Up/Meta+Down (⌘+Up, ⌘+Down) moves through the side list of shows; I did not program this, but it works for my Chrome version…
  • Meta+i (⌘+i) will focus on the New Show field, in which you can hit enter to create a new show.
  • You see the ? in the upper right corner of the website? All keystrokes are summarized there. You could also hit ? on your keyboard to show it.
• Also, the height of the map can now be adjusted by dragging it on the lower border.
• Local Storage is used to save information instead of cookies (if available). This offers saving many more shows, since cookies are usually limited in size. Also, URLs are now additionally compressed with lz-string.js (yes, one additional library…).

All the rest has pretty much stayed the same. If you find a bug, which totally can be there because of the new features, just drop me a message.

Here, a small run-up of the features!

• Select the height of the your image by moving the lower border of the box. Do you want a purgatory? Click the checkmark! I use the purgatory for shows which I find silly, but watch anyway. I also call it the Big Bang Category.
• New shows can be added by means of the New Show field. Enter a name and click »Create Show«. Do you plan to write a few words for this show later on in some blog post (in which you are going to insert the eventual code of your diagram)? Then hit the »Create a Link?« checkbox right before »Create Show«. Otherwise, leave it empty.
• Add a few shows and place them on the map by dragging them around (or using the arrow keys – see ? on top right corner). It’s not always easy to sort them into one of the three categories; but I came to the conclusion that those three are the ones with the least number of problems in categorizing…
• The more to the top your show is positioned, the more weight you want to give to it. Increase the font size! Select the show in the side list on the right and fill the Font Size field accordingly. The units are em. You can also use + and - to increase or decrease the font size (respectively).
• You can always come back to one show and select it in the side list on the right. When the show is selected, you can move it, change its font size, or rename it. Deleting is currently not supported.
• You’re done for the day? Save your status with Cookies: Save. Attention: This will overwrite all previous savings. Once you come back to finish your work, hit the Cookies: Load button. No information is saved on the server, everything is kept in your browser.
• You want to send your picture to someone else? Generate a URL for it. This will encode all relevant information into the URL to the side, which could be lengthy, depending on the number of shows you created, even though it is somewhat compressed a bit. Once you send the link to someone else, the information will be parsed automatically from the URL. You notice that the administration console is hidden. This is the viewer-centric version of the page. Hit Show Admin Console to come back to the editor-centric version. A shortened URL can be generated by hitting Shorten.
• Finally, if you want to get the raw HTML code for your diagram, hit HTML Code for Box: Display. This will popup an overlay to show what you’ve just created.

Have fun using the Series Categorizer 2016 – and tell me what you think of it.