ginpei

import { useFocusRing } from "@react-aria/focus";
import { useListBox, useOption } from "@react-aria/listbox";
import { mergeProps } from "@react-aria/utils";
import { ListProps, ListState, useListState } from "@react-stately/list";
import { Node } from "@react-types/shared";
import { useRef } from "react";

interface ListBoxProps<T> extends ListProps<T> {
  label?: string;
}

ginpei

interface FruitMap {
  'Apple': AppleFruit;
  'Banana': BananaFruit;
}

type FruitName = keyof FruitMap;

type Fruit = FruitMap[FruitName]

interface FruitBase<Type extends FruitName> {

ginpei

type FruitTemplate<Type extends string, Props> ={ type: Type } & Props

type Fruit =
  | AppleFruit
  | BananaFruit

type AppleFruit = FruitTemplate<'Apple', {
  sliced: boolean;
  peeled: boolean;
}>

ginpei

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

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

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

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

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

JavaScript のまま TypeScript を始める

ginpei

$ firebase setup:emulators:firestore
i  firestore: downloading cloud-firestore-emulator-v1.9.0.jar... 
Progress: ===================================================> (100% of 61MB

ginpei

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

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

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

イベント詳細

日時

ginpei

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
};

ginpei

// 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,

ginpei

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