February Queso

1. The Elvis Operator of Angular 5 is not a TypeScript operator.
2. Nagios is for monitoring servers, switches, LANs, and applications, etc. It will send you alerts when things go south.
3. @NgModule and @Component and @Pipe are examples of decorators in Angular 2 and up.
4. vlogger would imply: Video Blogger
5. CKEditor allows one to edit rich text at a textarea at a web page. Under the hood the editor is making HTML markup while the user sees the WYSIWYG results. You have controls kinda like those of Microsoft Word for highlighting text and turning it red. FCKEditor was something comparable once upon a time, the original version. The Frederico Caldeira Knabben was what FCK stood for and at some point the Frederico part got dropped.
6. All cryptocurrency coins that are not Bitcoin or Ethereum are considered alt coins.
7. HostGator is a hosting company.
8. Vuex is templating stuff for Vue.js.
9. A ScrumBut is when someone says: "We do Scrum, but..." and then tells you how they don't have a burndown chart or something else that defeats much of the point. This is old school stuff. There are no Scrum purists left as best as I can.
10. HMU stands for: hit me up
11. JINX is Java-based but kinda like Unix (a name that winks at multics, a slang term for an operating system with many users). CurseHTTPD is the web server to use with JINX.
12. BSD stands for Berkeley Software Distribution.
13. minimally viable product? (there will be no unit tests)
14. If one were to reskin a web site one would make it look wildly different just by changing the CSS up. That is what reskinning entails.
15. TensorFlow is for graphing data flows and also doing numeric calculations while doing as much. It is open source software.
16. AnthillPro is an early CI (continuous integration) server. It was orginally called just Anthill.
17. I was at Headspring when it tried to hire Paul Batum. Amongst the things in the shape this took was a dinner out at the Oasis with me and some other characters. He just went to Microsoft anyways though. At the dinner he mentioned how he had heard of the NHibernate Mafia and Jeffrey Palermo suggested that it was part of a posse of tech talk crashers that he and Scott Bellware were a part of once upon a time. I guess they only crashed one tech talk wherein the speaker spoke of Entity Framework and how awesome it was and the crashers asked questions designed to embarrass the speaker and highlight how NHibernate was better. This was an interesting secondhand story. I blindly assume this to be true.
18. A double capital M can be notation for millions such that 5MM would imply five million. M is the Roman number for one thousand for MM in algebra would be one thousand times one thousand or one million. Get it?
19. CCCP? (Combined Community Codec Pack)
20. Dan Abramov created Redux.
21. Keras is a Python-based neural network (for machine learning or "software learning" if you will) that is open source software too.
22. In a code freeze you don't allow any new changes until some event, such as a demo occurs. You do this out of paranoia that you'll break what works.
23. Quest Foglight is for monitoring network performance.
24. Svelte is a UI framework.
25. Do not try to have column formatting at the database. If a section can have n number of subsections and subsections can have n number of questions and you need more than X number of questions to break into a two column format do not try to just break the questions up into two subsections in the database and let that drive the rules for how the UI should behave. The UI should bend to accommodate the data, the data should not bend to accommodate the UI. A better way to do this is just to write a sanity check at the UI based upon the length of the array of questions for whether or not you fall over into a two column format. What if questions have a setting for if they should be skipped and at the section level if any one question is skipped then the section is skipped? Should you have an independent data point for skipped at the section coming back from the database or at least across the API call from the C# middle-layer? No. Make a calculation at the UI.
26. A rebate is a partial refund. If you buy something with the promise of a later rebate the person selling to you is hopeful you'll be too lazy to show up with the rebate coupon later.
27. The gentrification in Austin doesn't really have a counterpart in St. Louis. You can get a house in the bad part of town for five thousand dollars as if the bad part of town will always be bad.
28. Lumosity is an online tool for improving your memory with brain games.
29. If you send someone a nude pic of yourself over text messaging you are sexting.
30. I think "index server" was the name of the technology allowing one to search across a folder full of Word Documents for a term in the app where I used it back in 2005.
31. thought starters and hints can be bullet items by a form field for suggestions for how to fill out the form field
32. TinyMCE (Tiny Moxiecode Content Editor) is an alternative to CKEditor.
33. A reverse proxy retrieves resources on behalf of a client from another server or two. It's a middleman.
34. OARC stands for Operations, Analysis and Research Center.
35. The RAND (Research ANd Development) Corporation is a think tank that helps the American military.
36. Indexing Service is the new name for Index Server. This is a way to search for text across all the Word documents in a folder.
37. Sorenson compression used to be ba bomb back in the 1990s. I used it with QuickTime movies if memory serves.
38. Software Configuration Management (SCM) is different than Version Control Systems (VCS) in that the former includes CI stuff, packaging for deployments, deployments themselves, etc.
39. LexisNexis offers legal/news research abilities.
40. There is a Renderer3 coming in Angular 6.
41. Elixir is a functional programming language like F#.
42. The PalmPilot was a millennium's edge handheld device and Palm OS the operating system.
43. It seems to be my pattern to work a job for about two years and then fuck up and get fired. The restlessness gets the better of my performance in time. I was married once and that similarly lasted like two years. I used to find things falling apart in this way jarring, but anymore I'm realizing that it is who I am. Also, I think it is kinda normal, or, if not normal, understandable.

 
 

Addendum 11/24/2018: ba bomb should really be da bomb

Change themes in Visual Studio Code 1.17.2.

at: File > Preferences > Color Theme

See what is in your pull request at the GitHub web interface.

Go to the "Pull requests" tab at a project and click on the particular pull request in the list shown. Then go to the "Files changed" tab.

ng lint

...as an Angular CLI command should do some linting-then-reporting in the shell.

Make a not nude default ng-content in an Angular 4 component.

The example that follows is kinda silly. Per this you have to do something like this:

<span #ref><ng-content></ng-content></span>
<span *ngIf="ref.childNodes.length == 0"><label>Fahrenheit:</label></span>
<input type="number" #fahrenheit value="32" (keyup)="changeCelsius()">
<ng-content select="[secondaryStuff]"></ng-content>
<span *ngIf="ref.childNodes.length == 0"><label>Celsius:</label></span>
<input type="number" #celsius value="0" (keyup)="changeFahrenheit()">
<ng-content select="[auxiliaryStuff]"></ng-content>
<span *ngIf="ref.childNodes.length == 0">
   <a href="javascript:void(0)" (click)="getHelp()">(help)</a>
</span>

 
 

I overpower it from the outside like so:

<table>
   <tr>
      <td></td>
      <td>Dawn</td>
      <td>Noon</td>
      <td>Dusk</td>
   </tr>
   <tr>
      <td nowrap>Kansas City</td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
   </tr>
   <tr>
      <td nowrap>Columbia</td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
   </tr>
   <tr>
      <td nowrap>St. Louis</td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
   </tr>
</table>

git stash

...as a GitBash command line command will create a stash.

Did you know the forward slash and the backslash work the same in the old DOS cd command?

cd Foo/Bar/Baz

 
 

...and...

cd Foo\Bar\Baz

 
 

...are both gonna take you into the Baz folder in the Bar folder in the Foo folder in the immediate directory. Forward slashes tend to be associated with web URLs and backslashes file paths at directory structure, but I guess there was no World Wide Web when DOS was written. I do recall I could not get away with the same fuzzy thing in the Lingo language for Macromedia Director.

colspan="2" in CSS?

Per this there are still some things you can do in inline HTML that you can't do in CSS. Well, at least there is this one thing.

What are generics in C#?

Well, they showed up as of version two and they have distinct angle-bracket-flavored syntax with the type being extended getting wrapped in angle brackets while the type doing the extending is butted up against the left of the open angle bracket. Duh. I can remember answering this interview question by explaining that generics are all of the modern collections beyond the array and Hashtable of version one of C#, but that now seems like a really stupid answer. The KeyValuePair items in a Dictionary are not in and of themselves collections. The Dictionary is a collection, but not an individual KeyValuePair within it while KeyValuePair is a generic. A Tuple is not a collection. Well, I suppose it is a kind of collection. It's a boundary around a handful of dissimilar things. A Task in the async/await paradigm is not a collection. Maybe it is best to say that generics are a type that extends one or more types wherein the type(s) could generically be any type or could somewhat generically be the subset of types inheriting form a common parent (where T:Whatever). This is a different way to extend beyond inheritance tricks, partial classes, or extensions methods. Extension methods are methods that extend types not types that extend types. In typing up this blog post I found this old example of a Hashtable:

Hashtable hashtable = new Hashtable();
hashtable[1] = "One";
hashtable[2] = "Two";
hashtable[13] = "Thirteen";
foreach (DictionaryEntry entry in hashtable)
{
   Console.WriteLine("{0}, {1}", entry.Key, entry.Value);
}

 
 

Yuck! I also ran into the ability to do a .Clear() on a Dictionary which will drop everything out of it and set the .Count back to zero. I can't recall using that before.

I saw Spencer Schneidenbach speak on Expressions in C# at the St. Louis .NET User Group last night.

Alright, Func<string, string> and Expression<Func<string, string>> look similar but the Func is for a lambda that actual does something while the Expression is for a describing the lambda and this similarity yet distinction may be thought of as homoiconicity! Already lost? Yeah, me too. Like a lot of tech talks this one was a fire hose. You shouldn't feel embarrassed when you emerge from a tech talk and didn't really get it. A tech talk teases you with ideas that you may go Google on your own. You're not supposed to come out of a tech talk as if it were a college class or nothing. One thing Julie Lerman said at a wrap up panel at the end of the AngularMix that I keep thinking of is that you "probably are getting some of it" even if you feel lost. Anyways, I did get some things from this talk. Spencer tried to demystify the magic, but I came away understanding that magic allows for one to write Expressions in C# which may translate to T-SQL. For example this familiar bit of Entity Framework logic...

var products = db.Products
   .Where(p => p.Name = "eggs")
   .OrderByDescending(p => p.Price);

 
 

This ends up making some T-SQL like so, right?

SELECT * FROM Products
WHERE Name = 'eggs'
ORDER BY Price DESC

 
 

The Where clause in C# is an Expression tree! We can see in the slide in the photo here how it makes sense of eggs and gets them into SQL as a WHERE condition in T-SQL. w00t! That could be more interesting yet. What if we want to use AutoMapper with Entity Framework to slurp into a light DTO collection in C# two columns out of table with two hundred columns for some nimble operation in spite of the fat source? There are some challenges with that. Let's assume this DTO:

public class ItemDetail
{
   public int Id { get; set; }
   public string Name { get; set; }
}

 
 

Alright, this...

var itemDetails = Mapper.Map<ItemDetailModel[]>(db.ItemDetails);

 
 

Gives:

SELECT * FROM ItemDetails

 
 

...which is not cool. No select star please! The better way to go is this:

var itemDetails = db.ItemDetails.ProjectTo<ItemDetailModel>();

 
 

Yielding...

SELECT ID, Name FROM ItemDetails

 
 

Now the two examples so far happen under the hood without you having to know anything about Expressions. When would you want to write an Expression yourself? Alright, let's say you are doing some ETL integration work, maybe for an acquired company or something, and want to map the SalesForceCustomer records like this...

public class SalesForceCustomer
{
   public string CustomerName { get; set; }
   public DateTime? CreateDate { get; set; }
}

 
 

...to QuickbooksCustomer records like so...

public class QuickbooksCustomer
{
   public string Name { get; set; }
   public DateTime? OpenDate { get; set; }
}

 
 

You may do so like this:

public class SfCustomerToQbCustomer
{
   public SfCustomerToQbCustomer()
   {
      SourceField(sfc => sfc.CustomerName.Trim())
         .IsEqualTo(qbc => qbc.Name);
      SourceField(stc => stc.CreateDate ?? DateTime.Now)
         .IsEqualTo(qbc => qbc.OpenDate);
   }
}

 
 

SQL tricks like LTRIM(RTRIM(Name)) and ISNULL(CreateDate, GETDATE()) will be accommodated! Spencer also talked about how Expressions may be faster than reflection as suggested here and here (getting into the Expression API some) and beyond the Spencer Schneidenbach talk there was a lightning talk by a Derek Scheller on imposture syndrome wherein he dropped the term "boyscouting" which he described as the nitpicky need to clean up random things one ecounters which can lead to this problem.

Look at commit history at the GitHub web interface.

1. Go to a project.
2. Drill into the folder you want.
3. Eventually find the file you want.
4. Click the "History" button at the upper right.
5. Pick the commit you want.
6. Click the <> button to see the code.

What do I do with an .nupkg file in Visual Studio 2013?

Going to "Package Manager Settings" under "Nuget Package Manager" under "TOOLS" brings up the "Options" Dialog box with "Nuget Package Manager" expanded. Click "Package Sources" herein. Then click the plus symbol at the upper right to add a new package source. Give it whatever name you like. The "Source" should not be a http or https URL but instead should be the file path out to your file like C:\Users\U630126\Desktop\jetbrains.annotations.8.0.5.nupkg or something similar. Once you have a solution open "Manage NuGet Packages for Solution..." will appear under "Nuget Package Manager" under "TOOLS" and this will open a dialog box when clicked and at the dialog box at the upper left under "Updates" you should be able to find your source and install stuff out of it.

I've never really warmed up to the thead and tbody tags as you can just leave them out of a table.

<table>
   <thead>
      <tr>
         <th>Foo</th>
         <th>Bar</th>
         <th>Baz</th>
         <th>Qux</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>13</td>
         <td>42</td>
         <td>69</td>
         <td>86</td>
      </tr>
   </tbody>
</table>

 
 

Why not just break into tr tags right inside of the table tag? I guess the extra tags allow for extra things to latch onto in the name of CSS styling and this suggests there is also a tfoot which to my surprise comes sequentially between thead and tbody in the markup. It will still show up at the bottom of the table however. td tags go in a tr tag in a tfoot and not th tags. Bootstrap uses thead and tbody so if you hate these tags like me you've gotta reconsider.

All the leaves are brown and the sky is grey.

Winter is kinda depressing, huh? I find myself trying to ride out the clock most winters, just waiting for the days of cold to be over. By the time February rolls around, I usually feel fatigued by the gloominess. This winter is unlike any other in memory however as I have changed jobs over the Winter and with that changed states, physical states, U.S. States, states of location. This wintertime has been more go-go-go than most. With a new year comes new budgets and that opens doors and just twenty-three days into the year I was taking the photo seen here when I had no idea that I would be changing cities on day one. The photo was not taken in Texas. I guess the closest parallel I can think of was moving from Austin to Dallas at the end of 1996 for a job that would start in 1997. I was twenty-two and scared and that job... well, anyways, that was a different time because it was less of an adventure. There was that New Hampshire trip five years ago too. That was an adventure, but it still wore me out. The point I am trying to make is that I am feeling unusually energized for all the lack of sun. One of the things that sucked about the New Hampshire trip was that the city (Nashua) didn't feel the need to clear sidewalks of snow, just roads, so all of the snow from the roads would just be pushed up onto where the sidewalk had been making it unusable so there was no way to walk along the roadside and enjoy the day outdoors. I guess that's normal. In St. Louis in contrast there isn't much snow. There is a different challenge in that the city clearly views sidewalks as a nice to have and not a must. There are numerous roads where the sidewalk is only on one side of the road and in those scenarios I have seen it run into a residential neighborhood and stop half a mile deep randomly in front of a house. That's good enough. We can check the checkbox for: yes, sidewalk ...Instead of finding this frustrating I am instead intrigued by the Monty Python absurdity of it all. On the fifty-second day of this year I was told by the nurse practitioner I found here to do my meds that there was too much sugar in my system and that I am prediabetic. Lame! Well, I guess I need to start turning a problem around. It did not help things today that the Olive Garden kept me waiting and then in their guilt offered me a free dessert. I elected to go with the Warm Apple Crostata seen below. That was the most interesting thing to happen today, fifty-six days in, and while that may not seem interesting at all... I'm engaged. In the wise words of Love and Rockets: "I'm alive, so alive."

git branch

This command at a GitBash shell will show you a list of your branch names.

When you cannot seem to switch back to master from your branch when entering commands at GitBash...

...you are probably hip deep in a rebase. Abort the rebase and get out. Untangle your mess.

Paste Special

In Visual Studio 2015, under the "Edit" menu lies the "Paste Special" option which you may use in a .cs file to paste what is in the clipboard into C#. If what is in the clipboard is JSON then use the "Paste JSON As Classes" option to craft some new C# classes exactly in the shape of the JSON in the clipboard (in terms of getsetters and estimated types). There is also a "Paste XML As Classes" option too. Beware! We are in for some nested classes in a hierarchal breakdown.

Do a .FromResult while casting to a specific type in C#'s async/await paradigm.

var foo = await Task.FromResult<Whatever>(widgets);

Convert XML to JSON!

Stack Overflow suggests:

XmlDocument doc = new XmlDocument();
doc.LoadXml(xml);
string jsonText = JsonConvert.SerializeXmlNode(doc);
XmlDocument doc = JsonConvert.DeserializeXmlNode(json);

 
 

...as a way to make the swap in C# though I have not tried it myself. A simple online converter may be found here.

GitLens reveals who authored every line of code and when.

You get the notes from the commit too. These appear as light text in Visual Studio Code to the right of almost any line of code you click upon. GitLens provides some cool insights.

The Redux store is kept in memory at your local browser.

There is not a flat file somewhere for the store or anything like that. Every time you rerun the app you need to refresh the data with API calls.

grotesquely simply Express example

Assuming this package.json, we could pimp out foo.js to work like so:

const express = require('express');
const cors = require('cors');
var app = express();
app.use(cors());
app.options('*', cors());
app.get('/', (req, res) => res.send('Hello World'));
app.listen(4000, function() { console.log('up and running!'); });

 
 

Note that whenever you make changes to this file that you must stop and restart the server for your changes to take effect. Ctrl-C stops the running server.

make sure script tags explicitly have an end tag in HTML

<script src="jquery-3.3.1.js" type="text/javascript"></script>

...behaves better than...

 
 

<script src="jquery-3.3.1.js" type="text/javascript" />

text-indent: 3px;

This, as a CSS style, is going to only move the first line of copy in three pixels while...

margin-left: 3px;

 
 

...moves everything leftward three pixels! text-indent should only be used for an opening-of-a-paragraph effect.

npm run start-all

This command runs all of the servers that could be run from the same folder with this trick.

 
 

Addendum 2/22/2018: What is above isn't true at all. start-all is just in the scripts in a package.json I am looking at and to run two server instantiation files at once it in turn defers to:

concurrently "foo.js" "bar.js"

 
 

Create scripts you can run from the folder containing package.json (the topmost folder for your app also holding the node_modules folder) via the command prompt with Node.js at package.json itself like so:

{
   "name": "whatever",
   "version": "1.0.0",
   "description": "whatever",
   "main": "foo.js",
   "scripts": {
      "start-foo": "node foo.js",
      "start-bar": "node bar.js",
      "start-all": "concurrently \"node foo.js\" \"node bar.js\""
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
      "body-parser": "^1.18.2",
      "concurrently": "^3.5.1",
      "eslint": "^4.15.0",
      "express": "^4.16.2",
      "json-server": "^0.12.1",
      "nodemon": "^1.13.3"
   }
}

 
 

The ISC License (the Open Source Initiative license) is this. ISC stands for Internet Systems Consortium, a non-profit for internet infrastructure and vaguely making the world a better place.

Create a pull request in GitHub's web interface.

Click on your avatar at the upper right and pick "Your profile" and then pick the applicable repository from a list of repositories that appears for you. Then click: "Compare & pull request"

To run a file in a particular folder as a web server in Node.js...

...navigate into the folder with the .js file at the command line and type:

node yournamehere.js

 
 

...if the first line of the .js file is...

const express = require('express');

 
 

...you are running the Express server!

SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c

You need to set up a proxy to talk outside you're walled off LAN when you see this node error. Similar errors include:

• npm ERR! code EPROTO
• error code ENOGIT

An online color picker that tells you the hex values.

See https://www.webpagefx.com/web-design/color-picker/

open Visual Studio Code at the command line to a particular folder

C:\Users\Me\Desktop\VSCode\Code.exe --goto C:\Whatever\src\app

Git Bash Here

To open the Git Bash shell (you need to use it instead of just the command line where "git" leading commands will not be understood) right-click in a folder where you wish to associate code and pick "Git Bash Here" which will both be an option and open the shell if Git Bash is installed. At the GitHub web site, get to the splash page for the repository to clone and then click the "Clone or download" button which will expose some syntax for connecting to the repository. Copy the syntax to your clipboard and then type "git clone " at the command line of Git Bash followed by a paste of what you just copied (right-click in the shell and pick "Paste" as Ctrl-V won't work). Press the Enter/Return key and watch your folder get a new folder, nested inside of it. This other folder is the mouth of the file tree of source code you just pulled. Close Git Bash and then reopen it one folder down inside of the folder you just brought in. Herein, you may run Git commands normally. If you don't make the trip down a folder, you will get errors like:

fatal: Not a git repository (or any of the parent directories): .git

Just type "C:" to change to the C drive at the command prompt in Windows 7.

Duh.

vertical-align: sub; and vertical-align: super; in CSS

...should emulate the sup and sub tags in HTML. sup is for superscript, like we are raising this to the power of two or whatever, and sub puts stuff at the bottom instead of the top but is otherwise the same thing with little text.

You may find you cannot dot dot dot out to stuff at a FormGroup in an Angular 4 app and that you instead must use the square bracket means of fishing for a property.

In a FormGroup called presidentsForm I made lineItems like so:

this.presidentsForm = new FormGroup({
   'lineItems': presidents
});

 
 

lineItems, my own invention, is naturally not going to be undersood by the TypeScript compiler, so while I can get away with something like this in a component template:

*ngFor="let lineItem of presidentsForm.get('lineItems').controls; let i=index"

 
 

...at the .ts file for the component itself I have to do something like this:

datum.Name = this.presidentsForm
      .controls['lineItems']['controls'][counter]['controls']['name'].value;

set the value of a reactive forms control in Angular 4

This won't work:

private updateFillInTheBlankSister(fillInTheBlankSister:FormControl, event:any){
   fillInTheBlankSister.value = event.target.
         options[event.target.options.selectedIndex].value;
}

 
 

This will work however:

private updateFillInTheBlankSister(fillInTheBlankSister:FormControl, event:any){
   fillInTheBlankSister.setValue(event.target.
         options[event.target.options.selectedIndex].value);
}

/deep/ is kinda like ::ng-deep at an Angular 4 application

This should allow the myNestedStyle class to apply to components nested in the immediate component.

.host /deep/ .myNestedStyle {
   color: red;
}

Add an SSH key in GitHub.

1. Go to GitHub at the web (github.com) and click on your icon at the upper right.
2. Pick: "Settings"
3. Click "SSH and GPG keys" at the left nav.

pointer-events: none;

This is a CSS trick to disable the ability to click in a control and then make it active and mess with it. This does not set TabIndex="-1" which inline in a control prevents tabbing in.

StackBlitz in an Angular playground!

see: https://stackblitz.com/

The GitLens plugin for Visual Studio Code is a plugin that lets you see Git commit details and like inside of Visual Studio Code.

Get it here.

Use a leading plus sign in TypeScript to cast a string to a number quickly without a parse operation.

let foo: string = "13";
let bar: number = +foo * 13;
alert(bar);

mysteries of ng-template and ng-content explained!

notes from a third at-work training on Angular and TypeScript yesterday...

1. The literals (string literal, object literal, array literal) are ways of instantiating state where the thing being created is also being defined and defined with some substance on the same line. This is different than merely newing up a string, array, or object. Observer:
   var stringLiteral = "My dog has fleas.";
   var arrayLiteral = ["foo", "bar", "baz", "qux"];
   var objectLiteral = {
      lucky: 13,
      everything: 42,
      sex: 69,
      delete: 86
   }
   This applies in JavaScript standalone too, not just TypeScript.
2. You may do some where T : Whatever stuff in TypeScript in particular like so:
   function myDoubler<T extends theInterfaceOfMine>(actor:T):T{
      actor.stuff = actor.stuff * 2;
      return actor;
   }
3. http://www.typescriptlang.org/docs/handbook/advanced-types.html has some notes on intersection types and union types.
4. ngOnInit runs after the constructor. The constructor runs as the class itself is initialized but before Angular in the bigger picture has woken up, so Inputs and the like are not accessible at the constructor. For the most part you should just plan on using ngOnInit in lieu of the constructor. You do need the constructor to loop in providers (services) specified at the module wrapping the component.
5. You may have as many attribute directives on a host element as you want but only one structural directive.
6. async as a pipe at an Observable at templates will do a subscribe on the Observable and also clean up the subscription when the component is abandoned. If you don't use the async pipe the Observable will do nothing at the UI.
7. router.activatedRoute.data will allow for handing is some simple data to a route. It cannot be driven by variables or change at all.
8. ContentChild and ContentChildren are like ViewChild and ViewChildren only they are used inside of that which is injected into ng-content tags. ngAfterViewChecked is the first event handler in sequence where one may have at ContentChild and ContentChildren.
9. ng-template allows for a tag for defining a template to be used elsewhere. It's guts will not appear where you strictly have in HTML markup in a component template. Do something like so:
   <ng-template #wackyCopy let-fooBar="bazQux" let-yinYang="whatever">
      <span>{{fooBar}}</span> <strong>{{yinYang}}</strong>
   </ng-template>
   The way variables are handed in with let- is kinda odd, huh? You would turn around and use this stuff somewhere like so with a ngTemplateOutlet:
   <ng-container *ngTemplateOutlet="wackyCopy;context:communicationObject">
   </ng-container>
   The communicationObject object would need to be a public property in your component, perhaps like so:
   communicationObject = {
      bazQux: "Don't turn around",
      whatever: "Der Kommissar's in town"
   }
10. Transclusion of Angular 1 has been renamed content projection in Angular 2 and up. It is the ng-content stuff.
11. If you have multiple ng-content tags use the select property to name the content area like so:
    <ng-content select=["secondaryStuff"]></ng-content>
    Do something like what is below when you hand in content to the greater ng-content, it will allow for a bit of your markup to find its way to the selector tag.
    <div>
       Normal Stuff
       <div secondaryStuff>
          More Stuff
       </div>
    </div>
12. The Renderer2 of Angular 4 is for latching ahold of DOM elements in a jQueryesque manner and manhandling stuff. Use it in tandem with ElementRef.
13. HostBinding lets you decorate the selector tag for a component from a component with CSS or whatever. You may reach up to the selector tag with this. You have to use the global listener to reach up any higher, and therein you are not reaching up, but instead down from the whole of the DOM document. HostListener lets you see catch events that happen at the host element (think selector tag) for the component. You can catch a click event with @HostListener('click') decorating a method at your component.
14. rxjs is functionally reactive stuff for Angular and ngrx as a library has the Redux store and rxjs Observables.

Redux DevTools extension for Google Chrome

This creates an extra tab in Google Chrome Developer Tools for inspecting what is in the store in a given application. You may replay the reducers that affected the store in a timeline that reminded me of animating in 3D Studio MAX. More mundanely you may just see what is in the store or what recently changed. This might be the place to download it.

the difference between actions and effects in the Redux paradigm

An action puts something in the store or affects state in some way, changes state. An effect has nothing to do with the store. An API call would be an example of an effect.

 
 

Addendum 1/3/2018: You can hand an action into an effect as an object however so that the effect has the same data as an action. It can fish out what it needs.

 
 

Addendum 11/27/2018: ngrx/effects are for side effects at the ngrx/store Redux orchestrations. This (in contrast and conflict to the definition of effects given above) suggests that there are effects or more specifically side effects, if you will, that may happen as "middleware" midstream into the write-back-to-the-store process that may be of the store. A side effect may just call out to an API endpoint as sort of suggested above or that they may kick off other actions breaking with what is above as that scenario has to do with the store itself.

Alt-Shift-F in Visual Studio Code

This auto-formats the tabbing on HTML markup!

The "Conversation History" folder in Outlook will have a history of your Microsoft Lync chats.

under Mail (not Calendar, Contacts, People, or Tasks)

things learned at another Angular/TypeScript training at work yesterday

When using const and let, try to use const first. There can only be one constructor in JavaScript/TypeScript. The method overloading tricks of C# wherein you may have different signatures for a constructor will not work in JavaScript/TypeScript. The three accessibilities in TypeScript are private, public, and protected and they more or less behave as they do in C#. Object literals are sort of anonymously-shaped object requirements which this suggests look like so:

var obj: { property: string; } = { property: "foo" };

 
 

Interfaces are sort of the same thing only less anonymous. The have a reusable type associated with them. The Redux store paradigm is to keep state across multiple components from splinting and growing apart across multiple components. That is the problem it solves. Subscriptions in Observables should probably be avoided. You have to remember to tear them down in an ngOnDestroy at a component. (Use ngOnDestroy as a destructor.) When doing a .subscribe off of params in routing like so you don't need the destructor though. There is no bubbling up of events in Angular. If you have a bunch of components nested in a Russian dolls manner and the inner most thing needs to raise an event to the outermost thing you have to write boilerplate code for every step up at every component along the way to catch and rethrow events. (Use EventEmitter.) It is appropriate vernacular to say that when you navigate to a route that you activate it. A URL matcher will allow you to do RegEx stuff to make sense of routes. (pathMatch can either be full or prefix for a path) Start with specific routes and downstream in the routing module have more generic ones to cast a wider net. routerLink lets you specify a tag instead of the default router-outlet that will be hydrated for subrouting so to speak and the setting may either be a string literal (something enclosed in either single or double quotes) or a something built up from an array. Per this you may use outlets to have routing affect two content areas like so:

[routerLink]="['/speakers', {outlets: {'list': ['speakersList'], 'bio': ['none']}}]"

 
 

The CanLoad guard is like the CanActivate guard only if you get booted from the CanLoad approach then the content you never saw also never got lazy loaded. Resolvers are a thing. There is a Resolve guard for these. A router gets looped in as a service at a constructor of a component to have at things like params therein. This touches on matrix URLs (allows for seperators in routes) somewhat, another way to craft URLs in the HTML spec.

TODO Highlight highlights TODOs and and TODO Parser puts a little status bar at files with the number of TODOs.

Get them for Visual Studio Code at:

• https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
• https://marketplace.visualstudio.com/items?itemName=minhthai.vscode-todo-parser

It's semantically correct to have multiple header and footer tags in an HTML5 web page, but only one per wrapping tag.

see: this

language="javascript" versus type="text/javascript" at an HTML script tag

language="javascript" is only for really old browsers and type="text/javascript" is more current but in HTML5 you may just have a script tag per: this

Private variables and methods in an Angular 4 component are accessible at the template...

...even if they are not accessible from other classes. This is a big difference between Angular and .NET web forms where the private variables and methods in a code behind would not be accessible at a web form. Also note that a variable or method without an accessibility modifier in TypeScript is public by default not private. If there is no modifier at the signature of a constructor or method then, instead, that variable is scoped to that constructor or method only. You need to explictly use the public keyword at constructor signatures or method signatures if you need a variable to be public, but not so at variables and methods in the component's class.

the onhashchange event gets tripped whenever you change a part of the URL after the hash tag/pound sign/numbers symbol

<!DOCTYPE html>
   <head>
      <title>Whatever</title>
      <script>
         function whatever() {
            alert("Got it!");
         }
      </script>
   </head>
   <body onhashchange="whatever()">
   </body>
</html>

 
 

onbeforeunload will get called if you close the browser or change the URL entirely, navigating away. So far I can only get this to work in IE, not Google Chrome.

Love is in the air... er, water

A change of environments can be jarring but can also be cool. This and this sort of suggest HTC is giving up on doing phones itself to instead help Google with theirs. Over 2,000 of HTC's engineers are just being "transferred" to Google. HTC is probably more interested in the Vive. Oh, to be one of the red-headed step kids (celly engineers) and to change environments. It's really not so bad for them, eh? They get to stay employed. They get to work on meaningful tech instead of tech that's going nowhere. Happy Valentine's Day everyone.

Infinity

This is gonna get you there:

console.log(13 / 0);

 
 

I'm serious! At the console you will see:

Infinity

 
 

Dividing by zero does not cause an exception! It gives you Infinity. Only if you divide zero by zero do you get NaN and otherwise you get Infinity. Well, unless you are diving a negative number. Then you will see this:

-Infinity

git status

This git command will tell you what changes you have outstanding. After you commit you may want to run it again to make sure you are clean and there are no changes outstanding.

 
 

Addendum 2/28/2019: This command will also tell you what branch you are on.

If it looks like a lobster and celebrates Mardi Gras three days early we're going to call it a lobster.

I took the photo here at Mardi Gras festivities being celebrated in St. Louis two days ago on a Saturday even though Fat Tuesday doesn't come until tomorrow. Do not let the strangeness of when be a distraction though. I'd like you to instead focus on the strangeness here that would test Barbara Liskov's patience. I went through a training at work today on TypeScript and Angular 4 and that made me think of the Lobster woman I saw this weekend. A different definition than the one Kyle Simpson gives here comes in lose-with-the-rules TypeScript wherein it is possible say: "If it looks like a duck and quacks like a duck we're going to call it a duck." Let me explain the shape of that. It is possible to have a class inherit from (er, implement) an interface as it might in C#. That's not what I mean. It is also possible to declare a variable with let myVariableName colon myInterfaceName equals and then break into curly braces to toss together a JSON object that must also satisfy the criteria of the interface and that is also not what I mean. What I mean is that when a method signature requires an interface that you may just hand in anything that satisfies the requirements. It can be a class that does not implement the interface but happens to do what the interface does. So what else did I learn today? There are tagged templates and mixins in TypeScript which I don't yet understand. I do get index files for Angular apps. At any one folder you may have an index.ts file and it will hold nothing but import statements. You may then import all of the imports as one import in other TypeScript files. The index files may also loop in other index files in other folders too. An index file is sometimes referred to as a "barrel" and you may import lots and lots of classes from an index.ts file or you may less traditionally use an import star (asterisk) as myAlias approach and then do myAlias.Whatever downstream in code to get at the various types at myAlias! If a parent class has a constructor an inheriting child has to have super(); at its constructor. There will be a compilation error otherwise. The dot dot dot operation that looks like ... is the spread operator in some cases but it is the rest operator when used with the last variable of a function. You lead the name of the last variable with ... and you make the last variable an array of any. Then all of the variables that you declare beyond the variables before the variable with the rest operator, and you may have any number of them, will end up in the array of any. The let and const keywords are block-scoped as I've eluded to before and const does not allow for reassignment. The different between readonly and const is that readonly appears at a property at a class or an interface while const is just for a variable. The following is an example of unpacking variables that I may have given before:

let meh = { foo: 13, bar: 42, baz: 69, qux: 86 };
let { foo, bar } = meh;
console.log(foo);
console.log(bar);

 
 

This gives back 13 and 42! In lieu of console.log, console.dir can give you some extra stuff and a bigger breakdown of an object. It may be more expansive for DOM objects. Having manipulation="dog" in lieu of [manipulation]="dog" at a component's selector tag is going to pass to the component a string variable named manipulation with "dog" inside instead of handing the dog object on to the manipulation Input. If you planned to have Sarah McLachlan sing while you showed pictures of sad dogs this could get in the way so be wary. There is a way to make string restrictions for a string kinda in the shape of a custom type like so:

let meh: "shrug" | "sigh" | "yawn" = "yawn";

 
 

It is possible to make your own custom decorators. ViewEncapsulation as a setting determines if you have to use the ::ng-deep hack to style a component nested in the one you are immediately affecting with a stylesheet and it might be wise to make your developers jump through such hoops honestly. The stylesheets should probably be component specific and contained most of the time. There is a distinction between number enums and string enums as suggested by Stack Overflow here like so:

enum e {
   hello = 1,
   world = 2
};
enum E {
   hello = "hello",
   world = "world"
};

 
 

There will never be compilation errors with type assertions (think casting in C#) because in the underlying JavaScript there is no compiler sanity checking around types. There are some interesting quirks with arrow functions. This gives us undefined:

let yinYang = {
   yin: "yawn",
   yang: () => console.log(this.yin)
};
yinYang.yang();

 
 

This actually puts "yawn" to the console though:

let yinYang = {
   yin: "yawn",
   yang: function() { console.log(this.yin); }
};
yinYang.yang();

 
 

This won't work, again giving undefined.

let yinYang = {
   yin: "yawn",
   yang: () => {
      shrug: "sigh"
   }
};
console.log(yinYang.yang());

 
 

This is the fix:

let yinYang = {
   yin: "yawn",
   yang: () => ({
      shrug: "sigh"
   })
};
console.log(yinYang.yang());

 
 

Note the return keyword is absent from the fat arrow function. It is sort of implicitly implied. An attribute directive starting out like so:

@Directive({
   selector: '[parrot]'
}
export class ParrotDirective {
   constructor() {}
   squawk: string;

 
 

May take a confusing shape in markup like so:

<div parrot [squawk]="Polly wants a cracker!"></div>

 
 

A revamp like this:

@Directive({
   selector: '[parrot]'
}
export class ParrotDirective {
   constructor() {}
   @Input("parrot") squawk: string;

 
 

Allows for this:

<div [parrot]="Polly wants a cracker!"></div>

 
 

ngAfterViewInit is the lifecycle hook for getting at ViewChild variables and components within the component. ngDoCheck is for detecting and acting on changes that Angular won't act on on its own. Even my superior giving the training wasn't sure what this thing did, but felt it smelled like something to avoid. useExisting, useValue, and useFactory are other things like useClass that you may use in the dependency injection. useValue behaves like a singleton and useFactory opens the door to a fine level of control into how injection works. You probably don't want to go there either though. Putting @Optional() before a variable or perhaps the public or private keyword before a variable at the signature of a constructor when looping in an injected service keeps the application from breaking if the service isn't hydrated.

 
 

Addendum 2/13/2018: One way to not call a parent's constructor from a child's constructor is to just not have a constructor at the child. You can get away with that. While this is legit:

class Cat {
   saying: string;
   constructor() {
      this.saying = "meow";
   }
   speak(): void {
      alert(this.saying);
   }
}
class Tiger extends Cat {
   constructor() {
      super();
      this.saying = "ROAR";
   }
}
let tiger: Tiger = new Tiger();
tiger.speak();

 
 

...this too is also legit:

class Cat {
   saying: string;
   constructor() {
      this.saying = "meow";
   }
   speak(): void {
      alert(this.saying);
   }
}
class Tiger extends Cat {
}
let tiger: Tiger = new Tiger();
tiger.speak();

 
 

Hey! It's finally Fat Tuesday!

Did you know that you may have a template where the templateUrl would otherwise go at an Angular 4 component?

If you do, you just put HTML inline right there at the component in lieu of reaching out to another file for markup.

Ctrl-P in Visual Studio Code is sorta like the Ctrl-N/Ctrl-T of ReSharper for finding a file by name.

Dope.

The difference between number and Number in JavaScript is that number is a primitive type and Number an object type.

Stack Overflow has an example of Number with this in it:

var x = new Number(34);

 
 

As much would also explain the difference between boolean and Boolean in TypeScript. The difference is not one of TypeScript. It is of JavaScript. It looks like with the types with a capital letter you may make a strict assignment in lieu of using the new keyword too. This TypeScript throws no errors:

let myBoolean: Boolean = false;
myBoolean = true;
alert(myBoolean);

beautify/prettify

json-beautify will allow you to press F1 to format and clean up your CSS and LESS in Visual Studio Code. Prettify JSON is less interesting.

using .concat and using the spread operator to flatten arrays into arrays in TypeScript

let yin: Array<string> = ["foo", "bar", "baz", "quz"];
let yang: Array<string> = ["doe", "ray", "me"];
let yinYang: Array<string> = [...yin, ...yang];
console.log(yinYang);

 
 

...does the same thing as:

let yin: Array<string> = ["foo", "bar", "baz", "quz"];
let yang: Array<string> = ["doe", "ray", "me"];
let yinYang: Array<string> = yin.concat(yang);
console.log(yinYang);

 
 

The .concat exists in JavaScript itself!

trying to understand reducers for Redux in an Angular 4 app

A file full of reducers like so:

import { YinAction, YangAction } from './yin-yang.actions';
import { BigPictureModel } from '../whatever/big-picture.model';
 
const myState = new BigPictureModel();
type actiony = YinAction | YangAction;
 
export function myReducer(stuff: BigPictureModel = initialState, action: actiony): BigPictureModel {
   switch (action.type) {
      case "yinUpdate":
         const initialState = <YinAction>actiony;
         return {
            ...initialState,
            status: "lucky"
         };
      case "yangUpdate":
         const initialState = <YangAction>actiony;
         return {
            ...initialState,
            activeStep: 13
         };
      default:
         return state;
   }
}

 
 

... has sister file full of actions. yin-yang.actions.ts is gonna look something like this:

import { Action } from '@ngrx/store';
import { BigPictureModel } from '../whatever/big-picture.model';
 
export class YinAction implements Action {
   readonly type: string = "yinUpdate";
   constructor(public status: PlanStatusModel) { }
}
 
export class YangAction implements Action {
   readonly type: string = "yangUpdate";
   constructor(public activeStep: number) { }
}

 
 

I don't really understand this stuff yet. An example of a case with a map and a spread operator might be:

case "yangUpdate":
   const initialState = <YangAction>actiony;
   return {
      ...initialState,
      data: state.answers.map((datum: MyDataPoint) => {
         return (initialState.dataIds.find(d => datum.Id === d))
            ? {
               ...datum,
               finePoint: initialState.somethingErOther
            }
            : datum;
      })
   };

St. Louis so far

I've moved from Texas to St. Louis. There are some things in common. The people here are really friendly like they are in the South. You can just walk up to a stranger and break into a conversation. The whole of the state of Missouri is kinda drawn up the way a Texas congressional district might be gerrymandered, encompassing just one half of a major city and then running across over one hundred miles of rural nowhere to encircle another, separate one half of another major city elsewhere. Allergies seem just as bad here as they were in Texas. My nose is snotty all the time. I was expecting some relief from as much when I got here. Supposedly, Austin is the allergy capital of the world, but St. Louis doesn't seem much different. Husband and wife Pierre and Susan Kerbage who ran Network Logistic, Inc. had moved to Texas from Kansas City (the other Missouri-halved metropolis) and Susan complained of the allergies in Austin as if they were somehow different from those in Kansas City. Whatever. I can remember overhearing a conversation Susan Kerbage had with a Jamie Alig (now Jamie Wheatley) in which Susan vented about how she and Pierre were really disappointed with the customer service in Austin. Is Missouri better? Maybe. The "Service Engine Soon" light kept coming on on my dashboard back in Texas. I went to a National Tire & Battery in Pasadena, Texas three times and they couldn't put the problem to bed. They swapped out two sensors and an air filter all for naught. When the light came on again here in St. Louis I went to an NTB and they actually were able to determine that my car's computer needed an update and they suggested that I go to a Nissan dealership which flashed the computer and fixed the issue for real. The Pasadena NTB had two second chances to do research and think outside the box and they were just apathetic. The photo here is from Mardi Gras festivities celebrated yesterday, yes, three days before Fat Tuesday, in the Soulard neighborhood. Just today I made it a point to go up in the iconic Gateway Arch so that I could say that I did so. The arch, in its completed form, is just over fifty years old and that means that it is older than the Americans with Disabilities Act of 1990 (ADA) and it sure screams of it. It screams of the 1960s. They play a little presentation full of festive colors straight out of that "Down with Love" movie that has Ewan McGregor in it and part of the presentation eludes to the James Bond movie Goldfinger (never seen it in its entirety) current in the era of arch building and that ultimately foreshadows the feel of the very chunky old cable car tech that cannot accommodate anyone overweight or in a wheelchair that takes you to the top of the arch in a claustrophobic little space capsule like chamber (think David Bowie's Space Oddity) that sort of thematically looks like the inside of a froYo which is a local chain of frozen yogurt restaurants that have a sterile white-everywhere theme. The James Bond / Major Tom flavor makes me think of that "The Man from U.N.C.L.E." film too. We are going into some old spy movie on this particular rollercoaster ride. Something that made me feel personally old was as inability to figure out how to adjust the brightness on my phone so that an attendant could successfully scan a PDF of my ticket with a barcode reader. A girl half my age showed me how to do it. Under "Settings" there is a "Display & Brightness" assuming you're running iOS 9.3.5 (13G36) on an iPhone 4S which you are probably not doing. This was something embarrassing for me like not knowing that my device had physical controls for audio volumes. Again, good customer service though. So far so good in St. Louis!

Click Ctrl-P at the Sources tab of the Google Chrome Developer Tools to search.

You will be able to find your TypeScript files and set breakpoints this way. There must be mapping magic to make the JavaScript find your TypeScript breakpoints.

Hot Keys in Visual Studio Code

Ctrl-` (the backtick) opens and closes the shell/console and Ctrl-B opens and closes the "Explorer" which is like the Solution Explorer in Visual Studio.

It is a convention to name observables as variables with a trailing dollar sign.

whatever$ would be an example.

Turn off the annoying spell checker in Outlook.

Go to "Options" under the "File" tab and then go to "Mail" at the "Options" dialog box which appears and click "Editor Options..." to get to the "Editor Options" dialog box where you will uncheck: "Check spelling as you type" ...Also uncheck: "Always check spelling before sending" back at the "Options" dialog box. You may not need to do the first half of this at all honestly.

justify-content and align-items!

I am getting more confident with the flex display stuff which is a little bit older and better supported than the grid display stuff as suggested here. I have expanded the CSS here like so:

#wrapper {
   display: flex;
   background-color: blue;
   margin: 10px;
   padding: 10px;
   justify-content: center;
   flex-flow: row wrap;
   align-items: stretch;
   height: 100px;
}
#wrapper div {
   background-color: pink;
   margin: 3px;
   padding: 3px;
   width: 300px;
}

 
 

That gives us this:

 
 

Let's talk through the five things I've added from the bottom up:

1. width: 300px; Alright, if there is no width set the inner divs will be as narrow (unwide) as they can be, snugging up against their content. This likely means inconsistent in size. I put a bunch of Xs on the end of qux to test the fact that I could make the qux div much longer than the rest, and yes I can. (no Obama pun intended) Anyhow, if you set a width, all of the divs will be the same width. If there is not enough room for them to all be as wide as you specify a few interesting things can happen. In this case we are wrapping and I'll get to that, but by default flex-flow: row wrap; is the default setting for flex-flow and what will happen is that the divs will all be equally reduced. If four 300 pixel wide divs lack 100 pixels of needed space then all four divs will be 275 pixels wide. Get it?
2. height: 100px; The stretch effect cannot be seen if all of the inner divs are the same height and the wrapper container no taller, so I fix that problem here.
3. align-items: stretch; This makes the inner divs as tall as possible within their container. If they don't wrap as seen here they are floor to ceiling tall, but in wrapping we sort of get a double-rowed composition.
4. flex-flow: row wrap; This creates the wrapping.
5. justify-content: center; We are centering things! If you look closely you may see a hint more than ten pixels of space at the left and the right of the container before the content begins. The content is centered.

smart and dumb components

These are also called logic (smart) components and presentation (dumb) components or alternatively container (smart) components and presentation (dumb) components. The dumb components take in inputs from a smart component which is the outermost Russian doll around dumb components and talk back up EventEmitters, but they do not interact with services themselves or a Redux store. Instead it is the smart component that talks in and out with the world at large. The chain down through numerous inputs or up through numerous EventEmitters may be several levels deep.

The equivalent of method overloading in C# existing inTypeScript.

Behold:

function Speak(somethingToSay:string) {
   alert(somethingToSay);
}
function Speak(somethingToSay: string, isToSpeakLoudly: Boolean) {
   if (isToSpeakLoudly) {
      somethingToSay = somethingToSay.toUpperCase();
   }
   alert(somethingToSay);
}

 
 

Again, the one way which I have found that TypeScript is not to truly be a superset of JavaScript comes in an inability to call a function with fewer variables at the signature than are strictly specified without a compilation error. This is something that you may do in JavaScript and the missing variables towards the end just end up unset. What is above offers a way to compensate if you need this functionality.

LESS playgrounds

http://lesscssismore.com/57xo3c/ and https://codepen.io/Dev-Dipesh/pen/zvvvLm are examples of play places. The first spot turned this:

#whatever{
   color: red;
   &:hover {
      cursor: pointer;
   }
   &:after {
      content: "?"
   }
}

 
 

...into this:

#whatever {
   color: red;
}
#whatever:hover {
   cursor: pointer;
}
#whatever:after {
   content: "?";
}

 
 

Hey, I forgot a semicolon but it ended up in the CSS. Too cool!

the contenteditable attribute in HTML

This will allow you to type in a label and that's just crazy.

<label contenteditable="true">Hello World</label>

display: flex;

As suggested here, display: flex; is a modern alternative to floating stuff in divs and then chasing those divs with a div with clear: both; on it to make the wrapping div end below the stuff it is wrapping. Instead you just style the wrapping div and the children all behave themselves without you having to float them and without you having to put an extra div in there for a footer to make the wrapper behave. Behold:

<!DOCTYPE html>
   <head>
      <title>Whatever</title>
      <style>
         #wrapper {
            display: flex;
            background-color: blue;
            margin: 10px;
            padding: 10px;
         }
         #wrapper div {
            background-color: pink;
            margin: 3px;
            padding: 3px;
         }
      </style>
   </head>
   <body>
      <div id="wrapper">
         <div>foo</div>
         <div>bar</div>
         <div>baz</div>
         <div>qux</div>
      </div>
   </body>
</html>

 
 

Observe:

In order to put anything in the store in a nor Redux pattern in an Angular 4 application you will use a reducer.

The term reducer comes from the Map, Filter and Reduce concept of functional programming. This name confused me because it kind of sounds like it is transforming data. However, in a blander sense, you may just put things into the store. Selectors pull stuff back out of the store.

 
 

Addendum 10/21/2018: nor Redux? It should just be Redux in the title of this blog posting.

If Angular is not running in Internet Explorer you may need to uncomment out a chunk of polyfills.ts.

Depending on how old the Angular app is, it may not even have a polyfill.ts, but if it is there looks for something like so to uncomment:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
 
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
 
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

 
 

You will probably need to update the node_modules folder with "npm install" on the other side of the uncomment out. If you get TLS errors in IE try leading localhost:4200 with https:// instead of http://

trying to get used to Git command line commands

git add .
git commit -m "This is my commit note"
git checkout master
git rebase -pull source master
git pull --rebase source master
git checkout myLocalBranch
git rebase master

 
 

Above we commit locally, switch to the master branch, rebase it (meaning that we bring into our copy of the master branch what is current in source control, getting commits there to play nicely with our own changes hopefully), switch back to our branch, and then suck in the master changes there. Checkout code to a new branch with:

git checkout -b whateverYouWant

 
 

This shows you a textual dump of all of the commit details in your branch:

git reflog

 
 

You'll see a history of commits such as HEAD{0} and HEAD{1} and this...

git reset --hard HEAD{0}

 
 

Will fall back to that particular commit. While

git reset --hard

 
 

...goes back to the commit that was current when you branched. Both of these are just affecting your local stuff. To update source control you would have to turn around and commit the local changes that now have the rollback. By the way this...

git reset --soft

 
 

...does the same thing as the hard reset but leaves all of the commits between the point to fall back to and point fallen back from as one big local change set that is uncommitted. It should be that if you branch, commit once, and then do a soft rollback without specifying a change set that what you will end up locally will be exactly equivalent to what is in source control anyways which is something that I found confusing until I could imagine other permutations of this.

git commit -i

 
 

This brings up the vi text editor (the name comes from the vi in "visual" not the Roman number 6) and allows for "cherry picking" what commits you wish to keep or drop. The i is for "interactive" in this madness.

 
 

Addendum 2/21/2018: The seven steps at the top of this blog post should really be the nine step below. Note that between steps six and seven one should clean up merge conflicts.

1. git add .
2. git commit -m "This is my commit note"
3. git checkout master
4. git pull --rebase source master
5. git checkout myLocalBranch
6. git rebase master
7. git add .
8. git rebase --continue
9. git push origin myLocalBranch

 
 

Addendum 2/22/2018: Moreover...

git push origin myLocalBranch -f

 
 

...will force an update to your branch even if Git complains about the heads being out of sync and...

git rebase --abort

 
 

...lets you roll back changes made between step six and seven! Git, the name, is British slang for a person who is a tool or a jackass.

 
 

Addendum 1/9/2020: 4 above should just be: git pull --rebase master ...without the rest of it all.

 
 

Addendum 1/10/2020: 4 above should just be: git pull ...without the rest of it all. The addendum comment from yesterday is just wrong.

TypeScript Hero

...is a plug in for Visual Studio Code which kinda has an icon like Link from The Legend of Zelda. In Visual Studio Code 1.17.2 go to View > Extensions to find this. Also find TSLint here too. TypeScript Hero helps with the imports much like how ReSharper helps with the namespaces in Visual Studio. (It tries to find them, the missing items, for you.) TSLint and TypeScript Hero do not play nicely together. TypeScript Hero will loop in imports in double quotes and TSLint will force you to change the wrapping double quotes to wrapping single quotes.

a really ghetto way to make an a tag in HTML not clickable

<a href="javascript:void(0)">Touch Me</a>

Simplify a .some in TypeScript with the fat arrow!

This may all be simplified, by getting rid of the checkAdult function by using a fat arrow operator in TypeScript like this:

function myFunction() {
   document.getElementById("demo").innerHTML = ages.some(a => (a >= 18));
}

I have "Contacts" as a supersection in Outlook but not "People" so how may I make a photo for myself?

You can still find business cards under "Contacts" and thus if you have a business card for yourself you can just follow the last half of the instructions here. To make a business card for yourself go to "Contacts" and then click "New Contact" at the ribbon. It will be leftmost.

Call out to the API to update data (POST or PUT) first before updating your store within the React paradigm?

You probably should put this step between the action and the dispatch instead of downstream from the dispatch. Otherwise you could update the store and then be unable to call the API and you'd have to update the store again to roll back what you did. Wait for a success from the API promise, then holla at yourself after you've hollered out the window.

 
 

Addendum 2/6/2018: It is not correct to think of this as React in an Angular app. Really this is Flux. Redux might be used as a state container at the store itself.

Do a .some off of an array in JavaScript to see if any one item in the array meets a particular condition for scenarios in which a Boolean value should be based on at least one match.

w3schools.com has this example:

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
   return age >= 18;
}
 
function myFunction() {
   document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

[class.active]="myThing.isActive"

Based on a groc of the truthy or falsey state of this setting, we may conditionally apply the "active" class to an element in Angular 5.

another shape of LESS mixins that is vaguely like inheritance in scripting languages

In addition to what I suggest here, another definition for a mixin would be this sort of thing:

#seaMonster {
   background-color: #000000;
   color: #00FF00;
}
#cthulhu {
   width: 1000px;
   height: 1000px;
   #seaMonster
}

 
 

All of the styles in #seaMonster will get put into #cthulhu this way when the CSS gets rendered out.

I've just used Uber for the first time.

No one raped me. I guess it was a good experience. I have been putting off trying this but I had such a terrible experience the last time I dabbled with Yellow Cab back in Texas that it was time to get off the old way of doing things. The "Service Engine Soon" light keeps coming on on my car and I've made a few trips to National Tire & Battery in Houston (and now in St. Louis) to troubleshoot the problem and that means I need some rides back home here and there in cars that are no my own. One of the last times I used Yellow Cab the driver confessed that Uber has hurt their business so severely that they have had to fire all the dispatchers and replace them with a call center in Columbia. In my last attempt to use Yellow Cab:

1. The cabbie didn't show up.
2. I called Yellow Cab and they made up some horseshit about how they had to cancel the call because they didn't have my destination address.
3. I begged a coworker to give me a ride. He obliged.
4. I eventually got a call from the cabbie who showed up anyway.

Ugh! Columbia should just stick to what it does best, coffee and cocaine. This is what happens when you never embrace the new hotness after the new hotness has clearly proven itself. (Don't leap without looking, but do leap sometimes.) If you just keep using your telegraph and it breaks one day it's gonna be really had to find parts. WalMart isn't going to have the thing you put your finger in to tap out Morse code.

create a grid with modern CSS

This works in Google Chrome. I'm not yet sure of how to get this working in IE11. I know that one would lead the styles in the first div with display: -ms-grid; and that helps but nonetheless I still get funny results with a grid in Edge. I have not yet figured out that part.

<!DOCTYPE html>
   <head>
      <title>Whatever</title>
   </head>
   <body>
      <div style="display: grid; grid-template-columns: 100px 150px; grid-gap: 30px;">
         <div style="background-color: pink;">
            yin
         </div>
         <div style="background-color: green; font-size: 40px;">
            yang
         </div>
      </div>
   </body>
</html>

 
 

Anyhow, the divs in the nested divs are not really important. All you really have to understand is that we are specifying two columns in the wrapping div's styles and that items nested inside, whatever they may be, will be jammed into a column format. Both columns are equally tall! The important stuff comes in the style tag of the first div. There are three styles doing three things:

1. the first style says: "Yes, let's use a grid"
2. the second style specifies two columns and the right column is 100 pixels wide while the left column in 150 pixels wide
3. the third style puts a thirty pixel gap between the two columns

TSLint Rule: no-conditional-assignment

This squawks when you have one equal sign instead of the intended two or three in an if/then comparison in JavaScript. The TypeScript compiler just lets this slide through as it is legitimate JavaScript, so adding in this rule would sanity check where the TypeScript compiler does not.

A "pure function" in JavaScript just provides an output based on inputs without lingering state in any shape.

Running the same inputs n number of times should give the same output over and over again in a pure function. These are not closures and there is not a mutation occurring.

Use the TypeScript spread operator at an object!

let foo = {
   bar: 13,
   baz: 42
};
let qux = {
   ...foo,
   baz: 69
};

In this code all of the properties in foo are copied to qux and then the baz on qux is reset. The properties are deep copied so resetting the baz on qux does not sabotage the baz on foo.

Type Assertions in TypeScript

const whatever = <MySpecificType>somethingVague;

If somethingVague is an any or is somethingVague is one of many types that make up the MySpecificType type, then this allows us to be more specific in the first case and less specific in the second case. This is casting.

ampersand in LESS

.whatever{
   color: #FF0000;
   &.somethingMore {
      width: 40px;
   }
}

 
 

Alight, this allows for styling somethingMore when it happens to sit side by side with whatever like so:

<div class="whatever somethingMore">meh</div>

 
 

It is for if we have whatever AAAANNNDDD somethingMore together. Get it? This is different than this:

<div class="whatever">
   <div class="somethingMore">meh</div>
</div>

 
 

...allowing for different effects. Also do not confuse this with...

.whatever{
   color: #FF0000;
   >.somethingMore {
      width: 40px;
   }
}

 
 

...allowing...

<div class="whatever">
   <div class="somethingMore">
      <div class="somethingMore">meh</div>
   </div>
</div>

 
 

...only the immediate somethingMore one tier to be styled as forty pixels wide.

Bootstrap has striped candy cane barber's pole progress bars!

An example at the bottom of this is:

<div class="progress">
   <div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
         style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
   </div>
</div>

Find a hexadecimal value for a number with the calculator in Windows 7.

background-color: rgb(142, 142, 142);

 
 

This, in CSS, specifies a color without a hexadecimal value. You may also specify the amount of opacity in this manner. In the following example we are using thirty percent opacity.

background-color: rgba(142, 142, 142, 0.3);

 
 

...but hexadecimal is better! In the calculator that comes with Windows 7, go to "Programmer" under "View" then type in 142 and finally click "Hex" to get: 8E.