tmegos blog

Web developer

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

続きを読む

iOS/iPadOS 13のSafariでページ全体や一部がレンダリングされない問題に対するワークアラウンド

Safari iPadOS iOS

背景

業務でWebアプリを開発しているのですが、iPadOS 13のSafariにて以下のような事象が発生しました

  • ページ全体が真っ白になる
  • ページの一部が欠ける
  • 真っ白になったり、一部が欠けたりしたときにWebインスペクタを使うとDOM自体は存在している
  • 画面をタップ、スクロールするとレンダリングされる

iOS 13 Safari Not Rendering などで調べてみるといくつかスレッドが上がっていました
しかし、問題解決までには至っていないようでした

Safari on iOS 13.1.2 Not Rendering Correc… - Apple Community

https://discussions.apple.com/thread/250673539

Webアプリを使う人にとっては単純に「Webアプリが使えない」と思ってしまうので、あまりやりたくないですがワークアラウンドを考えてみました

対策

初期表示にスクロールさせてレンダリングされるようにしました

画面をタップ、スクロールするとレンダリングされる

という事象から、アプリ側で強制的にスクロールさせました
Safari側で対応してくれればいいのですが…

擬似コード

レンダリングが終わった = function () {
  // y軸方向に1pxずらす
  setTimeout(function () {
    window.scrollTo(0, 1);
  }, 100);
  // 1pxずらしたので戻す
  setTimeout(function () {
    window.scrollTo(0, 0);
  }, 200);
}