火をつけて消えないように薪を足し続けるだけのゲームを作りました。サイトに接続している人なら誰でも薪を足したり、火をおこせます。 http://ws.pandanoir.net/ WebSocket通信をどう使っているか WebSocketは一度確立したコネクションを切断しないでそのま…

lodashというユーティリティライブラリがあります。lodashは便利な関数をたくさん提供しています。たとえば配列をシャッフルするshuffle()や、配列の差をとるdifference()などが挙げられます。 lodashは300個以上の関数を提供しています。しかし、実際に使う…

immerという、ミュータブルな操作を書く感覚でイミュータブルな操作が行えるライブラリがあります。 import {produce} from 'immer'; // 破壊的に配列をシャッフルする関数 const shuffle=(a,i=a.length,j) => {for(;[a[i],a[j]]=[a[j=0|Math.random()*i],a[…

ずっとNginxのincludeディレクティブは絶対パスをちゃんと書かないといけないと思っていましたが、どうやら--prefixで指定したディレクトリからの相対パスでも書けるようです。 $ nginx -V nginx version: nginx/1.15.10 built by gcc 4.8.5 20150623 (Red H…

この記事はWebサーバーを建てるところからWebアプリケーションを開発できるようになることを目標としています。 目次 目次 この記事の目標 [超！基本] Webページが表示されるまで HTMLとは？ JavaScriptとは？ [超!Webサーバー] Webサーバーとは？ ファイア…

Webpackだとかbabelだとか、ダサくないですか？設定してnpm run buildして…そんなことしないで済む時代が来ているんですよ！ バンドラがなぜ必要だったのか バンドラはたくさんあるファイルを1つにまとめ、依存関係を解消することが目的でした。 しかし、ES …

1から10まで、各数字を2乗して足すプログラムを考えます。 1..10 |> Enum.map(&(&1*&1)) |> Enum.reduce(&(&1+&2)) |> IO.inspect こうなります。分かりやすいですね。 それが「内包表記」だと以下のように書けます for i <- 1..10 do i*i end |> Enum.reduc…

わかりやすい(自称)です。 はじめに この記事でわかること 第一〜第五正規形+ボイスコット正規形のカンタンな説明 この記事ではわからないこと 厳密な正規形の定義 各正規形がなぜ必要なのか

基本的に人間はFの字で文を読もうとします。そのため、重要情報は縦で揃えると読みやすくなります。 最悪な点: if文を無視して読むことが出来ない Goでは以下のような構文が頻出します。 if err := hoge(); err != nil { } 次の問題をこの構文は抱えています…

JavaScript技術は10年前とは比較にならないほど膨大で緻密になっています。それらはアンテナを張っていなければ見落としてしまいます。今回はそんな技術の一端を紹介します。 紹介する技術たち Web Worker + Service Worker SharedArrayBuffer + Atomics API…

初めに言っておくと、数式が覚えられないくらい複雑なので実用性はありません。これが簡単な数式だったらまだ使えたのですがね…普通に[[0,1],[1,0],[0,-1],[-1,0]]のように地道に書いたほうが早いです。 用途としては、forループ内で配列を使わないで生成が…

graphql-goの入門記事が全く出てこなくて苦しみ悶えながらようやく理解できたので、ここに戦いの記録を残しておこうと思います。 今回の環境 今回はMongoDB+GraphQLという構成にしました。 成果物をここにまとめましたので、参照ください。 github.com Graph…

Goで書いたwebサーバーを、Nodeでテストをしています(地獄)。テストする上で、Nodeのchild_processモジュールが孫プロセスをうまくkillできずに躓きました。そこで、孫プロセスをゴリ押しでkillする方法を調べて実装してみました。 孫プロセスのPIDを取得す…

ネットワークにおいて「コネクション」という単語はよく耳にします。 「WebSocketはコネクションを確立後、ずっとそのコネクションを使う」 「ロングポーリングは返すたびにクライアントがコネクションを確立し直す」 「TCPでは3ウェイハンドシェイクでコネ…

ES2019でArray#flatMapが導入されたので、それを使ってどんな深さの配列でも1次元にする方法を紹介します。 flatMapの仕様 flatMapはmap()してからflat()するメソッドです。 [1,2,3].map(n => [n,-n]); // [[1,-1],[2,-2],[3,-3]] [[1,-1],[2,-2],[3,-3]].fl…

最近ネットワーク周りについて興味があって調べているので、その結果をまとめました。 主な話題 HTTPの最近の流れ なぜHTTP/2は高速なのか? QUICとはなにか?何を解消するのか? WebRTCとは?WebSocketとは? RESTとGraphQL、gRPC Edgeサーバー HTTP関連 HTTPの…

リーダブルコードを読む前に書いたコードを見たら、ゴミすぎて全部書き直しました。 今回はこちらのコードを書き直しました。 ひらがなからローマ字への変換可能パターンを列挙するプログラムをつくった - Panda Noir

z-indexを「なんとなく」で扱っていませんか？その結果 すべてのCSSを読まないと重なりについて理解できない 最大値を探し出さないとつぎの要素を設定できない z-index:100と設定する といったことになったこと、ありませんか？z-indexという"""災厄"""とう…

みなさん<dialog>要素を知っていますか？HTML5.2で追加された要素で、モーダルウィンドウをカンタンに実装できるステキ要素です。これをReactから使おうとしてみたのですが、Flux的なやり方ができなくて辛かったです。 …というだけの記事です。 この記事の環境 この</dialog>…

たびたび「あれ？Chromeのタブ間移動ってどうだっけ？」「同じアプリのウィンドウ間移動って？」となるので、まとめました。 Ubuntu18.04用です。 キーボードショートカット 動作 Ctrl+TAB Chromeで次のタブへ移動 Super+TAB アプリ間を移動 Alt+TAB Super+T…

あけましておめでとうございます。今年もよろしくお願いします。 去年、メールサーバ構築・独自ドメインのメールアドレス作成(4/4)～メールサーバのインストール～ - Qiitaを参考にメールサーバーの構築をしたのですが、どうもうまく行かなかくて苦戦してい…