Health to the Web

Within our css we will have rules which have to do with layout and rules which pertain to "style" (for the want of a better word). The smacss book identifies 5 categories of rules: Base, Layout, Module, State and Theme which is a useful categorization. In my experience, many layout rules are usually unique and often not reusable (though sometimes can be). But the other kind of rules can and should be reused. Layout rules include rules like setting width, positioning, floats etc. What are style rules? examples include rules which apply colors (color, background), fonts, borders, shadow etc. Its really important to plan how we will reuse style rules and how to make them easily available for reuse. It's extra work to identify and breakout style rules but if done up front can save much refactoring later. We organize our css (less) into files such as global.less for global styles and then unique files for each part of the system such as account.less, checkout.less

Directives are often mentioned as one of the "3 Ds" of angular (the other 2 being Data Binding and Dependency Injection). So Directives are a very important part of angular. Yet at the same time, mention of Directives can cause even experienced angular developers to acquire a haunted look (think Frodo and the Dark Riders and you have the idea ;-) ) A classic case for a directive is creating a reusable element for displaying customer information. It's part of the angular directive tutorial docs  and what I implemented for our site since we need to display the same contact info in multiple places. Steps to create: create the directive js create the directive html partial (optional but if have html then make partial) add directive name to app list of dependencies include the js file create the test use in your app Attribute vs Element There are 4 ways to include directives but the most common are as attribute or element as defined by the restrict setting:

angular js forms are a whole sophisticated micro framework within angular angular builds on top of html and provides directives for form, input, textarea, select and provides a model instance for each, so when you write the following you're really using the angular input directive:     <input type="text" ng-model="person.name" required>     <input type="checkbox" ng-model="person.wantsEmails"> here's the docs for input directive  which lists all the options, note that angular supports enforcing different types such as email etc. angular has very good support for html select and iterating options some key directives include the following ng-model  creates a 2 way binding to the data on the page, angular ensures changes flow from the html into the ng-model and also flow from the ng-model to the html (contrast this to ng-bind or {{}} which are one way only binding from model to html) each ng-model creates an instan

Start December I did some work kickstaring our e2e test scripts for our app. Since angular js is now using protractor for e2e tests then team agreed its best to (try) use protractor. Protractor is a node package that is a wrapper around WebDriverJS and Protractor is used for running automated tests in a browser. WebDriverJS (and Protractor) apis are asynchronous. All functions return promises. WebDriverJS maintains a queue of pending promises, called the control flow. Protractor has adapted Jasmine so that each spec waits until the control flow is empty. Jasmine expects understand promises and add a task to the control flow to be executed after others are executed. Protractor runs on top of Selenium-Webdriver which is a browser automation framework. You have to run your Protractor tests on top of a running selenium standalone server (installed as part of Protractor install). (* this content from Protractor pages ) Learnings : I'm overall positive on protractor (after appr

Like other angular newbies, I'm trying to understand what Scope means in angular js. Scope is a complex concept in Angular js because the angular framework manages scope for you e.g. - each time you navigate to a controller then that controller is created and a new scope created for it that scope inherits prototypal from its parent scope all the way up to the top level root scope (scope is created for a number of built in ng-* as well as custom directives too) - when you navigate away from that controller to a page without that controller then the controller and its scope are destroyed; you can listen to controller destroy event $destroy (snippet below) - angular provides framework properties $scope and $rootScope - each $scope has a $parent which allows you access the parent scope, all the way up to root scope; this can be handy for debugging up the scope chain This is a really useful tutorial about scope And the answer here is informative about controllers and scope

Youtube here Useful best practices and insights especially 9 and 10 angularjs team believes in "configuration over construction" like RoR "don't fight the html, extend it" - augment the html vocabulary using directives, html as a DSL which you can extend Use a bootstrap project. angular/angular-seed on github exists to bootstrap an app (you copy and run with it) BUT yeoman.io is recommended now script files just before the body angulars modules configure the injector and how objects are created; requirejs deals with how scripts tags are loaded into the browser only done once If you use something like require js then you must manually bootstrap angular e.g. angular.bootstrap() wrap callbacks for 3rd party api into $apply flash of unstyled content momentarily; caused because browser renders before angular. Options: ng-cloak on <body>   but this will show nothing until angular runs a better options is to use ng-bind on the index.html only (j

really cool add on "cmd-shift-j" to run when installed I had to install Sublime Text Package Manager first , installed appropriate for my version

My last day at Fluid was Sept 9th after almost 5 years. I have been fortunate to work with some great peer co-workers without whose help I simply would not have come this far. From my first project on Reebok with Drew and Ward to my final on LG with Drew (again) and all those in between Bugaboo, Benefit, Jeldwen etc. I have worked with some great peers in engineering, pmo and design who have helped me and taught me. When I joined Fluid it was a smaller company of approx. 40 people total spread across product and services. We shared one office all on top of each other, cramped and hectic, too hot in summer too cold in winter. But there was a great camaraderie and mutual support. We had a great CEO in Andy and although the work was hard (I worked a third of all weekends in 2009...gawd) we were all in it together (and we all felt it). I remember in the depths of 2009 recession, Andy getting his head shaved in the pub since we beat a revenue target. Local TV news crews covered it. Spe