CSS スマートフォンでタップされたエリアがハイライトされるのを消したい - かもメモ
スマートフォンでリンクやボタンをタップした際に clickable なエリアがハイライトされます (iOS Safari だとグレー / Android for Chrome だと青) これ 通常のリンクやボタンはそのままで良いのですが、モーダルのエリア外をタップした際にモーダルを閉じさせたいなどの場合、画面全体に一瞬ハイライトが出てしまうので見た目が良くなくハイライトを消したかった -webkit-tap-highlight-color: transparent でハイライト (強調) を消せる .overlay { -webkit-tap-highlight-color: transparent; } サイト全体でハイライトの色を変更したい場合は色指定できる a, button, input, textarea, select { -webkit-tap-highlight-color
JavaScript 特定のプロパティを削除した新しいオブジェクトを返したい - かもメモ
delete メソッドとかで Array.filter みたいな感じで、 state の中から特定のプロパティを削除して新しいオブジェクトを返したい。 1. Object.assign() で オブジェクトをコピーして delete JavaScript の delete 演算子は破壊的なので、 Object.assign() でオブジェクトをコピーしてから使えばOK。 const Tristar = { leader: '神崎美月', member1: '一ノ瀬かえで', member2: '紫吹蘭', }; const omitProperty = (obj) => (key) => { const clone = Object.assign(obj); delete clone[key]; return clone; } omitProperty(Tristar)('member2'
Next で MSW (Mock Service Worker) を使うのメモ - かもメモ
バックエンドの API がまだできてないプロジェクトで Next のフロントを作成することになり開発中の API との通信に噂の MSW を使ってみることにしました。 Next.js 特有の問題でちょいハマりしたので導入完了したところまでのメモ。 MSW (Mock Service Worker) MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 cf. MSW で加速するフロントエンド開発 プロダクションのコードのまま API への通信だけを Service Worker がインターセプトしてモックのレスポンスを返すことができるので、バックエンドと切り離してフロントだけを開発することができます！すごい〜 MSW の導入 $ npm i -D msw 開発時だけ使うの
TypeScript Event.target, Event.currentTarget の型がむずい！ - かもメモ
TypeScript で addEventListener のコールバック関数で Event.target, Event.currentTarget を使おうとしたら結構めんどかったのでメモ Event.target と Event.currentTarget の違い これはそもそも JavaScript の違いですが、Event.target はイベントが発生した要素を返すので必ずしもイベントリスナーを付けた対象になるとは限りません。 The read-only target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event hand
CSS 何だったけってなりがちなメモ。initial と inherit - かもメモ
CSSのプロパティリセットする時に使うやつ。 initialとinherit CSS書かない日が続くとどっちが何だっけ？ってなることがあるのでメモ。(メモすれば忘れにくくなる！かも initial は 初期化 英語で initial は「初めの、最初の、初期の」とか。 プログラムとかでよく出てくるinitとかと同じ CSS の initial キーワードは、要素にプロパティの初期値 (または既定値) を設定します。 初期値をブラウザーのスタイルシートで指定された値と混同しないでください。 出典: initial - CSS: カスケーディングスタイルシート | MDN HTML <p class="text-red"> おいでよ<em>アイカツ</em>の沼！ </p> <p class="text-red"> おいでよ<em class="text-initial">アイカツ</em>の
環境構築 macOS Big Sur : Git の設定と GitHub への SSH 接続 - かもメモ
新しいMacに Git の設定やり直したのを書き忘れてたので思い出しながらメモ。 環境 Intel Mac macOS Big Sur Homebrew インストール済み Git のインストール Xcode の Xcode Command Line Tools をインストールする ターミナルで git --version コマンドを叩くと Command Line Tools をインストールするか聞かれるダイアログが表示されるので Yes を選択すると git が使えるようになる。(楽) Home brew でインストールする $ brew install git Git の設定 global に色々設定する。 設定ファイルは /Users/<user>/.gitconfig に作成される ユーザー情報 $ git config --global user.name "<NAME>" $
Git 過去の特定のコミット位置からブランチを切りたい - かもメモ
今のブランチの途中に戻って先に別の開発をしないといけないとか、特定のコミット位置から別のブランチを作成したい時のアレ。 例えば $ git log --all --decorate --graph --oneline * ab7b929 (HEAD -> develop) 図書館にレシピの本を置いたよ。たーのしー * 7cb8ef3 図書館をつくったよ。わーい * 9f0e540 服がぬげたよ。 * 85767d5 カレーはからい。たーのしー * 175658e 温泉がみつかったよ。 * a9b3d53 ボスがふえたよ。たーのしー * e0e054e じゃぱりまんを作ったよ。わーい * 94b8397 でんち * 6fe1920 バスてきなもの。たーのしー * 98f5f9b ジャパリパークの敷地をつくったよ。わーい。 94b8397 でんち から別のブランチを切ってジャパリバスを作りたい
Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ - かもメモ
ことの発端 macOS CatalinaのChrome 77のフォント問題。 勘違いしている人が多いので説明。 Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる ↓ 該当するフォントがなくなったため、Sans Serifが明朝体で表示される ↓ フォント指定の甘いサイトは全部明朝体に！ pic.twitter.com/Cil92P8PGO— 池田 泰延 (@clockmaker) 2019年10月8日 問題点を整理すると Mac Catalina には ヒラギノフォントがバンドルされていない？ Chrome77 は font-family: 'Hiragino Kaku Gothic', 'ヒラギノ角ゴ ProN' の指定が無効になっている？ Chrome77 では font-family: sans-serif の指定があっても seri
MySQL mysql.socketがどこにあるか探したい。 - かもメモ
php.iniとかに設定するmysql.socketのパス。 設定が必要になる頃には覺えてないし、アップデートとかでパスが変わってるかもしれないのでmysql.socketがどこにあるか探す方法のメモ mysql_config --socket コマンドを使う $ mysql_config --socket /tmp/mysql.sock MySQL起動させて無くてもパスが表示されます。 mysql.socketが存在しないときは生成させることも出来るようです /etc にmy.cnfファイルを作成 my.cnfに下記を記述 [mysqld] socket=/var/mysql/mysql.sock [client] socket=/var/mysql/mysql.sock mysqld_safeを実行 $ sudo /usr/local/mysql/bin/mysqld_safe 参考
CSS フォームとかで使えるステップバー作ってみた。 - かもメモ
フォームのイマココ！とか表示できるシンプルなステップバーをCSSだけで作ってみた。 当然のようにIE8とかは無視してます。ご了承下さい。 SAMPLE See the Pen SIMPLE FORM STEP BAR by Chaika (@chaika-design) on CodePen. SIMPLE FORM STEP BAR HTML <ol class="stepBar step3"> <li class="step current">STEP1</li> <li class="step">STEP2</li> <li class="step">STEP3</li> </ol> Compass (SCSS) .stepBar { position: relative; list-style: none; margin: 0 0 1em; padding: 0; text-ali
git リモートのブランチを削除する - かもメモ
お仕事でエンジニアしてないと本当にどんどん忘れて言っててヤバイって感じてる今日このごろな訳です。 マージしたブランチの消し忘れとか不要なブランチが残ってると見通しが悪くなるのでリモートリポジトリのブランチは定期的に整理したい訳です。で、リモートのブランチを削除する方法。gitHubとかBitbucketとか使ってるとサービス上で削除できるのですが、まぁコマンドで削除する方法を。忘れてたので、メモしておきます。 リモートのブランチを削除する手順 $ git branch -a * master release/20160229 remotes/origin/HEAD -> origin/master remotes/origin/master remotes/origin/release/20160229 こんな感じにブランチがあります。 release/20160229はmasterにマー
Gulp concatでファイルをまとめて、uglifyでmin化してファイル名を変更して出力したい。 - かもメモ
最近gruntよりgulpの方が熱い！という噂を聴いてバリバリgrunt派だったのですがチャレンジしてみました。 インストールとかは同じnode関連なのでnpm使えば簡単にできるので、この辺りgruntと大差なく導入できるなぁ〜って印象でした。 gruntで言うところのwatchがgulp自体に含まれてるっぽいので、gruntより最初の段階でnpm install する量は少なくて済みますね。ﾊﾗｼｮｰ!! インストール関係はこちらを参考にしました。 liginc.co.jp いつもやっている、javascriptの結合とmin化をするタスクを書いてみました。 プロジェクトのpackage.jsonを作る。 node.jsが必要なので、インストールされてない場合は下記リンクなどを参考にインストールしておいてください。 Macにnvm + Node.jsをインストールする - Qiita プ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
