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.
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
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.
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.
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
Everyone farts. And now your web pages can too. View it at theonion.github.io/fartscroll.js
What The Commit
An amusing random commit message generator. View it at whatthecommit.com
A Bootstrap to make webpages look like they are from the 1980s. View it at kristopolous.github.io/BOOTSTRA.386
Passwords for the Manly Man
Generating passwords so strong and secure they strike fear into the heart of darkness. View it at dfcb.github.io/manly-man-passwords
Joel Glovier’s GIF Collection. View it at gifs.joelglovier.com
A programming language based on the one liners of Arnold Schwarzenegger. View it at lhartikk.github.io/ArnoldC
A library to overcomplicate 5. View it at jackdcrawford.github.io/five
Programmer Collective Nouns
An Enumerable of Rubyists, An Indentation of Pythonistas, A fold of Haskellers, etc… View more at https://gist.github.com/mariusGundersen/6925246
Github Gist by Marius Gundersen (@gundersenmarius)
HTML9 Responsive Boilerstrap JS
H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds. View it at html9responsiveboilerstrapjs.com
Github Project: github.com/impressivewebs/HTML9-Responsive-Boilerstrap-js
By Louis Lazaris (@ImpressiveWebs)
A programming language of semicolons. View it at pksunkara.com/semicolon
The project where literally* anything goes. View it at illacceptanything.github.io
Want to work with your kids to make your own custom version? All the files you need are on Github.
A couple years later, he asked me to teach him to make a game. I told him he’d need to know how to code and to do that, he needed to learn to read.
Fast forward to 1st grade, and he reads pretty well. The day before Thanksgiving, I was working at home (because my job is cool like that) and Jack brought it up again.
We’ve made some progress and I want to share it out with my fellow devs who might want to do the same thing with their kids. Play it here and check out the project on Github. Shoot, all you have to do is replace the png graphics with your kid’s own drawings and you will be all set. If you don’t want to make a car game, check out the Phaser Framework for building browser games and you can probably find an example or tutorial for the game your kid wants to make.
The look on my son’s face when he could play the game he thought of, using his own hand drawn graphics, was UNBELIEVABLE! It is so much fun!
Jack is providing all the drawings and direction on the game design. I just do what he tells me, while trying to teach him what it takes to implement his vision along the way. We even have his 2-year-old brother in on the action, play-testing on his own tablet.
Big thanks to Photon Storm, the folks behind the Phaser HTML5 Mobile and Desktop game framework without whom this would not be possible. And super big thanks to Markus T who published a fantastic tutorial that gave me a huge jumpstart and is responsible for most of the code that is behind the game thus far.
I will keep working on it as long as he stays interested. No promises on how far we will get, but so far it is a blast!
My notes from Jack’s description of what he wanted his game to be (verbatim)
- You can decorate it
- Drive around farmyard
- Press a button to make it go
- Only go straight.
- The car is named Syndro
- Hot lava
- Parachutes if the car explodes
- Other cars that are damaged
- You can click on a building to park on it
- Find stuff thats moving then unlock them in your farmyard
- people walking by
When we finished the intro screen, Jack asked me “Are we finished??”
I told him we were done with the first step. He asked how many steps there were. I said about a thousand. He was unfazed by this and excited to start the next step. Here are the steps we have so far:
- Step 1 – Intro Screen (Jack picked the font)
- Step 2 – Draw the car
- Step 3 – Animate the car
- Step 4 – Pick a Physics Engine – Phaser
- Step 5 – Create game page with hello world example
- Step 6 – Find car game example to use (found this great tutorial!
Worked on animating the car and separating it into pieces in Photoshop.
- Step 7 – Bring Jack’s car drawing into the game
- Step 8 – Jack draw preview and control buttons
- Step 9 – Add preview button to intro screen
- Step 10 – Add button controls for touch devices
- Step 11 – Publish open source for testing and sharing
- Step 12 – Jack and Grant (little bro) test on mobile devices
- Step 13 – Jack draw more game elements
- Step 14 – Draw home screen icon
- Step 15 – Open source on Github
Git aliases have been around for a long time, but in case you don’t know about them, they allow you to create shortcuts for just about any git command or sequence of commands that you can think of. Beyond just the convenience of less key presses, you can use to streamline your workflow by sequencing longer sets of commands that are hard to remember. Here is a nice intro article on Git aliases: Streamline your git workflow with aliases.
Wouldn’t it be fun if today was Share Your Git Aliases Day? Taking a look at other people’s .gitconfig files can give you an insight into how they work and give you ideas for improving your own workflow. For example, check out Must Have Git Aliases: Advanced Examples. Mathias has a really popular .gitconfig in his dotfiles collection that has almost 10K Github stars: https://github.com/mathiasbynens/dotfiles/blob/master/.gitconfig.
It has now been a full year since I left the agency and client services world to join a startup. Going from a large multinational company that was part of an even larger global holding corporation to a business with about 20 full time employees was a big change.
Right away, the team at ABC made me feel at home, declaring my first day “Johnny Day” and having a party. (being the 1st full-time developer hire has its perks!)
I haven’t had time to do much open source in the last year. When you’re at an agency, demonstrating creative coding is part of the gig. As part of a rapidly scaling startup, our team is spending every minute we can developing features that our customers need and help the business grow.
One concern I had about leaving an agency was that I really enjoyed constantly getting to work on different projects. Joining a tech company where I’d be developing the same product every day felt like it might get stale.
I’m happy to say that is not the case at all! I feel more challenged than ever. On any given week, there are charity events all over the country that depend on the software we are building. It is pretty amazing knowing the code we write is helping them bring in more money for their causes, which makes me want to work even harder.
Over the last year, I’ve been working on lots of cool things, many of which I unfortunately can’t talk about yet. Some of my ABC highlights are:
- Launched the responsive redesign of the company website AuctionsByCellular.com
- Started analytics tracking across our properties to better understand how our mobile bidding product is performing used by our clients and how customers find out about us.
- Launched a new version of our silent auction technology platform.
- Implemented our git continuous integration workflow.
- Took a deep dive into TDD, Selenium, Eclipse, Java and AWS.
- Came up with a simple way of implementing data binding events with jQuery (need to write up a blog post on that one!)
- Implemented Websockets on production – all item prices and bidding activity on our auction sites is updated instantly on people’s phones without having to refresh the page.
- Worked some really cool charity events to see our stuff in action
Last, and most important, is the team. Not only are the people at ABC a lot of fun to be around, they are also great people. Many of them come from the nonprofit world, and others like me have left companies to get an opportunity to partner with charities and see firsthand how they make a difference in people’s lives. Beyond our day-to-day fundraising work, we have also been doing things like volunteering at RMHC, running a 5K to end homelessness and doing construction work for Habitat for Humanity.
So, after a full year, I can say that the honeymoon is not over yet. It is a privilege to be on board!
A common question people ask me is how I come up with open source project ideas. It is a pretty simple process:
1. Have A Problem
If you are a developer, when you are building stuff you will have to solve problems. On top of those, as a human being you will have problems every day. How can I share responsive web design examples to educate my clients? How can I make a more flexible grid system for responsive web design? How can I help my kid learn his ABC’s? Are my passwords manly enough?
The first thing most of us do is see if that problem has been solved before, and how. It may be that the problem has been solved effectively, and there is no need for you to solve it again. Many times, there are different approaches to solving the problem, but none that work quite the way you’d like. On rare occasions, you have encountered a problem that doesn’t have any good solutions yet, which can be quite exciting.
1a. Come Up With a Cool Name
This is probably the most fun part of the process, haha. Cool names are cool!
2. Solve The Problem
Get on it. Solve that problem. It could be that solving a particular problem is too large and ambitious to pull off. Either find some friends to collaborate with, or break the problem into smaller components then go after them one at a time.
3. Abstractize Your Solution
When possible, craft your solution in such a way that it can be applied more generally, for people who encounter the same problem.
Throw it on Github, of course, but if you want your project to stand out, go the extra mile. Make a great demo page to showcase your project with some clear, easy-to-follow documentation.
5. Don’t Be Shy
The more you projects you publish, the more ideas you will have. I recommend maintaining a list of your project ideas on Google Drive or Trello.
I’ve put Google Analytics on some of my Github project pages, but hardly ever look at it. Well, today I decided to take a look at a year’s worth of traffic, and I am absolutely blown away.
In one year, there were 743,557 unique visitors to my various open source projects. SuperScrollorama was the most popular with 487,475 pageviews. Unbelievable! And I noticed that I wasn’t even tracking Responsivator or BigVideo.js, so it was undoubtedly a lot higher, probably over a million. Amazing.