CSS の element() 関数をご存知？
発端 きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。 Chrome でのスクリーンショット なぜなら Firefox 以外のブラウザでは表示されないからです。 Firefox でのスクリーンショット Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。 Firefox でのスクリーンショット これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。 実装 どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は ele
9割を自宅で完結？Jamstack を学んで開発環境をイチから作ってみた話 | IIJ Engineers Blog
イラストレーターの妻が「ポートフォリオサイト欲しい」と言い始めたので、面白そうだと思い開発を開始しました。 静的サイトなら Jamstack ってのがイイらしいと最近よく聞くものの、何かはわからないので勉強してみて、巷の Jamstack 構築環境をできる限り自分の家の中に作ってみます。 結論から言うと適材適所なのですが、皆さんもコーポレートサイトやブログなど「これって Jamstack がハマるんじゃないかな」と思える箇所があると思います。 是非、検討する材料としてこの記事をご覧ください。 Netlify 社が定義した JavaScript + API + Markup (JAM) の構成を Jamstack と呼ぶようです。 まずは Jamstack の何が嬉しいか、見ていきましょう。 従来の Web サイト 従来の構成でサーバサイドがレンダリングした Web サイトを表示するまでの
Jest で落ちたアサーションを GitHub のアノテーションに出す - Diary of a Perpetual Student
最近 GitHub Actions を弄くり倒すことにハマっていて、 GitHub の Checks API を利用して annotation を出すおもてなしをすることだけが生きがいだと思って生活していました。 そんな中、JavaScript (TypeScript) のコードのテストでよく使われている Jest で、どの assertion が落ちているかを annotation で分かりやすく表示したいと思っていました。自作で頑張ろうかな～と思って調べていると、 Jest 28.0.0 （2022年4月末ごろリリース）から Github Actions で annotation を出す reporter 機能が組み込まれていたという事実を知りました。 jestjs.io この便利機能が思ったより世の中で使われていない感じがしたので紹介します。 サンプル こちらをどうぞ： github
[DevOpsプラットフォームの取り組み #6] CI/CDにおけるパラメータの課題とQmonus Value Streamの取り組み - NTT Communications Engineers' Blog
DevOpsプラットフォームの取り組みを紹介する6回目の記事です。 Qmonus Value Stream 開発チームの奥井 ( @HirokiOkui ) です。 連載第6回では、パラメータを効率的に管理するためのQmonus Value Streamの取り組みについて紹介します。 第3回 で解説したとおり、Qmonus Value StreamではInfrastructure as Code（以後IaC）およびCI/CDパイプラインを記述するためにCUE言語を用いています。 CUE言語は洗練されたデータ記述言語であり、CUE言語が有する型システムやプログラマビリティにより、宣言的マニフェストを高品質かつ効率的に記述することが可能になります。 しかしながら、CUE言語を用いても改善できない領域が存在します。 それは、パラメータです。 本記事では、IaCおよびCI/CDパイプラインの構築に
![[DevOpsプラットフォームの取り組み #6] CI/CDにおけるパラメータの課題とQmonus Value Streamの取り組み - NTT Communications Engineers' Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1dc56cd92c697974f3d36eb41ee4779696aff8b/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FN%2FNTTCom%2F20220824%2F20220824100559.png)
JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画
JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画 7月に発表されるやいなや急速に注目を集めているJavaScriptランタイム「Bun」の開発者であるJarred Sumner氏が、Bunの開発とサービス提供などを目的とする企業「Oven」社の設立を発表しました。 Introducing Oven: the company behind Bun. Oven has raised $7m led by @buckymoore at Kleiner Perkins with participation from @rauchg @ycombinator and morehttps://t.co/HG2TUCQWbL — Oven (Bun) is hiring engineers (@oven_sh) August 24, 20
意識的に職位を下げる - id:onk のはてなブログ
僕はチーム join 時に、Docker は初手で剥がすし、GitHub Actions でやっているワークフローの全体像を把握するのを次に行う、というのを基本的にはやっている。これはシステム構成やデプロイ周りの全貌を把握するのが好きなのと、何かが起きたときにコレをやっているのといないのとで問題切り分けの精度に圧倒的な差があるからなんだけど、join 直後にやるのが最適解とは限らない場面もある。 チームの人員構成として、テックリード業を既に担っている人が居る場合、追加人員にはテックリード未満の「プラスの工数として数えられる戦力」となって欲しい。この戦力というのは、「目の前に積み上がった問題を一緒に解いて欲しい」という期待。問題と言うよりも、既にタスクになっているものを消化したい、という期待の方が大きいと思う。 そういう期待があるときには、ちんたら Docker を剥がしている場合ではなく、
ER図の自動生成について、dbdiagram.io, DBeaver, A5M2 を比較してみる。 - Qiita
はじめに データベース設計のER図について、自動で生成する以下３つのツールを比較した記事です。 dbdiagram.io DBeaver A5:SQL Mk-2（A5M2） 先日、こちらの記事をQiitaに投稿したところ、多くの方に記事を見ていただき、コメントも多数いただきました。 ER図に関するお勧めのツールをコメントいただく方が多くいらっしゃいました。 今回はその中から、無料でも利用できる3つのツールの「ER図の自動生成」の機能を試します。 比較の結論としては、〇〇が一番良いという感想ではなく、どのツールも多機能で、できることは違うので、今後使うときは用途や業務の環境によって使い分けていけたらと思っています。 目次 それぞれのツールについて、下記の内容を書いていきます。 1. dbdiagram.io 1-1. 始める 1-2. 使う 1-3. 感想 2. DBeaver 2-1. 始
CI/CD workshop for Amazon ECSをやってみた | DevelopersIO
こんにちは。ネクストモードの田邉です。 自己学習のためにAWS WorkshopsのCI/CD workshop for Amazon ECSをやってみたのでご紹介します。 CI/CD workshop for Amazon ECS AWS Workshopsについて AWSから提供されているサービス・テーマ別のワークショップです。 入門・中級・上級・エキスパートとレベル設定されているため、様々な方に活用する機会があると思います。 言語は基本的に英語のみですが、AWSサービスの概要を理解されてる方であれば実践可能な内容になっています。 AWS Workshops おすすめしたい方 AWSでCI/CD導入を検討中の方 AWS資格勉強中（DVA/DOP）の方 AWS Hands-on for Beginnersを一通り実施済みで実践向けのハンズオンを求めている方 ワークショップのゴール ステー
実践的な「Trivy」利用方法～「VSCode」によるスキャンからCI/CDパイプライン、「Trivy Operator」による継続的なスキャン～
実践的な「Trivy」利用方法～「VSCode」によるスキャンからCI/CDパイプライン、「Trivy Operator」による継続的なスキャン～：Cloud Nativeチートシート（18） Kubernetesやクラウドネイティブをより便利に利用する技術やツールの概要、使い方を凝縮して紹介する連載。今回は、Trivyの代表的な利用シーンを取り上げながら、実践的に利用するための検討ポイントを解説する。
モダンアプリ開発でケアレスミスが起きないようDatadogで自動ブラウザテストする - CARTA TECH BLOG
アジャイルやDevOpsなど迅速なシステムの改善～リリースが求められる開発で、懸念されることはデグレードを起こしてしまうことかと思います。 今回はそういったミスを軽減させるためのブラウザテストの自動化に関して書いていこうと思います。 自動テストのサービスとしてDatadogのSynthetic Testのブラウザテストを使用します。 ブラウザテストのテストシナリオとしては複雑な条件を使用しないことが大事です、テストデータが必要、単体試験で検知されるべきレベルのシナリオをここで作成することはメンテナンスの限界が発生して、余計に時間を掛けてしまうことになります。 今回は下記のシナリオをテストします。 ・画面遷移が問題なくできること ・画面に期待通りのテキストが表示されていること さらに今回は最終的に自動化したブラウザテストがCI/CDの一部として組み込まれ、 毎回のリリースでデグレが発生してい
GitHub Actionのジョブ実行画面からPull Requestを辿れるようにした - Lambdaカクテル
こういうのを作りました。 ジョブに紐付いたPull Requestへのリンクが表示される 行ったこと: リンクを生成するジョブを1つ生やした 綺麗な表示はStep Summary機能 (後述) の力を借りている ジョブ実行画面からPull-Reqに戻りたい GitHub Actionsのジョブ実行画面には、その実行元となったPull Requestへのリンクが存在しないため、困っていた。 よくあるシチュエーション: Pull Requestを見るとジョブがコケていた 様子を見に行くうちに履歴がどんどん深くなる -- ジョブ画面内での遷移はどんどんヒストリが積まれる Pull Requestに戻れなくなってしまう この話を同僚にしたところ共感の嵐だった。したがって隠れた需要がありそうだということが判明し、うまくやる方法を考えることにした。 結果、GitHub Action上でPull-Req
ブラウザ, Node, Cloudflareでも動くDenoモジュール開発
ブラウザだけでなく、非ブラウザなJavaScript（JS）処理系も増えてきたので、「主要ブラウザ、Node.js、Cloudflare Workersでも動くDenoファーストなTypeScript/JavaScriptモジュール開発＆CI/CD」をやってみました。一事例として共有します。 はじめに 最近、TypeScriptで hpke-js というモジュールをつくりました。 HPKE (Hybrid Public Key Encryption) というのは、ざっくり言うと、公開鍵を交換しあって共有鍵をつくり、安全にEnd-to-End暗号化をおこなうための規格です。これを Web Cryptography API 上に実装し、このAPIをサポートする複数のJS処理系（主要なWebブラウザ、Node.js、Deno、Cloudflare Workers）で動作保証する（ちゃんと全環境で
GitHub Actions 逆引きリファレンス
1.この記事の立ち位置#自分がいつも調べていること、忘れがちな Tips や小ネタを列挙していく。そのため、網羅性は重視しない。 というのも、なにか調べていていろいろ読み漁った挙げ句、1周回って行き着くところは GitHub Actions の公式ドキュメントであり、たとえば Workflow の書き方は以下のページをよく開いている。 Workflow syntax for GitHub Actions - GitHub Docs それでも、公式ドキュメントで参照したい箇所を引っ張るための用語を知るまでに苦労することが往々にあり、この記事が、公式ドキュメントで参照したい箇所を導くための助けとなればと思い、書いていく。 2.Step と Job と Workflowの違いアレコレ#2-1.Step と Job と Workflow の違いの一行まとめ#Step < Job < Workflo
Security advisory: malicious crate rustdecimal | Rust Blog
This is a cross-post of the official security advisory. The official advisory contains a signed version with our PGP key, as well. The Rust Security Response WG and the crates.io team were notified on 2022-05-02 of the existence of the malicious crate rustdecimal, which contained malware. The crate name was intentionally similar to the name of the popular rust_decimal crate, hoping that potential
CircleCI上のRSpecによるテスト実行時間を25min -> 12minに短縮する技術 - ANDPAD Tech Blog
株式会社アンドパッドのアカウント基盤チームでテックリードをしているid:shiba_yu36です。 最近自分のサイドプロジェクトとして、生産性を向上するために、CI実行時間の短縮化を行っていました。その結果、とくに時間のかかっていたCircleCI上のRSpecによるテスト実行時間を、25min -> 12minに改善できました。そこで今回はどのような流れでCIの実行時間を改善していったかについて、具体的に書いてみたいと思います。実行時間改善の勘所について参考になれば幸いです。 改善の流れ: CircleCIでボトルネック調査し、大きいボトルネックを解消する 実行速度改善の前に: Flakyなテストを一斉に直す 速度改善1: bundle installのキャッシュがうまく効いていなかった問題を修正 -> 4minの短縮 速度改善2: developブランチ以外ではカバレッジを取らないよう
k8sの各種CDツールを比較する - pospomeのプログラミング日記
k8s のCDツールがいくつかあるので、それらの特徴についてまとめる。 一応CDツールの定義は"k8sにWebアプリケーションをデプロイするツール"を想定しているが、 k8sにおけるデプロイはマニフェストファイルを apply することなので、 そういったものはすべてCDツールとみなして調べた。 すべてのツールをちゃんと調べたわけではないので、ものによってはサラッとした紹介になっている。 Flux Tekton(Tekton Pipeline) Jenkins-X PipeCD GCP Cloud Deploy AWS Code Pipeline Spinnaker Pipeline & Stage 動的なパイプライン Managed Delivery Spinnaker を使いこなせるか? ArgoCD Single Source of Truth(SSOT) 複雑なCDパイプラインは作
GitHub ActionsでDocker Buildするときのキャッシュテクニック - cockscomblog?
GitHub Actionsでdocker buildすることが多い。このときのキャッシュをどうするかという話題。 基本 GitHub Actionsでdocker buildしてAmazon ECRにdocker pushする、典型的な.github/workflow/docker-push-to-ecr.ymlはこういう感じ。 name: Push to Amazon ECR on: push: branches: [ 'main' ] jobs: docker: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: docker/setup-buildx-action@v1 - name: Configure AWS credentials uses: aws-actions/configure-aws-c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【登壇資料】 「aws-nuke + Github Actoinsで AWSアカウントのクリーンアップを 自動化した話」#自動化エンジニアのLT会 | DevelopersIO
GitHub上で構築するコードメトリクス計測基盤 / TECH STAND #9 GitHub
「GitHub」から非公開リポジトリなどのデータが流出 ～「npm」にも被害／「Heroku」「Travis-CI」発行のOAuthトークンが盗難・悪用される
