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!

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.

I’ve been posting code to Github for quite some time (and Google Code before that). I made the switch to Git from SVN awhile back. For my own personal workflow, where I mostly code solo, there isn’t too much benefit for Git over SVN. However, Git does have one killer feature, and that is Github.

Github is a tremendously useful site. Between that and StackOverflow, it has never been a better time to be a developer. Here are the things I love about Github:

• The code. Oh. My. God. Frameworks, utilities, helpful gists, apps, etc. etc. So much goodness on there.
• The people. Who isn’t on Github these days. And you can interact with them all. Ask questions, make pull requests, fork their stuff. In my inbox, I have messages from Scott Jehl, Nathan Smith, Shi Chuan and Paul Irish. Mother F’ing Paul Irish. How cool is that?!
• Free Code Storage. Oh yeah, and you can put all your code up there. (Well at least the public stuff, for private I use bitbucket)

• Startup Podcasts. My current favorite, Tech Zing, as well as Mixergy and Startups For the Rest of Us
• Ted Talks about holy shit stuff going on in energy and medicine
• Node.js, and the excellent collection of tutorials at nodetuts.com
• HTML5 WebSockets and socket.io
• Breaking Bad. Just getting started on the third season. Love this show.

One Page Love
My current favorite. A collection of beautifully designed one-page websites. Really enjoy using and building these.

Web Typography For The Lonely
The best of what’s happening in modern web typography.

10K Apart – Responsive Edition
These entries to the annual 10K Apart competition are not only highly optimized (need to be less than 10K to enter), they all implement responsive web design.

30 Inspiring ‘About Me’ Pages
Creating an ‘About Me’ page is a perfect way for someone new to web development to get started.

The reason I created sizeit was for building web apps. Many times it is necessary to show different content or functionality in an app based on the user’s screen size. At the end of his new book, Responsive Web Design, Ethan Marcotte suggests using javascript for just this purpose. He uses a simple slideshow as an example, recommending javascript size detection for determining which size images to load or whether to display a static image as alternate content.

If you’re building an app that, by its very nature, requires javascript, then why not also use it for size detection, and ditch media queries altogether? I’m not the first to use this approach. Nathan Smith, the developer behind 960 Grid and formalize, created adapt.js to do screen width detection and css loading.

One of the sizeit.js features I like is its size setting is available use in other javascript on the page, which is useful in the kinds of apps I work on and in scenarios like Marcotte presented in his book.

Up next, as a byproduct of recent projects, I’m creating a single page app sort-of-boilerplate that I’ll be posting to github that uses sizeit.js and some other techniques.

Like other developers diving into JavaScript, my first instinct was to do things the way I would in the language I know best, in my case AS3. This works for simple stuff, as the two languages are syntactically alike. However, for more complex development, big differences emerge. There’s been some smack talk toward the JavaScript language coming from the Flash community, ripping on it for being more like older, primitive versions of ActionScript. I admit that I felt this way at first, but that was before I understood what JS was all about. Ultimately, when compared to AS3, it isn’t better or worse, just different.

I don’t have a programming background (was an art major), so it took awhile to wrap my head around OOP and the various popular design patterns. Similarly, it took time to appreciate the concepts that are specific to JavaScript. A huge help in this were Douglas Crockford’s JavaScript talks. If you want to get into JavaScript, take the time to watch those. Also, I think it almost goes without saying that StackOverflow is a tremendous resource for any developer using any programming language, and JS is no exception.

In ActionScript, you use strictly-typed class structure when building an app. That is not the case with JavaScript. It may be confusing at first when you see JS code that seems to have a class structure, but in reality, there is no class type in JavaScript. It is all about objects and functions. Well, functions are actually objects too, so really, I guess it is all about objects.

The lack of strict typing may seem like a drawback, but it isn’t really, if you are doing it right. In Flash, anonymous functions are bad, but in JS they are not just good, they are an essential and powerful feature. One example of this is the module pattern. Understanding this pattern and what it was for, made me appreciate JavaScript as a whole.

There are lots of great explanations of the module pattern out there. Here is an example of what it looks like:

var App = (function() {
 
    var privateVar = "I am a private var.";
 
    function privateMethod() {
        // do something privately
    }
 
    var App = {
 
        publicVar : "I am a public var.",
 
        init : function() {
            alert("Hello World!");
        },
 
        saySomethingPrivate : function() {
            alert(privateVar);
        }
 
    };
 
    return App;
 
}());

If you are primarily a Flasher who has not done much with JS, then that code will probably look all kinds of crazy. Well, that was me a few months ago. Explaining this common, well-understood JS code block and why it is cool to the me from last year would be a difficult task. It was fun figuring it out though.