2019-07-31

メモ：What's New In DevTools (Chrome 76)

日本語メモ：What's New In DevTools (Chrome 76) 手元のChromeが76になっていたので、改めて76のアップデート内容を見てみる。

元情報

https://youtu.be/GLUB2yzk0ZQ https://developers.google.com/web/updates/2019/05/devtools

メモ

Autocomplete with CSS values

CSS記入時に、プロパティじゃなくていきなり値を入力しはじめた場合でも、オートコンプリート機能が働きプロパティと値をサジェストしてくれる。

A new UI for network settings

Networkパネルのオプション設定部分のレイアウトが変わり、Network Settingsのボタンで表示非表示を切り替えられるようになった。

WebSocket messages in HAR exports

WebSocketのメッセージもHARファイルとしてエクスポートされるようになった。

HAR import and export buttons

HARのインポートとエクスポートのボタンがよりわかりやすくなった。

Real-time total memory usage

Memoryパネルでリアルタイムなメモリ使用量が表示されるようになった。直近2秒間のデータを計算して秒単位の使用量が表示される。

Service worker registration port numbers

Service Workersペインのオリジン表示部分でlocalhostのポート番号も表示されるようになった。

Inspect Background Fetch and Background Sync events

ApplicationパネルのBackgroundServicesペインでBackground FetchとBackground Syncイベントのロギングができるようになった。

Puppeteer for Firefox

DevToolsじゃないけど、PuppeteerでFirefoxも動かせる。

（Bonus tip）Accessibility Insights for Web

Accessibility Insights for Webはフォーカス順序を可視化できたりして便利らしい。 chrome.google.com

2019-07-07

メモ：June 2019 (version 1.36) / Visual Studio Code Updates

VS Codeのアップデートがあったので、内容を確認してみる。長いので全部は書ききれなさそう。途中までになる。

元情報

https://code.visualstudio.com/updates/v1_36

メモ

Workbench

Hide individual status bar items

ステータスバーの各項目の表示/非表示を設定できるようになった

Tree indent guides

ファイルエクスプローラー、サーチビュー、デバッグビューのファイル一覧表示にインデントのガイドがつくようになった。ツリー構造が見やすくなっている。
workbench.tree.renderIndentGuides の設定で、表示・非表示・hoverで表示などを設定できる。

Drag and drop a folder to copy

VS Code外からファイルエクスプローラーにフォルダをドラッグ＆ドロップしてコピーできるようになった。以前のように、フォルダを含むワークスペースが開かれる挙動なしに、フォルダの内容をコピーできる。

Copy paste filename incrementor change

VS Code エクスプローラー上でコピペしたファイルの名前がかぶっていたら、次のような規則でファイル名が変わるようになった。
"hello.txt" -> "hello copy.txt" -> "hello copy 2.txt" -> "hello copy 3.txt"

Disable Alt key focus of the custom menu bar

Altキー押下でカスタムメニューバーにフォーカスが当たるようになっていたけど、window.customMenuBarAltFocusの設定項目が追加されて、無効にできるようになった。

Minimap search decorations

ファイル内検索のときに、Minimapの部分でも該当箇所がハイライトされるようになった。

Updated warning colors

list.warningForegroundとeditorWarning.foregroundとeditorOverviewRuler.findMatchForegroundの色が改善された。

Online services settings

自動アップデートなどのオンラインで行う機能の無効・有効を次の設定画面で設定できるようになった。
File > Preferences > Online Services Settings (Code > Preferences > Online Services Settings on macOS)

Integrated Terminal

Better default shell selector

Windowsで使うことのできるSelect Default Shellが、macOSやLinuxでも使えるようになった。

Launch terminals with clean environments

terminal.integrated.inheritEnvをfalseにすると、統合ターミナルでVS Codeの環境設定を使わないようにできるようになった。LinuxとmacOSの統合ターミナルではVS Codeの環境設定を継承していたため、不具合を起こすことがあったが、これが解消される。

falseにすると次のような状態になる。
- Linux: VS Codeの親プロセスを使う
- macOS: 重要な環境変数を取り出して使ってくれるようになる。（将来的にはLinux同様の挙動にしたいけどいまは環境のfetchまわりで問題があり無理らしい）
- Windows: Windowsの場合はなにも起こらない
ちなみにいまはデフォルトではtrueになっている。将来的にはfalseがデフォルトになるかもしれない。

Change to Ctrl+\

LinuxとWindowsのショートカットCtrl+\がターミナル分割につかわれていたけど、このショートカットはシェルでのSIGQUITに使われるようになった。前のような挙動に戻したいときは、keybindings.jsonに次の設定を追加するといい。

{
    "key": "ctrl+\\", "command": "workbench.action.terminal.split", "when": "terminalFocus"
}

2019-06-29

メモ：Building Your Color Palette / Refactoring UI

Refactoring UIという本（？）はUIデザインの注意すべきポイントがとても具体的に書かれていてよさそう。
電子書籍＋動画で$80くらいして高いんだけれども、2記事だけ無料で見ることができる。

その2記事のうちの、カラーパレットの作り方の記事を見てみた。

用意する色について

grayの色は8～10くらいのシェードがいる
Primary colorは5～10くらいのシェードがいる
Accent colorは複数必要になることもある
- 新着バッジとかに使う、目を引くための色。青緑とか黄色とかピンク系のもの
- 破壊的な変更を行うときの警告色。赤とか。
- 黄色を警告色として用意するときもある
- 緑をポジティブなサインに使うように用意するときもある
- これらのアクセントカラーでも5～10くらいのシェードが必要だったりする

シェードの作り方

まずはベースの濃さの色を決める。ボタンの背景になるくらいの色をベースにするといい。
そのあと、一番暗い色と、一番明るい色を決める。
一番明るい部分のシェードはアラートの背景色に使われるくらいの色をイメージ選定する。暗めのシェードはそのアラートボックスのなかで見出しに使えるような色を選定するといい。
ここで、ベースの色を500、一番暗いのを900、一番明るいのを100として並べてみて、間の700、300の色を決める。
その後、必要であれば同じような感じで、800、600、400、200の色を決めていく。