Angular Trips

 

6 Ways to Communicate Between Components in Angular

https://javascript.plainenglish.io/angular-component-communication-81e5e02c6cbe

NgRx

--------

https://ngrx.io/guide/store

React Best practices

React Best practices

https://devsmitra.medium.com/react-best-practices-and-patterns-to-reduce-code-3170f1913b26 

https://devsmitra.medium.com/react-best-practices-and-patterns-to-reduce-code-part-2-rahul-sharma-devsmitra-9186115880b5

https://devsmitra.medium.com/react-best-practices-and-patterns-to-reduce-code-part-3-543b8cef9954

3 React Component Design Patterns You Should Know About

https://medium.com/stackanatomy/3-react-component-design-patterns-you-should-know-about-3f1f48046da4

20 GitHub Repositories to Become a React Master

https://medium.com/@martinageradams/20-github-repositories-to-become-a-react-master-%EF%B8%8F-b91fb3bdd6c8

Javascript cheat sheet

Typescript cheat sheet

https://devsmitra.medium.com/13-typescript-utility-a-cheat-sheet-for-developer-9dfd23cb1bbc

Javascript short functions

https://devsmitra.medium.com/javascript-short-reusable-functions-everyone-will-always-need-10b15f3fa8ca

Javascript quick functions

https://devsmitra.github.io/javascript-quick-functions/#regular-function

Javascript one liners

 

Shuffle Array

While using algorithms that require some degree of randomization, you will often find shuffling arrays quite a necessary skill. The following snippet shuffles an array in place with O(n log n) complexity.

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);// Testing
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr));

Copy to Clipboard

In web apps, copy to clipboard is rapidly rising in popularity due to its convenience for the user.

const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);// Testing
copyToClipboard("Hello World!");

Javascript tips and tricks

 Tips & Tricks

1. Abonden the bootstrap

https://betterprogramming.pub/3-reasons-to-abandon-bootstrap-in-2021-aa71bbc1af14

1. Conditionally Add Properties to Object

const condition = true;

const person = {

  id: 1,

  name: 'John Doe',

  ...(condition && { age: 16 }),

};

4. The Keyword in

const user = {

  name: "Mehdi",

  age: 19,

}

if("age" in user){

  console.log("Age is available in the user object.");

}

//Age is available in the user object.

"name" in user; //true

"text" in user; //false

if("text" in user){

  console.log("text is available");

}

//undefined.

5. Nullish Coalescing, ?? Operator

const foo = null ?? 'Hello';

console.log(foo); // returns 'Hello'

const bar = 'Not null' ?? 'Hello';

console.log(bar); // returns 'Not null'

const baz = 0 ?? 'Hello';

console.log(baz); // returns 0

with OR

const cannotBeZero = 0 || 5;

console.log(cannotBeZero); // returns 5

const canBeZero = 0 ?? 5;

console.log(canBeZero); // returns 0

9. Check Falsy Values in an Array

const myArray = [null, false, 'Hello', undefined, 0];

// filter falsy values

const filtered = myArray.filter(Boolean);

console.log(filtered); // returns ['Hello']

// check if at least one value is truthy

const anyTruthy = myArray.some(Boolean);

console.log(anyTruthy); // returns true

// check if all values are truthy

const allTruthy = myArray.every(Boolean);

console.log(allTruthy); // returns false

5. Dynamic properties

const dynamic = 'name'

const person = {

    age: 33,

    [dynamic]: 'John'

}

const dynamic = 'name'

const person = {

    age: 33,

    [dynamic]: 'John',

    [`interpolated-${dynamic}`]: true

}

const dynamic = 'name'

let person = {

    age: 33,

}

person[dynamic] = 'John'

8. Unique array values

const numbers = [1, 2, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7, 7]

const unique_numbers = [...new Set(numbers)]

console.log(unique_numbers); // [1, 2, 3, 4, 5, 6, 7]

CSS Tricks

 CSS Tricks

Grids by example

https://gridbyexample.com/examples/

CSS Grid

https://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example

External links

a[href*="//"]:not([href*="yourwebsite.com"]) {

  /* Apply style here */

}

6. Styling optional and required input elements

input:optional {

  border: 1px solid black;

}

input:required {

  border: 1px dashed red;

}

7. Comma-separated list with css

ul > li:not(:last-child):after { 

  content: “, “; 

}

CSS Tricks including the dynamic vars

https://betterprogramming.pub/22-css-tricks-that-can-make-you-a-layout-ninja-452847fba639

Flexbox

https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/

https://www.freecodecamp.org/news/how-to-create-an-interactive-flex-layout-designer-in-javascript-54863b837b5/