A throttle is a cousin of the debounce, and they both improve the performance of web applications.

A throttle is best used when you want to handle all intermediate states but at a controlled rate.

Throttling enforces a maximum number of times a function can be called over time. As in “execute this function at most once every 100 milliseconds.”

// code from https://css-tricks.com/the-difference-between-throttling-and-debouncing/

$("body").on('scroll', _.throttle(function() {
  // Do expensive things
}, 100));

References:

• https://levelup.gitconnected.com/throttle-in-javascript-improve-your-applications-performance-984a4e020a3f
• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://highrise.digital/blog/how-to-throttle-javascript-functions/

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow.

Flux applications have three major parts: the dispatcher, the stores, and the views (React components).

When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application’s data and business logic, which updates all of the views that are affected. This works especially well with React’s declarative programming style, which allows the store to send updates without specifying how to transition views between states.

Control is inverted with stores: the stores accept updates and reconcile them as appropriate, rather than depending on something external to update its data in a consistent way. Nothing outside the store has any insight into how it manages the data for its domain, helping to keep a clear separation of concerns.

References:

• https://facebook.github.io/flux/docs/in-depth-overview/

In HTML, form elements such as input, textarea, and select typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

With a controlled component, every state mutation will have an associated handler function.

// Code from https://reactjs.org/docs/forms.html

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.

// Code from https://reactjs.org/docs/uncontrolled-components.html

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

References:

• Forms
• Uncontrolled Components

Design patterns are important to write maintainable and reusable code. A pattern is a reusable solution that can be applied to commonly occurring problems in software design

MVC is composed of three components:

Model is where the application’s data objects are stored. The model doesn’t know anything about views and controllers. When a model changes, typically it will notify its observers that a change has occurred.

View is what’s presented to the users and how users interact with the app. The view is made with HTML, CSS, JavaScript and often templates.

The controller is the decision maker and the glue between the model and view. The controller updates the view when the model changes. It also adds event listeners to the view and updates the model when the user manipulates the view.

Resources

• https://developer.chrome.com/apps/app_frameworks

Running Jekyll local server with Ruby 2.7.0 gives warnings as below,

/home/username/.rvm/gems/ruby-2.7.0/gems/jekyll-3.6.3/lib/jekyll/tags/include.rb:193: warning: Using the last argument as keyword parameters is deprecated

To suppress warnings , see comment here at Github Jekyll issue page, https://github.com/jekyll/jekyll/issues/7947#issuecomment-587935866

References:

• https://github.com/jekyll/jekyll/issues/7947