【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】
はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると同一名称のファイルを開いているときには右側にディレクトリ名も表示されているのですが、薄い文字かつ、目線移動が必要で分かりづらいです。 この記事では、VSCodeの設定を変更することで、タブ表示名にディレクトリ名を含めて表示する方法を紹介します。 設定方法 VSCodeの設定ファイルsettings.jsonに以下の設定を追加します。 "workbench.editor.customLabels.patterns": { "**/index.*": "${dirname} .../${dirname(1)}", "**/{page,layout,template,route,actions,hooks,components,ut
Bartenderの代替に！ macOSのメニューバーのアイコンを常に表示・非表示にできるオープンソースのアプリ -Ice
macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。 アイコンは常に表示するアイコン、基本非表示でクリックやホバーで表示するアイコンにすることができ、簡単に言うとBartenderのようなことができます。私はBartenderを長く使用していましたが、この記事で紹介するIceに変更しました。 「…」の右が常に表示、左が非表示でクリック・ホバーで表示されます。 Ice -Menu Bar Manager Ice -GitHub Iceの特徴 Iceのダウンロードとインストール Iceの使い方 Iceの特徴 Iceは、macOSのメニューバーを管理するオープンソースの無料アプリです。主な機能は、メニューバーに表示されているアイコンの表示・非表示ですが、ほかにも便利な機能が備わっています。 対応OSは、macOS 14（Sonoma）です。ライ
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ
Result detailsタグを使った開閉コンテンツのスタイリングサンプル集です。 JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。 css[data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-betwe
PiP any site - Picture in PictureでWebサイトを表示するGoogle Chrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザで動作を再生している際、スクロールすると動画が見られなくなってしまいます。動画の説明文が長かったりすると不便です。そこで使えるのがPicture in Picture（以下PiP）になります。 このPiPはWebブラウザのAPI（chrome.tabCapture APIなど）として提供されており、何も動画に限らず使えます。それを試せるのがPiP any siteです。 PiP any siteの使い方 使っているところです。右下にPiPで同じWebサイトを表示しています。 使っているところです。PiPで表示されているWebサイトがメインウィンドウと同じようにスクロールしているのが分かります。 PiP any siteはメインウィンドウで表示している内容をそのまま投影
mobileSelect - モバイル特化型のドロップリスト
スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。 よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します。 mobileSelectの使い方 デモです。選択肢が一つの場合。 複数の選択肢がある場合。 こんな複雑なものも。ダイヤル式ロックのようです。 さらに複数の選択肢を連携させることもできます。 最初の選択肢によって次の選択肢が出る場合と出ない場合を作れます。 mobileSelectはスマートフォンに特化したUI/UXになっています。特に複数選択肢を一度のドロップダウンで行えるのは便利です。PC向けには別途作成する必要がありますが、スマートフォンアクセスが多い場合やハイブリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
xbar - メニューバーに自由に情報を表示できるユーティリティ MOONGIFT
