preset-scssを使用する。 github.com

字下げ 文章の先頭行について、行頭の位置を右側にずらすこと。 ぶら下げ 文章の先頭行以外の行について、行頭の位置を右側にずらすこと。

米印 Reference Mark（リファレンスマーク） 米印 - Wikipedia

ソースコード // test.js const args = process.argv.slice(2); console.log(args); 実行コマンド $ node test.js foo bar ["foo", "bar"] argvの格納値 インデックス 格納値 0 node実行ファイルのフルパス 1 スクリプトファイルのフルパス 2以降 コマンドラ…

marginを表示したい要素の一方をクリックして選択する。 windowsの場合はAltキー、macの場合はoptionキーを押しながら、もう一方の要素をクリックする。

重ねたHTML要素の前面側のCSSにpointer-events: noneを指定する。

input { -webkit-appearance: none; }

グレーのボタンだと、押せないと勘違いする人も出る。 本当に無効ではないことを十分に示す必要がある。 参考 buttonのブラウザデフォルトのデザイン 通常の場合 <button>サンプル</button> disabledの場合 <button disabled>サンプル</button>

ゴーストボタンとは アウトラインはあるが、塗りつぶしがないボタンのこと。 ゴーストボタンのメリット シンプルなボタンであるのため、Webサイトのデザインを邪魔しない。 ゴーストボタンのデメリット ゴーストボタンはボタンとして認識し辛い。ソリッドボ…

$ grep "[検索したい文字列]" < [検索したいファイル名] test.txtから"xxx"という文字列を検索する場合 $ grep "xxx" < test.txt

コマンド・コマンド xxx が実行終了した後に、コマンド yyy を実行する。 $ xxx ; yyy コマンド xxx が正常終了した場合のみ、コマンド yyy を実行する。 $ xxx && yyy コマンド xxx がエラー終了した場合のみ、コマンド yyy を実行する。 $ xxx || yyy コマ…

DOMを操作する場合、class属性ではなくdata属性を使用する。 class属性はスタイルを定義するためにあり、CSSだけが使用するべきであるため。 class属性を使用した場合、デザインの修正等でclass名の変更が発生した場合にJavaScriptも修正しなければならなく…

$ find / -name [ディレクトリ名] -type d

ps を使用する方法 $ ps aux | grep [プロセス名] pgrep を使用する方法 # プロセスが起動中の場合は、プロセスIDが出力される。 # プロセスが停止中の場合は、何も出力されない。 $ pgrep [プロセス名] 12345

process.cwd();

text-indentを使用する方法 <p class="indent">※サンプル文章サンプル文章サンプル文章サンプル文章</p> .indent { /* ブロック全体を右に移動させる */ padding-left: 1em; /* 1行目のみ左に移動させる */ text-indent: -1em; } .indent { /* marginを使用しても上記と同じことが…

$ git cherry-pick --abort

:not を使用してCSSの上書きを回避する。 // bad .item-item { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } // good .list-item { &:not(:last-child) { margin-bottom: 20px; } }

this.$nuxt.error(); 引数として、statusCodeとmessageを指定することが出来る。 this.$nuxt.error({ statusCode: 404, message: 'エラーが発生しました。', });

const obj = { a: 'c', b: 'd', }; type Keys = keyof typeof obj; type Values = typeof obj[Keys] // 'c' | 'd';

<input type="number" inputmode="decimal" />

サンプルstoryファイルとcssファイルを削除すればOK storybookのセットアップ時に、サンプルstoryファイルとcssファイルが自動でstoriesディレクトリに生成される。 storiesディレクトリに配置しimportしたcssファイルは、そのcssファイルをimportしたstory…

chormeで開発者ツールを開く。 Network タブを開く。 WS を選択する。

関数内で例外をthrowする場合、例外が同期的にthrowされるのではなく、rejectされる。 const func1 = async () => { throw new Error('error'); } const func2 = () => { throw new Error('error'); } const test1 = async (func) => { try { await func(); …

開発者ツールを開く。 Source タブを開く。 ツール右側の Event Listener Breakpoints から、各イベントに対しブレークポイントを設定することができる。

templateをあえて使用する。 条件分で1つの条件分岐のみに<template>タグを使用している場合などでは、あえて全ての条件分岐に<template>タグを使用する。 そうすることで、インデントの抽象度を統一され、より理解し易いコードになる。 <button v-if="isA" @click="onClickA">A</button> <template v-else> <button @click="onClickB">B</button> <button @click="onClickC">C</button> </template> </template></template>

良いデザインとは 伝えたいことが、見る人にすんなりと伝わるかどうか。 WEBデザインの場合、そのサイト（アプリ）が使いやすいかどうか。 # 「誰に」「何を」伝えたいのか考える。 利用する人に考えさせない。 備考 「かっこいいデザイン」ではなく、「ユー…

余白の役割 レイアウトを整える。 注目してほしい情報を見つけ易くする。 各コンテンツの関連性を明確にする。 余白を広げた場合のメリット 余白を広げた場合、余計な情報に気を取られにくくなる。 余白の戦略 重要なフォームやボタンとその他のコンテンツと…

marginは、隣接する側のコンテンツの余白を意味する。 marginは、隣接する側のコンテンツに指定する。 webサイトは、左上を起点として、右と下にコンテンツを追加していく。 左右に隣接したコンテンツの場合、隣接するコンテンツは右にあるコンテンツである…

deepプロパティにtrueを指定する。 export default { watch: { hoge: { deep: true, handler(val) { console.log('watch hoge'); } } } };