Skip to content

Instantly share code, notes, and snippets.

View 2.ts
interface FruitMap {
'Apple': AppleFruit;
'Banana': BananaFruit;
}
type FruitName = keyof FruitMap;
type Fruit = FruitMap[FruitName]
interface FruitBase<Type extends FruitName> {
View .ts
type FruitTemplate<Type extends string, Props> ={ type: Type } & Props
type Fruit =
| AppleFruit
| BananaFruit
type AppleFruit = FruitTemplate<'Apple', {
sliced: boolean;
peeled: boolean;
}>
View draggable.tsx
import React, {
CSSProperties, useCallback, useEffect, useMemo, useState, useRef,
} from 'react';
import Head from 'next/head';
import { Pos } from '../models/Length';
const DraggablePage: React.FC = () => {
const [dragging, setDragging] = useState(false);
const [from, setFrom] = useState<Pos>({ x: 0, y: 0 });
const [pointerType, setPointerType] = useState('');
@ginpei
ginpei / CounterPage.tsx
Last active May 14, 2020
Use React context with reducer
View CounterPage.tsx
import React, {
createContext, useReducer, useContext, useCallback,
} from 'react';
type CounterState = { count: number }
type CounterAction =
| { type: 'increment'; data: { amount: number } }
| { type: 'reset' }
View typescript-mok-mok.md

「JavaScript のまま TypeScript を始める」 + TypeScriptもくもく

JSConf Japan 2019 のセッション「JavaScript のまま TypeScript を始める」をまたお話します。30分。

セッションの後はもくもく会です。TypeScript を知ってる方も知らない方もお越しください。(知ってる方、別にメンターのような役割をして頂かなくても大丈夫です。お気軽に。)

どちらかだけの参加も歓迎します。

JavaScript のまま TypeScript を始める

View setup-firestore-emulator.md
$ firebase setup:emulators:firestore
i  firestore: downloading cloud-firestore-emulator-v1.9.0.jar... 
Progress: ===================================================> (100% of 61MB
View Firebase と React Router でさくさく SPA を作るハンズオン.md

Firebase と React Router でさくさく SPA を作るハンズオン

React と Firebase を組み合わせるとアプリをさくさく作れるのでおすすめです。そういう構成の一例を一緒に組み立てていきましょう。自作アプリを作りたい方向けです。

9 月のハンズオンの内容と合わせて利用すると強いかと思います。

イベント詳細

日時

View speech-on-google-home.js
const { Client, DefaultMediaReceiver } = require('castv2-client');
const googleTTS = require('google-tts-api');
const address = '192.168.1.86';
const message = {
language: undefined, // default: 'en'
body: 'Hello World!',
speed: undefined, // default: 1
timeout: undefined, // default: 1000
};
View lifx-breathe.js
// https://api.developer.lifx.com/docs/breathe-effect
(async () => {
const token = prompt('Token?');
const selector = 'all';
const url = `https://api.lifx.com/v1/lights/${selector}/effects/breathe`;
const params = {
color: 'red',
cycles: 3,
View wip-coding-note.md

Coding notes

[WIP] Component categories

TODO: find better names

The word "component" is so general that we leave it from our categories.

  • pages ... Largest components
  • organizations ... Small size components