DEV Community: Phinehas Alabi

obs failed to connect to any servers please check your internet connection and try again

Phinehas Alabi — Fri, 03 May 2024 02:38:32 +0000

So this was fixed by having to select the RIGHT service which in this case was Youtube -HLS

NB: Selecting Youtube - RTMPS would result in the error message below:

obs failed to connect to any servers please check your internet connection and try again

If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone'

Phinehas Alabi — Fri, 16 Jun 2023 09:38:47 +0000

This happens when you are missing name attribute

Solution
 <input [(ngModel)]="name" name="any name">

yarn cannot be loaded because running scripts is disabled on this system

Phinehas Alabi — Fri, 16 Jun 2023 09:28:46 +0000

This happens whenever you are on powershell

solution: Switch to GitBash and you should be good.

Difference between ngOnChanges vs ngOnInit in angular component

Phinehas Alabi — Sat, 10 Jun 2023 16:14:12 +0000

In simplest terms:
ngOnChange - changes on every click event made or component interaction

ngOnInit -Initializes only once upon server start
example below:
in component.ts file:
ex. app.component.ts

 private number: number = 234;
  name: string = 'Oyata';
  user = {
    name: 'Yamata',
  };

get counter() {
    return this.number;
  }
  set counter(value) {
    this.number = value;
  }
  increment() {
    this.counter++;
  }
  decrement() {
    this.counter--;
  }

Paste below code in any child component.ts file.
Based on the exmaple below I name the file child.component.ts

ngOnChanges(changes: SimpleChanges) {
    // runs before ngOnInit()
    // executes on every change
    const newNumberChange: SimpleChange = changes.myNewNumber;
    console.log(
      'Previous Value - (ng on changes): ',
      newNumberChange.previousValue
    );
    console.log(
      'Current Value - (ng on changes): ',
      newNumberChange.currentValue
    );
    this.myNewNumber = newNumberChange.currentValue;
  }
 ngOnInit() {
    // executes only one time
    // use to initialize or call functions / methods
    console.log('ngOnInit Value: ', this.myNewNumber);
  }

In the chicld.component.html, you can paste the below code:

<h2>{{ myNewNumber }}</h2>
<h2>{{ myName.name }}</h2>

In app.component.html, you can paste the below code:

<button (click)="decrement()">Subtract</button>
<div>
  <app-child [myNewNumber]="counter" [myName]="user"></app-child>
</div>
<button (click)="increment()">Add</button>

Add dark mode custom theme - @angular/material

Phinehas Alabi — Sat, 01 Apr 2023 15:00:19 +0000

Lets begin with the installation process after then properly configuring the custom dark team in our application.

ng add @angular/material 
Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
  Custom

selected Custom

? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? (y/N) y

? Set up browser animations for Angular Material? (Y/n) y

Now to use the dark theme, please follow the below syntax:

$Products-theme: mat.define-dark-theme((
  color: (
    primary: $Products-primary,
    accent: $Products-accent,
    warn: $Products-warn,
  )
));
.dark-theme{
  @include mat.all-component-themes($Products-theme);
}

EPERM: operation not permitted" when trying to save/create file on Visual Studio Code

Phinehas Alabi — Mon, 30 Jan 2023 03:20:25 +0000

Fixed:
If you are not able to open or create a file in any of the drives ex. C: or D: etc.. Just download the vs-code system installer and you could use that across any drive.

React for Beginners

Phinehas Alabi — Fri, 27 Jan 2023 14:39:28 +0000

React is JavaScript Library used for building Rich UI and helps facilitate page interactions.

some best practices in react:

you may want to close tags /> if they are empty. ex.

const output= <img src={user.someUrl} />;

keywords used throughout this post:

attr - attribute
output - displays the desired result
UI - user interface

Introducing JSX in React -
React JSX: Allows us to put HTML into JavaScript.
ex:

const firstName = "Oteele"

in our html file, we can refer to the variable name firstName in an H1 tag like below:

<h1>my name is {firstName}</h1> // Oteele

*OR try the below in your IDE of choice: *

function personName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Oteele',
  lastName: 'Ankasa'
};
const output= (
  <h1>
    Hello, {personName(user)}!
  </h1>
);

We can also specify attributes with JSX:
using quotes to specify string literals as attr.

const output= <a href="https://www.reactjs.org"> link </a>;

using curly braces to embed a JSX in an atrr.

const output= <img src={user.someUrl}></img>;

As a side note: Passing double quotes around a curly braces when embedding JSX in an attribute would not wok as expected."{}" ❌.Better to ignore adding double quotes. {} ✅

Deprecation notice: ReactDOM.render is no longer supported in React 18

Phinehas Alabi — Mon, 26 Sep 2022 05:11:22 +0000

For typescript go with the below:

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( );

Netlify 404 Page Not Found error solved

Phinehas Alabi — Sun, 04 Sep 2022 12:18:58 +0000

While in the course of working on building an app using netlify, I encountered below error message:
Page Not Found.

issue
: This was due to not referencing the exact build folder in netlify.

solution
: after running ng build, the app generated a dist folder and in that dist folder, you will find the name of your app.

So, on netlify (https://app.netlify.com/sites/app-name-goes-here/settings/deploys)

Click on edit settings and add the app name to the dist folder just like the above attachement and your build should work just
fine.

step-by-step-video: