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.

Awwward-winning Code

1/15/2013 Update – Another SuperScrollorama site, Zipper Galleria has won an Awwward

The Awwwards are awards for design, creativity and innovation on the Internet, which recognize and promote the best web designers in the world. Every day, I take a look at their awwward-winning site of the day. It was really exciting to see UK Copywriting company Rule of Three win, not just because they have a nice site, but because they are using SuperScrollorama.

There have been a lot of great sites popping up these days that are incorporating SuperScrollorama or SuperScrollorama. It is especially cool to see it spread to other countries, like on The Black Sparrow, a restaurant website in New Zealand. It is even being used on on websites where I don’t speak the language, like Land Een Job!. Luckily there is Google Translate!

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.

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.

Help Prevent FOUC!

Do your web pages suffer from FOUC? Now, you can prevent FOUC with 2 easy steps!

Step #1 – Add this to the head of your document:

<style type="text/css">
  .no-fouc {display: none;}
</style>
<script type="text/javascript">
  document.documentElement.className = 'no-fouc';
</script>

Step #2 – Add this to your document ready event:

$('.no-fouc').removeClass('no-fouc');

Pro-Tip – If you want to get all fancypants, instead of adding the .no-fouc class to the top level of the document, you could add it to individual page elements so that only they are hidden (or have your own .no-fouc custom styling) during page load.

Please help spread the word about how to prevent FOUC and eradicate it from the internets. Also available in gist form.

A Great Month

Wow, what a great few weeks I’ve had.

Things started off when on New Year’s Day I posted my Scrollorama plugin to Hacker News and a couple other places. To my great surprise, it shot up to #1 on HN and stayed on the front page for pretty much the whole day.

Then it started showing up on Twitter, and got a lot of great compliments from people I really respect. I even got a tweet favorited by Paul Irish. The fun continued when Scrollorama got featured in dailyjs and The Verge and softpedia.

Then, my “What The Heck Is Responsive Web Design?” slides got posted to Hacker News, then linked to by a number of people, including Mr. HTML5 For Web Designers Himself, Jeremy Keith.

Finally, to top it all off, my work has been featured across JavaScript Weekly, The JavaScript Show and HTML5 Weekly, all in the same week.

Of course, I also have to say that Grant, my new baby boy, has been absolutely great. No colic, sleeps and eats well, and is just a pleasant baby. So, professionally and personally, it has been a really great time for me. Thanks everybody!

Scrollorama

Over my holiday/new-baby-time-off break, I took some time to work on a couple new jQuery plugins that I’ve been thinking about. I’m a fan of the various cool scrolly sites out there like this and this. I also dig slideshow presentation plugins like deck.js and reveal.js

With that in mind, I’ve created Scrollorama, the jQuery plugin for doing cool scrolly things. Basically, it lets you animate elements on the page based on the browser window’s scroll position. You can see what I mean by checking out the project demo page on Github.

The other plugin I made is scrolldeck.js, which is for making vertically scrolling slide decks. It uses Scrollorama and keyboard listening to manage the slide transitions. You can see it in action on its demo page, and also in some example scrolldecks I created. “What The Heck Is Responsive Web Design?” is a scrolldeck that demonstrates a variety of features, particularly animation builds. “Infographics Are Cool” is a demo of how to create a scrolldeck of full screen images. Lastly, I created a parallax scrolldeck demo of how to use it with the Parallax jQuery Plugin.