christiannaths

==========================
How Software Companies Die
==========================
 - Orson Scott Card

The environment that nurtures creative programmers kills management and
marketing types - and vice versa.

Programming is the Great Game. It consumes you, body and soul. When
you're caught up in it, nothing else matters. When you emerge into

christiannaths

function useElementSize(): [
  (el: HTMLElement | null) => void,
  { width?: number; height?: number }
] {
  const [el, ref] = React.useState(null);
  const width = React.useSyncExternalStore(noop, () => el?.offsetWidth);
  const height = React.useSyncExternalStore(noop, () => el?.offsetHeight);

  return [ref, { width, height }];
}

christiannaths

@use "sass:string";

@function abr($string) {
  @return string.slice($string, 0, 3);
}

.grid {
  display: grid;
}

christiannaths

function getX3(p1, p2, y3) {
  let [x1, y1] = p1;
  let [x2, y2] = p2;
  let slope = (y2 - y1) / (x2 - x1);
  let dy = y3 - y1
  
  return x1 + ((1 / slope) * dy)
}

christiannaths

Firebase Hosting Version Cleanup

This is a simple utility script for cleaning up Firebase Hosting versions, leaving a specified number of versions remaining. This is primarily done to conserve storage usage, but may have other uses.

USE AT YOUR OWN RISK. NO WARRANTY IS PROVIDED. THIS SCRIPT DOES DELETE STUFF PERMANENTLY

Usage

node cleanupVersions.js [commit]

christiannaths

function w() {
  arguments[0] = { raw: arguments[0] };
  const str = String.raw(...arguments);
  return str.match(/\b(\w+)\b/gm);
}

w`this is a string of words`
// => ["this", "is", "a", "string", "of", "words"]

christiannaths

$image = $('#player_photo-preview')
$submit = $('#fake-submit')
$input = $('#player_photo')
$imageDataInput = $('#player_photo_crop_data')

form = document.forms[0]
formData = new FormData(form)

cropX = 0
cropY = 0

christiannaths

UPDATE

It looks like there is a slightly more official way to do this facebook/create-react-app#476

Besides differences with Windows, importing from a symlink seems to break Jest. So probably better to use the NODE_PATH method as described in the link above, rather than this.

---

So here's the problem, you're working in a file, let's say:

christiannaths

"scripts": {
  "build": "yarn icons:crush && yarn icons:to-jsx && yarn diagrams:crush &&  yarn diagrams:to-jsx",
  "icons:crush": "svgo --pretty --indent=2 -f ./icons/assets",
  "icons:to-jsx": "babel-node --presets=react,es2015 ./scripts/svg-to-jsx.js ./icons/assets ./icons",
  "diagrams:crush": "svgo --pretty --indent=2 -f ./diagrams/assets",
  "diagrams:to-jsx": "babel-node --presets=react,es2015 ./scripts/svg-to-jsx.js ./diagrams/assets ./diagrams"
}

christiannaths

Component Structure

Option: pre-render articles via server-side page load & pass them directly into component via props. You'd still need to wait for the JS bundle to load before users would see the list, but it would cut out an extra round-trip to your server

render(
  <ArticleFeed articles={articlesArrayProvidedFromPageLoad} />,
  document.getElementById('#article-feed-root')
);