Washington Soares washingtonsoares

Configuration to use TailwindCSS colors in a Styled Components theme with CRA + TypeScript.

Tailwind colors list: https://tailwindcss.com/docs/customizing-colors#generating-colors

Create files src/@types/styled.d.ts and src/resources/theme.ts with content below. Then add the theme on your project:

import { ThemeProvider } from 'styled-components'
import { theme } from 'resources/theme'

How to use async/await without try/catch block

We can use something like this:

async function resolveToNumber () {
  const promise = Promise.resolve(1)
  const [error, result] = await to(promise)
  console.log(error, result) // [null, 1] -> Here we have the result, and error will be null
}

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

1. Clone your fork:

git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git

2. Add remote from original repository in your forked repository:

cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream

	/* Ultra lightweight Github REST Client */
	// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
	const token = 'github-token-here'
	const githubClient = generateAPI('https://api.github.com', {
	headers: {
	'User-Agent': 'xyz',
	'Authorization': `bearer ${token}`
	}
	})

	<div id="canvas"></div>
	<style>
	#canvas {
	width: 500px;
	height: 300px;
	border: 5px solid black;
	position: relative;
	box-sizing: content-box;
	}

	import 'isomorphic-fetch';

	const run = async () => {
	const payload = {
	field: 'value'
	}

	const options = {
	method: 'POST',
	headers: {

	// One of my new favorite React Hook patternms is to create handler
	// functions for a custom hook using `React.useMemo` instead of
	// `React.useCallback`, like so:

	function useBool(initialState = false) {
	const [state, setState] = React.useState(initialState)

	// Instead of individual React.useCallbacks gathered into an object
	// Let's memoize the whole object. Then, we can destructure the
	// methods we need in our consuming component.

	// Counter Component
	import React, { useReducer, createContext } from 'react'
	import reducer, { initialState, actions } from './reducer'

	const CounterContext = createContext()

	function Counter() {
	const [state, dispatch] = useReducer(reducer, initialState)
	const { increment, decrement, reset } = actions(dispatch)

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {