Using process.env in React

1. Install dotenv package
2. Create .env file in root directory
3. Add variables to the file like this:

REACT_APP_MOCK_API_URL=data1
REACT_APP_REST_KEY=data2

4. Read variables like this:

const key = process.env.REACT_APP_REST_KEY;
const mockUrl = process.env.REACT_APP_MOCK_API_URL;

Important!

Variable name MUST begin with "REACT_APP_"

(Initially I called variable MOCK_API_URL. It took me few hours to figure out why key contained value and mockUrl was undefined.)

Zestawienie prepaid

Znalazłem "magiczny excel" zawierający porównanie pakietów "na kartę" we wszystkich polskich telekomach: https://drive.google.com/file/d/1wTRENPirHx9ZgyKj4oeKP2A-eaSYKn-e/view 

Gdyby plik został jednak usunięty, na MEGA jest pobrana aktualna (na moment opublikowania tego wpisu) wersja: https://bit.ly/3sG7mwQ

Jak usunąć pliki z poprzedniej instalacji Windows, do których nie ma dostępu

takeown /F "D:\Program Files" /A /R /D Y
icacls "D:\Program Files" /T /grant administrators:F
rd /s /q "D:\Program Files"


Źródło: https://superuser.com/a/1028115

Duolingo invitation link

Learn a language with me for free! Duolingo is fun, and proven to work. Here’s my invite link:

https://invite.duolingo.com/BDHTZTB5CWWKTLTTGES52EOL3I

List of Breakpoints in Angular Material

https://material.angular.io/cdk/layout/api

These are Breakpoints constant actual values.

When you align Justice League covers, you get amazing picture

Problem przy tworzeniu Azure Active Directory B2C

Potrzebuję katalogu Azure B2C dla mojego projektu.

Przy próbie utworzenia nowego katalogu dostaję taki błąd:

The subscription is not registered to use namespace 'Microsoft.AzureActiveDirectory'.
See https://aka.ms/rps-not-found for how to register subscriptions.

 

Rozwiązanie:

 

1. Zaloguj się do Azure
2. Otwórz konsolę
    

3. Konsola może wymagać stworzenia katalogów.
4. W konsoli wpisz:

az provider register --namespace Microsoft.AzureActiveDirectory

 

Po kilku minutach powinno zadziałać. Możesz spróbować stworzyć katalog jeszcze raz.

 

Implementing ControlValueAccessor

import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-password-input',
  templateUrl: './password-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PasswordInputComponent),
      multi: true
    }
  ]
})
export class PasswordInputComponent implements OnInit, ControlValueAccessor {
  constructor() {}
  writeValue(obj: any): void {
    this.Value = obj;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
  onChange: any = () => {};
  onTouch: any = () => {};
  disabled?: boolean;
  ngOnInit(): void {}

  /** Password value */
  public value: string;
  set Value(val) {
    // this value is updated by programmatic changes
    if (val !== undefined && this.value !== val) {
      this.value = val;
      this.onChange(val);
      this.onTouch(val);
    }
  }
  get Value(): string {
    return this.value;
  }
 }

Custom Events with Angular Elements

Created component in Angular, it has Output called selectedStep, that emits a number.

@Output() public selectedStep: EventEmitter<number> = new EventEmitter<number>();

How to write CustomEvent in plain HTML + JS page, so that it would eg. display step number to console?

<script>
// trigger this function, when event is emitted from inside custom-element
function stepChanged(e) {
  console.log('Current step: ' + e);
}

document.addEventListener("DOMContentLoaded", function() {
  // Handler when the DOM is fully loaded
  let element = document.querySelector("custom-element");
  element.addEventListener("selectedStep", event => {
    stepChanged(event.detail);
  });
});

</script>
<custom-element></custom-element>

Important to remember: 

1. addEventListener first parameter is the name of Output 
2. Emitted value is in detail property of second paramenter

TypeScript - generate random word

This method will generate random string of n-letter length with lowercase letters:

  /**
   * Generate random lowercase word
   * @param {number} length Word length
   * @returns Random n-letter word
   */
  randomWord(length: number): string {
    let result = '';
    for (let index = 0; index < length; index++) {
      // one of 26 en letters, 'a' = 97
      const ascii = Math.floor(Math.random() * 26 + 97);
      result += String.fromCharCode(ascii);
    }
    return result;
  }