ひびのログ

日々ではないけどログを出力していくブログ

Vue.js でアクセシビリティを考慮したダイアログのフォーカス移動を考えてみた

UI フレームワーク等ではすでに対応しているかもしれませんが、自分でも作ってみました。 リポジトリ github.com src/App.vue : 親コンポーネント src/components/MyDialog.vue : ダイアログ本体 サンプル https://tee-talog.github.io/vue-dialog-focus/ 背…

Mac で npm の canvas をインストールするときにハマった話

古いバージョンの canvas モジュールのインストール時に node-gyp もインストールされるが、エラーが発生してインストールできなかった。 環境 macOS Hight Sierra ( version 10.13.6 ) やりたかったこと npm install canvas@1.x.x TL;DR brew install pkg-c…

Git のチェックアウト履歴を確認する&そこから選択してチェックアウト

履歴がー……見たい! Git で直前にいたブランチに戻るのは git checkout - で出来ますが、それ以前って見ることが出来ないですよね。 でも、見たい。 そこでシェル芸ですよ シェル芸の定義以下略。 ほぼ参考 URL からのパクリですが、Mac で動かなかったりし…

YouTube でモデレーターや指定ユーザー名のチャットを強調する Chrome 拡張機能作りました

YouTube でモデレーターや指定ユーザー名のチャットを強調する Chrome 拡張機能作りました

【未解決】Nuxt.js を 2 にアップグレードしたかったけど断念した話

だめだったやり方 前準備 参考:Release v2.0.0 · nuxt/nuxt.js · GitHub まずは .nuxt node_modules yarn.lock package.lock.json を削除 node >= 10、npm >= 5 が推奨なので、それぞれアップデート。 nodist を利用しているので、 $ nodist 10.15.1 10.15.…

Cypress で立ち上がるブラウザの設定をリセットする

テストが起動しなくなった! Cypress のテストを実行しようとしたところ、下記の画面が出てテストが実行できなくなりました。 理由は明確で、Cypress で起動するブラウザの設定をリセットしたからです。 エラー画面 Whoops, we can't run your tests. This b…

転職しました

※こちらの記事は転職ドラフト体験談投稿キャンペーンに参加しています。 https://job-draft.jp/articles/251 Amazon ギフトカード 10,000 円分がほしいです! 先日転職活動をして無事に決まったので、キャンペーンに参加がてらまとめていこうと思います。 会…

ヘッダー・フッターの固定とスクロールバー

ヘッダー・フッターを固定するとき、position: fixedはやめたほうがいいんじゃないかという話。 どゆこと? どうやってんの? なにがいいの? そのいち そのに やりかた Flexbox 編 CSS Grid 編 おすすめ ソースコード おまけ どゆこと? 赤部分がヘッダー、…

is-a 関係は「イズ-ア」であって「イズ-エー」ではない!

オブジェクト指向を学ぶ上で、絶対とは言い切れないけどそこそこの確率で出てくる「is-a 関係」という単語。 これの読み方はタイトルの通り「イズ-ア」ですよ、というお話。 弊社の新人研修でも勘違いして教えている人がいたので、しっかりと正していきたい…

Bash で OS の種類を判定する

もし動作しなければ教えていただけると嬉しいです。 現状、以下のOSが判定できます。 * Mac * CentOS * Amazon Linux * Ubuntu * Cygwin (Windows) ソースコード declare OS="unsupported os" if [ "$(uname)" == 'Darwin' ]; then OS='Mac' elif [ "$(expr …