Spaghetti Tom: May 2017

Wednesday, May 31, 2017

May Queso

Elon Musk is a would be avant-garde businessman who owns Tesla and SpaceX. SpaceX has a goal of sending human beings to Mars.
The old challenge of opening two Excel sheets side by side no longer seems to be challenging at all in Windows 10. You may just have two separate instances open, no worries. I does not seem as though you may however drag a tab from one file to another. I guess you have to make a new tab at the destination and then copy and paste the guts of the tab to the new locale.
The PMP (Project Management Professional) Certification is often sought by... project managers.
Telugu, Tamil, and Kannada are three of the major languages and ethnic groups of south India I think. I have a friend who is a Telugu and I asked her if all south Indians were Telugus (thought of Bollywood versus Tollywood) and she came back with this in response. While there are just a handful of major ethnicities in the south, in the north there are so many that if you say I'm a Whatever, it doesn't mean anything to anyone the way saying I'm a Telugu might and so Indians from the north just refer to themselves as Indians while Telugus call themselves Telugus though they are also Indians. In tech, I meet a lot of Indians here on H-1B visas and they seem like pretty awesome human beings. Chill out on curtailing H-1B visas President Trump. You would not have met your wife without them. Malayalam might be a fourth major flavor of the south.
Adobe Photoshop Elements is a lightweight version of Photoshop that you may own outright beyond a subscription service.
There is a "Pause Capture" button at the upper left of the Http Debugger Pro version 7.4 interface which will allow you to stop all of the pings out to other things from spooling up in the main window. It switches to a "Start Capture" button when clicked which turns back on the fire hose.
If you snip something with the snipping tool in Windows 10 it will be in the clipboard. You don't have to save your snip. Instead you may just use Ctrl-V to put the imagry somewhere.
.toLowerCase() and .toUpperCase() do to strings what you might expect in JavaScript.
Ashley Madison is the cheating web site that was hacked in 2015 by "The Impact Team" who published the details and data of the users online.
Smug Wendy is a meme theme that came out last month which depicts Wendy Thomas of Wendy's logo branding as an anime chick. Fun! (I'm a hipster for finding this.)
A test harness is going to entail more than one test to test various paths through the thing being tested.
Robinhood (robinhood.com) is a mobile app for stock trading without paying a fee.
Ziosk is the table ordering tablet you use to pay for your meal at the Olive Garden. You may swipe a credit card at it, etc.
Amadeus e-travel Management is some sort of book flights and hotels app.
del whatever ...in Powershell is a command to throw away a folder and everything inside of it. I guess this is an old DOS command that is still supported. The modern day magic is: remove-item -Recurse -Force whatever
deviantart.com has deviant art.
t-shirt sizes in scrum is a way to get started without Fibonacci numbers, a dumber, easier way to estimate.
quasi means "kinda like" as opposed to pseudo which just means fake.
DNS stands for: domain name system
ng just stands for Angular.
Movie Maker in Windows 10 lets you make little films from your video clips and photos.
As a concept, referential integrity is a data/SQL notion of the dependent keys being able to look up the parents the keys reference. The parent should not just not be there.
Catapult Systems is an Austin, Texas consultancy not unlike... oh, a few others I can think of. They were a big name fifteen years ago. I don't hear of them anymore.
A whitewashed photograph is overexposed.
Imagine a restaurant run by a pig and a chicken named "Ham and Eggs" ...well the pig would have a much bigger, more grave role to play than the chicken. A "chicken talking" in a Scrum discussion represents a party who is not a stakeholder monopolizing too much of the discussion and inappropriately affecting the outcome.
status and statuses are both legit plural forms of status
Something the movie "Dancer, Texas Pop. 81" taught me is that a number in parenthesis is a negative number in accounting.
You must pull a branch from TFS before you can pull a changeset for it.
I had a Comcast/Xfinity internet connection set up. The tech told me that if I have to reset the router all the time that it is likely an ingress issue caused by a bad connector.
It used to be possible, and maybe it still is, to run TypeScript at the browser in IE without compiling it to JavaScript. I don't recommend it.
Is it better to ask permission or beg forgiveness? The later is a little more clandestine.
For DVI cables DVI stands for: Digital Visual Interface
When you are using a guest wireless it is likely than only port 80 will be opened up. You probably can't FTP from Starbucks.
If you pull down two TFS projects in a workspace, when you go to commit at the "Team Explorer" tab in Visual Studio you will be in the awkward position of committing the two things. Try not to muddy things together in this way.
Scope creep and feature creep are the same thing, ballooning requirements. Both are creepy!
Acceptance criteria are specs for a tester testing a story to approve the story.
"Value was either too large or too small for a UInt32." as a TFS error means that you have an unsaved file you are trying to commit.
Xrefs in Autodesk AutoCAD entail the insertion of a drawing into a drawing.
Bullpen is another name for a war room, a common area where the "sit together" principle of Agile is undertook.
Drumbeat was some sort of old, turn-of-the-millennium eCommerce software package.
Threat modeling is a process for finding vulnerabilities.
Y2K stands for year two thousand and in this context it, as a catchphrase, had to do with fears of a would-be capricious change in the arena of computers when clocks on computers switched from 1999 to 2000 and computers "thought" it was the year 1900 due to years being kept as two digit numbers. Nothing happened.
SourceTree is an Atlassian Bitbucket client.
DM stands for direct message.
AsusTek Computer Inc. is yet another Dell or HP or Gatewayesque computer manufacturer. (ASUS)
Google Pixel is a very generic variant of the Android Phone, perhaps the most generic.
React Native's tag line is "Build native mobile apps using JavaScript and React" making me wonder how that's even possible.
In Postman you may save API calls and share libraries of the saved calls with others. Fun, fun!
Slackbots are helpful for getting you to say things in chat. Imagine a bot which asks you what you did every day for standup, etc.
Slack, Atom (a text editor like Sublime) and Postman are all made with Electron, a tool for making a sister desktop app for the HTML and JavaScript app you have for the web that merely talks to a "backend" over API calls.
Hurdlr is an app for receipts and getting reimbursed while MileIQ tracks mileage
ServiceNow is a helpdesk app.
Viewpoint is accounting software for, typically, the construction industry that is so big in scope that it is also an ERP. It is nothing but MSSQL (sprocs and triggers and tables) and you may extend it and add your own custom tables and such.
Regression tests verify not just that the new stuff you just added works but that all of the software developed to date works.
In the Google Maps API you may program in your own symbol to use instead of a pin and also when a bunch of pins sit right on top of each other making the labels unreadable, this mess may be replaced with a number for the number of the pins there which goes away as you zoom in wherein you would then instead see the individual pins spaced out.
Uber will ask you to provide smartphone photos of your driver's license, your insurance, and your license plate, and them make sense of them (validate them) before blessing you as a driver.
Google Drive lets you store stuff in a cloud. Duh.
WannaCry is some sort of ransomware virus.
Microsoft Teams is Microsoft's answer to Slack.
OS/2 was an operating system from IBM. You ran a bank with it.
Tickets in JIRA are sort of like tasks in Rally in that they make up a story. You may click on (select) a ticket and then click E (equivalent to "Edit" from the menu that flies out from the three dots at the upper right) to open it or click on (select) a ticket and then click W (equivalent to "Log Work" at the menu) to enter time against it.
Windows 3.1 was not an operating system. You ran it inside of DOS.
Flexicious is another UI grid thing.
Alt-F12 in WebStorm is going to open a "terminal window" where you may do npm commands instead of opening an independent PowerShell window. Alt-F12 can also close a terminal window. Ctrl-Shift-N in WebStorm will let you find a file like Ctrl-N in ReSharper. Files seem to automatically save in WebStorm.
Auth0 uses JWT (JSON (JavaScript Object Notation) Web Tokens) tokens for authentication and these may be passed to .NET Core Web API endpoints.
.toLocaleString() and .toLocaleString('en-US') and such format a date in JavaScript.
Ctrl-. in Visual Studio will find a missing namespace directive anymore, the thing you used to HAVE to HAVE ReSharper for.
Ctrl-Shift-F in WebStorm is for finding "project" wide (i.e. the root folder down).
You may assign styles but not assign or remove classes with a media query.
A reset.css CSS file typically tries to enforce some common standards across browsers like for padding, etc.
Apache Flex (formerly Adobe Flex) is a RIA (rich internet application) tool like Flash or Silverlight.
MyFitnessPal is an app that will allow you to punch in what you're eating, assuming you're eating at a chain restaurant and not some hole-in-the-wall place, and it will help you count calories based on the canned meals there.
Pomodoro technique has you working 25 minutes then taking a five minute break, etc.
There is a way to debug a Node process like npm start in WebStorm like what goes on the the systemjs.config.js file, etc.
The green plus sign at a terminal window in WebStorm opens a new terminal window tab.
Commodore 64 and IBM PCjr were computers I goofed off with as a child in the 1980s. 1974, the year I was born, the first year of the Ramones and thus the first year of punk rock and also the first year of Dungeons & Dragons, is the year of the computer revolution. Herein average Joe could own a computer for his home for the first time. The computers weren't just huge things that corporations only owned. The first offerings were kits of parts advertised in the ads in the back of magazines. You had to assemble a behemoth after it was delivered to you. Computers though available in the 1970s weren't really trendy until the 1980s though.
Debian is yet another operating system.
Emmet is a plugin for a lot of text editors that has some shortcut helper stuff.
To rename a file in WebStorm, right-click on it in the Project pane and pick the "Rename..." option beneath "Refactor" and all referencing TypeScript files will have their imports updated automatically!
Paint 3D is some sort of Windows 10 better version of Paint.
Git BASH allows for you to use Linux commands... with GitHub. It is a shell.
Esc closes the global find window (Ctrl-Shift-F) in WebStorm.
Computer-aided software engineering (CASE) Tools were a way to design software. I guess its a 1990s thing.
cultofthepartyparrot.com is kinda stupid.
Snagit is some sort of screengrabbing tool.
Amiga was a line of old Commodore computers.
Ctrl+S saves a file in most Windows apps.
.HasValue off of a nullable type's variable in C# will tell you, true or false, if the thing is not null.
X-Tag is some sort of HTML helper with a swath of polyfills.
Océ is a brand of large format printers.
The pound sign led variables for denoting a control will behave, scoped to the immediate element, inside an *ngFor loop in Angular 2. They will not get confused across different instances with the same name or anything. If you want to put the value of a text type input in a span right by it in the midst of a loop of many text type inputs and sister spans, it will be just fine.
WebStorm will put squiggly red lines under file names in the Project pane where your TypeScript cannot compile.
You cannot call a method with three things in its signature with just two hand-ins like you may in plain Jane JavaScript in TypeScript. In regular JavaScript the third item would just end up falsey empty.
Bumble is yet another dating app, and in this app the girl has to pick a guy first before the guy can interact with her. Grindr is that gay dating app.
When absolute positioning seems to sabotage a dropdown list from being openable in Google Chrome, try setting the z-index higher at the same spot as the absolute positioning.
Ternary expressions are legit in TypeScript.
OpenCms was an only CMS. It is Java-flavored. I guess it is still around.
CRM stands for customer relationship management in the SalesForce sense.
MAS 90 is old accounting software.
(click) is a good event for buttons in Angular 2.
Pascal is a scripting language named for Blaise Pascal, a 15th century French mathematician, and I'd imagine Pascal case is named for the scripting language.
Startup.com is an old documentary about a failed tech startup. The movie never explicitly states why the startup failed, but when you here secondhand stories about this movie the guy telling you about it will embellish. It's an interesting phenomenon.
Sim sickness is a woozy feeling from playing a First Person Shooter and finding it all too real. Sim is short for simulator.
(blur) is a good event to call to make something happen when leaving a text type input in the Angular 2 space.
John Goodman was in a game. It was a spoof of Myst called Pyst. I've never played it.
The Sumerians had a base 60 numbering system.
Illustrate! was a plugin for 3D Studio Max which tried to port your animations to Macromedia Flash (now Adobe Flash) movies.

TypeError: Cannot read property 'profile' of null

Redo the node_modules folder when you see this error with Webpack builds.

Do you ever wish you could just splash a nested component with change and get it to react? Obviously you can easily revamp the value for an input from the outside, but this will only trigger change specific to that data point in lieu of running a desired method to update other things (a bunch of gunk, make an Observable REST query, etc.) inside of the component. Your component will thus react minimally, as if just stunned.

The fix is to use the ngOnChanges lifecycle hook (at an Angular 2 component) like so:

ngOnChanges(changes: SimpleChanges) {

Clearly, from here you may loop other methods and just do whatever outside of the straightjacket of a mere data redo. Yay! Make this happen with an import up top that ends like so:

OnChanges, SimpleChanges, SimpleChange} from '@angular/core';

It gets triggered when an @Input gets updated. Easy! I'm not really sure what SimpleChanges and SimpleChange do. This has some more on that. Also, use the implements constraint at the class declaration.

export class MyComponent implements OnInit, OnChanges {

You don't have to do this (that which is immediately above) to get the code to work, but it is a good convention.

Tuesday, May 30, 2017

Doing a .Select off of a collection in C# to sort of reduce the collection to a collection of one of its properties can be a lot of fun!

var nonMagicCats = cats.Where(c=> kittens.Select(k=>k.Id).Contains(c.Id));

Windows Defender

...is a default antivirus inside of Windows 10. Put "Windows Defender" at "Type here to search" at the taskbar to see some settings for it.

Google Drive is for remote backups.

Get it here.

When a merge goes amiss with Atlassian SourceTree...

Look for <<<<<<< HEAD in the jacked up file by opening it in Notepad++. Clean up each messed up spot manually. Rinse and repeat.

getting used to Atlassian SourceTree

GitFlow lets you branch. It will either bring up a little dialog with many button in it including "Start New Feature" or it will have just two buttons in it, "Finish Feature" and "Other Action..." and "Other Action..." must be clicked to get at the "Start New Feature" button which is what you want either way in either scenario.

Fetch will crawl everything you might pull and tell you how many changes there are to pull. "All Branches" may be changed to "Current Branch" and it will make things a lot less confusing.

Addendum 5/31/2017: Go to "Settings" and then "Advanced" in Atlassian SourceTree to set what your friendly name at commits will be for a given project. This is NOT a global setting. It is project specific. Also, where you might stage or unstage changes you may pick a change and click on a "Stash" button that will appear at the upper nav. The stashes end up in the left most pane with all of your branches. You have to merge in a stash to get a stash into another branch. This is a lifesaver when you realize that you've just been working in the wrong branch.

Unable to create a constant value of type 'Whatever+Whatever'. Only primitive types or enumeration types are supported in this context.

This IQueryable Entity Framework error appears when you are doing complicated mechanics to a second type midstream in a lambda expression where you are manipulating a collection of another type that you really mean to affect with IQueryable. The fix is to just recast the secondary collection to a different collection at a different line of code upstream from the line of code that is freaking out. If I have an IQueryable of Foo and I want to find all the Foo types that have an id that matches something similar in another collection called Bar, you may need to select the ids out of Bar to a list of Guids or integers independent of a line of code that is for IQueryable mechanics.

Sunday, May 28, 2017

some stuff I learned from an Angular 4 training this weekend

The selector property for a Component decorator does not have to be tag-named-based. '.whatever' will allow for <div class="whatever">swap me out</div> and '[whatever]' for <div whatever>swap me out</div>.
btn btn-primary are some Bootstrap styles.
FormsModule from @angular/forms may be required for: [(ngModel)]
(input) is an event for an input fill-in-the-blank field.
@Directive({
selector:'[whatever]'
})
export class DoSomething {
may be called out to like: <div whatever>swap me out</div>
<p *ngIf="hasCondition; else myHashtag">foo<p>
<ng-template #myHashtag>
<p>bar</p>
</ng-template>
...shows off an if/else at an *ngIf for the bar paragraph will show if not hasCondition.
Math.random() in JavaScript gives a decimal between zero and one that is... random.
<p [ngStyle]="{backgroundColor: giveColorForBackground(), 'margin-left':'10px'}"> shows off ngStyle. Note that you are handing in a JSON object full of properties and each property is a style. If the property name has a hyphen you either have to give the name in camel case without the hyphen or wrap the name in quotes.
<p [ngClass]="{whatever: myThing==='foo'}"> shows off ngClass. Here, again, a JSON object. Each property name is a class name and the value for each property is a conditional for whether or not to apply the class defined in the class name.
<p *ngFor="let mouse of mice; let i = index"> shows off having an index variable at an *ngFor and this is actually not something that I learned from the training. I already knew this, but I found myself wondering if I had every included it at this blog. If not, here it is now.

Saturday, May 27, 2017

Use an ngFor to hydrate a dropdown list.

<select #labRat>
   <option value="">pick a lab rat</option>
   <option *ngFor="let mouse of mice" [value]="mouse.Id">
      {{mouse.Name}}
   </option>
</select>

For text-overflow:ellipsis; to work in Google Chrome.

The copy cannot be in a H1, H2, H3, et al.
The wrapping element needs a width set in pixels with the trailing px at the style and all that.
overflow:hidden; and white-space:nowrap; both need to be at the wrapping element.

Change your name as it appears in commits in SourceTree.

At: Settings > Advanced > Full Name

Friday, May 26, 2017

When ReSharper hotkeys stop working you can always reapply them in Visual Studio 2015.

at: ReSharper > Options... > Keyboard & Menus > Apply Scheme

range type sliders at Google Chrome

The (change) event at a slider in Google Chrome is going to be more applicable in Angular 2 than a (keydown) or (keyup) event obviously.

Wednesday, May 24, 2017

Put a ViewChild wireup for an Angular 2 component just inside of the class curly braces.

...and not in a method, constructor, or lifecycle hook. This should be just like making a component-wide public variable.

How may I tell where NuGet is putting stuff?

In Visual Studio 2015, go to: Tools > NuGet Package Manager > Package Manager Settings ...and then click the "Projects and Solutions" option at the upper left.

.toPromise() off a this.http.post or this.http.put Observable implementation is legit.

You may then chain .then() onto .toPromise() to use the Promise API. There is also .catch() which seems to only manage the right half of .then() if you will, the second parameter.

Addendum 6/19/2017: One of the great things about this is that you may actually do what's best with it on the TypeScript side it lieu of having it bleed up to the template to take shape.

return this.http.get(myUrl)
   .toPromise()
   .then(this.manageSuccess, this.manageError)
   .catch(this.manageError);

Keep an a tag from redirecting in Angular 2.

<a href="#" (click)="go($event); false">whatever</a>

This can be advantageous. This in lieu of not having the href parameter and forcing the a tag to behave as if the href were there with a different styling that does cursor:pointer; and whatever else you need to hack a sick a tag into behaving as if unsick. What is more ghetto?

Addendum 6/21/2019: You could also just have the "go" method return false. This will let you skip the trailing false inline in the HTML tag.

Tuesday, May 23, 2017

Use a pipe inside of TypeScript and not just Angular 2!

We could revise this module such that the @NgModule decorator had a "providers" property like so:

providers:[SimpleDatePipe]

...and give the module a constructor like this:

constructor(pipe: SimpleDatePipe){
   let whatever = new Date(1974,8,24);
   let revamp = pipe.transform(whatever);
   console.log(revamp);
}

This would work! If the pipe's transform method took more than one parameter at its signature, that too is easy to accomodate.

constructor(pipe: SimpleDatePipe){
   let whatever = new Date(1974,8,24);
   let revamp = pipe.transform(whatever,"hey");
   console.log(revamp);
}

...and yet, you probably do not want to use pipes beyond the templates like this. This is gross.

Force a refresh with a zone?

Assuming zone: NgZone at component's constructor (in TypeScript in Angular 2), this can be a hacky way to force a component to refresh if the watchers aren't doing their job for some reason.

this.zone.run(() => {
console.log('whatever');
});

Addendum 5/24/2017: public zone: NgZone or private zone: NgZone would be needed at the constructor to make this work somewhere beyond the constructor. Also note NgZone is kept in '@angular/core'

You can't use super outside of a constructor in TypeScript.

If you just call super(); there (the constructor) it should call the parent's constructor. You may call a parent's constructor with parameters too. But you cannot have Anaconda inherit from Animal and have its own Eat method which calls the Animal Eat method and then does some regurgitate mechanics.

Addendum 8/1/2017: This isn't true. There is just a different shape to things. Also, super implementations in a TypeScript constructor need to be called first before other lines of code in the constructor.

Order by two or more things in LINQ.

It's basically like what is here only you would have curly braces around the fields to sort by and you would separate them with commas.

When adding a pipe at the one module that wraps everything, the pipe goes in the declarations property at the @NgModule decorator in Angular 2.

When an app has many modules for many nested russian dolls or functionality. The pipe needs its own module like so:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SimpleDatePipe } from "./simple-date.pipe";
@NgModule({
   declarations: [SimpleDatePipe],
   exports: [SimpleDatePipe],
   imports: [CommonModule]
})
export default class SimpleDateModule {
}

For this to work, SimpleDatePipe must become an item in the array for the "imports" property at the @NgModule decorator for the module wrapping the component that uses the template where the pipe is utilized.

Monday, May 22, 2017

Cast an any to another type in TypeScript.

This has this example:

var myObject: TypeA;
var otherObject: any;
myObject = <TypeA> otherObject;

...and this one too:

var myObject: TypeA;
var otherObject: any;
myObject = otherObject as TypeA;

It seems to me that you probably want to use let instead of var and you probably way to have something in the any before you assign it. :P

Accessible Rich Internet Applications (ARIA) notes

<li aria-controls="whatever">Touch Me</a>

This sort of thing associates a control with something else to affect like so:

Perhaps above a "Touch Me" tab unhides the div with the whatever id. Get it? Moreover this may denote a collapsible div and if it is collapsed:

<div aria-expanded="false"

Use both extends and implements in TypeScript.

export class Foo extends Bar implements Baz {

Sunday, May 21, 2017

backticks at the properties inside an @Component decorator in Angular 4

You may wrap the setting of the "template" property in backticks and at the "styles" property, which is an array of things, any one property may be CSS styles wrapped in backticks. The backticks allow you to have line breaks. For the "template" property you may have a bunch of HTML tags broken up with line breaks. The backticks are a peculiar way to format strings in TypeScript.

Addendum 5/22/2017: stylesUrls as a property at a component (in contrast to merely "styles") will hold an array of paths to SASS, LESS, or CSS files to loop in.

LESS mixins

This touches on it some. It has the super easy to follow example of:

.hiddenMixin() {
color: black;
}
p {
.hiddenMixin()
}
p {
color: black;
}

1+2=3 above. Get it? The link I provide also shows off setting variables at parameters like so:

.round-borders (@radius) {
border-radius: @radius;

Some basic Angular command line interface (CLI) stuff.

I'm starting to chew my way through a training on Angular 4. Some of it is stuff I already know, but it has delved into some of the command line stuff which is new for me. This globally installs the command line stuff.

npm install -g @angular/cli

You have to use the sudo ("substitute user do" or "super user do") keyword on a Mac or in Linux. There will be other places below where sudo applies, but I won't delve into all that.

sudo npm install -g @angular/cli

This creates a new project called whatever in a folder called whatever.

ng new whatever

Build the source code for your app and run a little web server for it. The HTTP protocol must be in place to use Angular 4 so you cannot just open index.html (for an Angular 4 app) as a file and expect it to work well.

ng serve

Addendum 5/23/2017: ng generate component whatever or even ng g c whatever will make a new folder with a component called whatever in it.

Addendum 6/4/2017: ng g c whatever --spec false will make a component without making a spec file for testing and ng g c whatevers/whatever is an example of giving which folder to make a component.

Addendum 6/17/2017: ng g d whatever is going to create a directive in a file dubbed whatever.directive.ts

Addendum 8/12/2017: ng generate pipe whatever is going to create a pipe called whatever and so will ng g p whatever

Addendum 9/4/2017: Some distinctions between Just-in-Time compilation and the alternative Ahead-of-Time compilation are:

ng build
...just builds
ng build --prod
...builds and minifies
ng build --prod --aot
...builds, minifies, and uses Ahead-of-Time compilation

Saturday, May 20, 2017

Have a pipe in Angular 2 that takes in more than one variable!

This pipe called with {{whatever.BirthDay | simpleDate}} is going to give us something like 08/24/74 but what if we wanted to have something a bit more complicated like {{whatever.BirthDay | simpleDate:false:3}} return 08/24/74!!! instead? We could accomodate such a change like so:

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({name: 'simpleDate'})
export class SimpleDatePipe implements PipeTransform {
   transform(value: Date, vague: boolean, emphasis: number=0): string {
      let datePipe = new DatePipe("en-US");
      let revamp = datePipe.transform(value, 'MM/dd/yy');
      while (emphasis > 0) {
         if(vague){
            revamp = revamp + "?";
         } else {
            revamp = revamp + "!";
         }
         emphasis--;
      }
      return revamp;
   }
}

And yet, {{whatever.BirthDay | simpleDate}} would still give 08/24/74 without the code breaking! Yay! The thing at the left of the pipe becomes the first variable at the method signature and the stuff seperated with colons at the right becomes the later variables, everything but the first item that is which denotes which pipe to use.

Friday, May 19, 2017

Have a module for a nested component in Angular 2.

To get this to work, you have to have the module export the component. (the component is one of the module's "exports") Then the module for the component that has a template that calls out to the other, nested component by way of a selector tag must import the module exporting the wrapped component. (the small scope module is one of the "imports" at that outer module) This paradigm allows for some pipes to be looped in only when they are needed for nested components in lieu of them being app wide at a token, one-and-only module wrapping everything. This in turn saves some load time upfront.

What are the Bootstrap 4 sizes?

Per this they are:

xs	extra small	below 576 pixels wide
sm	small	576 pixels or wider
md	medium	768 pixels or wider
lg	large	992 pixels or wider
xl	extra large	1200 pixels or wider

Per this you use this stuff kinda like this:

<div class="col-sm-3 col-md-6">
Hello World
</div>

This shows off how one would fall over to a another setting, three columns wide, instead of six, when the screen real estate drops below 992 pixels in width. The number denotes the number of grid columns in a twelve-wide grid. (You may have two little six wide tables float beside each other horizontally, but not two seven wide tables, etc.) If there is just a large and small setting then everything below large is small. If there is just a large setting, then everything is large. Now what if you want to have a size larger than 1200 pixels for large displays? Well, here are a couple of hacks for that:

...but neither of these are current for Bootstrap 4. :(

npm start failing for no good reason at WebStorm terminal window

If you cannot run an app at a terminal window in WebStorm with npm start or the like perhaps the port for it is being used by another service. I have seen an old instance of a terminal window server spinup linger out of sight even after restarting WebStorm. I had to restart my laptop to get the problem to go way.

Alt-Enter in Webstorm will fill in a missing import in a TypeScript file.

It's not unlike ReSharper looping in a missing namespace directive in a C# class in Visual Studio. The same company, JetBrains, made both products after all.

Convert LESS to SASS!

Get Ruby! (I'm sorry.)
Run the command gem install less2sass as suggested here.
less2sass whatever.less whatever.scss as a command will then make a new whatever.scss file from a file called whatever.less and I bet you can see how you might use other names, huh?

If whatever.less had this in it:

@lucky: 13;
.luckyBuffer {
padding: @lucky;
}

Then whatever.scss would look like:

$lucky: 13;
.luckyBuffer {
padding: $lucky;
}

Note that a @mixin will not be ported.

What size is the browser right now?

Great question! Open up Google Chrome Developer Tools by pressing F12 in Google Chrome. Go to the "Elements" tab. Click the body tag in the HTML. Look!

Addendum 5/20/2017: I guess this trick might not work so well if there were padding or margins on the body. I guess then you'd have to go up to maybe the HTML tag. That said, who uses padding and margins at the body tag anymore?

Set up Ruby and RubyGems at Windows 10.

This suggests installing this and then this from this. You'll then type "ruby" at "Type here to search" at the taskbar to get an option for "Start Command Prompt with Ruby" which I would recommend running as an Administrator.

Cisco WebEx is for video conferencing standups, other meetings, etc.

It makes happy boop beep noises as people drop off a conference call.

zoom.us is something akin.

Thursday, May 18, 2017

styleUrls at Angular 2 components

This takes an array of CSS or LESS files like so:

@Component({
   templateUrl: './whatever.html',
   selector: 'whatever',
   styleUrls: ['./whatever.scss']
})

The funny thing is though, the styles seem to end up inline in the HTML in a style tag and not in a standalone .css file that could be cached/shared across numerous web pages in an application. (kinda nasty)

How do I direct message more than one person in Slack?

By the words "DIRECT MESSAGES" at the lower left, there is a plus sign inside of a circle. Click it! It will make sense.

Turn on your microphone at your headset in Windows 10.

at: Control Panel > Easy of Access > Speech Recognition > Set up microphone ...by the way you unhide file extensions and hidden files in Windows 10 the same way you do in Windows Server 2008 R2.

an example of an Angular 2 pipe

Remember to loop the pipe in at declarations at the module wrapping the component where you want to use this guy. Maybe also put it in providers if you want to use it in TypeScript.

Sing app pagination

[mfRowsOnPage]="10" ...as a setting at the table tag defines the default number of records. The rowsOnPageSet property above is optional. By the way you may need to run npm install -g typings to get the DataTable stuff to work at node_modules.

Bitbucket basics

There is going to be a web site for the your Atlassian Bitbucket account, a subdomian off of atlassian.net. There is also a https://bitbucket.org/whatever/ for you. To get at a repository, it's best to download the SourceTree client and then go to the Remote tab (after adding a new project) to see the repositories you may clone. In JIRA if you go to Boards > All Projects > Only My Issues ...you should see your tickets and you should be able to drag one of your tickets to a swimlane to state change it to being started. At the rightside summary there will be a spot for a link for "Create branch" but you may have to scroll down to see it. When you create a branch, set the Repository to the appropriate repository (that setting won't carry over from the ticket) and lead that Branch name with whatever\ to categorize it to the appropriate locale. The branches show up back at SourceTree at the REMOTES at the left navigation for a repository. Double-clicking an item in REMOTES makes it the active branch and puts it in BRANCHES above remotes. Right-clicking an item in BRANCHES that is not the current branch and picking "Merge whatever into current branch" does just what you think it does! When committing you may need to move files from the Unstaged Files pane to the Staged Files pane.

Wednesday, May 17, 2017

I've moved to Houston.

Well, Deer Park, Texas technically. It's an H-Town border town full of cops! Today was the first day at a new job. A coworker starting the same day as me is part of the production of a periodic podcast called "What's good, Houston?!" which you can find on SoundCloud (a service like Stickler and Blueberry) here. Maybe I should listen and ramp up, huh? It's only been one day but already I've learned the following new things about Angular 2:

<mfDefaultSorter by="name">Name</mfDefaultSorter> is an example of using the mfDefaultSorter functionality of the DataTableModule module suggested at https://www.npmjs.com/package/angular2-datatable for making table columns easily sortable.
The Sing App is good for cannibalizing code from.
Observable<Response> is going to catch from an API call the actual HTTP response with the response code and everything and not just the JSON object handed back.
There is now an Ionic 2 for making mobile apps with Angular 2.
You may have an banana box configuration on a model handed in at a component's selector tag for two way databinding against the model inside of the component and the model at the Russian doll wrapping the component (a different component) it like so: <whatever [(ngModel)]="selectedThing"></whatever>

Addendum 6/8/2017: A mfDefaultSorter by value may have dots in it to drill into properties on nested objects.

Monday, May 15, 2017

.ForEach in a lambda shape

This has this example:

Lists.ForEach(x => {
   if (!x.IsAnimal) {
      // do something
   }
});

It has been suggested to me today that instead of making a "throw away list" here, that I could instead select with the first half of the .Where clause to a collection (perhaps a list of Tuple<Om,Om> or a dictionary with an Om type for both the key and the value) and then, on a second line of code, do a .ForEach to make the doctorups I need to happen. I do not know how easy (possible) that would be to craft. Maybe we could keep the throwAwayList line of code and just get rid of the left hand side of it, the assignment to throwAwayList.

Addendum 1/24/2018: You don't need the outer curly braces after the fat arrow (not the C# term) if you only have one line of code.

ES6 prototype.fill

This bit of JavaScript is going to set whatever to an array that is thirteen items long and then put undefined in each of the thirteen positions.

this.whatever = new Array(13);
this.whatever.fill(undefined);

...I think.

balancing act

When to rewrite? It's an interesting puzzle, huh? Your vehement lust for just fixing the old stuff once and for likely stems from the fact that you are getting constant resistance to as much. If you could rewrite as much as you'd like you'd eventually admit to yourself that you can't just rewrite ever app every year once a year (or perhaps even more frequently than that). It wouldn't make sense. At some point it's wasteful. I like to build stuff under the delusion that I'm building something that's going to last. If I were to honestly admit to myself that my ice sculpture is ice sculpture it would result in a drop in quality on my part as oh-what's-the-point sets in, warping my hand. That said, there has to be a happy medium between knowing that you're building something to throw away and never doing rewrites. It feels like the pendulum tends to swing closer to the later extreme. If something is working but bad the working part tends to overshadow the bad and the business will be inclined to keep living with a thorn in its foot as today's pain feels just like yesterday's pain and we are used to that and don't sense what we might be missing. So when are we going to rewrite something? I once attended a talk about trying to convince a business that the overhead spent on bad code was more expensive than the cost of a rewrite, but, of course, in those scenarios it is hard to make an argument successfully. Just reference what I just said about the thorn-in-the-paw. I just finished a six month contract in which Angular 2 components were being introduced into a preexisting Angular 1 application, and when we needed a datepicker in the Angular 2 stuff we went through the burden of figuring out how to inject a datepicker from the Angular 1 stuff (which wasn't trivial) in lieu of just using something Angular 2 specific as that way the control would feel consistent with the other datepickers. What we could have done instead was use an Angular 2 control and then rewrite everything that had a datepicker that smelled like $scope if you will, but, as you might imagine, we didn't do that. In this same application we decided to roll our own Angular 2 grid for paginated lists and when it was extended to include exporting to Excel sheets some really awful preexisting JavaScript was just copied and pasted out of an existing control used in the Angular 1 stuff. I tried to clean up what was with something like this, but when it didn't work quickly (and this doesn't work) I just gave up and let the nasty code be.

function makeExcelSheet(guts, name)
   var stage = document.createElement('iframe');
   document.body.appendChild(stage);
   stage.contentWindow.document.open("application/CSV", "replace");
   stage.contentWindow.document.charset = "utf-8";
   stage.contentWindow.document.write('sep=,\r\n' + guts);
   stage.contentWindow.document.close();
   stage.contentWindow.focus();
   stage.contentWindow.document.execCommand('SaveAs', null, name + '.csv');
   document.body.removeChild(stage);
}

I can think of just a few times when I've both seen an effort to rewrite something and have been privy to what is inspiring the rewrite. It's significant pain driving the rewrite, the kind of pain that obviously screams loudly that there is money from sales being lost as long as there is a performance problem. I once worked at a dotcom where I got the seat of a developer who had quit in frustration. This other guy had authored a search feature with a bunch of joins in SQL for a shopping cartesque buy-things-online website that I think also drove the specials on the homepage itself. This was all before bandwidth testing was really a norm. It took twenty seconds for the homepage to load when the site was swapped out an older version of the site in a go live and the sales fell off. This would be an example of where the business, which had been tracking metrics on SEO traffic and sales, could clearly see a decay, an easy to quantify problem. This is not the same things as the development staff vaguely telling you that things could be better. Instead metrics that will make their way up to the highest stakeholders, which cannot be hidden from, are telling you there a problem. It's no longer the peons below who insist on change. It's the gods above. See the difference? What do you do? Throw away the new web site or fix it not wanting to believe you wasted your money on the development? The second option is going to feel best when you are already on fire and trying to do damage control. The CEO yelled at the guy before me, and, well... I got a job when he bailed. I didn't fix the problem myself though. At the time I wouldn't have even known how. Another party brought in to oversee me and other development turned this around by using a denormalized schema to sidestep the SQL joins which were so expensive. Specifically, SOLR was used. The twenty second time to load the home page became three seconds. Things got good again. Then the CEO was fired as a scapegoat. When a CEO is fired, that should suggest that there was more pain than a yeah-yeah-whatever may counterargue. Another example I can give has to with the Angular 1 app into which Angular 2 components were being placed. In that scenario, chunks of the Angular 1 stuff was getting rewritten as Angular 2 components in the name of a performance improvement. Remember that Angular 1 has a memory leak in it. The application in question is a call center app through which millions of dollars of revenue stream so any lag or performance problems punch the owning company right in the wallet. The cost of having developers try to improve the app is miniscule compared to the gains to be had and this again is a problem that just bleeds up to the highest levels of the organization and cannot escape the eyes of oversight or be easily dismissed. A rewrite suggests there is something big obviously wrong for all to see if you're going to go there. You're visible in the reflection.

Wednesday, May 10, 2017

using verbs beyond GET with Observables

I found this, which is really out of date, and thus made this service (after some struggling) in an attempt to get a POST scenario working:

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/observable';
import {CampaignContract} from '../contracts/campaign.contract';
import {Campaign} from '../models/campaign.model';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class CampaignService implements CampaignContract {
   public url:string;

   constructor(private http: Http) {
      this.url = "/api/campaign/";
   }

   public addCampaign(campaign: Campaign): Observable<Campaign> {
      let headers = new Headers({ 'Content-Type': 'application/json' });
      let options = new RequestOptions({ headers: headers });
      let body = JSON.stringify(campaign);
      return this.http.post(this.url, body, options).map((res: Response) =>
            <Campaign>res.json());
   };
}

The way I wired up some other things to test it is kind of silly for right now. What is above is what is important, not what is below. That said, my endpoint looks like this on the C# side:

using System.Web.Http;
using FluffyNothing.Core.Objects;
namespace FluffyNothing.UserInterface.Controllers
{
   public class CampaignController : ApiController
   {
      public Campaign Post(Campaign campaign)
      {
         campaign.CampaignId = 13;
         return campaign;
      }
   }
}

I'm sort of faking a classic object reshaping in a POST as would be true to the REST spec. The same object that gets handed in comes back to the user only now it has an id appended. The service is called by a component where it is assigned to a public property for an Observable of Campaign called observableCampaign. (Again, some silliness with these other pieces.) In the template for the component, I reference it like so:

<div *ngIf="observableCampaign">
look: {{tryToMakeSense(observableCampaign | async)}}
</div>

My goofy tryToMakeSense method on my component looks like this:

tryToMakeSense(campaign:Campaign):number{
   console.log('logging');
   console.log(campaign);
   if (campaign){
      return campaign.CampaignId;
   } else {
      return 0;
   }
}

You kind of have to Observable bleed things all the way up to the HTML markup to test them with enough attention/pinging to get them to bring something back that you may, well, observe. Clearly this is not going to be applicable in a PUT or a DELETE implementation which should be fire and forget flavored per the REST spec. In trying to craft the service I struggled to even hit my endpoint for the longest time because I was screwing up the code for the headers initially (again, the blog post I'm referencing is troubled), and only in getting error messages back from stuff logged to the console could I really troubleshoot what was wrong. Had I started with a PUT or DELETE approach I'd probably still be scratching my head.

Tuesday, May 9, 2017

a hack to doctor up reference type records midstream in a lambda expression in C#

Consider this code from this blog posting:

List<Om> thinYin = yinList.Result.Where(i => !yangList.Any(a => a.OmId ==
i.OmId)).ToList();
List<Om> yinYang = yangList.Concat(thinYin).OrderBy(y => y.OmId).ToList();

Why don't we put it in a method like so:

public List<Om> Whatever(List<Om> yinList, List<Om> yangList)
{
   List<Om> thinYin = yinList.Result.Where(i => !yangList.Any(a => a.OmId ==
         i.OmId)).ToList();
   List<Om> yinYang = yangList.Concat(thinYin).OrderBy(y => y.OmId).ToList();
   return yinYang;
}

Alright, imagine a Venn (named for John Venn) diagram in which a yinList circle overlaps with a yangList circle. Well, above we are keeping all of the yangList and appending to it just the piece of the yinList that does not overlap with it. (That way there are no dupes in the list we ultimately craft.) There might be reasons why a yang would beat a yin. Perhaps its properties are better baked and farther along in a workflow if both the yang and yin come from different web services while being aggregated in a common report. And yet, let's say that a Zen getsetter on an Om object is always going to be considered more fresh on a yin than a yang due to a shortcoming of the yang web service. What should we do? Let's try this:

public List<Om> Whatever(List<Om> yinList, List<Om> yangList)
{
   List<Om> throwAwayList = yangList.Where(a => yinList.Any(i => i.OmId == a.OmId
         && DoctorUp(i,a))).ToList();
   List<Om> thinYin = yinList.Result.Where(i => !yangList.Any(a => a.OmId ==
         i.OmId)).ToList();
   List<Om> yinYang = yangList.Concat(thinYin).OrderBy(y => y.OmId).ToList();
   return yinYang;
}

private bool DoctorUp(Om yin, Om yang)
{
   yang.Zen = yin.Zen;
   return true;
}

If Om is a reference type (a class not a struct) then it should be doctorupable inside a method without explicitly coming back from a method as a return type and then getting reassigned to the original variable. You can use the ref keyword if you like too. I guess you'd have to if Om were a struct, though I have not tried that firsthand to confirm it would work.

Monday, May 8, 2017

console.log has many cousins!

console.log('log');
console.info('info');
console.debug('debug');
console.warn('warn');
console.error('error');

...will produce this at Google Chrome's Web Developer Tools' console:

Note the different themes for the different things. The warn and the error are expandable to show some metadata like the name of the JavaScript method that threw the error, etc. I've seen a StackOverflow thread that suggested that this too was legit:

console.exception('exception');

...and that it behaves just like console.error might, but for me console.exception causes an error in at Google Chrome's Web Developer Tools' console.

Saturday, May 6, 2017

Make a ghetto endpoint in a .NET Core app!

I need to figure out how to make controllers in a .NET Core app. In the short term however...

Get Visual Studio 2017!
Install .NET Core. Per this it's the ".NET Core cross-platform development" workload. Everything is modular in Visual Studio 2017 with containers of funtionality optional opt-ins.
Under Visual C# Templates there is a .NET Core subsection with a "ASP.NET Core Web Application (.NET Core)" option nested further inside when you create a new project assuming you got on the other side of the first two steps above alright. Make a new project of this ilk.
Just use the "Empty" template. It will make mostly nude app with two C# classes. One is Program.cs which is the front door to the application. It looks like...
using System.IO;
using Microsoft.AspNetCore.Hosting;
namespace Whatever
{
   public class Program
   {
      public static void Main(string[] args)
      {
         var host = new WebHostBuilder()
            .UseKestrel()
            .UseContentRoot(Directory.GetCurrentDirectory())
            .UseIISIntegration()
            .UseStartup<Startup>()
            .Build();
         host.Run();
      }
   }
}
...and can mostly just be left alone, truth be told. The other file is Startup.cs which Program.cs designates as the outmost Russian doll in the middleware paradigm. In our case there are no other Russian dolls. I'll get to Program.cs later on.
Run Install-Package Microsoft.AspNetCore.Cors at the NuGet console to add Cors so that we may open up our endpoint to the world beyond our app.
Open PowerShell and enter the dotnet restore command at the folder holding the .sln file. This will restore any missing NuGet dependencies in what is sort of like an npm install fashion. We may not really need it in this immediate case, but this is a good practice before...
Running the dotnet run command. Do note .UseKestrel() in Program.cs which means we will be using the Kestrel web server and not IIS Express! You will want to run this command in the same folder that Program.cs lives in. The web server will run until you press Ctrl-C and it should tell you what port the app is running at at localhost. http://localhost:5000 probably has your app and if you look at it in a browser you will probably see "Hello World" spat back to you from the Startup.cs default placeholder code.

Alright we are going to leave the ability for the application to tell us "Hello World" alone, but we are also going to add a second endpoint at http://localhost:5000/whatever which will give us a string of pipe-separated metasyntactic variables. Revamp Startup.cs like so:

using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
namespace Whatever
{
   public class Startup
   {
      public void ConfigureServices(IServiceCollection services)
      {
         services.AddCors();
      }

      public void Configure(IApplicationBuilder app, IHostingEnvironment env)
      {
         app.UseCors(builder =>
         {
            builder.AllowAnyHeader();
            builder.AllowAnyMethod();
            builder.AllowAnyOrigin();
         });
         app.Map("/whatever", HandleWhateverRoute);
         app.Run(async (context) =>
         {
            await context.Response.WriteAsync("Hello World!");
         });
      }

      private static void HandleWhateverRoute(IApplicationBuilder app)
      {
         var metasyntactic = new List<string>()
         {
            "foo",
            "bar",
            "baz",
            "qux"
         };
         var flattening = metasyntactic.Aggregate("|", (x, y) => x + y + "|");
         app.Run(async context => {
            await context.Response.WriteAsync(flattening);
         });
      }
   }
}

You should be able to see the |foo|bar|baz|qux| copy if you run the app and hit the endpoint. With Cors opened up another app could scrape this content in and break up the string based on the pipe symbols. This is weak, I know. It's a start. :)

Friday, May 5, 2017

Drop a pin in Visual Studio 2017!

When debugging and stopped at a breakpoint mouse over a variable and you should see an icon to click to drop a pin.

Click it, the icon that looks like a rightward pointing pushpin.

This drops a pin and in effect makes a little UI element near the variable that is watching the variable and reporting the value. All this happens without a secondary watch window taking up a lot of screen real estate.

When the variable's value changes the watcher will turn red to alert you. In this case I just pressed F5 to hit the same breakpoint in the foreach loop for the next item.

Thursday, May 4, 2017

Keep only the items in a list which to do not have dupes in a sister list and then merge the sister list and the truncated list into one master list without any dupes in C#.

Use LINQ, like so:

List<Om> thinYin = yinList.Result.Where(i => !yangList.Any(a => a.OmId ==
i.OmId)).ToList();
List<Om> yinYang = yangList.Concat(thinYin).OrderBy(y => y.OmId).ToList();

Doing a .ToList() off of a list in C#, yes, makes a new reference type with a new pointer.

That said, the objects in the collection, should they be reference types, are going to be the same objects with the same pointers in the two lists. Anyways, beyond that caveat, note that this...

List<Whatever> yinlist = yangList.ToList();

...is basically the same thing as this...

List<Whatever> yinlist = new List<Whatever>();
foreach (Whatever yang in yangList)
{
yinlist.Add(yang);
}

...and that ReSharper will even suggest changing the later to the former. Neither is the same though as:

List<Whatever> yinlist = yangList;

The last blob of code above will make a separate variable with a pointer to the same spot on the heap as yangList. (a separate variable without a separate pointer)

Tuesday, May 2, 2017

Share a folder on your laptop across the LAN to another user in Active Directory with Windows 10.

right-click on the folder and pick "Properties" from the little menu that appears
go to the "Sharing" tab of the dialog box that appears
click the "Share..." button
type in the name of your friend and be sure it match exactly what Active Directory expects
click the "Add" button

You'll ultimately get a //Whatever path for the share. Communicate this to the other party you are sharing with.