I a migrating all my blog posts to this blog, because as far as I have seen it has the best support for writing in markdown..

About me

I am a developer since 10 years roughly.. I love to code and spread knowledge. I love javascript and its accompanying frameworks such as grunt, gulp, angular, react etc..

Google Developer Expert, Google Developer Expert Telerik Developer Expert Telerik Developer Expert I am currently writing a book on RxJS found at angular.io/resources

Public speaking

I have done numerous public speaking at Tech conferences. If you want to hire me as a technical speaker contact me on Twitter @chris_noring or Linked In

Here is a complete listing of my speaking engagements: Speaking engagements

Organizer

Currently I organize 5 meetup groups for over 3000 developers.. In truth co organizers and the people who attend makes me better. It is a privilege to stand in front of you each and everytime and present something inspiring.

I am also one of the organizer for Angular Conference ngVikings, ngVikings

Latest posts

Typescript fundamentals

10 Jul 2016
Typescript fundamentals - part 1 This is meant to be a series of blog posts, this is part I. It is supposed to educate you enough so when someone says your next project involves typescript, you are not panicking, you might even feel so confident as to take charge. Typescript is not its own language it is a superset of javascript. Installation npm install typescript -g Features Types Typescript is about dealing with types. You...
Read more...

Git

16 Apr 2016
Git configuration git config --system System level C:\Program Files (x86)\Git\etc\gitconfig User level git config --global File dump example C:\Users\<name>\.gitconfig [gui] recentrepo = <repo> recentrepo = <recent repo> [user] name = <name> email = <email> [alias] st = status example set user name : git config --global user.name "kris kringle" set main editor for diffs etc.. git config --global core.editor "notepad++" This is easy to do in linux/mac but for this to work in windows we...
Read more...

Webpack

27 Mar 2016
webpack part I other solutions For my part I was already familiar with grunt/gulp and had just heard about webpack as this thing more and more people started to use. First thing I heard about webpack was that it was configuration heavy and I thought didn’t we just leave grunt for gulp because of it? Having tried it out it feels pretty smooth. This post will cover the very basics of web pack which is...
Read more...

Angular2 Routing Data

13 Mar 2016
Angular 2 - routing + data This blogpost is based on you having read the first part Angular 2 basics part I Bindings <img [src]="image.src"></div> <div [innerText]="title" ></div> OR <div> {{ title }} </div> Components So we learned about how to create components, @Component({ selector : 'app', template : ` <h1> {{ title }} </h1>` }) export class App { title = 'chris'; } how to place components in components @Component({ selector : 'app', template...
Read more...

Angular2 Basics

06 Mar 2016
angular 2 supported languages es5 es6 typescript Dart Bootstrapping angular 2 index.html app/main.ts app/movie.component.ts We need a bunch of sript tags to make everything work: <!-- IE required polyfills, in this exact order --> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script> And calling an entry point <script> System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: { 'api': {defaultExtension: 'ts'}, 'app': {defaultExtension: 'ts'} } }); System.import('app/main')...
Read more...

Angular Animate

03 Jan 2016
Angular animate So animation… It is built into angular, well angular animate that is. And it is pretty easy to use Why animate stuff in the first place? Well it looks nice and its more fun to develop. But remember, less is more.. Installation bower install angular bower install angular-animate ### Bootstrap index.html <html> <body ng-app="app"> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-animate/angular-animate.min.js"></script> <script src="app.js"></script> </body> </html app.js (function(){ angular.module('app',[ ngAnimate ]) })(); What can I animate -...
Read more...

Meteor

16 Sep 2015
Meteor javascript on client and server automatic updating of pages eliminates need for REST apis latency handling self-contained application bundles Technologies Javascript Node.js MongoDb, replacable (eg mysql etc) Handlebars, replacable ( eg Jade etc ) Packaging own package system, not npm Storage layered mongo on client replicated to mongo on backend Support mac, officially linux, officially windows, unofficially Install win.meteor.com MSI or exe Create app meteor create "project name" Run app cd "project name" meteor...
Read more...

Angular Browserify

02 Jun 2015
Browserify heart angular The problem You probably have a project structure looking something like this. Project structure app.js /infrastructure /login /notification /interceptors /features /user /products /projects /... /vendor /resources And more importantly an index.html file looking like this <body> ... <script src="infrasctructure/login/login.js"></script> . . . <script src="features/login/login.js"></script> . . . // vendor <script src="bower_components/angular/angular.min.js"></script> . . . 100 or so script tags.. </body> index.html You think this is OK because this is how you think...
Read more...

Angular Attribute Directives

10 May 2015
Attribute Directives So far I have been talking about element directives and the three different modes through which you can pass data. Attribute directives is built on the same principles of course but their application is different. Attribute directives are decorator directives and therefore we will look at situations where ‘elements’ or even other ‘element directives’ can be decorated.. The first thing before starting out is the feeling that you have a piece of logic...
Read more...

Angular Directives

01 May 2015
Directives First directive Declaration angular.module('app').directive('testDir',function(){ return { restrict : 'E', replace : true, transclude : true, template : '<h1>test</h1>' } }) Usage <test-dir></test-dir> Casing matters: testDir becomes test-dir in view Restrict What can it be applied to: Comments Elements, E Attributes, A CSS Replace Determines wether the custom element is being replaced with view content or just added to it false <test-dir> <h1>test</h1> // view content </test-dir> true <h1>test</h1> // view content template, templateUrl template...
Read more...

Angularjs Starting Out

16 Dec 2014
Angular So angularjs. Its easy to explain all the concepts and make this articles really long but as a developer I want to see code very early and I want information given to me in incremental steps. So if you are like me this should be really fun and hopefully educational. Worlds smallest app <div ng-app> </div> ng-app is a so called angular directive that states, your app starts here. So your app lives inside...
Read more...

Jekyll Introduction

29 Dec 2011
This Jekyll introduction will outline specifically what Jekyll is and why you would want to use it. Directly following the intro we’ll learn exactly how Jekyll does what it does. Overview What is Jekyll? Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as “a simple, blog aware, static site generator”. Examples This website is...
Read more...