tmegos blog

Web developer

Material UIにてダイアログ内の入力欄がソフトウェアキーボードに隠れる問題を解決するための1つの方法

Material UI React iOS

現象

  • Material UIでダイアログ内にautoFocusを有効にした入力欄がある場合、iOSで入力欄がソフトウェアキーボードに隠れる

f:id:tmegos:20200510094852p:plain:w300

github.com

対策

ダイアログのtransitionを無効にすると、ソフトウェアキーボードが出たタイミングでスクロールされて入力欄が隠れなくなります
ex: transitionDuration={{ enter: 0 }}

既知の問題

  • ダイアログを開いた後、bodyがスクロールされたままになる
続きを読む

alpineにperfをインストールする

alpine Node.js

Node.jsのパフォーマンスを測定するために、perfをインストールしたときのメモ

nodejs.org

環境

  • node:12.16.2-alpine

方法

/etc/apk/repositories に以下のリポジトリを追加

http://dl-cdn.alpinelinux.org/alpine/edge/main # elfutils-devの0.179-r0を入れるため
http://dl-cdn.alpinelinux.org/alpine/edge/testing # perfを入れるため

apkで依存関係とperfをインストールします

$ sudo apk add elfutils-dev=0.179-r0 perf

続きを読む

Web向けのプロジェクトに混入した@types/nodeをany化する

TypeScript

現象

Web向けのプロジェクトにNode.jsの型が混入し、setTimeoutなどの型が壊れてビルドエラーになる

TS2322: Type 'Timeout' is not assignable to type 'number'.

これはライブラリをインストールした際、そのライブラリの型定義ファイルに@types/nodeが含まれていてこのようなケースになることがあります

TypeScriptのissueに登録されていて、ワークアラウンドは提案されているものの、根本的な解決には至っていないようです

github.com

今回のゴール

  • 開発中、ライブラリの型がわかる
  • ビルドに失敗しない

対応策

tsconfig.jsonのtypeRootsで@types/nodeの読み込み先を変えます
declare module 'node'でNode.jsの型を上書きします

src/typings/node/index.ts

declare module 'node'

tsconfig.json

    "typeRoots": ["src/typings", "node_modules/@types"],

このようにすることで、実際の@types/nodeが読み込まれず、型が壊れること無くビルドができます

続きを読む

Chrome 81、Safari 13.1からExifのOrientationが考慮されるようになりましたね

JavaScript

みなさんの環境では、以下の画像はどのように見えますか？
タイトルの通りですが、Chrome 81、Safari 13.1からjpegのExif、Orientationの値を考慮して画像が表示されるようになったようです

See the Pen exif orientation by megos (@megos) on CodePen.

続きを読む

package.jsonの^(caret)にハマった話

Vue.js ESLint

背景

  • vue-cliを3系から4系にアップデートしたらビルドに失敗した
 ERROR  Failed to compile with 1 errors

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'eslint/lib/formatters/stylish'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.module.exports (.../node_modules/eslint-loader/index.js:196:28)
  • vue-cli 4かつESLint 6でvue-cli-service lintを実行するとエラー
続きを読む

Siderがすべて解析エラーになってしまったので対応した

Sider CI

日時

2020/03/05 以降

現象

  • Siderの解析に失敗する
  • ログを見ても特に何もエラーが出ていない
    • 2020/03/08現在はエラーが出るようになってます

対策

sider.ymlにSiderがサポートしているtool以外が設定されていないか調べる
もし設定されている場合は、その設定をymlから削除する

sider.review

続きを読む