====== Frontend Development ======

  * electron-react-boilerplate
    * https://github.com/electron-react-boilerplate/electron-react-boilerplate
    * https://electron-react-boilerplate.js.org/docs/installation
    * Uses TypeScript :tada:
    * Build an Electron app with TypeScript and React
      * https://www.codiga.io/blog/build-electron-typescript-react-app/

===== React =====

  * Course
    * https://courses.joshwcomeau.com/joy-of-react/
  * Core Loop
    * https://courses.joshwcomeau.com/joy-of-react/02-state/03.01-core-react-loop
    * Mount
      * First load
      * Happens once
      * Leads to Trigger
    * Trigger
      * Something happens
      * Leads to Render
    * Render
      * Build the virtual DOM
      * Reconcile with the existing DOM to see if any changes are needed
      * Leads to Commit
    * Commit
      * Change the DOM if necessary, causing browser to re-paint the page
      * React goes idle after this until something happens that sends it back to Trigger
  * Tools
    * https://courses.joshwcomeau.com/joy-of-react/11-tools-of-the-trade

  * Event Pooling was removed in React 17
    * https://github.com/facebook/react/pull/18216
  * State as a Snapshot
    * https://react.dev/learn/state-as-a-snapshot

==== Notes ====

  * React is typically compiled to turn the JSX components into function calls
    * It is possible to use React without compiling by calling the functions directly
      * https://react.dev/reference/react/createElement#creating-an-element-without-jsx
  * Webpack bundles files together to speed up page load times
    * Also lets you import CSS (or images or whatever) in the same way you would import JS
      * https://webpack.js.org/loaders/css-loader/
    * Webpack is typically used in conjunction with compiling React
    * HTTP/2.0 doesn't replace bundling
      * https://blog.khanacademy.org/forgo-js-packaging-not-so-fast/
  * <abbr title="Block, Element, Modifier">BEM</abbr> is a systematic way of naming CSS classes
    * https://en.bem.info/methodology/quick-start/
    * Done automagically by Webpack (and consequently by React, when compiled)
  * CSS uses specificity to decide between multiple styles that have been applied to an element
    * https://css-tricks.com/specifics-on-css-specificity/
  * CSS uses ORDER OF DEFINITION (precedence) to decide between multiple styles WITH EXACTLY THE SAME SPECIFICITY
    * https://css-tricks.com/precedence-css-order-css-matters/

===== Electron =====

  * Installation
    * https://electron-react-boilerplate.js.org/docs/installation
  * Tutorial
    * https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
  * Electron does NOT support EcmaScript Modules
    * https://github.com/electron/electron/issues/21457
  * How to Notarize/Sign a macOS app
    * https://www.codiga.io/blog/notarize-sign-electron-app/

===== TypeScript =====

  * Docs
    * https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
    * https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
    * https://www.typescriptlang.org/docs/handbook/2/basic-types.html

===== Other =====

  * Prettier is the new standard JavaScript formatter
    * https://prettier.io/docs/en/install
  * Svelte is a competitor to React
    * https://svelte.dev/
    * Uses its own language that observes values directly instead of using hooks like useState