前回は、ブラウザ上のボタンを押した際に1秒間電球を光らせてみました。blog.kimizuka.org今回は、POSTリクエストの際に値を送って、その値に応じた明るさに電球を光らせてみます。 リポジトリ github.com ソースコード go.mod module github.com/kimizuka/s…

最近、Goを勉強し始めたので、試しに電球を光らせることのできるウェブサイトを作ってみようと思います。 なぜならば「光るのGo」と名付けたいからです。ヒカルの碁 1 (ジャンプコミックスDIGITAL)作者:ほったゆみ,小畑健集英社Amazon Goは初心者ですが、DMX…

ターミナルから、 sudo find / -iname "*appname*" 2>/dev/nullを実行すれば、appnameが含まれるファイルやフォルダが丸わかりです。 あとは、ひとつひとつ懇切丁寧に消していきましょう。 パーミッション的に削除できないものが出てきた場合は、「システム…

前回のプロジェクトにStorybookを導入します。blog.kimizuka.org storybook.js.org以前、Next.js + styled-componentsの構成にStorybookを入れたときはnpxを使っていましたが、今回はyarnを使います。blog.kimizuka.org 導入手順 ❶ Storybookのセットアップ …

前回は、Next.js（TypeScript + CSSModules）+ biomeの環境を構築しました。blog.kimizuka.org今回は、それに加えて、happy-css-modules を導入します。github.com happy-css-modules とは importしているCSSModulesのクラス名をサジェストしたり、 存在しな…

以前は、SCSSはstylelintで、TypeScriptはbiomeで整形を行っていたのですが、biomeがCSSをサポートするようになったので、biomeに一本化することにしました。 前提 biomeのVSCode拡張を入れる SCSS、PostCSSは諦める（biomeがサポートしていないため） yarn…

いつも通り、next.config.tsを設定して、 npm run devで、開発サーバを起動したところ、左下のアイコンが非表示にならなくなっていました。 devIndicators.appIsrStatus` is deprecated and no longer configurable. Please remove it from next.config.ts. …

タブに現在のFPSを表示するテストサイトを作成しました。 こちらで挙動を確認したところ、Chromeでは、ブラウザのタブを裏に回した際、requestAnimationFrameは止まり、setIntervalは1秒に1回の更新になります。 DEMO requestAnimationFrame https://develop…

www.electronjs.orgwin.setAlwaysOnTop を使えば最前面に表示できます。 const { app, BrowserWindow } = require('electron'); app.whenReady().then(() => { const mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL('htt…

❶ start.batを作成 start.bat App1.exe、App2.exe、App3.exeを5秒間隔で起動する場合の例。 @echo off start "" "C:\Path\To\App1.exe" timeout /t 5 start "" "C:\Path\To\App2.exe" timeout /t 5 start "" "C:\Path\To\App3.exe" ❷ スタートアップフォルダ…

いつも念の為、mp4などに変換していましたが、いちかばちかmovファイルのままアップロードしてみたところ、Windows機でも普通に再生されました。 確認OS Windows 11 Home 確認ブラウザ Edge 135.0.3179.54 Google Chrome 135.0.7049.42 Firefox 137.0 DEMO h…

CSS メディアクエリを使ってスタイルを当てることができます。 ソースコード body { color: #2e3440; background: #d8dee9; } @media (prefers-color-scheme: dark) { body { color: #d8dee9; background: #22262a; } } @media (prefers-color-scheme: light…

今日はとてもいい天気だった。朝からお日さまがぽかぽかしていて、どこかに出かけたくなるような陽気だ。お昼ごはんを食べたあと、公園へ向かうと、たくさんの人がいた。 ベンチではおじいちゃんとおばあちゃんがゆっくり話をしていて、芝生では子どもたちが…

git log -p ファイル名で確認できます。基本的な機能だと思うのですが、僕はGitHubのファイルのリビジョン履歴 に頼りっぱなしだったので、使ったことがありませんでした。docs.github.comGitHubのリビジョン履歴は、git blameを使っているようです。なので…

const target = 'user-8823'; const hasTarget = users.includes(target); みたいなコードで、要素の多いユニークな配列から、特定の要素が含まれているかを確認するコードを高速で動かそうと思った時に、 const target = 'user-8823'; const set = newSet(u…