Building a Game With a 6-Year-Old

Free Summer HTML5 Car GameI just open sourced a game I’ve been working on with my 6-year-old son Jack over Thanksgiving weekend.

Click Here to Play

Want to work with your kids to make your own custom version? All the files you need are on Github.

A few years ago, I made a game called Match the Letter to help Jack learn his ABCs (still available for FREE on Google Play – no annoying ads either).

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.

I started asking him questions and taking notes from what he said. He likes the Blocky Roads game (available on iOS and Android) which seems to be his inspiration.

Buttons for the gameWe’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.

Tutorial - Create a car with PhaserBig 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!

Development Log

Game graphics by Jack11-26-14

My notes from Jack’s description of what he wanted his game to be (verbatim)

Car

  • You can decorate it
  • Drive around farmyard
  • Press a button to make it go
  • Only go straight.
  • The car is named Syndro

Obstacles

  • Hills
  • Hot lava
  • Ramps
  • Parachutes if the car explodes
  • Other cars that are damaged

Buildings

  • You can click on a building to park on it
  • Find stuff thats moving then unlock them in your farmyard

Scenery

  • 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.

11-27-14

  • 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

11-28-14

  • 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

11-29-14

How to Get Open Source Project Ideas and Execute Them

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.

4. Publish
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
If you release a Github project in the woods, does anyone notice it? To get your project noticed, you need to publicize it. Tweet it out and share it up. Send it off to newsletter publications (e.g. JavaScript Weekly, HTML5 Weekly, etc.) Even better, create a tutorial and try to get it published online somewhere like Codrops, Tuts+ or Smashing Magazine.

6. Repeat
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.

AWS Notes: Writing JavaScript Applications with the AWS SDK

AWS Developer Loren Segal introduced the AWS SDK for Node.js It is open source, apache-licensed and on Github. They have full service coverage across 30 services.

Install through npm, of course:
npm install aws-sdk

Configuration is easy and can be done programatically (there’s a global configuration object). Loren ran through a bunch of code snippets for how to do various things. It wasn’t long before he got into some live coding in the terminal. First up some simple S3 requests and response handling. Next, his next livecoding example demo’d response pagination for scanning large DynamoDB datasets. Then he showed request event handling, and demonstrated the AWS global events object, allowing you to do global event handling on request success response for example. Last, he went over programmatically configuring credentials, showing that you can set temporary creds that automatically expires.

Loren moved on to show off the AWS SDK for JavaScript in the Browser which is now in developer preview. This literally allows you to build web applications with static files. Some examples of things that could be easily created are forum software, blogging, commenting systems, browser extensions and mobile apps. This is freaking awesome.

He created a sample blogging application (check it out on github). The app.js script is a mere 260 lines of code.

Loren live deployed the app. It had permissions set up, so he did a social login, then created a blog post using markdown and an open source WYSIWYG editor. Did I mention this is all with static HTML/CSS/JS files?! Nice. You can see the demo at reinvent2013-blog-demo.s3.amazonaws.com/index.html.

He went over the key differences between doing traditional three-tiered architecture vs two-tier development with AWS in the browser. He did say that in order to use it with S3, you need to configure CORS settings. For other services, CORS is not necessary because the requests for them are already authenticated.

He stressed the importance of not hardcoding your credentials. They get around this by using Web Identity Federation which trades access tokens provided through other services like Facebook, Google or Amazon for AWS keys. He showed quickly how to set up a Facebook application to create IAM roles and set up permissions for users. He showed some code for working with Facebook Access Tokens.

He finished by talking about the open source community. They love to get feedback, pull requests, issue reports and third-party plugins.

Open Source For The Wins

awwwards-articleI was browsing around some web design award sites today. So much inspiring stuff out there to be found. What do all these beautiful and often amazing award-winning websites have in common? They all use open source projects from Github and elsewhere. As someone who releases open source, it is thrilling when you view the source of one of these sites and see your own code mixed in there.

So I want to thank all the people out their using my code to help them power their creations. Knowing that my projects are being used by talented people all over the world is both tremendously motivating and also a bit mind-blowing.

Here’s a list of some of the latest award-winning sites that use my open source stuff:

Sites using SuperScrollorama (and also Greensock Animation):

Ikea, Life Of One Kitchen
www.zivotjednekuchyne.cz
Won a Smashing Award and was a CSS Awards Site of the Day.

Alpina, Life is Vertical
lifeisvertical.alpina-since1883.com
Won a CSS Design Award and a Smashing Award. Also a Design Inspiration Selection.

New Škoda Octavia
www.nouvelleoctavia.fr
A CSS Awards Site of the Day and Design Licks Site of the Day
FWA Shortlist

Sites using BigVideo.js:

WhiteShoe by Ferragamo
whiteshoe.ferragamo.com
A Smashing Awards winner.

KOJO
kojo.com.au
Awwwards Honorable Mention and featured on Smashing Awards
FWA Shortlist

herrlich media
www.herrlich-media.de
An Awwwards Site of the Day and CSS Design Award Winner and Make Better Websites selection.

Whiteboard Agency
whiteboard.is
An Awwwards Site of the Day and CSS Awards Site of the Day

rocking.tv
rocking.tv
No awards yet, but I think it is pretty slick!

And thanks also to all the other award winning sites using my open source projects that I’ve mentioned in the past.

Lastly, a special shoutout to Alexander Prinzhorn and his magnificent skrollr project. Many a time I have viewed source of a really cool scrolling website in hopes that it was using my code, only to discover that it is a Skrollr site. At which time, I clench my fist and shout “Skrollr! You got me again, haha.”

Update: Here’s a new BigVideo.js winner
L’Attrape Rêve
lattrapereve.fr
Awwwards Site of the Day

Update: BigVideo.js has just got its first FWA Site of the Day via Nectar Estudio!
Lois Jeans
www.loisjeans.com/aw2013
FWA Site of the Day

Chicago Tech Events

chicagotechevents-logo-180Throughout the past year, I have been keeping a running list of cool local Chicago tech events and sharing it with friends and the people at work. I’ve decided to make it into a thing and put it out there. So I present to you… chicagotechevents.com

I managed to have some fun building it too. It was my first time using Twig templates, and really liked it. I expect I’m going to be using that on a lot of things in the future. Also, I am trying out a couple AWS products. I built the backend on DynamoDB because why not. I made a simple admin page for adding the events to DynamoDB. Every day, a CRON job runs that goes through the events and makes a JSON file with all the data, and puts it onto S3. When you go to chicagotechevents.com, it is loading that JSON file and smushing it together with a Twig template. Nice and simple.

I am also using Amazon SES for the first time for sending out the email newsletter, because the price was right and integration was easy (so far).

How Getting Married and Having Kids Made Me a Better Programmer

meandthekidsIt may seem counterintuitive to think being married with children could have a positive impact on your programming. Yet, that is exactly what has happened to me.

First, there’s the obvious way. Motivation. It has been said that the world belongs to those who hustle. When you have a family to support, becoming great at what you do is excellent job security. Thus, doing web development has gone from being a fun thing that I do for a job, to a very important fun thing I do as my career. Now, my own personal hustle factor is at an all-time high.

The other way is unexpected. Obviously, raising children is a tremendously time-consuming, and energy-intensive endeavor. Is there less time to program? Yes. When you do have time to program, are there lots of interruptions? Also yes. How can this be a good thing? I will tell you.

In the old days, I would hunker down and spend long stretches of time working on a project. If I ran into an issue or a block, I would just keep hacking away at it for hours. I would curse and get frustrated at the lack of progress, but eventually power through.

Nowadays, as a matter of necessity, I can only code in short bursts, maybe 2 hours at most. Sometimes, I’ll be struggling to fix a bug or work through an issue and be getting nowhere. Next thing I know, the baby is awake, or it is time to eat or any number of other things that come up in the course of a parent’s day.

This has been a blessing in disguise. The brain is an amazing thing. There is this thing called unconscious cognition, where your mind works on problems while you aren’t thinking about them, even when you are asleep.

It has happened to me over and over again. I get away from what I’m working on, then when I come back, I focus on it in a fresh way. I can accomplish in 10 minutes what may have taken me an hour or more had I just stayed ‘heads down’.

This phenomenon has made a big impact on the way I code, and deal with problems in general. It has given me confidence in my ability to work things out. Instead of getting stressed, I step back and let my brain churn away. It almost never fails. Sometimes I wake up and an answer will effortlessly appear in my mind. It is uncanny.

So, if you are thinking that settling down and having kids will mean that you won’t be able to get as much done, think again. At least for me, it has been the opposite. Check out my github page. Everything on there was created post-children.

Side Projects 2012

My list of in-my-spare-time projects that I’ve released last year:

Scrollorama
What The Heck Is Responsive Web Design
Scrolldeck
Scrollorama2: SuperScrollorama
Are You A Brogrammer?
BigVideo.js
Channel of Awesome
Responsivator!
stacktable.js

And it is looking very good for 2013 (already got it started with controldeck.js). I’m lucky to get to work with a bunch of talented devs, and the plan is to join forces to pull off some cool stuff. Stay tuned.

Developing In The Open

When you love what you do for a living, a great thing to do is never stop getting better. For a web developer, the best way to get better is to work out in the open, for all the world to see.

Most devs probably feel some amount of intimidation when they see the amazing projects posted on Github every day (if not, they may have narcissism issues). Yet even Github masters like Paul Irish, Addy Osmani, Chris Coyier, Rebecca Murphey, Dave Rupert, Lea Verou, Seb Lee-Delisle (..the list goes on) all had to start somewhere.

No matter the skill level, we all need to learn constantly just to keep up with the relentless pace of change. It doesn’t matter whether you are great, or even good. Trying to get better is what matters. Giving a damn about your craft matters. If you do, then you have what it takes.

A little over a year ago, my second son was born. Having kids changes your perspective. The need to provide for them is highly motivating. Last December, I stayed home to spend time with my family, and work on some projects. Having seen some interesting HTML5 presentation frameworks, I decided make one of my own.

Thanks to helpful relatives and the fact that babies sleep a lot, I created What The Heck Is Responsive Web Design? which I built on Scrolldeck.js, an HTML5 presentation framework that I created using Scrollorama, a plugin that I also created. (Synergy!)

Much to my surprise, when I posted Scrollorama to Hacker News, it made it to #1. All three projects were very well received, and it was amazing to me. I got hooked.

During the course of the year, I released other projects, like BigVideo.js, Responsivator and Scrollorama2: SuperScrollorama. Now that little project that started it all somehow got to be the #3 Google search result for Responsive Web Design (right behind Ethan Marcotte and Wikipedia). That’s madness!

Now, I’m always looking for opportunities to build things I can share on Github. Even if I make something that turns out to be a dud, it forces me to write better code. To comment or write documentation so people (perhaps my future self) can use what I’ve created.

When a project does get noticed, I get to learn from pull requests and seeing how people use my code in their projects (and sometimes even win awards). It is crazy seeing your own content getting picked up in places like JavaScript Weekly, Codrops and Webmonkey, or getting opportunities to present at conferences or meetups.

Just today, I released controldeck.js, my first node.js project. It works with various HTML5 presentation frameworks to allow you to control slides from a web page, presumably one on your phone. I made a quick little video demo:

I sometimes wonder why more of us don’t develop in the open. Maybe some devs think what they’re doing isn’t interesting, or good enough. That it takes too much time to clean up their code, write docs or create a project page.

The web can be a harsh, judgmental place. For me, the year I’ve had has been a great success. Still, it would have been easy to get bogged down by negative comments, frustrated by issues and bug reports, or embarrassed by code mistakes. Will people say you are doing it wrong? Of course! I have literally been told I am ruining the internet.

Put aside those doubts and negative feelings. If it takes too long to make an amazing project page, then don’t. If writing documentation is taking forever, then write less and let your code do the talking.

Developing in the open isn’t about being perfect. It is about getting yourself out there. Do cool stuff, share it and talk about it. Over and over. It is about getting better. It is about being a part of something bigger than the desk you sit at. So, get out there and mix it up. You’ll be glad you did.

SuperScrollorama Updates

There are some cool new updates to SuperScrollorama, courtesy of Austrian art director and developer Jan Paepke. From his email to me:

I implemented these new features (the defaults always reflect how the
original version would react):

new Option “triggerAtCenter” (default true)
Usually the animations trigger when the respective Element’s origin is
in the center of the scroll area. Should this not be desired it can
be turned off using this option

new Option “playoutAnimations” (default true)
When scrolling quickly past start or end points by default play() or
reverse() is used to play out every stage of the animation until it
reaches the start or end. Setting this option to false forces a 1:1
link between scroll position and animation progress resulting in an
immediate update of the animation.

new Function updatePin()

Sometimes the pinned animation needs to be changed on the fly. For
example when you want the target Point of the animation being
dependent on window size or when you have a switch where one or
another animation should happen. So I added the updatePin() function.
You can change the animation or duration of the pin on the fly.
Technically there should be an updateTween(), too for regular
animations but I didn’t get around to write one since I didn’t need
it.

new Function triggerCheckAnim()
Sometimes it’s necessary to trigger the animation Check function not
only on scroll. For example if you have a layout with width or height
at 100% and resizing the window changes the positions of the elements
within. Another example may be when you insert new Elements into the
DOM or resize existing ones.

I resolved these issues:

  • when elements should be pinned that are within other elements
    that are positioned absolutely the translation to fixed positioning
    was not correct. (parent at left 100 + child left 100 should be child
    left 200 when pinned)
  • when elements that are pinned are not positioned using top and
    left but bottom and/or right the reset failed (since only top or left
    was saved)
  • when scrolling within an area where a pin takes place and then
    hitting refresh made the pin get lost (until checkAnim was triggered
    from as scroll) This also applies if the pin is supposed to start right
    from the beginning of the page.
  • TweenMax and TimelineMax support the repeat feature, which allows
    animation to be repeated multiple times. This wasn’t supported by
    superscrollorama. It is now (keeping compatibility with TimelineLite).

…So big super-thanks to Jan for making all that happen. Let me know if you run into any issues with the update. And, as always, thanks to Greensock for making an awesome animation platform.