Thursday, June 1, 2017

Debugging Jasmine Tests with Karma and Visual Studio Code

  1. The Visual Studio Code Debugger only works with specific combinations of the Debugger for Chrome, Visual Studio Code, Angular CLI and Angular.  Make sure you are using the latest version of all libraries, extensions and tools or you will get the dreaded Breakpoint ignored because generated code not found.  For example, Angular 4.0 with the 1.0 version of Angular CLI does not work but Angular 4.1.3 with Angular CLI 1.0.6 works fine.
  2. Install the Visual Studio Code Extension, Chrome Debugger by clicking on the extensions icon on the left in Visual Code, searching for Chrome and clicking Install.
  3. On the Debug menu, click Open Configurations.




4. Modify your .vscode\launch.json to be this:
{
"version""0.2.0",
"configurations": [
{
"type""chrome",
"request""launch",
"name""Launch Chrome against localhost",
"webRoot""${workspaceRoot}"
},
{
"type":"chrome",
"request""launch",
"name""Launch Chrome against Karma",
"webRoot""${workspaceRoot}"
}
]
}
5.  CLOSE ALL Chrome Browsers
6.  Run npm start at the command line in the directory for your application.

7. Run karma start at another command window in the directory for your application
8. Click the Debug icon on the left
9. Set a breakpoint
10. Choose Launch Chrome against Karma.  After the browser comes up, refresh it.




Friday, April 28, 2017

Jasmine Examples

Example of a Simple Test

describe('a super simple test', () => {
it('should be true', () => {
expect(true).toBe(true);
});
it('should be false', () => {
expect(false).toBe(false);
});
});

Setup and Teardown


describe("A set of tests using beforeEach and afterEach", () => {
var x = 0;
beforeEach(function() {
x += 1;
});
afterEach(function() {
x = 0;
});
it("is just a function, so it can contain any code", () => {
expect(x).toEqual(1);
});
it("can have more than one expectation", () => {
expect(x).toEqual(1);
expect(true).toEqual(true);
});
});

Expect Matching


expect(myValue).toBe(true); // Use JS strict equality
expect(myValue).not.toBe(true);
expect(myValue).toEqual(482); // Use deep equality, recursive search through objects
expect(myValue).toBeDefined();
expect(myValue).not.toBeDefined();
expect(myValue).toBeUndefined();
expect(myValue).toBeTruthy(); // Boolean cast testing
expect(myValue).toBeFalsy();
expect(myValue).toContain('sometext'); // Find item in array
expect(e).toBeLessThan(pi);
expect(pi).toBeGreaterThan(e);
expect(x).toBeCloseTo(y, 2); // x to be close to y by 2 decimal points
Exception Matching
expect(function() {
MyMethod(1, '2')
}).toThrowError();
expect(function() {
MyMethod(1, '2')
}).toThrow(new Error('Invalid parameter type.')

Spies

Spies can stub any function and tracks calls to it and all arguments.
A spy only exists in the describe or it block in which it is defined, and will be removed after each spec.

describe('SuperAwesomeModule', function() {
beforeEach(function() {
// track all calls to SuperAwesomeModule.coolHelperFunction()
// and also delegate to the actual implementation
spyOn(SuperAwesomeModule, 'coolHelperFunction').and.callThrough();
});
describe('featureA', function() {
it('should ...', function() {
expect(SuperAwesomeModule.featureA(2)).toBe(5);

// matchers for spies
expect(SuperAwesomeModule.coolHelperFunction).toHaveBeenCalled();
expect(SuperAwesomeModule.coolHelperFunction).toHaveBeenCalledTimes(1);
});
});
});
Spies: and.returnValue
Useful when you want to stub out return values
describe('SuperAwesomeModule', function() {
beforeEach(function() {
spyOn(SuperAwesomeModule, 'coolHelperFunction').and.returnValue('myValue');
});
});

Karma Resources

Karma is a test runner for testing JavaScript and TypeScript.  
Install Karma
yarn global add karma-cli
Run all tests
karma start 
Testing Angular 2 Apps with Jasmine and Karma
https://www.youtube.com/watch?v=yG4FH60fhUE
Unit Testing Recipes for Angular 2
http://slides.com/victormejia/unit-testing-ng2#/ 

Example karma.conf.js


This file uses the new Angular CLI (the namespace has changed).  

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

Thursday, April 13, 2017

Angualar CLI Resources

Links

Usage

Installation
npm install -g @angular/cli
New Project
ng new <project-name>
Generate a component
ng generate <component-name>
Run the server on http://localhost:4200
ng serve <project-name>

Videos

How to get productive immediately on Angular 2 with Angular-CLI
https://www.youtube.com/watch?v=sc8wAwn4dn4&t=1s
Simple Angular 2 App With Angular CLI
https://www.youtube.com/watch?v=QMQbAoTLJX8

Tutorials

The Ultimate Angular CLI Reference Guide
https://www.sitepoint.com/ultimate-angular-cli-reference/
Angular 2 Tutorial: Create a CRUD App with Angular CLI
https://www.sitepoint.com/angular-2-tutorial/

Cheat Sheets

Yarn Package Manager Resources

Overview


Yarn is a node package manager for your code that is better than npm or bower. Yarn is created by Facebook in collaboration with Google, Exponent, and Tilde.
Benefits
  • Faster than npm. It is around 3 to 4 times faster than npm without any cache. It downloads the dependencies in parallel. It is much faster once it is cached. https://www.youtube.com/watch?v=yksxtxqORvY
  • Deterministic. It will install the same consistent reproducable package dependencies and versions. npm depends on the install order and is non-deterministic (it may download a new minor or patch version) which could break your project.
  • Works offline
  • Supports other repos/formats
  • Backward compatible to npm.
  • Has Emojies 😎

Setup

Install Yarn
https://yarnpkg.com/en/docs/install OR npm install -g yarn

Configure Proxy
yarn config set proxy http://username:password@yourproxyserver:8080/
yarn config set https-proxy http://username:password@yourproxyserver:8080/

Change Angular CLI to use yarn
ng set = --global packageManager=yarn
Migrating from npm. Run this in your project directory.
yarn

Videos

Chris Courses: Intro to Yarn
https://www.youtube.com/watch?v=7n467QmiANM
Coding The Smart Way: Yarn Package Manager
https://www.youtube.com/watch?v=6JxSYFnW4rc

Tuitorials


Cheat Sheets

Tuesday, March 21, 2017

Angular 2 Material Design Resources

Material Design components for Angular apps

Main Sites


Videos

Elad Bezalel - Angular Material 2 | AngularUP 2016
https://www.youtube.com/watch?v=gLbWq9fSEgY
Angular 2 Material - First Look
https://www.youtube.com/watch?v=ngkVXUCBozc
Material Design With Angular 2 Tutorial
https://www.youtube.com/watch?v=sRSnftoUpxg
Angular 2 Material Design - Tutorial For Running the Official Demo App Using The Angular 2 CLI
https://www.youtube.com/watch?v=Wyorwh3rdr8

Tutorials

Node Package Manager Resources

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Main Sites


Install node and NPM
https://nodejs.org/en/download/

Configuring the Proxy
http://stackoverflow.com/questions/7559648/is-there-a-way-to-make-npm-install-the-command-to-work-behind-proxy?rq=1


Videos


What is npm? In 2 minutes
https://www.youtube.com/watch?v=ZNbFagCBlwo

NPM Playbook
https://app.pluralsight.com/library/courses/npm-playbook/table-of-contents

Getting started with npm
https://www.youtube.com/watch?v=pa4dc480Apo&list=PLQso55XhxkgBMeiYmFEHzz1axDUBjTLC6


Tutorials


Node.js - NPM
https://www.tutorialspoint.com/nodejs/nodejs_npm.htm


Cheat Sheets


https://www.cheatography.com/gregfinzer/cheat-sheets/node-package-manager/
https://gist.github.com/AvnerCohen/4051934
http://browsenpm.org/help
http://www.codechewing.com/library/node-js-npm-cheatsheet/
http://blog.ijasoneverett.com/2013/05/npm-cheat-sheet/

MOQ Resources


The most popular and friendly mocking framework for .NET

Main Site


https://github.com/moq/moq4

https://www.nuget.org/packages/Moq/

Videos


Mocking With Moq
https://app.pluralsight.com/library/courses/mocking-with-moq/table-of-contents

Introduction to MOQ
https://www.youtube.com/watch?v=6GEn84IV53Q&list=PL6tu16kXT9Pq6aZHjfWYYkM6d3gGfb_uy

How to Use MOQ With C# For Test Driven Development
https://www.youtube.com/watch?v=Krj3-h198KQ&t=184s

Creating Mock Objects for C# Unit Tests, using Moq
https://www.youtube.com/watch?v=6hgXp2zlvkI&t=306s

Tutorials


Quickstart
https://github.com/Moq/moq4/wiki/Quickstart

Moqing quick reference 
https://gilesey.wordpress.com/2013/08/31/moqing-quick-reference-cheat-sheet/

Beginning Mocking With Moq 3
http://www.codethinked.com/beginning-mocking-with-moq-3-part-1


Cheat Sheet


http://www.jankowskimichal.pl/wp-content/uploads/downloads/2016/01/Cheatsheet_Moq_xUnit_AutoFixture.pdf

Friday, March 17, 2017

Testing Angular 2 with Jasmine

Videos


Testing Angular 2 with Jasmine
https://app.pluralsight.com/player?course=angular-fundamentals&author=joe-eames&name=angular-fundamentals-m14&clip=0&mode=live

Testing JavaScript with Jasmine and TypeScript
https://app.pluralsight.com/library/courses/javascript-jasmine-typescript/table-of-contents

TDD with Angular 2
https://www.youtube.com/watch?v=FMyduWydQv4
https://www.youtube.com/watch?v=2u7mHBCCSQ4
https://www.youtube.com/watch?v=8ZLFRKqGRv0

Tutorials

Unit Testing Recipes for Angular 2
http://slides.com/victormejia/unit-testing-ng2#/

Testing Components in Angular 2 with Jasmine
https://semaphoreci.com/community/tutorials/testing-components-in-angular-2-with-jasmine

Setting up Angular 2 Testing Environment with Karma and webpack
https://medium.com/@laco0416/setting-up-angular-2-testing-environment-with-karma-and-webpack-e9b833befd99#.z28elywvy

Testing Angular 2.0.x Services and Http with Jasmine and Karma
http://chariotsolutions.com/blog/post/testing-angular-2-0-x-services-http-jasmine-karma/

A Test-Driven Development Introduction to Angular 2
https://keyholesoftware.com/2016/05/16/test-driven-intro-angular2/

Angular 2 Testing In Depth: Services
https://dzone.com/articles/angular-2-testing-in-depth-services

TDD with Angular 1 (Good overview of TDD)
https://www.slideshare.net/iquark/tdd-basics-with-angular-and-jasmine 


Cheat Sheet

https://www.cheatography.com/citguy/cheat-sheets/jasmine-js-testing/

Microsoft Test Resources

Videos


Unit Testing with MSTest
https://app.pluralsight.com/library/courses/mstest/table-of-contents

MSTest 
https://www.youtube.com/watch?v=bk5ClNki0bQ&list=PLlsKgYi2Lw72Glr4QeuN0WZjuOgdzdAVO

Tutorials

https://msdn.microsoft.com/en-us/library/ms182532.aspx


Cheat Sheet

https://www.cheatography.com/gregfinzer/cheat-sheets/mstest/

Tuesday, March 14, 2017

Protractor Resources

Protractor allows Selenium to test Angular Web Applications.  Without Protractor, Selenium cannot see the Angular DOM.  Protractor.NET is a wrapper around Selenium Web Driver.  Protractor.NET differs from regular Protractor in that Protractor.NET can be used within C# instead of JavaScript.  

Main Sites

Tutorials


Developing Protractor Tests in C#

Introduction to Protractor

Testing with Protractor

Writing End to End Tests with Protractor

Protractor.JS Example

FAQ



Videos


Pluralsite: Introduction to Protractor

QAShahin: AngularJS Protractor

Jim Lavin:  An Introduction to AngularJS End to End Testing with Protractor

Julie Ralph End to End Angular Testing with Protractor

HellowWorldSeries: Introduction to Protractor

David Mosher:  Testing Strategies for Angular JS

Tony Alicea: Programming AngularJS and Protractor
https://www.youtube.com/watch?v=ejBkOjEG6F0&list=PL4e0loPYKGRsECERNfjCOXSovtg_gvcRe

Monday, March 13, 2017

Selenium References

Selenium is a user interface testing framework that works with C# and Java.

Main Site

http://www.seleniumhq.org/

Videos


UI Test Automation for Browsers and Apps Using the WebDriver Standard
https://channel9.msdn.com/Events/Build/2016/P499

How To Create a Test Automation Framework Architecture With Selenium
https://www.youtube.com/watch?v=DO8KVe00kcU

Execute Automation: Introduction to Selenium in C#
https://www.youtube.com/watch?v=mluLgBywW0Y&list=PL6tu16kXT9PqKSouJUV6sRVgmcKs-VCqo

Tutorials

http://learnseleniumtesting.com/basic-webdriver-and-c-sharp-script-for-beginners/



Quick References

https://dzone.com/refcardz/getting-started-selenium
https://dzone.com/refcardz/getting-started-selenium-20
https://www.cheatography.com/narayanan-palani/cheat-sheets/selenium-webdriver-cheat-sheet/
https://www.cheatography.com/rajeshcdp/cheat-sheets/selenium-webdriver/

JIRA References

AgileZen is no longer taking any new customers so I have been forced to use something else.  While JIRA is not as good as AgileZen, it is probably the most popular.

JIRA Documentation

https://confluence.atlassian.com/jirasoftwarecloud/jira-software-documentation-764477791.html

Videos


How To Use JIRA tool For Scrum Projects
https://www.youtube.com/watch?v=217g4_yFKtQ&t=36s

JIRA Tutorial: A Complete Guide for Beginners
http://www.guru99.com/jira-tutorial-a-complete-guide-for-beginners.html

Scrum Development with Jira & JIRA Agile
https://www.pluralsight.com/courses/scrum-development-jira-agile

JIRA Fundamentals
https://www.pluralsight.com/courses/jira-fundamentals

Kanban Development With Jira Agile
https://www.pluralsight.com/courses/kanban-development-jira-agile


Cheat Sheets


JIRA Shortcuts
https://www.cheatography.com/ovi-mihai/cheat-sheets/jira/

JIRA Cheat Sheet
https://www.cheatography.com/c-l/cheat-sheets/jira/

Monday, February 20, 2017

LESS References

LESS transpiles into CSS.  Here are some resources:

Main Site

http://lesscss.org/

Tutorials

http://www.hongkiat.com/blog/less-basic/

https://docs.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa

http://www.omegaweb.com/learning-less-the-dynamic-stylesheet-language/#.V7FhZPl97IU

http://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less/

Videos


TheNewBoston:  YouTube Video Course
https://www.youtube.com/watch?v=YQYJUeokqOY&list=PL6gx4Cwl9DGCshbAx1JpBtNoKh8iKAAiy

Entity Framework Resources


Videos


Microsoft Virtual Academy

https://mva.microsoft.com/en-US/training-courses/implementing-entity-framework-with-mvc-8931?l=e2H2lDC3_8304984382

Fabio Scopel: Intro to Entity Framework 5.0

https://www.youtube.com/watch?v=EPXFc6pAnMs&list=PLt2cGgt6G8WqLLhZXFLmnYMUmK4pI4WAj

kudvenkat:  Entity Framework Tutorial

https://www.youtube.com/watch?v=Z7713GBhi4k&list=PL6n9fhu94yhUPBSX-E2aJCnCR3-_6zBZx


SeeSharpCode:  Entity Framework

https://www.youtube.com/watch?v=K4x6eoG7hwY
https://www.youtube.com/watch?v=dXvSSnQJWPo

Jamie King:  .NET Entity Framework

https://www.youtube.com/watch?v=v2tO15ctPyY&list=PLRwVmtr-pp06bXl6mbwDfK1eW9sAIvWUZ


Ripon Datta:  ASP.NET MVC 5 with Entity Framework

https://www.youtube.com/watch?v=QrEUNb9ofAk&list=PLJUoF2h8Z-bqAfwW5TLkm-80sOg3iO2JF

Quick Reference


https://dzone.com/refcardz/adonet-entity-framework-object

C# and .NET Resources

I have been using C# and .NET Since it was in beta.  The overwhelming reason why it is so popular is the great Visual Studio with it's intellisense and compile time checking.  Here are some beginner courses if I had to start from scratch from nothing.

Free Courses


C# Fundamentals for Absolute Beginners

Scott Hanselman - C# For Beginners 

Mosh - Learn C# Basics in 1 Hour

Giraffe Academy - C# Tutorial - Full Course for Beginners

Bro Code - C# Full Course



Paid Courses


C# Fundamentals via ASP.NET Web Application

Code Academy - Learn C#

Udemy - C# for Beginners

Pluralsight: C# Fundamentals

CSS Resources

Cascading Style Sheets (CSS) is used on every every website.  Below are some good resources:

Good reference sites:
http://www.w3schools.com/css/

Examples of how CSS can completely change the look and layout of a page:
http://www.csszengarden.com/

Tutorials

http://www.quackit.com/css/

https://www.tutorialspoint.com/css/index.htm

Videos


CSS Jump Start
https://mva.microsoft.com/en-US/training-courses/css-jump-start-8474?l=WQPS1WXz_9104984382

HTML5 & CSS3 for Absolute Beginners
https://mva.microsoft.com/en-US/training-courses/14207


CSS Quick References

https://www.cheatography.com/davechild/cheat-sheets/css2/

https://www.smashingmagazine.com/2010/05/css-2-1-and-css-3-help-cheat-sheets-pdf/

Bootstrap References

Bootstrap is a grid based responsive design framework that makes it easy to turn your website into something that can look good on everything from a large TV to a tiny smart phone.

Main Site
http://getbootstrap.com/

Bootstrap Glphicons
http://glyphicons.bootstrapcheatsheets.com/

Tutorial

http://www.quackit.com/bootstrap/tutorial/


Video Courses


TheNewBoston Bootstrap course on YouTube
https://www.youtube.com/watch?v=qIULMnbH2-o&list=PL6gx4Cwl9DGBPw1sFodruZUPheWVKchlM

Bootstrap Tutorial
https://www.youtube.com/watch?v=gqOEoUR5RHg

Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS
https://www.youtube.com/watch?v=no-Ntkc836w

Bootstrap Beginner Crash Course
https://www.youtube.com/watch?v=5GcQtLDGXy8

Building Responsive UI with Bootstrap
https://mva.microsoft.com/en-US/training-courses/building-responsive-ui-with-bootstrap-8378?l=BDfMAHIz_3004984382


Cheat Sheets


Bootstrap V4 Cheat Sheet
https://www.cheatography.com/kemmojoo/cheat-sheets/bootstrap-v4/

Bootstrap Cheat Sheet
https://www.cheatography.com/masonjo/cheat-sheets/bootstrap/

Angular 1 Resources

Angular 2 is out but if you need to maintain your Angular 1 code, here are some great resources.

This is the version 1.0 site for Angular:
https://www.angularjs.org/

1.6.x is the latest version of Angular 1 before the rewrite of Angular 2
Go here to reference Angular 1:
https://code.angularjs.org

Videos


Angular 1 Course on YouTube
https://www.youtube.com/watch?v=QETUuZ27N0w&list=PLoYCgNOIyGAApoDfJHjmMgGNlYenKg5jO

Pluralsight Angular Fundamentals
https://app.pluralsight.com/library/courses/angularjs-fundamentals/table-of-contents

Pluralsight Angular Fundamentals Github Reposotory
http://github.com/joeeames/AngularFundamentalsFiles

Visual Studio Code for Angular developers
https://channel9.msdn.com/events/JavaScript-Webinar-Series/Visual-Studio-Code-for-Angular-developers/Visual-Studio-Code-for-Angular-developers

TypeScript & Angular
https://channel9.msdn.com/events/JavaScript-Webinar-Series/TypeScript--Angular/TypeScript--Angular

On a Cloud
https://channel9.msdn.com/Series/onacloud/Angularjs


Angular 1 Quick References

https://www.cheatography.com/proloser/cheat-sheets/angularjs/

https://www.cheatography.com/proloser/cheat-sheets/angularui-router/

https://www.cheatography.com/roman/cheat-sheets/angular-js-filters-v1-3-0/

https://www.cheatography.com/cheatography/cheat-sheets/angularjs-core-services/

https://www.cheatography.com/cheatography/cheat-sheets/angular-js/

https://www.cheatography.com/cheatography/cheat-sheets/angular/

Friday, February 17, 2017

JavaScript Resources


According to a survey on Stack Overflow, JavaScript was the most used Language for Developers in 2016.
http://stackoverflow.com/research/developer-survey-2016

Here are some resources to learn JavaScript as a beginner or become an advanced JavaScript developer.

Good reference Sites

http://www.w3schools.com/js/default.asp
http://www.devguru.com/content/technologies/javascript/home.html

Testing JavaScript Online

https://jsfiddle.net/


Tutorial

http://www.quackit.com/javascript/tutorial/

Beginner JavaScript Courses


JavaScript for Experienced Developers
https://mva.microsoft.com/en-US/training-courses/14430

JavaScript Fundamentals for Absolute Beginners
https://mva.microsoft.com/en-US/training-courses/14194

TheNewBoston JavaScript Course on YouTube
https://www.youtube.com/watch?v=yQaAGmHNn9s&list=PL46F0A159EC02DF82

LearnCode.academy JavaScript Course on YouTube
https://www.youtube.com/watch?v=fGdd9qNwQdQ&list=PLoYCgNOIyGACnrXwo5HMCfOH9VT05znGv

Brice Wilson JavaScript Module Fundamentals
https://app.pluralsight.com/library/courses/javascript-module-fundamentals

Jesse Liberty JavaScript from Scratch
https://app.pluralsight.com/library/courses/javascript-from-scratch

Advanced JavaScript Courses


JavaScript Promises and Async
https://channel9.msdn.com/Shows/Web-Hack-Wednesday/JavaScript-Promises-and-Async

Advanced JavaScript
https://www.youtube.com/watch?v=xizFJHKHdHw&list=PL7pEw9n3GkoW5bYOhVAtmJlak3ZK7SaDf

JavaScript Closures
https://www.youtube.com/watch?v=71AtaJpJHw0

CodeAcademy Advanced JavaScript
https://www.youtube.com/watch?v=WgyCEbgUcCk&list=PLz1XPAFf8IxbIU78QL158l_KlN9CvH5fg

Chris Hawkes Advanced JavaScript
https://www.youtube.com/watch?v=NFJgDtFMHbI&list=PLei96ZX_m9sUbbrbfXOfpntLDiiOe9MR_

Tech CBT Advanced JavaScript
https://www.youtube.com/watch?v=VsvYUp61m1o&list=PLvZkOAgBYrsS6OdwTbuErnYdzyozOY1Hs

Kyle Simpson Advanced JavaScript
https://app.pluralsight.com/library/courses/advanced-javascript/table-of-contents

Write Fast JavaScript
https://channel9.msdn.com/Series/htmlperf/Part-6-Write-Fast-JavaScript

Jim Cooper JavaScript Objects and Prototypes
https://app.pluralsight.com/library/courses/javascript-objects-prototypes

Best Practices


O'Reilly Maintainable JavaScript
https://www.youtube.com/watch?v=c-kav7Tf834

Ava Luci: JavaScript Best Practices
https://www.youtube.com/watch?v=v__8ihsdsm8&list=PL7XjSnbRqMYXAb0zF66uhiEdX0tsSwGge

Jonathan Mills JavaScript Best Practices
https://app.pluralsight.com/library/courses/javascript-best-practices/table-of-contents


Quick References

https://www.cheatography.com/explore/search/?q=javascript

Wednesday, February 15, 2017

TypeScript Resources

Overview


TypeScript is a superset of JavaScript.  It improves upon JavaScript by adding type safety, namespaces, and scope.  You can actually rename a .js JavaScript file to .ts and it will function the same.  TypeScript will transpile into JavaScript.  TypeScript is created by the great Anders Hejlsberg who created TurboPascal, Delphi, and C#.  You will find it feels similar to C#, although the syntax is different, a lot of the concepts and keywords are the same.


Main Site

http://www.typescriptlang.org/


Try Out TypeScript online!

http://www.typescriptlang.org/play/index.html

Tutorials

https://www.tutorialspoint.com/typescript/index.htm

http://tutorialzine.com/2016/07/learn-typescript-in-30-minutes/

https://www.codeproject.com/Articles/802722/TypeScript-The-Basics

Videos/Courses


Andres Hejlsberg:  Introducing TypeScript
http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

Why use TypeScript instead of just using JavaScript?
https://channel9.msdn.com/Blogs/raw-tech/Why-use-TypeScript-instead-of-just-using-JavaScript

TypeScript Jump Start
https://channel9.msdn.com/Blogs/MostafaElzoghbi/TypeScript-Jump-Start1

TypeScript: From Zero to Hero
https://channel9.msdn.com/events/TechDays/Techdays-2016-The-Netherlands/TypeScript-From-Zero-to-Hero

What's New in TypeScript
https://channel9.msdn.com/events/Build/2016/B881

Anders Hejlsberg on TypeScript 2
https://channel9.msdn.com/Blogs/Seth-Juarez/Anders-Hejlsberg-on-TypeScript-2

TypeScript Fundamentals
https://app.pluralsight.com/library/courses/typescript/table-of-contents

TypeScript and Angular 2
https://channel9.msdn.com/Events/Build/2016/TypeScript-and-Angular-2


TypeScript Definition Files

http://definitelytyped.org/

Quick References

https://www.cheatography.com/gregfinzer/cheat-sheets/typescript/
https://www.sitepen.com/blog/2013/12/31/typescript-cheat-sheet/
https://github.com/frontdevops/typescript-cheat-sheet

Tuesday, February 14, 2017

Angular 2 Resources

There is a steep learning curve with Angular 2.  Fortunately there are a lot of resources out there to ramp up.

Main Site

The main site for Angular is http://angular.io.  It has documentation and a quick start which are semi-useful.

Video Courses

Course:  Angular 2, The Force Awakens

Video





Video:  Bootstrapping an Angular 2 Application in Visual Studio Code using Yeoman


Video:  Web.Dev 2: Getting Started with Angular 2.0


Video:  Introduction to Angular 2


Video:  Web Development 4: Front End Web Development


Video:  Angular 2 Course on YouTube