hamzaerbay

/**
 * Creates and returns a debounced version of the provided function.
 * The debounced version of the function will delay the invoking of the
 * original function until after a specified number of milliseconds have
 * passed since the last time the debounced function was invoked.
 * 
 * @param {Function} callback - The function to debounce.
 * @param {number} delay - The number of milliseconds to delay invocation.
 * @returns {Function} - The debounced version of the provided function.
 */

hamzaerbay

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

// video.js player from the docs: https://github.com/videojs/video.js/blob/master/docs/guides/react.md

class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {

hamzaerbay

// Higher order Functions

// 1. Accept a function as an argument
// 2. Returns a new function

const withCount = fn => {
    let count = 0;
    return (...args) => {
        console.log(`calls count ${++count}`);
        return fn(...args);

hamzaerbay

English Study:


th sound:

    think about this thing that thing and those things

    

hamzaerbay

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()