CI/CDのデータを収集するCIAnalyzerの紹介
去年のGWにCIAnalyzerというツールを作成し、プライベートと仕事の両方で1年ほど活用してきました。今年の9月にCI/CD Conference 2021にて実際の活用事例を紹介させて頂きましたが、発表時間の都合上CIAnalyzer自体の使い方まで紹介はできなかったためブログにしました。 CIAnalyzerを作成したきっかけ 今の自分の仕事は社内のCI/CDの基盤を整えるのと同時に、ビルドエンジニアの真似事のようなことをしています。この分野のサポートをしていると開発を主にしているエンジニアの方から 「ビルドが遅いし、頻繁に壊れる」 「テストは時間がかかるし、いつも失敗している」 という話を聞く機会がありました。ですが、自分としてはとても意外なことにその実態を定量的に把握することはほとんどできませんでした。 もちろん短期的であれば把握できます。昨日のデプロイはN分かかったとか、ma
GitHub Actions のベストプラクティス
1 フロー 1 ワークフロー 一連のフローがある場合は 1 つのワークフローにまとめる。 トリガーしたイベントの JSON が使える needs での制御がしやすい 全体を追える グラフが表示される ファイルを分割したい ファイルを分割したい理由として以下が挙げられると思います。 行数が増えて読みづらい 処理を共通化したい 複合実行ステップアクション や workflow_run トリガー や Reusable workflow 🆕 を使うことになると思いますが、基本的には一連のフロー制御はメインのファイルに書いてその下を Reusable workflow や複合実行ステップアクションで外部ファイルへ分離するのが良さそう。 workflow_run はログが分断するのでおすすめしません。
Chrome拡張機能をGitHub ActionsでChrome Web Storeにデプロイ
どうも。えーたん（@eetann092）です。 先日、Chrome拡張機能「Choomame（チューマメ）」を公開しました。 本記事では、Choomame開発時に使っている「Chrome拡張機能をGitHub Actionsを使ってChrome Web Storeへデプロイする手順」を紹介します。 メリットは以下です。 自分で拡張機能のversionを制御しなくて良い 更新版をアップロードするときのバージョンの上げ忘れを気にしなくて良い Chrome Web Store Developer Dashboardに手動でアップロードする手間が省ける Chrome Web Store Developer Dashboardから手動で審査の申請をする手間が省ける GitHubの「Releases」に自動でリリースノートを作成＆拡張機能のzipファイルをアップロード 初回はChrome Web St
GitHub - pavlobu/deskreen: Deskreen turns any device with a web browser into a secondary screen for your computer. ⭐️ Star to support our work!
If you don't live in a cave and aware of what is going on in the world 🌍 , Russian 🇷🇺 government had started global armed invasion on the territory of Ukraine on the 24th of February 2022. This is for real, this is a WAR. Russian army is killing Ukrainian soldiers, Ukrainian civil citizens and Ukrainian children RIGHT NOW because Russian government gave them an order to do so. You can search on
"CSS Module" をめぐる混乱
"CSS Module" が指すもの ２つある 従来のコミュニティベースのもの これのこと。そしてその実装。 現状フロントエンドエンジニアが指すものはだいたいこれ。 Web 標準になりつつあるもの Import Assertions で実現しそうな Synthetic Module としての CSS Module 標準になりそうな所まで来ている。 この２つに関して話がごちゃごちゃになるんで整理する。 コミュニティベースの CSS Module https://github.com/css-modules/css-modules コレ自体は概念的なもの。 その実装 として Webpack の CSS Loader などがある。 なので、一般的に「CSS Module か Styled Component か」みたいな議論ででてくるものの場合、 Webpack の CSS Loader を入れ
Pure ESM package
esm-package.md Pure ESM package The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS. This means you have the following choices: Use ESM yourself. (preferred) Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide. If the package is used in
JSONをURIに埋め込んでも%地獄にならない「Rison」のススメ - Qiita
さくらのクラウドでバックエンドを担当しております、@townewgokgok と申します（記事はフロントエンド寄りの記事になります）。これは さくらインターネット Advent Calendar 2018 11日目の記事です。 JSONのように階層化された値をURLに埋め込みたいことってありませんか？ たとえば 価格.com の商品検索結果ページ のように、リンクを開いたら検索フォームの内容が復元されて、URLのコピー時に見ていたものがそのまま表示されて欲しい。 これを実現するには、従来なら文字列のキーバリューとしてごく一般的な application/x-www-form-urlencoded 形式でURLにパラメータを埋め込むところです（上記の価格.comの例でもやはりそうなっています）。ただ、そこそこ複雑な検索フォームの値をいちいちこの形式にまとめたり復元したりするのはわりと面倒です
GoでYAMLを扱うすべての人を幸せにするべく、ライブラリをスクラッチから書いた話 - Qiita
この投稿は、 Go アドベントカレンダーの 6日目のものになります。 はじめに GoでYAMLを扱う際にデファクトになっているのは、おそらく github.com/go-yaml/yaml でしょう。 実装はC言語で実装された libyaml を Go に移植しつつ、 Go ならではの機能を足す作りになっているのですが、 cgo を使わずに pure Go で移植されており、開発者の気合を感じます。 枯れている libyaml を利用していることからも、 YAML の仕様を忠実に実装していることが期待できます。 ですが、このライブラリにはいくつか使いにくい点もあり、例えば以下のようなことはできませんでした 構造体を埋め込む場合に、埋め込む型をポインタで定義できない ( ※ ポインタなしは大丈夫 ) encoding/json とコンパチの インターフェース ( MarshalYAML()
国税庁法人番号を使った経産省発、法人種別名の抽出コンポーネントのESモジュール版公開
ブラウザやDenoでサクッと動く、法人番号からの検索するESモジュールができました。 好評な経産省によるオープンソース「IMIコンポーネントツール」の7つ道具、一通りできました！ 「IMIコンポーネントツール」法人種別名の抽出コンポーネント追加(src on GitHub) サンプルとしていれている番号はどんな法人でしょう？ [変換]ボタンを押してみまてください。 使い方は簡単です。下記コードを main.html として保存して、ブラウザで開くだけ！ <script type="module"> import IMIEnrichmentHojin from "https://code4sabae.github.io/imi-enrichment-hojin-es/IMIEnrichmentHojin.mjs"; const main = async () => { const json
tsconfig.jsonはJSONじゃないと言う話 - 焼売飯店
気になったので調べてみました。 tsconfig.jsonと普通のJSONの大きな違い tsconfig.jsonには、コメントが書けます。 tsc --init した時に生成されるtsconfig.jsonに、大量にコメントが付けられているので、すぐに気付くことと思います。 例) { "compilerOptions": { "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd
npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンドエキスパートチームの小林(@koba04)です。 先日、npmから脆弱性についての発表がありました。 調べていく中でいくつか思うところがあったので解説も兼ねて書いていきたいと思います。 The npm Blog — Binary Planting with the npm CLI npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる です。 npmのバージョンが6.13.4になったNodeもv8, v10, v12, v13系でそれぞれリリースされたので、そちらを利用することも可能です （yarnのバージョンは別途あげる必要があります）。 nodejs.org npmによる発表では、今回発表された脆弱性は2件あるため、それぞれ個別に考えます。 binに任意のパスを指定出来る件 npmパッケージはpa
Renovate ではじめる依存関係更新の自動化 | Recruit Tech Blog
本記事は、リクルートライフスタイルアドベントカレンダー10日目の記事です。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属している渡邉です。 最近は新規開発をやっていて、日々プロジェクトの package.json の更新に追われています。本記事ではその更新タスクを大いに助けてくれた Renovate について紹介します。 Renovate とは Renovate はプロジェクトの依存関係 (Dependency) の更新を自動化するツールです。似たようなツールとしては、Dependabot や Greenkeeper があります。プロダクションレベルのプロジェクトでは、明示している Dependency だけでも 20~30 程度あるのではないでしょうか。それらの Dependency は日々更新されており、最新版に追従していくだけでも時間と手間がかかります。Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference
package-manager-best-practices/published/npm.md at main · ossf/package-manager-best-practices
monorepo-utils/packages/@monorepo-utils/workspaces-to-typescript-project-references at master · azu/monorepo-utils
GitHub - GoogleChromeLabs/AutoWebPerf: AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.
GitHub - depcheck/depcheck: Check your npm module for unused dependencies
aggre.io - aggre リソースおよび情報
GitHub - glideapps/quicktype: Generate types and converters from JSON, Schema, and GraphQL
npmのprivate registryからGitHub Packages Registryに移行する