ginpei

import React, {
  createContext, useReducer, useContext, useCallback,
} from 'react';

type CounterState = { count: number }

type CounterAction =
  | { type: 'increment'; data: { amount: number } }
  | { type: 'reset' }

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

ginpei

const WebSocket = require('ws');

let numClients = 0;

// start server
// https://github.com/websockets/ws
const wss = new WebSocket.Server({
  port: 8080,
  perMessageDeflate: {
    zlibDeflateOptions: { // See zlib defaults.

ginpei

Object.entries(Array.from(document.querySelectorAll('*'))
.reduce((list, el) => {
  const styles = window.getComputedStyle(el);
  Object.values(styles).forEach((prop) => {
    const value = styles[prop];
    if (prop.toLowerCase().includes('color')) {
      (value.match(/rgba?\(\d+, \d+, \d+(, \d+(.\d+)?\))?/g) || [])
        .map(s => (s.match(/\d+(.\d+)?/g) || []).join(', '))
        .forEach((color) => {
          if (!(color in list)) {

ginpei

((document, limit) => {
  const data = Array.from(document.querySelectorAll('*'))
    .map((el) => ({zIndex: Number(getComputedStyle(el).zIndex), element: el }))
    .filter(({ zIndex }) => !isNaN(zIndex))
    .sort((r1, r2) => r2.zIndex - r1.zIndex)
    .slice(0, limit);
  console.table(data);
})(document, 50);