If you publish projects to Github, then you probably are using a gh-pages branch to create a nice home for your project with a demo and some documentation (e.g. like this). Read all about Github Pages at pages.github.com

A common pattern is to keep the gh-pages and master branches in sync with each other — whatever code is in master is the same as your project page (gh-pages). You can read about different ways to do this on Oli Studholme’s excellent article GitHub Pages Workflow and deleting git’s master branch.

I myself favor Lea Verou’s simple approach detailed here. Something along the lines of this:

git add -A .
git commit -m 'Your commit message'
git push origin gh-pages
git checkout master
git rebase gh-pages
git push origin master
git checkout gh-pages

How about we do that in one line? The secret to this will be setting up a Git Alias in our .gitconfig file. I have written about Git Aliases before (see here). If you aren’t already using them to speed up your workflow, then I encourage you to start now. Read about Git Aliases at Git How To

Open up your .gitconfig file (located in your $HOME directory). We will be adding two aliases. The first will be an alias to commit all changes to the current branch (aacm = add all . -git commit –m). Next will be an alias to push the commit to master and then to gh-pages (pomg = push origin master and gh-pages)).

[alias]
aacm = !git add -A . && git commit -m
pomg = !git push origin gh-pages && git checkout master && git pull origin master && git rebase gh-pages && git push origin master && git checkout gh-pages

Now, when you are on the master branch and you want to sync it to master, simply run:

git pomg

Or, you can combine a commit with the push and sync by running:

git aacm 'Your commit message' && git pomg

Hope that helps your workflows! For more tips on Git Aliases, check out these resources:

• Streamline your git workflow with aliases
• Must Have Git Aliases: Advanced Examples
• .gitconfig by Mathias Bynens
• My .gitconfig

Seems like every front end web dev eventually publishes a manifesto about their approach to CSS. So here is mine: Expressive CSS

(Shout out to Cole Peters for his Building and Shipping Functional CSS article which offers a similar take and inspired me to finish and publish my project)

One thing I tried that was different for my workflow on projects was to use NPM as my build tool. It always bugged me to have Bower and NPM in my projects when they do very similar things. NPM seems to be the more popular one and it can also somewhat replace Gulp/Grunt as a build tool.

My front end build tool needs for Expressive CSS were pretty basic. I needed to first process the .scss files into unminified CSS files for people who do not want to use SASS to be able to grab (and ignore the SASS files altogether). After that, I would need it to create the minified, source mapped CSS. Also, I added a watch command to enable automatic builds on file saves.

Thanks to node-sass CLI, I was able to configure npm to do exactly what I needed. Here are the relevant lines from package.json:

"scripts": {
    "build": "node-sass css/sass/base.scss css/stylesheets/base.css --style expanded && node-sass css/sass/utilities.scss css/stylesheets/utilities.css --style compact && node-sass css/sass/components.scss css/stylesheets/components.css --style expanded && node-sass css/sass/style.scss css/style.min.css --style compressed",
    "watch": "onchange 'css/sass/**/*' -- npm run build"
},

So, instead of grunt or gulp, we do npm run build and npm run watch.

Pretty simple, eh? For more info on using NPM as a build tool, check out these articles:

• How to Use NPM as a Build Tool
• Give Grunt the Boot! A Guide to Using npm as a Build Tool
• Introduction to Using NPM as a Build Tool

UPDATE: The talented folks at Webucator have created a video demonstration of this post:

Check out their YouTube Channel for lots of great training videos.

I’ve started some work on a new fun little (secret for now) side project with the GreenSock Animation Platform. As part of that, I had some fun making this Emoji Bank Robbery Animation on Codepen.

See the Pen Emoji Bank Robbery Animation by John Polacek (@johnpolacek) on CodePen.

Update: I made the front page of Popular on Codepen – very cool!

Simple Grid is the responsive grid system I am using on all of my websites these days. View it on Github.

3 years ago I published Extra Strength Responsive Grids, a grid similar to the one in Bootstrap (although we did release ESRG first). My use of the grid has evolved to the point where I wanted to open source this newer, better version.

Simple Grid is similar in function Bootstrap’s grid. The main difference is the inclusion of padding helper classes. Rather than filling up stylesheets with lots of padding declarations, I use these combined with grid classes to handle almost all the spatial arrangements of web pages.

The padding classes also eliminate the need to have .row as a class. With simple grid, you use a .grid-12 with an appropriate padding class applied to it instead of .row.

When I built the ESRG project, the demo page was themed in a humorous way to feel like a sales site for a pain reliever drug. For the Simple Grid demo page, I ditched the silliness and kept it simple and utilitarian. It is probably the smallest stylesheet for a project page that I’ve ever made, just the grid and some CSS to expose the underlying grid scaffolding. No webfonts, colors, images, or styling flourishes, just the business.

Additionally, I have a separate project for the Simple Grid Generator, a SASS mixin that I used to output the Simple Grid CSS. It comes with some different options to customize your own grids, and can also be useful to anyone who wants to see how to make their own SASS grid generator.

For the past 2 years, I have been curating a list of Chicago web, tech and startup events at chicagotechevents.com. It has been great to see the number of events, meetup groups and resources continue to grow as Chicago is coming into its own as the tech hub of the midwest.

I have just updated the site with information about the Chicago Tech Scene. Go to chicagotechevents.com/chicago to find information on resources, conferences, meetup groups, coworking spaces, investment firms and more.

To keep up on what’s happening in Chicago tech, you can also subscribe to the Chicago Tech Events Newsletter and follow @chicagotechevnt

Over the last month, I’ve been working on a secret project, to help rebrand my company and launch our new website. I’m thrilled to say that I now work at Gesture, and we make hope happen.

When I left my job at a big global corporation occupying a dozen floors in a high rise office building on Chicago’s Magnificent Mile to work at a startup in the suburbs called AuctionsByCellular, I wonder how many people thought I was maybe a little crazy.

What those people did not know is what I found when I first visited their small office space that they had just moved into (its previous tenant was a chiropractor). What did I find? An opportunity to be part of something amazing. This small team of smart and motivated individuals was onto something big and I wanted to be part of it while it was small.

So, I became full time developer hire #1. I went from working with 700 people in the middle of the city to sharing an office room with our CTO and a talented part-time UX/Front End developer who worked half days. There was so much that needed to be done. Have you ever felt like you were in exactly the right place at the right time? It was like every skill and piece of knowledge I had gained over my career were going to be useful in helping this amazing new team I found to make our vision of what this company could do into reality.

Coming up on two years later, I still feel that way. One thing has changed though, this startup that I joined is coming into its own. We are a bigger company, operating in more places, offering more products and services and helping more charities than ever. That’s the amazing thing. I get to do what I love (design and build web technology) in service of helping people help other people.

Big thanks to Listen for their help on branding and identity and Eight Bit Studios for their help with designing the website.

I cannot wait to see what happens next. Check us out at Gesture.com

Github projects aren’t just frameworks, libs and plugins. There is some funny in there too. Here are some github projects that will make you laugh.

Know of any good ones that I missed? Tweet me at @johnpolacek

The Useless Web
Take me to another useless website please. The useless web is a single button, which opens new links to an array of strange and odd websites. View it at theuselessweb.com

Github Project: github.com/tholman/the-useless-web
By Tim Holman (@twholman)

fartscroll.js
Everyone farts. And now your web pages can too. View it at theonion.github.io/fartscroll.js

Github Project: github.com/theonion/fartscroll.js
By The Onion (@TheOnion)