Category Archives: Javascript

HTML 5

Documentation
https://developers.google.com/web/
https://www.html5rocks.com/en/tutorials

https://www.html5rocks.com/en/tutorials/file/xhr2

https://www.html5rocks.com/en/tutorials/file/dndfiles/
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

https://www.html5rocks.com/en/tutorials/workers/basics/
https://stackoverflow.com/questions/6778360/whats-the-difference-between-shared-worker-and-worker-in-html5
https://www.sitepoint.com/javascript-shared-web-workers-html5/
https://github.com/coolaj86/html5-shared-web-worker-examples
http://coolaj86.github.io/html5-shared-web-worker-examples/

https://www.html5rocks.com/en/tutorials/appcache/beginner/
https://alistapart.com/article/application-cache-is-a-douchebag
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html
https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html
chrome://appcache-internals

Comments on Angular 2 router guide

https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard
CanDeactivateGuard is used in CrisisCenterRoutingModule which is part of CrisisCenterModule which is lazy loaded by AppRoutingModule (loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule').
q: Why should CanDeactivateGuard be declared in AppRoutingModule providers? why not to CrisisCenterRoutingModule providers?
guide answer: We also need to add the Guard to our main AppRoutingModule providers so the Router can inject it during the navigation process.
my (original) comment
AppRoutingModule seems to need to know in advance (at least for lazy loaded modules) the CanDeactivate guards used classes. It's odd why this does not apply for e.g. CrisisDetailResolve which is a service too and has the same configuration parent.
the final answer
Well, it seems that indeed CanDeactivateGuard could be provided by CrisisCenterRoutingModule too instead of AppRoutingModule. 
Now the question is why then the guide pointed AppRoutingModule as the one to provide CanDeactivateGuard?
The answer I guess is that the CanDeactivateGuard is a service useful to any module and because lazy loaded modules have their own root injector this means it would be created an additional instance of CanDeactivateGuard for any lazy load module that would provide it too. CanDeactivateGuard has no state so it's useless to have more than one instance of it.

Angularjs 2

http://embed.plnkr.co/qZf6yv/

https://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning/

http://onehungrymind.com/build-a-simple-website-with-angular-2/
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects
https://www.smashingmagazine.com/2014/06/building-with-gulp/

compatibility
https://angular.io/docs/ts/latest/guide/browser-support.html

angular 2 project seed
https://github.com/angularclass/awesome-angular2#current-browser-support-for-angular-2
https://angularclass.github.io/angular2-webpack-starter/
https://github.com/AngularClass/angular2-webpack-starter
https://www.npmjs.com/package/angular2-webpack-starter
https://github.com/mgechev/angular-seed
https://github.com/NathanWalker/angular-seed-advanced
http://www.devacron.com/angular2-github-boilerplate-repositories/
http://stackoverflow.com/questions/29649578/available-yeoman-generator-for-angular-2

webpack
https://webpack.github.io/docs/
http://stackoverflow.com/questions/39548175/can-someone-explain-webpacks-commonschunkplugin
https://blog.madewithlove.be/post/webpack-your-bags/
http://webpack.github.io/analyse/

webpack lazy loading
not working for me
https://github.com/Quramy/angular2-load-children-loader
https://github.com/Quramy/ng2-lazy-load-demo

rxjs
http://blog.falafel.com/introduction-rxjs-angular2/
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

typings
https://github.com/typings/typings
https://neoheurist.wordpress.com/2016/06/20/definitely-typed/
https://blog.ionic.io/ionic-and-typings/
https://blog.mariusschulz.com/2014/05/19/using-typescripts-type-definition-files-to-get-tooling-support-for-plain-javascript

Migrating from 2.x to 3.0
http://getbootstrap.com/migration/

basics
https://egghead.io/lessons/typescript-installing-typescript-and-running-the-typescript-compiler-tsc?course=up-and-running-with-typescript
https://egghead.io/courses/angular-2-fundamentals
https://remysharp.com/2010/10/08/what-is-a-polyfill

basics javascript
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11.html
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11s01.html
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11s02.html
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11s03.html

nodejs
http://stackoverflow.com/questions/8455290/install-different-versions-of-nodejs
https://github.com/tj/n

initialize a node.js project (this creates package.json)
node init

sass vs less
https://css-tricks.com/sass-vs-less/

Immediately-Invoked Function Expression (IIFE)
http://benalman.com/news/2010/11/immediately-invoked-function-expression/

basics webpack
http://onehungrymind.com/build-a-simple-website-with-angular-2/
https://github.com/simpulton/angular2-website-routes.git
sudo npm list -g --depth=0
sudo npm install -verbose webpack -g
webpack --progress --colors -d
webpack --progress --colors -d --config webpack.config.js

http://semaphoreci.com/community/tutorials/setting-up-angular-2-with-webpack
https://github.com/gonzofish/semaphore-ng2-webpack.git
https://docs.npmjs.com/cli/search
npm search angular-in-memory-web-api
install dev dependencies:
npm install --dev -> deprecated, use the following below
npm install --only=dev
ERROR
	gigi@gigi-desktop:~/Projects/semaphore-ng2-webpack$ node start
	module.js:328
		throw err;
		^
	Error: Cannot find module '/********/Projects/semaphore-ng2-webpack/start'
		at Function.Module._resolveFilename (module.js:326:15)
		at Function.Module._load (module.js:277:25)
		at Function.Module.runMain (module.js:442:10)
		at startup (node.js:136:18)
		at node.js:966:3
SOLUTION
	it's not "node start" but "npm start"
list dependencies for typings@1.4.0:
sudo npm list typings@1.4.0
other:
npm config list
npm config ls -l
npm config ls -l | grep cache
How to view the dependency tree of a given npm module?
sudo npm install -g npm-remote-ls
npm-remote-ls typings
just view a package
npm view typings@1.4.0
here npm start is equivalent to:
npm install webpack-dev-server@1.14.1 --only=dev
find . -name webpack-dev-server.js
./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --display-errors-details --inline --colors --config ./webpack/webpack.dev.js

npm
https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
npm install tslint@3.13.0 --dev
tslint --version
npm run lint

debug with WebStorm
https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

webpack multiple entry points
https://github.com/gigihc11/webpack/tree/master/examples/multiple-entry-points
build with (this one uses template.md):
rm js/* 2>/dev/null; node build.js
or install globally webpack@1.13.1:
sudo npm install webpack@1.13.1 -g
then change webpack.config.js:
// var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
var webpack = require('webpack');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
then build with:
rm js/* 2>/dev/null; webpack

https://github.com/gigihc11/webpack/tree/master/examples/multiple-entry-points
For changing webpack.config.js from "commons" to e.g. "adunate" you'll
need to also change in pageA.html, pageAB.html, template.md.

https://webpack.github.io/docs/shimming-modules.html
http://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require
https://nodejs.org/api/modules.html#modules_core_modules

angular2-webpack-starter
https://github.com/AngularClass/angular2-webpack-starter
git clone https://github.com/AngularClass/angular2-webpack-starter.git
git checkout material2
install global dependencies:
sudo npm install --global webpack webpack-dev-server karma-cli protractor typescript rimraf
install project dependencies (package.json):
npm install --verbose

Webstorm
Promise and catch keyword are highlighted with red
go to Languages & Frameworks -> JavaScript and select ECMAScript 6

html5 semantic elements and its usage
http://www.encodedna.com/2014/08/html5-semantic-elements-and-its-usage.htm

Angular 2 lazy loading with Webpack
angular2-router-loader is now angular-router-loader
See https://github.com/AngularClass/angular2-webpack-starter.git for a working example.
https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.bxpvfgzlw

angular2-webpack-starter + bootstrap
see also "'use:' revered back to 'loader:'" in webpack.test.js
npm install --save-dev bootstrap
npm install --save-dev image-webpack-loader
add to vendor.browser.ts before "if ('production' === ENV)"
// bootstrap 3.3.7:
import 'bootstrap/dist/css/bootstrap';
import 'bootstrap/dist/css/bootstrap-theme';
change webpack.common.js with this:
resolve: {
	extensions: [..., '.css'],
and this:
{
	test: /\.css$/,
	use: ['to-string-loader', 'css-loader'],
	include: /src\//,
	exclude: /node_modules\//
},
// for bootstrap
{
	test: /\.css$/,
	loader: ['style-loader', 'css-loader'],
	exclude: /src\//,
	include: /node_modules\/bootstrap/
},
and this:
// for bootstrap
{
	test: /\.(jpe?g|gif|svg)$/i,
	loaders: [
		// image-webpack-loader chained with the file-loader (equivalent to: file?...!image-webpack?...)
		'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
		'image-webpack-loader?bypassOnDebug=true&optimizationLevel=7&interlaced=false'
	]
},
{test: /\.png$/, loader: "url-loader?limit=100"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=1000&mimetype=application/vnd.ms-fontobject"},
{test: /\.(woff|woff2)$/, loader: "url-loader?&limit=1000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=1000&mimetype=application/octet-stream"}

DEVELOPING A TABS COMPONENT IN ANGULAR
AfterContentInit, ContentChildren
http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html
http://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/

difference between @ContentChildren and @ViewChildren
viewProviders vs providers
AfterViewInit, ViewChild, ViewChildren, ContentChild
http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/

Fine grained change detection with Angular 2
DoCheck, KeyValueDiffers
http://juristr.com/blog/2016/04/angular2-change-detection/

ChangeDetectionStrategy: OnPush vs Default
http://www.syntaxsuccess.com/viewarticle/change-detection-in-angular-2.0
http://www.syntaxsuccess.com/angular-2-samples/#/demo/change
https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c#.thlsx9ipr

How to use IterableDiffers
http://embed.plnkr.co/qZf6yv/ -> see app.component.ts
excerpt:
ngDoCheck() {
	const changes = this.differ.diff(this.heroes);
	if (changes) {
		console.log('new change');// for splitting up changes
		changes.forEachAddedItem(r => console.log('added ', r));
		changes.forEachRemovedItem(r => console.log('removed ', r))
		changes.forEachMovedItem(r => console.log('moved ', r))
	}
}

Pipes and Internationalization API
https://github.com/andyearnshaw/Intl.js/

Animation
https://css-tricks.com/ease-out-in-ease-in-out/
http://easings.net/ -> click on ease function for cubic-bezier code
transition(':leave', [
  animate('2s cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({
	opacity: 0,
	transform: 'translateY(100%)'
  }))
])

Build error
[at-loader] Checking finished with 4 errors
[at-loader] src/app/gui/components/validation-alerts.component.ts:6:14 
    Cannot find namespace 'jasmine'. 

[at-loader] src/app/gui/components/validation-alerts.component.ts:32:23 
    Cannot find name '$'. 

[at-loader] src/app/gui/components/validation-alerts.component.ts:34:14 
    Cannot find name '$'. 

[at-loader] src/app/gui/components/validation-alerts.component.ts:158:26 
    Cannot find name '$'. 
SOLUTION
search the appropriate tsconfig.json (or all of them - tsconfig*.json) file and add:
  "compilerOptions": {
    "types": [
      "jasmine",
      "jquery",
      ...
    ]

Important details
  • https://angular.io/docs/ts/latest/guide/router.html By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first.
  • When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed. There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions. The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it. Feel free to unsubscribe anyway. It is harmless and never a bad practice. See also route.snapshot
  • Use route parameters to specify a required parameter value within the route URL