Health to the Web

I had some time over Christmas and decided to organize my reading lists. Interesting how some time away from daily work allows one to raise up your head   Uncle Bob on Principles of OOd See also book: Agile Principles, Patterns, and Practices in C# Available on Safari Books online. Algorithms in a Nutshell Nine   Algorithms   That Changed   the Future Programming Pearls book: http://www.cs.bell-labs.com/cm/cs/pearls/toc.html 97 Things Every Programmer Should Know Seven L a nguages http://pragprog.com/book/btlang/seven-languages-in-seven-weeks Codys book : http://www.domenlightenment.com/ Principles of OO programming: http://www.nczonline.net/blog/2012/12/18/now-available-principles-of-object-oriented-programming-in-javascript-beta/ Object Oriented programming with Stefan Stoy... Chrome V8 : http://code.google.com/p/v8/ https://developers.google.com/v8/ https://developers.google.com/v8/design - read this Mozilla Javascript page ...

Nav bar which becomes fixed Nav bar starts lower down, when user scrolls it scrolls up and then locks in a fixed position. If user scrolls down then it unlocks and scrolls. Note: on iPad the scroll event does not happen until the user releases so the nav bar will not scroll progressively as on desktop browser but only once the user releases. But I think that's an ok experience. Left nav which collapses and expands Often seen on basic Help pages. One way to implement is as nested ul sublists which are initially hidden, then when user clicks one can use query click handler to slide/slideToggle to expand and collapse. The trick is that the onclick page request is submitted to the browser so there must be code server side to attach a class to show the appropriate section expanded whent he page returns.

Great article from the guy who helped bring us Y Combinator Read this too , from a great javascript guy and person to boot!

I built a node.js prototype, which used node.io, for an idea we had to get some useful data.I knocked this out Sunday night and early Monday. Besides learning node.io, a challenge was how to handle nested getHtml() calls in node.io since each is threaded. After 2 initial versions I found a useful post and the approach to use. node.io is a powerful node.js package to support data manipulations (file io, db access, screen scraping etc.) in an async manner. It has strong support for screen scraping which I used it for, I like the jquery like dom selector support, very cool. But I would definitely use it for file processing too. In node.io you create jobs which are then run. You can define inputs and outputs. Lots of good material on the wiki. The multi threading makes it a bit tricky especially for nested tasks. Here's the git repo for the app I built. A nod to my muse for this work, the "jean genie" maestro himself.

In my previous posts I build a simple node.js app without the use of a web framework. Its a good learning exercise but now I want to use a web framework. I choose Express for node because from what I read its proven, well documented and has support for what I wish to build. I can also use dust templates server side with express (I used consolidate.js to facilitate). So here's what I did to convert to using Express. For "my next trick" I'm going to convert the reviews app to use the express web framework and have it reuse the dust templates I'm already using with backbone.js - install express globally - create app scaffolding with express:    express expreviews - that creates a new folder "expreviews" with a folder structure which express proscribes     expreviews        /public    (the apps public folder includes /javascript, /images and /stylesheets subfolders)        /routes ...

I work with some really strong software engineers and Ward is one such. While on a project the Creative team were interested in having some parallax effects on the homepage. I did not have the time to "survey the parallax landscape" but I managed to get some of Wards time to help not just for my particular project but any project planning parallax. Goals: - establish terminology and examples - understand options for building - some effort estimate for this project - nice to have: some prototype  In the course of this I was also curious to learn why nike better world and new zeland.com are no longer parallax? Below is Wards writeup. Hi All: I'd been asked to do a little background investigation around implementing a parallax type scrolling effect for the S* site that's currently in development. I thought it might be useful if I briefly shared some of the things I've discovered. First off what do we mean when we talk about a parallax type effect? At it...

Some technologies will work better for some situations than others. Client side mvc is more suitable for some use cases than others.  So it depends on many factors. e.g. If a "desktop-like" ui experience is critical, then think client side mvc. If your team has little javascript experience or mvc experience or you have significant SEO requirements then client side mvc may not be a good fit.  The following are my opinions and are not conclusive. Recommend you also research the web. Client side mvc Pro: User experience: traditional web apps typically submit a request and get back a full page each time; client side mvc apps handle more processing on the client and also typically make data requests to the client which should be faster to turnaround. Use gmail? Then you're using a single page app. gmail and others such apps provide a desktop-like experience in the browser. No page refreshes. We'll see more and more of these kinds of apps. Pro: Code...

Bootstrapping data onto the html page which is returned is a clever way to save one or more round trips to the server and show the user the complete page sooner. Bootstrap recommends this approach, see their FAQ . Twitter have a neat way to bootstrap json data into an html file. Uses 2 scripts as follows. Avoids creating any global variables. Notice the json data is within the script tag and is accessed using getElementById().innerHTML. Clean. I like it. I made a minor change to invoke as an immediate function: <script type="text/plain" id="init_data" class="json-data">{name: "denis"}</script> <script>     (function() {           var jsonText = document.getElementById('init_data').innerHTML,               initData = JSON.parse(jsonText);                 ...

Very interesting article from Twitter here about how they changed their client side architecture from  a single page app running client side javascript back to something more traditional. "When we shipped #NewTwitter in September 2010, we built it around a web application architecture that pushed all of the UI rendering and logic to JavaScript running on our users’ browsers and consumed the Twitter REST API directly, in a similar way to our mobile clients." But there were Issues: - initial page-load performance - ensure that only JavaScript required is loaded and the application is interactive as soon as possible - urls are urls (no hashbangs) (important to Dan Webb) The defence The riposte By accounts #newtwitter did not do a good job of implementing hashbang and there were performance issues...the ripostes had it and.. ..so twitter rearchitected to: 1. "render our page content on the server and deferring all JavaScript execution until well after that...

Steve Souders 14 rules Google speed Max number of browser connections  See tab Connections per Hostname

I continue working on my little node js - mongodb - backbone js app which runs locally and on nodejitsu here. You can read more on my first post here . So I hooked in some basic mongodb Nodejitsu supports mongodb, couch and redis. I created a mongodb db following the instructions here in the nodejistu manual Nodejitsu provides you keys and access code to access the db. Through r&d and trial and error I got some functions to seed, list and remove data. I modified the code to read the bookReviews collection when users hit the landing page and return the landing page with that json data bootstrapped. I deployed using "jitsu deploy" and got an error related to mongo db. I kinda figured I needed to add it to dependencies so I updated the package.json as follows. I tried various versions for mongodb but hit on the >=0 solution looking at the rest of the package.json. This fixed it and the latest code is deployed.   "dependencies": {     "mongodb"...

Addy Osami article link to a number of guides D. Crockford http://javascript.crockford.co m/style1.html http://javascript.crockford.co m/style2.html http://javascript.crockford.com/code.html  But we use a++ and may differ some re whitespaces. Googles js style guide Love this guy We've followed yuis code comments guide Some useful info here in these isobar standards but more concise would be better imo. We use jshint and confugure it for our rules for building. USing automated tools as much as possible is critical. Then code walkthroughs can concentrate on higher order questions such as proper use of design patterns, right architecture etc. I think it better to agree on reference standards to follow and then only call out anything extra or different from those. There's lots of good references and it fails to be maintained over time otherwise. Below is an example of rules on a previous project. Coding standards your code must lint and you must run the ...