※スマホ対応はしてません。

CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。

カテゴリー: CSS

というわけでお探しの完全理解はこちらです。

スマホでも存分にご理解頂けます。

見た目

こんな感じ。

この動画だけでも十分理解できそう。

matrix() とは

動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。

(さらに…)

matchMedia() でPWAとして稼働中か調べられる。

カテゴリー: JavaScript

Chrome for Windows v70でPWA動くようになるぞという話を受けて試してみようとして動かなくて調べてる途中でたまたま見つけたんだけど。

if (window.matchMedia('(display-mode: standalone)').matches) {
    // do things here
    // set a variable to be used when calling something
    // e.g. call Google Analytics to track standalone use
}

こんな感じでインストール済みかどうか判断できるようです。手元のChrome, Firefox for Androidで試したら動いた。

standalone のところは manifest.json の display に依る。はず。

参考

Nuxt 1→2にしたらpug-loaderからpug-plain-loaderに変わったっぽい。

カテゴリー: JavaScript

結論

入れ替えましょう。

$ yarn remove pug-loader
$ yarn add pug-plain-loader

日記

Nuxt.jsのバージョンを1.4.0から2.1.0へ上げたら、 yarn dev で文句言われるようになった。

 Cannot find module './index.vue?vue&type=template&id=2a183b29&scoped=true&lang=pug&' 

エラー内容が謎すぎる。

諸事情により yarn build を試したところ、こっちは分かりやすいエラーが出てきてくれた。

ERROR in ./components/FooBar.vue
Module not found: Error: Can't resolve 'pug-plain-loader' in '/mnt/c/Users/ginpei/projects/sugoi-yatsu'
 @ ./components/FooBar.vue 1:0-105 10:2-8 11:2-17
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/AnalogClock.vue?vue&type=script&lang=js&
...

リリースノートの移行ガイドには載ってないけど、プリプロセッサを使うには?の最後の方にこうある。

これらのプリプロセッサを使うために Webpack のローダーをインストールする必要があります。

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader

追っかけてないのでいつ変わったのか、なんで変わったのか知らないんだけど、 pug-loader ではないらしい。

試してみたら1系最新の1.4.2では pug-loader で動いて、2系最初の2.0.0では pug-plain-loader が必要だった。へー。

というわけで冒頭の結論の通り入れ替えて動きました。めでたし、めでたし。

@ ts-checkを付けると、VS Codeが普通のJavaScriptもTypeScript扱いで見てくれるんだって。

カテゴリー: JavaScript

// @ts-check を書くと、JSファイルでもTSとしてvalidateしてくれるそうです。

(@tsのひとごめん。)

DOMノードどーすんの問題

引数もらって計算して結果を返すだけの関数ってならこれすげー便利で良いんだけど、 querySelector() 使うと対応が面倒な感じになる。これどうしたら良いかなあ。というかTSでもよく分からないや……。

const input = document.querySelecter('input#the-input');
console.log(input!.value); // -> Property 'value' does not exist on type 'Element'.

querySelecter() が返すのは Element 型なので、 <input> 用のプロパティが定義されていない。

一応、解決策としては instanceof で確認してやることで型が固定します。

const input = document.querySelecter('input#the-input');
if (!(input instanceof HTMLInputElement)) { return; }
console.log(input!.value);

ついでに null チェックもできて一石二鳥ではある。

JSじゃなくてTSの場合はジェネリクス <T> で書ける。

const input = document.querySelector<HTMLInputElement>('input#the-input')!;
input.value = 'Hello World!';

ただしこの場合は null の確認が必要。(これ↑は ! ですっ飛ばした。)

なんかもっと楽々書けないかなあ。そもそもReactやVueが全盛期の現代で querySelector() 自体をあんまり使わないか……。

Ruby on RailsをDockerで始めるサンプルとチュートリアルを書いたよ。

カテゴリー: Ruby on Rails

書いたぞ。

日本語版の方をセルフ転載します。最新版はGitHub↑のほうで。

関連:


→English

DockerでRailsアプリを作ったり動かしたりするサンプルとチュートリアルです。

Windowsの方

コマンドプロンプトやPowerShell入力時、 `pwd` を %CD% に置き換えてください。

じゃないと例えばこんな感じのエラーになります。

docker: Error response from daemon: create `pwd`/app: “pwd/app” includes invalid characters for a local volume name, only “[a-zA-Z0-9][a-zA-Z0-9_.-]” are allowed. If you intended to pass a host directory, use absolute path.

準備

事前に以下が必要です。

  • Dockerインストール

このサンプルを試す

あるいは既存プロジェクトに参加する例。

  1. リポジトリをクローン
  2. Dockerコンテナーを起動
  3. DBを初期化
  4. いえーい
  5. 止める

    (さらに…)