Friday, March 31, 2017

.WhenAll in C#!

Beyond mere JavaScript alone, this has the following example of a .WhenAll in C# for spinning up multiple asynchronous tasks to run at once while not acting upon them until they are all done "coming back" as it were.

IEnumerable<Task<int>> downloadTasksQuery = from url in urlList select
      ProcessURLAsync(url);
Task<int>[] downloadTasks = downloadTasksQuery.ToArray();
int[] lengths = await Task.WhenAll(downloadTasks);
int total = lengths.Sum();

 
 

The collection of similar things above however isn't really a real world work scenario. Instead more likely you will find yourself grabbing three things from three different web services (which will get aggregated into one POCO to return from a method containing calls to methods for the three calls) and wanting to call out "here kitty, kitty" for all the cats at once instead of calling for Patches, waiting her to come home, calling for Fluffy, waiting for him to come home too, and finally calling for Shadow and waiting for him to come in as well. Well, this has the following example of making breakfast that works with diversified concerns:

private static async Task<BreakFast> MakeBreakFast()
{
   var taskToastBread = ToastBreadAsync();
   var taskBoilEggs = BoilEggsAsync();
   var taskMakeTea = MakeTeaAsync();
   await Task.WhenAll (new Task[] {taskToasBread, taskBoilEggs, taskMakeTea});
   return new BreakFast()
   {
      Toast = taskToastBread.Result,
      Eggs = taskBoilEggs.Result,
      Tea = taksMakeTea.Result,
   }
}

 
 

In the example ToastBreadAsync returns a Task of Toast and BoilEggsAsync a Task of Eggs and thus it is perfectly fine for the tasks to be of differing return types. You can still add them to an array of tasks after all. You do not have to new up the array right in the middle of the .WhenAll. You could have made a variable for it upstream. Also, you may use a List of Task instead of an array too. The "playback head" is not going to move beyond the .WhenAll line until all of the cats have come home. There are going to be times when this pattern doesn't work as not everyone can eat at once however.

In a scenario in which you have to get something from the first web service to be able to feed the call to the second web service to begin with and then what you get back from that is furthermore required to call the third web service, then there is nothing you can do with .WhenAll and some actors just have to wait for other actors upstream to act. ("playback head" is a term from a Macromedia Director training book out of the 1990s and I apologize for using it here)

The bad thing about Razor markup is that it cannot be interpreted just as HTML.

This makes it tough to port, and so, yes, the syntax of .NET Core's views is yet another markup shape that can be interpreted directly as HTML so that it does not collide with Angular 4 and the like. It is yet another new markup paradigm to learn guys.

Transient versus Scope versus Singleton

regarding rxjs: Singleton variables stay unlike doomsday, until the app restarts. They are set once and then tattooed in place. Scope variables stay alive as long as a particular request is alive. Transient variables are recreated all the time.

Clojure

...is a language kinda like Lisp that came from Lisp.

more await/async notes for C# 5.0 and up

  • you cannot have the await keyword in a C# method without the method itself being async
  • you may just use the Task keyword by itself at a method's return type in lieu of having a Task of void

HTTP/2

...as opposed to HTTP 1.1 has a way to manipulate HTTP traffic, not unlike Google's SPDY (pronounced speedy) and in the case of HTTP/2 we are doing some packeting and minification and we are giving more than one request for one web page so that things may come in all async in clustered chunks, etc. Break it up. Meh.

 
 

Addendum 4/7/2017: This is becoming an antipattern. People try to get the wrong stuff asynchronously and hodgepodge it together.

a different home page for different types of users?

It makes sense right? Why not show what's important to that role right away? (instead of an extra click or two to drill into what should be that user's "front door ") For certain types of users the home page doesn't even need to be pretty.

Thursday, March 30, 2017

What does the yellow flag at the upper right of Visual Studio 2017 mean?

Very good! Yes, it means that there is an update for Visual Studio 2017 and that you may click upon it to have at it. You probably need to sign into the IDE (integrated development environment) first. The "Sign in" at the yellow triangle with an exclamation mark in it doesn't want to work for me in Visual Studio 2017, and I can't install the update without being logged in. I can log in at my.visualstudio.com but not Visual Studio itself, perhaps because I registered it. Nuts.

Well... maybe it will work for you.

What do Karma/Jasmine/PhantomJS tests for Angular 2 look like?

//// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {DebugElement} from '@angular/core';
import InnerGridComponent from './innergrid.component';
describe('InnerGridComponent',
   ()=> {
      let comp:InnerGridComponent;
      let fixture:ComponentFixture<InnerGridComponent>;
      beforeEach(async(
         ()=> {
            TestBed.configureTestingModule({
               declarations: [InnerGridComponent],
            }).compileComponents;
         });
      beforeEach(
         ()=> {
            fixture = TestBed.createComponent(InnerGridComponent);
            comp = fixture.componentInstance;
         });
      it('nothing in, nothing out',
         ()=> {
            comp.model = [[], [], (dataRow:any) => { return ""; }];
            fixture.detectChanges();
            const missingTable = fixture.debugElement.query(By.css('table'));
            expect(missingTable).toEqual(null);
         });
      it('happy pass',
         ()=> {
            let pieceOne = [
               {
                  name: "Joe Smith",
                  job: "Dishwasher"
               },
               {
                  name: "Roy Jones",
                  job: "Ditchdigger"
               }
            ];
            let pieceTwo = new Array<[string, string, string]>();
            pieceTwo.push(["Full Name", "name", ""]);
            pieceTwo.push(["Title", "job", ""]);
            let pieceThree = (dataRow:any) => { return "http://www.example.com"; };
            comp.model = [pieceOne, pieceTwo, pieceThree];
            fixture.detectChanges();
            const table = fixture.debugElement.query(By.css('table'));
            let headers = fixture.debugElement.queryAll(By.css('.coolGrey'));
            let links = fixture.debugElement.queryAll(By.css('a'));
            expect(table).not.toEqual(null);
            expect(headers[0].nativeNode.innerHTML).toEqual("Full Name");
            expect(headers[1].nativeNode.innerHTML).toEqual("Title");
            expect(links[0].nativeNode.innerHTML).toEqual("Joe Smith");
            expect(links[1].nativeNode.innerHTML).toEqual("Dishwasher");
            expect(links[2].nativeNode.innerHTML).toEqual("Roy Jones");
            expect(links[3].nativeNode.innerHTML).toEqual("Ditchdigger");
         });
   });

 
 

The tests are testing this component:

import {Component, Input, OnInit} from "@angular/core";
@Component({
   selector: "inner-grid",
   templateUrl: "innergrid.html"
});
export default class InnerGridComponent {
   @Input model:[Array<any>, Array<string,string,string>, (dataRow:any) => string];
   private links = new Array<string>();
   private data = new Array<Array<string>>();
   ngOnInit(){
      let links = new Array<string>();
      let data = new Array<Array<Array<string>>();
      let model = this.model;
      if (model[0].length > 0) {
         let counter = 0;
         model[0].forEach(function(datum) {
            links.push(model[2](datum));
            if(counter===0){
               data.push(new Array<string>());
               model[1].forEach(function(column) {
                  data[0].push(column[0]);
               });
            }
            data.push(new Array<string>());
            model[1].forEach(function(column) {
               let variable = datum[column[1]];
               if (column[2]){
                  data[counter+1].push(variable[columns[2]]);
               } else {
                  data[counter+1].push(variable);
               }
            });
            counter++;
         });
      }
      this.links = links;
      this.data = data;
   }
}

 
 

The component uses this template:

<table *ngIf="model[0].length > 0">
   <tr *ngFor="let datum of data; let dataIndex=index;">
      <ng-container *ngIf="dataIndex===0">
         <td *ngFor="let subdatum of datum">
            <strong class="coolGrey">{{subdatum}}</strong>
         </td>
      </ng-container>
      <ng-container *ngIf="dataIndex > 0">
         <td *ngFor="let subdatum of datum">
            <a [href]="links[dataIndex-1]">{{subdatum}}</a>
         </td>
      </ng-container>
   </tr>
</table>

 
 

The it at a test may be changed to xit if you want to skip the test when running tests.

Wednesday, March 29, 2017

Lo-Dash is like underscore.js

There is a way to get this to work in TypeScript but really you should just filter collections with TypeScript itself and just forget all about Lo-Dash and underscore.js. Lo-Dash started out as a fork of Underscore. Try not to kludge together Lo-Dash and TypeScript.

 
 

Addendum 4/12/2017: It's Lodash not Lo-dash.

lanyard

I learned this word today. It's the strap that goes around your neck that holds your badge on a clip while you wander around a trade show.

template variables in Angular 4

If you consider what I started here and then refactored here. You could get the same effect with a template like so:

<div>
   <input #convenience (keydown)="hollowHelp()" />
   <div>{{veni.nativeElement.value}}</div>
   <button (click)=resetIt()>reset</button>
</div>

 
 

For a component like so:

import { Component, ElementRef, ViewChild, Renderer, AfterViewInit } from
      '@angular/core';
@Component({
   selector: 'foo-bar',
   templateUrl: 'bazqux.component.html'
})
export class AppComponent {
   @ViewChild('convenience') veni: ElementRef;
   public resetIt():void {
      this.veni.nativeElement.value = "meh";
   }
   hollowHelp():void{ }
   constructor(private renderer: Renderer) {}
   ngAfterViewInit() {
      this.renderer.invokeElementMethod(this.veni.nativeElement, 'focus');
   }
}

Tuesday, March 28, 2017

Call a controller from another controller in the Angular 1 paradigm?

You probably don't need to. If you need to call a function in the other controller you can have that controller assign the function to something hanging off $scope, call it off $scope itself, and then call it off $scope in the second spot. Obviously the controller making the assignment has to get seen before the controller that is to use the thing hanging off $scope.

 
 

Addendum 3/29/2017: What is above isn't so good. It's probably best to use a common service to share code across two controllers.

onion-breaking antipattern

You can auto hydrate IoC dependencies at class constructors and not just the constructors of MVC5 controllers it seems. I don't recommend it. If you are getting the dependencies at controllers and handing them on to core logic, if you are not exclusively using the UI at a bootstrapper but are wiring up dependencies at the core logic or infrastructure projects, you are opening the door to trouble. Do all IoC wireup at the UI and hand them down to core logic which should know nothing more than "oh, I'm getting an interface at a method signature" In a scenario wherein a controller calls out to a manager (bad name) in a core project and then that calls a repository in the infrastructure project, only the controller should have a signature where IoC magic takes place via StructureMap.

How not to do change detection management in Angular 4.

Consider this official example:

@Component({
   selector: 'cmp',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `Number of ticks: {{numberOfTicks}}`
})
class Cmp {
   numberOfTicks = 0;
   constructor(ref: ChangeDetectorRef) {
      setInterval(() => {
         this.numberOfTicks++;
         ref.markForCheck();
      }, 1000);
   }
}
@Component({
   selector: 'app',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
      
   `,
})
class App {
}

 
 

Alright, first of all, the above leaves out the import statement you'll need if you make a .ts file, but that's not the biggest thing. Have an import statement like so:

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from
        '@angular/core';

 
 

The biggest thing is that you don't want to spin an interval. You only want to kick off change detection when something changes, not once a second as the approach above in effect has you doing the exact same time as having a ChangeDetectionStrategy of Default except that it's a little bit slowed down. The fact that it repeats when possibility unneeded is no good. The example of making a number count upwards which is the first thing everyone learned to do in BASIC is NOT real world code. You are not a child and it's not the 80s. The IBM PC Junior you had is long gone. Instead, you will want to turn all the watchers off until you really need them, say on a button click. If something has to happen after a user action when a dependency fills in asynchronously then things get a bit more tricky. Hand in promises using the Promise API which can trigger change detection strategy from a .done() If you're handing a function in from outside the component, you may have a .then on the function at the outside and then do a .then off of the function inside the component too when you call it to do other .then stuff. One does not overstamp the other. They both run. This is better than spinning an interval to react when the .then occurs outside the component at the code handed in.

 
 

Addendum 4/13/2017: I'm realizing there is a Russian doll thing going on with the .then stuff of the Promise API not unlike Middleware in .NET Core. If a function calls a function while having a .then and the function called has a .then, expect the inner function's .then to run and then the outer function's .then.

Break up the ngModel antipattern.

This could be refactored like this:

<div>
   <input (keydown)="whateverEvent($event)" [value]="whatever" />
   <div>{{whatever}}</div>
   <button (click)="resetIt()">reset</button>
</div>

 
 

In the component itself, some of the TypeScript could be...

export class MySillyComponent {
   public whatever: string;
   public resetIt():void {
      this.whatever = "meh";
   }
   public whateverEvent(metadataCarriedAcross:any):void{
      this.whatever = metadataCarriedAcross.target.value;
   }
   constructor() {
      this.whatever = "";
   }
}

Monday, March 27, 2017

get Karma working

I don't really understand this yet. It's something like so:

  1. In PowerShell navigate to the folder holding your node modules folder and type: npm install –g karma
  2. Type "View Advanced System Settings" at the "Ask me anything" bar in Windows 10.
  3. From the "Advanced" tab go to "Environment Variables"
  4. click "New..." at the lower half of the pane that appears to add a new system variable
  5. add a variable with a variable name of CHROME_BIN and variable value of C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
  6. at C:\Users\thomas_jaeschke\AppData\Roaming\npm you're going to have to add some plugins too

outlines are the name for the Visual Studio trick in which if statements are collasped and have plus symbol to click for expansion

dope.

what folders am I sharing?

  1. type ipconfig at the command prompt in PowerSell
  2. make note of the IPv4 address
  3. go to \\10.210.54.51\ in Windows Explorer in Windows 10 (well, if 10.210.54.51 was what you saw in the step above)
  4. voilà!

You may share a folder from Windows Explorer in Windows 10 by right-clicking in the white space and then picking: Share with

Ctrl-F at an Outlook message opens a new message window!

...instead of finding something. Grr. That's frustrating.

The git command line stuff.

  • Install the GitHub desktop thingy from here.
  • This will put a desktop icon for the "Git Shell" at your desktop. Click on it and open up the shell.
  • Navigate to a folder where you want to suck stuff down to.
  • git clone https://github.com/vmware/clarity-seed.git is an example of a command to get stuff.

angular-cli is what it sounds like.

command line interface tooling for Angular (your projects get a angular-cli.json sitting next to package.json in the same folder)

When the ribbon disappears from all email messages in Outlook...

At the far upper right there will be an icon that looks like an arrow pointing upwards inside a rectangle. Click upon it and pick "Show Tabs and Commands" to get the ribbon.

Sunday, March 26, 2017

Can't bind to 'ngModel' since it isn't a known property of 'input'.

I can't put my finger on what causes this error or how to get around it. In the app I made here I attempted to do something like so in a component:

public whatever: string;
public resetIt():void {
   this.whatever = "meh";
}

 
 

In the markup for the component we have something like so:

<div>
   <input [(ngModel)]="whatever" />
   <div>{{whatever}}</div>
   <button (click)="resetIt()">reset</button>
</div>

 
 

The fallen-out-of-fashion two way data binding of Angular 1 hardly exists in Angular 4, but one way it still rears its head is with an ngModel implementation as shown here. As one types in the input field the copy in the div below it will get updated in real time. Resetting the value of the backing store "whatever" by clicking the button updates what is in the input's value and the div too. This sort of thing really isn't recommended. In the input tag you could instead have one breakout in square brackets for one-way data binding and a separate event in parenthesis for one way eventing (not unlike the click shown above). When you combine the square brackets and the parenthesis you get the banana box syntax of the two way stuff, but this should smell bad to you. You'll want the break out of the two as you'll eventually want to change what one half of what the magic does, either the one-way binding or the event back to the component's code. I regret not being able to beat the error I mention here. I ultimately got around it by just jamming my code into the default implementation of the Angular 4 seed instead of my own component. Whatever.

If you "Open Folder..." in Visual Studio Code instead of "Open File..."

...you'll get an "Explorer" sidebar which feels vaguely like "Soultion Explorer" in Visual Studio 2017. This is much better than opening files one at a time.

In Angular 4 you may use ng-template just like ng-container.

The point of this being that the template tag (without the leading ng-) has fallen out of vogue and should not be used. It used to be, in Angular 2, that the template tag and the ng-container tag could both be used when you need a tag that didn't really make a tag in the HTML, sort of an invisible tag, but that only the ng-container tag could use the sugar syntax of *ngFor or *ngIf begging the question "Why care about template tags at all?" and, well, now we are just giving up on the template tags.

using of instead of in when looping through things in TypeScript and Angular 4

*ngFor="let inner of outer.contentKeptInFromOtherEndpoints"

...is probably what you want and not...

 
 

*ngFor="let inner in outer.contentKeptInFromOtherEndpoints"

...as the former will loop through values and the later through keys. By keys I mean the numbers in an array and/or the property names on an object.

An abstract class can implement an interface in C#!

Just when you thought the thing that does too much couldn't get nastier...

Saturday, March 25, 2017

$state in the Angular 1 stuff has to do with routing.

I don't even want to think about the Angular 1 stuff. Haha.

Visual Studio Spell Checker

It's a plugin by Eric Woodruff which does what you think.

some more accessibility notes, not that I ever work with accessibility compliance

WCAG 2.0 or Web Content Accessibility Guidelines is an International Organization for Standardization (ISO) standard for web content accessibility! On another note, I've recently listened to JAWS (Job Access With Speech) do its thing when reading off the content in an HTML page to present it to a would be blind person. Menu lists are explicitly stated aloud in a "this is a menu list" manner and then the audio starts rattling through the various options. Cool stuff.

A seed for Angular 4!

A tedious thing about Angular is that whenever you really need to make a sweeping change that entails a major migration such as systemjs.config.js to Webpack (seen as a better dependency management tool) instead of trying to massage that into your existing project, you'll find it easier to just get a seed project for the new approach and migrate everything else in your application into it. With that in mind, I wanted to get the application I detail here, here, and here into an Angular 4 shape now that Angular 4 has been out for two days. I found a seed at https://github.com/mgechev/angular-seed and after putting the files in a folder I made my way into the root from PowerShell's prompt and I typed "npm install" to hydrate the "node_modules" folder followed by "npm start" to run the app at http://localhost:5555/ finally followed up by Ctrl-C to stop running the app. Fine! Now, to add my code... At index.html in the client folder, line 17 reading...

<sd-app>Loading...</sd-app>

 
 

...became...

<entry-point>Loading...</entry-point>

 
 

...and in the app folder in the client folder I replaced the main.ts file with the one I had. The folders in my app folder I just copied and pasted into the app folder. I then ran the app and it worked. Yay! It's not making .js files side by side with the .ts files. I don't know why yet. Whatever.

You can have a bit of a stylesheet inline in an Angular 2 component though I don't recommend it really.

This has a list of metadata properties available for a component such as selector, templateUrl, and providers and one of them is "styles" and this should have a setting with square braces and backticks inside of the square braces and CSS styles (just as they would appear in a stylesheet) inside of the backticks. The metadata properties for components are:

  1. animations
  2. changeDetection
  3. encapsulation
  4. entryComponents
  5. exportAs
  6. host
  7. inputs
  8. interpolation
  9. moduleId
  10. outputs
  11. providers
  12. queries
  13. selector
  14. styleUrls
  15. styles
  16. template
  17. templateUrl
  18. viewProviders

Make sure that the controller has a parameterless public constructor.

StructureMap cannot wire up the dependencies in the REAL Controller constructors when you see this error. Maybe a NuGet package is jacked up.

 
 

Addendum 3/27/2017: At a closer look this has to do with an inability on the part of StructureMap to autowire up a dependency for an MVC5 Controller constructor. This ended up being a circular reference problem in which one repository, hydrated at a constructor by IoC, hydrated another which attempted to hydrate it. One of the two repositories was a dependency IoC hydrated at the constructor for the controller.

Friday, March 24, 2017

Always leave the campground cleaner than you found it?

Is this really good policy? I knew a guy who lost his job because he would refactor code beyond the scope of what really needed to be fixed. What if you're breaking things in the name of making them better?

Thursday, March 23, 2017

feature gating

...is of the ability to turn a feature back off after you roll it out and realize that it sucks.

Default and OnPush are the two varieties of ChangeDetectionStrategy.

The OnPush approach will turn off all of the watchers and your data will only update when an input change.

@Component({
   template: `
      <h2>{{vData.name}}</h2>
      <span>{{vData.email}}</span>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
})
class VCardCamp {
   @Input() vData;
}

 
 

More about the above:

  1. template in an Angular 2 component may be replaced with templateUrl to reference an .html file
  2. The backtick thing above for string formating is real. It's the key above Tab, not the key left of the Enter. Use single curly braces and a leading dollar sign for this sort of formatting in TypeScript standalone:
    let foo: number;
    foo = 13;
    let bar: string;
    bar = `A baker's dozen has ${foo} donuts in it!`
    alert(bar);

A constructor variable at an Angular 2 component not decorated with public or private cannot be seen beyond the constructor.

The ref variable here is an example, not the zone variable.

constructor(ref: ChangeDetectorRef, private zone: NgZone) {

Wednesday, March 22, 2017

Put a function in your Microsoft.PowerShell_profile.ps1 file at the WindowsPowerShell folder!

In this locale you may roll something like this:

#This is a function in a PowerShell .ps1 file!
function Do-Something {
[CmdletBinding()]
param(
   [switch]$foo,
   [switch]$bar,
   [switch]$baz,
   [String]$qux=""
)
PROCESS {
      Write-Host "doing the something..." -foreground yellow
      if ($baz) {
         $foo = $true;
         $bar = $true;
      }
      if ($foo) {
         Write-Host "either foo or baz was flagged" -foreground yellow
      }
      if ($bar) {
         Write-Host "either bar or baz was flagged" -foreground yellow
      }
      if ($qux.length -gt 0) {
         Write-Host $qux "was handed in for qux" -foreground yellow
      }
   }
}

 
 

From the PowerShell command line the function could be called in the following legitimate ways (amongst others) and you can probably guess what each does.

  • do-something
  • do-something -foo
  • do-something -bar
  • do-something -baz
  • do-something -qux "whatever"
  • do-something -foo -qux "whatever"

 
 

Every time you change the script you must close and reopen the PowerShell console to see the newness.

xUnit.net

This is yet another testing framework not unlike NUnit. You write unit tests for it and what not. It is .NET flavored.

interpolation

In C# 6.0 the dollar sign string formatting stuff is interpolation and the question mark dot syntax for breaking the Law of Demeter is called safe null navigation. The double curly braces syntax like {{myThoughts | myFilter}} in Angular 2 is also called interpolation. It's one time data binding in lieu of one way data binding.

Run all the Karma/Jasmine/PhantomJS tests!

If package.json at the root of your UI project starts out like this...

{
   "name": "whatever",
   "version": "1.0.0",
   "scripts": {
      "test": "karma start karma.conf.js",
      "test-once": "karma start karma.conf.js --single-run",

 
 

Then if you open up PowerShell and navigate to the folder holding package.json, these commands should run the tests:

  1. npm run test
  2. npm run test-once

(clearly you need NodeJS/npm installed, duh) the first item above will rerun tests whenever .ts files change or until you press Ctrl-C

The Clarity Controls for Angular 2!

See: this! They are by vmware!

PPTP stands for Point-to-Point Tunneling Protocol and is an old way of VPNing!

Maya is a 3D graphics program like 3D Studio MAX or TrueSpace or LightWave. Random!

the default keyword in TypeScript

If color-pattern.enum.ts looks like this:

export enum ColorPattern {
   Solid,
   Splotchy,
   Striped
}

 
 

Then snake.model.ts in the same folder could loop it in like this:

import { ColorPattern } from './color-pattern.enum';
export class Snake {
   commonName: string;
   genusAndSpecies: [string,string];
   lengthInMeters: number;
   appearance: ColorPattern;
}

 
 

But if it looks like this:

export default enum ColorPattern {
   Solid,
   Splotchy,
   Striped
}

 
 

It must be looped in like this:

import ColorPattern from './color-pattern.enum';
export class Snake {
   commonName: string;
   genusAndSpecies: [string,string];
   lengthInMeters: number;
   appearance: ColorPattern;
}

 
 

The default keyword makes it so that there may only be one type per file and not a collection and that means you cannot import it (the one and only thing) with the curly braces as you might a collection. If there are multiple things in a file (and, obviously none of them have the default keyword decorating them) you may use one import statement to import them all (or just the ones you want) while comma separating the items inside the curly braces like so:

import { ColorPattern, SomethingElse } from './color-pattern.enum';
export class Snake {
   commonName: string;
   genusAndSpecies: [string,string];
   lengthInMeters: number;
   appearance: ColorPattern;
   somethingMore: SomethingElse;
}

 
 

This takes some getting used to. It will seem as if lines of codes where you are importing things are mad (can't compile) for no reason because of stupid mistakes with the default keyword.

your PowerShell profile at Windows 10

C:\Users\Yuri_Namehere\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1 is the keeping grounds of your profile! If the WindowsPowerShell folder does not exist run Set-ExecutionPolicy Unrestricted and then follow it up with Test-Path $Profile which will give you back a true or false response. In the event of a false you furthermore need to run a third command that looks like this: New-Item -path $profile -type file -force

Tuesday, March 21, 2017

Force Web Essentials to push LESS to CSS in Visual Studio 2017 without resaving a file.

right-click on a .less file in the Solution Explorer in Visual Studio 2017 and pick "Web Compiler" then "Compile file" or "Re-compile file"

viral marketing

suggests an exponentially growing visibility footprint due to those being exposed themselves advertising outwardly the thing handed to them

Don't take selfies while you drive. It's dangerous!

By the way, this pic is thirteen days old. I'm completely above this sort of childish behavior now.

There is some funny canned orchestration to get used to with Bootstrap.

<table class="table table-striped">

...in the Bootstrap CSS paradigm will alternate the color of rows from grey to white. The table-striped style must go in the table tag and the tr rows must be inside a tbody tag.

.linq in the file extension for a LINQPad document.

You should be able to open LINQPad by just double-clicking one of the these files in Windowsland. Run the file's script with the rightward pointing green "Execute" arrow or by pressing F5.

when you may access the web interface for TFS yet you cannot make a connection from the "Team Explorer" tab from Visual Studio 2017

  1. go into the web interface at IE
  2. at "Recent projects & teams" click on an applicable project
  3. on the "Overview" page that appears click on "Open in Visual Studio"

Monday, March 20, 2017

Windows-P

This is a good shortcut key in Windows 10 for allowing for an extended desktop. Try this if this doesn't work. Four options will appear and "extend" is one of them.

View hidden files and file extensions in Windows 10.

Open an Explorer window. These options are checkboxes under the ribbon beneath the "View" option at the top of the window.

Sunday, March 19, 2017

dogfooding

This is the art of eating your own dog food, building stuff with those open source projects you authored which you espouse to be all that.

Travis Tidwell explains the web paradigm shift to "serverless"

ReactJS is built on the MEAN stack and form.io helps you make forms in a serverless architecture. Travis Tidwell gave these as examples of "serverless" in a talk at the MVPMIX. He also laid out a history of the world wide web in the name of explaining why we must take this turn in the road.

  1. Web 1.0 – the static web
  2. Web 2.0 – the dynamic web with PHP!
  3. Serverless

Alright, in this timeline, the first step is the old school Marc Andreessen's Netscape era thing in which we make a request, and we find, beyond the domain name, a specific file in a specific folder (as noted at the bit of the URL beyond the domain name) and then we cough it back up to the browser. All the content is static. In the second step we introduce dynamic content (code and databases bias what the files spit out as HTML) however maybe not necessarily with PHP but PHP sure did rule that era. So how did we jump beyond this to modernity? Well, there are two mini steps between step two and step three above.

  1. Web 1.0 – the static web
  2. Web 2.0 – the dynamic web with PHP!
    • the rise of the CMS
    • mobile first
  3. Serverless

A revolution came with the iPhone in 2008 and we realized that all of our web sites looked awful on our mobile phones. And so we started building web apps, mobile first, with an eye towards how they could look good on a mobile device. In modern times we have a new problem in which even a refrigerator can crosstalk with the web and it will have a very different interface yet from a smartphone. Instead of just doing a little extra work in making a reactive design such that a smartphone-friendly format can just "fall over" to being a laptop format we are faced with either making a way to have an app fall over to all sorts of frontend UI interfaces (not just the two anymore) or, more applicably, admitting that really each device needs its own frontend application and that really these should just chat with common API endpoints but otherwise be independent of each other. And there it is: "serverless"

The head comes off! "Serverless does not mean your application does not need a server. It means your application has been LIBERATED from the server." was a quote, I think on a slide, during the talk. Serverless forces us to build web sites and web applications which are completely standalone. We need to have an "offline mode" for these which really means "out of network" as you could be offline whenever you are not on the corporate intranet, right? That doesn't mean you still shouldn't be able to work? No, no, no. The ability to cache local changes at then sync them up to the ultimate authority when the ability to speak to God arises was something I first saw at the @hand corporation. They got this right. Offline does not mean marooned or stateless. Travis recommends JWT tokens for load balancing at the servers and Vue.js for a MVVM pattern at the UIs, but these can be what they need to be for your needs. Also, bits of the UI can be fed from different things. Perhaps one rectangular section of content on a web page is fed from your API endpoints while another is fed from Google maps and a third from Twitter. Whatever.

the Promise API's way of doing things

function returnPromiseWhileStagingThenConditions(someVariable) {
   return globalService.getStuff(someVariable).then(yesGood, noBad);
   
   function yesGood() {
      otherGlobalThing.doSomething();
      return $q.when();
   }
   
   function noBad() {
      return $q.reject();
   }
}

Mads Torgersen is progressively taking over ownership (more and more) from Anders Hejlsberg of C#.

He is the genius behind the async/await stuff. I saw Scott Hunter give the keynote at the MVPMIX and this was the most interesting thing he said.

Anders is ...edging towards retirement?

Modern horror films impress me!

Here and here I sort of explain the blob of tentacles I am using as an image in the banner of this blog. It's from one this decade's horror movies and I find I have something more to add. Guys, in a hundred years' time, when film buffs look back, they will see the 2010s as the golden age of horror films. The 80s slasher film exploitation format is gone. It's not the same old tired thing retread again. Instead the stories are creative and smart and daring and inventive in a way no other genre sees. I was going to rattle off a bunch of examples, but you can figure it out for yourself. You're smart... and you deserve to be challenged!

Clear all history in the Edge browser.

Click the "Hub" icon at the upper right which looks like three horizontal lines stacked ontop each other and then click the "History" icon from the pane that flies out. It looks like a clock with an arrow wrapping it going counterclockwise.

I saw Chris Patterson speak on Azure and NServiceBus at the MVPMIX.

Automatonymous is an open-source state machine he developed.

Saturday, March 18, 2017

Another talk I saw at MVPMIX was Barry S. Stahl on loose coupling.

This talk was what you might think it was. His slide here shows off the Dependency Inversion Principal and the Single Responsibility Principal at the bookends of the SOLID stuff. The emphasis on the Single Responsibility Principal surprised me at first and then he clarified that he means "do not do the repository thing" (I'm paraphrasing) and that reading and writing should be broken up ah la CQRS and the like.

With the Façade Pattern one may create a false front overtop of an API, wrapping it.

JavaScript Koans

(pronouced: "cones") These are little puzzles to make you better at JavaScript. Make the messed up unit tests, pass instead of fail, etc. Yay!

Friday, March 17, 2017

GitLab bought Gitter.

Linus Torvalds created Git as sort of an open-source source control for Linux. It's not traditional source control like Mercurial with an onsite server that a business would want and permissions for who can do what. GitHub which uses Git shows this off. It's almost socialmediaesque showing off pet code projects as resume fodder. GitLab it seems has Git offerings that are more of a traditional business flavoring like the Mercurial stuff. GitLab bought Gitter which is a Slackesque chat environment for geeks to ask each other questions. It's a good resource for getting answers for how to do things in Angular 2, etc.

Thursday, March 16, 2017

rethinking DTOs

We did DTOs in a traditional MVC app as there was no way to test the Razor markup in the views. Thus, the objects that went there were first cast to Data Transfer Objects (DTOs) and those simpler things would make their ways up to the markup where there wouldn't need to be any logic to make sense of... oh... say, what's the first street address associated with a person. Instead that sort of figure-stuff-out would be flattened ahead of time by casting one object to another in C# where the flattening could be tested. A coworker today convinced me that maybe we shouldn't be trying to revamp the objects that come back from services in an Angular 2 app and especially so given that the components in Angular 2 are testable. I can see things from his angle. Whenever a new property is added to what comes back from the service all of the mapping logic would need love. Why not skip the mapping logic if you can? One exception might if you are to hide properties from users of certain non-administrative roles. You don't want that coming up to the UI in a JSON object as someone who knows what they are doing could fish it out of a browser.

Another pseudoSXSW event.

Not unlike this, I again went to a tech event in the midst of Austin's downtown (at Galvanize) while SXSW was underway. It really wasn't a part of South by Southwest it was just downtown amongst all the traffic and craziness. Whatever. It was on Azure web services and hosted by a Rachel Weil and a Paul DeCarlo and in it we created Azure accounts here and then went through this tutorial to get console apps to speak to each other through the cloud. It was called Mission Mars: Fourth Horizon and we were pretending to talk to marooned astronauts on Mars via the IoT.

Bonus: IFTTT is a web-based service that allows for creating chains of conditional statements called applets.

the EventEmitter in Angular2

Let's say you want to have a component talk up to a component wrapping it or even old Angular 1 code wrapping Angular 2 code and trigger a TypeScript method or a JavaScript function like so:

wellWhatever(13, 42, 69, 86);

 
 

Alright, in your HTML where you call out to your component by its' selector, you'd do so like this:

<my-awesome-component (my-emitter)="wellWhatever($event.foo, $event.bar,
      $event.baz, $event.qux)"></my-awesome-component>

 
 

In the component you'd define the Output inside the component but outside any one method the same way you would any other component-wide variable. Do note the discrepancy between kebab case above and camel case here.

@Output() myEmitter = new EventEmitter<any>();

 
 

Somewhere in your component you'd actually use the Output.

this.myEmitter.emit({
   foo: 13,
   bar: 42,
   baz: 69,
   qux: 86
});

 
 

If you are doing the components wrapping components nesting thing only the outermost component should be bootstrapped in the module wrapping it yet one level up as if you bootstrap everything it sabotages the event emitters. I learned this the hard way.

 
 

Addendum 5/30/2017: Output, EventEmitter get looped in from: from '@angular/core';

text-align:right;

Will make the input in an input type text field right-aligned. You might want to do this for fields that hold numbers, huh?

top: unset !important;

...is what you think it is. It overpowers the setting that suggests that the element should be X number of pixels or ems or whatever from the top.

overflow: visible !important;

...is the antidote for...

overflow: hidden;

Wednesday, March 15, 2017

The best talk I saw at MVPMIX was Lukas Ruebbelke on Observables.

A picture of an athlete doing the Fosbury Flop was advertised in the first slide to emphasize a point. This approach to high jumping was introduced to the world by a guy named Dick Fosbury in a 1960s Olympic Games. Mr. Fosbury would win the gold for his mad approach to high jumping which looked unlike anything anyone had seen before but yet was wildly effective. In this approach to jumping you run up and then twist to throw yourself over the bar with your back, bent in a U shape, to the bar and then flop down to the mat. Everyone else had dove over with their belly to the bar up until then. Crazy! Now the Fosbury Flop is the standard and the norm. What does this have to do with Observable? Well, Observable may seem scary and strange to you at first. You may think that it's just the default way to get asynchronous stuff in modern AngularJS, but this is really a simplification. There's more to it that you don't want to understand and you sense it, don't you. This will hurt a little, but only a little. Once you ramp up, you'll be glad that you did. You know that too, don't you? Don't be that guy laughing at Dick Fosbury while becoming a dinosaur. Lukas' suggested the seemly backwards thing about Observables, akin to the Fosbury Flop, was that instead of giving an input to get an output, as you might expect, you will, in this paradigm, get an output and then transform it into an input. There may be a bit of casting, transformations, and other hijinks along the way. Observables tend to take the shape of an event/subscribe sandwich, with an event drinking asynchronously from an endpoint and then, downstream in code (in what is the same line of code with some dot-dot-dot chaining going on), a subscribe handing off to code beyond the Observable implementation. Between these two points (on the same long line of code) one may have operators, the meat of our sandwich and that which makes Observable something more than just let's-call-an-API in nature. There is the opportunity for quite a bit of heavy lifting that may occur not after the plane has landed so much as while the individual passengers are parachuting in.

@ViewChild('right') right;
position: any;
 
ngOnInit() {
   Observable
      .fromEvent(this.getNativeElement(this.right), 'click')
      .map(event => 10)
      .startWith({x: 100, y: 100})
      .scan((acc, curr) => { return { y: acc.y, x: acc.x + curr}})
      .subscribe(result => this.position = result);
}

 
 

Above and below are examples.

@ViewChild('btn') btn;
message: string;
 
ngOnInit() {
   Observable.fromEvent(this.getNativeElement(this.btn), 'click')
      .filter(event => event.shiftKey)
      .map(event => 'Beast Mode Activated!')
      .subscribe(result => this.message = result);
}
 
getNativeElement(element) {
   return element._elementRef.nativeElement;
}

 
 

Another analogy: At a soda fountain at a restaurant where you may do the free refill thing (awesome) the stuff that comes into your paper cup is a mixture of two streams, one of carbonated water and the other of syrup. Similarly, you may combine to streams in Observable.

increment(obj, prop, value) {
   return Object.assign({}, obj {[prop]: obj[prop] + value})
}
 
decrement(obj, prop, value) {
   return Object.assign({}, obj {[prop]: obj[prop] + value})
}
 
ngOnInit() {
   const leftArrow$ = Observable.fromEvent(document, 'keydown')
      .filter(event => event.key === 'ArrowLeft')
      .mapTo(position => this.decrement(position, 'x', 10));
 
   const rightArrow$ = Observable.fromEvent(document, 'keydown')
      .filter(event => event.key === 'ArrowRight')
      .mapTo(position => this.increment(position, 'x', 10));
 
   Observable.merge(leftArrow$, rightArrow$)
      .startWith({x: 100, y: 100})
      .scan((acc, curr) => curr(acc))
      .subscribe(result => this.position = result);
}

 
 

Tweening for animations...

@ViewChild('ball') ball;
ngOnInit() {
   const OFFSET = 50;
 
   Observable.fromEvent(document, 'click')
      .map(event => {
         return {x: event.clientX - OFFSET, y: event.clientY - OFFSET}
      })
      .subscribe(props => TweenMax.to(this.ball.nativeElement, 1, props))
}

 
 

This last example shows how to collect/organize the things that stream in into pairs. I'm not sure that the dot-dot-dot is supposed to be taken literally below. This example, and all of the others here come directly from the slides Lukas Ruebbelke had.

lines: any[] = [];
ngOnInit() {
   Observable.fromEvent(document, 'click')
      .map(event => {
         return {x: event.pageX, y: event.pageY};
      })
      .pairwise(2)
      .map(positions => {
         const p1 = positions[0];
         const p2 = positions[1];
         return { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y };
      })
      .subscribe(line => this.lines = [...this.lines, line]);
}

 
 

Observables are looped in with the RxJS ReactiveX library. They are a better alternative to the Promise of TypeScript. I had heard that they were better due to the fact that they could stream in a collection progressively (and have the individual items hydrate asynchronously) when talking to a web socket. That's clearly not the only reason.

[attr.colspan]="whatever"

Some inline HTML parameters must be bound with the leading attr. in this manner for one-way binding in Angular 2 templates. If it's legit, but not a DOM property, such as colspan, you have to use this workaround.

If you have to hand all of $scope in from Angular 1 to an Angular 2 component you can pass it to an any in TypeScript.

Don't do this. Isolate only what you need in a drill down from $scope. Only hand that across the wire. Make a custom type to catch it.

It looks like you might have to recompile TypeScript every time you change a template in Angular 2.

Yes, even so if you are not using AOT Ahead-of-Time Compilation which makes JS of the HTML for the sake of speed. I do not really understand why. Maybe a caching gremlin?

Tuesday, March 14, 2017

Use bind to pass the scope of this down to a JavaScript function without the self=this hack!

var x = function(whatever) {
   return whatever + this.something;
}.bind(this);

how to compare enum values to strings in TypeScript

Both of these alerts will go off!

enum ColorPattern {
   Solid,
   Splotchy,
   Striped
}
if (ColorPattern.Solid == ColorPattern["Solid"]) {
   alert("equals");
}
if (ColorPattern.Solid === ColorPattern["Solid"]) {
   alert("strictly equals");
}

There is a separate web essentials for Visual Studio 2017.

Go get it here.

There is no real cap for z-index.

This suggests 2147483647 might be a cap for 32-bit browsers and that 1677727 was a version 3 of Safari cap. Remember, the higher the z-index, the closer to the top the item is. overflow:hidden can give the false feeling that something is sitting over top of another something due to a z-index being higher when that is not the case. Even things floating with absolute positioning inside of divs with overflow:hidden get their wings clipped in this way.

background-clip: padding-box;

...in CSS keeps the background from extending beneath the border beyond just the padding. (might be helpful if you have rounded corners)

-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;

Monday, March 13, 2017

In JavaScript, a zero is equal to an empty array but not strictly so.

alert(0 === []);
alert(0 == []);

The first alert above returns false but the second alert returns true.

If you're not from Texas, you might not know what breakfast tacos are!

At the last place I worked, I had a coworker visit from the Atlanta headquarters who had never had breakfast tacos and didn't know what they were! Basically, you take a soft flour tortilla and you wrap it around scrambled eggs. Those are the two main ingredients. You may mix in other things with the scrambled eggs for variations, chunks of sausage, etc.

the FromUri attribute for query string parameters

Use it like so, yes, at the level of the individual variable:

public async Task<IHttpActionResult> GetWhatever ([FromUri] long customerNumber,
      [FromUri] string otherThing, CancellationToken token) {

Kebab case is like snake case with hyphens instead of underscores.

Property bindings for Angular 2 components should have names in kebab case at the HTML that calls out to them to match up with the Input names in camel case at the .ts file for the component itself. This variation in wire-up takes some getting used to. There is also the concept of upper kebab case which would be like: My-Dog-Has-Fleas instead of just my-dog-has-fleas ...this is called train case. There is also UPPER_SNAKE_CASE too. This is also called screaming snake case.

Use a lambda expression at a forEach in TypeScript!

childItems.forEach((childItem: MyType): void => {
   if (childItem.myStatus === 'Whatever') {
      matches++;
   }
});

 
 

...may replace:

childItems.forEach(function (childItem) {
   if (childItem.myStatus === 'Whatever') {
      matches++;
   }
});

set the CSS style of something in jQuery

$("p").css({"background-color": "yellow", "font-size": "200%"});

...is an example from here.

Hanging off a DOM element, classList seems to hold a string array in JavaScript of all of the classes in the inline class parameter at the HTML tag.

className in contrast, has the same stuff in one string with the elements separated by spaces. className should be identical to what's in the inline class parameter at the HTML tag. Add on classes at className and not classList.

this.whatever.parentElement.className =
      this.whatever.parentElement.className + ' foo';

To find an adjacent DOM node in JavaScript try reaching up to the parent and then down again to a child.

this.whatever.parentElement.children[13].style = "background-color:purple;";

Sunday, March 12, 2017

Cannot find name 'Promise'

This error, upon compiling TypeScript, is happening for me because I have something in my node_modules folder that is "too new" which can happen if you just set requirements to get version X or better of things. The or better part stops working. If you have an old copy of your node_modules folder, you might try to rollback to it. My problem seems to stem from @angular/core being greater than version 2.4.6 or zone.js being greater than version 0.7.6, because I have an old folder full of the node_modules dependencies with these settings and that old folder works just fine. Use these commands in PowerShell to check what version of zone.js and rxjs you are using:

  • npm ls zone.js
  • npm ls rxjs

modern shelving in TFS

This is old. Open the "Team Explorer" pane in Visual Studio 2015 and go to "Pending Changes" and therein click on "Shelve" at the top to shelve. Alternatively, lick on "Actions" instead of "Shelve" and then "Find Shelvesets" to unshelve. You will have to next search by the name of the party who made the shelveset at the top of the page to unshelve. The name you give needs to be an exact match.

Saturday, March 11, 2017

COM with Classic ASP

Something that has come up in a few conversations over the past handful of days is how one could use COM objects with Classic ASP. That which was not of the UI could be abstracted away into COM objects. You could have your business logic here. I never even heard of this back in the day. I think most people just made spaghetti messes in Classic ASP with no separation of concerns.

Friday, March 10, 2017

The second day of the MVPMIX!

This was at the University of Texas at Dallas campus in Richardson, TX in lieu of the Addison Convention Center of Addison, Texas where the prior day's festivities were held. This day held one big day long training on many things by Chander Dhall and not a series of hour long talks by many speakers as was the circumstance the day before.

It would be inappropriate to reveal all the goodies from this awesome not-for-free training, so I will just give you the very first thing I learned today. Self-running JavaScript functions like this...

(function () {
   var x = new Date();
   var y = x.getMonth();
   var z = y * y;
   alert(z);
}());

 
 

...are referred to as IIFE functions. IIFE is pronounced "iffy" and stands for: Immediately-Invoked Function Expression

The second to last talk I saw yesterday at MVPMIX was Barry S. Stahl on using a DSL to make queries more readable.

You may kinda see what he thinks is a bad query at the upper right of this photo:

Alright, in his case he is slurping in stuff from StackOverflow and posts which have no parents themselves are themselves the standalone questions and not the commentary associated with the questions. With that in mind, would this:

whatever.Where(x => x.ParentId == null)

 
 

...be more readable like this...

whatever.Questions()

 
 

I'm paraphrasing what he had a little bit. How do you make this happen? With extension methods of course.

Thursday, March 9, 2017

I'm halfway through the MVPMIX experience in DFWland.

The last talk I saw on the first day was Travis Tidwell on M.E.A.N. wherein MEAN is an acronym for MongoDb, Express (a framework for NodeJS), AngularJS, and NodeJS. This may sound a lot to you like LAMP which stood for Linux, Apache, mySQL, and PHP and really MEAN is the new LAMP. It's a stack of free, open-source things for doing modern web development. Form.io, FountainJS, and reveal.js were also recommended. The second of these three is a Yeoman generator.

Wednesday, March 8, 2017

Import a JSLint-Options.xml file to restrain JSLint from being too finicky.

...and thus causing too many errors in Visual Studio 2015 upon a build. Click the "Import..." button at the JSLint Options pane and find the file.

The best way to get the latest changes for your Visual Studio 2015 solution in TFS.

  1. In the "Team Explorer" tab, click on the Home icon which looks like a little house.
  2. Then click on: "Source Control Explorer"
  3. In the "Source Control Explorer" pane that appears, browse the "Folders" section at the left to find your source location.
  4. Right-click on it and pick: "Get Latest Version"

Do NOT simply right-click on your solution in the Solution Explorer and pick "Get Latest Version (Recursive)" as this will not pull down new supporting files such as new NuGet dependencies outside of your solution. Duh!

CancellationToken in C#

Per this "A CancellationToken enables cooperative cancellation between threads, thread pool work items, or Task objects." and you kinda make one like this:

CancellationTokenSource source = new CancellationTokenSource();
CancellationToken token = source.Token;

 
 

I see these handed in at method signatures that return a Task of T from which the result will get assigned to a variable while using the await keyword like so:

var myResult = (await myMethod(myRealVariable, token));

 
 

Mysteriously there is little more than that. You don't really have to do anything with the token inside the method. I don't immediately understand how it helps and what the pain points are of not having it.

SQL triggers antipattern

If application A updates application B and then application B turns around and updates application C with database triggers in a reactive way (I will cry out when you touch me), this is bad. Do not daisy chain application updates. Ideally there is a pub/sub process for allowing both B and C to drink up what's new at A. Anymore when you ask yourself "When would I want to use a trigger?" it's hard to justify it. I guess you could have database to database updates if records are kept in two sister tables in two sister databases, and I guess you could have a logging table that gets updated from triggers when other tables are touched.

Tuesday, March 7, 2017

Canceled versus Cancelled

Apparently, the spelling with a single L is American and the double L thing is British.

Monday, March 6, 2017

modulus operator or modulo operation

The is that percentage sign between two numbers in a math calculation invoking an answer in which we are given the remainder of the number at the left divided by the number at the right.

Sunday, March 5, 2017

using enums in TypeScript takes some getting used to

enum Nordic {
   Denmark,
   Finland,
   Iceland,
   Norway,
   Sweden
}
let noTrees: number = Nordic['Iceland'];
alert(noTrees);
alert(Nordic[noTrees]);
let highestStandardOfLiving: Nordic = 3;
alert(highestStandardOfLiving);
alert(Nordic[highestStandardOfLiving]);

 
 

This code will cause four alerts which sequentially will contain the following:

  1. 2
  2. Iceland
  3. 3
  4. Norway

 
 

And, respectively, these four alerts show off:

  1. how to fish out a value from an enum with a magic string
  2. how to fish out the string value from an enum with a number
  3. how to set a enum with a number
  4. how to fish out the string value from an enum with the enum setting

 
 

Note that the line up above reading...

let highestStandardOfLiving: Nordic = 3;

 
 

...could become...

let highestStandardOfLiving: Nordic = Nordic.Norway;

 
 

...and the four alerts would be the same. Also note that when you talk from exclusively JavaScript into TypeScript as you might in Angular 1 with Angular 2 hodgepodges you have to set enums by just using the number encoding. There is no way to set with a friendly name in the name of readable code from the JavaScript side.

Saturday, March 4, 2017

HTTP Debugger Pro v7.11 and SoapUI 5.3.0 play nicely together.

HTTP Debugger Pro is like the better Telerik's Fiddler which costs fifty bucks instead of being free. It is good for sniffing XML packets sent in SOAP requests and what not. It will progressively fill up a display with line items that represent the various calls out in traffic like Fiddler will.

  1. Click on a line item for a POST method type request.
  2. Click at the lower left click on the "Content" tab to see the XML being sent over the wire as the details for the outgoing request.
  3. In SmartBear's SoapUI click on the "Projects" at the upper right and add a new SOAP project.
  4. Paste in the URL advertised at your line item back at HTTP Debugger Pro and then bolt ?wsdl onto the end to get the WSDL.
  5. From the BasicHttpBindings find the method you are calling from C#, right-click upon it, and make a new request.
  6. At SoapUI, paste the XML from step 2 into the left side of the request window and then press the green arrow to hydrate the right side with the data that roundtrips back to you.
  7. Doctor up the XML at the left as need be to try different things to experiment with different results. This seventh step makes SOAP UI really easy to work with once you are on the other side of the first six.

A whois lookup for httpdebugger.com suggests that someone named Khachatur Petrosyan owns it.

Friday, March 3, 2017

downparser

Top-down parsing is a strategy for how to crawl through code in parsing. I don't know what the rivals are or why this might be better.

You don't have to use Redis Cache or the like to compensate for an inability to use Session in C# in distributed environments.

There has always been a "State Server" approach for just storing Session at a database and there is a more current "SQL Server Backing" as well.

Thursday, March 2, 2017

bad breakout in a WCF web service

There is a distinction between the URL for an endpoint and the url for a WSDL as described here and if the WSDL URL itself is being used as the endpoint too that should smell bad to you. I saw this today... and, yes, it did work nonetheless.

Instead of just ordering the cases in a switch statement alphabetically or numerically why don't you order them by likelihood of use?

If the value to be used 90% of the time just shows up first the code doesn't have to crawl past other cases to find what it needs 90% of the time. Get it?

sentinel

This is a name for a value that really is a special encoding, not to be literally used as a value. If foo is an integer and you are to fish something out of an array at the foo position unless foo is negative one then -1 is a sentinel in that regard as you could not otherwise get something at position -1 out of an array. In this situation zero and up are actual values for foo and negative one is a sentinel.

A rack mountable server 1U tall is an inch and three quarters tall.

2U equals three and a half inches, etc.

Adaptive Certification Tests!

When you miss a question, the process will ask you follow up questions on the topic to try to drill into what you don’t know. Adaptive!

JSLint in Visual Studio 2015!

  1. at the "Tools" menu pick "JS Lint Options..."
  2. at the dialog box that appears, check the checkbox for "Enable JSLint" at the upper right
  3. also be sure the checkbox for "Run JSLint on build" is checked in the middle of the controls you see

SalesForce Chatter

...is a cloud-based community chat-with-others service.

What did the *ngIf stuff look like in Angular 1?

<div ng-if="foo == 'whatever'">
   you can see this!
</div>

Wednesday, March 1, 2017

crushing fetish

It's a thing. I heard about it for the first time in watching Paul Verhoeven's film "Elle" staring Isabelle Huppert (which I recommend). I thought it was joke, something they just made up for the movie the way the liquid drug P2P was made up for "Stone Cold" ...and no that biker movie wasn't exposing the evils of pier-to-pier sharing. Per Rule 34 of the Internet, we have: "crushing"

 
 

Hey, the HTML for the iFrame above is kinda fun:

<iframe width="560" height="315" src="https://www.youtube.com/embed/mTl6BQRWr_k"
      frameborder="0" allowfullscreen>
</iframe>

 
 

It has allowfullscreen which apparently allows one to call .requestFullscreen() from JS to make the crushing overwhelming.

With Angular 2 you can bind to properties like checked but not attributes like aria-checked.

I mean properties and attributes at HTML tags that is. So... no Aria yet. Boo!

Cannot pass 'whatever' as a ref or out argument because it is a 'foreach iteration variable'

You cannot do the ref thing inside a foreach loop in C# and what is more, even if you try to hack around this by just handing in a reference type without the ref keyword, the stuff you set on your object in the method to doctor it up will not "stay around" so to speak back at the end of the foreach loop. Lame! I found a StackOverflow article that kinda suggested that this has to do with the enumerator getting confused. Whatever.

What version of node/Angular/TypeScript am I using?

Run the command prompt at your PC laptop as Administrator and then navigate into the folder where you'd otherwise run "npm start" to get your Angular 2 app afloat. Herein, try these commands:

  1. node -v
  2. npm ls @angular/core
  3. npm -v
  4. npm ls typescript

That last one needs to have "typescript" in it and not "TypeScript" which won't work so well. The application detailed here, here and here has the following specs. The commands above reveal the following details:

  1. 6.9.5 of Node.js
  2. 2.1.2 of AngularJS
  3. 3.10.10 of npm
  4. 2.1.5 of TypeScript

These numbers all look like semantic versioning to me and the MAJOR.MINOR.PATCH shape of things.

How can I tell where GitHub is putting a local folder for my project?

right-click on a project at the upper left of the desktop client and pick "Open in Explorer" in Windowsland environments

  • my various folders were in a common folder at C:\Users\Thomas\Documents\GitHub