danieljpgo

{
  // "workbench.activityBar.iconClickBehavior": "focus",
  "workbench.activityBar.location": "side", // hidden
  "workbench.colorTheme": "Min Dark",
  "workbench.editor.labelFormat": "short",
  "workbench.fontAliasing": "antialiased",
  "workbench.iconTheme": "symbols",
  "workbench.layoutControl.enabled": false,
  "workbench.productIconTheme": "icons-carbon",
  "workbench.startupEditor": "newUntitledFile",

danieljpgo

import * as React from 'react';

type FallbackProps = {
  element: React.ReactNode;
  delay?: number;
}

function Fallback(props: FallbackProps) {
  const { delay = 300, element } = props;
  const [ready, setReady] = React.useState(false);

danieljpgo

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],

danieljpgo

// Place your key bindings in this file to override the defaults
[
  {
    "key": "shift+alt+s",
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+alt+down",
    "command": "-editor.action.copyLinesDownAction",

danieljpgo

export const useSafeDispatch = dispatch => {
  const mountedRef = React.useRef(false)

  React.useLayoutEffect(() => {
    mountedRef.current = true
    return () => {
      mountedRef.current = false
    }
  }, [])

danieljpgo

function asyncReducer(state, action) {
  switch (action.type) {
    case 'pending': {
      return {...state, status: 'pending', data: null, error: null}
    }
    case 'resolved': {
      return {...state, status: 'resolved', data: action.data, error: null}
    }
    case 'rejected': {
      return {...state, status: 'rejected', data: null, error: action.error}

danieljpgo

/**
 * useLocalstorageState hook
 * @param {String} key The key to set in localStorage for this value
 * @param {any} initialState The value to use if it is not already in localStorage
 * @param {{serialize: Function, deserialize: Function}} options The serialize and deserialize
 * functions to use(defaults to JSON.stringify and JSON.parse respectively)
 */

export const useLocalStorageState = <T>(
  key: string,

danieljpgo

const breakpoints = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
} as const;

type Breakpoints = keyof typeof breakpoints;

export function useMediaQuery(query: Breakpoints) {

danieljpgo

export function useLocalStorageReducer<Data extends React.Reducer<any, any>>(
  key: string,
  reducer: Data,
  initialState: React.ReducerState<Data>,
  { serialize = JSON.stringify, deserialize = JSON.parse } = {},
) {
  const [state, dispatch] = React.useReducer(reducer, initialState, () => {
    const init = typeof initialState === 'function' ? initialState() : initialState;
    try {
      const valueInLocalStorage = window.localStorage.getItem(key);

danieljpgo

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why