⚠️ Js IntersectionObserver example

#js #IntersectionObserver

✅Link: https://javascript.plainenglish.io/speed-up-your-javascript-proven-techniques-for-optimizing-performance-c3471f8df54f

js.reduce(): Group an array of objects by a specified property

#js #reduce

✅ Example:

function GroupBy(array, property) {
  return array.reduce((acc, obj) => {
    let key = obj[property];
    acc[key] = acc[key] || [];
    acc[key].push(obj);
    return acc;
  }, {});
}

const users = [
  { name: "Bytefer", age: 30 },
  { name: "Kakuqo", age: 28 },
  { name: "Chris", age: 28 },
];

const groupedUsers = GroupBy(users, "age");
// groupedUsers: 
// {
//  '28': [ 
//    { name: 'Kakuqo', age: 28 }, 
//    { name: 'Chris', age: 28 }
//   ],
//  '30': [ 
//    { name: 'Bytefer', age: 30 } 
//   ]
//  }

CSS rare functions, properties, and features

#css

✅Link: https://stackblitz.com/edit/js-w2yuvk?file=index.html

⚠️ Using Observables as Outputs

#angular #directive #output #fromEvent

✅ Link: https://medium.com/ngconf/using-observables-as-outputs-de40aa167e09

js.reduce(): Runs an array of promises in series

#js #reduce

js.reduce(): Serialize query parameter object

#js #reduce

✅ Example:

function StringifyQueryParam(queryParam = {}) {
  return Object.entries(queryParam)
    .reduce(
      (t, v) => 
          `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
      Object.keys(queryParam).length ? "?" : ""
    )
    .replace(/&$/, "");
}

const queryString = StringifyQueryParam({
  name: "bytefer",
  email: "bytefer@gmail.com",
});
// queryString: '?name=Bytefer&email=bytefer%40gmail.com'

js.reduce(): Deserialize query string

#js #reduce

✅ Example:

function ParseQueryString(queryString) {
  return queryString
    .replace(/(^\?)|(&$)/g, "")
    .split("&")
    .reduce((t, v) => {
      const [key, val] = v.split("=");
      t[key] = decodeURIComponent(val);
      return t;
    }, {});
}

const urlExample = "?name=Bytefer&email=bytefer%40gmail.com";
const queryParam = ParseQueryString(urlExample);
// queryParam: { name: 'Bytefer', email: 'bytefer@gmail.com' }

HTML player

#js #html #player

✅ Link: https://stackblitz.com/edit/js-capqzs?file=index.html,style.css,index.js

js.reduce(): Split array into chunks

#js #reduce

✅ Example:

function Chunk(array, size) {
  return array.reduce((acc, _, index) => {
    if (index % size === 0) acc.push(array.slice(index, index + size));
    return acc;
  }, []);
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
const arr3 = Chunk(numbers, 2);
// Output: arr3: [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7 ] ]