mrshawnspencer

## mat-select-styling-01.txt
 /*
    The mat-select options are slightly left to the start of the
    ::-webkit-progress-inner-element. That causes some display
    problems in some instances.

    This gist also maintains the width of the select options
    (drop-down) so that it will allow to display the text of the
    largest option (within reason) instead of displaying at 100%.

    If you can get away without !important directives in your

## IE11 and IE10 CSS Hack 2019
/*
As published elsewhere on the web:
IE10 and IE11
==================
The first snippet might cause problems if you are coding
in Visual Studio Code, because some formatters will insert
a line break after the comma:
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

## Show or Hide Div with Angular *ngIf
<!--
    Angular/HTML/CSS

    Sometimes, when you work with a corporate CMS,you cannot predict what people do.
    I encountered sections on a corporate website with lots of empty DIVs. That
    created lots of white space and negatively affected the layout.

    You can hide empty DIVs with (S)CSS: div:empty { display: none !important; }

    Or you can add an ng-container with *ngIf, shown below.

## Launch New Chrome Incognito Window with Windows Command Line
[System.Diagnostics.Process]::Start("chrome.exe","--incognito http://localhost:3000")

[System.Diagnostics.Process]::Start("chrome.exe","--inconito http://www.google.com")

## hostname JavaScript
//  Just get the hostname of the URL
//  Example: https://electmyhealthplan.org/find-a-doctor
//  Result: electmyhealthplan
//  Test this in the browser console:
//  var hostname = window.location.hostname.split('.')[0]; console.log(hostname);

var hostname = window.location.hostname.split('.')[0];

## http or https check in JavaScript
//  Test: https://gist.github.com
//  console.log(window.location.protocol);
//  Result: https

var wlp = window.location.protocol;

## Quotes vs Back Ticks in Angular 2019 HTML template
/*
Angular @Component Directive
If you are using an HTML file as the template in an angular component:
*/

@Component({
	selector: 'app-provider-search',
	templateUrl: './provider-search.component.html',
	styleUrls: ['./provider-search.component.scss']
})

## Open File Explorer from the command line
start D:\selecthealth.org\selecthealth.org.website\static

## convertCharsToSpaces Angular Custom Pipe
/*
  Simple Custom Pipe Example
  Angular 7/8
  (must be imported in the module where it is needed, after imports[], in the declarations[] section)
  convert-chars-to-spaces.pipe.ts
*/

@Pipe({
  name: 'convertCharsToSpaces'
})

## modal dialog box simple html css js standalone
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Handy Dandy HTML5 Modal</title>
    <meta name="description" content="JavaScript Interview Assignment">
    <meta name="author" content="Mr. Shawn Spencer">
    <!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
    <!-- Plastic Buttons Style: https://1stwebdesigner.com/free-code-snippets-css-buttons/ -->
	/*
	The mat-select options are slightly left to the start of the
	::-webkit-progress-inner-element. That causes some display
	problems in some instances.

	This gist also maintains the width of the select options
	(drop-down) so that it will allow to display the text of the
	largest option (within reason) instead of displaying at 100%.

	If you can get away without !important directives in your
	/*
	As published elsewhere on the web:
	IE10 and IE11
	==================
	The first snippet might cause problems if you are coding
	in Visual Studio Code, because some formatters will insert
	a line break after the comma:
	*/

	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	<!--
	Angular/HTML/CSS

	Sometimes, when you work with a corporate CMS,you cannot predict what people do.
	I encountered sections on a corporate website with lots of empty DIVs. That
	created lots of white space and negatively affected the layout.

	You can hide empty DIVs with (S)CSS: div:empty { display: none !important; }

	Or you can add an ng-container with *ngIf, shown below.
	[System.Diagnostics.Process]::Start("chrome.exe","--incognito http://localhost:3000")

	[System.Diagnostics.Process]::Start("chrome.exe","--inconito http://www.google.com")
	// Just get the hostname of the URL
	// Example: https://electmyhealthplan.org/find-a-doctor
	// Result: electmyhealthplan
	// Test this in the browser console:
	// var hostname = window.location.hostname.split('.')[0]; console.log(hostname);

	var hostname = window.location.hostname.split('.')[0];
	// Test: https://gist.github.com
	// console.log(window.location.protocol);
	// Result: https

	var wlp = window.location.protocol;
	/*
	Angular @Component Directive
	If you are using an HTML file as the template in an angular component:
	*/

	@Component({
	selector: 'app-provider-search',
	templateUrl: './provider-search.component.html',
	styleUrls: ['./provider-search.component.scss']
	})
	/*
	Simple Custom Pipe Example
	Angular 7/8
	(must be imported in the module where it is needed, after imports[], in the declarations[] section)
	convert-chars-to-spaces.pipe.ts
	*/

	@Pipe({
	name: 'convertCharsToSpaces'
	})
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Handy Dandy HTML5 Modal</title>
	<meta name="description" content="JavaScript Interview Assignment">
	<meta name="author" content="Mr. Shawn Spencer">
	<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
	<!-- Plastic Buttons Style: https://1stwebdesigner.com/free-code-snippets-css-buttons/ -->