farhanjiwani/dev-notes

My collection of dev related notes for reference.

Dev Notes

This will be my collection of dev related notes which I can refer to quickly as needed.

If you come across these notes, I hope they help! Feel free to leave feedback or bug notes if you experience any.

Sections

CSS

• Selectors Explained (tool)
• CSS Modules

JavaScript

• Exception Handling in JavaScript
• Linting
• Object.is() vs. Strict Equality Operator in JavaScript

React

• Create React App From Scratch — Create your react app without relying on a pre-packaged toolchain.
• State Management with Hooks — useReducer and dispatchers

Performance

• use HTTP/2
• split vendor packages into their own bundle
  • split react components
  • webpack code splitting and dynamic imports
• Performance Tips for Background Video

Tools

• npm
  • Verdaccio — A lightweight private npm proxy registry.
• Webpack — An in-depth guide aimed for beginners.

Articles

React Articles

CSS-in-JS

• The unseen performance costs of modern CSS-in-JS libraries in React apps

Quick Reference

This section for notes that don't need their own files just yet.

React Tips

Hooks

• Thinking in React Hooks

Indeterminate Form Fields

To add the indeterminate property to the checkbox, we need to take advantage of the ref attribute:

const { value, checked, indeterminate } = this.props

return render(
  <input
    type="checkbox"
    value={value}
    checked={checked}
    ref={el => el && (el.indeterminate = indeterminate)}
  />
);

Since the ref is run on each render, the indeterminate property is updated appropriately, and thus the checkbox appears as expected.

David Walsh — React Indeterminate

npm

# .npmrc
# Force custom registry for specifically scoped packages during `npm install`
@alfatrion:registry=http://localhost:4873/