at backyard

Color my life with the chaos of trouble.

備忘録

DenoのプロジェクトでGitHub Actionsを使う

DenoのプロジェクトでGitHub Actionsを使うために設定ファイルを書いてみたので、備忘録として残しておきます。 deno fmt と deno test をGitHub Actionsで行うための設定ファイルです。 name: Deno CI on: push: pull_request: jobs: build: name: Test app…

iCloudの写真と動画のバックアップを停止して、iCloudの容量を確保するために調べたこと

子供が生まれてからというもの、写真や動画を取る頻度が大幅に増え、iCloudのバックアップ容量は既にいっぱいいっぱいになっている。 容量が足らなくてバックアップに失敗しました的な通知が常にiPhoneに表示されていたはずだが、いつの間にかそんな通知も出…

【クラウドストレージ vs 外付けHDD】iPhoneで撮りまくった動画はどこにバックアップするのが良いか?

何ヶ月も前に書いていた文章が下書きフォルダの中で塩漬けになっていたのを発見したので公開することにした。 (またやってしまった...) 目次 目次 結論 [いきなり脇道] 家族での写真共有はみてねがおすすめ 動画のバックアップに最適なクラウドストレージサ…

webpack5を用いてReactでTop level awaitを有効にした環境を作成する

目次 目次 最初に ライブラリのインストール 必要なファイルの作成 webpack.config.jsの記述 アプリケーションコードの記述 index.html index.js App.js ソースコード 最初に create-react-appは用いず、自身でwebpackをインストールしてReact環境を作成する…

Top level awaitについて整理した

トップレベルawait(Top level await)について改めて自分の中で整理することにした。 これはその際の備忘録的なものとなる。 目次 目次 Top level awaitとは? Top level awaitをブラウザで試すシンプルな方法 実際に読み込まれたJSファイル上でTop level awa…

JavaScriptのimport時のファイル読み込み時、複数から呼ばれたJSファイルの挙動について

JavaScriptを書いていて、挙動を理解していない箇所があるので今日はそのメモを書く。 例えば下記のような3つのファイルがある。 // sample1.js import { userList } from "./sample2"; import sample3 from "./sample3"; console.log('===> call sample1.j…

今年もHacktoberfestの季節

Hacktoberfest 2021について 暑い夏も終わり、用がなくとも外を散歩したくなるような季節。また、この時期はHacktoberfestが開催される時期でもある Hacktoberfest 2021 わたしは去年初参加して無我夢中で頑張ってみた結果、なんとかTシャツをもらえた。 今…

mac上でダブルクリックでPySimpleGUIを用いたGUIアプリケーションを起動する方法

下記のポストに引き続き、PySimpleGUIに関するポスト。 shinshin86.hateblo.jp macでは .command という形式で .sh ファイルを作成することで、ダブルクリックでそのシェルスクリプトファイルを実行することができる。 この仕組を応用して、ファイルをダブル…

PySimpleGUIを触ってみた備忘録(ボタンの配置とログ出力のサンプル、テーマカラーについて)

PySimpleGUIというPythonでかんたんにGUIを作れるライブラリを触ってみたので備忘録。 github.com 目次 目次 PySimpleGUIとは? VBAからPythonへの移行が増えている? PySimpleGUIで作成したログ表示サンプル PySimpleGUIのテーマカラーについて FindElement…

Create React Appで作成したアプリケーションに対してTestCafeでのE2EテストをGitHub Actionsから動かす

Create React Appで作成したアプリケーションに対して、E2EテストをTestCafeで実装した。 ローカルでE2Eテストを動かす分にはさほど難しくはなかったが、GitHub Actions で動かす際にはハマったりすることが多かったので、一旦このように書けば動く、という…

マクドナルドのサイドメニューをチキンマックナゲットにしたら、食後独特の胃の重さがなくなったことについて

今日は個人的にライフチェンジングと書くと大げさだろうが、マクドナルドを食べる際に意識するようになって大きく改善されたことについて書いていこうと思う。 なお、このブログ内での記述はあくまで個人の感想によるものであり、またマクドナルドのポテトを…

GitHubのREADMEで画像サイズを指定する方法

ちょっと苦労したので備忘録として残しておきます。 前提条件 あくまで自身の備忘録として残しているので、網羅的な内容ではない GitHubのissueに画像をアップロードして、そちらの画像をREADMEから参照からする際にこの指定方法を用いている GitHub Flavor…

E2E テストフレームワークのTestCafeを始める前に聞かれる、TestCafe Browser Toolsの権限許可について

E2EテストのフレームワークであるTestCafe。 数年前からTestCafeが良い、という話を時折耳にする機会があった。 testcafe.io 今までなかなか触れる機会がなかったが、ちょうど今Reactでオセロを作っているので、それのE2EテストをTestCafeで書いてみようとし…

Docker for WIndowsで"open //./pipe/docker_engine: The system cannot find the file specified. " みたいなエラーが出たときの対応

Docker for Windowsを使っていたときのこと、PCを再起動したタイミングで docker ps などでDockerコマンドを打つと、下記のようなエラーを吐くようになってコンテナを起動することができなくなってしまった。 # エラー全文は載せていないですが、あしからず …

LINEポイントの使いみちについて調べてみた

LINEポイントの有効期限があと30日で切れる、という通知がLINEから来たので、そもそもLINEポイントはどういう用途で使えるのかを改めて調べてみようと思った次第。 なおこの有効期限だが、LINEポイントを新たに獲得すれば期限は延長されるらしい。 mobile.li…

シェル内の移動に便利そうなjumpをインストールして触ってみた備忘録

rebuild.fmのエピソード313で話題に上がっていたjumpを試してみることにしたので、そのインストールに関する備忘録 rebuild.fm jumpのリポジトリはこちら github.com jumpのインストール 各プラットフォーム向けのインストール方法が用意されており、Go環境…

8月23日から24日にかけてGoogle Search Console上での検索パフォーマンスが急落しているが気にしなくて良さそう

運営している複数のサイトのGoogle Search Consoleを見ていたら、8月23日から24日にかけてGoogle Search Console上での検索パフォーマンスが急落していた。 検索パフォーマンスの落ち方がどのサイトでも共通していたので、これはなにかと思って調べてみると…

Google AdSenseのiPhoneアプリが終了していた

最近Google AdSenseのiPhoneアプリが壊れているなーと思ったら、どうやらアプリ自体が終了していたらしいです。知らなかった。 試しにツイッターで検索してみたところ、どうやら以前から終了は予告されていた模様。こういうときツイッター検索って本当に便利…

Expressのappモジュールを元にして簡単にSitemapを生成するためのnpmパッケージ【easy-express-sitemap-generator】を作成した

作ってみた報告です(まだAlpha版ですが)。 Expressのappモジュールを元にして簡単にSitemapを生成するためのnpmパッケージを作りました。 名前はeasy-express-sitemap-generatorといいます。 github.com インストールする際は npm install easy-express-site…

useRefを使って指定したDOMのサイズを取得する方法

最近、表題のような処理を書くべき状況になったのだが、うまく書けなかったので、反省の意味を込めて書いていく。 useRef を用いて対象のDOMを取得 useRef を使うと対象のDOMを取得できる。 https://ja.reactjs.org/docs/hooks-reference.html#useref Ref と…

data-cfemailというHTML属性と[email protected]という文字列について調べてみた

先日 data-cfemail という見慣れないHTML属性を見た。これは a タグで囲われており、囲われている中のテキストは [email protected] という文字列が表示されている。 また /cdn-cgi/l/email-protection へのリンクにもなっている。 内容としては表示されてい…

Pythonの小さなWebフレームワークBottleについているSimpleTemplate Engineを試してみた

Pythonで一番小さなWebフレームワークと言われているBottle。 このBottleにはSimpleTemplate Engineというテンプレートエンジンがついている https://bottlepy.org/docs/dev/stpl.html 私は今までこれを使ったことがなかったのだが、先日自身が公開しているb…

pyenvをM1 MacにインストールしてPython環境を構築する

M1 Mac(Apple Silicon)に Python 環境を作りたくなったのでインストールしていく 基本的に私はGitで直接チェックアウトしてインストールする方法をいつも選択していたので、今回もこちらをセレクト。 ( brew は使いません) https://github.com/pyenv/pyenv#b…

cssフレームワークのBULMAで text-align:center を実現したい場合は "has-text-centered"を使う

BULMAを使っていて text-align:center はどうやるのか、一瞬迷った。 ドキュメント上で cetner または text-align などと検索しても出てこないので、ないのかなと一瞬思ったがそんなことはなく、探した方が悪かっただけだ。 BULMAでtext-align:centerを実現…

BootstrapのBorder spinner (ローディングスピナー) が動かないときにチェックすること(Bootstrap v4)

Bootstrap(v4)の下記のページを参考にしてBorder spinnerを表示させようとした際、そのままコードをコピペしただけでは動かなかった。 getbootstrap.com 本来ここに表示されているコードをそのままコピペするだけで動くはずだが、コピペしてもローディングス…

MDN Web Docsへのコントリビュート手順(備忘録)

これはMDN Web Docsへのコントリビュートを実際に行った際の手順などをメモした備忘録となる。 目次 目次 アカウントを作成(これは不要かもしれない) コントリビューションに関するMDNのドキュメント MDNへコントリビューションする際はGitHubアカウントが必…

Markdownを書いてサクッとHTMLを生成したいときに便利なツールを見つけた

md2htmlというツールがサクッとMarkdownからHTMLを生成できて便利 普段MakrdownからHTMLを生成するときは、JSなどで簡単なスクリプトを書いて変換をしていたが、そういうことをするのも面倒に思えたある日、下記のようなツールを見つけた。 md2html 使い方は…

深い階層を持つHTMLを生成するための、どうでも良い関数を作ったのメモ(React)

深い階層を持つHTMLを生成するための関数を書いた。 あまり使いみちはない。 下記で書いている、Reactを自作する際に生み出した謎の副産物である。 shinshin86.hateblo.jp 以下、ソースコード。 const generateDeepElement = (depth) => { depth = depth - 1…

Reactを自作しようとしたときに"pragma and pragmaFrag cannot be set when runtime is automatic."のエラーが出たのでその対応方法を書いていく

最近、Reactの中身をちゃんと理解せねばと思い、Reactの自作につながるような勉強をしています。 一応下に備忘録を残していっていますが、個人用のメモみたいなレベルなので、あまり見やすくはないと思います。 うまく成果を得られたらQiitaかZennにまとめよ…

Water.cssを使っていてレスポンシブデザインにならないときにチェックすること

Water.css、とても便利なので、あまりデザインの凝らないシンプルなWebアプリを作ろうというときには結構な頻度で手が伸びます。 watercss.kognise.dev cssのことを気にせず、HTMLでページの構造を作っているだけで、それなりに整ったデザインになるのはとて…