Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required. For online documentation and support please refer to nginx.org. Commercial support is available at nginx.com. Thank you for using nginx.
欽ちゃんの仮装大賞 パネル再現ツール
欽ちゃんの仮装大賞で使われていたパネルをwebアプリのツールとして再現してみました。操作方法は A S D キーでカウントアップ、R キーでリセットできます。ヘルプボタンからスマホ向けのボタンを表示する機能がありますので、スマホユーザーの方はそちらのボタンを利用して楽しんでください。
新春ツール入れ替えシリーズです。macOS における Spotlight 的なランチャーツールとして Alfred を長いこと使ってきたが、最近 Raycast を使ってみてこれがよかったので、以来ずっと使い続けている。 Raycast - Supercharged productivity 開発者のための便利ツールという売り文句のようで、そういう点がまさに気に入った。 カレンダーの次の予定が表示される まずこれがいい。これだけで十分使える。ランチャーを起動したときにカレンダーの次の予定を表示してくれる。Enter でそのまま Meet や Zoom を開いてくれるのでキーボードから手を離す必要がない。 もともとカレンダーの確認には Dato を使っていたし今も使ってるが、これでミーティングへのアクセスがかなりよくなった。 コミュニティベースの Store で機能を追加できる https:
Mini Tokyo 3D
A real-time 3D digital map of Tokyo's public transport system. This data visualization was produced by Akihiko Kusanagi.
最近ある YouTuber に急にハマった。その人は音楽系やゲーム系などいろんな YouTuber たちとコラボしていて、誰と誰が繋がっているのか把握するのが難しかったので、図にしてみようと思った。 方法 YouTuber 同士の繋がりやコラボレーションを可視化しているプロジェクトはいくつかあったので、参考になる方法がないか探してみた。 おすすめチャンネル欄を使う www.gugelproductions.de この記事では、あるチャンネルが別のチャンネルをおすすめチャンネル欄で紹介していれば、そこに繋がりがあると判定して、その繋がりを可視化していた。 こういうやつ けれどおすすめ欄には大抵サブチャンネルやグループのメンバーのチャンネルくらいしか入っておらず、逐一コラボ相手を載せる人は少ないので、この方法では不十分そうだった。 Twitter を使う datalion.com ここに載って
ファイルをエディターで一括リネームするツールをGo言語で作った！ ― 機能を増やさない信念と、OSSとの付き合い方 - プログラムモグモグ
ファイルを一括でリネームしたいことはありませんか。私はあります。ということで作りました。 インストールはHomebrew brew install itchyny/tap/mmv または以下のコマンドでできます。 go get github.com/itchyny/mmv/cmd/mmv スクリーンショットではvimが起動していますが、 $EDITOR が設定されていればそれを使って編集することができます。 エディターでファイル名を編集して一括でリネームするというのは、新しい発想ではありません。 実際、多くのソフトウェア (特にファイラー) がこの機能を実装しています。 massren vimv qmv Vim plugin vimfiler Defx Vaffle fila.vim Emacs Dired 私はvimfilerの一括リネーム機能をよく使っていました。 特に不満はないのです
tail -F /path/to/access.log のようなストリームに対して何度でもgrepを試行錯誤できるツール filt を作った - Copy/Cut/Paste/Hatena
filtというツールを作りました github.com これはなに まずは以下のスクリーンキャストをご覧ください tail -F /path/to/access.log のようなログの流れを止めてはgrepをして、止めてはgrepのコマンドを変更してしています。 その間、実は裏では実際のストリームは止めていません。 つまり、ストリームのパイプ先に まずfiltを指定しておく ことで、ストリーム自体は止めずに、パイプ先のコマンドを 後で何度でも 変更できます。 grepやsedやawkが下手なので何度も試行したい 私はgrepやsedやawkなどのコマンドを一発で指定できるほど練度が高くないので、コマンドを組み立てるために何度も Ctrl+C でキャンセルしては再実行の繰り返しをしていました。 最近は stern や Harvest などでKubernetesのPodのログを流すことをもある
新型コロナウイルス感染 世界マップ
編集榎本敦、前田絵美子、五十嵐孝、綱島雄太、久保田昌幸、有年由貴子、富田美緒 ディレクション清水明、久能弘嗣、安田翔平 デザイン・マークアップ久能弘嗣、安田翔平 プログラム加藤浩也、清水正行、森川将平
GitHubリリースという、GitHubでタグに対してリリースノートを書ける機能があります。 このリリースノート機能は、パーマネントリンクもあるし、Markdownも書けるし、画像もアップロードできるし、絵文字でリアクションもできるし、RSSもあるし、通知機能もあるし、GitHub Discussion連携すればコメントも書けるし、全文検索もついてくるしこれブログとして使えるんじゃないかと思いました。 そういう発想から、GitHubリリースノートをブログとして運用するためのちょっとしたブログシステムを作って使っています。 次のリポジトリが実際に動いてるものです。 azu/book-review: 本を読んだ感想を書くブログです。 リリースの一覧を見ると本の感想の記事が並んでいます。 Releases · azu/book-review Release 伴走型支援: 新しい支援と社会のカタチ
SlackやGoogle Docsにページへのリンクを共有するなら圧倒的にcocopyが楽 - 詩と創作・思索のひろば
Scrapbox のような Wiki 的なツールでは URL にページ名が入ることが多く、URL を見るだけでどんな内容なのか想像がついてよい一方で、こういう URL を Slack や Google Docs のような別の場所に共有するとパーセントエンコーディングされた URL になってしまい意味がわからなくなる。日本語を書いていることだけが分かる状態。 マルチバイトしかないと本当にわからないね Slack がアクセスできない URL だと、プレビューも展開してくれないしね。かといってデコードした状態の URL を貼っても、変なところで途切れたりする。 ・（中黒）でリンクが途切れている 文字は難しい……。URL の解釈はものによって異なってくるのもまた困る。これはプレーンな文字列を渡しているのでこういう困難が出てくるのであって、最近はクリップボードでリッチなコンテンツを受け渡しすることが
HTML5 Worker Test
Which APIs are supported in Web Workers and Service Workers? This chart shows the breakdown for each browser, based on automated testing. Note that the goal is not for browsers to reach 100% on all tests. Some APIs are intentionally not exposed to workers. This site is for informational purposes only.
自分のTweetsをインクリメンタルに全文検索できるmytweetsを作りました。 また、自分のTweetsをtextlintや単語感情極性対応表や辞書ベースでフィルタリングしてまとめて削除するdelete-tweetsを作りました。 どちらもTwitterのアーカイブを使って今までのすべてのTweetsを対象にしています。 そのため、どちらも最初に次のドキュメントに従って、Twitterのデータアーカイブをダウンロードしておく必要があります。(申請から1日ぐらいかかります) 全ツイート履歴とツイートをダウンロードする方法 | Twitterヘルプ mytweets mytweetsは、Twilogやツイセーブのように自分のTweetsの履歴を全文検索できるサイトを作るツールキットです。 Twitterのデータアーカイブをインポートするので過去全ての履歴に対応していて、 また新しいTwee
GitHub - hediet/vscode-drawio: This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Draw.io VS Code Integration This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code. Mentioned in the official diagrams.net blog. Features Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor. To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it. .drawio.svg are valid .svg files that can be embe
RFC 3339 vs ISO 8601
Comparison between RFC 3339 and ISO 8601 date formats
この記事は はてなエンジニア Advent Calendar 2022 2日目の記事です。 みなさんは Slack の RSS アプリ を使っていますか? /feed subscribe FEED_URL で RSS や Atom フィードをチャンネルに流すことができます。 Slack に RSS フィードを追加する | Slack これを使って各種リリースノートやニュースサイトの新着をいろんなチャンネルに流しています。Slack をお使いの皆様もきっとそうしているでしょう。 フィードによって技術の最前線をキャッチアップでき、供給された話題は参加者同士の活発な議論を産む。学習とコラボレーションが同時に促進される素晴らしい機能と言えますね。 . . . 本当か??? 例えば BigQuery のリリースノートを流すとこうなる!! 激流 これ 5 記事あるわけじゃないからな。 フィード的には
開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools
開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools
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
こういうツイートをした。 会社用のGoogleアカウントと家用のGoogleアカウントがあって、会社SlackからGCPのURLをクリックしたら家用のアカウントで開いてしまうみたいなのを1000万回はしてるんだけど、未だにどうすればいいのかわからない— ひさいち (@hisaichi5518) 2020年7月25日 家用アカウントで会社のGCPにアクセスするとエラーになるので、毎回右上のアカウント切り替えで切り替えてるんだけど、めんどくさいな〜という話。 色々と教えてもらった。みなさん、ありがとうございます！ そのなかで、まさにこれがほしかったという感じのを教えてもらった。 使ったことないんですが、こういう感じでブラウザアプリを選択するプロキシーアプリがあるみたいなので、こういうの使うといいのか...? と思ったりしましたhttps://t.co/vOIZmcBuQqhttps://t.c
js を書いて URL やページの内容を加工してコピーできる Chrome 拡張ココピーのご紹介 - ぽ靴な缶
この記事は はてなエンジニア Advent Calendar 2020 - Qiita の23日目の記事です。 qiita.com 昨日は id:Krouton さんの 30日でできる! OS自作入門 を読むために nasm_of_nask というコンパイラを作った話 - KRAZY感情STYLE でした。よかったですね。 コードでコピーするココピーです 今日はちょっと前に作ったブラウザ拡張、cocopy を紹介します。 chrome.google.com しゅぴっと拡張を開いてコピーするフォーマットを選択できます。 このアニメーションはコピー機がブーンとスキャンする感じをイメージしています。 利用者が js を書いてフォーマットを追加できます。 コードからは URL、タイトル、選択中のテキスト、ページの HTML にアクセスできます。 Markdown, Scrapbox HTML, は
2022年のオープンソース活動の振り返り記事です。 今までの振り返りの一覧です。 今年のオープンソース活動振り返り @ 2021 | Web Scratch 今年のオープンソース活動振り返り @ 2020 | Web Scratch 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2022年のGitHubのPublicなContributionsは7000~8000ぐらいを推移していました。 Privateリポジトリも含めると大体1.5
GitHub - microsoft/winget-cli: Windows Package Manager CLI (aka winget)
Windows Package Manager WinGet Client If you are new to the Windows Package Manager, you might want to Explore the Windows Package Manager tool. The packages available to the client are in the Windows Package Manager Community Repository. Installing The Client Note: The client requires Windows 10 1809 (build 17763) or later at this time. Windows Server 2019 is not supported as the Microsoft Store
delete-github-branchesというブランチの命名ルールを定義して、そのルールにあっていないブランチを削除するCLIツールを書きました。 delete-github-branchesはCLIですが、GitHub Actionsのcron処理と合わせれば、ルールにあってないブランチをGitHubから自動的に削除できます。 不要なブランチを削除することで、リポジトリからノイズとなるブランチを減らすのが目的です。 Pull Requestなしで放置されてるブランチが単なる消し忘れ以外であることは少ないので、そのようなブランチを減らすことでpullした時のノイズやサイズを減らすの目的です。 (活発なリポジトリだと放置ブランチがconflictだらけになるのでマージが難しいです。またGitHubにはDraft PRもあります) CLIの使い方 delete-github-branche
「外部パッケージの型定義もインストールし推論できるTypeScript playgroundを作った」という題で登壇してきました＋スライドの補足
「外部パッケージの型定義もインストールし推論できるTypeScript playgroundを作った」という題で登壇してきました＋スライドの補足 “外部ライブラリもインストール・型解釈できる TypeScript playground を作った”という題で俺得フロントエンド (1) LT 会という勉強会で登壇してきました。スライドはこちらです。 — 外部ライブラリもインストール・型解釈できる TypeScript playground を作った スライドの内容をそのまま書いても意味がないので詳しくはスライドを読んでいただきたいのですが、発表時間の都合・構成力不足で伝えきれなかった部分の補足・補完的なものを書きます。 この playground のより詳細な説明、内部で使ってる技術の説明、この playground に限らず汎用的に活用できそうな技術の話をします。 何を作ったの — Type
GitHub ActionsでのJestのテスト実行時に失敗箇所をPRへのアノテーションとして表示するレポーター - いけだや技術ノート
このような便利なパッケージがありました。 GitHub Actionsにはworkflow commandsと呼ばれる、echoコマンドと特定の形式の文字列を使うことでActionsの処理に一部介入できる機能があります。その中にはファイルの特定の箇所（行・カラム）にdebug/warning/errorメッセージをPRのアノテーションとして追加できるコマンドがあります。jest-github-actions-reporterではJestのレポーターの実装としてそのSetting an error messageコマンドを使い、Jestのテストの失敗結果をerrorアノテーションとしてPRの差分表示上で簡単に結果が閲覧できるようになっています。 こういうやり方があるのはRenovateのこのPRで気付きました。 きっとそのためのJestのレポーターをパッケージとして作成・公開している人がいる
BlurHashBlurHash is a compact representation of a placeholder for an image. Get started More on our blog Why BlurHash?Why would you want this?Does your designer cry every time you load their beautifully designed screen, and it is full of empty boxes because all the images have not loaded yet? Does your database engineer cry when you want to solve this by trying to cram little thumbnail images into
GitHub - zthxxx/react-dev-inspector: jump to local IDE code directly from browser React component by just a simple click
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub Pull-ReqでCIの完了をデスクトップ通知するChrome拡張 "WatchRaptor" を作った - Islands in the byte stream
Chrome Web Store chrome.google.com 使い方ですが、GitHub PR pageに次のようにCI statusにcheckboxが現れるので、完了通知がほしいCI statusにチェックをつけるだけ。 チェックされたCI statusが完了（success or failure）になると、次のようなデスクトップ通知が出ます。この完了したときの通知をクリックすると該当のGitHub PR pageのタブをアクティブにします。 tab idごとにcheck状態をもっているので、リロードしてもtabごとのcheck状態は維持されます。 現在（v0.9.2）の機能はこれだけです。既知のバグとして、GitHubのPR画面で差分をみたりdiscussionに戻ったりしているとcheckboxが出ないことがありますが、そういう場合はリロードするとcheckboxが出ると思
About meNode.js, React, React Native 言語の中身読んだり AST 解析で遊ぶのが好き
Weneedfeedの運用小話
Weneedfeedを運用している中で得られた情報を書き留めておく。 主にGitHub Actionsや、RSSフィードに関する話が多く含まれる。Weneedfeedというのはウェブページからフィードを生成するツールで、これについては過去にも記事に書いた。 GitHub Actions 「GitHubのリポジトリにYAMLファイルを置くだけでフィード群が用意される」という状態を実現するために、GitHub Actionsを使っている。具体的には、次の処理を定期的に実行している。 YAMLに記載された情報を元にフィード群を生成する gh-pagesブランチにpushする この内、1の処理をやるためにweneedfeed-actionを用意している。2の処理はactions-gh-pagesでやっている。GitHub Actionsにcrontab形式でスケジュールを指定する仕組みがあるので、
PostemというTwitterやはてなブックマークへクロスポスト(同時に投稿)できるElectron製のクライアントアプリを作りました。 Features Twitter、はてなブックマークなどへのクロスポスト はてなブックマークを使ったタグ補完 独自に対応サービスを追加可能 入力欄はtextlintでのリアルタイムLint URLスキームを使ってブラウザから起動できる PostemでTwitterとはてなブックマークへクロスポストしてる様子。https://t.co/N3EYvLIGDH pic.twitter.com/Xl9p8esrvd — azu (@azu_re) May 1, 2019 一言でいえばTomblooやTombfixのようなクロスポストクライアントでスタンドアロンなアプリです。 azu/postem: Cross posting client for twitte
Scrapbox のページの編集履歴を、スライダーで動かしながら眺められる UserScript を書きました*1。 scrapbox.io ページメニューに追加されたボタンを押すと、そのページの編集履歴を取得して、履歴ビューを表示します (メンバーでないプロジェクトでは API で取得できないので見られません)。 上にあるスライダーを右へ左へ移動すると、新しくなったり古くなったりします。 詳しく Scrapbox の編集履歴 API を使っています。 scrapbox.io 全く同じように編集履歴を取得し、commits の changes のひとつごとに、ページの内容の状態をつくり、スライダーが動いたらその状態を表示する感じです。 最初は、 change ごとの、その時々のページの状態を持つようにしていました。ページの状態とは、行の id とその行に書いてある文字列の、ページ全体分です
Web site created using create-react-app
エディタブ郎
新規タブをテキストエディタにするChrome拡張、エディタブ郎のご紹介。 拡張をインストールすると、新規タブがテキストエディタへと切り替わります。 機能は次の通り。 テキストをブラウザ内に自動記憶 ダークモード対応 (OSの設定と同期) Markdownを書いたときに色付け Visual Studio Codeで出来ること色々 Slackやメールの下書きとして使うのも良し、やることリストとして使うのもよし。自分も色々な用途で使っています。作業中に思い付いたことをメモしておくとか、買い物リストを書いておくとか、英語でメッセージを書くときに一時的にここに書いて推敲するとか。 新規タブを開いた様子 エディ太郎というMac向けのアプリがあり、エディタブ郎という名前はこれをリスペクトして付けています。Windowsでも使いたいという気持ちと、使うアプリをあまり増やしたくないという気持ちがあり、ブラウ
まちカドまぞく ロゴジェネレーター
まちカドまぞくのロゴ風画像を作れるジェネレーターです シャミ子は悪くないよ… フォントはせのびゴシックと Raleway を使っています 気に入ったら Twitter でシェアしてくれると喜びます Tweet あとまだ見てない人はまちカドまぞくを見ようね ☝( ◠‿◠ ) 注意：Twitter や LINE などのアプリ内ブラウザでは正常に動作しません。 アプリ内ブラウザで開いている場合は通常のブラウザで開き直してください。 下の入力欄にそれぞれ文字を入れる 横並びになっているフォームはそれぞれ 1 文字だけ入ります アルファベット用のフォームは 80 字まで OK です 古いブラウザやブラウザ側で Web フォントを強制的にオフにしている場合、正しく描画されないことがあります 文字が合成されるので、保存ボタンを押して画像を保存する 「背景を塗りつぶす」のチェックを外すと透過 PNG 画像
Weneedfeed
ウェブページからフィードを生成するweneedfeedというツールをつくった。 使い方 このツールはRubygemとして実装されているので、Rubyがインストールされている環境が必要になる。ツール自体はgem installでインストールできる。 gem install weneedfeed 利用者には、URLとCSSセレクタをweneedfeed.ymlというYAML形式のファイルに書いてもらうことになる。例えばこのウェブサイト、r7kamura.comの新着記事のためのRSSフィードを生成しようとすると、こんな内容になる。 pages: id: r7kamuracom title: r7kamura.com url: https://r7kamura.com/ item_selector: li item_description_selector: p:nth-child(3) ite
この記事はemacs Advent Calendar 2021 の22日目の記事です。 小ネタで恐縮ですが、diff など表示するときに シンタックスハイライトして表示できるdelta というページャーと、delta を magit から呼び出せるようにする magit-delta というパッケージに感動したので紹介させてください。 delta とは 主には先も記載した通り diff など表示するときに シンタックスハイライトして表示できるツールとなっています。 詳しい機能の説明は下記となっています。 ハイライト以外にも良いなと個人的に思っているのは下記の機能です。 サイドバイサイドで縦に分割してdiff を表示できるオプション(--side-by-side) 'n' や 'N' キーで 差分ごとに移動できるオプション(--navigate) Githubになどにリンクできるオプション (
Faux Code Generator
Faux Code GeneratorTurn real code (Github Gist) into faux code (SVG image)
GitHub - suzuki-shunsuke/github-comment: CLI to create and hide GitHub comments
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
GitHub - obahareth/are-you-es5: A package to help you find out which of your node_modules aren't ES5 so you can add them to your Webpack/Rollup/Parcel transpilation steps.
A package to help you find out which of your node_modules aren't ES5 so you can add them to your Webpack/Rollup/Parcel transpilation steps. License
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Alfredの代替としてRaycastを使っている - 詩と創作・思索のひろば
YouTuber同士の繋がりを可視化する - 見返すかもしれないメモ
1クリックで始めるGitHubリリース as a ブログ
自分のTweetsをインクリメンタル検索できるサービス作成キット と Tweetsをまとめて削除するツールを書いた
Slack チャンネルのロボット帝国化を防ぐ feed-pruning-proxy - ぽ靴な缶
Semgrepを使った構文木ベースの検索と置換でコードのリファクタリングをする
finickyを使い始めた - パルカワ2
今年のオープンソース活動振り返り @ 2022
ルールに沿っていないGitHubのブランチを削除するツール/GitHub Actions
BlurHash
外部ライブラリもインストール・型解釈できるTypeScript playgroundを作った
Twitterやはてなブックマークにクロスポストできるクライアントアプリを書いた
Scrapboxの編集履歴をスライダーで眺められるUserScript - hogashi.*
ISUCON チーム名ジェネレータ
deltaとmagit-deltaでgit の差分を綺麗に表示✨
web-platform-tests dashboard
knoow.jp
togetter.com
approach.yahoo.co.jp
nagomi.ht.gob.jp
app.sakura.ne.jp
note.com/fukuchimakoto