Health to the Web

In Angular you can explicitly register a watch and a callback to be called when it changes   e.g.      $scope.$watch(expression, callback) ..or implicitly using a binding expression  e.g.     {{userName}} Angular keeps track of all watches on scope so that it can detect when changes have occurred and thus update the DOM or call a watch callback. Angulars code to detect changes by evaluating all the watches is called the "digest loop". The digest loop stores the value of the watch expression evaluation and when next the cycle runs it compares the old value to newly computed expression value. If there are differences then it will eventually intelligently update the dom and/or call impacted watch callbacks (once all changes have been resolved) The awesome book "Mastering Web Application Development with AngularJS" explains this well in Chapter 11. Chapter 11 includes a section on performance tuning. One advice is to "Consider the size of expressions be

wow! Big changes: ng-controllers - gone, $scope - gone, directives - gone, modules- gone, new language AtScript added... wow! Still learning about Angular 2.0. But honestly as I think about it, I like what I see so far in Angular 2.0: I like the new Directive syntax, write as a class and annotate; well ok by me, I mean, lets face it Directives in 1.x are ugly changing to use ES6 modules very logical and makes sense (Embers doing same) eliminating $scope is a good idea, I always felt its like a global space and way too easy to abuse, $scope use is already being minimized in latest best practices...so its on the way out already controllers are written as classes and annotated; not clear to me how to completely eliminate ng-controller, but I don't see controllers going away but rather how controllers are activated on a page is changing changes to html syntax look a little weird but I'm sure we'll learn that quickly AtScript adds some useful looking beh

Give me the answer now : switch Karma to run Firefox not Chrome More details Our team is building a pretty complex angularjs app. We write unit tests and run them using Karma. The unit tests are run on a file change watch and just run in the background. We have almost 2000 unit tests. Its all been working great until recently when the test run gets much slower after each run. Its now at a point that by the 3rd karma run, karma grounds to a halt i.e. 1 run 15 secs, 2nd run 30 secs, 3rd run 1min + I should not the app itself is not exhibiting significant memory issues (although profiling and tuning is needed) just the unit tests. Step 1 - find out whats happening with our Karma tests? Using google Chrome Task Manager, monitor the Karma browser tab. The monitor shows us memory and cpu (you can also right click and add more columns). This is a rough measure but we could see karma tab: - memory almost doubled each run 300mb, 600mb, 800mb. - cpu was maxing out after 3rd run S

Jasmine spies are super useful when writing unit tests You can check arguments passed to a spy x with:  expect(x).toHaveBeenCalledWith(arguments) toHaveBeenCalledWith() expects a match on all arguments But what if you don't know all the arguments e.g. only sure of the 1st but not the rest? There is a way,  heres the fiddle and code below: describe("Spy argumnts access", function() {   it("should access 1st argument to spy", function() {     var mockCallback = jasmine.createSpy("mockCallback");         mockCallback("denis", 22, {unknown: 1})       expect(mockCallback).toHaveBeenCalled();       expect(mockCallback.argsForCall[0][0]).toBe("denis");       }); }); FYI Add Jasmine as an external library, I found this on other examples: http://searls.github.io/jasmine-all/jasmine-all-min.js

Been wondering about the best approach when using angulars select. You pass it an ng-model to hold the currently selected choice (including initialization). Angular provides at least 2 options for being notified of changes in the dropdown: 1. use ng-change on the select and have it call a method on scope to handle the change 2. watch the ng-model and when it changes then handle the change So which is better? A typical mvc approach is to listen to the model and respond to changes. Angular allows us to watch the model and do same. For watch read listen. One downside of watching the selects ngModel is that watch fires a lot. You do get new and prev values passed in the watch so you could compare both and do nothing if same and thus save some cycles. Using ng-change is simpler, it only fires when the drop down changes. You can see whats happening by looking at the html (although it should not be so difficult to understand by looking at the watch code either) I prefer #2 watch t

Am stoked to be part of the team here doing a blog post series on Angularjs to the AppNexus TechBlog. Click here to see the posts (2 so far, more coming)

We're building a large scale angular app at twixt.it. So  Angular for Large Scale Applications is very interesting to me. Thanks to the presenters for sharing all this information, some good ideas here. Below are my notes & thoughts on each presentation (still working through all). Code Organization Patterns  Important for scaleability because Controllers grow as size of app grows Many DCM controllers have thousands of lines of code Avoid long controllers. Increase complexity. not Dry, not single responsibility Shows example of a Controller with over 3500 lines of code after moving "a ton of code out"..probably had 7k lines of code before reducing. Identified 5 patterns for reuse Regular Javascript 1. Inheritance - good for shared behavior but easy for hierarchy to become too deep and hard to share common code; How? a. use injector below in child controller and then         $injector.invoke(ParentController, this, {$scope, $scope})      b. ChildContro

I love this awesome tool web sequence diagrams for creating sequence diagrams was introduced to me by a colleague about 6 months ago and loved it within an hour so easy to create and edit diagrams, just type in text and see the diagram appear, like magic! fast enough to use in design collaborations with colleagues if you need examples, then click examples on left and it will add that text yuml.me looks very useful too, especially for diagrams other than sequence diagrams their use case drawing tool seems feature rich likewise for class view (inheritence, cardinality etc.) I've used gliffy.com  quite a bit but I prefer web sequence diagrams because faster, besides gliffy are beginning to charge now plantuml looks rich and comes recommended by an eclipse user. I have not tried myself and it does require an install. Thankfully theres other good free ones out there. I used TogetherJ many moons ago and it looks like thats now provided by Borland (they still around?) a

angularjs ui-router is pretty cool, we use it in our app now but have not yet used query string parameters (e.g. ?p1=age&p2=height). But now we need to. we're now adding a feature which is basically a report generator and its a good use case for query string parameters once on the page then you're basically in that ui-router "state" users can select filters etc. from dropdowns which will reload the data but should not destroy/recreate any controllers or ui widgets (we stay on the page and do not state transition) yet we do want to update the url for deep links and back button support we don't know the complete list of possible filter choices, but know it should be data driven and will change by report  urls to support this report feature are will be something like thus /reports  /reports/sales  /reports/sales?region=west&time=weeks so we need to use query string parameters Below are some of the things I discovered with ui-router query strin

We support IE9+, Chrome, FF and Safari but not mobile or Opera..we want to warn users on unsupported browsers Understand browser sniffing is bad (too volatile: opera is webkit, IE11 is not IE etc), feature detection is better check this ou:  IE11 pretends not to be IE (I'd probably do same if I had family like that!). So you can't browser sniff for "MSIE" since its not there any more in IE11. Our solution, we do a mix of feature detection and browser sniff 1. first feature detect: check for window.performance which is supported in IE9+, Chrome and FF ..great! but also Opera and wekbit mobile...but not Safari So we browser sniff to exclude Opera and Mobile 2. if no window.performance then check for Safai by browser sniff navigator.userAgent I don't like it and its not ideal but best thus far.

I needed to add a hover glow effect to a font icon, we use flatui which uses fonticons (bootstrap v3 has switched to using font icons now) I tried box-shadow on the font icon span, but there was some spacing above and below the span with the font icon. It did not look good.         &:hover .icons-bar a > span {             box-shadow: 0px 0px 5px 5px #fff;        }      <div class="icons-bar">        <a ng-click="toggleOpen()">         <span class="fui-mail">         <span>         </span>         </span>        </a>    </div> ....sooo I pinged a colleague who had the bright idea of using text-shadow instead of box-shadow. That worked! text-shadow takes 4 values: - x co-ordinate - y co-ordinate - blur radius (optional, create a blue effect by pixel size...the is key) - color of shadow Using 1 text-shadow can add a nice glow effect to one corner, but I neede

Anti-patterns are patterns you should not be implementing. There are already a number of guidelines such as use directives only for dom manipulation, use of modules etc. Here's my running list for angularjs of ones I also feel are important. I'm no saint when it comes to these, I've probably implemented all of them at one stage or another. Controllers doing too much (thin Controllers fat Services) In angularjs, its easy to make behavior available from Controllers by adding functions to scope. Need to delete someone from a list? easy add a method on scope and call the delete. Plus models in angularjs are often portrayed as simple plain old javascript objects. Again easy to put the model on scope as use as an ng-model on the page. Many examples and tutorials show this; partly as a shortcut just to illustrate something else but none the less people see it enough times and it can become in-grained Here's the problem with that. Your controllers can quickly contain

If you've used angularjs for any time then you'll have come across service, factory and provider and probably be confused (at least I was). Here's a good post about when and why to use each in stackoverflow, especially the answer by allenhwkin But how do we add prototype functions? Starting with allenhwkins code I created this plunkr which defines a CarFactory that sets a function on the prototype .service() and .factory() are application wide singletons I tested both variations of creating a service using .factory() vs .service() In both cases, I injected the Service into a controller (standard angular dependency injection) and set a value in the Service using a setter Then I inject into other controllers including separate pages and the value I previously set is still set for the Service injected For the standard way you code .factory() and .service(), both are truly application wide singletons. If you set a value its set in the singleton app wide no matter

All my tests are broken, what am I to do, no sleep till fixin', I got them broken test blues Two hundred and fifty nine tests broken, That's a lot to work through, I wish I'd never spoken, I got them broken test blues Ha ha, everyone on the team has experienced the broken test blues. I coined this ditty as I thought about it and fixed my own broken tests. There's more... 12 broken tests, sitting in the console, 12 broken tests, sitting in the console if 1 broken test should get quickly fixed there would be 11 broken tests, sitting in the console, 11 broken tests, sitting in the console

Warning: if you need to set cookie expiration, httpSecure, path or subdomain then ngCookies doesn't support as of v1.2.7. I plan to use jquery-cookie.js which angular issues also reference, and there is a number of issues open related to this gap in $cookies. Angular js provides support for cookie manipulation in the core library file angular-cookies.js (v1.2.7). That file defines a module ngCookies with 2 factory services: - $cookies - $cookieStore For setting of a simple property on a cookie then $cookies is the factory to use. For setting js objects (key-value pairs) in the cookie then $cookieStore is what to use. To use:  1. include the angular-cookies.js file in yout html 2. include the module ngCookies as a module dependency where you wish to use 3. request $cookies or $cookieStore (or both) to be injected by the dependency injector Using $cookie.  With $cookie you can treat a cookie name as a property on $cookie.   var cookieValue = $cookies.cookieName;  

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l

Believe it or not, but IE9 and below has a limit on the number of css selectors which can be in any one stylesheet Here's how we discovered it: we'd build a minified build of css into one file for staging and production. Load the app in Chrome and IE10, all is ok. Load in IE9 and its like some styles are just not there. Looking in IE9s css debugger I could see many of our custom styles were missing (IEs debugger aint Chrome debugger but its not bad either) I had to wrap up some work in progress (angular.js core library upgrade) but started to troubleshoot after that. Normally one would suspect some IE quirky rule which busts the css but with such a large failure I surmised there must be a large reason, not a simple rule failure. So, no "pussy-footing" around with this problem. I recreated the stage build locally (we have a good deploy grunt script) and just started hacking at the one large css file cutting out large chunks and reloading the css. When load the