cheapsteak

On reusable components API design

Let’s compare the different ways Space Kit’s is implemented vs Chakra’s .

Starting with the base case:

cheapsteak

import { useCallback, useRef, useState } from "react";

export const cancelledSymbol = Symbol("Cancelled");

export function usePromptState<
  PromptResults,
  PromptFunction extends Function = () => void
>({ stableOnPrompt }: { stableOnPrompt?: PromptFunction } = {}) {
  const [isOpen, setIsOpen] = useState<boolean>(false);

cheapsteak

const _ = require("lodash");
const got = require("got");

const getHourlyForecast = async () => {
  const { body } = await got("https://api.climacell.co/v3/weather/forecast/hourly", {
    method: "GET",
    searchParams: {
      lat: process.env.LAT,
      lon: process.env.LON,
      unit_system: "si",

cheapsteak

const netlifyHost = 'my-app.netlify.app';

const shouldAllowCORS = (origin) => {
  if (/http\:\/\/localhost:/.test(origin)) {
    return true;
  }
  if (origin === (`https://${netlifyHost}`) || (new RegExp(`--${netlifyHost.replace(/\./g, '\.')}`)).test(origin)) {
    return true;
  }
  return false;

cheapsteak

import React from 'react';

// Create the hook that contains state as you normally would, don't worry about context
// Note that this is _not_ exported
const useSomeState = () => {
  const [someState, setSomeState] = React.useState();
  return {
    someState,
    setSomeState,
  };

cheapsteak

• Precedence doesn't work as you'd expect (twin.macro and twind solve this)

 const SomeComponent = ({ className }) =>
   <div className={classnames('bg-red', className)} />

 <SomeComponent className="bg-blue"/>

What background color will the component have? The div will end up with class="bg-red bg-blue", so precedence depends on whether the specifiers for .bg-red was generated before or after specifiers for .bg-blue in the css file

• variants conflicting because you have to specify their order globally in the config, not case-by-case - @JonasKuske (twin.macro and twind solve this)

cheapsteak

This is for people who is bothered by unclean git histories, but find interactive rebasing bothersome

https://twitter.com/acdlite/status/961416646844825600

cheapsteak

AWS

Strengths

• Most popular / "Safest" option
• 1 year free trial
• Elastic Beanstalk auto scaling
• Good platform to learn / have on resume

Weaknesses

• Time cost from initial configs (including Elastic Beanstalk scaling options, CloudWatch billing alerts)

cheapsteak

Play around with this for ~3 minutes
https://codepen.io/guyroutledge/full/hgpez/
Take note of the css values on the bottom left

Skim this for ~5 minutes
https://css-tricks.com/the-css-box-model/
Don’t have to worry about understanding everything. Keep a mental index of what things exist and refer back here when you need it

Ditto with this, skim for ~5 minutes
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

cheapsteak

(function(module) {
try {
  module = angular.module('templates');
} catch (e) {
  module = angular.module('templates', []);
}
module.run(['$templateCache', function($templateCache) {
  $templateCache.put('404/templates/404.html',
    '<div class="container-fluid text-center not-found"><h1 data-translate="">Page Not Found</h1><p data-translate="">You have searched for something that doesn\'t exist!</p><a href="/">Go back to the home page.</a></div>');
}]);