Managing project pages in github.io

xyz.github.io is a great place to host personal coding projects. To manage the source and dist and to avoid switching between master and gh-pages branch the following workflow seems to work well:

Lets say the project folder is photography which should be available in jdutta.github.io/photography.

• Local folder photography is the clone of photography repo.
• Local folder gh-pages/photography is the clone of same repo, but with only gh-pages branch. The master branch is removed.
• Make source changes in photography, like adding/changing slides, then grunt dist to generate static content in photography/dist.
• Do an rsync to copy the changed static files. rsync -avz dist/ ../gh-pages/photography/.
• Go to gh-pages/photography to commit the changes and push to github.
• http://jdutta.github.io/photography will have new content.

Craigslist multi-site search tool using AngularJS

I didn’t think I would come back to riding a motorcycle just yet. But the inevitable happened. Wife wanted me to rent a motorcycle for a weeklong trip. The rental cost didn’t seem cheap enough, so I started a casual search of used models in craigslist. Soon it became a headache because I could use the same query in multiple CL sites and I actually wanted to buy it from far so we could have a fly-and-ride adventure.

I ended up making a quick AngularJS app to use the same query in multiple CL sites and show them together.

http://jdutta.github.io/cls

I hope this will prove useful to many.

Photography portfolio using reveal.js

More than 6 years ago I created my first photoblog by handcrafting html pages that scrolled horizontally. It was a popular way to showcase photos in a category. Years later the pixelpost platform became the next hot thing for photographers as “photoblogging” became a trend. My good friend Francesco inspired me to move on to pixelpost, then learn jQuery to tweak the site to my fancy. I was happy with it for a few years and then figured it would be worth moving to wordpress with a decent theme, and avoid manual deployments. I took the migration as an excuse to refine my earlier set of images, culling out the older ones that I no longer wanted to show in the portfolio. But the manual update process on the wordpress site is slow. Besides, I started missing the ability to locally preview changes instead of changing directly in production. The desire to mess with a local php/mysql setup no longer exists.

Of late, creating static sites powered by tools like jekyll among others have become very popular. A developer of today can now edit posts/pages in markdown or another favorite format, locally preview changes, generate the static html files and push to github to make them live at once in github pages. In my view there is no better way to showcase projects.

Although I considered jekyll to power my photoblog, the simplicity and interactivity of revealjs made it a no-brainer choice. The yeoman generator for revealjs is very useful as it lets me create separate slide files and change their order in a json list.

Experimented with IMG tag vs background images to showcase large images. I prefer background image but then I had to override this style so that the whole image is visible all the time:

.reveal .slide-background {
    background-size: contain;
}

Note: The photo portfolio is not final/official yet.

Weekend of jekyll, gist and d3

For some time the jekyll project drew my attention. Had the chance to really check it out today. After figuring out exactly what it is for, it was very exciting to set up for jdutta.github.io. I use wordpress for my personal blog, which is probably fine for its purpose, but I have been leaning towards a tech blog which could be updated by pushing to git. So far a clean solution seems to be github pages powered by jekyll. For the theme, I chose Zack Holman’s Left.

I also set up my a new repository d3viz to develop and play with custom d3 visualizations. Given the choices, deciding where to host the demo pages is always a headache. One option is to use a github page for the d3viz repository, but then it would mean copying code from master branch to the orphan gh-pages branch. I was almost going that way when I found what Mike Bostock’s bl.ocks.org offers. It is a convenient mechanism to host an index.html, complete with code highlighting, by putting it in a gist in github. For example, https://gist.github.com/jdutta/9458987 becomes live on http://bl.ocks.org/jdutta/9458987, just like magic.

The demo links are available in the d3viz wiki.