DOMContentLoaded, load, beforeunload, unload

Source: https://javascript.info/onload-ondomcontentloaded

The lifecycle of an HTML page has three important events:
  • DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img>and stylesheets may be not yet loaded.
  • load – the browser loaded all resources (images, styles etc).
  • beforeunload/unload – when the user is leaving the page.
Each event may be useful:
  • DOMContentLoaded event – DOM is ready, so the handler can lookup DOM nodes, initialize the interface.
  • load event – additional resources are loaded, we can get image sizes (if not specified in HTML/CSS) etc.
  • beforeunload event – the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave.
  • unload – the user almost left, but we still can initiate some operations, such as sending out statistics.

mat-form-field must contain a MatFormFieldControl

Source: https://stackoverflow.com/questions/46705101/mat-form-field-must-contain-a-matformfieldcontrol

I had this issue. I imported MatFormFieldModule at my main module, but forgot to add MatInputModule to the imports array, like so:
import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }
Hope it helps.

chrome.storage.local.set using a variable key name

Source: https://stackoverflow.com/questions/11692699/chrome-storage-local-set-using-a-variable-key-name/11694909


Is this what you where looking for?
var storage = chrome.storage.local;

var v1 = 'k1';

var obj= {};

obj[v1] = 's1';

storage.set(obj);

storage.get(v1,function(result){
  console.log(v1,result);
  //console output = k1 {v1:'s1'}
});

storage.get('v1',function(result){
  console.log(result);
  //console output = {v1:'s1'}
})

Difference between “git checkout ” and “git checkout -​-

Source: https://stackoverflow.com/questions/6561142/difference-between-git-checkout-filename-and-git-checkout-filename/6561160#6561160

The special "option" -- means "treat every argument after this point as a file name, no matter what it looks like." This is not Git-specific, it's a general Unix command line convention. Normally you use it to clarify that an argument is a file name rather than an option, e.g.
rm -f      # does nothing
rm -- -f   # deletes a file named "-f"
git checkout1 also takes -- to mean that subsequent arguments are not its optional "treeish" parameter specifying which commit you want.
So in this context it's safe to use -- always, but you need it when the file you want to revert has a name that begins with -, or is the same as the name of a branch. Some examples for branch/file disambiguation:
git checkout README     # would normally discard uncommitted changes
                        # to the _file_ "README"

git checkout master     # would normally switch the working copy to
                        # the _branch_ "master"

git checkout -- master  # discard uncommitted changes to the _file_ "master"
and option/file disambiguation:
git checkout -p -- README  # interactively discard uncommitted changes
                           # to the file "README"

git checkout -- -p README  # unconditionally discard all uncommitted
                           # changes to the files "-p" and "README"
I'm not sure what you do if you have a branch whose name begins with -. Perhaps don't do that in the first place.

1 in this mode; "checkout" can do several other things as well. I have never understood why git chose to implement "discard uncommitted changes" as a mode of the "checkout" subcommand, rather than "revert" like most other VCSes, or "reset" which I think might make more sense in git's own terms.

How to strip HTML from a string (extract only text content) in Javascript

Source: https://ourcodeworld.com/articles/read/376/how-to-strip-html-from-a-string-extract-only-text-content-in-javascript

var htmlString= "<div>\n <h1>Hello World</h1>\n <p>This is the text that we should get.</p>\n <p>Our Code World &#169; 2017</p>\n </div>";

var stripedHtml = htmlString.replace(/<[^>]+>/g, '');
var decodedStripedHtml = he.decode(stripedHtml);

// Hello World
// This is the text that we should get.
// Our Code World &#169; 2017
console.log(stripedHtml);

// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(decodedStripedHtml);

Passing a function with parameters as a parameter?

Source: https://stackoverflow.com/questions/1300242/passing-a-function-with-parameters-as-a-parameter

Use a "closure":
$(edit_link).click(function(){ return changeViewMode(myvar); });
This creates an anonymous temporary function wrapper that knows about the parameter and passes it to the actual callback implementation.

What exactly are content script and background script in the chrome extension?

Source: https://stackoverflow.com/questions/41889189/what-exactly-are-content-script-and-background-script-in-the-chrome-extension/41889564

First of all, you are indeed using a content script. Here you are just controlling the execution of the content script through an event.
background scripts are something that run in background and listen for triggers while the user interacts with the chrome browser (such as listening for a click event on a tab)
While content scripts are the one's that actually interacts with the webpage (essentially DOM elements).
Now, the difference between your method and including them in manifest is that if they are included in manifest, the content scripts will load as soon as the page loads and hence(in this case) will auto-fill data simultaneously, while chrome.tabs.executeScript(tabs[0].id, {file: "xyz.js"});will load the content script upon a certain triggering event and hence(in this case) auto-fill data on a trigger(such as on button click).
Here are all the methods to inject content scripts.

Angular CustomValidators: Password example

Source: https://codinglatte.com/posts/angular/cool-password-validation-angular/

import { ValidationErrors, ValidatorFn, AbstractControl } from '@angular/forms';

export class CustomValidators {
static patternValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
if (!control.value) {
// if control is empty return no error
return null;
}

// test the value of the control against the regexp supplied
const valid = regex.test(control.value);

// if true, return no error (no error), else return error passed in the second parameter
return valid ? null : error;
};
}

static passwordMatchValidator(control: AbstractControl) {
const password: string = control.get('newPassword').value; // get password from our password form control
const confirmPassword: string = control.get('retypePassword').value; // get password from our confirmPassword form control
// compare is the password math
if (password !== confirmPassword) {
// if they don't match, set an error in our confirmPassword form control
control.get('retypePassword').setErrors({ NoPassswordMatch: true });
}
}
}

public static getPasswordValidators() {
return Validators.compose([
Validators.required,
// check whether the entered password has a number
CustomValidators.patternValidator(/\d/, {
hasNumber: true
}),
// check whether the entered password has upper case letter
CustomValidators.patternValidator(/[A-Z]/, {
hasCapitalCase: true
}),
// check whether the entered password has a lower case letter
CustomValidators.patternValidator(/[a-z]/, {
hasSmallCase: true
}),
// check whether the entered password has a special character
CustomValidators.patternValidator(
/[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
{
hasSpecialCharacters: true
}
),
Validators.minLength(8),
Validators.maxLength(50)
])
}


createPasswordForm(): FormGroup {
return this._fb.group(
{
currentPassword: [
null,
Validators.compose([Validators.required])
],
newPassword: [
null,
Utils.getPasswordValidators()
],
retypePassword: [null, Validators.compose([Validators.required])]
},
{
// check whether our password and confirm password match
validator: CustomValidators.passwordMatchValidator
}
);
}

MySQL 8.0 Keywords and Reserved Words

Source: https://dev.mysql.com/doc/refman/8.0/en/keywords.html

Two ways to empty an array

Source: https://www.jstips.co/en/javascript/two-ways-to-empty-an-array/

var foo = [1,2,3];
var bar = [1,2,3];
var foo2 = foo;
var bar2 = bar;
foo = [];
bar.length = 0;
console.log(foo, bar, foo2, bar2);

// [] [] [1, 2, 3] []
  • list = [] assigns a reference to a new array to a variable, while any other references are unaffected. which means that references to the contents of the previous array are still kept in memory, leading to memory leaks.
  • list.length = 0 deletes everything in the array, which does hit other references.
In other words, if you have two references to the same array (a = [1,2,3]; a2 = a;), and you delete the array’s contents using list.length = 0, both references (a and a2) will now point to the same empty array. (So don’t use this technique if you don’t want a2 to hold an empty array!)
Think about what this will output:

2 Methods to Remove Last Character from String in JavaScript

Source: https://tecadmin.net/remove-last-character-from-string-in-javascript/

Method 1 – substring function

var str= "Hello TecAdmin!";
var newStr = str.substring(0, str.length - 1);


Method 2 – slice function

var str = "Hello TecAdmin!";
var newStr = str.slice(0, -1);

MySQL - How Do I Count Nulls and Not Nulls?

Source: https://stackoverflow.com/questions/9245038/mysql-how-do-i-count-nulls-and-not-nulls

SELECT prod_code,
       COUNT(email) AS total_installs,
       COUNT(install_slot) AS used_installs
FROM installs
WHERE email='example@example.com'
GROUP BY prod_code
COUNT counts NOT NULL values only.

StaticImage

  import React , { useEffect , useRef } from "react" import { StaticImage } from "gatsby-plugin-image" impor...