Health to the Web

Reading Backbones code makes me think of a Japanese zen garden or old style Japanese dwelling. There is no waste or excess. It's like an author who rewrote and improved their work over and over such that each statement belongs. Not an instruction is wasted. Its minimal but very powerful. The following is my step by step timeline analysis of the Backbone library for how custom Classes are created from the core Backbone classes such as Model, View and Collection. I will focus on Backbone.Model but the same creation pattern is used for Backbone Model, Collection and View ....but not Backbone.Events. Backbone.Events is just a plain object literal with properties. Step 1. Backbone.Model is declared as a function:  var Model = Backbone.Model = function(attributes, options) { .. } Backbone.Model is a function. Functions are objects in js. Every object in js has a prototype property which points to an object. Functions inherit from Function.prototype (which has methods like ...

See dust.js page to start Linkedin Dust page Very helpful post We've used many features including inheritance and substitution Dynamic partials, very helpful to include partials based on values (avoids conditionals)   e.g. {>"partname-{aValue}"/} This is use of if dust helper {@if cond="'{choiceShown}' <= 0"} <p class="choicesmessage" class="myStyle">Some text</p> {/if} One of reasons I like dust is that if avoids js code "logic-less" in the template. So it feels "wrong" to create an @if with its funky syntax as well as other kinds of helpers. Need to be really careful with these. I'm very much with the "logic-less" school with regards to templates. dust has a really useful lookup mechanism when looking for properties, see the 2nd link section "Traversing JSON using dust". We needed to show properties which were nested in a differrent block to the one bei...

These are my notes from a 1 day training by Brian Lonsdorf given in San Francisco. A cool guy who's really into functional programming and is eager to share that with his fellow developers (thank you man!). Brian Lansdorf   brian@looprecur.com Course Overview Brians recommendations - play with haskell - osteele.com functional javascript http://osteele.com/sources/javascript/functional/ - see iotope11.com  quickly learn you a haskell http://isotope11.com/blog/tags/haskell - type classes on loop-recur on Github curry as well. Production ready. - steps to use day to day: 1. loops to map/reduce with underscore etc. 2. use compose - hoogle search: http://www.haskell.org/hoogle/ Bob Martin endorsed functional programming .er...wow! pasing a dynamic function as a callback is often unnecessary, could just pass fn "nobody should be writing loops any more" - use map instead - map is a higher order function (a function whihc takes a function) result = map(fnToCall...

We're using saucelabs.com on a paid company subscription Easy to use and good coverage Can take snapshots, share a live test, clipboard support Runs in the browser, no install required Pretty cool I have MAC Parallels on my mac and can run Win 7 and IE8 but gave 1 false positive for a flash display brought in at runtime. But overall good. Some other options 1. microsofts own http://www.modern.ie/ Has free 3 month subscription It looks cool but gave me 1 false positive (missing buttons which no one else saw). WTF? Its msft backed. 2. http://crossbrowsertesting.com/ I have not tried 3. Browserling I have used IETester in the past but found it was quite unreliable and there are better options now.

Helped write "HTML5 and Css3 for Real World" book I like Has writtwn another book on css3 animations, looks like its on github! animation: spirit and life, "breath life into things" Animations add visual feedback to users; create more immersive websites, more fun,  if you have an img then why not animate Two Animation Routes in css3 1. transitions     - these are fast     - but no built in way to repeat, so can't loop e.g. boucing type spring     - best for on/off type stuff     - can only do a to b 2. keyframes (aka css anmiations)     - a little slower cos browsers not doing Transitions 2 required properties: transition-property and transition-duration There is a shorthand for that css styel You can include multiple transitions on 1 line Site she likes:  delta.com  their search box top right expands on focus  shareagift.com as you scroll then notice the top nav bar animation  webplatfor...

Testing Kevin Nilson Book: "java puzzlers" Kein does almost everything test driven You need to automate tests  - find bugs sooner saves $  - we are doing more in the browser  - speeds up development  - lets you get off the project! Manual Testing catches visual problems but is time consuming, expensive and so often skipped. Automated Testing can't catch visual but is fast and cheap Kevins favorite is continuous integration (Jenkins, CruiseControl) run at set times during day   not when you save...can get annoying   not when commit Unit test: tests building blocks of app, should be very fast Different to Integration and Functional end to end tests Selenium is a neat idea but its not really designed for developers QUnit some pros'n'cons TestSwarm from Mozilla ---------------------- You send a test to Test Swarm, Test Swarm then pushes tests to machines Supports all browsers and mobile and uses Javascript Jenkins ------- Has a plugin for TestSwarm Test Anywher...

having a page which loads fast is the #1 things for Responsive sites cut down on size of html avoid reflows by using docFragment cache results of selectors group css updates into classes use css hardware acceleration css gradients...an img sliver may be better css shadows....use limited or consider just a border of light grey color css blur... can be a performance impact minimze http requests minify compress images to just size you need use sprites load page as fast as possible ask yourself if you need a given framework  - do you need the backwards capability?  - you should know what library is doing so you can optimize document.body.querySelector('#urid') document.body.querySelectorAll('.myClass') These are since IE8 A native js loop is faster than $.each Checkout jsperf.com you can profile code in your app, see how it runs on platforms & browsers.