mike-at-redspace

import React, { useState } from 'react'
import useScript from './useScript'
import useFirstInteraction from './useFirstInteraction'

const App = () => {
  const [{ loaded, error }, triggerScript] = useScript('<url-to-script>')

  useFirstInteraction(() => {
    triggerScript()
  }, 5)

mike-at-redspace

import React, { lazy, Suspense } from 'react'
import useIntersectionObserver from './useIntersectionObserver'

const AboveTheFold = () => (
  <div>
    <h1>This is the AboveTheFold content</h1>
    <p>It will be rendered immediately when the page loads</p>
  </div>
)

mike-at-redspace

function ResultsChart({ votes }) {
  // Use a charting library or create your own chart component
  return (
    <div>
      <h2>Results:</h2>
      <p>Option 1: {votes.option1}</p>
      <p>Option 2: {votes.option2}</p>
      <p>Option 3: {votes.option3}</p>
    </div>
  );

mike-at-redspace

import sha256 from 'crypto-js/sha256';
import Regl from 'regl';

const signals = {
  pixelRatio: window.devicePixelRatio || 1,
  userAgent: window.navigator.userAgent,
  language: window.navigator.language,
  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
  screenWidth: window.screen.width,
  screenHeight: window.screen.height,

mike-at-redspace

npm install express body-parser jsonwebtoken node-localstorage express-rate-limit

mike-at-redspace

const http = require('http');
const { Worker } = require('worker_threads');

const slowApiEndpoint = 'https://api.example.com/slow-endpoint';

http.createServer((req, res) => {
  if (req.url === '/api-data') {
    const worker = new Worker('./slow-api-worker.js');
    worker.on('message', (data) => {
      res.writeHead(200, { 'Content-Type': 'application/json' });

mike-at-redspace

const bubbleSortObjects = (arr, key) => {
  let swapped
  const swap = i => {
    ;[arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]
    swapped = true
  }
  do {
    swapped = false
    for (let i = 0; i < arr.length - 1; i++) {
      const a = arr[i][key]

mike-at-redspace

import useRememberState from './useRememberState';

const MyComponent = () => {
  const [value, setValue] = useRememberState('myKey', 'defaultValue');

  const handleChange = event => {
    setValue(event.target.value);
  };

  return (

mike-at-redspace

Scaled Agile Framework Cheatsheet

What is SAFe 6.0?

• SAFe 6.0 is the latest version of the Scaled Agile Framework, a knowledge base of proven, integrated principles, practices, and competencies for achieving business agility using Lean, Agile, and DevOps .
• SAFe 6.0 helps enterprises thrive in the digital age by delivering innovative products and services faster, more predictably, and with higher quality.
• SAFe 6.0 provides guidance on how businesses and employees can grow and respond to change.
• What's new in SAFe 6.0?
  • SAFe 6.0 introduces seven core competencies of Business Agility: Customer Centricity, Enterprise Solution Delivery, Agile Product Delivery, Team and Technical Agility, Organizational Agility, Continuous Learning Culture, and Lean-Agile Leadership.
• SAFe 6.0 incorporates the Objectives and Key Results (OKR) methodology to align strategic goals with day-to-day operations and track progress towards achieving those objectives.

mike-at-redspace

import React from 'react';
import styled from '@emotion/styled';

const Loader = styled.div`
  position: relative;
`;

const Flex = styled.div`
  display: flex;
  flex-wrap: nowrap;