{"pageProps":{"posts":[{"content":"\nTypescript, for all its benefits, isn't the best at making its utilities well known.\n\nOne Typescript trick I wish I'd known about much sooner is [\"`const` assertions\".](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions)\n\nConst assertions, as the name implies, are a way to \"lock in\" the type of an object that you don't expect to change.\n\nBy default, if you create an object, Typescript will give fairly loose type definitions for each value:\n\n<Image alt=\"typescript metadata example\" src=\"/images/typescript-const-example-1.png\" height={165} width={305} />\n\nHowever, if you know that these values won't change, it can be more helpful to use `const` to lock in the type.\n\n<Image alt=\"typescript metadata example\" src=\"/images/typescript-const-example-2.png\" height={168} width={436} />\n\nThis does a few things:\n\n1. It makes all of the properties `readonly`, so that they can't accidentally be changed.\n2. It prevents you from doing checks that would be impossible\n\n```typescript\nconst metadata = {\n    title: \"Matt's Blog\",\n    description: 'This is a blog, I guess'\n} as const;\n\n// the following line will return:\n/*\nThis condition will always return 'false'\nsince the types '\"Matt's Blog\"' and '\"Some other title\"'\nhave no overlap.(2367)\n*/\nif (metadata.title === 'Some other title') {\n    alert('This should not be possible');\n}\n```\n","data":{"title":"Typescript Const Assertions (\"as const\"), Explained","description":null,"date":"2021-09-15","draft":true},"filePath":"typescript-as-const.mdx"},{"content":"\nIf you're an uninitiated JavaScript developer, reading through a large Typescript codebase can be intimidating.\n\nAnd unfortunately, this might scare many away from giving it a try.\n\nThe truth is that you can get a ton of benefit from using typescript without using complex types and using advanced features like generics and polymorphic types.\n\nAlmost all of the popular NPM packages you either have types included or have community-created types that are going completely unused in a regular JS codebase.\n\nWith that in mind, let's go through the \"easy wins\" you can use to get the most out of typescript.\n\n## Utilize Your Text Editor\n\n[typescript + VS Code Trojan horse image]\n\nTo get the most out of Typescript, you'll more than likely have to use VS code, which has a ton of Typescript integrations built in (since they're both made by Microsoft).\n\nThe biggest thing to use is \"intellisense\". You probably already use it, but when you write a variable and type a dot, VS code will try to autocomplete with the known methods / properties for that variable.\n\nThis can help with built-in methods (like calling .replace on a string) but also help explore methods for external libraries.\n\nAnd if you need more information about a method, you can mouse over a method or variable to see the types and possibly the documentation for the method included by the library.\n\nIf you're lucky, it might even include a link to a section of their documentation or an example.\n\nAnd if you’re writing your own functions, VS Code is really good at inferring types based on your usage.\n\n## Don’t be afraid to use “any” (at first)\n\nSomething that can easily frustrate people who start to use Typescript is defining types before you’ve finalized a function.\n\nInstead, if you’re starting to write a function and running into Typescript errors, just set the type to “any”.\n\nPersonally, I’ve found that adding types too early ends up creating more upkeep without much benefit.\n\nOnce a function or API has been settled, you can think through the types and allow them to help document your code.\n\n## When in doubt, reference other code\n\n\n\n","data":{"title":"Getting The Most out of Typescript","description":"Maximize your typechecking","date":"2020-11-26","draft":true},"filePath":"get-the-most-typescript.mdx"},{"content":"\nWIP","data":{"layout":"post","slug":"how-to-stop-worrying-and-ship-your-projects","title":"How to Stop Worrying and Ship Your Projects","date":"2020-09-30","draft":true,"description":"Lessons learned from a mountain of unfinished projects","banner":"/images/how-to-stop-worrying-and-ship-your-projects.jpg","bannerCredit":"Photo by [Brandable Box](https://unsplash.com/photos/yW9jdBmE1BY)"},"filePath":"how-to-stop-worrying-and-ship-your-projects.mdx"},{"content":"\n\nI'll start with a disclaimer: I am not the biggest fan of Redux.\n\nI think Redux has some great ideas, but it tends to overcomplicate things and create more problems than it solves.\n\nIt wasn't until I started using React's [`useReducer` hook](https://reactjs.org/docs/hooks-reference.html#usereducer) that I started to appreciate what a reducer does.\n\nAs I started using it more, I even started to realize that I hadn't fully grasped what a \"reducer\" actually _was_.\n\n> A reducer is basically a function that takes in a series of actions and an `initialState`, and then \"reduces\" them to get the current state of the application.\n\nIf this sounds familiar, it's because it's the same as the `.reduce` method for arrays:\n\n```js\nconst actions = [{\n  type: 'SIGN_IN',\n  payload: { name: 'Chidi' }\n}, {\n  type: 'SIGN_OUT'\n}]\n\nconst initialState = {\n  user: null,\n}\n\nconst currentState = actions.reduce((state, action) => {\n// to find the current state of our app\n// we take our initialState and apply all the actions on top of it\n  if (action.type === 'SIGN_IN') {\n    state = { ...state, user: { name: action.payload } }\n  }\n\n  if (action.type === 'SIGN_OUT') {\n    state = { ...state, user: null }\n  }\n\n  return state;\n// this is how we define our initial state in `.reduce`\n}, initialState);\n\n// currentState would equal { user: null }\n```\n\nHere, `currentState` would return `{ user: null }`, because even though we signed in, the last action we took was signing out.\n\nIf you've used Redux or `useReducer` before, this will look similar even though there's no actual \"reducer\" in this code.\n\nThe reason this is helpful in React is because we frequently have lots of pieces of state we need to track, and they'll often change in groups.\n\nSo instead of using 4 or 5 `useState` calls, we can use a reducer to create _actions_ that describe our different state changes.\n\nLet's start with this example of a login form:\n\n```jsx react-live\nconst { useState } = React;\nconst LoginForm = () => {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [isLoading, setIsLoading] = useState(false);\n  const [data, setData] = useState(null);\n  const [errorMessage, setErrorMessage] = useState(null);\n\n  async function handleSubmit(e) {\n    e.preventDefault();\n    // before we send the request, change loading state\n    setIsLoading(true);\n\n    try {\n      // send data to your \"API\"\n      const response = await setTimeout(() => ({ data: 'success' }), 500)\n\n      // if it's successful, set the data in state\n      setData(response.data);\n      alert('Success')\n    } catch (error) {\n      // if something goes wrong, they shouldn't get stuck in the loading state\n      setErrorMessage(error.message);\n    }\n\n    setIsLoading(false);\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      {/* we're using a fieldset here to disable all fields while the form is loading\n        https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset\n      */}\n      <fieldset disabled={isLoading}>\n        <label>\n          Email\n          <input\n            value={email}\n            onChange={e => setEmail(e.target.value)}\n          />\n        </label>\n        <label>\n          Password\n          <input\n            type=\"password\"\n            value={password}\n            onChange={e => setPassword(e.target.value)}\n          />\n        </label>\n        {errorMessage !== null && <div>{errorMessage}</div>}\n        <button type=\"submit\">Sign In</button>\n      </fieldset>\n    </form>\n  )\n}\n\nrender(<LoginForm />)\n```\n\nThis is a fairly standard component pattern for something like a login form. It includes:\n- Tracking input values and storing them in state\n- A loading state boolean to disable parts of the UI\n- Error handling and error message feedback\n\nIn its current form it works fine, but if we added one or two more fields (maybe something like a \"Stay Logged In\" checkbox), it could start to become hard to manage.\n\nInstead, we could try to rethink our component's state changes in terms of \"actions\".\n\nWhen we make a request, we could call the action something like `START_SIGN_IN`, and it would change our `isLoading` field to `true`.\n\nWhen we get data back, we could make an action called `SIGN_IN_SUCCESS`, which would set the `isLoading` field to `false` and set our `data` with our request response.\n\nLet's start by converting these \"actions\" into a reducer:\n\n```js\n// a reducer takes the current state and the next action as params\nfunction reducer(state, action) {\n  switch (action.type) {\n    // we'll use this to handle our input field changes\n    case 'HANDLE_CHANGE':\n      // this syntax allows us to dynamically declare the key on an object\n      // so for our \"email\" input, this would be { email: \"chidi@gmail.com\" }\n      return { ...state, [action.name]: action.payload };\n    // this is how we start our loading step\n    case 'START_SIGN_IN':\n      return { ...state, isLoading: true };\n    case 'SIGN_IN_SUCCESS':\n      return { ...state, isLoading: false, data: action.payload };\n    case 'SET_ERROR_MESSAGE':\n      return { ...state, isLoading: false, errorMessage: action.payload };\n    // we use this default to make sure any typos don't fail silently\n    default:\n      throw new Error(`Action ${action.type} not found`);\n  }\n}\n```\n\nNow, we can take this reducer and pass it to the React `useReducer` hook like this:\n\n```jsx\n// for our initial state, we'll use all the initial states above in our `useState()` calls\nconst initialState = {\n  email: '',\n  password: '',\n  isLoading: false,\n  data: null,\n  errorMessage: null,\n}\n\nconst LoginForm = () => {\n  // we'll use our `reducer` from above\n  const [state, dispatch] = useReducer(reducer, initialState);\n  // ...rest of the component\n}\n```\n\nNow we have a `state` object and a `dispatch` function that we can use to call our actions. So if we wanted to handle a successful sign in, we would call:\n\n```js\ndispatch({ type: 'SIGN_IN_SUCCESS', payload: data})\n```\n\nThis is telling our reducer that the action we want to use is called `SIGN_IN_SUCCESS`, and the `payload` is any additional data we need to pass to our action. In this case, it's the response we're getting from the API.\n\nNow we can change all of our `setState` calls to `dispatch` calls, and you'll see how it becomes easier to understand what's happening at each step in your app.\n\nFor example, in the `handleSubmit` function, you can read the actions like instructions. First you \"start sign in\", and if it's successful you dispatch `SIGN_IN_SUCCESS`. If something goes wrong, you set an error message.\n\nThis is not only easier for you to read, but it's _much_ easier for your coworkers to read as well. It also forces you to think about your state not as an object that's being changed, but as a \"state machine\" that's changed by actions.\n\nHere's what your final result might look like:\n\n```jsx\nconst LoginForm = () => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  const { email, password, isLoading, errorMessage } = state;\n\n  async function handleSubmit(e) {\n    e.preventDefault();\n    // before we send the request, change loading state\n    dispatch({ type: 'START_SIGN_IN' });\n\n    try {\n      // send data to your API\n      const response = await api.post('/login', { email, password })\n\n      // if it's successful, toggle the loading boolean and set the data in state\n      dispatch({ type: 'SIGN_IN_SUCCESS', payload: response.data });\n    } catch (error) {\n      // if something goes wrong, they shouldn't get stuck in the loading state\n      dispatch({ type: 'SET_ERROR', payload: error.message });\n    }\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <fieldset disabled={isLoading}>\n        <label>\n          Email\n          <input\n            value={email}\n            onChange={e =>\n              dispatch({\n                type: 'HANDLE_CHANGE',\n                name: 'email',\n                payload: e.target.value,\n              })\n            }\n          />\n        </label>\n        <label>\n          Password\n          <input\n            type=\"password\"\n            value={password}\n            onChange={e =>\n              dispatch({\n                type: 'HANDLE_CHANGE',\n                name: 'password',\n                payload: e.target.value,\n              })\n            }\n          >\n        </label>\n        {errorMessage !== null && <div>{errorMessage}</div>}\n        <button type=\"submit\">Sign In</button>\n      </fieldset>\n    </form>\n  );\n};\n```\n\nIf you want to push this even further, you could even turn this reducer into a custom hook called something like `useRequest` and use it throughout your app.","data":{"title":"Refactor Your Component's State with useReducer","description":"Create Actions to Simplify State","date":"2020-02-12"},"filePath":"refactor-with-useReducer.mdx"},{"content":"\nIf you’ve spent any amount of time configuring ESLint — the most widely used linting tool for JavaScript — you’ll know you can easily get lost in it.\n\nBut there are also formatters like Prettier, which are excellent but often fight with linters.\n\nI strongly believe that a solid linting setup con save you tons of time and catch many bugs much sooner. The first time you save a file and it auto-formats like this, you'll see how powerful it is:\n\n![GIF showing linting / formatting tools fixing code automatically](/images/autofix-example.gif)\n\nAfter much trial and error, I’ve put together and setup I use for every project and published it for easier use.\n\n### 1. Set Up Your Project\n\nMake a new directory for your linting config and run either `yarn init -y` or `npm init -y` to create a `package.json`.\n\nWhen publishing an ESLint config, all we need to export is an ESLint config object.\n\nSo let's make an `index.js` file with the following content:\n\n```js\nmodule.exports = {\n\n}\n```\n\nAnd then install ES Lint:\n\n```bash\nyarn add eslint\n# or\nnpm install --save eslint\n```\n\n### 2. Find a setup to use as a base\n\nInstead of hand-picking every linter rule, I would strongly suggest finding an existing config and [extending it.](https://eslint.org/docs/user-guide/configuring#extending-configuration-files)\n\nI would strongly recommend using React's official [eslint-config-react-app](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app#usage-outside-of-create-react-app), but if you want to find more options you can check out [this repo.](https://github.com/dustinspecker/awesome-eslint).\n\nFor many years, I was a strong advocate for the AirBNB linting config, but recently I realized I'd been turning off many of their opinionated rules.\n\nI finally removed it after reading [Dan Abramov’s](https://overreacted.io/writing-resilient-components/#marie-kondo-your-lint-config) advice on the topic:\n\n> Don’t assume that whatever you or something somebody else added to your lint config a year ago is a “best practice”. Question it and look for answers. Don’t let anyone tell you you’re not smart enough to pick your lint rules.\n\nIf you do prefer more rules, then more power to you! But if you find they're getting in your way and not helping catch bugs, it might be time to part ways.\n\nIn case you do go with a different config (and you use React), make sure to include this [jsx accessibility](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin. Even if your primary focus isn't accessibility, I believe every project should have this by default even if it the rules seem frustrating at first.\n\nOnce you have your base, update your `index.js`:\n\n```js\nmodule.exports = {\n  extends: ['react-app'] // or whatever you chose as your base config\n}\n```\n\n### 3. Add Your Formatter\n\nNow that we have our linter set up to catch code-related bugs, we're going to use [Prettier](https://prettier.io/) to consistently format our code.\n\nFirst add these packages:\n```bash\nyarn add prettier eslint-config-prettier eslint-plugin-prettier\n# or\nnpm install --save prettier eslint-config-prettier eslint-plugin-prettier\n```\n\nHere's what we've added:\n- `prettier` - Used to run the formatting\n- `eslint-config-prettier` - Turns off ESLint formatting rules that would conflict with Prettier\n- `eslint-plugin-prettier` - Allows your ESLint config to run prettier\n\nWhile the setup is a bit cumbersome, this will allow you to _just_ use ESLint to lint and format your code and keep you from having to use Prettier separately.\n\nNow, update your `index.js` again:\n\n```js\nmodule.exports = {\n  extends: [\n    'react-app', // or whatever you chose as your base config\n    'plugin:prettier/recommended', // this will stop Prettier and ESLint from fighting over fixes\n    'prettier/react', // optionally include this if you use React\n  ],\n  'plugins': ['prettier'],\n  'rules': {\n    // make Prettier return errors\n    'prettier/prettier': [\n      'error',\n      {\n        // Optional Prettier config changes\n        trailingComma: 'es5',\n        singleQuote: true,\n        printWidth: 80,\n      },\n    ],\n  }\n}\n```\n\n### 4. Publishing\n\nTo publish this config, you'll need to update a few things in your `package.json`:\n\n```js\n{\n  // must start with \"eslint-config\" for other people to include it\n  \"name\": \"eslint-config-my-cool-config\",\n  // this must be increased every time you publish\n  \"version\": \"1.0.0\",\n  // this tells node where to find the main module when it's installed\n  \"main\": \"index.js\",\n}\n```\n\nThen, make sure you have an account with [NPM](https://www.npmjs.com) and follow their guide to [publish a package](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages).\n\nOnce it's successful, you should be able to go to any Javascript project using NPM and run:\n\n```bash\nyarn add eslint-config-my-cool-config\n# or\nnpm install --save eslint-config-my-cool-config\n```\n\nAnd then extend your own config by making a `.eslintrc` file in the root of your project:\n\n```js\n{\n  // don't include the `eslint-config-` part when extending\n  \"extends\": [\"my-cool-config\"]\n}\n```\n\n### 5. Super Charge Your Text Editor\n\nIf you aren't sold on the benefits of all this setup yet, this is where you'll start to see how helpful this is.\n\nYour text editor should have an official [ESLint integration](https://eslint.org/docs/user-guide/integrations#editors), but for this example we're going to set it up in VS Code.\n\nInstall the [VSCode ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and then open the command pallette (`cmd / ctrl + shift + p`) and type `settings json` and select `Open Settings (JSON)`.\n\nAt the end of the settings JSON, add this:\n\n```js\n\"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": true\n},\n```\n\nNow when you save a file it should automatically run eslint fixes, which also include our Prettier formatting and save you hours of headache in the future.\n\nFinally, don't forget that if you end up changing your mind about any rules, you can always override them in your `.eslintrc` project's config file:\n\n```js\n{\n  // don't include the `eslint-config-` part when extending\n  \"extends\": [\"my-cool-config\"],\n  \"rules\": {\n    // 0 turns the rule off, 1 emits a console warning and 2 throws an error\n    \"overly-opinionated-rule\": 0\n  }\n}\n```\n\nOr change them in your custom config package (just remember you'll have to publish it afterward):\n\n```js\n{\n  \"extends\": [\"base-config\"],\n  \"rules\": {\n    \"overly-opinionated-rule\": 0\n  }\n}\n```","data":{"title":"Creating a Sane ESLint Config","description":"Stop wasting time fixing those semicolons and spaces","date":"2020-01-24","tags":["Programming","React"]},"filePath":"create-eslint-config.mdx"},{"content":"\nAs you start writing more in React, it's easy to lose sight of how to do things \"outside\" of React.\n\nFor example, if you had a React modal prompting the user to log in, but you wanted to be able to \"trigger\" that modal from some separate Javascript (maybe from a script tag added by an outside source), how would you do that?\n\nYou might get caught up in a React-sounding solution:\n\n```jsx\nfunction App() {\n  function openModal() {\n    // ...other code to open modal\n  }\n\n  useEffect(() => {\n    // whenever openModal changes, you can bind it to the window?\n    window.openModal = openModal;\n  }, [openModal])\n\n  // ... rest of the component\n}\n```\n\nAnd while this might work in some simpler cases, we're putting a function in the global scope and it's likely that we'll run into bugs if certain things change.\n\nInstead, we should reach for a Javascript feature designed for situations like this: [Custom Events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events).\n\n---\n\nWhen breaking down this problem, there are two main parts:\n- We want our app to \"listen\" and respond to an outside event\n- Code outside our app must be able to \"trigger\" this listener\n\nIf this sounds familiar, it's because we use the same [Observer Pattern](https://en.wikipedia.org/wiki/Observer_pattern) for HTML elements:\n\n```html\n<body>\n  <button>Alert!</button>\n  <script>\n    const button = document.querySelector('#button');\n\n    // we add our listener here, and the \"click\" event is our trigger\n    button.addEventListener('click', () => {\n      // when the even is triggered, we run this code\n      alert('Button Clicked!');\n    });\n  </script>\n</body>\n```\n\n\n\n\nhttps://codesandbox.io/s/custom-events-m95t5?view=split&fontsize=12","data":{"title":"How to Call React Code from Outside React","date":"2019-12-18","description":"Linking React and vanilla Javascript using custom events","tags":["Programming","React"]},"filePath":"calling-react-code-outside-react.mdx"},{"content":"\nAfter getting an Ender 3, my involvement in 3D printing had mostly been confined to printing things off [Thingiverse](http://thingiverse.com/).\n\nAny time I would try to model something in any sort of 3D modeling \"CAD\" (computer-aided design) software, I'd immediately get lost in the UI.\n\nWhen I was looking through some 3d models, I was curious about some that could be \"customized\" with given parameters.\n\nI found out this was mainly done with [OpenSCAD](https://www.openscad.org/). This tool allows you to use _code_ to define the objects you're designing, and let's you use loops, condition statements, parameters and functions to create models. You create customizable models by defining variables that can be altered by the user.\n\nFor example, I customized a [headphone holder](https://www.thingiverse.com/thing:3888771) for my desk at work. All I had to do was measure the depth of my desk and provide it to the [Customizer](https://www.thingiverse.com/apps/customizer).\n\nAnd this made perfect sense: When you define a 3D model as a function, any user input is just a parameter that you can use to change it.\n\nHere are the basics that I learned to model a few simple things like a marker holder and a [board game piece holder](https://www.thingiverse.com/thing:3955665) for [Pandemic Legacy](https://www.zmangames.com/en/products/pandemic-legacy-season-1/) (OpenSCAD also has a great [cheatsheet](https://www.openscad.org/cheatsheet/index.html) of their own, but it doesn't come with examples).\n\n## Basics\n\nOpenSCAD uses its own language, but if you've used any C-like languages (including Javascript, Java or any flavor of C) it should look mostly familiar.\n\n### Cube\n\nWe'll start with a simple one. The `cube` function can accept either one `integer` or an array of three integers which will be used in order for `[width, depth, height]` (all units are in millimeters).\n\n```js\ncube(3); // => this will create a 3x3x3mm cube\n```\n\n### Text\n\nText is also pretty straightforward: The first parameter is the string of text you want to render, and then the other parameters are for options like size, font and alignment.\n\n```js\ncube([50, 14, 1]);\n\ntranslate([0, 1, 1]) {\n  // this function increases the height of the text by 1\n  linear_extrude(height = 1) {\n    text(\"Hello World\", font=\"Futura\");\n  }\n}\n```\n\n![3D Modeled Text Example](/images/text_example.png)\n<br />\n\n## Functions / Operations\n\nThere are several common functions that can be used to manipulate shapes into the different models you might try to create.\n\n### Translate\n\nTranslate is mostly self-explanatory: It will move your object between the X, Y and Z axis in the 3D \"space\".\n\n```js\n// move the contents of this function 3 mm \"forward\" along the X axis\ntranslate([3, 0, 0]) {\n  cube(3)\n}\n```\n\n### Difference\n\nLet's say you wanted to create a small model to hold things in a box. To create the \"opening\", you can use the `difference()` function.\n\n`difference()` takes the first \"shape\" that's passed to it and \"removes\" all the subsequent items.\n\nSo if you had a 10x10x10mm cube, you could make a smaller box inside of it to\n\n```js\ndifference() {\n    cube(10, center=true); // this is the initial shape\n    // all items following are \"removed\" from the initial one\n\n    // so let's make a slightly smaller cube and translate it slightly to be inside the other cube\n    translate([0, 0, 2]) {\n        cube(9, center=true);\n    }\n}\n```\n\n## Putting It All Together\n\nLet's put all these ideas together with an example. We'll and make a tray that holds 18 same-sized board game pieces for the game Pandemic ([here's a link](https://www.thingiverse.com/thing:3955665) to the final result).\n\nAfter measuring the piece, I found they had these dimensions:\n\n| Dimension | Value |\n| :---: | :---: |\n| X (width): | 14mm |\n| Y (length): | 9.5mm |\n| Z (height / depth): | 12mm |\n\nTo make a bit of room for each piece, we'll round up a bit and use these dimensions for each \"space\":\n\n```js\ncube([15, 10, 13]);\n```\n\nThen we just have to \"subtract\" that space from a cube:\n\n```js\ndifference() {\n  // first we'll make the base tray, using these XYZ dimensions\n  cube([53, 70, 8]);\n\n  // we'll going to loop over 3 rows (we use 0:2 because arrays start at 0)\n  for (row=[0:2]) {\n    // and have 6 columns\n    for (column=[0:5]) {\n      // for the X axis, we're going to space the pieces 17mm apart for each row\n      // the `+ 2` for the X axis adds padding on the edges\n      // for the Y axis, we'll do the same but space them 11mm apart\n      // we keep the Z axis the same since all of the spaces will be at the same height\n      translate([row * 17 + 2, column * 11 + 2, 3]) {\n        cube([15, 10, 13]);\n      }\n    }\n  }\n}\n```\n\nHere's the end result:\n\n![Pandemic board game piece holder](https://cdn.thingiverse.com/assets/68/63/77/b6/15/featured_preview_pandemic-building-holder.stl)\n\n\n[Thingiverse Link](https://www.thingiverse.com/thing:3955665)\n\nWith some refactoring, I could make this accept variables and hold any number of different-sized board game pieces. But maybe I'll get to that another day.","data":{"layout":"post","title":"3D Modeling With Code","date":"2019-11-13","spoiler":"Making 3D Print Models For The UI-challenged","image":"img/text_example.png","draft":false,"tags":["Programming"]},"filePath":"openscad.mdx"},{"content":"\nReact Context has come a long way since its stable release almost a year and a half ago.\n\nThe [context API](https://reactjs.org/docs/context.html) is designed to allow state to be shared between components, and it's a great choice for storing things like a \"global\" setting (such as theme color) or data about the current user.\n\nNow with the release of [React hooks](https://reactjs.org/docs/hooks-intro.html), you no longer have to use the \"render prop\" pattern to access state globally.\n\nFor this example we'll say that we have a current user in an app and we want to display their name in multiple places.\n\n### Setup\n\nFirst we need to call `React.createContext()`, which will return a `Consumer` and `Provider`.\n\nA Context Provider is a component that allows all components inside of it to access the shared state. The consumer is then used to access the data from the provider.\n\nUsually it's best to put these all in their own file, so we'll call it `UserContext.js`\n\n```js\nimport React, { useState, createContext } from 'react';\n\nconst UserContext = createContext();\n```\n\nNext, we'll create a provider component we can use at the root of our app. We'll also give it some state to store the user object later, because our `UserProvider` is just another React component.\n\n```jsx\nfunction UserProvider({ children }) {\n  const [user, setUser] = useState(null);\n\n  return (\n    <UserContext.Provider\n      value={{\n        user: user,\n        setUser: setUser,\n      }}\n    >\n      {children}\n    </UserContext.Provider>\n  )\n}\n\n// you can also create this helper to avoid having to import two things to use this context\nconst useUserContext = () => {\n  useContext(UserContext);\n}\n\nexport { UserProvider, UserContext, useUserContext };\n```\n\nHere we set the value on the provider by passing it the `value` prop and giving it the data we want to make available to other components. We're also passing `setUser`, which will allow us to change the state of the provider from other components.\n\nNow in the root of our app (usually something like `App.js` or `index.js`), we can add this provider:\n\n```jsx\nimport { UserProvider } from './UserContext';\n\nconst App = () => {\n  return (\n    <UserProvider>\n      {/* all the other stuff from your app... */}\n    </UserProvider>\n  )\n}\n```\n\nSo if we had a login page where we were getting information about the current user from an API, we would want to store that in our `UserProvider`.\n\nTo do that, we use the [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) hook and pass it our `UserContext`.\n\n```jsx{3-4,11}\nimport { UserContext } from './UserContext';\nconst LoginPage = () => {\n  const context = useContext(UserContext);\n  const { setUser } = context;\n\n  const handleLogin = async () => {\n    // get some data from your API...\n    const res = { name: 'Eleven' }\n\n    // and set it to context\n    setUser(res)\n  }\n\n  // the rest of your component would go here\n}\n```\n\nSo now, if we had a navigation component that displayed the current user's name, we could do this:\n\n```jsx\nconst NavBar = () => {\n  const context = useContext(UserContext);\n  const { user } = context;\n\n  return (\n    <nav>\n      {user.name} {/* => 'Eleven' */}\n    </nav>\n  )\n}\n```","data":{"layout":"post","title":"Using React Context (Now With Hooks)","date":"2019-11-01","spoiler":"Real-world examples with Context","draft":false,"tags":["React"]},"filePath":"react-updated-context-examples.mdx"},{"content":"\nThe [release of React's 16.6](https://reactjs.org/blog/2018/10/23/react-v-16-6.html) minor version bump came with some new React tools for React developers. Since it's a only a [minor version](https://semver.org/), React teams should feel comfortable upgrading because there aren't any breaking changes -- only new features and bugfixes.\n\n## [Context Type](https://reactjs.org/docs/context.html#classcontexttype)\n\nThis is, in my opinion, the most exciting addition in 16.6.\n\nThe context API had its stable release in 16.3, but one feature it sacrificed was removing `this.context` as a way to interact with context. This feature has been missed among [developers who are uncertain if render props are the right direction](https://twitter.com/mjackson/status/1052681036709093377) to go in.\n\nWith 16.6, you can now declare a `contextType` in a component and then access `this.context` to get the context from your provider without having to pass down render props.\n\nIt's important to note that the context value is from the *closest matching Provider* above your current component in the tree.\n\nSo you'll still have to wrap your entire app (or at least your component) in your Provider, but then that provider is easily accessed with `this.context`.\n\nFor example, if you have a simple counter that's using state in a context provider, you'd previously have to do something like this to render it:\n\n```jsx\nconst VoteContext = React.createContext();\n\nconst VoteCount extends Component {\n  render() {\n    return (\n      <VoteContext.Consumer>\n        {context => (\n          <div>{context.state.count}</div>\n        )}\n      </VoteContext.Consumer>\n    )\n  }\n}\n\n```\n\nNow, you can either add `static contextType` or add `.contextType` if you aren't using static class fields.\n\n```jsx\nconst VoteContext = React.createContext();\n\nclass VoteCount extends Component {\n  static contextType = VoteContext\n  render() {\n   return (\n     <div>{this.context.state.count}</div>\n   )\n  }\n}\n```\n\nIf you want to see an example in action, I [created this CodeSandbox](https://codesandbox.io/s/n560yp5xx4) to demonstrate how to use contextType.\n\n## [Memo](https://reactjs.org/docs/react-api.html#reactmemo)\n\nAlthough the name of this new API has been met with [mixed feedback](https://twitter.com/dan_abramov/status/1054930594143109120), the Memo API is essentially a wrapper / higher-order component that provides the benefits of a [Pure Component](https://reactjs.org/docs/react-api.html#reactpurecomponent) to function components.\n\nThere's been plenty written about the [benefits of Pure Components,](https://medium.com/groww-engineering/stateless-component-vs-pure-component-d2af88a1200b). The short version is that Pure Components can provide a performance boost by preventing a component from re-rendering if the props don't change. But be warned, if you're using deeply nested data, Pure Components only do a shallow check for performance reasons, so try to limit it to simple data or use [immutable objects.](https://facebook.github.io/immutable-js/).\n\nAnyway, enough theory, let's see it in an example.\n\nLet's say you have a stateless component that just displays a user's name and avatar in the top right of a dashboard. You have a simple functional component because it doesn't need to have state, it just needs to render out its props:\n\n```jsx\nfunction UserInfo(props) {\n  const { name, avatar } = props;\n  return (\n    <div>\n      <img src={avatar} alt={`${name}'s avatar`} />\n      <span>{name}</span>\n    </div>\n  )\n}\n```\n\nNow let's say you have this component and a \"search\" input component both in the header of your site.\n\nEach time your user types into the input and changes the input of your header, `UserInfo` is going to actually trigger a re-render, even if the props for the UserInfo component don't change.\n\nIf you're already using a full React component, it'd be easy to switch over to `React.PureComponent` and remove this unnecessary render. But now with `Memo`, you can leverage that same performance boost with your functional components:\n\n```jsx\nconst UserInfoMemo = React.memo((props) => {\n const { name, avatar } = props;\n  return (\n   <div className=\"user-info\">\n     <img src={avatar} alt={`${name}'s avatar`} />\n     <span>{name}</span>\n   </div>\n  );\n});\n```\n\nI created [this quick CodeSandbox](https://codesandbox.io/s/2x5z13y4p?expanddevtools=1) to demonstrate the differences. Type into the search input and notice how `UserInfoNormal` is actually re-rendering on every keystroke, even though the props aren't changing. Compare that to `UserInfoMemo`, which is only doing one initial render and not re-rendering when the main App component's state is changing.\n\n## [React.lazy code-splitting](https://reactjs.org/docs/code-splitting.html#reactlazy)\n\nNow, just be warned, this is a feature “from the future” that’s mainly intended to set things up for the upcoming release of React Suspense. Also, this feature isn’t available for server-side rendering just yet, so don’t try and mix this into NextJS (which luckily does code-splitting by default, anyway).\n\nCode splitting tries to solve one of the trickier issues with monolithic Javascript apps: the dreaded Bundle Size.\n\n`React.lazy` allows you to only load components _when they need to be rendered._\n\nThat means when you load into any page on your React app, you don’t have to load the source code for every single other component that exists in your app.\n\nWhat this means is you can drastically increase initial loading speeds for React apps using a built-in APIs (although the React blog notes that [React-Loadable](https://github.com/jamiebuilds/react-loadable) is still a great options and currently offers server-side rendering).\n\nAlthough the benefits of this API are a bit complicated, the implementation extremely easy. Below is the example from the official React docs, since it’s fairly straightforward.\n\n```jsx\n// Before\nimport OtherComponent from './OtherComponent';\n\nfunction MyComponent() {\n  return (\n    <div>\n      <OtherComponent />\n    </div>\n  );\n}\n\n// After\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n  return (\n    <div>\n      <OtherComponent />\n    </div>\n  );\n}\n```\n\nSomething to be cautious about, however, is that when `MyComponent` is initially rendered with `React.lazy` wrapping `OtherComponent`, the inner OtherComponent will initially render nothing while it loads in the source.\n\nThe `React.lazy` docs provide a solution: Using the even newer `<Suspense />` component.\n\nI haven’t included `Suspense` in this list because it may be confused with the upcoming asynchronous [React Suspense](https://www.youtube.com/watch?v=nLF0n9SACd4) release, but for now the Suspense component can be used to provide a fallback while loading in component asynchronously.","data":{"layout":"post","title":"What's New in React 16.6 By Example","date":"2018-10-24","spoiler":"Meet Memo, Lazy, and ContextType","draft":false,"tags":["React"]},"filePath":"whats-new-react-16.6.mdx"},{"content":"\n\nReact's [context API](https://reactjs.org/docs/context.html) has been stable for about six months now (at time of writing). And while there are several [good guides](https://wesbos.com/react-context/) about the basics, I've struggled to find practical examples and suggested design patterns for Context.\n\nIn my personal usage, I've found it to be a great stand-in for state containers like Redux. Instead of having to create boilerplate for reducers, actions and stores, ultimately \"Context\" is just a component. It has state, it can have methods and it passes its state through props.\n\nFor this example, let's say we have a simple dashboard app for managing blog posts.\n\n## Setup\n\nFirst, we'll create a simple Provider and Consumer pair.\n\n```jsx\nconst StoreContext = React.createContext();\n\nclass StoreProvider extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      user: 'Me'\n    }\n  }\n\n  render() {\n    return (\n      <StoreContext.Provider\n        value={{\n          state: this.state,\n        }}\n      >\n        {this.props.children}\n      </StoreContext.Provider>\n    );\n  }\n}\n\nexport const StoreConsumer = StoreContext.Consumer;\n\nexport default StoreProvider;\n```\n\nUsing this example, you'll now have a file that exports both a provider and a consumer for your App's \"store\".\n\nIn this case, \"store\" is just referring to the parent component, which works like any other React component. You can give it a state, set the state, and create functions to make API calls and update the state.\n\nIn my experience, I find this much easier to work with than something like Redux, where you usually need reducers and actions and a lot of other boilerplate.\n\n## Basic Usage\n\nIn the root of your app, usually `index.js`, put the `StoreProvider` component as high as possible.\n\n```jsx\nclass App extends Component {\n  render() {\n    return (\n      <StoreProvider>\n        <Main />\n      </StoreProvider>\n    )\n  }\n}\n```\n\nNow, you can access your context anywhere in your app using the `StoreConsumer` and render props.\n\nFor example, if you want to display the current user in the top right it might be nested in several components.\n\nInstead of having to pass props down several levels (also called [prop drilling](https://blog.kentcdodds.com/prop-drilling-bb62e02cb691?gi=9a8599aea1be)), you can instead just use the `StoreConsumer` to access it wherever you need it.\n\n```jsx\nimport { StoreConsumer } from './StoreProvider';\n\nconst User = (props) => {\n  return (\n    <StoreConsumer>\n      {(context) => (\n        <span>{context.state.user}</span>\n      )}\n    </Storeconsumer>\n  );\n}\n```\n\n## Data Fetching\n\nInstead of having to reach for [middleware](https://github.com/redux-saga/redux-saga), async data fetching with Context works just like it would in a normal component.\n\nLet's say that we want to preserve someone's login state by checking `localStorage` for a token. If they have a valid token, then we want to fetch all their blog posts.\n\n```jsx\nclass StoreProvider extends Component {\n  state = {\n    posts: [],\n  }\n\n  async componentDidMount() {\n    const token = window.localStorage.getItem('auth-token');\n\n    if (token) {\n      const res = await axios.get('https://myapi.com/posts');\n      this.setState({\n        posts: res.data,\n      });\n    }\n  }\n\n  render() {\n    return (\n      <StoreContext.Provider\n        value={{\n          state: this.state,\n        }}\n      >\n        {this.props.children}\n      </StoreContext.Provider>\n    );\n  }\n}\n```\n\nNow, `posts` are globally available to your app. Anywhere you need to access them, you can use your consumer and access the context's state.\n\nIf you need to refetch, you can just add a method to your context component and call it in your consumer.\n\n```jsx\nclass StoreProvider extends Component {\n  {/* ...same code as above */}\n  async refetchData {\n    const res = await axios.get('https:/myapi.com/posts');\n    this.setState({ posts: res.data });\n  }\n\n  render() {\n    return (\n      <StoreContext.Provider\n        value={{\n          state: this.state,\n        }}\n        refetchData={this.refetchData}\n      >\n        {this.props.children}\n      </StoreContext.Provider>\n    );\n  }\n}\n```\n\nMake sure to pass your methods to your components as props, or else you won't be able to access your context's methods in the consumer.\n\n## Higher Order Component\n\nIf you find it clunky / messy to do the whole [render prop](https://reactjs.org/docs/render-props.html) song and dance, you can append this [higher order component](https://reactjs.org/docs/higher-order-components.html) when you export your component.\n\nThis usage is similar to how [Redux uses `connect`](https://redux.js.org/basics/usagewithreact#implementing-container-components). Basically, you're extending the component's own props with the props from the context component.\n\n```jsx\nimport { StoreConsumer } from './StoreProvider';\n\nfunction withContext(WrapperComponent) {\n  return class extends React.Component {\n    render() {\n      return (\n        <StoreConsumer>\n          {context => <WrapperComponent context={context} {...this.props} />}\n        </StoreConsumer>\n      );\n    }\n  };\n}\n```\n\nSo in your user component, you could change your export to this:\n\n```jsx\nexport default withContext(User)\n```\n\nAnd then your `User` component would have all the context passed to it in a new `context` prop:\n\n```jsx\nconst User = (props) => {\n  const { context } = this.props;\n  const { user } = context.state;\n  return (\n    <div>\n      <span>{user}</span>\n    </div>\n  );\n}\n```\n","data":{"layout":"post","title":"Practical Examples for React Context","date":"2018-10-16","spoiler":"Real-world examples, with Context","draft":false,"tags":["React"]},"filePath":"react-context-examples.mdx"},{"content":"\nIn Austin Kleon's excellent book, [Steal Like An Artist](https://austinkleon.com/steal/), he outlines 10 rules to follow to produce great creative work. While all 10 rules are absolutely worth taking to heart, we're going to focus on the one the book is named after: Steal Like an Artist.\n\nWhile the keyword of this rule, \"steal\" is mostly meant as a nod to the [Picasso quote](https://quoteinvestigator.com/2013/03/06/artists-steal/), \"Good artists copy. Great artists steal\", Kleon offers a more detailed approach to this process:\n\n\n> You should always be consuming and taking notes about work in your field, and you should collect them to help develop your own taste and preferences\n\n\nFor Web Developers, the answer should be clear: Take notes from the websites you admire. Whether that's a UI choice, a CSS style trick or a user experience feature, you should collect these snippets of other sites and think through why you like them.\n\nOne of my first \"Ah, ha!\" moments as a web developer was when I was trying to make my first mobile hamburger menu for a client. I ended up making an ugly, peeling-downward hamburger menu that looked awkward and would paritally obscure text while it was unrolling.\n\nSince I'm not a web designer myself, I turned to people who knew better than me: AirBNB. I checked their mobile site, and found an incredibly smooth slide-down hamburger menu. I inspected the menu, and found these glorious lines of CSS that I've used for many other projects:\n\n```css\ntransform: translateY(0px);\ntransition: transform 304ms ease-out;\n```\n\nIt was a simple approach, but I had no idea something like this could be so easy with CSS. All I had to do was apply a toggling \"menu-active\" class with some JavaScript and give my menu an initial value like `transform: translateY(-100%)`.\n\n![poster-8-500x666](/images/steal-like-an-artist.gif)\n\nFrom this snippet, I also created some horizontal hamburger menus by using `translateX` instead of `translateY`. By reworking this clever bit of CSS, I was able to create solutions for several different mobile menus.\n\nNow whenever I see something I like on a site, I'll save it as a [Gist](https://gist.github.com/) for personal reference. And then next time I think \"I need a mobile menu animation...\", I have a toolbox full of snippets I can refer to.\n\nFor the more design-challenged developers (myself included), it's a huge relief to have a backlog of styling snippets at your disposal, especially when they were likely created by more experienced designers / developers.","data":{"layout":"post","title":"Steal (CSS Styles) Like An Artist","date":"2018-10-08","spoiler":"Taking Notes From Sites That Know Better","draft":false,"tags":["Design"]},"filePath":"steal-css-styles-like-an-artist.mdx"}]},"__N_SSG":true}