Friday, January 31, 2020

Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (72)

Well, this is saying that python is not building CSS from Sass behind-the-scenes for you. Maybe beat the problem with this:

npm install gulp-sass

 
 

...or...

npm rebuild node-sass

 
 

...or even...

  1. npm --add-python-to-path='true' --debug install --global windows-build-tools
  2. npm config set msvs_version 2015
  3. npm i node-sass@latest

 
 

You may need to press Ctrl-C to break between the first two steps above. I did.

configuration.output has an unknown property 'futureEmitAssets'.

Get around this by throwing away your package-lock.json file and then running...

npm install webpack@latest --save-dev

Duplicate Identifier 'IteratorResult'.

Maybe get around this error with this:

npm install --save-dev @types/node

 
 

...or this:

npm update --save-dev @types/node

I tried in vain to again get tests to run in the canned Angular 8 application you may make with .NET Core 3.

I keep hitting up against this and not getting around it:

ERROR in multi ./styles.css
Module not found: Error: Can't resolve 'C:\Apps\Experiment\WebApplication\WebApplication\ClientApp\styles.css' in
      'C:\Apps\Experiment\WebApplication\WebApplication\ClientApp'
resolve 'C:\Apps\Experiment\WebApplication\WebApplication\ClientApp\styles.css' in
      'C:\Apps\Experiment\WebApplication\WebApplication\ClientApp'

 
 

When the shell shits blood like this what should we do? This suggests that you should run:

npm install style-loader css-loader

 
 

...I then jam this into webpack.config.js

resolve: { extensions: ['', '.js', '.jsx','.css'],//add '.css' "root": __dirname }

 
 

There is no webpack.config.js however. This gives you some gunk for building one out and also suggests you install this plugin for Visual Studio 2019, the WebPack Task Runner. The last of the three links I give in this blog posting suggests running these commands:

  • npm install webpack -g
  • npm install webpack-dev-server -g
  • npm install babel-core --save-dev

Thursday, January 30, 2020

Throw away a DOM element with jQuery!

$("#myThing").remove();

Using jQuery, pull from an external source into a staging ground and then put the guts of the staging grounds after another DOM element.

$("#stash").load("www.example.com", function() {
   $($("#stash").html()).insertAfter($("#actor"));
});

how to render a partial in modern times (2020) .NET Core 3 MVC

If you try this you'll get this:

Use of IHtmlHelper.RenderPartial may result in application deadlocks. Consider using <partial> Tag Helper or IHtmlHelper.RenderPartialAsync.

 
 

The better way to go is:

@{ await Html.RenderPartialAsync("_MyPartial", myModel; }

big data damnit!

Vendavo (a company) offers B2B intelligence gathering. Informatica (a company) offers cloud-flavored data wrangling of some sort. IBM InfoSphere DataStage is an ETL tool.

Wednesday, January 29, 2020

spoof a phone number

It's a thing. Tracking another cell phone's GeoLocation is a thing too, though less legal.

Where should "Open link in new tab" and "Open link in new window" take you exactly if you are making an a tag behave like a button?

In order for the a tag to behave like a link that you may tab to you have to have the href setting. You may then turn around and make the a tag behave like a button by having a JavaScript event tied to it which first calls a function that does something and secondly offers:

return false;

 
 

But, someone can still ride the href setting somewhere if they really want to in modern times. Hell, they can click the center mouse wheel to kick off the "Open link in new tab" in Google Chrome. You should plan for what happens when this behavior occurs.

the fat arrow to a one line function body gunk of TypeScript and later JavaScript is a C# thing too

=> foo + 1;

...in lieu of...

 
 

{ return foo + 1; }

...is legit.

the q key may be the way out of a list in the GitBash shell

This kind of suggests that you are in a program called "less" and that that is the way out.

IAsyncEnumerable

It's a thing in C# 8. You may progressively stream stuff back with IAsyncEnumerable using the yield keyword.

string? in a nullable string in C# 8 while string! is non-nullable

string can be either yet. I wondered how they, the powers that be, were going to introduce non-nullable strings. Now I know. What is more name!.Length is a hack to tell the compiler to assume name is not null even if name comes from a regular or nullable string.

Springbox

It's part of GraphStream which makes graphs in Javaland UI.

Tuesday, January 28, 2020

Asynchronously load a partial view in the Razor stuff for a .NET Core application.

@await Html.PartialAsync("_DelayedLoad", new ViewDataDictionary(this.ViewData) {
   { "div", "maintvolume" },
   { "url", Html.Raw(@Url.Action("VolumesReport", "Distributors", new
         {Model.VolumeType, Model.DistributorId, month=Model.VolumeMonth,
         year=Model.VolumeYear, levelId=Model.LevelId, Model.IsBoundToCycles})) }
})

 
 

By the way ViewDataDictionary is the magic for handing more than one model into a Controller.

new as of C# 8.0 switch syntax for enums

var gen = organization switch
{
   DashboardOrganization.TotalOrganization => 3,
   _ => 0
};

Make a URL-friendly string in C# that may be retranslated into a date by C#.

var foo = DateTime.Now.ToString("yyyy-MM-ddTHH:mm:ss");

cheatsheet on getting the Jasmine/Karma tests to run or fail for an Angular 8 app in Azure DevOps

This may already be mentioned on this blog, but here it is again:

  1. create three npm tasks in a pipeline:
    • first comes an install task
    • second comes a custom task that runs the command "run build"
    • third comes a custom task that runs the command "run test"
  2. If you add a new step wrapping a task, click on the step and set the "Dependencies" to have the appropriate dependencies. You will need to also make this change for all steps downstream of the new step.
  3. make sure the tests only run once

Joel Spolsky of "Joel on Software" and FogBugz (by Fog Creek Software) does not like primary keys on tables apparently.

There should be some other way to identify the information (per him).

The Altair 8800 was the first home computer.

Micro Instrumentation and Telemetry Systems (MITS) was the company that cooked it up in 1974.

Cannot GET /

I get this error when I try to swap out the package.json and package-lock.json in an Angular 8 application that is the front end for a Visual Studio 2019 .NET Core MVC application with the sister files made by an Angular 8 application made via the Angular CLI. I get this after I run npm install to rehydrate node_modules as if I don't do that second bit I get a different error reading:

AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: An unhandled exception occurred: Could not find module "@angular-devkit/build-angular" from "C:\\Experiment\\VSExperiment\\experiment\\experiment\\ClientApp".

 
 

Why would I want to experiment with this anyways? Well, the problem with the way Visual Studio makes an Angular 8 application is that you cannot run the tests. Therefore, we need a workaround for that. Why not try to shove what is healthy in place of what is sick? It unfortunately leads to more sickness however it would seem, a worse sickness, an app that won't run at all. My superior may have found another way. In attempting to introduce Angular 8 to an MVC app that just had Razor stuff in it, he ran these two shell commands:

  • ng new ClientApp --createApplication=false
  • ng generate application app1

 
 

He may have navigated into the ClientApp folder between the two commands. Also, I think when he successfully ran the application he created, he just did it through the shell too at localhost:4200 meaning that the Angular gunk is not truly integrated with our other code yet. We still have a ways to go on this. I'll keep you updated. HtmlAgilityPack is in the mix too. It helps parse DOM elements.

Monday, January 27, 2020

TechEd has become Microsoft Ignite.

It is a convention like SQL Saturday taking place in many different cities. For SAP peeps there is a different, in-many-different-cities TechEd that is still called TechEd.

Ctrl-0 will make a browser's zoom go back to 100%.

That is the zero at the keys at the top of the keyboard and not the zero of the numeric keypad off the the right side.

Clone task(s)

When editing a pipeline in Azure DevOps, you may right-click on a task and pick "Clone task(s)" to make a copy of that particular task.

Ctrl-M-L

Expand or collapse all regions in Visual Studio 2019 with this! It is sort of toggle, get it?

Friday, January 24, 2020

In Angular 8 there is a second property needed at the second property for a @ContentChild it seems.

What you see here must become:

@ContentChild('templateReference', {read: TemplateRef, static: true}) templateInstance:
      ContentChild;

 
 

Of the "static" addition this offers: True to resolve query results before change detection runs, false to resolve after change detection.

No provider for NgSwitch

Use [ngSwitch] as suggested here to beat this error and not *ngSwitch which won't work out.

If you can't seem to import something in an Angular app in StackBlitz...

Restart the browser!

Check to see if a character is uppercase in JavaScript!

var x = "ohN0yo!";
for(y = 0; y < x.length; y++) {
   if(x[y] == x[y].toUpperCase() && x[y] != x[y].toLowerCase()) {

Thursday, January 23, 2020

How do I set an input at an Angular component in Jasmine/Karma testing?

beforeEach(() => {
   fixture = TestBed.createComponent(GridComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
});

 
 

What is above could become:

beforeEach(() => {
   fixture = TestBed.createComponent(GridComponent);
   component = fixture.componentInstance;
   component.contents = {
      columns: [
         { name: "DistributorId" },
         { name: "FirstLastName" },
         { name: "LevelType" },
         { name: "Status" },
         { name: "CityState" }
      ],
      data:[]
   };
   fixture.detectChanges();
});

.getValue and .next are really the stuff of BehaviorSubject not Observable in TypeScript

let foo = new BehaviorSubject<any>([
   { id: '1', name: 'Yin' },
   { id: '2', name: 'Yang' }
]);
let bar = foo.getValue();
console.log(bar);
foo.next(1);
let baz = foo.getValue();
console.log(baz);

no good naming convention for the provide/useClass divide in Angularland module providers

Does FooService use FooContract or IFooService (even if IFooService is not really an interface)? Evidence of no plan:

The enterprise level of Visual Studio 2019 has some extra magic for finding cyclomatic complexity pain points in your code.

The extra magic is not in the lower versions of the tool.

using a font for obfuscation in a demo?

BLOKK might work. Everything looks redacted.

Wednesday, January 22, 2020

Entity Framework and Dapper together?

I think it is alright to have a mix of Entity Framework and stored procedures, but as suggested here you do not want to have stored procedures hydrating things in Entity Framework and instead of using ADO.NET maybe you could just use Dapper side-by-side with Entity Framework for the sprocs to alleviate the ghettoness of righthand/lefthand mappings to POCOs from datasets. While I am giving my thoughts, I realize that if you do want to use sprocs with Entity Framework that it would be nice to go all the way and not have some of the sprocs mapped in in another way. One pain point with this is that if there is not a unique ID for each record, as there will not be with sprocs using GROUP BY to aggregate data in "reporting" and such, you can't use EF. Maybe, if you have control of the sproc, you could jam in an extra column returned to make a pseudoid.

more AutoMapper versus Angular thoughts

Assuming we are skipping AutoMapper as suggested here, another place where pseudoAutoMapper contortions could occur is at MVC controllers wherein POCOs are reshaped as anonymous types before being handed onto the Angular head for the greater headless app (ultimately an exposed API spitting JSON). If you need the same anonymous type twice you could have a static utility for that in C# and maybe it is best to have a static utility anyways to get that logic out of the controller itself.

SQL Doc From Redgate

It will document your database and in doing so let you know what chunks of it are unused.

traceroute and tracert

As command line commands these measure delays in packets coming across the wire at a LAN from a URL.

the Contoso database

Think of AdventureWorks and Northwind. It is a sample database like those two.

Do not expect the components in module exports to work across the boundaries of lazy-loaded modules and carry over to eventually summoned gunk in Angular 8.

You can't have it all.

BOLO stands for: be on the lookout

cop talk!

Tuesday, January 21, 2020

Loop through the options in a dropdown in vanilla JavaScript!

for(var i=0; i < Organization.options.length; i++) {
   if (Organization.options[i].value == scope) {
      Organization.selectedIndex = i;
   }
}

 
 

Also, Organization.options.length and Organization.length would serve the same purpose herein.

We are back to Newtonsoft in .NET Core kids!

There is no JavaScriptSerializer in the .NET Core stuff. :( Stack Overflow recommends using Newtonsoft. Import it like so:

using Newtonsoft.Json;

 
 

Turn around and use it like this:

object o = JsonConvert.DeserializeObject(json1);
string json2 = JsonConvert.SerializeObject(o, Formatting.Indented);

Angular 8 demands that you detail when a ViewChild will initialize.

What was...

@ViewChild(MatPaginator) paginator: MatPaginator;

 
 

...in Angular 6 has become...

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

 
 

...in Angular 8. The true will initialize the ViewChild upon ngOnInit while false waits until ngAfterViewInit, and for a ContentChild instead of a ViewChild the true behaves the same while the false uses ngAfterContentInit. You will use ContentChild to grab at what is in ng-content in lieu of just elements in your template. A sandboxed Shadow DOM is handed in to a component as a template typically, but if you are injecting your own guts into a third party component the insertion is a Light DOM and the third party template may use a ContentChild to grab at what it expects in your handed-in gunk. See this and this.

a cheatsheet of stuff built on top Angular Material

See https://angular.io/resources which lists Angular UI Toolkit and FancyGrid and so on.

fetch in Visual Studio

When you cannot seem to checkout a branch someone else made in GIT and pushed to origin, right-click on the parent branch in the Team Explorer in Visual Studio 2019 and pick "Fetch" to hopefully hydrate the missing item in the remotes/origin list which I suspect is akin to the fetch command line command suggested here and here.

Derived Column Transformation

It is for making a derived column that is calculated off of other columns in T-SQL. This has an example in which FirstName and LastName are concatenated with a space in the middle to make FullName.

over-normalized

An over-normalized table is expensive to fish in because of all of the joins. Examples of taking things too far could be having tables for everything that would otherwise be an enum in code and having to join into those tables in sproc reporting to get at what a numeric encoding is meant to represent. Either just have the numeric encoding in a database column and use an enum in code without a sister database table or jam the strings into said numeric column instead if you have to have reporting that is standalone in SQL that makes sense.

Maybe be a tester your first week on the job as a dev.

You'll see things everyone else is blind to.

window.history.forward();

Following up on this, this will take you where the forward button takes you if it can or otherwise return undefined per this which also suggests there is really no way to test if you can go forward without going forward if you can go forward.

When you check out someone else's GIT branch for a looksee...

Do git pull to make sure you really have the meat.

.NET Core tag helpers for routing an HTML form to a particular controller and particular action

<form asp-controller="Yin" asp-action="Yang">

Make a form tag (try to) put its passed into at the URL line.

<form action="http://www.example.com" method="GET">

Monday, January 20, 2020

Angular-SlickGrid

This seems to be the way to do Angular UI Grid beyond AngularJS in modern Angular. This suggests you cannot really get Angular UI Grid to run in Angular 2+ without a rewrite of it. npm install angular-slickgrid is probably the way to install this new thing. What is more, npm install angular-ui-grid is probably the way to install the old thing.

ng generate module distributors

This will make a module named DistributorsModule with the Angular CLI and it will end up nested in a folder called distributors which will be generated in the folder you are immediately within at the shell where you are running the command. For more about generate see this.

Sunday, January 19, 2020

Saturday, January 18, 2020

Prodigy

It was an old 1990s service you paid for for access to some things online. It was not an ISP (internet service provider) that let you browse anything on the web via a browser I don't think. Instead, I think you got access to some BBS (bulletin board systems) stuff.

Friday, January 17, 2020

Expose your IIS web site to others on your LAN via changing the ports and domain name catchers.

Right-click on a web site in IIS. Pick "Edit Bindings..." and edit the binding you find. Blank out the "Host name" and change the port to something unique. If someone can find your default web site at your LAN with http://mypc123.usualdomainname.com they will now be able to hit http://mypc123.usualdomainname.com:86 to find the new thing at port 86. This may allow users to connect their cell phones to the LAN to test stuff tossed together quickly.

How can I set the hosts file on my iPhone?

You cannot. This suggests that you connect to a wireless network at your office and have the IT help set up some router tricks to reroute paths to particular URLs. Fun! Fun!

Catch the back button event in JavaScript?

window.onhashchange and popstate are ways to catch the event that is triggered by window.history.back(); and history.go(-1); which occur when the back button is pressed. Yes, if you make that -1 a -2 and call it yourself in JavaScript you'll take the user back two pages.

How to save off a web page as an .html file with a folder full of supporting files in modern times.

Use Google Chrome. Go to the web page online. Right-click in some dead space and pick: "Save as..."

.textContent is kind of like .innerHTML in JavaScript

Recently, I made an Angular 8 application and replaced the default tests with the following.

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   
   it(`should have as title 'Conklin Business Portal'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('Conklin Business Portal');
   });
   
   it('should render alt tag at logo link', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('img').alt).toContain('Conklin Business Portal');
   });
   
   it('should render menu system', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('li').textContent).toContain('Main Navigation');
   });
});

 
 

Here we see, in the last test, the old Jasmine convention of using .textContent in lieu of .innerHTML which you never see anywhere else. It turns out that I could have used .innerHTML for this particular test too and that the difference between the two per this is that .innerHTML would have the markup tags (should there be any) inside the wrapping tag as part of the string of guts that comes back. The link I give here touches on .innerText too which seems to be like .textContent with any extra spaces stripped out.

RadioShack

These guys sell tin foil garden sheds in which you can pretend to be a spaceman. You can talk into one of two Dixie Cups while the string leads across the lawn back into the house through an open window and you can say things like "beep, beep" you know? No, seriously, these guys sell electronics in shops in malls.

Thursday, January 16, 2020

psNavbar is not defined

This is a Dashforge error centered around sub menus in navigation. This kind of suggests it is a know thing and that there is a fix coming but the bit that suggests that is also seven months old. Jam this in your JavaScript to make the error go away.

var psNavbar = {
   update: function() { }
};

Change the type of a story or a bug in Azure DevOps.

Go to the story or the bug. Click on the three dots in a horizontal progression at the upper right. Pick "Change type..." from the little menu that appears.

ModifiedOn, ModifiedBy, CreatedOn, and CreatedBy are the golden four audit trackings for any database table.

If you add an Id as a fifth universal item and you could have a base class for any database hydrated POCO in C#.

Move Tool in GIMP

It is in the main tools at the upper left. Use it to drag around a selection. It looks like four arrows pointing North, South, East, and West.

IMP is Internet Messaging Program

It is an old webmail client.

Wednesday, January 15, 2020

the Tag Helpers of .NET Core

Here is an example of both asp-for (makes both the Id and Name properties of the HTML tag made from the Razor markup to be: VolumeMonth) and asp-items.

<select asp-for="VolumeMonth" asp-items="@(new
      SelectList(ViewBag.MonthList,"Id","Name"))">
</select>

 
 

This has some notes on using an enum in an asp-items like so:

<select asp-for="RelationshipStatus" asp-items="Html.GetEnumSelectList()">
</select>

EscapeDataString the Razor way!

Like this only in Razor! Do something like so:

@Uri.EscapeDataString(Model.ThisThing)

nav-reload

When changing "tabs" in a Bootstrap navigation as seen here this class might be cornerstone. You include it if you want to hydrate what is in the div unlocked by the "tab" asynchronously and you leave it off if you just want to show what was in that div to begin with. Obviously, the reason to go out to elsewhere asynchronously instead of just fleshing out everything upfront is to save some sort of expense in loading stuff. Alternatively, I suppose the data getting hydrated could be changing every time you request it too or perhaps at least hold the potential for some periodic or "random" change. If you leave this style off a link and your tab's contents are not hydrating from afar, the problem stems from you leaving this off. What is more, if you include this class but fail to have the data-reload-url property for where to fish for html for the tab's contents, you'll get an error in the console of Google Chrome that starts out like so:

Uncaught TypeError: Cannot read property 'indexOf' of undefined
   at w.fn.init.w.fn.load

Tuesday, January 14, 2020

Angular UI Grid

For AngularJS and part of the AngularUI suite for AngularJS, it is a container for a paginated list of records.

sunk cost fallacy

The bad thinking here is that he have spent so much time working with X that we should not just abandon X, however if your ship is sinking it really doesn't matter how much time it took you to build the ship. Also, if you are at a buffet, do you have to gorge yourself to get your money's worth?

I am not good at lateral thinking in testing.

I usual test my own stories in a happy pass manner and then turn a blind eye. A good tester will think of wild ways to break stuff. Thinking creatively or in a problem-solving flavor of things is lateral thinking.

HDMI stands for High-Definition Multimedia Interface.

Audio and video data goes over a single cable.

diff files in Visual Studio 2019

It's a thing. You may do it at the Command Window per this. This window may be found under "Command Window" under the "Other Windows" menu under the "View" menu. The command for a comparison seems to be:

Tools.DiffFiles "file1.cs" "file2.cs"

When someone asks you to look at their git branch and it is just not there...

...switch to the branch they branched from, do a git pull to get the latest, and then try to go to their branch anew.

flex-wrap: nowrap;

This is one of the styles on the nav class in Bootstrap along with...

display: flex;

 
 

...you may make a set of "tabs" as suggested here and they will all fall in a horizontal line without wrapping no matter how narrow the horizontal screen real estate is. To allow the "tabs" to wrap make a class for yourself like so:

.wrap-beneath {
   flex-wrap: wrap !important;
   white-space: normal !important;
}

 
 

...and put that in the class tag of the html element wrapping your a tags following the nav class. I fought with this today and the DashForge style nav-wrapper was on an element wrapping the nav HTML tag and hidding anything that wrapped with an overflow: hidden; trick. I ended up just removing this style as part of my refactoring.

Monday, January 13, 2020

Set up a menu system the Dashforge way!

<nav class="nav nav-line tx-medium pl-2">
   <a href="#foo" class="nav-link active" data-toggle="tab">Foo</a>
   <a href="#bar" class="nav-link nav-reload" data-toggle="tab"
         data-reload-only-once="true" data-reload-show-spinner="true"
         data-reload-url="http://www.bar.com">Bar</a>
   <a href="#baz" class="nav-link nav-reload" data-toggle="tab"
         data-reload-only-once="true" data-reload-show-spinner="true"
         data-reload-url="http://www.baz.com">Baz</a>
   <a href="#qux" class="nav-link nav-reload" data-toggle="tab"
         data-reload-only-once="true" data-reload-show-spinner="true"
         data-reload-url="http://www.qux.com">Qux</a>
</nav>
<div class="tab-content">
   <div id="foo" class="tab-pane fade active show">
      The quick red fox jumps over the lazy brown dog.
   </div>
   <div id="bar" class="tab-pane fade">
   </div>
   <div id="baz" class="tab-pane fade">
   </div>
   <div id="qux" class="tab-pane fade">
   </div>
</div>

 
 

You can probably see how it works just by looking at it to some extent. The nav style empowers it and the nav-line style will put little blue lines under the selected menu items. The guts of the URLs I give will get sucked into the appropriate content divs. These should really be MVC actions out to partials to tell you the truth. Something like:

@Html.Raw(@Url.Action("VolumesReport", "Distributors", new {yin=13, yang=42}))

 
 

Sigh. Anyways, the a links all appear in a horizontal row and there is no way to get them to wrap, not even with the !important hack... as best as I can tell. I want them to wrap conditionally to accomodate mobile. If there is a way to do this, I do not yet know what it is.

 
 

Addendum 1/14/2020: It was pointed out to me today that this is really just Bootstrap stuff and not of ThemeForest's DashForge which is merely a set of skins and HTML examples for dashboard-flavored stuff. Yes, Bootstrap itself uses JavaScript to get the menu system magic to work and along those lines it uses the data- tags too.

Make Visual Studio 2019 debug by default with Google Chrome instead of Microsoft Edge.

In your solution, right-click on one of the .cshtml views and pick "Browse With..." and then select "Google Chrome" from the little menu that appears and finally click the "Set as Default" button.

PiP is Picture in Picture

Watch one TV channel in a little window amid the bigger display of the other channel on your television.

cheating!

The Houston Astros season that leads up to their World Series win is tainted with cheating. At home games these guys used a camera to watch the pitcher signals of the opposing team and then they relayed what the camera found to the team members. I wonder if Kate Upton knew. Sad stuff. This was one of the few sporting events I actually cared about.

cognitive dissonance

having two conflictory beliefs or, perhaps, also making a decision and acting one way or the other

Sunday, January 12, 2020

GraphQL MN on Wednesday night had Christopher Bartling speaking on simple introspection.

The event was hosted in the same building as sdg, though not in their offices. We sort of went into a communal conference room that anyone who officed there could use. Ashley Sime, a recruiter for sdg, brought us pizza and the like, and there was some talk of this being the last sdg-hosted event. A different consultancy called Agosto gets to host next month. Christopher Bartling seems to be head-of-state of GraphQL MN and he seemed to speak by default without anyone else to speak at first until another presenter emerged at the eleventh hour of this one hour event. There was also some discussion of maybe falling into an every-other-month pattern for the meetup in the name of having more meaty presentations and speakers lined up to present. Another challenge here is that when Christopher asked us to put our hands up to show off who was actually using GraphQL less than half of the audience raised their hands. Everyone is interested in the future but not everyone is living in it yet. ILM had me at Thomson Reuters for two months and I was exposed to it a bit there myself, but I have since moved on from ILM Services. My new gig... promises/maybe/eventually... We shall see, eh? Christopher suggested that there are four things that could make up a payload being handed into a GraphQL posting. It is not fair to think of the payload as a query, but instead, the query is one of the four things. Another of the four is a mutation, right? This is how one writes records back in the GraphQL space. A query, in contrast, is a synchronous read. One can mix queries with mutations and one could mix queries and mutations with the other two things I am about to mention too, but Christopher asserted that he doesn't really see stuff that complicated in real life. I asked about the ReST convention of doing a POST and having a package come back to you with the id of the newly database-hydrated object appended to the object you just wrote a record for and if such a trick would demand a query in tandem with a mutation and another woman in the audience suggested that feedback from a mutation is just a part of a mutation. Subscriptions in contrast to queries are sort of like deferred queries as opposed to synchronous ones, kinda like Observables. Christopher described these as sever-sent events (SSE). Beyond what I was once told by Chander Dhall about how you could use Observables in Angular to listen at length to a web socket and the reality in contrast of people using Observables in Angular client-side to listen at length to the NgRx store, I think subscriptions are going to be used to listen at length to the server-side of things. (The Flask framework for Python does not let you do subscriptions. That is not a part of its graphing stuff.) Beyond mutations, queries, and subscriptions, the fourth thingamajig you might find in a payload is a simple introspection query. These are like other queries only they request type data from the server. In some code that Christopher showed off, we saw an introspection query like so for learning more about an enum named CollegeYear:

import {gql} from '@apollo/client';
let COLLEGE_YEAR_ENUM_VALUES_QUERY; = `
   query CollegeYearEnumValues {
      __type(name "CollegeYear") {
         name
         enumValues {
            name
            description
         }
      }
   }
`;
export default COLLEGE_YEAR_ENUM_VALUES_QUERY;

 
 

Resolvers are endpoints for resolving the various needs of GraphQL on the server-side. Christopher's resolvers in Ruby look like so. (I think he may have been using RubyMine as his IDE.)

module Types
   class CollegeYearType < Types::BaseEnum
      value *args 'FRESHMAN', description: 'Freshman'
      value *args 'SOPHOMORE', description: 'Sophomore'
      value *args 'JUNIOR', description: 'Junior'
      value *args 'SENIOR', description: 'Senior'
      value *args 'GRADUATE', description: 'Graduate'
   end
end

 
 

Random thoughts in wrapping up: Per Christopher, AWS AppSync has a way to approach GraphQL that is both so custom and so intrusive that it is hard to imagine ever decoupling from AppSync when you roll stuff with it. You use Velocity templates to define resolvers with AppSync. AWS Lambda is Amazon's serverless-functions-in-the-cloud things. Hasura, a company, offers tooling for making APIs friendly to GraphQL. Prisma is sort of an ORM that is more friendly to GraphQL than other ORMs.

Vivek Kalyanakrishnan of Target also spoke at this event and in the code he demoed he had breakouts for a resolver layer, a schema layer, and a service layer. It seemed logically while being a bit hard to follow. My eyes are not so great at age forty-five. Was the resolver layer in the server-side stuff and the service-layer in the JavaScript vein of things?

Saturday, January 11, 2020

CES is the Consumer Electronics Show

It's another Vegas-based tech convention like Black Hat! Ivanka Trump, known for selling jewelry not laptops, was the keynote this year and the pushback around that made enough noise for me to learn that this convention even existed.

Friday, January 10, 2020

AVA is a JavaScript test runner.

I don't know what AVA stands for. TAP (Test Anything Protocol) and tape are rivals.

Amazon Prime is $125 per month.

With that you get free shipping for a lot of things and The Marvelous Mrs. Maisel.

screen reader address metadata

There is a way to break out the first line of an address and the address2, the apartment number, for SR stuff. I don't really understand it. It's more than just a break tag in HTML I guess. I do not know the convention.

.load in jQuery

It fills the guts of a div or whatever just like .html only it pulls the fillings from elsewhere.

$("#result").load("ajax/test.html");

Do a sum in C# off of a list or an array!

This has this:

int[] array1 = { 1, 3, 5, 7 };
List<int> list1 = new List<int>() { 1, 3, 5, 7 };
int sum1 = array1.Sum();
int sum2 = list1.Sum();

 
 

The last two variables each end up with the number sixteen in them.

Thursday, January 9, 2020

Overpower the title tag in HTML with your own thing in an Angular 8 application!

This is the canned code made by the Angular CLI! Below is the guts of app.component.ts as crafted by a new up of an app with the command-line interface.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})
export class AppComponent {
   title = 'covfefe';
}

The key combination (Ctrl+T, Ctrl+N) is bound to command (ReSharper_UnitTestSessionNewSession) which is not currently available.

Go into the ReSharper menu under the Extensions menu and reenable ReSharper. The problem comes from using the Angular-CLI in tandem with ReSharper.

Send someone a test message instead of calling them with Mitel Connect.

Go to "Messages" in the app. Search for who you want. Right-click on the person you found. Pick: "Send IM"

get the "Open link in new tab" trick working for actors that are not a tags

Wrap them in anchor tags! It can work if you are not posting variables or something like that. Get rid of the old reroute mechanism and move it to the outer, wrapping a tag.

I'm pretty frustrated with the canned Angular apps in Visual Studio.

As of .NET 2.0 this was a thing. With 2.0 you could make an Angular 5 application, but you couldn't upgrade it with npm install or it would break. Now, as of 3.0, you may make an Angular 8 application, but even though it comes with a couple of tests in \ClientApp\src\app\counter\counter.component.spec.ts you cannot just run the tests without error with: npm test

SVG magnifying glass for search

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
      stroke-linejoin="round" class="feather feather-search">
   <circle cx="11" cy="11" r="8"></circle>
   <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>

ClippyJS

It's what it sounds like. That talking paper clip from early Windows lives on in JavaScript! Clippit might have been the official name of the office assistant.

This page uses the non standard property "zoom". Consider using calc() in the relevant property values, or using "transform" along with "transform-origin: 0 0".

This notice shows up in the console of Firefox, not other browsers. Stack Overflow has this example of using the zoom:

document.body.style.zoom=1.0;
this.blur();

iirc is "If I recall correctly..."

Nice lead-in!

stored function

This is a PL/SQL term for what would be a function in T-SQL.

Midori

...is yet another browser.

Wednesday, January 8, 2020

SCRIPT1014: Invalid character

In Internet Explorer 11 this rears its head when you have backticks in JavaScript. Lame!

maybe install Jasmine/Karma the npm way

npm install karma-jasmine --save-dev
npm install jasmine-core --save-dev

Ignored: Task skipped on timeout

Don't expect ReSharper's test runner to run Jasmine tests. This is a know issue, surfacing this error. You are SOL.

 
 

Addendum 1/9/2020: SOL stands for shit outta luck fanboy! (shit out of luck)

make a shortcut to a Remote Desktop Connection

Type "rdc" at the start bar in Windows 10 to get the "Remote Desktop Connection" dialog box and therein expand "Show Options" to find the "Save As..." button. Click the button and save a .rdp file to your desktop. I guess .rdp stands for Remote Desktop Protocol probably.

Toggle device toolbar

In Google Chrome Developer Tools, at the upper left corner is a button for "Select an element in the page to inspect it" and just to its right is "Toggle device toolbar" which toggles between regular desktop mode an an emulator layout for mobile. This might be easier than this. The button is always there.

 
 

Addendum 1/8/2020: At the upper left of the emulator layout is a menu that will say "Responsive" by default and which can be changed to a series of canned sizes. iPhone X has a size of 375x812 which is a third of 1125x2436 which is the size I get when I make a screen grab on my phone and email it to myself. The skrink down is part of this trickery. 400x840 is the default size.

Tuesday, January 7, 2020

Ctrl-Shift-X opens a list of enabled plugins in Visual Studio Code 1.41.1.

You may click on any one plugin to uninstall it. Right-click on one and there may or may not be "Configure Extension Settings" as an option wherein you would tweak how the plugin behaves. The list is also the fifth of the six menu items within icons down the left edge of VSCode: Explorer, Search, Source Control, Debug and Run, Extensions, Test ...some plugins of note:

  1. Angular/Karma Test Explorer
  2. Test Explorer UI
  3. Debugger for Chrome
  4. Jasmine Test Explorer

m. as a subdomain or /mobile trailing the rest of the URL are some conventions for mobile versions of an app

At the upper right of an Android's web browser is a button for toggling from the mobile version of a web site to the desktop version. Pick "Desktop" here as shown below:

When you cannot see the branch you committed for a pull request in Azure DevOps...

One thing to try is to go into Team Explorer in Visual Studio 2019, right-click on the branch, and pick: "Push"

 
 

Addendum 1/9/2020: From the "Home" of the Team Explorer click on "Branches" to get at this.

Updates were rejected because a pushed branch tip is behind its remote counterpart.

git reset --hard origin/your-branch-name

...is the fix in GIT commandland!

get/set have been deprecated in favor of the config command.

I got that error when I tried this with the Angular CLI:

ng set defaults.styleExt scss

 
 

I think the modern times (Angular 8) fix is this:

ng config schematics.@schematics/angular:component.styleext scss

 
 

What am I up to? I am trying to switch an existing application from using CSS standalone for styles to using Sass.

a toggle between Features and Stories

At Azure DevOps under Backlogs under Boards (at the left nav), you will find it at the upper right. A feature is made up of stories.

the nomenclature for filters in search/reporting is: "facets"

Perhaps at Macys.com, Tommy Hilfiger and wool could be facets in searching for a pair of pants.

Sunday, January 5, 2020

AutoMapper antipattern in the whole JavaScript framework atop ReST API thing?

Do we still want to map domain objects to POCOs with AutoMapper anymore? What if we just surfaced the objects all the way up through ReST API endpoints to the JavaScript framework (Angular, React, Vue, etc.) and then let the JavaScript framework do any shape-changing that was needed? The only reason not to do so is we are worried about the expense of what is going across the wire. Assuming you can shelve worrying about that optimization until you need it, why not just chill out on it. I've seen some pretty nasty stuff done with AutoMapper and some of it ridiculously redundant. I worked on a project in which objects coming back from the database in the Infrastructure layer were just being mapped one-to-one to identical objects in the Core layer. The only rationale I could gleam was that that way we didn't have to have DataAnnotations attributes (which are Entity Framework agnostic by the way) in the Core classes. This antipattern demanded the maps in the UI layer and the whole caboodle. Ugh, by UI I mean ReST API... that layer, the front door...

Saturday, January 4, 2020

Brave

This is a web browser cooked up by Brendan Eich who is the inventor of JavaScript.

DocFX autogenerates documentation for projects based on your code.

See: this

bower.json seems to hold a denotation of what was installed by Bower to the folder at hand and you may reinstall the items listed from Bower too.

It is not unlike package.json for npm.

Josephus Problem

This is some wacky computer science puzzle in which people are standing around in a circle waiting to die? They die sequentially, but who dies last? Meh.

Peter principle

A good dev may not make a good manager. In 1969, back when Americans still got promotions at work, a book was written on this circumstance though it likely did not use developers in its examples. Wikipedia says: The Peter principle is a concept in management developed by Laurence J. Peter, which observes that people in a hierarchy tend to rise to their "level of incompetence": an employee is promoted based on their success in previous jobs until they reach a level at which they are no longer competent, as skills in one job do not necessarily translate to another.

Use destructing at a method signature in TypeScript!

TypeScript destructing as shown off at this and this may take a more confusing shape like so:

module.exports = ({ file, options, env }) => ({
   plugins: {
      'postcss-cssnext': options.cssnext ? options.cssnext : false,
      'autoprefixer': env == 'production' ? options.autoprefixer : false
   }
});

 
 

What is above is a fatter version of the guts of the postcss.config.js file described here. The file variable is never used. :(

Robo 3T (formerly Robomongo) is now owned by 3T Software Labs.

I think the three Ts are Graham Thomson, Thomas Zahn, and Tomasz Naumowicz. Tom, tom, tom. This is Deutschland tech, like SAP, only focused on NoSQL. Robo 3T is an open source GUI for MongoDB and it wasn't made by Tom, Tom, and Tom in Germany. They just took it over.

Friday, January 3, 2020

Good news! The canned .NET Core 3.0 Angular application made out of Visual Studio 2019 is of Angular 8! w00t!

Enough of that Angular 5 straightjacket! Maybe I'll actually want to use one of these projects. If you make one of these it will use plain CSS instead of Sass. Fix that by changing the styles.css to be styles.scss and change the references in angular.json as well. At styles.scss you could loop in Bootstrap 4 (should already be installed) with:

@import "../node_modules/bootstrap/scss/bootstrap.scss";

 
 

...but at angular.json it looks like it is already looped in to me.

Install Bootstrap 4 into an Angular application.

npm install bootstrap

Module build failed: ModuleBuildError: Module build failed: Error: No PostCSS Config found in: C:\this\that\theotherthing\wwwroot\css

Sidestep this error by making a file named postcss.config.js at the folder denoted. Inside of the file there should be one line of code reading:

module.exports = {};

Module build failed: ModuleBuildError: Module build failed: Error: Missing binding C:\this\that\theotherthing\node_modules\node-sass\vendor\win32-x64-57\binding.node

Try to run this command to get around this:

npm rebuild node-sass

ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\this\that\theotherthing'

You might be missing webpack.config.js when you see this.

Add tasks to an Azure DevOps pipeline to run npm commands.

When you scroll through the list of possible tasks, there will be one called "npm" and you should add that in. If you click on it in the pipeline steps at the left, the options for the step will show up at the right. Here there is a drop down list dubbed "Command" and it has the following options in it:

  1. install which will run "npm install"
  2. publish which will publish files somewhere
  3. custom wherein you will specify your own command such as "run build" and the processes under the hood will lead it with "npm" so that something like "npm run build" is run

Chef is a software deployment tool from Linuxland.

Now .NET has it.

Get the secrets.json file working in a .NET Core 3 application.

In the ConfigureServices method at Startup.cs have something like so:

var builder = new ConfigurationBuilder()
      .SetBasePath(AppDomain.CurrentDomain.BaseDirectory)
      .AddJsonFile($"appsettings.json", optional: false, reloadOnChange: true)
      .AddJsonFile("secrets.json", optional: true, reloadOnChange: true)
      .AddEnvironmentVariables();
Configuration = builder.Build();

 
 

Grab something out on the very next line like so:

var includeSecretService = Configuration.GetSection("Foo").Exists();

 
 

Configuration the variable looks like this:

namespace MyMagic
{
   public class Startup
   {
      public Startup(IConfiguration configuration)
      {
         Configuration = configuration;
      }

Thursday, January 2, 2020

CROSS APPLY in T-SQL is different from just a CTE or subselect in that you basically spec out a table to be joined in a query wherein that table is defined by a second, nested query.

Stack Overflow had the following example:

USE Northwind
GO
SELECT o1.OrderID, o1.OrderDate, ca.OrderID AS NextOrder, ca.OrderDate AS
      NextOrderDate, CustomerID, DATEDIFF(DAY, o1.OrderDate, ca.OrderDate)
      DaysToNextOrder
FROM Orders AS o1
   CROSS APPLY
      (SELECT TOP 1 o.OrderDate, o.OrderID
      FROM Orders AS o
      WHERE o.customerID = o1.customerID AND o.OrderID > o1.OrderID
      ORDER BY OrderID) AS ca
ORDER BY CustomerID, o1.OrderID

 
 

I guess this behaves like an inner join and you use OUTER APPLY instead of using CROSS APPLY to have an outer join effect.

Copy the guts of an HTML tab, the various cells, into sort of a tab-delimited format at the clipboard.

In cooking this up Friday, I experimented with the following and uncharacteristically failed to document it. I am sort of recreating it from memory here.

var range = document.createRange();
var selection = window.getSelection();
selection.removeAllRanges();
range.selectNodeContents(document.getElementById("touchMe"));
document.execCommand('copy');
selection.removeAllRanges();

 
 

Maybe try .selectNode instead of .selectNodeContents if .selectNodeContents does not work.

Internet Explorer 9 is as far back in time as you may go with modern Angular as best as I can tell.

You are going to have to have polyfills to get it to work. This touches on browsers supported.

Red Teaming

In a red team engagement one (or a team) is trying to hack a web site in the name of figuring out how to make it better as opposed to actually doing something sinister.

Wednesday, January 1, 2020

.ispac is a Microsoft Integration Services Project Deployment file format for SSIS stuff.

This is the Web.config of a deployment file as best as I can tell without knowing much about SSIS. It would have metadata settings, options, and the like.

SET DEADLOCK_PRIORITY

Alright, in T-SQL this could be...

SET DEADLOCK_PRIORITY LOW

 
 

or...

SET DEADLOCK_PRIORITY NORMAL

 
 

or...

SET DEADLOCK_PRIORITY HIGH

 
 

Or, instead of LOW, NORMAL, and HIGH it could be a number from -10 to 10. LOW is a stand in for -5, NORMAL for 0, and HIGH for 5. This tries to determine how "important" it is, vaguely, for a session to keep struggling when it is deadlocked with another. If a database is stuck in SINGLE_USER mode you may break it out like so perhaps:

SET DEADLOCK_PRIORITY 10
ALTER DATABASE YourNameHere SET MULTI_USER

on New Year's Day eat black-eyed peas for luck and cabbage for money in the year ahead

I think it's technically collard greens and not cabbage, but cabbage is a type of collard green. Anyhow, if cabbage and black-eyed peas don't sound like the tastiest things, well you have problem to solve don't you? I decided to dress them up with some Cuban red beans and pepperoni.

I mixed the canned beans together and boiled the hodgepodge for three or four minutes to basically warm up what were already cooked beans as canned beans tend to be. Beforehand, I had hand torn both chunks of cabbage and chunks of pepperoni. I had had previous success in hand tearing chunks of pepperoni here and basically I am using the peperoni confetti in lieu of any other form of spice such as salt or Tabasco.

It came out better than I had hoped. It was really easy to eat luck and money. Very tasty! I wished I had made more afterwards. The cabbage as an accent is really the way to have cabbage. I hope that 2020 is good to you.