Tracery Tips

This posts echoes what I sent out in email this morning:

  • I’ll be in the library from 4-5:30 on Saturday 9/9 to answer Tracery questions, brainstorm ideas, or troubleshoot problems. Drop by if you want help! Look for me on the main floor, somewhere near the circulation desk.
  • I created another set of template files for you to work with. The original set available for download from the assignment page was the giant Tracery grammar for Don’t Drink the Water. It can be overwhelming to sort through what’s going on there. So I created a simpler grammar. Links to both sets of templates are on the assignment page now.
  • While we played with editing Tracery grammars in the online Visual Editor in class on Wednesday, I didn’t explain how to edit files in the downloadable template set. So, here’s what you do:
  1. Download either set of template files (probably start with the simple grammar).
  2. Unzip the download file onto your desktop or some other folder on your computer.
  3. Test the downloaded Tracery project by opening up the index.html template file in a web browser like Chrome. In Windows, use Control-O to open a file from Chrome. In Mac, use Command-O while in Chrome.
  4. The project should open up and generate text. Press the link to regenerate new text.
  5. To actually edit the underlying Tracery grammar, open up grammar.js in a text editor like Brackets or Atom.
  6. Make a few changes in the grammar and save the file. (Be sure to keep your commas, brackets, and quotation marks in the right places!)
  7. Switch back to Chrome and reload the index.html with Control-R (Windows) or Command-R (Chrome). You should see your changes take effect.
  8. If your changes don’t show up after a couple rolls, make sure you actually saved the edited grammar.js file and truly reloaded it in the browser.
  9. If the page is entirely blank in your browser, then there’s an error in your grammar.json file! Go back and make sure all your commas and so on are in place.
  10. In addition to editing the grammar.js file, you should edit the index.html file (using the same text editor) and update it to reflect your own project’s needs. You can also edit the style.css file (in the same text editor) in order to change fonts, font sizes, colors, and other visual elements of the page.