Yesterday, I attended Mozilla Toronto’s DevDerby Workshop. Mozillian Jen Fong gave an excellent introduction to HTML5 multitouch, demoing just how easy it is to get started with the help of GitHub Pages and an iPhone or Android. I came into the event not knowing how to use touch in HTML5 and left feeling pretty confident in my understanding.
The workflow she presented made it dead simple to get up-and-running:
- create a new repository on github
git clone https://github.com/username/repo
git checkout -b gh-pages
- check in an index.html
git push origin gh-pages
- wait up to 10 minutes the first time for the page to publish
- view
https://username.github.com/repo
on your mobile device
For each change:
git commit -am "made it more awesome"
git push origin gh-pages
- reloading on your mobile device
Go Local
While GitHub Pages are a great way to verify the app is working on real devices, and share with others, this method adds a lot of time to the feedback loop when developing. I prefer to find out what is working and what is not working without committing and pushing. Luckily, Mac and Unix systems have python on their side by default.
Run the following command from the repository to serve the entire directory on port 8000
python -m SimpleHTTPServer
With a server spinning, we can boot either an Android or iPhone simulator.
- On Android, you can access your machine with magic IP
10.0.2.2:8000
- On iPhone, it’s simply
localhost:8000
No need to restart the server, commit, or push. For each change:
- reload the webpage in the simulator