私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
Google DomainsからCloudflare registrarにドメインとメールを移管した
Google DomainsがSquarespaceに買収されるので、持っているドメインとカスタムドメインのメールアドレスをCloudflare Registrarに移管した。 Cloudflare Registrar · Cloudflare Registrar docs 基本的にはCloudflare Registrarに表示される手順でやっておけば、問題は起きなかったので、よくできてると思った。 次のような手順で順番に移管していたので、移管時のメモ。 手順 Google Domainsの移行準備 Cloudflareのname serverを使うように移行する ドメインの移管 メールの転送設定 Google Domainsの移行準備 移管する前に、Google Domainに登録しているドメインの設定を変更しておく。 それぞれONになってると移管時に問題が発生する。 DNSSECを無
Bluesky/GitHub/Calendar/RSSをNotionに同期するbluenotiondbを作った
Notionには同期データベースとしてGitHubやJiraなどを同期できるDBがありますが、任意のサービスには対応していません。 もっと色々なサービスと同期するNotionのデータベースが欲しかったので、bluenotiondbというツールを作りました。 azu/bluenotiondb: Sync Bluesky/GitHub/Calendar/RSS to Notion. bluenotiondbは、色々なサービスからデータを取得してそのデータをNotionのデータベースに追加するツールです。 現状では次のサービスに対応しています。 Bluesky Pull Posts from Bluesky and push to Notion GitHub Activity Pull events of GitHub user and push to Notion Open/Close/Com
GitHub ActionsでRSSをTwitterに投稿するアクションを作った
RSSの新しい投稿をTwitterに投稿するGitHub Actionsを作りました。 azu/rss-to-twitter: GitHub Actions: RSS to Twitter IFTTTでRSSをTwitterに投稿していたのですが、2023年に無料プランが終了するので代替手段を探していました。 色々探したけど欲しいものがなかったので作りました。 Updates to IFTTT free tier - IFTTT RSSでTwitterに投稿してたのが、GitHub Pagesで管理してるブログだけだったのでGitHub ActionsでRSSをチェックしてTwitterに投稿するアクションを作りました。 準備 Twitter API Keyの取得 投稿するアカウントでTwitter Appsを作り、API KeyやAccess Tokenを取得する必要があります。 投稿し
GitHubのリリースノートを自動化する仕組み
GitHub のAutomatically generated release notesを使ってリリースノートの内容を PR に基づいて自動生成するフローを作りました。 今までは、コミットメッセージのルールであるConventional Commitsとconventional-github-releaserを使って、コミットからリリースノートを自動生成していました。 他の人の PR でも、squah merge でコミットメッセージを書き換えることで、リリースノートに反映されるようにしていました。 ただ GitHub に仕組みは違うけどほぼ似たことをするAutomatically generated release notesという機能が実装されているので、これをベースに移行しようと思って、そのワークフローを作っていました。 リリースノート自動生成テクニック - mizdra’s bl
1Passwordを使って、ローカルにファイル(~/.configや.env)として置かれてる生のパスワードなどを削除した
1Passwordを使って、ローカルにファイル(~/.configや.env)として置かれてる生のパスワードなどを削除した 最近、コミットはされないがローカルのディレクトリに置かれている.envのようなファイルから生のパスワードやAPI Tokenを削除しました。 これは、ローカルでマルウェアを実行した場合に、ローカルに置かれている生のパスワードやAPI Tokenを盗まれる可能性があるためです。 最近は、npm install時のpostinstallでのデータを盗むようなマルウェアを仕込んだりするソフトウェアサプライチェーン攻撃が多様化しています。 Compromised PyTorch-nightly dependency chain between December 25th and December 30th, 2022. | PyTorch What’s Really Goin
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
パスワード管理/MFA管理の戦略
自分のパスワードやMFA(多要素認証)の管理方法についてまとめた記事です。 パスワード管理とTOTP(Time-based One-time Password)の管理として1Passwordを使い、MFA(多要素認証)の2要素目としてYubiKeyを2枚使っています。 パスワード管理とMFA管理を安全で使いやすくするのはかなり複雑で難しいため、完璧にやるのが難しいです。 そのため、その難しさから二要素認証を設定するべきアカウントも手間などから設定を省いてしまったり、管理方法に一貫性がありませんでした。 この記事では、パスワード管理/MFA管理の戦略を決めることで、どのサイトのどのアカウントのパスワード管理をあまり頭を使わなくてもできるようにするのが目的です。利便性と安全性のバランスを意識はしていますが、この記事のやり方が正解ではないので、各自の目的に合わせて読み替えると良いと思います。 用
1クリックで始めるGitHubリリース as a ブログ
GitHubリリースという、GitHubでタグに対してリリースノートを書ける機能があります。 このリリースノート機能は、パーマネントリンクもあるし、Markdownも書けるし、画像もアップロードできるし、絵文字でリアクションもできるし、RSSもあるし、通知機能もあるし、GitHub Discussion連携すればコメントも書けるし、全文検索もついてくるしこれブログとして使えるんじゃないかと思いました。 そういう発想から、GitHubリリースノートをブログとして運用するためのちょっとしたブログシステムを作って使っています。 次のリポジトリが実際に動いてるものです。 azu/book-review: 本を読んだ感想を書くブログです。 リリースの一覧を見ると本の感想の記事が並んでいます。 Releases · azu/book-review Release 伴走型支援: 新しい支援と社会のカタチ
Nreal Air + Macbook Pro/iPad Proで、文章やコードを書く
最近は、Nreal Airというサングラス型のディスプレイを使って、プログラミングしたり文章を書いたりしています。 Nreal Airは、いわゆるARグラスというジャンルのガジェットです。 ただし、自分の場合はiPad ProやMacbook ProなどのUSB Cで接続できるデバイスから、ただの外部ディスプレイとしてNreal Airを使っています。(AR的な使い方は実質Androidの特定の端末のみが現時点では対応しています。) OculusなどのVRでも同じようなことをやっているので、VRでやる人は次の記事を参照してください。 Immersed + Meta Quest(Oculus Quest) + Macbook Proで、文章やコードを書く | Web Scratch 必要な道具 Nreal Air サングラス型のディスプレイとUSB Cケーブルが同梱されています Nreal
Maintainer Month: なぜtextlintを作ったか
今では200以上のルールがある自然言語のLintツールであるtextlintがどのように作られたかを振り返る記事です。 6月はMaintainer MonthというイベントをGitHubが主催しています。 Maintainer Month is a reminder for the ecosystem to support, celebrate, and compensate open source maintainers. – Maintainer Month Maintainer Monthは、オープンソースのメンテナーが集まって情報共有したり、メンテナーを祝ったり、支援したりするイベントです。 メンテナーがどういうサポートを求めているかを知る、負荷が特定の箇所に集中するエコシステムはバランスが悪いのでそれを支援する方法を知るといったことを思い出すのがMaintainer Monthの
Komesan: 指定したURLに関連するはてなブックマーク、Twitter、HackerNewsのコメントを表示する
Komesan: 指定したURLに関連するはてなブックマーク、Twitter、HackerNewsのコメントを表示する Komesanというはてなブックマーク、Twitter、HackerNewsをまとめて表示するサイトを作りました。 https://komesan.pages.dev/?url=https://pages.cloudflare.com HackerNewsはオプショナル: https://komesan.pages.dev/?url=https://pages.cloudflare.com&service=hackerNews ブックマークレットで実行する場合は、次のようなURLのブックマークを利用します。サイトの下部に同じものがおいてあります。 javascript:void(window.open("https://komesan.pages.dev/?url="+e
KindleのメモとハイライトをMarkdownにするJavaScriptライブラリを書いた
Kindleでハイライトつけた内容はKindle: メモとハイライトで閲覧できます。 このページの内容をMarkdownに変換してコピーするためのライブラリを書きました。 azu/kindle-highlight-to-markdown: Convert Your Kindle highlight & Note to Markdown/JSON 使い方 コピーしたい本をKindle: メモとハイライトで開きます ブラウザの開発者ツールの”コンソール”を開きます Firefox: ウェブコンソール - 開発ツール | MDN Chrome: Console overview - Chrome Developers 次のコードを実行するとクリップボードにコピーできます const { parsePage, toMarkdown } = await import('https://cdn.sky
Apple Silicon Macbook Proへの移行でやったこと @ 2021
移行ツールを使うと余計なものが色々入ってしまうため、 Intel Macbook ProからApple Silicon Macbook Proへと手動で移行した。 移行元: Macbook Pro 13” Intel Core i7 32GB 2020 移行先: Macbook Pro 14” Apple M1 Max 64 GB 2021 最初にやっておくと便利なこと それぞれのmacでユニバーサルクリップボードを有効化 ファイルとか文字列のやりとりが楽になる ユニバーサルクリップボードを使って Apple デバイス間でコピーアンドペーストする - Apple サポート (日本) 適当に元macでファイルをコピー、新しいmacでペーストするだけでファイルコピーできる scpやrsyncでファイルを渡せるようにする
PC/macOSのマイクがミュート状態か入力中かを表示するアプリを書いた
mic-mutebarというPCのマイクがミュート状態か入力中(話している状態)かを表示するシンプルなアプリを書きました。 マイクの状態を表示するシンプルなアプリを書いた。 ミュートした状態で話してしまう問題を回避する目的 -- azu/mic-mutebar: mic mute status barhttps://t.co/GiYHoccZEY pic.twitter.com/jM2auYWWfG — azu (@azu_re) November 27, 2021 シンプルな棒状のアプリで、透明ウィンドウになっているので任意の位置に移動してマイクの状態を表示できます。 作った理由 前のMacbook ProではTouchbarがあったのですが、MacBook Pro (14”, 2021)に変えたらTouchbarがありませんでした。 Touchbarでは、Mutify for Macを
GitHub Sponsorsの募集を始めてから2年が経ったので振り返る
この記事は、GitHub Sponsorsを募集開始してから、約2年経つのでGitHub Sponsorsについて振り返った記事です。 この記事では、GitHub Sponsorsを始めた理由、Tierの設計、やってみた結果と感謝、やったことによる変化、これからやる方へのアドバイスなどを書いています。 GitHub Sponsorsを始めた理由 2019年10月からGitHub Sponsorsのページを公開して、スポンサーの募集を開始しました。 GitHub Sponsorの募集ページを公開しました。https://t.co/YpSPfMPxjU#Promise本 や #jsprimer を書いたり、textlintを作ったり色々OSSを作ってます。 後は https://t.co/CXy3hOXJ8q を8年ぐらい毎週更新してたりもします。@jser_info Sponsorとかもある
The Missing README: A Guide for the New Software Engineerを読んだ
The Missing README: A Guide for the New Software Engineerを読んだ The Missing READMEという新人ソフトウェアのためのエンジニアガイドの書籍を読んだ感想です。 The Missing README learning.oreillyで読める The Missing README: A Guide for the New Software Engineer 2021年8月10日 に出版された書籍 The Missing READMEはコード、設計、テスト、リファクタリング、例外処理やログ、依存管理、コードレビュー、CI/CD、インシデント対応、コミュニケーションやプロジェクト管理など幅広いことがすっきりとまとまってる感じの書籍です。 全体的に説明に出てくるコードは少なめです。逆を言えば特定のプログラミング言語に依存していな
追加の依存パッケージなしでプロジェクトごとのGitコミットフックを設定する方法
Git 2.9以降はcore.hooksPathというオプションでグローバルまたはローカルのGitフックのディレクトリを指定できるようになっています。 Gitのcore.hooksPathオプションを利用するとhusky、simple-git-hooksのような追加の依存がなくても、Gitの機能だけでGitフックのコードをバージョン管理して、プロジェクトのセットアップ時にプロジェクトごとのGitフックを設定できます。 📝 類似するGitフックを管理するツールとしてpre-commitやLefthookもあります。これらのツールはGitフックの管理だけではなく、ファイルの種類ごとに実行するコマンドをわけて書けるようになっています。 つまり、lint-stagedのような機能も含むので、この記事で紹介するアプローチ以上の機能も同梱されています。 Node.jsプロジェクトの例 ここでは具体例
Semgrepを使った構文木ベースの検索と置換でコードのリファクタリングをする
Semgrepはr2cという会社/サービスが開発しているツールです。 Semgrepの特徴としてTree-sitterでコードをパースしたConcrete Syntax Tree(CST)の構文木をベースにして検索や置換ができます。 コードをCSTにパースした構文木に対して検索/置換することで、ただの文字列検索/置換に比べてミスマッチしない検索/置換ができます。 例えば、次のa.js、b.js、c.jsはそれぞれevalを使っていますが、スタイルは違いますが意味はほとんど同じです。 // a.js eval("const a = 1, b = 2; eval(a + b);"); // b.js eval('const a = 1, b = 2;\ eval(a + b);'); // c.js eval(`const a = 1, b = 2; eval(a + b);`); $ sem
自分のTweetsをインクリメンタル検索できるサービス作成キット と Tweetsをまとめて削除するツールを書いた
自分のTweetsをインクリメンタルに全文検索できるmytweetsを作りました。 また、自分のTweetsをtextlintや単語感情極性対応表や辞書ベースでフィルタリングしてまとめて削除するdelete-tweetsを作りました。 どちらもTwitterのアーカイブを使って今までのすべてのTweetsを対象にしています。 そのため、どちらも最初に次のドキュメントに従って、Twitterのデータアーカイブをダウンロードしておく必要があります。(申請から1日ぐらいかかります) 全ツイート履歴とツイートをダウンロードする方法 | Twitterヘルプ mytweets mytweetsは、Twilogやツイセーブのように自分のTweetsの履歴を全文検索できるサイトを作るツールキットです。 Twitterのデータアーカイブをインポートするので過去全ての履歴に対応していて、 また新しいTwee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
