3D engine coding

https://www.geometrictools.com/

Angular: dynamisch component toevoegen

https://medium.com/@caroso1222/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6
https://medium.com/@tudorgergely/injecting-components-dynamically-in-angular-2-3d36594d49a0

Angular Observable emit value every second

import { Observable } from 'rxjs/Observable';

import "rxjs/add/operator/take";

import "rxjs/add/observable/interval";

let sourceArray = [1,2,3,4,5,6,7,8,9];

let destArray = [];

let stream = Observable.interval(1000)
    .take(sourceArray.length)
    .map(waarde => { return sourceArray[waarde]; });

stream.subscribe(waarde => {

   destArray.push(waarde);

});

ASP.NET application uitrollen op Windows 2012

Stel, je wilt een ASP.NET application uitrollen op Windows 2012. Waar kun je dan bijvoorbeeld tegenaan lopen en wat zijn de oplossingen?

• Via Windows start kun je via Control Panel de Internet Information Services manager opstarten.
• De firewall kun je configureren via de ServiceManager (knop in toolbalk) en dan Tools/Windows Firewall with Advanced Securty.
• Je moet een nieuwe Application Pool aanmaken. Kies hiervoor de Integrated Pipeline, want anders kun je geen json teruggeven(!).
• In de advanced settings van je Application Pool staat als identity ApplicationPoolIdentity. Dit betekent dat deze Application Pool een eigen user heeft die je kunt gebruiken om rechten aan te geven. Zet wel de "Load User Profile" op true. Als je bijvoorbeeld een bestand op het filesysteem read/write toegang wil geven en je Application Pool heet MijnAppPool, dan kun je in de security settings van dat bestand een gebruiker genaamd IIS Apppool\MijnAppPool selecteren. Wel als lokation de lokale machine selecteren, want de betreffende MijnAppPool gebruiker is alleen lokaal bekend. Die gebruiker kun je vervolgens full access geven op een bestand.
• Normaal gesproken heb je een DNS entry nodig om op poort 80 te binden. Als je geen DNS entry hebt, dan moet je een andere poort kiezen, zoals 8084 maar die moet je vervolgens open zetten in de firewall.
• Om te kijken of de website uberhaupt werkt is het slim om een index.html te maken met een hello world tekst erin. Vervolgens op je remote machine kijken of die beschikbaar is.
• Je webapplication kun je gewoon publishen naar een folder en de folder copieeren.

Angular 2+ cursus

Angular 2+ cursus gehad van Peter Kassenaar (info@kassenaar.com). Een aanrader.
ReactiveX beastmode
https://www.learnrxjs.io/
https://angular.io/guide/cheatsheet
https://github.com/PeterKassenaar/voorbeeldenAngular2
Server side rendering: https://universal.angular.io/
https://johnpapa.net/introducing-angular-modules-root-module/
Core concepts
Angular cli: npm install ‐g @angular/cli
https://developer.mozilla.org/en-US/docs/Web/Events
host events
Chrome:
Ctrl-p -> component zoeken.
webpack: -> ./src   -> samen met .map files gaat dat werken.
$0 zie je in Chrome inspect, die kun je gebruiken in de console.
ng-container  dummy tag element.
live scratchpad
http://reactivex.io
www.learnrxjs.io
https://courses.ultimateangular.com/p/hello-rxjs
exploringjs.com/es6
json2ts
Mocking data
json schema to typescript
rxjs operators you must know
http://reactivex.io/documentation/operators.html
Observable methods
Observable cheat sheet
Introduction to reactivex you've been missing
rxmarbles
typedoc voor javadoc achtige documentatie.
Shadow dom strategies in Angular 2
Victor Savkin: Angular 2 routing
Migrating to Angular 2

Getters / Setter and other boilerplate code with lombok

https://projectlombok.org/

Git

Extract van : https://git-scm.com/book/en/v2


# Welke files zijn veranderd
$ git status

# Informatie over remote url en branches
$ git remote show origin

# Branch maken en de changes meenemen in de nieuwe branch:
$ git checkout -b feature/product-feature


# Toevoegen van alle modified/untracked bestanden
$ git add .

# Commit
$ git commit -m "comment"

# Eventueel naar de server brengen
$ git push

# Develop weer inladen
$ git checkout develop

# Laatste versie binnenhalen
$ git pull

# Mergen van product-feature naar develop toe
$ git merge feature/product-feature

# Naar de server brengen
$ git push

# Verwijder oude branch
$ git branch -d feature/product-feature

# Verwijderen van een remote branch:
$ git push origin --delete feature/branchname

# Verwijderen van een deleted remote:
$ git fetch -p origin

# Git repo binnenhalen
$ git clone https://github.com/libgit2/libgit2 mylibgit

# Gebruikersinformatie

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

$ git config --system core.longpaths true

# Create tag
$ git tag <tag-name>

# Push tags
$ git push origin --tags

# Delete tag
$ git tag -d 0.7.9.0
$ git push --delete origin 0.7.9.0

# Aanpassingen tijdelijk stallen
$ git stash
$ git stash list
$ git stash drop
$ git stash pop


# Welke branches zijn er:
$ git remote show origin

# Welke branches zijn er:
$ git branch -a

# Verwijderen van een locale branch:
$ git branch -d hotfix

# Verwijderen van een remote branch:
$ git push origin --delete feature/branchname

# Verwijderen van stale branches uit local:
$ git remote prune origin


HULP BIJ PROBLEMEN:

# Een merge gedaan die je nog niet gepushed hebt. Teruggaan naar de laatste status voor de merge:
$ git reset --hard origin/master

# Krijg je de error: your local changes to the following files would be overwritten by merge, dan kun je de genoemde bestanden opnieuw uitchecken.
$ git checkout dir/dir/dir/file.txt
Vervolgens zie je bij een "git status" dat de file van de lijst af is.

# Een bestand opzettelijk niet willen meenemen
$ git update-index --assume-unchanged README.textile
$ git update-index --no-assume-unchanged README.textile

# Remove untracked files from the working directory
$ git clean -fxd

# Resets the index and working tree. Any changes to tracked files in the working tree since <commit> are discarded.
$ git reset --hard


BRANCH NIEUW NEERZETTEN:

# Create Orphan Branch – Create a new orphan branch in git repository. The newly created branch will not show in ‘git branch’ command.
$ git checkout --orphan temp_branch

# Add Files to Branch – Now add all files to newly created branch and commit them using following commands.
$ git add -A
$ git commit -am "the first commit"

# Delete master Branch – Now you can delete the master branch from your git repository.
$ git branch -D master

# Rename Current Branch – After deleting the master branch, let’s rename newly created branch name to master.
$ git branch -m master

# Push Changes – You have completed the changes to your local git repository. Finally, push your changes to remote (Github) repository forcefully.
$ git push -f origin master

DEVELOP NAAR MASTER KOPIEEREN:
$ git checkout develop
$ git merge -s ours master
$ git checkout master
$ git merge develop

MERGEN VANUIT ANDERE REPRO
$ git remote -v
$ git remote add upstream ssh://.....repro.git
$ git fetch upstream
$ git branch -va
$ git merge upstream/develop

Een javascript library gebruiken in Angular

Stel, je hebt een file TreeView.js geschreven en die wil je gebruiken in Angular zonder direct Typescript te gebruiken in de TreeView code. Dat kan.

• De TreeView.js zet je in de assets/js folder. Een eventuele TreeView.css zet je in de assets/css folder.
• In de tsconfig.json zet je allowJs op true:
  "compilerOptions": {
    "allowJs": true
  } 
  Door deze setting kan er gewone Javascript geïmporteerd worden.
• in de .angular-cli.json moet je de styles en scripts nodes uitbreiden met verwijzingen naar de .css en .js bestanden van je javascript TreeView.
  
  "styles": [
    "assets/css/TreeView.css",
    "assets/css/bootstrap.css",
    "styles.css"
    ],
   "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "assets/js/TreeView.js"
    ],
• De TreeView.js moet je uitbreiden met exports, zoals hieronder beschreven:
  var TreeView = (function () {
      "use strict";
      function tree(settings) {
          var nodes, self = this;
          function init() { }
          self.getNodes = getNodes;
          init();
      }
      return tree;
  })();
  if (typeof exports !== 'undefined') {
      exports.Tree = TreeView;
  }
• In dezelfde directory als je javascript TreeView.js zet je een bestand genaamd TreeView.d.ts neer. Daarin staat:
  export declare class Tree {
      private settings;
      constructor(settings: any);
      addNode(data: any): void;
      findNodeOnLabel(label: string) : any;
      ...
  }
• In de tree.component.ts (het angular component waarmee je een TreeView kunt neerzetten) doe je:
  import { Component, OnInit, ElementRef } from '@angular/core';
  import { Tree } from './../../assets/js/TreeView'
  import * as $ from 'jquery';
  
  @Component({
    selector: 'my-tree',
    templateUrl: './tree.component.html',
    styleUrls: ['./tree.component.css']
  })
  export class TreeComponent implements OnInit {
  
    constructor(private el: ElementRef) { }
    tree: Tree;
  
    ngOnInit() {
      this.tree = new Tree({ checkboxes: false, initialOpenCloseState: "closed" });
      $(this.el.nativeElement).append(this.tree.getDOMElement());
    }
  
    addNode(dict: any) {
      this.tree.addNode(dict);
    }
  } 

Dat was het. Je ziet dat Typescript normale javascript kan importeren in het angular component. In de javascript heb ik alleen de constructie "if (typeof exports !== 'undefined') { exports.Tree = TreeView; }" moeten toevoegen, omdat anders Typescript de javascript niet als module herkend. Tevens zorgt de if constructie ervoor dat de javascript file ook in de browser werkt.

GraphQL

Dit is de manier om een JSON backend te maken.

http://graphql.org/learn/
Dive-into-graphql

Angular documenten

http://blog.angular-university.io/angular2-ngmodule/
Listening to an element host
ViewChildren vs ContentChildren
how-to-convert-js-code-to-angular-2

custom-form-controls-in-angular-2
angular2-bootstrap-pagination
virtualized-spreadsheet-component-in-angular-2.0
custom-form-control/
linkup-custom-control-to-ngcontrol-ngmodel

bootstrap_tables
immutable-js/

immutability-vs-encapsulation
angular-2-change-detection-explained
taking-advantage-of-observables-in-angular2
how-i-optimized-minesweeper-using-angular-2-and-immutable-js-to-make-it-insanely-fast/
whats-the-most-efficient-watch-js-that-watch-same-obj-property-from-multiple
object.watch polyfill

JQuery gebruiken met Angular:
npm install jquery
npm install @types/jquery --save-dev
And find your file name in "angular-cli.json" on the root and add the inside of as like:
script:["../node_modules/jquery/dist/jquery.min.js"]
import * as $ from 'jquery';

SVG in background

http://jsfiddle.net/6WAtQ/

body { background-image:

        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");

Angular change detection

http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

Bootstrapping your first Angular 2+ app

https://toddmotto.com/bootstrap-angular-2-hello-world

Oracle XE expired password

sqlplus /nolog
SQL> connect / as SYSDBA
Connected
SQL>


select username, account_status from dba_users where ACCOUNT_STATUS LIKE '%EXPIRED%';

ALTER USER theusername IDENTIFIED BY thepassword;

ALTER USER theusername ACCOUNT UNLOCK;

Javascript: From callback to Promise

const fetch = (url, options = {method:'get'}) => new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve
    request.onerror = reject;
    request.open(options.method, url, true);
    request.send();
});

Draait applicatie in 32- of 64 bits?

Als je in een C# programma wilt weten of het wordt uitgevoerd in 32 of 64 bit, draai de volgende code:

            if (IntPtr.Size == 4)

            {

                MessageBox.Show("32 bit");

            }

            if (IntPtr.Size == 8)

            {

                MessageBox.Show("64 bit");

            }

Zonder JQuery en JQuery UI

Het gebruik van je javascript libraries moet je soms even tegen het licht houden.
Zo is Jquery UI een lib die vrij zwaar is, en ik niet gebruik behalve voor de datepicker.
JQuery zelf is vaak ook overbodig.

http://youmightnotneedjquery.com/
https://github.com/dbushell/Pikaday

CSS3 transition and animation

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3
https://www.w3schools.com/css/css3_transitions.asp

SQLite An attempt was made to load a program with an incorrect format.

Using SQLite in dotnet may result in an error: "An attempt was made to load a program with an incorrect format."

In my case the problem was the development webserver of Visual Studio 2017, which runs in 32-bit mode by default.
See the setting: http://tegtips.blogspot.nl/2014/07/visual-studio-2013-iis-express-64-bit.html

Display Grid

https://css-tricks.com/snippets/css/complete-guide-grid/

CSS @media

@media only screen and (max-width: 500px) {
    body {
        background-color: red;
    }
}

Absolute positioning inside relative

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Inside a DIV with a position: relative, the position:absolute elements are relative to the relative DIV.

Wel of geen ORM?

Jaren geleden heb ik zelf een Object Relational Mapper geschreven als reactie op het slechte ORM framework genaamd NHibernate. De ORM heet HierarchyObjects.

Als je een nieuwe applicatie begint, moet je dan een ORM gebruiken of niet?

Ik deel de mening van Norm.

Javascript: track changes in DOM

Je kunt in javascript erachter komen of een attribuut is veranderd van de DOM. Dit kan bijvoorbeeld komen door een javascript die een class toevoegt bij een selectie van een element.

Zie het javascript MutationObserver object.

Print directly from Chrome

Als je een PDF direct wilt printen vanuit Chrome, dan kun je de PDF laden in een hidden iframe en vervolgens "print()" te roepen tegen het contentWindow van de iframe.

Helaas!

Chrome heeft een bug waardoor de readyState niet veranderd als je een binary laadt in een iframe! Je weet dus niet wanneer de PDF geheel is ingeladen.
Hoe kom je uit deze situatie?
Door de PDF te laden in een Javascript Blob en vervolgens een interne URL te maken naar deze Blob. Via deze route werkt het onload event wel.

Zie hieronder de code:


function print() {
var printData = _base64ToArrayBuffer(base64PdfBytesFromServer);
var printBlob = new Blob([printData], { type: "application/pdf" });
window.printPdfLoaded = function() {
$("#thePDF")[0].contentWindow.print();
URL.revokeObjectURL(internalUrl);
}
var internalUrl = URL.createObjectURL(printBlob);
var ifr=$('<iframe/>', {
id: 'thePDF',
src: internalUrl,
style: 'display:none',
onload: 'window.printPdfLoaded()'
});
$(document.body).append(ifr);
}

function _base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array( len );
for (var i = 0; i < len; i++)        {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}

Javascript Lexical scope problems and solution

var i, f = [ ], base = 1;
for (i = 0; i < 10; i++) {
    f.push(function() { return base + i; });
}
alert(f[0]());

Resultaat: -> 11


Nesten van functions maakt niet uit:

var i,
    f = [ ],
    base = 1;
for (i = 0; i < 10; i++) {
    f.push(function() { return function() { return base + i; } });
}
alert(f[0]()());

-> 11

Solution:
De enige oplossing is de volgende:

var i,
    f = [ ],
    base = 1;
for (i = 0; i < 10; i++) {
    f.push((function(base, i) {
       return function() { return base + i; }
    })(base, i));
}
alert(f[0]());

-> 1

a must read on the subject: https://spin.atomicobject.com/2014/10/20/javascript-scope-closures/