SecretlintでAPIトークンや秘密鍵などのコミットを防止する
SecretlintはAPIトークンや秘密鍵のようなリポジトリにコミットしてはいけないデータを含んだファイルがないかをチェックするツールです。 Secretlintが見つけられるCredentials(秘匿情報)はプラグインで拡張できるようになっていて、npm、AWS、GCP、Slack、SSH秘密鍵、ベーシック認証などの検知に対応しています。 Gitのpre-commit hookやCIサービス上でSecretlintを使ってファイルの中身をチェックすることで、 リポジトリにうっかりCredentialsをコミットしてしまうことを防止する目的のLintツールです。 Credentials(秘匿情報)のチェックに特化したESLintやtextlintのようなLintツールです。 まずチェックしてみよう SecretlintはDockerかNode.jsが入っている環境なら次のコマンドで、現
eslint-cjs-to-esm: CJSをESMへとマイグレーションするツールを書いた
最近、色々なライブラリをCommonJS(CJS)からECMAScript Module(ESM)へとマイグレーションしています。 その際に、ESMでは__dirnameやrequireなどCommonJS特有の機能は使えなくなっています。 また、TypeScriptやBabelなど多くのツールはCJSではimport時に拡張子はなくても大丈夫ですが、ESMの場合はimport時に拡張子が必要になります。 import url from "node:url"; - import { mdEscape } from "./mdEscape"; + import { mdEscape } from "./mdEscape.js"; // ESMでは相対パスに拡張子は省略できない + const __filename = url.fileURLToPath(import.meta.url); /
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
JamstackプラットフォームのLayer0へNext.jsのアプリをデプロイしながら試す
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました JavaScriptのプラグインシステムについて書いた小さな電子書籍であるJavaScript Plugin Architecture 2.0をリリースしました。 1.0(初版)公開時の記事は次のページから参照できます。 JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch 2.0の詳しい変更点についてはリリースノートを参照してください。 Release v2.0.0 · azu/JavaScript-Plugin-Architecture 2.0リリース時にGitBookからHonKitに移行しました。 そのため、公開するURLが次の場所に変更されています。 https://a
手元のコードのパフォーマンスを計測するperformance.markのスニペット
一部の機能をパフォーマンス改善したときにそれを計測したり、データを集めたいときがあります。 しかし、それだけのためにライブラリを追加するのも面倒くさい(実装後に計測コードは外すので)し、コンソールに結果を出すのもデータ収集的にイマイチです。 // よくあるコンソールに表示するパフォーマンス計測コード const start = performance.now(); // ------------ // 計測したい処理を書く // ------------ console.log(`${performance.now() - start}ms`); 結果をコピーしてSpreadSheetなどで可視化できたり、処理時間と関連する要素も保存しておきたいです。 (コンソールに出力すると埋もれたり、加工がめんどうです) そのようなときによく使っているPerformance.mark()とPerfor
lernaでのmonorepoにおけるリリースフロー(Fixed/Independent)
一つのリポジトリで複数のパッケージを管理する際にはLernaとYarnのワークスペースを組み合わせて運用するmonorepoにすることが多いです。 lerna/lerna: A tool for managing JavaScript projects with multiple packages. LernaにはFixed(すべてのパッケージが同じバージョン)とIndependent(パッケージごとに異なるバージョン)のモードがあります。 https://github.com/lerna/lerna#how-it-works 基本的にはFixedの方が運用は簡単ですが、不自然なバージョンの上がり方を避けたい場合などはIndependentのmodeを使うことになります。 この記事では、Fixed modeとIndependent modeでのパッケージのリリースフローについて見ていきます
次世代 Web カンファレンス 2019 アウトラインメモ
次世代 Web カンファレンス - connpassに参加してきたのでメモ。 このメモは文字起こしではなくあくまでメモなので、そのままの発言じゃなくて解釈や要約が混じっています。 詳細は動画をみてください 次世代Webカンファレンス 2019 - YouTube パフォーマンス 登壇者 @1000ch likr @sisidovski 記録 ローディング周り 1000ch: WebKitのレンダリングの様子の動画を見たのが興味を持ったきっかけ 1000ch: HTTP/2になってきてローディングの通信を気にすることは減った? sisidovski: 同時接続数は気にすることは減ったけど、結局は気になる likr: H2 Pushとかが気になっている? 1000ch: 実際に使ったことないけど、会場で使ったことある人? 2割以内ぐらい sisidovski: 「Pushで早くなる」ということ
URLスキームで起動できる投稿専用のTwitterクライアントを書いた
post-tweetという投稿専用のTwitterクライアントを作って最近使っています。 post-tweetはものすごいシンプルで、文字列の投稿しかできません。 また、作った目的でもあるのですがURLスキームからタイトル、URL、引用文を渡して起動できるようになっています。(逆にそうじゃないケースではまともに使えないです) 目的 post-tweetはブラウザなどで見ているサイトをTwitterに投稿する目的で作成されています。 以前は、PNBTというGreasemonkeyスクリプトを使って投稿していましたが、それを簡略化して単体のElectronアプリにしたものに近いです。 ブラウザ拡張は制限される方向になっているので、ブラウザに依存しないものとして切り出したのが最初です。（このアプリはもともとPostemというクロスポストアプリに内蔵されていましたが、単体に切り出しました） 機能
JavaScriptの入門書を jsprimer.net で公開しました | Web Scratch
ここ数年書いているJavaScript入門本ですが https://jsprimer.net/ というURLで無料で公開しました。 まだ開発中です これからJavaScriptを始める人がES2015以降をベースにして学べる本 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、今のJavaScriptアプリケーションを読み書きできるようになるもの Webサイト: https://jsprimer.net/ リポジトリ: asciidwango/js-primer: JavaScriptの入門書 もともと公開してありましたが、jsprimer.net というドメインを取ったのでURLが変わっただけです。リダイレクトされているので既存のブックマークはリンク切れにはなりませんが、気になる人はブックマークしなおしてください。 またリポジトリ（asciidwan
gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する | Web Scratch
gas-webpagetestというGoogle Apps Scriptで動作するパフォーマンス計測ツールがあります。 このツールでは、WebPagetestという指定URLなどにウェブブラウザでアクセスし、パフォーマンスに関するメトリクスを取得するツールの計測や結果の記録を自動化できます。 記録はGoogle SpreadSheetに逐次書き込まれ、その記録をGoogle DataStudioで可視化したりダッシュボードを作成できます。 ここまででてきたツールは無料で十分に使えます。 gas-webpagetestを使うことでとりあえず計測を自動化してみるようなところを殆どコストなしに実現できます。 gas-webpagetestを使って取得した記録データをGoogle DataStuidoで可視化したサンプルは次のURLで確認できます。 DataStudio + gas-webpage
LDRライクなRSSリーダのIrodr 1.0.0をリリースした | Web Scratch
InoreaderのPCフロントエンドとして動くRSSリーダのIrodrが十分安定したので1.0.0をリリースしました。 LDRライクなInoreaderクライントのIrodr 1.0.0リリース。https://t.co/oco0VlPbBDhttps://t.co/UTPYfW3FnW pic.twitter.com/GzKLSj9zeo — azu (@azu_re) September 30, 2018 Release Release 1.0.0 · azu/irodr IrodrはLDRライクな操作感を実現するために作成したInoreaderのフロントエンドです。 RSSの管理やRSSのクロールなどはInoreaderが行っていて、IrodrはAPI経由でRSSを取得しているだけです。 未読などはInoreaderと同期しているため、Inoreaderのウェブ版やモバイルアプリと
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
#teppeis_sushi でクライアントサイドDDDについて発表した
#teppeis_sushiというイベントで、Faao - ドメイン駆動設計で作るGitHub Issue Client -という話をしました。 Electronやブラウザなどで動くfaaoというGitHubクライアントを書いていてそれの技術的な話です。 クライアントサイドでDDDを取り入れた設計になっていて、その設計や規約の作り方やそれを守る方法についての話をしました。 azu/faao: Faao is a GitHub issue/pull-request client on Electron. Living Documentation by design, with Domain-Driven Design by Cyrille Martraire [PDF/iPad/Kindle]という無料から買える書籍では、ドキュメントとコードを同じ速度で成長させていくためにはドキュメントに対
同じイベントのaddEventListenerを1つにまとめるライブラリを書いた
1つにまとめる? Reactなどのコンポーネント志向のライブラリを使っていると、各コンポーネントで同じ要素へ同じイベントを貼っていることがあります。 // Component A const handlerA = (event) => {}; window.addEventListener('scroll', handlerA); // Component B const handlerB = (event) => {}; window.addEventListener('scroll', handlerB); // singleton const eventObserver = require("ui-event-observer"); // シングルトンじゃない方法 // require("ui-event-observer").UIEventObserver // Component
JSDocをランタイムassertに変換するBabelプラグインを書いた
JSDocをassertに変換するライブラリとそれを使ったBabelプラグインを書きました。 azu/babel-plugin-jsdoc-to-assert: Babel plugin for jsdoc-to-assert. azu/jsdoc-to-assert: JSDoc to assert ライブラリのjsdoc-to-assertの方は、JavaScript ASTのコメントからassertの文字列を作り出すだけのシンプルなものです。 実際に使う場合は、Babelのプラグインとしてbabel-plugin-jsdoc-to-assertを使い、コードを変換してランタイムassertを追加させます。 やっていることとしては、FlowTypeをランタイムチェックするbabel-plugin-typecheckのJSDoc版とも言えます。 babel-plugin-typechec
JavaScript Promiseの本を書きました | Web Scratch
JavaScript Promiseの本という無料で読める電子書籍を書きました。 タイトルそのままで、JavaScriptのPromiseについて書いた書籍です。 書籍の目的 この書籍を読むことで学べる事として、次の3つを目標にして書きました。 Promiseについて学び、パターンやテストを扱えるようになる事 Promiseの向き不向きについて学び、何でもPromiseで解決するべきではないと知る事 ECMAScript6 Promiseの基本をよく学び、発展した形を自分で形成できるようになる事 Promiseは、次のECMAScriptの言語仕様として策定が進められていて既に多くのブラウザに実装されています。 Promiseについて扱う書籍ですが、この機能はjQuery.Deferred()やAngularJSの$qやBluebird等の類似の機能が既にあるため扱ったことがあるかもしれま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
