Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Xiaoyun Yang xiaoyunyang

🎯
Focusing
View GitHub Profile
View FriendStatus-FSM.js
import React, { useState } from "react";
const UiState = {
LOADING: "LOADING",
ONLINE: "ONLINE",
OFFLINE: "OFFLINE",
};
const UiStateMessageMap = {
[UiState.LOADING]: "Loading...",
View FriendStatus.js
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);
View let-v-var.js
function foo() {
let res = ''
let j = 10
for(let i=0; i<j; i++) {
// uncommenting ... the following line causes error
// var j = 5
res += `${j}, `
j -= 1
}
@xiaoyunyang
xiaoyunyang / ts-v-js.md
Created Jul 25, 2019
TypeScript vs JavaScript example
View ts-v-js.md

The example is taken from TypeScript's quick start tutorial

In JavaScript

const greeter = (person) => "hello "+person;
greeter([1,2,3]) // "hello 1,2,3"

In TypeScript

@xiaoyunyang
xiaoyunyang / TypeScriptMigration.md
Last active May 13, 2021
A guide for how to migrate your project from Flow to TypeScript
View TypeScriptMigration.md
View testingJest.md

What to Test

Testing interfaces

  • Child component with the right props
import EditProfileForm from "../feedbackForm";
import Checkbox from "../checkbox";
import EmailInput from "../EmailInput";
@xiaoyunyang
xiaoyunyang / stringTruncation.md
Last active Jun 25, 2019
String Truncation Algorithm
View stringTruncation.md

Naive

const TRUNCATE_WORDS_CUTOFF = 12;

export const truncateName = (name: string, truncateCutoff: number = TRUNCATE_WORDS_CUTOFF) =>
    name.length > truncateCutoff
        ? `${name.substring(0, truncateCutoff)}...`
        : name;
View css-grid-flowchart-readme.md

css-grid-flowchart

The visualization component takes as inputs

  • matrix - A N x M matrix where N is the number of columns and M is the number of rows. Each element of the matrix specifies the i of building block to render.
  • workflowVisData - A datastructure that represents the graph of all the workflow steps with information on how they are connected and the distance between the node and the root of the graph (assumed to be a directed acyclic graph (DAG)).

matrix is created from workflowVisData as follows:

  1. Initialize a N x M matrix. N is longest path in the DAG (workflowStepOrder is pre-calculated for each node in the graph which provides the path of the node from the root node). M is calculated from the largest frequency of workflowStepOrder. matrix is initialized with empty.
View svgo-spiral.go
package main
import (
"math/rand"
"os"
svg "github.com/ajstarks/svgo"
)
var (