2020 learnings

Learnings

# CSS-in-JS

## Avoid facepaint, just use object syntax.

{
  color: `blue`,
  [mq.large]: {
    color: `red`,
  },
}

# Components

## Styles on variable components (Text, Headings, etc.)

const tagStyles = {
  h1: {
    lineHeight: `1.2em`,
    fontSize: `5rem`,
    [mq.large]: {
      fontSize: `7rem`
    },
  },
  h2: {
    lineHeight: `1.4em`,
    fontSize: `4rem`,
    [mq.large]: {
      fontSize: `6rem`
    },
  }
}

<Component
  css={{
    fontFamily: `Comic Sans`,
    ...tagStyles[tag]
  }}
/>

Outlook

Improvements

# TypeScript
  - Learn more of the syntax and concepts
# React
# Lambdas
# Netlify Functions
# Reactive State Management
# State Management Concepts
# Integration testing implementations
# Concurrent Mode
# MDX plugins
  - To help with DX and ~ship~ ~pages~ ~faster~
# CI/CD workflows
  - How to optimise them
  - How to give a friendly DX on PRs

New

# UI Library
  - Learn more about what makes a good component / UI library
  - Understand what works in which context
# Babel plugins
  - Write a plugin to hoist inline objects or functions in a React component
# Error tracking and handling
  - Improve User Experience with Error Boundaries
  - Track errors in a dashboard service
# Datadog
# urql
# React Native
# expo

Avoiding

# Vue
# Angular
# Redux
# Svelte