Health to the Web

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.

Making peace with Twitter Bootstrap slides on slideshare: slidesha.re/Wuboo4 using a css framework like bootstrap does not absolve you form having to learn css Bootstrap issues 1. too bloated, too many lines css fix: customize download; use customize link.   You can always come back later and get more if you need it.   Just get what you need fix: customize @import when using in less/saas; delete imports. See bootstrap.less   make your own copy of bootstrap.less and you can take imports out and it will still work   (but keep a copy of the original) Saas - twitter bootstrap not available in saas and need to go through a 3rd party. Yoeman - can include for you. 2. bootstrap Class-itis bootstrap requies alot of classes, some not named as you'd like there's alot of row, span...it's not semantic, very tableized plus if you take out bootstrap you've alot of markup changes to remove those classes fix: define your own style classnames and rules which y...

Javascript Maintainability - Nicholas Zackas follow on twitter on: @slicknet slides: slideshare.net/nzakas Most of your time is spent maintaining code. Not new development. Many of us are self taught. You have your own way of working. But most of us work in teams "Maintainable code works for 5 years without major changes" What makes it so: - intuitive (at surface level) - understandable (when you dig deep) - adaptable (can make small changes and not fall apart) - extendable (can extend it easily) - debuggable - testable (has to be testable, otherwise people will be afraid to change it) Be kind to your future self. Considerations 1. Code style - if you don't have a guide then you should have one Programs are meant to be read by humans and only incedentally computers There are good js style guides out there such as: googles style guide, crockfords, jQuery core, dojo, idomatic.js Checkout the latter Comments: - "there is no such thing as self ...

I'm attending 2 days of the conference and a days training (javascript functional programming). Below are my notes. This is great deal for the early bird price I paid ($245 including tee!). Day 1 Day 2 Keynote by Christian Hellmann, Mozilla . A funny, thoughtful and inspiring talk. Maintainable Javascript, Nicholas Zakas. I'm a fan of Nicholas and read his blogs. He's a smart and thoughtful guy. This talk is not the sexiest, but if we all followed his guidance then our collective work would be far more pleasant. 

Mozilla keynote day2 "the web is for everyone" "everyone is a consumer and creator on the web" HTML5 means browsers render html the same way...quite an improvement given the past Phones are ubiquitous...the initial announcement for iPhone said no sdk, web only  but the lashback happened and an sdk for native devs was added Recent history is marked by the idea of built in obsolescence OR make style changes so that the owners feel out of date. This feeds the consumer culture. Leads to superficiality. Web developers should not get into this game Fragmentation is a given i.e. so many devices. You can't get it to work perfectly on all. Few of you will be the really really successful guy but thats ok. Lets play the long game. Don't fall into the too clever trap We have an "awesome overload". Stop trying to impress each other. Instead build interesting things for the general populace. So how do we disrupt? Don't be concerned about ...