Support materials for Drexel CS338 UI programming class.
- class_slides - slides used during class
- v1 - example from Monday class
- v4 - project from Wednesday class
- v5 - basis for assignment (a more developed version of the Wednesday project)
- v6 - basis for assignment with guidelines of where to work in comments
- "State" and "Render" - diagram and notes about keeping UI
stateseparate, and using a
rendermethod up update what the user sees
Cloning this repository
To run these projects locally, first you'll need to clone this git repository to your local computer. For instructions on how to clone a git repository, check out Github: https://help.github.com/articles/fetching-a-remote/#clone. As an example, I have a folder on my laptop called
/home/krobinson/github. I'll open a terminal window,
cd to that folder, and then run
git clone email@example.com:kevinrobinson/drexel-ui-programming.git. That will clone the repository from GitHub and put in in the
If you're unfamiliar with using the terminal and command line, check this article out to help you get started.
Running the projects in this repository
Once you've cloned the repository, you'll also need to install node.js to run the minimal server on your local computer.
After that, you have everything you set up that you need to get started. Open a terminal window in the folder where you cloned the repository. And then
cd into the folder you want to work with, e.g.,
From here, use these commands to get the project running:
Now you're all ready to work! Open
http://localhost:3055/index.html in a web browser to see the project. Note that the port number may be different for each project, check the port number that server output when you started it up.
If you're using Windows, and
npm run-script build fails with an error message like this:
`node_modules` is not recognized as an internal or external command.
This should get you going:
# Install the `watchify` package globally into your node.js setup $ npm install -g watchify # Use the globally installed `watchify` instead of the local one $ npm run-script build-windows
When developing in Chrome, Web Inspector is an incredibly useful tool. See https://developer.chrome.com/devtools for more information. If you prefer Firefox or Safari, they have similar tools as well.
- Email: firstname.lastname@example.org
- Twitter: @krob
Parts of this project are adapted from the awesome work by Romain Huet (@romainhuet) for Twitter Platform demos: https://github.com/romainhuet/twitter-platform-demos