George Borzilov Borzilov

Simple automated GIT Deployment using GIT Hooks

Here are the simple steps needed to create a deployment from your local GIT repository to a server based on this in-depth tutorial.

How it works

You are developing in a working-copy on your local machine, lets say on the master branch. Most of the time, people would push code to a remote server like github.com or gitlab.com and pull or export it to a production server. Or you use a service like deepl.io to act upon a Web-Hook that's triggered that service.

Writing your own structural directives with context variables

Complete code in math.directive.ts

After reading this you will be able to create a structural directive with inputs and context variables and use it like this:

<div *math="10; exponent: 3; let input; 
            let exponent = exponent; let r = root;
 let p = power; let ctrl = controller"&gt;

Microsyntax

Microsyntax in Angular allows you to write <div *ngFor="let item of items">{{item}}</div> instead of <ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template.

Constraints

The microsyntax must:

be know ahead of time so that IDEs can parse it without knowing what is the underlying semantics of the directive or what directives are present.
must translate to key-value attributes in the DOM.

I received a question about this snippet of code:

function def(first="oldValue" , second=function(){
         return first;
}){
        var first="updatedValue";
        console.log('inside',first);
        console.log('function',second());
}

	// BASIC
	const language: string = 'JavaScript';
	const age: number = '33'; // Error
	const amount = 55;
	const price = '5';
	const discount = false;
	const total = price * amount; // Error
	price - discount; // Error

	// Reassigning

	<link rel="shortcut icon" width=32px>
	<canvas style="display: none" id="loader" width="16" height="16"></canvas>

	<script>
	class Loader {
	constructor(link, canvas) {
	this.link = link;
	this.canvas = canvas;
	this.context = canvas.getContext('2d');
	this.context.lineWidth = 2;

	/* Strict Type-Checking Options */
	{
	"strict": true, /* Enable all strict type-checking options. */
	// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
	// "strictNullChecks": true, /* Enable strict null checks. */
	// "strictFunctionTypes": true, /* Enable strict checking of function types. */
	// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
	"strictPropertyInitialization": false, /* Enable strict checking of property initialization in classes. */
	// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
	// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */

	//yarn add -D puppeteer karma-chrome-launcher
	process.env.CHROME_BIN = require('puppeteer').executablePath();
	// ...

	{
	browsers: ['ChromeNoSandbox'],
	customLaunchers: {
	ChromeNoSandbox: {
	base: 'ChromeHeadless',
	flags: ['--no-sandbox','--disable-dev-shm-usage'],

	import {Directive, ElementRef, Input, OnDestroy} from "@angular/core";
	import {fromEvent, Observable, Subject} from "rxjs";
	import {debounceTime, distinctUntilChanged, map, startWith, takeUntil} from "rxjs/operators";

	/**
	* An input directive that makes it easier to get the input's value in an Observable.
	* These directive acts a one-way for output. You can't set the input's value.
	* @example
	* <input rxjsInput>
	*