This page will describe how to use the new cdig command line tool to take content from start to finish. Except where noted, all of these instructions apply equally to cd-module and SVGA.

Quick Reference

cd into your project folder before you do any of the following.

cdig new Create a new project in the current (empty) folder. cdig run Preview the project in the browser, and auto-update on the fly. cdig deploy Upload the project to LBS. cdig clean Delete all system/generated files and folders.

cdig help View all available commands.

Start a New Project

Make a new folder that will hold the project files.

• This folder should not be in Dropbox (yet).
• The folder name must be written as lowercase-with-dashes. Letters, numbers, and dashes only, please.
• The folder name will be used by automated systems to figure out information about this project. The name must be unique across all of LunchBox Sessions.
  • Exception: If this project is an SVGA that will only be used inside a cd-module, then the name only needs to be unique among the SVGAs in that module.

Open terminal, and then cd into the new folder. Run the cdig new command, and follow the prompts. When the setup process concludes, the terminal will read ✨Done in 30s (or something to that effect — it'll take longer if your internet is brown).

Work on an Existing Project

If you're not already there, pull your project folder out of Dropbox, and cd into it.

Run the cdig run command. You'll get an auto-updating preview build, just as you'd expect. When you want to stop the terminal process, type control-c.

Troubleshooting

• If your browser says Cannot GET / or something similar, just refresh the browser.
• If the content doesn't launch as expected, take a look at the Terminal for obvious errors.
  • Did you cd to the wrong folder?
  • If you see a weird error that makes no sense, run cdig clean, then run cdig run again.
  • If you'd like his help, please send Ivan the entire contents of the Terminal window.
• If the browser doesn't seem to be pulling in the changes you make, keep the Chrome dev tools open while you work, and in the "Network" tab make sure Disable cache is checked.

Deploy for Testing & Review

If you're not already there, pull your project folder out of Dropbox, and cd into it.

Run the cdig deploy command. Your project will be compiled, uploaded, and registered with the LBS site. When the process is done, a browser window will open, showing you the LBS Artifact that represents this version of your project.

Final Deploy

Before You Deploy

1. Aggressively optimize your images and videos. Check the size of your public folder:

   • cd-module: 8mb is the max.
   • SVGA: 800kb is the max.

2. Test your project on the office iPad in portrait orientation. Make sure your cd-maps look good and your SVGAs maintain at least 2 FPS.

3. If you've written any custom CSS or JS, test it in all supported browsers.

Final Deploy Steps

If you're not already there, cd into your project folder.

Run cdig deploy.

• If this is a new project: When the LBS Artifact page opens, send Ivan a slack message with a link to your new artifact. He will make a thumbnail image and publish the material.

• If this is an update to an existing project: When the LBS Artifact page opens, use the buttons on the Artifact page to update Materials, Leafs, and auto-embedding as needed.

Done

If you're not already there, cd into your project folder.

Run the cdig clean command. All the auto-generated / system files will be deleted from your project, leaving you with just the stuff that you created (source, resources, etc).

Move the project folder to the Dropbox.

• cd-module: /CDIG Projects/LunchBox Sessions/cd-module/
• SVGA: /CDIG Projects/LunchBox Sessions/SVGA/

Please, do not keep a copy of your finished project outside of Dropbox. Also, do not put unfinished projects in Dropbox. Any developer may make changes to the content in the Dropbox at any time, without telling you! Additionally, automated systems will be bulk updating, deploying, & publishing content stored in the Dropbox whenever new versions of the content systems are created.

If your content contains any new and cool art assets, make sure to add them to Hyperzine. Also, you may upload reusable SVGA components to Hyperzine. Include the FLA, CoffeeScript, and a screenshot. Name the component "My Thing - Library" with Library at the end so we can easily search. Tag with "CoffeeScript" and "SVG Animation" plus any other appropriate tags.

Update Quizzer

Review the quizzer quiz for this session. Add some questions to include any new material, and remove or update any questions if they are incorrect.