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

カテゴリー: Web

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() 自体をあんまり使わないか……。

DevToolsでz-index一覧できるやつ作ったよ。

カテゴリー: JavaScript

Chrome用とFirefox用です。

Download from Chrome Web Store Download Firefox add-ons

GitHubでソースコード公開してます。

見た目

Chrome版。

Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。

はじまり

コードスニペット版。これはこれで手軽でよろしいね。

Chrome版について

Elementsパネル内に “z-index” ペインを追加し、一覧を表示します。セレクターをクリックすると要素を選択するので、スタイルの詳細を確認できます。

ツールバーに追加されるアイコンはいらないので、右クリックから非表示にするのが良いと思います。

最初から出さないやり方もあるのかな。

Firefox版について

DevToolsに “z-index” パネルを追加し、一覧を表示します。セレクターをクリックするとInspector (Elements) パネルへ移動し要素を選択するので、スタイルの詳細を確認できます。たまに時間がかかることがあるけどよくわからない。

パネル vs ペイン

本当はChrome同様Elementsパネル内に表示したかったけど、できなかったので独立パネルになってます。

できなかった理由は二つあって、まず第一にペインにHTMLを追加するAPI setPage() がなかったこと。自由な項目が設置できない。

第二には、でもまあ見た目はアレだけどあんま気にしないにしよう思って、オブジェクトを表示する setExpression() を試した。ところが、これなんか中身が長いときにはみ出してスクロールもしないので、上位数件しか見えないっていう……。

setExpression() で出力した例。スクロールせず、全体を見ることができない。

何か良いやり方があれば教えてください。

今後の予定

更新の予定はないけど、脳内の構想としてはこんな感じ。

  • 要素をセレクターだけで検索するので、同じセレクターが複数あるとき選択が不正確なのを修正
  • スタックコンテキストとかも表示
  • style 属性で指定されている場合セレクターに反映
  • その場で z-index を更新してプレビュー(ElementsパネルのStylesペインみたいな)
  • アイコンとかそこら辺をアレする

気が向いたらやる感じです。欲しい機能あれば言ってくれると気が向いてくるかもしれません。

z-indexを減らそう!

ちゃんと設計してれば2桁もあれば相当余るはずなので、むやみに z-index: 999999 とか z-index: 2147483647 とかやめましょう。

よしCodeGridを読もう!

あとGitHubのほうでスターください!