If you look at Users under Security at a database in SSMS and there is a little red X by the user that means that the user does not have "connect abilities" for the database.

The SQL command to give someone back their access is:

grant connect to [jimAcosta]

Get a sharable file in OneDrive's paradigm.

OneDrive works just like a folder in Windows. You just drop stuff onto a "drive" and then you may right-click on anyone item there, or nested within a folder you created there, and pick "Share" to get a link to the file that you may hand on to others.

In git command line commands one does not have to wrap a commit message in quotes if the message has no spaces.

Example:

git commit -m 2013-jet-planes-islands-tigers-on-a-gold-leash

Get the URLs for Power BI reports into an iFrame-friendly shape.

If you try to use this...

https://app.powerbi.com/groups/fdf0afb1-b82f-4f2c-9b18-3a155e641da4/reports/e94cc465-3b7c-4423-aee4-e54d11461023/ReportSection?filter=Template_x0020_FileUpload/FileName eq 'Something.xlsx'

 
 

...in the src setting in an iFrame. You will get this error:

Refused to display 'https://app.powerbi.com/groups/fdf0afb1-b82f-4f2c-9b18-3a155e641da4/reports/e94cc465-3b7c-4423-aee4-e54d11461023/ReportSection?filter=Template_x0020_FileUpload/FileName%20eq%20%27Something.xlsx%27' in a frame because it set 'X-Frame-Options' to 'deny'.

 
 

Reshape the report like so to beat the problem:

https://app.powerbi.com/reportEmbed?reportId=e94cc465-3b7c-4423-aee4-e54d11461023&autoAuth=true&ctid=a0992d83-4b6b-4c73-9f94-93de63f4a60d&filter=Template_x0020_FileUpload/FileName eq 'Something.xlsx'

 
 

Note that we have kept the report's identifier and dropped the group's identifier. You also have to have the ctid already from making another iFrame-friendly report to begin with. Note how the one GET variable above gets bolted on to the end of a set of variables.

Globally Unique Identifier or Global Unique Identifier is what GUID stands for.

It's amazing that that wasn't at this blog already.

Get a DateTime set in a particular time zone in C#!

DateTime howSoonIsNow = TimeZoneInfo.ConvertTime(DateTime.Now,
      TimeZoneInfo.FindSystemTimeZoneById("Central Standard Time"));

 
 

How do you know what to use for the "Central Standard Time" magic string you ask? Great question. You may dig up a list of time zones like this:

ReadOnlyCollection<TimeZoneInfo> zones = TimeZoneInfo.GetSystemTimeZones();
foreach (TimeZoneInfo zone in zones)
{
   var magicString = zone.Id;

 
 

Each TimeZoneInfo has a .Id hanging off of it which holds the magic string you need. There are 139 possibilities:

1. Dateline Standard Time
2. UTC-11
3. Aleutian Standard Time
4. Hawaiian Standard Time
5. Marquesas Standard Time
6. Alaskan Standard Time
7. UTC-09
8. Pacific Standard Time (Mexico)
9. UTC-08
10. Pacific Standard Time
11. US Mountain Standard Time
12. Mountain Standard Time (Mexico)
13. Mountain Standard Time
14. Central America Standard Time
15. Central Standard Time
16. Easter Island Standard Time
17. Central Standard Time (Mexico)
18. Canada Central Standard Time
19. SA Pacific Standard Time
20. Eastern Standard Time (Mexico)
21. Eastern Standard Time
22. Haiti Standard Time
23. Cuba Standard Time
24. US Eastern Standard Time
25. Turks And Caicos Standard Time
26. Paraguay Standard Time
27. Atlantic Standard Time
28. Venezuela Standard Time
29. Central Brazilian Standard Time
30. SA Western Standard Time
31. Pacific SA Standard Time
32. Newfoundland Standard Time
33. Tocantins Standard Time
34. E. South America Standard Time
35. SA Eastern Standard Time
36. Argentina Standard Time
37. Greenland Standard Time
38. Montevideo Standard Time
39. Magallanes Standard Time
40. Saint Pierre Standard Time
41. Bahia Standard Time
42. UTC-02
43. Mid-Atlantic Standard Time
44. Azores Standard Time
45. Cape Verde Standard Time
46. UTC
47. GMT Standard Time
48. Greenwich Standard Time
49. Sao Tome Standard Time
50. W. Europe Standard Time
51. Central Europe Standard Time
52. Romance Standard Time
53. Morocco Standard Time
54. Central European Standard Time
55. W. Central Africa Standard Time
56. Jordan Standard Time
57. GTB Standard Time
58. Middle East Standard Time
59. Egypt Standard Time
60. E. Europe Standard Time
61. Syria Standard Time
62. West Bank Standard Time
63. South Africa Standard Time
64. FLE Standard Time
65. Israel Standard Time
66. Kaliningrad Standard Time
67. Sudan Standard Time
68. Libya Standard Time
69. Namibia Standard Time
70. Arabic Standard Time
71. Turkey Standard Time
72. Arab Standard Time
73. Belarus Standard Time
74. Russian Standard Time
75. E. Africa Standard Time
76. Iran Standard Time
77. Arabian Standard Time
78. Astrakhan Standard Time
79. Azerbaijan Standard Time
80. Russia Time Zone 3
81. Mauritius Standard Time
82. Saratov Standard Time
83. Georgian Standard Time
84. Volgograd Standard Time
85. Caucasus Standard Time
86. Afghanistan Standard Time
87. West Asia Standard Time
88. Ekaterinburg Standard Time
89. Pakistan Standard Time
90. Qyzylorda Standard Time
91. India Standard Time
92. Sri Lanka Standard Time
93. Nepal Standard Time
94. Central Asia Standard Time
95. Bangladesh Standard Time
96. Omsk Standard Time
97. Myanmar Standard Time
98. SE Asia Standard Time
99. Altai Standard Time
100. W. Mongolia Standard Time
101. North Asia Standard Time
102. N. Central Asia Standard Time
103. Tomsk Standard Time
104. China Standard Time
105. North Asia East Standard Time
106. Singapore Standard Time
107. W. Australia Standard Time
108. Taipei Standard Time
109. Ulaanbaatar Standard Time
110. Aus Central W. Standard Time
111. Transbaikal Standard Time
112. Tokyo Standard Time
113. North Korea Standard Time
114. Korea Standard Time
115. Yakutsk Standard Time
116. Cen. Australia Standard Time
117. AUS Central Standard Time
118. E. Australia Standard Time
119. AUS Eastern Standard Time
120. West Pacific Standard Time
121. Tasmania Standard Time
122. Vladivostok Standard Time
123. Lord Howe Standard Time
124. Bougainville Standard Time
125. Russia Time Zone 10
126. Magadan Standard Time
127. Norfolk Standard Time
128. Sakhalin Standard Time
129. Central Pacific Standard Time
130. Russia Time Zone 11
131. New Zealand Standard Time
132. UTC+12
133. Fiji Standard Time
134. Kamchatka Standard Time
135. Chatham Islands Standard Time
136. UTC+13
137. Tonga Standard Time
138. Samoa Standard Time
139. Line Islands Standard Time

The revocation function was unable to check revocation for the certificate.

Try to fix this inability to clone with git with this command:

git config --global http.sslBackend schannel

 
 

There is a .gitconfig file somewhere and it will get this in it as a new line:

sslBackend = schannel

 
 

If this does not fix the problem chase the line above with:

sslVerify = false

Snyk and Black Duck

These tools scan for sinister npm packages that might end up in your node_modules folder as dependencies of dependencies of something looped in.

Defamation is an umbrella term for slander and libel.

Slander involves spreading character assassination falsehoods about someone via spoken word which includes in audio recordings and podcasts. Libel is the same thing with written words, at a blog post, etc.

EULA stands for end user license agreement.

There is a common UX approach of this. Scroll to the bottom of the text before you affirm that you read it or check a checkbox beneath a box with scrollable text or some combination of the two.

change directories in a GitBash Shell

Instead of...

cd C:\myfolder\myotherfolder

 
 

...or...

set-location C:\myfolder\myotherfolder

 
 

It's:

cd /c/myfolder/myotherfolder

boilerplate bakeout of the NgRx store stuff for a new object in an Angular 7 application

Alright, at the store there already was a user and we are adding businessUnitRecords with the following files:

1. state-management/actions/business-unit-record.actions.ts
   
   import { Action } from '@ngrx/store';
   import { BusinessUnitRecordModel } from '../../models/business-unit-
         record.model';
   import { BusinessUnitRecordUpdatePayload } from 'src/app/models/business-unit-record-update-
         payload.model';
    
   export enum BusinessUnitRecordActionTypes {
      LoadBusinessUnitRecords = '[BusinessUnitRecord] Load Business Unit
            Records',
      LoadBusinessUnitRecordsSuccess = '[BusinessUnitRecord] Load Business Unit
            Records Success',
      LoadBusinessUnitRecordsFail = '[BusinessUnitRecord] Load Business Unit
            Records Failure',
      UpdateBusinessUnitRecord = '[BusinessUnitRecord] Update Business Unit
            Record'
   }
    
   export class LoadBusinessUnitRecords implements Action {
      readonly type = BusinessUnitRecordActionTypes.LoadBusinessUnitRecords;
      constructor() {}
   }
    
   export class LoadBusinessUnitRecordsSuccess implements Action {
      readonly type = BusinessUnitRecordActionTypes
            .LoadBusinessUnitRecordsSuccess;
      constructor(public payload: Array<BusinessUnitRecordModel>) {
         
      }
   }
    
   export class LoadBusinessUnitRecordsFail implements Action {
      readonly type = BusinessUnitRecordActionTypes
            .LoadBusinessUnitRecordsFail;
      constructor(public payload: string) {}
   }
    
   export class UpdateBusinessUnitRecord implements Action {
      readonly type = BusinessUnitRecordActionTypes
            .UpdateBusinessUnitRecord;
      constructor(public payload: BusinessUnitRecordUpdatePayload) {
         
      }
   }
    
   export type BusinessUnitRecordActions = LoadBusinessUnitRecords |
         LoadBusinessUnitRecordsSuccess | LoadBusinessUnitRecordsFail |
         UpdateBusinessUnitRecord;
    
    
2. state-management/effects/business-unit-record.effect.ts
   
   import { Injectable } from '@angular/core';
   import { Actions, Effect, ofType } from '@ngrx/effects';
   import { Store, Action, select } from '@ngrx/store';
   import { Observable, of } from 'rxjs';
   import { mergeMap, map, catchError, tap, switchMap } from 'rxjs/operators';
   import { IMainStore } from '../store/store';
   import * as fromBusinessUnitRecords from '../actions/business-unit-
         record.actions';
   import { BusinessUnitRecordsContract } from '../../contracts/business-unit-
         records.contract';
   import { BusinessUnitRecordModel } from '../../models/business-unit-
         record.model';
    
   @Injectable()
   export class BusinessUnitRecordEffects {
      constructor(
         private businessUnitRecordsContract: BusinessUnitRecordsContract,
         private actions$: Actions<fromBusinessUnitRecords
               .BusinessUnitRecordActions>,
         private store: Store<IMainStore>
      ) {
      
      }
    
      @Effect()
      loadBusinessUnitRecords$: Observable<Action> = this.actions$.pipe(
         ofType(fromBusinessUnitRecords.BusinessUnitRecordActionTypes
               .LoadBusinessUnitRecords),
         mergeMap((a, i) => {
         return this.businessUnitRecordsContract.GetBusinessUnitRecordsObj().pipe(
            map(businessUnitRecords => new fromBusinessUnitRecords
                  .LoadBusinessUnitRecordsSuccess(businessUnitRecords)
            ),
            catchError((err, ii) => {
            return of(new
                  fromBusinessUnitRecords.LoadBusinessUnitRecordsFail(err.message));
            })
         )
         })
      );
   }
    
    
3. state-management/reducers/business-unit-record.reducer.ts
   
   import { BusinessUnitRecordStore } from '../store/store';
   import { BusinessUnitRecordActions, BusinessUnitRecordActionTypes } from
         '../actions/business-unit-record.actions';
   import { IBusinessUnitRecordStore } from '../../models/business-unit-
         record.model';
   export function BusinessUnitRecordReducer(
      state = BusinessUnitRecordStore,
      action: BusinessUnitRecordActions
   ) : IBusinessUnitRecordStore {
      switch(action.type){
         case BusinessUnitRecordActionTypes.LoadBusinessUnitRecordsSuccess:
            return {
               ...state,
               businessUnitRecords: action.payload
            };
    
         case BusinessUnitRecordActionTypes.UpdateBusinessUnitRecord:
            action.payload.businessUnitRecordsContract.UpdateBusinessUnitRecord(
               action.payload.businessUnitRecordModel,
               action.payload.whatToDo,
               action.payload.error
            );
            return {
               ...state,
               businessUnitRecords: state.businessUnitRecords.map(bu => {
                  if (bu.BusinessUnitID == action.payload
                        .businessUnitRecordModel.BusinessUnitID) {
                     bu.isProcessing = action.payload
                        .businessUnitRecordModel.isProcessing;
                  }
                  return bu;
               })
            };
    
         default: {
            return state;
         }
      }
   }
    
    
4. state-management/selectors/business-unit-record.selector.ts
   
   import { createFeatureSelector, createSelector } from '@ngrx/store';
   import { IBusinessUnitRecordStore } from '../../models/business-unit-
         record.model';
   import { IMainStore } from '../store/store';
    
   export const getBusinessUnitFeatureState = createFeatureSelector<IMainStore,
         IBusinessUnitRecordStore>('businessUnitRecords');
    
   export const getAllBusinessUnits = createSelector(
      getBusinessUnitFeatureState,
      state => state.businessUnitRecords
   );
    
    
5. state-management/store/store.ts
   
   import { IUserStore } from '../../models';
   import { IBusinessUnitRecordStore } from '../../models/business-unit-
         record.model';
    
   export interface IMainStore {
      businessUnitRecords: IBusinessUnitRecordStore,
      user: IUserStore
   }
    
   export const UserStore: IUserStore = {
      user: null
   }
    
   export const BusinessUnitRecordStore: IBusinessUnitRecordStore = {
      businessUnitRecords: null
   }
    
    

Alright, in order to use this stuff at a component, you'll want a constructor that starts out like this.

constructor(public store: Store<IMainStore>

 
 

Put records in the store if they are not yet there as follows (or otherwise, just update the store from the database).

this.store.dispatch(new LoadBusinessUnitRecords());

 
 

Pull records from the store like so:

this.store.select(getAllBusinessUnits).subscribe(businessUnitRecords => {
   this.businessUnitRecords = businessUnitRecords;
})

 
 

Write back a record:

this.store.dispatch(new
      UpdateBusinessUnitRecord(businessUnitRecordUpdatePayload));

 
 

My write back is kinda bad as it assumes that the call to the API will succeed and then immediately calls out to the store.

 
 

Addendum 6/13/2019: Something that is missing is the loop in of the effects at a module. See: this

 
 

Addendum 12/26/2019: In looking at what is above I realize there is no spec for IBusinessUnitRecordStore. It would have to look something like so:

export interface IBusinessUnitRecordStore {
   businessUnitRecords: Array<BusinessUnitRecord>;
}

 
 

StoreModule.forRoot({ models: BusinessUnitRecordReducer }), probably also needs to go in the imports in the module before the EffectsModule import. Import that up top from @ngrx/store to get it afloat. BusinessUnitRecordUpdatePayload is going to look like so:

export class BusinessUnitRecordUpdatePayload {
   model: BusinessUnitRecord;
   whatToDo: string;
   error: string;
}

Use Jasmine to make a hollow spy that takes nothing and returns nothing in a Jasmine/Karma test in an Angular 7 application.

In this karma-jasmine test, this...

dispatch: (action: Action) => void = this.emptyPlaceholder;

 
 

...may become:

dispatch: (action: Action) => void = jasmine.createSpy();

 
 

You don't need to import anything at the top of the file to get this to work, not when running the tests. To get the application to compile when running normally you will need to add the following to the "exclude" array inside of tsconfig.app.json:

• "**/*.spec.ts"
• "**/testing/*"

Alt.NET

This was the name of a certain tech stack in the C# space. It included NHibernate. It was of doing things not the Microsoft way but better, with the help of the open source community.

Nineteen days ago I saw Jason Taylor speak on clean architecture at the Norwegian Developers Conference.

NorthwindTraders is an example of what Jason Taylor dubbed "clean architecture" which seemed a lot like onion architecture to me, only significantly updated. Gone is the reliance on NHibernate. The modern orchestration uses Entity Framework Core 2.2 inside of ASP.NET Core 2.2 in an attempt to follow a KISS (keep it simple, stupid) cut and dry approach. CQRS is in the mix. The central, no-dependencies-leaking-in, Core project of the onion architecture is redubbed the Common project in the NorthwindTraders application. It was suggested to use data annotations sparingly for simple scenarios or perhaps, not at all. The FluentValidation NuGet package was instead recommended for, yes, fluent validations. The validations and the common extension methods were pulled out of the Common project into the infrastructure project which surprised me a little bit. Jeffrey Palermo used to suggest that the Core (i.e. Common) should be as fat as possible with testable code detached from the UI and external dependencies. Jason Taylor's Common project is kept light in contrast. The Swagger specification has become the OpenAPI specification and this was in there as well. Swagger, er OpenAPI, is really gold for discoverability in a microservices architecture. Another thing in the mix is MediatR. Its author, Jimmy Bogard, was at this event and I spoke with him some. His talk, which I didn't catch, had to do with transactions in MongoDB. Apparently, if you send ten documents from point A to point B and the process barfs partway through there is no way to roll back the three of ten documents that got written at point B. The solution is to have something listening at both endpoints and double-checking expectations with the opposite endpoint. Again, I didn't see the talk and I am sort of jamming this in here as an afterthought as it is worth mentioning. I'll offer a second, similar afterthought. As an attendee of Norwegian Developers Conference you could vote green, yellow, or red on a talk by putting a card in a bin when you walked out from the talk. Green meant good and yellow meant ho-hum. I never myself saw anyone put red cards in, but as I was talking to a coworker of mine between talks he became distracted by all of the red cards being cast behind me as people emptied out of the "patterns for high-performance C#" talk of Federico Andres Lois. We theorized that the talk was a bait-and-switch sales pitch for RavenDB.

I saw Jennifer Estrada speak on ECMAScript 6 JavaScript at the Norwegian Developers Conference whilst very pregnant with her daughter.

The modern day company Accenture is the Anderson Consulting arm of Enron rebranded. Did you know that? I guess I'm already off topic. JScript (the JavaScript files inside Visual Studio) and ActionScript are ECMAScript like what we think of as JavaScript which is also really ECMAScript. ClojureScript compiles Clojure to JavaScript. A lot of ES6 features are available in TypeScript. const uses "block scope" like let in ES6 as is the case in TypeScript. Declaring objects with const really only declares an immutable binding, and you can change the properties on a const object. const variables must be given a value the moment they are assigned and that breaks with other languages. Arrow functions simplify scope. You don't have to have .bind(this) and instead the guts are "lexically bound" and inherit the context of this from the code that uses the arrow function. Again, this is like TypeScript, only in JavaScript. The string interpolation of TypeScript has a sister in what are known as template strings in ECMAScript 6. It is the same syntax with backticks, curly braces, and dollar signs. You may use apostrophes mundanely inside of the backticks like they are just another character. You may have a default parameter in a function like so:

function multiply(a, b=2) {
   return a * b;
);

 
 

I confirmed that this is TypeScript compiler safe in the event of just calling the function with one variable during the talk in the occurrence of a mishmash between this code and some TypeScript. Without the =2 that act would be impossible in TypeScript as the compiler would freak out, and freak out well upstream of the return statement merely erroring out when multiplication against undefined wasn't feasible. Obviously, in TypeScript itself having a question mark following the variable name (then followed by a colon and furthermore followed by a type) is another way to have an optional actor that is TS safe. Another attendee pointed that out to me as I left the talk which is what everyone says to me when I point my finger at the one way TypeScript is not a superset of JavaScript. There is an Airbnb Linter. You may have nested deconstruction in ECMAScript 6. If something is thenable you may use the .then on it. Anything declared without async is inherently using the promise API so it has a .then to call.

Seventeen days ago I saw Joe Karlsson and Edward Ecker speak on UX and engineering trying to get along at the Norwegian Developers Conference.

Joe Karlsson sports the hairbun at the left in the photo here, but he is not UX. He is engineering. Edward Ecker at right is UX. UX is user experience. They both work at Best Buy. Don't try to make mockups perfect. They just need to be good enough. Get engineering onboard. Try to catch design bugs early. Don't hoard designs. Try to have something to show every other day. Premature optimization is the root of all evil. When someone else comes out of a meeting (perhaps a product owner, not UX) with a wireframe, then UX is behind working on a story they don't want to work on. Try to have UX and product owners coplan features. In design thinking we are all working together and we need to speak the same language. The first pillar of design thinking is to empathize. The second is "define" and therein pick the worst problem the customer is facing that you can control. Ideate is third. Ideate involves tackling the said worst problem the customer is facing that you can control. Get development involved sooner instead of later. Fourth, remember to make others think they are contributing ideas. Start with a developer in the room, whiteboarding and talking about what is possible. Fifth, review. Sixth, prototype. InVision, Framer X, Axure RP, and Adobe XD are prototyping tools. (X for experience, RP for rapid prototyping, and XD for experience design) InVision Inspect and Zeplin were also namedropped as tools. Seven, test your favorite ideas in user testing. Eighth and last, it might be helpful to have microhackathons to get design and development together for a week to see what is possible. This eighth item isn't really eight on the list of seven. Devs need to pull the design team in early. Keep it Lean. Review tickets before you code. Engineering doesn't have to consult design for every nitpicky decision. Don't silo yourself and try not to be siloed. Not being a part of the team camaraderie is going to affect your ability to collaborate negatively. Sometimes we need to disconnect to do deep work but try to be available. TLDR stands for Too Long, Didn't Read and when you share your knowledge you should try to be concise to avoid that reaction. How is that possible if there is a large number of business people and devs of engineering and UX parties? How do you collaborate without everyone collaborating and it being too much? Someone will have to be the representation from a faction to a seat at the table.

I saw Cory House speak on GraphQL at the Norwegian Developers Conference.

What if the client has more power, not just the server? That is the premise of GraphQL. Cory House recommended using GraphiQL as a tool to interact with a GraphQL endpoint. At the left pane you'll form a query in something like a JSON form shaped like so:

query {
   allPosts {
      id
      title
      views
   }
}

 
 

As best as I can tell this is the destructuring JavaScript syntax used for pulling pieces out of a bigger JSON object like so:

const { first, last } = person;

 
 

If title becomes myTitle: title in our query above it renames a property in sucking it over. JSON GraphQL Server is kind of like JSON Server. You may wire up a graph to query against. All interactions with GraphQL are done with the POST verb which tends to invalidate caching. A resolver is a function that returns a specific thing from elsewhere in the midst of the server side of GraphQL. If a graph is aggregated from three other web services you have to reach out to those web services at some point, right? The calls out are called resolvers in this space. A good way to get started in this space in transitioning from ReST is to wrap existing API calls and then get back pieces of your data. You may parameterize a query. One of the problems with OData was that it was open by default. With GraphQL you start out completely closed. I, the UI developer, decide which queries get passed in, disallowing a SELECT * scenario, hopefully. Be careful of overfetching in which you wanted a banana and you grabbed the whole jungle. You may make a graph from a PostgreSQL database. Akamai is a tool for GraphQL data caching. What do you want to do with file data? Store the files as blobs? No. Have links to files in your graph. GraphQL is being thought of as the backend for the frontend. A schema may have a query inside of it like the one at the top of this blog post and it also may contain a mutation like so:

mutation {
   createPost(id: 1, title: "I love GraphQL", views: 100, user_id: 254)
}

 
 

At the end of the talk Cory House asserted that while GraphQL is an actual specification, that ReST never was. It came from Roy Fielding giving a dissertation and everyone ran with their own implementations of it. The HatEoAS Hypermedia stuff is hardly used, but it is cornerstone to the original idea which has arguably decayed as it has "evolved" over time.

When making a new component with the Angular CLI a folder deeper...

Navigate into that folder at the shell first!

Stub a nested component when testing a wrapping component in Angular 7.

Just make a placebo component that does less and loop it in at declarations in TestBed.configureTestingModule in beforeEach instead of its smarter sister.

The bent flying cards in UML with two parallel curved sides are like a snake in Snakes and Ladders.

We are going back to the beginning of the process. You fail.

%27 represents an apostrophe at the URL inline.

This touches on some other characters beyond the single tick.

CAB stands for Change Advisory Board.

This group of peeps judges changes to be in production.

TUG stands for Tree Unified with Grammar.

...another old language.

Maybe don't call out specific UI elements in user stories.

Instead speak to what the user is trying to do.

Sitefinity

It's another CMS (content management system) solution like Sitecore. Supposedly it has better account generation.

Mock the NgRx store when testing an Angular 7 application!

How may we handle a component constructor like this at tests?

constructor(public store: Store<IMainStore>) {

 
 

As suggested here we need to mock the store. Make a class like so for that:

import { Injectable } from '@angular/core';
import { Action } from '@ngrx/store';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable()
export class MockStore<T> {
   private state: {
      [selector: string]: BehaviorSubject<any>;
   } = {};
   dispatch: (action: Action) => void = this.emptyPlaceholder;
   emptyPlaceholder():void {};
   setSelectorResult<V>(selector: (state: any) => V, data: V) {
      if (!this.state[<any>selector]) {
         this.state[<any>selector] = new BehaviorSubject(data);
      } else {
         this.state[<any>selector].next(data);
      }
   }
   select(selector: any): Observable<keyof T> {
      if (!this.state[selector]) {
         this.state[selector] = new BehaviorSubject(undefined);
      }
      return this.state[selector];
   }
}

 
 

Use the class like this:

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { OuterWrapperComponent } from './components/outer-wrapper.component';
import { MenuWrapperComponent } from './components/menu-wapper/
      menu-wrapper.component';
import { ActiveDirectoryContract } from './contracts/active-directory.contract';
import { ActiveDirectoryContractStub } from './contracts/active-directory.contract.stub';
import { MockStore } from './testing/mock-store';
import { IMainStore } from './state-management/store/store';
import { Store } from '@ngrx/store';
describe('AppComponent', () => {
   let mockStore: MockStore<IMainStore>;
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent,
            OuterWrapperComponent,
            MenuWrapperComponent
         ],
         providers: [
            {provide: Store, useClass: MockStore},
            {provide: ActiveDirectoryContract, useValue: new ActiveDirectoryContractStub()}
         ]
      }).compileComponents();
      mockStore = TestBed.get(Store);
   }));
   
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   
   it(`should have as title 'Trifecta'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('Trifecta');
   });
   
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('img').alt).toContain('Reporting');
   });
});

When I assign one JavaScript object to another why does the assignee behave as if it doesn't have the first object's pointer?

Was the object null at the moment of assignment? There wouldn't be a pointer in that circumstance and no way for the first object to "update" the second over time via the pointer.

Cannot invoke an expression whose type lacks a call signature.

In JavaScript this is telling you that you cannot have:

var yin = yang();

 
 

...and that this is more appropriate:

var yin = yang;

 
 

Don't call the thing like a function.

There is a "Clear site data" button under "Clear storage" at the "Application" tab of the Chrome DevTools.

This should toss out what is in the NgRx store so that you may test fresh without actually closing and reopening the browser. "Clear storage" is found in a list at the upper left.

The 'Content-Type': 'application/json' header in an HTTP request can be foregone it seems.

I am hearing, as of today, that you skip this in Http and HttpClient requests in Angular applications as it will be there by default.

I just want to hand in the store at an Angular component's constructor and not wrap it in a service abstracted behind a contract. So how can I test the component?

Well, the NgRx folks had deprecated .select in favor or typeable operators, but that is no longer the case. .select is legit and you can make a mock of your store that just fakes both .dispatch and .select. This means that you have to use .select instead of .pipe with a select inside of it when you actually have a .select. You can create a testbed that imposes the mock. I don't understand it all yet. That is coming tomorrow hopefully.

NgRx events history best practices and high ideology

The events under "Inspector" at the right of the Redux DevTools tab in Chrome DevTools should be human readable and should be able to tell a nontechnical analyst what is going on at the store.

the Command key on a Macintosh

It has that funny symbol that kinda looks like a clover.

Pivotal Cloud Foundry or PCF is some sort of cloud offering from Dell.

another cloud thingy

I saw Stephen Haunts speak at the Norwegian Developers Conference on doing sinister things with social engineering and immediately afterwards I canceled my debit card.

Hacking humans takes three shapes, phishing, vishing (which is phishing over the telephone), and impersonation. 77% of all social-based attacks fall into the first category, but the talk largely focused on the last, impersonation. The four sequential steps in impersonation are information gathering, pretexting, elicitation, and manipulation. Information gathering could be shoulder surfing, dumpster diving, a keylogger, or the use of remote screenshotting tools. How can another gather information about you? If you post something as public to Facebook, the next time you publish something it will default to public and you should explicitly change the who-can-see status. Be careful slick. In pretexting one presents oneself as someone else in order to interact with a target. Good acting helps. Keep it simple. Use information that needs no verification. Plan for a different path in pretexting should things go down strange tangents. I think of the stereotype of Sherlock Holmes planning several Chess moves ahead, not that I've ever read any Sir Arthur Conan Doyle. Just being friendly won't be sufficient, but there is a natural human inclination to trust. People want to appear well-informed and especially recent college graduates or junior members of a team who are likely to spill their guts when you chat them up. Build a bond. People want to feel appreciated. Stay in the character of your pretext. Questioning can be categorized into open and closed questioning. Closed is very yes or no. Open is of open-ended questions where you are making the other party try to fill-in-gaps and guess at what you want to hear. Elicitation is using the persona profiled in a pretext to gather information. After you've fished someone dry in a pretext, you climb inside their husk to pretext as them. In "influencing" one attempts to change the mind of another in the name of a win/win, but this is not "manipulation" which is bad instead of good and steers a victim towards a win/lose. Fear and relief are good tactics in manipulation. Put fear into someone and then offer them a convenient means of escape. Use guilt as a way to get others to comply. A foot-in-the-door technique is gold. Ask for a small request first in advance of a bigger one. Don't keep sensitive data on a USB drive and if you find a USB drive lying on the floor, don't pick it up and plug it in.

IIS versus IIS Express as a setting is kept in the launchSettings.json file in the Properties folder of the startup project in a Visual Studio 2019 solution.

One may change the setting by right-clicking on the project, picking Settings, and then at the Debug tab, changing the Launch dropdown.

Dungeons, Dragons and Functions was the name of a talk on F# by Mathias Brandewinder at the Norwegian Developers Conference.

After I got out of this talk on F# I ran into my superior (most of the crew of ILM Services was at the Norwegian Developers Conference) and he mentioned that he had just seen a talk on Q# which is for Quantum Computing which involves computations I really don't understand wherein qubits (quantum bits) are the core building block. Like F#, Q# comes from Microsoft and while quantum computing is not really feasible yet, Microsoft is nonetheless trying to pioneer the space. Apparently there was an analogy made in that talk about how train tracks were proactively laid to cross the mountains between France and Switzerland before there was yet a train powerful enough to make that trek. F# might as well be as Q# for me as I know I'll never work with it professionally. I kind of wondered if I could even "hang" in this talk and indeed I had some trouble. Some of emulation of Dungeons & Dragons dice rolls in code showed the number of the same kind of dice (six-sided, twenty-sided, etc.) followed by an asterisk and then followed by a function call wherein the six or the twenty for the number of sides of the dice was handed in. I was immediately suspicious that this wasn't really emulating dice rolling as in the case of rolling two six-sided dice you could only get doubles, right? The value returned from the function at the right would be multiplied by the number two at the left via the asterisk in the middle and you could get 2, 4, 6, 8, 10, or 12, yes covering the whole of the range, but not really representing the reality that it is much harder to roll a 2 (the odds are one in thirty-six) than it is to roll a 6 across two dice. When I tried to be smart and point out this flaw it was just pointed out to me in retort that I was reading the F# wrong and that the phenomenon that favors a likely landing in the center of a range was in operation. F# is not C# and the mathematical operators behave differently. The right side of the operation reruns a number of times dictated by the left side. Mathias Brandewinder went through some of the basics of F#. A discriminated union is kind of like an enum in C#. There is an old mantra in F# encouraging you to "make impossible states unrepresentable" and so in the live coding examples there were attempts to restrict what could be handed into certain things with discriminated unions. Something to think about is if you have two discriminated unions at a record, could there be any combinations of the two which should be disallowed. Don't ask me what to do about that problem however. This was all a bit over my head. Fable-Elmish, which sounds Dungeons & Dragonsesque, compiles your F# to JavaScript. It uses the Babel compiler to do so so the Fable part comes from Babel with a leading F for F#. Elmish implies the use of the Elm pattern which is also called MVU for (model-view-update). In MVU, messages send updates to models which in turn make their way into views. An application initializes by starting up a model and then there is an ongoing listening for messages.

deep learning is a subset of machine learning using neural networks

I don't pretend to understand it.

I saw Avindra Fernando speak at the Norwegian Developers Conference nine days ago on service workers for progressive web applications.

Upfront, we were walked through a five step history to get to the PWA. First, native apps require a very specific skillset and really two specific skillsets if you are to build for both iOS and Android and make that three if you go back in time a few years to when people took the Windows Phone seriously. What you build for one platform will not transfer easily to another. Second, hybrid apps appeared. These shipped through the various "play stores" such as the Apple Store in the iPhone space and were a hodgepodge between native apps and what we may think of as "Mobile Web" (which is coming up two steps from now) looping in things like Cordova to have at the pictures on your phone. Third, cross-platform native apps emerged. Xamarin can solve all of our problems, right? No, it can't. Fourth, mobile web, reactive web sites that used CSS media queries to just fall over from the regular desktop version of a web site to a web site on your phone came to be. Unlike hybrid apps these did not involve a trip to a store. They were just web sites that you reached through the browser on your phone, sidestepping all that extra drama. Fifth, progressive web apps come and they are applications which are mobile webesque yet mobile-like. They have three traits: never down as they have offline content to compensate for a lack of a connection, giving illusions of speedy content to deal with slow connections, and engaging! The installation progress speaks to the engaging ideal. You just go to a URL at your browser at your phone to get a service worker that will install your PWA. Again, no store! Steve Jobs is dead. He can't control what you see and what you do anymore. You're free. Service workers need to run over https. A lot of your traffic will be exposed to a service worker, so if someone intercepts that in a man-in-the-middle attack that would be bad. The manifest.json file is sort of like the appsettings.json or web.config file in a progressive web application. Another cornerstone file is service-worker.js and there is going to be something like registerServiceWorker.js to register the service worker, but maybe with a different name depending on your architecture. Vue was used in the example code shown and in main.js there was code to import the service worker. Service workers send and receive push notifications and all of the major browsers are on board with service workers. The display option in manifest.json has four possibilities which are fullscreen, standalone, minimal-ui, and browser and which are discussed here. In short, the standalone option, which will give the appearance of a native web app, was recommended. Lighthouse will help you convert your application to a PWA. You can only have one service worker running at a time so if you have two browser tabs open to two places trying to do service workers at your laptop the second service worker is going to stop the first. .skipWaiting() is used to do this. It may take a couple of tries to install a service worker as suggested here:

Since writing of the Norwegian Developers Conference last, my copy of "Fullstack React: The Complete Guide to Reactjs and Friends" as mentioned here failed to arrive as Amazon shipped it to an old address for me in Austin, Texas. I guess I'll stick to Angular, huh? While I am referencing the old blog posting I might as well mention that the guy with the mohawk is Josh Sheppard. And... since I namedropped Amazon... Avindra Fernando mentioned that Flipkart, the Amazon of India, has converted its web presence to a PWA.

the "is part of the declarations of 2 modules" error

Looks like so...

Type JumbotronComponent in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/components/jumbotron.component.ts is part of the declarations of 2 modules: BusinessUnitRecordsModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/business-unit-records.module.ts and UploadModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/upload.module.ts! Please consider moving JumbotronComponent in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/components/jumbotron.component.ts to a higher module that imports BusinessUnitRecordsModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/business-unit-records.module.ts and UploadModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/upload.module.ts. You can also create a new NgModule that exports and includes JumbotronComponent in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/components/jumbotron.component.ts then import that NgModule in BusinessUnitRecordsModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/business-unit-records.module.ts and UploadModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/upload.module.ts.

 
 

You cannot have a component referenced in two lazy-loaded modules. When I was working at Ceremity it seemed like the solution was to put the thing (component) that has to work both places (modules) in the common outermost God module, but I could not get that to work today and the Ceremity days were of Angular 4 and I am working with Angular 7 now. This has a better fix. You have to make your own module for the component that will straddle two other modules like so:

import { NgModule } from '@angular/core';
import { JumbotronComponent } from '../components/jumbotron.component';
import { CommonModule} from '@angular/common';
@NgModule({
      declarations: [
         JumbotronComponent
      ],
      imports: [
         CommonModule
      ],
      providers: [],
      exports: [JumbotronComponent]
      })
   export class JumbotronModule { }

 
 

Note the exports metadata property above. I want you to see that above everything else. Alright, in the modules that actually loop this module in add the new module to the imports metadata property. Remove the direct reference to the component from the declarations metadata property of these modules.

IIS Express always looks to appsettings.local.json

However, ending web.config like so in a .NET Core 2.1 application will allow appsettings.local.json to be read instead of appsettings.json when running in regular IIS.

      <aspNetCore processPath="bin\IISSupport\VSIISExeLauncher.exe"
            arguments="-argFile IISExeLauncherArgs.txt" stdoutLogEnabled="false">
         <environmentVariables>
            <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="local" />
         </environmentVariables>
      </aspNetCore>
   </system.webServer>
</location>

Version 1 and version 2 of RSS were really two different formats not one thing being an improvement on the other.

A conversation with a coworker on BizTalk led to a conversation on XML today and I thought of RSS.

The grumpy cat has died.

She was 7 and a girl cat, not a boy cat.

window.prompt is something like alert in JavaScript

This mentions it.

ThinkPHP

It is a Chinese framework for doing PHP that has some best practices imposed by the architecture.

When reviewing code in Azure DevOps in the name of approving a pull request, how could I realistically know if a test is broken?

There is a way to make a second and separate build process (pipeline) that comes into play when one attempts to make a pull request.

The baseball base shapes are off-page connectors in UML.

Any one refers to a different workflow in a different tab of your .vsdx Visio file. If a squarish pentagon is positioned at the upper right of a UML workflow it means that you have to get through that workflow before you may begin the workflow laid out at hand. A line coming off of its token seventy-two degree angle means that the off-page connection leads into where that line takes one.

Ericsson, the Swedish cell phone company, uses the ConceptWave tool in development and testing.

There is such a thing as a ConceptWave developer.

Six days ago I saw Amy Kapernick speak on CSS Grid at the Norwegian Developers Conference.

I had seen this tech talk on CSS Grid just thirty-six days prior and thus some of the Amy Kapernick talk had some overlap. I will focus on what was new for me in what follows. The old way of doing things, floats, is bad because floats play poorly with media queries and you have to have extra divs with clear: both; in the mix. In the Flexbox paradigm, the trick wherein display: flex; sits at the outermost wrapping actor, we could finally center stuff vertically. Alright, repeat(3, 200px) as an assignment is going to define three columns or three rows tersely in lieu of typing 200px out three times. It is a convenience thing. The fractional units help get us away from using calc which is ghetto. grid-column: span 5; is going to span five columns and what is more grid-column: 1/-1; may be used to make a header that cuts across the entire layout. Does the grid take the place of Flexbox? No. The two are complementary and you should use the right one at the right time. Flexbox's role is now more niche, for elements that need to wrap. Internet Explorer 11 started with version one of the specification and thus it is a bit out of date while Internet Explorer 10 does not support CSS Grid at all. 90.98% of browser usage in the United States supports CSS Grid and Flexbox has 97.39% support. @supports(display: grid) { followed eventually by a closing curly brace can wrap other CSS like a media query and only run if indeed CSS Grid is supported. There is a gotcha however. This will not work with IE. CSS Grid 2.0 is coming, changing the names of some properties. This should make Internet Explorer 11 yet harder to accommodate. Amy's talk was fun. She compared using CSS Grid and Flexbox together to Batgirl and Black Canary working together as a team and, at the end, threw Australian chocolates into the audience (poorly) towards anyone brave enough to ask a question. This was the only CSS and layout talk I saw at the Norwegian Developers Conference and it, like the rest of the very impressive event, was dandy.

MANDATORY, NESTED, NEVER, NOT_SUPPORTED, REQUIRED, REQUIRES_NEW, SUPPORTS are the types of Spring Framework transactions.

NEVER does nothing.

Back at base bugs in the software flash the message "Something's out there!"

One of the challenges with adal.js and its architecture is going to be bookmarking URLs. If you open a browser into the application and do not start out at the root URL you're not going to have the token and your application is going to behave in a sickly way, unable to authenticate to get across a guard and trapped at some route meant for blocking the unauthenticated. This means I have to write something that looks for the token and then goes and gets it if it is missing. Unfortunately, the goes-and-gets-it part of that means a rerouting back to the root URL. I don't see (yet) how a bookmark is even possible. I recall the mantra of Tim Ash: "Your baby is ugly."

reason: self signed certificate in certificate chain

When you see...

npm ERR! request to https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-7.2.0.tgz failed, reason: self signed certificate in certificate chain

 
 

Fix errors of this ilk with...

npm config set strict-ssl false

Yarn commands?

I hear that:

1. yarn is kinda like npm install
2. yarn start is kinda like npm start
3. yarn add @ngrx/store is kinda like npm install @ngrx/store

display: table; should be put on a table and not display: block;

display: block; makes the table 100% wide but not its cells. It's messed up. How does this even come up? It comes up when changing the display style away from a none value to something else, a different setting.

Three days ago I saw Erlend Oftedal speak at the Norwegian Developers Conference on modern web application bugs.

2017 is the latest version of the OWASP top ten. Some of the new things on this list are XML External Entities (XXE), Insecure Deserialization, and Insufficient Logging & Monitoring. I get the impression of a bit of muddy waters in terms of the boundaries between the first two of these. In short, if you have an endpoint that takes a post (the verb) and consumes XML (and does something with it) there are security concerns to think about. There is a way to hand in XSLT (it's XML after all) and run queries. You can get a list of files that sit on a webserver in this manner and then grab files off of the server. I don't understand it well enough to give you instructions on how to hack. Perhaps that is for the best. In one of the slides Erlend Oftedal offered he is handing in some XML wherein the third node deep is "handler" with an inline attribute of "class" specifying "java.lang.EventHandler" and just inside of that is the "target" node with "class" set to "java.lang.ProcessBuilder" and a "command" node inside of it with several "string" nodes in a sequence furthermore inside of that yet! The "string" nodes open up a Bash shell and run commands... at the server. Oh no! You may disable XXE at an XML parser in C#. You have to do so explicitly. It is recommended, obviously. Document Type Definitions or DTDs should comparably be removed. In deserializing to C# you could end up with a string getsetter that has some sort of templating in it that will play all too "nicely" with Razor, Apache FreeMarker and Apache Velocity (Java template engines both), Twig templates of PHP, Jade, etc. Where a string is meant to bubble up to HTML at {{variable}} in AngularJS you might run some sinister command instead like eval("variable") to expose gunk. eval in JavaScript evaluates JavaScript code as interpreted as a string! It is very hard to blacklist IP addresses, harder than you might think. If you have a number in an IP address that is up beyond 255, well, the number wraps the wheel, so to speak, and becomes upon interpretation a number from zero to two hundred fifty-five that is the number you started with minus the highest possible multiple of 256 that fits inside your number without surpassing it. 666 is thus another way to write 154. You can also have hexadecimal values and leading zeros in other variants. The amount of variations make it hard to block any one IP. SSRF is Server-Side Request Forgery and involves sending sinister URLs to a server to adversely affect it. If you once had a subdomain pointed to another IP in DNS beyond where your main web presence is, perhaps to make a landing page for a signup form for an event or something like that, and you get rid of the hosting one day but forget to clean up the DNS record this opens the door to some sort of subdomain takeover/hijacking. There is a trick to redirect that subdomain elsewhere, someplace very bad. Clearly, Access-Control-Allow-Origin in CORS shouldn't just be set to the asterisk. Did you know that you can Google Translate HTTP to English? Erlend showed the crowd some comic examples of that with bad usages of Access-Control-Allow-Origin. At crt.sh you may see a list of certificates for a given domain name. Web cache poisoning is a thing. You may have an XSS attack that, instead of bubbling stuff up to the UI, puts something terrible in the cache. Then another user gets that from the cache! Fun!

I saw Dennie Declercq speak at the Norwegian Developers Conference on networking at conferences for autistic people and introverts.

Mr. Declercq is himself autistic and runs a nonprofit in the Dutch-speaking part of Belgium because he talks too much, in his own self-description, to hold down a day job. This talk was what you think it was and rather than recount all of the bullet points that to me seemed obvious, I'll focus on what felt new and actually surprised me. One exception is that I will mention that Dennie mentioned the old suggestion of: When standing and talking with a bunch of people in a circle you should leave open a space for a newcomer to step in and join. Seems legit. In a variation of this I can think of a time at the Norwegian Developers Conference one day earlier when I happened to be speaking to another with my hands behind my back and when a third person walked up and interjected I wasn't inviting. I then recognized the body language issue and corrected it saying something like "I don't mean to stand with my arms behind my back uninviting. I'm Tom." while extending my hand to shake his and smiling. I guess I'm still an introvert per the Dennie Declercq definition. The genomics of introverts is such that they get power from within. He said that they lack the D4DR gene, the dopamine receptor of the D₄ subtype (both Ds standing for dopamine and there is a D₂ and a D₃ also). The gene is cornerstone to a desire to have new experiences. Introverts need a strict dose of dopamine, a huge dose of acetylcholine, and a huge does of energy saving systems. I skipped the PubConf bonus Wednesday night activity at The Amsterdam and I didn't just do it because I don't drink. Coming into the elevator up on Thursday morning I was comparing notes with another who was dragging from PubConf the night before and I was patting myself on the back for my decision to skip it. Dennie suggested that you consider in a multiday conference: What do I have the energy to do? When I attended SxSW and Black Hat I skipped a lot of stuff and just took naps midday, but I didn't feel I should do that with both AngularMix and the Norwegian Developers Conference as someone else was paying for me to be there. Instead I felt obligated to not skip seeing a speaking at any one timeslot when a speaker might speak. At AngularMix there were plenty of evening adventures on top of everything else and I ended up daydreaming during a lot of the talks as a side of effect of just trying to do too much. The sacrifice of PubConf was probably wise. The Norwegian Developers Conference was less bumpy. Dennie suggested that it is alright to say no to conversations and it is also alright to walk away from a conversation. When you leave a conversation you should say why you are leaving.

I saw Gwen Faraday speak on Gamifying Technology at the Norwegian Developers Conference two days ago.

The stereotype is that gamification is just points, badges, and a leader board and running with the stereotype Gwen Faraday personally failed to gamify an application well and thus had some experience to speak to the nuances in the space. It needs to be tailored to the situation to be done well and not dropped into place generically. Autodesk had enormous success in gamifying one of its offerings and that then had enormous failure in authoring sort of a universal gamification platform that could get plugged into all of its wares. Foursquare pioneered the geolocation space by using badges to get people to adopt its platform. The introduction of badges took them from fifty thousand users to ten million in a two year window, but unfortunately they did not have a plan for what was next. Even if you have successfully gamified something things can still go wrong. Zynga has been criticized in an ethics sense for a dying clock model that makes it disadvantageous to stay away from their stuff for too long lending itself to addiction. In trying to speak to some of the fine-tuning needed the example of motivating constructor workers to fill out their timesheets on time was given. The book "Drive" by Daniel H. Pink sees a distinction between intrinsic and extrinsic motivation. Extrinsic motivations are for monotonous mundane tasks as in the chase with our fill-out-your-timesheets administrivia. Points that could be exchanged for value were proposed as the extrinsic candy for this circumstance. Peer pressure was also recommended so maybe everyone gets some points for some value if everyone gets their timesheets in on time. In contrast, intrinsic motivation has to with tasks of joy and things you actually want to be doing. Fiero is an Italian word for pride which is becoming common as a descriptor for the satisfaction of winning a game. It is an intrinsic motivation. Enter dopamine, serotonin, endorphin, oxytocin, etc. Player Types, Octalysis, and 6D Gamification Design are three deeper strategies beyond the simple intrinsic/extrinsic divide for profiling your audience. Gwen suggested that avatars are idealized versions of ourselves which positively affect us in real life which surprised me. In trying to squint my eyes and fit all avatars, as crazy as some may be, to that mold I suppose I can.

I had a two-day workshop with Eirik Vullum at the Norwegian Developers Conference on React.js.

I learned in this training that to preview .md markdown in Visual Studio Code that one should right-click upon its file in the Explorer and pick "Open Preview" from the options. As you might imagine, I also learned some about JavaScript. JavaScript is more declarative than imperative, etc. A .reduce example that takes in state and an action and alters state based on the action is a "naive" (Eirik's term) example of Redux state management. Eirik was quick to assert that the React API is pretty light and most of the problems that come up are really just JavaScript problems. The talk on JavaScript included a bit on the this keyword and when you have a method at an object the object will be the scope of this for the method. Bearing that in mind, you may not just assign the method to a variable and then call the variable as a function and expect the same behavior. If you want that kind of behavior you have to follow what is on the right side of the assignment with .bind and hand to .bind the variable name for the greater object the method hangs off of. The variable made in the assignment may be thought of as a bound function. .bind may also be used in a "partial application" wherein the first variable is the this and the variables after that fill in the various variables for the function kind of like as is the case in .call only you are not calling the function just then. When you call the partial application you may either hand in zero variables or, alternatively, any variables you do hand in will be sequentially after the ones already specified by the .bind at the function signature. Just about everything that is new in JavaScript compiles down to a less elegant way of doing things in old ECMAScript 5. One of the few examples of something that breaks this mold is proxies. Proxies allow you to put a middleman (a proxy) between a JavaScript keyword such as function and the use of function (per our example) to hack in your own behavior. This is scary stuff that is really of third party tools and should not be used in production code too often at all. In an interesting use of deconstruction one may assign an array of three things to an array for two variables and just have a double comma between the two variables to only assign the first and last of the array items to the variables. One of the criticisms Eirik made of certainly AngularJS and to some extent the modern Angular is that the templates have their own proprietary markup that makes for a superset of HTML wherein some "crippled" JavaScript may be spliced in here and there inside quotes. I know what he meant by crippled too. It was suggested that this is a separation of technologies instead of a true separation of concerns. There are some things you cannot do inside of an *ngFor and there is a lot of Angular-specific stuff to learn to get *ngFor to behave refined/robust. Perhaps a better way to go is to just have JavaScript return some JSX with HTML markup (and just HTML) inside of the JavaScript. This is cornerstone to React. We talked about high order components in React as modeled on high order functions in JavaScript. High order functions take in one or more functions and return a function. The function you get back may then get called to undertake the same functionality as what was handed in and also some extra goodness that got bolted on by the high order function along the way. For example, if we wanted to log something to the console every time we called a few of our functions, we could pass each of our functions through a high order function that jammed in the logging and then just use the outputs from the high order functions in lieu of our regular functions downstream in code. The way third party code extends your components in React is with high order components. You will hand in your component and get back a new component which is your component and then some. This is, yes, an example of the decorator pattern. The training had a pretty good description of callbacks versus promises in JavaScript. When using a callback, the callback is handed into a function that will use it when done with an asynchronous operation and the function itself will not return anything. It will just call the callback when the time comes. By convention, the callback will take two arguments, the first being a representation of an error in the event of an error and the second being the data to be returned upon success. These are kind of painful to use when chaining asynchronous operations and thus, enter the promise.

function fetchMessages() {
   const myPromise = new Promise((resolve, reject) => {
      var time = new Date();
      var year = time.getFullYear();
      if (year > 1957) {
         var messages = [
            "We have spacefaring.",
            "We have sports cars.",
            "We have hula hoops."
         ];
         resolve(messages);
      } else {
         var error = "We've got nothing.";
         throw(error);
      }
   });
   return myPromise;
}

 
 

Use the promise like so:

fetchMessages().then((messages) => {
   messages.forEach((message) => {
      alert(message);
   });
}).catch((error) => {
   alert(error);
});

 
 

Note now that variablewise the success use case is first and the error use case second. Instead of doing the .catch we could have had a second function as a variable in our .then for the reject variable in the promise to call out to, I know. I wanted to show off the .catch. React came to be at Facebook and Facebook uses it at Facebook itself to this day. This is an important distinction from Angular with which Google does not seem to be architecting any of its own applications. It is reasonable to say that of the two rivals that React is better vetted as the issues to be faced are faced by the most used web site in the world daily. Angular, as a Google offering, is rather comically bad for SEO, but there are ways to make React agreeable. Template strings use backticks instead of apostrophes. Behold:

var time = new Date();
var year = time.getFullYear();
var concatenation = `It is the year ${year}!`;
alert(concatenation);

 
 

The facebook/create-react-app lets you use TypeScript and this is considered the best starting place for making a new React application. That said, the above is a template literal in modern JavaScript and not merely TypeScript creeping in. One of the React components from Eirik's exercises was:

const CheckboxWithLabel = class extends React.Component {
   constructor(props) {
      super(props);
   
      this.state = {
         isChecked: false
      };
   }
   
   onChange() {
      this.setState({
         isChecked: !this.state.isChecked
      });
   }
   
   render() {
      return (
         <label className="CheckboxWithLabel">
            <input
               type="checkbox"
               checked={this.state.isChecked}
               onChange={this.onChange.bind(this)}
               />
            {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
         </label>
      );
   }
};

 
 

Things to notice above are the JSX, the template literalesque injection into the JSX, and the props variable at the constructor which has to be handed into to super to end up in the parent constructor for React.Component or else things break. "Fullstack React: The Complete Guide to Reactjs and Friends" was recommended as a good book to read and I ordered myself a copy based exclusively on the fun vaporwave cover art. A new feature is hooks which allows you to use "functional components" for a complete replacement even of components. You can tie into the state associated with a component and the lifecycle stuff without actually writing a class. All hooks follow a useSomething naming pattern like so:

import React, { useState } from 'react';

 
 

https://graphql.org/ has some details on GraphQL. GraphQL is used heavily in this space, heavier than anywhere else. Jest is most commonly used for testing and supports snapshot testing giving you screengrabs of test results, etc. You may play with React in a shell environment with react-blessed. The let keyword is another example of something that exists in modern JavaScript which I saw in TypeScript first. The JavaScript version has the same better blockscoping with let and the const keyword also does the blockscope thing. const cannot be reassigned. Browsers should blow up at a const reassignment. There is a concept of short-circuiting in JavaScript which behaves kind of of like a ternary operation.

const result = false && somethingMore;

 
 

We won't get to right side of the double ampersand if the left side is false and should it be true then the right side of the double ampersand is really all that matters, isn't it? Get how it is like a ternary operation? There are some assignments in React where the second half of one of these is some JSX, wrapped in parenthesis, shown or hidden upon a condition. npx is another package executor like npm and you may install the create-react-app with it with this command line command:

npx create-react-app your-application-name-here

 
 

Make a pooped-out build folder with TypeScript compiled to JavaScript and what not with this command at a create-react-app application:

npm run build

 
 

Just run the app the same way you'd run an Angular application:

npm start

 
 

The only way to have the async keyword at the top level scope is with a hack like this, and, yes, you have to have the leading async keyword to use async.

(async function() {
   doSomethingMore();
}());

 
 

This is a point of discussion amongst the TC39 (Technical Committee number 39) due to the pain point above, but it's best to keep in mind that JavaScript is broken and that you can never fix it. "You learn by being burned." is a direct quote from Eirik Vullum. sort-by is a package from npm which plays nicely with .sort. You hand into a .sort as a variable sort-by immediately followed by some variables in parenthesis to get a sort order with regards to whom should be first, second, and last in order of a sort. .reverse and .sort mutate their lists while .slice and .map do not. With .slice and .map you are making a new list instead. In something like an MVC pattern where you have models, views, and controllers, there are four comparable parts used by convention not necessity to keep a React app from turning into a big ball of mud. These are symbolized by the colors blue, red, green, and yellow and if you are doing things well you should have distinct colors on different sides of the various boundaries of a React app and not just a blob of brown. View is blue and this is React itself. Views send commands to control flows. State is red and state gets handed to views. State is managed by Redux. Redux Thunk is middleware symbolized by the green color and the term control flows. The control flows take commands from views and send events to state so to speak. They also crosstalk with services. Services are yellow and you might use Axios for services. Services talk to API endpoints. react-router is recommend for routing. Loop in new tools like this at the package.json file. I enjoyed myself at the Norwegian Developers Conference and there will be more blog posts to come of the various talks I saw. I don't know who the gentleman with the mohawk seen here manning the C. H. Robinson tradeshow booth was but he seemed pretty used to people walking up to him and talking a photo of his profile without explanation. I guess no explanation is needed, huh? This is probably the best conference I've yet been to and it certainly had the best catering. I didn't try the bacon covered donuts as they grossed me out at a glance, but I came to find afterwards that this is a Minnesota thing like putting peanut butter on top a hamburger (well, that's more Midwestern in the big picture) and just a normal part of my new environment not a nutty Norwegian trapping.

Power BI solutions?

• The solution to this is to have URL like so that contains query data. _x0020_ is a space herein.
  https://app.powerbi.com/groups/bca823d7-3048-44e7-8e48-9fa3410e15a6/reports/1491041d-59dc-4f27-b174-a0d91c2461e0/ReportSection?filter=Template_x0020_FileUpload/FileName eq 'Our Data.xlsx'
  
   
• The solution to this may be to run your app against ADFS while I having a hidden iFrame out to PowerBI and clicking the button to authenticate (with Azure AD) inside the iFrame with JavaScript or something. Once you are authenticated for one iFrame report no other iFrame report will ask for authentication for the browser session.

In Visual Studio Code, code snippets are templates that make it easier to add boilerplate code.

You might use these for actions and reducers in the Redux pattern in an Angular application.

Complete linked work items after merging

There is a checkbox for this when you create a pull request in Azure DevOps and it does terrible things. It will escalate the status of a story or task. I hate it.

Power Query

This is an addon for Excel that is the forerunner to Power BI.

Gartner Magic Quadrants

These plot points on a graph where the X and Y axis represent two different metrics on how well a technology is doing versus a different technology, subjectively in Gartner's opinion. Fun stuff.

gotta love new tech

From a job ad by email yesterday, X.509 is a standard for public keys in cryptography. I had heard of this one before but I was a bit fuzzy. Completely new are: Grafana is a platform for analytics/monitoring. InfluxDB is a "time-series" database good at managing chronological events. Telegraf collects metrics and data. OpenStack is an open source software cloud computing platform. Camunda BPM (business process management) helps you create workflows like Microsoft Visio. ArrangoDB is a NoSQL datadase. Junos OS is a FreeBSD operating system. Cisco NX-OS is an operating system for Cisco's Nexus-series Ethernet switches and I guess the NX is for Nexus. Panos is an old operating system.

I am enjoying NDC.

I was given the best lanyard at the Norwegian Developers Conference. Look at those hooks! It's going to replace the lanyard I keep my badge on at work when the convention is done. I just got the star punched today when I picked up a hoodie which was swag that came with the event.

There are flip cards in Bootstrap!

For the first four weekdays of this week I am at the Norwegian Developers Conference. At lunch another told me about the flipping cards in Bootstrap and showed me some stuff she made with it. You click on a div (I guess) that has a portrait orientation as far as rectangles go and it has an animation of a flip over effect to show you more details.

Frugality's new face?

This guy was swiping right coupon after coupon while the cashier scanned them off his phone. This happened just now at Cub Foods and I've not seen it before.

Something else random: Kids in Minnesota play Duck, Duck, Grey Duck and not Duck, Duck, Goose!

If you pass variables to Power BI reports you may need to set the defaults for a slicer instead of a filter.

That in turn is gonna require some DAX. See:

• https://community.powerbi.com/t5/Service/Default-value-in-Report-Filter-Panel/td-p/47574
• https://community.powerbi.com/t5/Desktop/Setting-the-Default-Value-of-a-Slicer/m-p/16449#M4552
• https://powerpivotpro.com/2018/12/setting-a-default-slicer-selection/

Why isn't this stuff easier? It is making SSRS look top notch in contrast. I loathe the inflexibility. Why can't you just be normal?

How do I make a dropdown list in an Excel sheet wherein the options come from a list of cells elsewhere.

1. Go to the "Data" tab.
2. Pick "Data Validation" therein.
3. Pick "Data Validation..." from the little menu that appears.
4. Pick "List" from "Allow:" at the little dialog box that shows up next.
5. At "Source:" you will denote the cells to use.

Hasho

These guys (they are a company) have a pen testing approach for blockchain. Apparently is it difficult to make transactions anonymous-in-source within a blockchain as any one transaction reveals a marker that allows a hacker to go fishing within the blockchain for comparable markers. In a Byzantine Agreement (in this space) there is a second round of acceptance, based on proof of work (POW), proof of stake, proof of trust, or proof of space. The blockchain security stuff comes with new challenges in short.

Add an environment to deploy to at Azure DevOps.

Go to the releases as described here. Then edit a release. You should see something like what you see in the image below. The items in the connected line below are part of an automatic deployment upon a successful merge to the master code branch while the disconnected item must be manually deployed to from within either Octopus, assuming you are using Octopus, or the shown UI. The "Clone" option here allows you to copy an environment. Across the top where is reads Pipeline, Tasks, Variables, Retention, Options, and History you may pick Tasks and then pick a particular task to set the "Deploy To Environments" setting to, yes, an environment to deploy to and you may also get to the Tasks by clicking the blue links shown here:

The icon of a person with a lightning bolt raining down on him opens a pane where you may pick between options for After release, After stage, and Manual only to determine if a push to this environment is automatically kicked off by something else somewhere in a chain as shown or must be done manually in isolation. (Maybe we should only push dev to test infrequently when requested to keep test from being polluted by dev's ongoing wackiness and midstream steps in between demonstratable stories in complete.) Clicking in the greater rectangle opens a pane where you may name your step.

How may I tell what user is running a website in Azure DevOps and Octopus?

It is probably kept in Octopus as an environment variable in Variables or as a part of a process step in Process.

If you hand a C# value type into a method signature where it gets altered and then later use the value type back in the blob of code that called the method signature, the value type will be unpolluted by the isolated changes.

This trick for reference types does NOT apply for value types. You are going to have to use ref or out at a method signature if you want the warping within to make its way back out.

Redux is a simplified version of Flux.

This touches on Flux some. Redux wouldn't really have Views in the React.js sense, not in an Angular application. I'm sure there are other differences beyond that. The modern JS frameworks are all reactionary to the memory leaks in the two-way data-binding in version 1 of Angular, and the thing to understand is that data flows in one direction through a set of common contortions in a consistent order. For example:

• https://www.tiktok.com/share/video/6674808864736546053?u_code=d1e3j0d078fbl5&preview_pb=0&language=en×tamp=1555378373&utm_campaign=client_share&app=musically&utm_medium=ios&tt_from=copy&utm_source=copy
• https://www.tiktok.com/share/video/6674808243153407237?u_code=d1e3j0d078fbl5&preview_pb=0&language=en×tamp=1555459643&utm_campaign=client_share&app=musically&utm_medium=ios&tt_from=copy&utm_source=copy
• https://www.tiktok.com/share/video/6674764978358111493?u_code=d1e3j0d078fbl5&preview_pb=0&language=en×tamp=1555870290&utm_campaign=client_share&app=musically&utm_medium=ios&tt_from=copy&utm_source=copy

Set a random attribute on an ElementRef in Angular 7 as you might elsewhere in JavaScript.

This is friendly to the TypeScript compiler:

this.iFrame.nativeElement.setAttribute("src", "http://www.example.com");

Use the draggable API in an Angular 6 application.

This touches on modern draggability some. I made use of it like so:

<div draggable="true" (dragstart)="startDrag($event)" (dragend)="endDrag($event)">

 
 

The events will have hanging off of them screenX, screenY, clientX, and clientY and properties.