JS Performance: Secrets to Reducing DOM Operations π
β³οΈ When we change the DOM, the browser must redraw the page, which can be slow and time-consuming. By reducing the number of DOM operations, we can keep page redrawing to a minimum, improving code performance.
#js
β Link: https://medium.com/front-end-weekly/boost-your-javascript-performance-secrets-to-reducing-dom-operations-4160162bd952
β³οΈ When we change the DOM, the browser must redraw the page, which can be slow and time-consuming. By reducing the number of DOM operations, we can keep page redrawing to a minimum, improving code performance.
#js
β Link: https://medium.com/front-end-weekly/boost-your-javascript-performance-secrets-to-reducing-dom-operations-4160162bd952
Angular theming using Dynamically Load CSS
#angular #theme
β οΈ To see the effect, compile the app with ng build.
β Link: https://medium.com/@piyalidas.it/angular-theme-integration-using-dynamically-load-css-1617147799bf
#angular #theme
β οΈ To see the effect, compile the app with ng build.
βstartβ: βnpm run build && ng serveβ
β Link: https://medium.com/@piyalidas.it/angular-theme-integration-using-dynamically-load-css-1617147799bf
β οΈ
#angular #guard #createUrlTreeFromSnapshot
π© > Angular 15
β Link: https://blog.herodevs.com/functional-router-guards-in-angular-15-open-the-door-to-happier-code-4a53bb60f78a
createUrlTreeFromSnapshot using in Angular#angular #guard #createUrlTreeFromSnapshot
π© > Angular 15
β Link: https://blog.herodevs.com/functional-router-guards-in-angular-15-open-the-door-to-happier-code-4a53bb60f78a
Unsubscribe observables using the Directive Composition API
#angular #directive
π© > Angular 15
β Link: https://medium.com/@lucasousi/unsubscribe-observables-like-a-pro-using-the-angular-directive-composition-api-78438408a9ff
#angular #directive
π© > Angular 15
β Link: https://medium.com/@lucasousi/unsubscribe-observables-like-a-pro-using-the-angular-directive-composition-api-78438408a9ff
CSS rare properties
#css #textStroke
β Link: https://medium.com/@flemming.dierlamm/7-useful-css-tricks-ebe599185db
#css #textStroke
β Link: https://medium.com/@flemming.dierlamm/7-useful-css-tricks-ebe599185db
ngComponentOutlet using in Angular#angular #ngComponentOutlet
β Link: https://ankit-kaushik.medium.com/component-switching-dynamically-using-lazy-loading-in-angular-templates-81f026e4b148
CSS Nesting is now available
#css
β Link: https://medium.com/codex/css-nesting-is-now-available-with-vanilla-css-e12f29fe16e7
#css
β Link: https://medium.com/codex/css-nesting-is-now-available-with-vanilla-css-e12f29fe16e7
β οΈ RequestAnimationFrame instead of setTimeout or setInterval
#js #requestAnimationFrame
β Link: https://javascript.plainenglish.io/speed-up-your-javascript-proven-techniques-for-optimizing-performance-c3471f8df54f
#js #requestAnimationFrame
β Link: https://javascript.plainenglish.io/speed-up-your-javascript-proven-techniques-for-optimizing-performance-c3471f8df54f
π1
Memoization in JavaScript
#js
β Link: https://nickychristensen.medium.com/memoization-in-javascript-53db416e0ee3
#js
β Link: https://nickychristensen.medium.com/memoization-in-javascript-53db416e0ee3
π1
tapResponse operator#rxjs #ngrx #tapResponse
β Link: https://itnext.io/angular-for-junior-developers-dangers-and-treasures-of-rxjs-97106873823d
π2
β οΈ Js IntersectionObserver example
#js #IntersectionObserver
β Link: https://javascript.plainenglish.io/speed-up-your-javascript-proven-techniques-for-optimizing-performance-c3471f8df54f
#js #IntersectionObserver
β Link: https://javascript.plainenglish.io/speed-up-your-javascript-proven-techniques-for-optimizing-performance-c3471f8df54f
π1
js.reduce(): Group an array of objects by a specified property
#js #reduce
β Example:
#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 }
// ]
// }π1
Custom
#rxjs #custom
β Link: https://medium.com/@amusedshadow/own-changedetection-rxjs-operator-alternative-of-async-pipe-b53ebb3daa4d
changeDetectOperator operator#rxjs #custom
β Link: https://medium.com/@amusedshadow/own-changedetection-rxjs-operator-alternative-of-async-pipe-b53ebb3daa4d