Underneath the surface
This post is a tribute to all the great, license free and open source, code we’ve used to get this site up and running. These platforms, plugins, scripts, snippets and apis etc. have saved me as a developer a ton of time and hardship, so I think they and their authors deserve some acknowledgement.
What has really come to be true during this project, which web-production-wise has been somewhat stressful at times, is that you really shouldn’t write everything on you own. Better spend that extra hour on researching wether someone has already built the stuff you’re supposed to be building than wasting valuable production hours reinventing the wheel.
First of the wonderful WordPress 3.3.1, which since th 3.0 release has come to be more and more of a publishing platform, rather than just a blog tool. All of the backend features are driven by or based off of WordPress. The cms side has also been largely rebuilt to work faster and easier than before. Post types makes it a lot better to organize different kind of content, (in our case methods, videos, glossary words, and blog posts). With the $wpdb class (since 2.8-ish) plugin development becomes a lot more hassle free, and made the progress of building the improve-articles/write-your-own-article feature a lot less complicated.
On the front end side, the best buddy is as always jQuery. And since we decided to for a HTML5 markup combined with partial loading for this site, I was glad to read that version 1.7.1 had built in support for html5shiv for appended data. With the ajax loading and a tiny if statement in the back end which disables the rendering of the header and footer, the browser loads a lot less data and it doesn’t have to reload the the entire page every single time. This is for all you non IE users.
Modernizr is letting us use html5 markup cross browser, does all the scrip loading and lets us detect a couple of important browser features.
Since we wanted to keep the site shareable and google friendly, the shebang solution wasn’t really an option. Instead we used the HTML5 history API to “fake push” the requested urls without having the browser going there. For this feature, I had a ton of help from the jQuery plugin History.js by Benjamin Lupton (not to be confused with jQuery history plugin, or jQuery-history).
For the stylish animations when filtering and sorting of all the methods and videos, we used the jQuery plugin called Isotope by David de Sandro. That plugin does a ton of job for you and is easy to set up. And it looks pretty dope, right?
To make all the animations on the site look smoother, we’ve worked with another (drumroll…) jQuery plugin (tadaaam!), called animate enhanced by Ben Barnett which let’s the browser (again, non IE) play with stuff like css3 transitions, instead of the heavy js-animations.
Data and content wise, we’ve been working with the Facebook API, Twitter API, Youtube API, Vimeo API and we have some future plans on working with Wikipedia API and Google analytics API. For the improvement form WYSIWYG we used the old but customizable widgEditor by Cameron Adams.
While I realize that this blog post hasn’t got much to do with the how aspect of the project, I have at least given a small thanks to all the good developers that directly and indirectly have helped the Project of How moving forward. Not only have I saved time by using all these plugins, scripts, snippets and apis etc. but I’ve also learned a hell of a lot from just reviewing other peoples code. Hi 5 to open source!
Posted by: Johan Dettmar