xiaoyunyang

Naive

const TRUNCATE_WORDS_CUTOFF = 12;

export const truncateName = (name: string, truncateCutoff: number = TRUNCATE_WORDS_CUTOFF) =>
    name.length > truncateCutoff
        ? `${name.substring(0, truncateCutoff)}...`
        : name;

xiaoyunyang

Instead of always running source .env before running yarn, you can add your dev secrets like NPM_TOKEN or OPEN_AI_API_KEY to a global dev environmental variable file on your machine (e.g. dev.env) then add this to your .bashrc to source it on startup:

# dev.env
export NPM_TOKEN=<create one in npm settings>

# bashrc
source ~/dev.env

xiaoyunyang

Bundle Recommendation

• Bundle Recommendation
  • Overview and Goals
    • Background
    • Goals
      • User Story
      • Sub-problems
    • Non-Goals
• De-scoped

xiaoyunyang

Comments App

• Comments App
  • Overview and Goals
    • Background
    • User Story
    • Goals
    • Non-Goals
    • Pagination
• Frontend trigger for deleting all the comments

xiaoyunyang

What is nvm?

nvm is a version manager for node.js which lets you easily switch between different node versions. You can define an .nvmrc file in your node project which enforces the node version standardization with your codebase collaborators.

Install NVM

Install

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

xiaoyunyang

import React from 'react';
import PropTypes from 'prop-types';
import { CompositeDecorator, convertFromRaw, Editor, EditorState } from 'draft-js';

// Following code based on:
// https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/link.html
const Link = (props) => {
  const {url} = props.contentState.getEntity(props.entityKey).getData();
  return (
    <a rel="nofollow noreferrer" href={url} target="_blank">

xiaoyunyang

Flow to TypeScript Migration

Helpful Migration Guides:

• Migrating a Babel Project to TypeScript

Phase 1: Configure Project to use TypeScript

Delete Flow-related files

xiaoyunyang

var incrementUntil = function(max) { 
   if(num >= max) return num 
   num++
   incrementUntil(max)
}
 
var num = 0
incrementUntil(3)
num //> 3

xiaoyunyang

import React, { useState } from "react";

const UiState = {
  LOADING: "LOADING",
  ONLINE: "ONLINE",
  OFFLINE: "OFFLINE",
};

const UiStateMessageMap = {
  [UiState.LOADING]: "Loading...",

xiaoyunyang

import React, { useState } from "react";

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);