typescript-plugin-styled-components 導入メモ

Styled Components を適用したコンポーネントは sc- からはじまるクラス名が HTML に付与されます。 どこで定義されているコンポーネントなのか確認したいとき、そのままだとちょっとわかりにくいです。 React Dev tool から確認してもコンポーネント名は表…

Jest Styled Components メモ

Styled components を使ったコンポーネントをテストする場合、どのスタイルが変更されたかの検知はできません。 例えば、下のような styled components で作成されたボタンを Jest の snapshot 機能 + react-testing-library でテストすることを考えてみます…

WebStorm で command + shift + A 押下時に apropos window を表示されないようにする

結論 ショートカットキーを変える 起きていたこと ある時から WebStorm で Find Action のショートカット(command + shift + A) を押すたびに apropos ~ みたいなウィンドウが出るようになってしまいました… ターミナルがこのウィンドウを出してるっぽいとい…

Magic Trackpad 2 買ってみた

なるほど。 pic.twitter.com/1BtvW0UREz— つるすけ (@turusuke) 2019年12月6日 Magic Trackpad 2 を買いました。 普段のお仕事は Macbook Pro + 外部ディスプレイに接続して作業しています。 カーソル移動はキーボード下のトラックパッドで行っているのです…

taiko を使って Chrome を操作する

taiko? Taiko, free and open source browser automation Chrome を Node.js から扱うことができるブラウザ操作を自動化するためのツール taiko と puppeteer の違い 同じように Node.js から Chrome 操作できるツールで puppeteer がある puppteteer の場合…

yarn をインストールする際に node.js をインストールさせない

$ brew install yarn をすると、Homebrew 以外(ex.nodenv, nodebrew)で node.js を管理していても /usr/local/bin へ node.js をインストールします。 これは yarn が node.js を依存パッケージとして指定しているからです。 yarn — Homebrew Formulae Homeb…

CLI でプロジェクトの任意の Pull Request を選択してブラウザで開く

hub? hub は Github 上で行えるアクションを CLI から行えるようにできるツール。 github.com これを使えばプロジェクトの Pull Request 一覧も下のように hub pr list で表示させられる。 Pull Request のリストから fzf と組み合わせてブラウザで開く hub …

zsh-autosuggestions で zsh で入力補完できるようにする

zsh-autosuggestions を今まで知らなかった。 どういう機能かというと、下のように zsh で入力していると間近で実行したコマンドからサジェストして入力補完してくれる。 Fish-like とあるので、FIsh では標準の機能っぽい(試してない)。 サジェストされる内…

Vue のカスタムディレクティブを使って低レベルの DOM にアクセスする

Vue.js には多くの便利なディレクティブが用意されており、多くの場合はこれらを組み合わることでコンポーネントを作成することができるようになっています。 しかし、以下の場合のように低レベルの DOM に対して処理を追加したい場合があります。 コンポー…

HHKB 使い始めた

去年の年末くらいから HHKB Professional BT を使い始めた。 Happy Hacking Keyboard | HHKB Professional BT | PFU 特に Magic Keyboard に不満があったわけではないけれど、多くの人に称賛されているものがどんなものか体験してみたかったので思い切って買…

git worktree についてのメモ

git

git worktree git worktree というコマンドがあることを知ったので、メモ。 Git - git-worktree Documentation ブランチの切り替えをしなくてよくなるコマンド git worktree がすごい! git worktree git worktree は Git 2.5.0 から導入されているコマンド…

ブログをはてなブログに移行した

表題の通り、ブログをはてなブログに移行して運用していくことにした。 ここ最近記事の投稿もすっかり減ってしまっていたし、投稿しようと思ってもブログの直したいところばかりが目についてしまいアウトプットするところまでたどり着けない…ということが増…

Alfred 3.5 で追加された Bookmarks について

Alfred 3 Advent Calendar 2017 - Adventar 4日目です。 以前は Safari のブックマークを検索結果に含めることができました。 Finding Safari bookmarks in Alfred results - Alfred Help and Support Chrome のブックマークも検索結果に表示させたい場合は…

Workflow Object の Write Text File を使って設定ファイルを作る

Alfred 3 Advent Calendar 2017 - Adventar 3日目です。 Alfred Workflow を作っていると API キーなどをユーザーに入力させて、それを保存させておきたい場合があります。 Write Text File を利用すると簡単に設定ファイルを作れます。 Write Text File を…

Alfred 3 で Script Filter の結果を JSON で出力できるようになった

これまで Alfred Workflow の Script Filter では結果を出力する際に XML 形式で書かないといけなかったのですが、Alfred 3 からは JSON 形式で出力を書けるようになりました。 Script Filter JSON Format - Workflow Input Objects - Alfred Help and Suppo…

Alfred2 -> 3 でより柔軟にObjectを接続できるようになった Workflow

Alfred 3 Advent Calendar 2017 - Adventar 1日目です。 カレンダー登録がちょっと遅れたというのもあり、ほぼ自分だけなので気楽にやっていこうかと思います。 Alfred2 から Alfred 3 になって大きく進化したポイントとして、Workflow 間の接続が柔軟に行え…

Alfred の List Filter を使って Workflow を作成する

久しぶりの更新です。 Alfred 3 がリリースされて半年以上が過ぎました。 Alfred - Productivity App for Mac OS Alfred 3 からは Workflow がかなりパワーアップしており、プログラムを 1行も書かずに Alfred だけで Workflow を作成するための機能がたくさ…

円に沿ってオブジェクトを配置する

円形配置 作ろうとしているもの 完成 DEMO 個々のオブジェクトの座標を求める 配置するオブジェクトの数だけループさせる 各オブジェクトが全体の何%にあたる位置なのかを計算する 中心座標とオブジェクトが作り出す角度を求める 円の中心座標をずらす 特定…

WP-CLI で Wordpress の簡単セットアップできるシェルスクリプトを書いてみる

今年初の記事です。 Wordpress v3.7 以降では WP-CLI を使うことができます。 これは、Wordpressに関するあれこれを CLI から操作することができるようにするコマンドラインツールで、 セットアップからプラグインのインストール、投稿タイプの追加、コアフ…

ブラウザの動作検証に便利『Ghostlab2』

この記事は できる Mac OS X Advent Calendar 2015 の14日目の記事になります。 この記事では Ghostlab2 というアプリケーションを紹介していきます。 目次 Ghostlab2 起動画面・対象のサイトを設定 ブラウザでの動作を同期する ファイルの更新時にオートリ…

Mouseposé

Boinx Software - Mousepose この記事は できる Mac OS X Advent Calendar 2015 の12日目の記事になります。昨日はワトソンさんで 『新しい ShiftIt のご紹介 - 0番染色体』でした。 この記事では Mouseposé というアプリケーションを紹介していきます。 目…

不必要な通信を制限できる TripMode

TripMode | Your Mac's mobile data savior. この記事は できる Mac OS X Advent Calendar 2015 の10日目の記事になります。 この記事では TripMode というアプリケーションを紹介していきます。 目次 TripMode 購入方法と使い方 TripMode TripMode は利用し…

Font Manager 『RightFont』

RightFont この記事は できる Mac OS X Advent Calendar 2015 の9日目の記事になります。 この記事では RightFont というアプリケーションを紹介していきます。 目次 RightFont インストール 起動すると小さなウィンドウが表示されます。 ウィンドウサイズや…

Duet Display

Duet Display - Ex-Apple Engineers Turn Your iPad into a Second Display for your Mac この記事は できる Mac OS X Advent Calendar 2015 の8日目の記事になります。 この記事では Duet Display というアプリケーションを紹介していきます。 目次 DuetDis…

TKG AC 8日目

この記事は TKG Advent Calendar 2015 の8日目の記事になります。 昨日は @のはこ さんで、2015年の、たまごかけごはん - のはこごと でした。 今朝食べた TKG は気づいたら写真を撮る前に胃の中に収まってしまったので、本日二度目の TKG を自宅でいただき…

GluePrint

GluePrint この記事は できる Mac OS X Advent Calendar 2015 の7日目の記事になります。 この記事では GluePrint というアプリケーションを紹介していきます。 目次 GluePrint 使い方 GluePrint GluePrint はとてもシンプルな Mac 用のアプリケーションで、…

HTTP & REST Client 『Paw』

Paw この記事は できる Mac OS X Advent Calendar 2015 の6日目の記事になります。 この記事では Paw というアプリケーションを紹介していきます。 目次 Paw 使ってみる Header 情報や Body に値を追加する Basic 認証や OAuth 認証が必要なコンテンツへのア…

アスキーアートエディタ Monodraw

Monodraw この記事は できる Mac OS X Advent Calendar 2015 の5日目の記事になります。 4日目は ワトソンさんで、Macのおすすめクリップボード拡張アプリでした。 この記事では Monodraw というアプリケーションを紹介していきます。 目次 Monodraw とは イ…

お気に入り画像、サイトのキャプチャーをまとめて管理!Pixave

Pixave この記事は できる Mac OS X Advent Calendar 2015 の3日目の記事になります。 この記事では Pixave というアプリケーションを紹介していきます。 目次 Pixave とは インストール方法 起動画面 LIBRARY COLLECTIONS YOUR COLLECTIONS 使い方 ショート…

ファイルをメニューバーからアップロードできる FileShuttle

FileShuttle この記事は できる Mac OS X Advent Calendar 2015 の2日目の記事になります。 この記事では FileShuttle というアプリケーションを紹介します。 目次 FileShuttleとは インストール方法 設定 Path URL アップロードしてみる 今回紹介したアプリ…