addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

juhaelee

React + Typescript Cheatsheet

Setup

If you use atom... download & install the following packages:

• atom-typescript
• linter-tslint

What are Typescript type definition files? (*.d.ts)

sebmarkbage

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

kentcdodds

// handy method to create a Higher Order Component out of a
// Render Prop Component (like a Context.Consumer).
// handles, statics, displayName, refs, and value forwarding

function createHOCFromRenderProp({prop, Consumer}) {
  return Component => {
    function Wrapper(props, ref) {
      return (
        <Consumer>
          {value => <Component {...{...props, [prop]: value, ref}} />}

markerikson

Design Goals

reduxjs/redux#8 (comment)

The main goal of this library is to prove that Flux can be implemented in a way compatible with full hot reloading (and explore how this can be done). You can run the example code with npm start, change action creators or stores, and the new logic will kick in before you refresh.

kentcdodds

// NOTE: you will NOT write code like this when using suspense
// instead, you'll use react-cache (not yet officially published)
// it'll handle things like pre-loading, handling rapid re-renders, etc.

const cache = {}

function FetchPokemon({pokemonName}) {
  const pokemon = cache[pokemonName]
  if (!pokemon) {
    const promise = fetchPokemon(pokemonName).then(

mikowl

// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

//  Remove any duplicates from an array of primitives.
const unique = [...new Set(arr)]

// Sleep in async functions. Use: await sleep(2000).
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
// or
const sleep = util.promisify(setTimeout);

kenmori

TypeScript 練習問題集(Practice TypeScript and Playground) latest update(2020/9/21)

• author
• 【TypeScript】仕事で使える!TypeSript中級者になる為に知っておくと良い108個のこと

TypeScript and Playground練習問題集更新情報

WIP

markerikson

import React from 'react';

import Jumbotron from 'react-bootstrap/Jumbotron';
import Alert from 'react-bootstrap/Alert';
import Button from 'react-bootstrap/Button';

import { FallbackProps } from 'react-error-boundary';


interface AEFProps extends FallbackProps {