Health to the Web

My links and notes as I learn more about React "React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time." "React is all about building reusable components. In fact, with React the  only  thing you do is build components." I'm finding the React docs are pretty good for a beginner I worked  on this tutorial and built it out. Nice touch that they include all you need including simple server in the starter kit. Allows me to build something straight away. R eactDOM.render() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument The ReactDOM module exposes DOM-specific methods, while React has the core tools shared by React on different platforms props  are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mu

Just read a good article on Angular App Structure .  I left a comment and as I wrote it I realized (duh) that a significant part of the problem is one of consistency: Organization by type is inconsistent with what the logical application architecture is.  Over time, that inconsistency leads to bad design decisions and all other kinds of mistakes large and small. When there is consistency through the app from features to architecture to physical code, it makes it easier for everyone, easier to think and reason about the app, make design decisions, add more code, share a common terminology, work together etc. And when I say "easier for everyone" I include the product team, qa, management, designers and developers. Thats not to say there can't be differences between logical architecture and its physical manifestation. Sometimes that is necessary. But I think its works best if the logical and physical are mostly in synch and material differences are exceptions.  Buil

Well, the Twixt team (of which i'm a member) heard the kind of news on Tuesday Nov 17 2015 that you really don't want to hear: "all Twixt positions eliminated immediately" Big surprise. Business Unit head, senior mgt, product, support, backend and frontend teams, over 20 people, all laid off. Including myself. Wow. Twixt was started almost 3 years ago as the first new Product AppNexus built in a number of years. Twixt was the brainchild of Andy Atherton, business lead and Vlad Gorelick eng lead. I started in August 2013 when there were 6 devs. Since then the team grew to over 20 people spread over San Francisco and Mountain View offices. Twixt was a startup within a startup (AppNexus). The twixt team was purposely located on the opposite coast from AppNexus in NYC to allow it full freedom to grow and innovate. Twixt went live over a year and a half ago. At the end of 2014 we exceeded our targets for customer spend. We were all excited and proud when over $100M in s

I almost forgot about this one. I participated in a video shoot as promo for working at AppNexus. Man, I'm so "deer in headlights".

This is a technology blog about technology I use. But now and again I read a business article which I think is so right I will reference it. This is such an article recently published on Ad Exchanger. Well worth a read. " I believe that in 2015, ad tech hit the second stage, the Peak of Inflated Expectations, and is now just beginning its inevitable journey through the Trough of Disillusionment. Does this mean that ad tech was overhyped? I would argue that, in some respects, the answer is yes." and... " Lastly, put a halt on the growth story. Every business seems to want to tell a growth story. And yes, of course, it’s good to know that your ad tech company is growing. But bear in mind that the vast majority of ad tech providers are private firms, so no one with any experience believes the growth rates you’re claiming. "

We're doing it! Upgrading angular 1.2.18 to 1.4.7 There are breaking changes to fix as well as some new features to use. Here's what I found as I upgraded. I downloaded the zip file from angular code and then moved the files needed into app. Here's what we've found: 1. Update all things karma:  1.1 update your karma.conf to use latest libraries  1.2 use latest angular-mocks.js files I forgot this and lots of unit tests broke (moment of panic) so save yourself and update all things karma first. 2. We use ui-date for dates and the version we had failed with latest angular. I updated to latest ui-date code but found it has a known issue with manual entry. I modified the library code to wrap in a try catch as suggested in the issue. I'd prefer not to do that and prefer to check if date is valid but such validity checking is complex. 3. we wrote a couple of directives to check before and after dates; they pushed through a change to force validators to run

I was debugging an exception in our app which is running the minifed build (uglifyjs). Thanks to Chrome, {} allows you to unscramble minified code, so at least its more readable to the human eye Our code was:                     if (seller.state === 'New') {                         model.readonly = true;                     } the minifier converted it to:                 "New" === seller.state && (model.readonly = !0) pretty neat eh! an interesting way to write an if statement. However before rushing to adopt that as a style think about how easy both are to understand. As developers we should try to write code that's easy for others to understand I could write a cool looking if statement as the minifier did...but that's not as understandable to a human as the original version. Usually, over time, all your team will be reading and changing your code. Write good clear, understandable code. Let the optimizer optimize it. p.s. we're

I attended the HTML5 Developer Conference Oct 19 & 20 2015. Below are some brief notes from the sessions I attended. Videos and slides should be up soon. Most exciting new technology: css grid layout, I want it now, sooo bad Coolest session: Prototyping the Internet of Things with Firebase (so inspired I ordered an Arduino board to hack with my son) Best phrase: "Web has changed from where you get things to where you do things" Its here now: ES6 (widespread adoption is imminent) ES6 for Everyone! Speaker: Jamund Ferguson, Paypal - a good presentation but I'm already a fan of E6 - destructuring is so cool, arrow functions great etc - http://html5devconf.com/speakers/jamund_ferguson.html#session Falcor: One Model Everywhere Speaker: Jafar Husain, Netflix - used by Netflix, very interesting idea, very suitable for NetFlix use case i.e. returning large amounts of data, taxomonies, for client to render as well as search thru the json - I'd

One of my teammates shared this with the team the other day: The Way of Testivus I love it and want to share it. If you write code, write tests Don’t get stuck on unit testing dogma Embrace unit testing karma Think of code and test as one The test is more important than the unit  The best time to test is when the code is fresh Tests not run waste away An imperfect test today is better than a perfect test someday An ugly test is better than no test  Only fools use no tools Good tests fail Tests prove the code works. Tests catch bugs.  Tests provide a "safety net" so you can make changes to and refactor code and be confident it still works.

We are developing angularjs .services() which have significant common behavior. We want to reuse that code and js inheritance and mixins are options to do that. There are articles out there about this, heres a good one for .factory() which defines a function constructor and more on stack overflow as well as this good post . I took a mixin approach and implemented as follows:     ChildService.$inject = [     'ParentService'     ];     /**      * Service constructor      */     function ChildService(             ParentService) {         // mixin from parent using angular.copy         // note: using copy because angular.extend() does not safely mixin non primitive properties         angular.copy(ParentService, this);         this. doSomething = doSomething;         // local methods (some private, some public)         function doSomething(params) {         }     } I'm copying methods and properties from ParentService to ChildService. This is only sui

We upgraded to the latest version of Twitter Bootstrap v3 a few months in the summer of '15. We were using a mix of bootstrap.js, angular-strap and ui-bootstrap for various widgets. In some cases they were conflicting with each other. In addition we had customized some 3rd party libraries, (in some cases for reasons no longer relevant). So as well as upgrading Bootstrap we wanted to cleanup and reduce our library dependencies. We use Flatui a ui style library which sits on top of bootstrap. Here's what our tech stack looks like now: Upgraded to twitter Bootstrap v3.3.5 using the style files only (not bootstrap.js) Upgraded to Flatui pro 1.3.2 (for css and js for checkbox/radios only) Upgrade ui-bootstrap to v0.12.0. Standardized on ui-bootstrap for both <select> and dropdowns (as well as other widgets such as dialogs). This means we don't need twitter bootstrap.js nor do we need angular-strap files any more. So far we have removed net 11 3rd party library fi

yeahhh! ES6 here and its good ES6 is latest approved version of javascript Lots of cool new features added to the language ES6 is here, but Browsers are still adding support *Notice red, click cell to see details Checkout MS Edge!, not bad support for ES6 So what to do if I want to write ES6 now? Use a transpiler, e.g. babel.js, traceur, typescript etc to write in ES6 and then covert it to ES5 using the transpiler (e.g. grunt task) I've been reading Exploring ES6 a free online book by Alex Rauschmayer (thanks Alex!) I use babel.js repl tool to do simple real time coding for examples. let and const let and const replace var let and const are block scoped, not function scoped like var but there are some differences so need to be careful if changing old code because let and const are not hoisted like var const variables cannot be changed; use them for immutable vars let and const mean we don't have to use IIFE to create local variables (can just use a block

Angular cleans up and unbinds listeners and watches on scope and also unbinds directive elements (so you don't need to worry about those e.g. calling element.off() in a directive destroy). "Listeners registered to scopes and elements are automatically cleaned up when they are destroyed,"  - ok so you don't need to unbind listeners from scope or element But long running timeouts/intervals should be cleaned up on destroy. Short running timeouts can be assumed to be safe (completed before user leaves that code). "Any listeners that we manually add or intervals or timeouts that are currently executing need to be cleaned up in $destroy event" Whats a long running interval/timeout? I'd say 500ms and over should be explicitly released. Directives can be a source of leaks. Any listeners to service layers or to other DOM elements must be explicitly unbound on directive destroy (directive scope gets destroy event, so does the element). "...but if yo

My employer, AppNexus, gave me the opportunity to attend the OReilly Fluent conference in San Francisco (a few blocks from our office) and I had a good 2 days. I totally got into the "Fluent Code Game". You have to collect 12 stickers from various sources at the event. Each sticker usually has 1 line of code and its like a code puzzle you need to put together. Solve the puzzle, run the code in the console on their page, get a 2 digit code and be one of 1st 400 in line to get a free Fluent Hoodie! Some devs who came by our booth said "its too much work" and it was more work than expected but but it was also fun. The solution is below and I did win a hoodie! I had fun hunting and collecting the stickers, thinking and solving the problem with my colleague Ward and the excitement of standing in line with 100 or so other like minded js devs to collect our hoodie. Nice work OReilly! Conference I attended a number of sessions including "Modular Ja

As a team we adopted John Papas Angularjs style guide at the end of 2014. The Anguarjs communities understanding of best practices for Angularjs use has come a long way is a short time. I can say now having adopted and used it that John Papas style guide is a good step forward. We've been developing with Angularjs since 2013 and over that time our Angularjs code base looks quite different style wise. It looks like it was written by many (talented) individuals for various reasons such as our use of best practices evolved. Ideally the codebase should look as if written by one person: easy to learn and understand other peoples code. So as a team we wanted to write better Angularjs code. We are also looking ahead to Angular 2.0. There are significant changes in that release and where possible we'd like to write code now that will make it easier to adopt Angular 2.0 in future. As a team we investigated various angularjs coding standards/style guides such as googles, codeless,

We used to include mock test data with our Karma test code. When you build up a large body of complex tests the test data setup can run to hundreds of lines. It can be hard to read and understand. Oftentimes the same data is needed across many unit test suites and is repeated. Our solution is to create a /mock-data folder and put into it js files with mock json data for common json objects used by our unit tests e.g. customer object. When we call an expectGET() then we return a copy of the mock data e.g.  $httpBackend.expectGET('/api/...../').respond(angular.copy(CUSTOMER_MOCK_DATA)); If you build your mock test data well you can cover multiple tests with one mock data definition. For test cases that need unique combinations I find that I just copy the mock data object and then tweak select properties as necessary in the test or within a block of tests. e.g.  var myDeCustomer = angular.copy(CUSTOMER_MOCK_DATA);         myDeCustomer.profile.locale = "de-de";