Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

2024-01-01から1年間の記事一覧

HTML+CSSで画面を90度回転させたい

要はtransform: rotate(90deg)すればいいんですが、単にこれをやると高さと幅が異なったり、余計な余白ができます。そこで、width: 100vh と height: 100vw を設定して中央寄せしてやります。すると横画面フルスクリーンを疑似的に再現できます。 以下コード <div id="rotated"></div>…

clever-fで句読点にジャンプしたい → fkで飛べる

句点(。)はfk、fmで飛べる 読点(、)はfc、fd、fk、ftで飛べる (この挙動はソースコードから確認できます) 大文字でも同じくジャンプできます(fK、fM、fC、fDなど) f.とf,で飛べるようにしてほしいなぁ…

昇降式デスクはいつ昇降するのか?

僕はかれこれ2年半近く使ってきて、日常的に昇降させています。 しかし、ちまたでは「昇降式デスクを買ったけど、昇降させることなんかないよ〜」という話をよく聞きます。そのため 「いつ昇降させるんだ?」と思う人はけっこう居ると思います。 今回は、い…

日報をすぐ書く技術 ver.2

NVIM_APPNAME を使えばかなり快適にいけるんじゃないか? と気付いたので書き直し。ver.1はこちら この方針だと、日報を書くときにだけ使う設定が足せる。プラグインを入れたり、カラースキームを変更するのが簡単。 手順 ディレクトリを作る (mkdir ~/.confi…

Apple watchが意外と便利

物欲に負けてApple watchを購入してみた。 思ってたより便利そう(だけど恩恵をフルで受けられていない)。 最大の利点: mac のロック解除機能がすこぶる便利そう Apple watchは、macのロックを解除する機能がある *1。これがすこぶる便利そう。 というのも、…

電子ペーパーで卓上カレンダーをつくる

完成品 こんな感じのものができる。予定はgoogleカレンダーから引っ張ってきている。 完成品 8時間おきに画面を更新している。裏にraspberry piがついていて、これで画面表示を制御している。 ハンダ付けすらしてないので、電子工作といえるかはかなり微妙か…

javaだとかgradleだとか

最近チームを異動して、仕事内容がサーバーサイドとなってjavaとかkotlinを書いてるので、その備忘録的なものを書いておこうかなと。マジで右も左もわからん… (※現段階の理解を雑に書きなぐってるので、多分間違えてるところがままある) java/kotlin kotlin…

onUnmountedはonMountedのなかで呼ぶとスッキリしやすい

vueのcomposition APIはどこで呼んでも問題ありません。たとえばonMountedのなかでonUnmountedを呼んでも良いです。 onMounted(() => { const handler = () => {}; window.addEventHandler('event', handler); onUnmounted(() => { window.addEventHandler('…

spread演算子を使うときに {} と {foo:undefined} は挙動が異なる

const obj1 = { foo: 42, ...({ foo: undefined }), }; // {foo: undefined} const obj2 = { foo: 42, ...({}), }; // {foo: 42} ↑こんな感じで、undefinedが指定されているときとプロパティ自体がないときでは動作が異なります。 (実は上のコードはそのまま…

カーソル下のハイライト情報を取得する in neovim

A. :Inspect Inspect コマンドが0.9.0(2023年4月7日)で導入されたのでそれを使おう

Reactで<dialog>いじってみたけどつらい件2

www.pandanoir.info 5年経ったので書き直しをば interface Props { isOpen: boolean; onClose: () => void; } const Dialog = ({ isOpen, onClose }: Props) => { const dialogRef = useRef<HTMLDialogElement>(null); useEffect(() => { if (isOpen) { dialogRef.current?.show</htmldialogelement>…

git commit --am で編集後にキャンセルする方法(vim)

:cq で終了する

reactのイベントハンドラーにはasync関数を設定してもよい

意外と知られてないというか、なんかあんまやってる人いない気がしたので (ちなみに、本当に async 関数が必要なパターンは実は少なくて、ほとんどの場合はアンチパターンなのでやめたほうがよいです。 別の方法で実装できるならそちらにしましょう) 実際にa…

日報をすぐ書く技術

追記: よりよい方法を思いついたので、ver.2を書きました 以下は追記前の本文です 新卒で入ってからずっと業務の日報を個人的につけてます。日報があると便利なことは多くて、たとえば連休前になにをやっていたのかを思い出したりするときに便利です。 ほぼ…

zshのプロンプトに直前のコマンドの終了ステータスを表示する

zsh

zshのprompt内で%?を指定すると直前の終了ステータスを表示させることができます。 PROMPT='[%n@%m]%?# ' ↑これで[user@host][last_status]#というプロンプトが表示されます。 ただ、これだと正常終了のときにも表示されて煩わしいので、正常終了のときには…

ApolloClient でカスタムフェッチを使う

いっつも書き方を調べてるのでここにメモを残しておく。 import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx'; import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, from, } fr…

シンプルにToastを実装する in react

使い方 使いたい箇所より上のコンポーネントに <ToastProvider> を追加して(↓こんな感じ)、コンポーネント内で const toast = useToast(); で使う感じです。 createRoot(document.getElementById('root')!).render( <ToastProvider> <App /> </ToastProvider> ); const App = () => { const toast = useToast(); re</toastprovider>…

access(obj, 'foo.bar.baz') みたいにパスを指定してアクセスしたい

発端: ApolloClient の useQuery の data と error をいい感じに扱うために getOrThrow(data, error, 'path.to.field') みたいなユーティリティ関数が欲しくなった 欲しい関数 const {loading, error, data} = useQuery(query); const fooBar = getOrThrow(d…

コマンドラインの内容を vim で編集できるようにする

zsh で control-o を押すと vim が立ち上がってコマンドラインの内容を編集できる関数を(ChatGPTが)作ったので紹介します。 (要件を伝えたら ChatGPT が目当てのものを一発で生成したので、かなりビックリしました。すごい。) デモ動画 youtu.be デモ動画で…

zellij のなかで neovim を開くと色がおかしくなる

結構試行錯誤したのでメモ ↑こんな感じで、結構色が違って表示されたので調べて修正しました。 結論 なぜか neovim の background オプションが "light" になってたのが原因でした。 set background=dark を明示的に書いたら解決しました。 調べたこと zelli…

幾野直人 (ikuno naoto) 自己紹介

諸事情(実名で検索すると他人の顔写真しか出てこない)のため、自己紹介記事を書くことにしました。目的を達成したら消したい。 プロフィール 名前: 幾野直人(ikuno naoto) 身長: 178cm (2024年4月現在) 体重: 72.4kg (2024年4月現在) BMI: 22.85 得意な言語:…

vim でテキストオブジェクトを追加して [] を簡単に扱いたい

() や {} は dab や yiB みたいに b/B で操作できますが、 [] は da[ と打たないといけません。煩わしいのでエイリアスを設定したいですよね。 というわけで r で [] を選択するテキストオブジェクトを追加しましょう!やり方がこちら↓ vim-textobj-user を…

クレジットカード情報の入力時になぜ有効期限も入れなければならないのか?

ネットでクレジットカード払いをする際、カード番号以外に有効期限も入力が求められます。これはなぜなのか疑問になりませんか?疑問になりますよね。 今回はそれについて考えてみました(完全に推測で書いてます) abst (created by ChatGPT) クレジットカー…

TypeScript の infer は同じ名前を指定できる

(ただし有用な場面はそんなにないです) infer に同じ名前を指定すると、ユニオン型になる 基本的に、infer に同じ名前を指定すると、それらをうまく満たすようなユニオン型になります。 以下の X1,X2,X3 はすべて number | string です。 type X1 = [number,…

デスク環境2024

去年までのもの→デスク環境変遷まとめ (2020/5 ~ 2023/1) - Panda Noir あとから見返す用に年1くらいでデスク環境を紹介したいなと思い立ったので書きます。あと、多分ウェブフロントエンドエンジニアとしては珍しく mac と windows の二刀流構成なので、他…