Funny on Github

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 Website
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
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)


what the commit
What The Commit
An amusing random commit message generator. View it at whatthecommit.com

Github Project: github.com/ngerakines/commitment
By Nick Gerakines (@ngerakines)


bootstra
BOOTSTRA.386
A Bootstrap to make webpages look like they are from the 1980s. View it at kristopolous.github.io/BOOTSTRA.386

Github Project: github.com/kristopolous/BOOTSTRA.386
By Chris McKenzie (kristopolous)


passwords for the manly man
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

Github Project: github.com/dfcb/manly-man-passwords
By John Polacek (@johnpolacek)


gifs
jglovier/gifs
Joel Glovier’s GIF Collection. View it at gifs.joelglovier.com

Github Project: github.com/jglovier/gifs
By Joel Glovier (@jglovier)


arnoldc
ArnoldC
A programming language based on the one liners of Arnold Schwarzenegger. View it at lhartikk.github.io/ArnoldC

Github Project: https://github.com/lhartikk/ArnoldC
By Lauri Hartikka (@lhartikk)


five
Five
A library to overcomplicate 5. View it at jackdcrawford.github.io/five

Github Project: github.com/jackdcrawford/five
By Jack Crawford (jackdcrawford)


programmer collective nouns
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
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)


semicolon programming language
Semicolon
A programming language of semicolons. View it at pksunkara.com/semicolon

Github Project: github.com/pksunkara/semicolon
By Pavan Kumar Sunkara (@pksunkara)


illacceptanything
illacceptanything
The project where literally* anything goes. View it at illacceptanything.github.io

Github Project: github.com/illacceptanything/illacceptanything
By Kristopher Wilson (@mrkrstphr)

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

Share Your Git Aliases Day

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.

Here’s mine: https://gist.github.com/johnpolacek/69604a1f6861129ef088

A Year of Startup Life

AuctionsByCellular Silent Auction Technology Mobile Bidding CompanyIt 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!

You can keep up with AuctionsByCellular on our blog, on Facebook, on Instagram, Twitter and YouTube. (You may even see a pic/vid of yours truly pop up every now and then)

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.

One Year of Open Source Traffic

Screen Shot 2014-02-02 at 1.36.13 PMI’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.

AWS Notes: Mastering NoSQL – Advanced Amazon DynamoDB Design Patterns for Ultra-High Performance Apps

DynamoDB Engineer David Yanacek started things out by giving an overview of the types of tables and queries that exist in a typical social network app, and how they look in DynamoDB. A second example he gave was image tagging, doing queries like images by users, by date, by tags and then combinations of those. He showed how to set up DynamoDB queries that would be useful and inexpensive for this type of datasets. He introduced their new concept of a Local Secondary Index, which is a temporary table created by DynamoDB, that allows you to run a secondary lookup on a result set. For tags, in DynamoDB you would have another table tie the tags to image IDs.

Then he revealed a new feature for DynamoDB: Global Secondary Index. This lets you do fast, inexpensive with more flexible queries.

The next example was managing states of a tic tac toe game, show some problems that arise and how to avoid them. David showed a problem in which a tic tac toe player could cheat by sending multiple update item requests, perhaps in separate browser windows. You can solve for that by doing conditional writes. Another fix was to add an expect clause to prevent bad writes.

He moved on to talking about finer-grained access control for user data. He proposed moving from a three-tiered architecture, to two-tiered where users do updates directly to DynamoDB rather than a service layer. Having just heard the ___ presentation, I knew where he was going with this: using Web Identity Federation to get temporary credentials and a session token. A new feature in DynamoDB is to limit access to particular hash keys and attributes. For example, allow all authenticated Facebook users to query the images table but only when their facebook id matches their user id. This allows us to expose the database directly to users, resulting in lower latency, cost and complexity. Some problems with this is less visibility into user behavior, more difficult to make changes without a service layer and requires work in scoping items to specific users.

Next up was David Tuttle, Engineering Manager of Devicescape. His talk would cover how they have implemented DynamoDB in their service. Prior to adopting DynamoDB, they faced challenges in scaling, DB maintenance, slow queries on large table and difficulty making schema changes. DynamoDB forces a different way of thinking about data.

He quickly gave a bunch of pro-tips: Organize data into items around a primary key, evenly distribute workload across hash keys, use parallel scans for high speed jobs. DynamoDB will not give you the expected throughput unless you distribute across hash keys. By using conditional writes and an atomic increment in the first item, they avoid collisions. Plan for failure. Use local files to resume data operations after a failure. Extract data to S3 to do non-realtime operations like analytics. Use DynamoDB local to speed up developer workflow.

Last it was Greg Nelson from Dropcam, the Wi-Fi enabled camera company that does intelligent activity recognition and cloud recording. They moved away from managed hosting to AWS and eventually DynamoDB. He showed how they use it to manage all their camera data, as well as user sessions. He drilled into what their table updates, queries and deletes look like for cuepoints (to keep track of important footage within the video tracks).

He talked about some of the complexity within DynamoDB, such as the concept of “eventual consistency”. With NoSQL, choosing a hash key is the most important up-front design decision. You need to keep very close attention on IOs. Throttling behavior is opaque, so you need to actively watch for problems.

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.

AWS Notes: 2nd Annual Startup Launches

I always love hearing startup pitches and launches.

Koality
First was Koality, a build deployment service built, of course, on top of AWS. Koality automatically parallelizes your test suite across available virtual machines, making tests up to 64x faster. They not only do pre-push unit testing (blocking bad changes), they make it easy to have private debug instances. They have a great client list with Dropbox, CrunchBase and most recently Airbnb.

CardFlight
Next was CardFlight, the open platform for mobile payments. They announced two new features, custom manual entry and integration with Braintree. Free 12-month subscription to their readers.

Runscope
Some former Twilio guys created RunScope, which is a traffic inspector that aims to make it easier and better to integrate with APIs (like AWS APIs for example). Their debugging tools have tracked over 25 million API calls to date. I liked their motto: Everything is going to be 200 OK. Their new product announcement was Runscope Radar which is for adding automated API calls to your testing suite with assertions that can evaluate the request responses.

SportXast
SportXast is the easiest way to create, view and share family sporting moments. You can do things like easily get instant replays. You can easily connect to a community around an event and share crowdsourced highlights around the players you care about. When a user uploads a video it goes to S3 to SQS to Elastic Transcoder to CloudFront and back to other users. This was a true launch as this was their very first release to users.

Nitrous.IO
Nitrous is a free cloud-based development environment platform with a web-based IDE and cloud VMs. Their big differentiator from competitors is to reduce latency (via CloudFront) so that it is indistinguishable from localhost. They offer Google Docs-style collaboration. And of course, they’re hiring. (As is everybody!)

Hopefully one or more of these companies become super successful so I can say I was there when they launched!

AWS Notes: Scaling a Mobile Web App to 100 Million Clients and Beyond

For me, this was the best session of the conference so far. Joey Parsons, Head of Operations at Flipboard gave a talk about how they grew the company from their first user through to today.

He started by covering Flipboard’s “prototype phase” going to 100 million users. They started with a simple stack of Rails, EC3, S3, RDS, MongoDB and memcache. They submitted to the app store, launched on the iPad and monitored the Cloudwatch analytics. Then after some initial celebration, they noticed their CPUs were spiking. They spun up new servers and quickly hit the limit on their AWS account. Then they got rate limited on Twitter and Facebook. They made a call that night to rate limit their users to keep things in check, slowly opening the service up for new users.

They soon made a decision to switch to Java instead of Rails and add CloudFront to their stack. They also broke up what was once a monolithic app into separate microservices. They shifted their primary data store to MySQL via Amazon RDS. They started focusing on instrumentation and monitoring. Every instance they have was kept track of in a SimpleDB table with detailed information on the instance. This allowed them to do fast and powerful lookups of all the servers that power the operations of their company.

The next milestone for Flipboard was when they launched their iPhone app. Once again, after some initial celebration, they ran into some unforeseen performance problems as it scaled. In one night, with RDS, they were able to build a sharding mechanism that they still use to this day. Funnily enough though, the sharding didn’t matter for their problem — it all came down to one bad query that they fixed and everything went back to working great.

Their next launch was Android, and there were no bad stories to report there. Their stack continued to grow, adding HBase, Hadoop, Redis, Puppet and more.

They continued to focus heavily on instrumentation for all their services. They set up processing mechanisms with Hadoop, Storm and Kafka. They moved away from deploying with custom bash scripts, switching to Puppet. The most important thing though, he said, was to move away from just throwing hardware at problems and instead focus on using the appropriately sized EC2 instance both for best performance and cost savings.

chartTheir focus on instrumentation was not confined to server-side. Flipboard monitors a number of metrics on the client side by sending reporting data (such as how long it takes to open the app) from their apps to Graphite. They like the tool for metrics from hosts, apps, usage and logging. He gave props to the Cloudwatch2Graphite open source project that brings Cloudwatch metrics into Graphite. They divide their deployment into groups and use CloudWatch metrics to catch errors before they deploy. He had a neat slide of a pretty chart that they generate from that data using d3.js and cubism.js that can allow them to quickly see which parts of their stack may be causing performance problems.

What’s next for Flipboard technology? Better use of auto scaling groups, by dialing into lots of signals for better predictive analysis, continued heavy focus on picking the right instance types and taking advantage of any new AWS products.

He concluded with a philosophy that I share which is that the unknown is not scary, but rather it is exciting.