Cloud Native Days Winter 2024で発表した eBPF の技術解説の発表です。 https://event.cloudnativedays.jp/cndw2024/talks/2398
Cloud Native Days Winter 2024で発表した eBPF の技術解説の発表です。 https://event.cloudnativedays.jp/cndw2024/talks/2398
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり(Netscape 4.xも7.xも不安定だった)その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある(過激)。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
Agile Journeyをご覧のみなさん、こんにちは。コネヒト株式会社でプロダクトマネージャーをしている田中俊也です。 コネヒト株式会社は、「あなたの家族像が実現できる社会をつくる」というビジョンの実現に向けて、家族のライフイベントにおける意思決定をITの力でサポートしています。子育て支援アプリ・情報サイト「ママリ」の開発・運営を中心に、子育て包括支援や自治体および企業向けの産休・育休の取得支援を行っています。 私は元々エンジニアとしてアプリ「ママリ」の開発に携わっており、プロダクトマネージャーと共に、日々プロダクト開発やその改善について議論や勉強を行っていました。 そのような中、去年の7月に開催されたMobius Outcome Delivery研修のことを知ったのです。Mobius Outcome Deliveryの名は以前から知っていましたが、その詳細やプロダクト開発への具体的な活
株式会社サイバーエージェント AI事業本部 2024年度エンジニア新卒研修 オブザーバビリティ研修実践編(一部社内向けの内容)
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示するそのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。スクロール位置に応じて、視覚的に見える範囲のデータのみをDOMに挿入することで、レンダリング処理を最小限にするというものです。 この仮想スクロールについて、直感的にスクリーンリーダーでの閲覧に耐えられるのかの不安を感じました。しかし、あまりテーブルを仮想スクロールする場合についてのまとまった情報をWeb上で発見することができませんでした。 そこで、実際に仮想スクロールを採用した検証用のWebアプリケーションを作成し、スクリーンリーダーでの動作を確認してみることにしました。 「日本の郵便番号」ア
sumirenです。 技術顧問やSREをしています。 背景 2024年現在、OpenTelemetryが盛り上がっており、ベンダへの依存度を下げてテレメトリを収集・送信することがトレンドになってきているように思います。多くの企業様で、OpenTelemetry対応のオブザーバビリティバックエンドを選定されているのではないでしょうか。 一方で、E2E自動テストツールなどもそうですが、デベロッパーツールは画面やUXの情報がパブリックな情報として出回ることが少ないように思います。オブザーバビリティバックエンドの場合、シグナル3種に関してOpenTelemetryベースでもフルに機能が活用できるのかという疑問もあります。 そうしたこともあり、オブザーバビリティバックエンドは実際にトライアルしてみないと選定しづらいです。監視など狭義のオブザーバビリティ外の機能や、OpenTelemetryの範囲外の
【情報Ⅰ】授業・解説動画をまとめたサイトを公開しました! ※画像をクリックすると詳細に移動します。 【情報Ⅰ】とりまとめたサイトはこちら! (外部サイトへ移動) 情報を学ぶみなさんへ インターネットサムライがやって来た!「楽しいデジタル社会を創ろう!」ダイジェスト版(1分54秒)(文部科学省/mextchannelにリンクします) インターネットサムライがやって来た!「楽しいデジタル社会を創ろう!」全編(50分03秒)(文部科学省/mextchannelにリンクします) 「情報Ⅰってなんだろう?」(文部科学省/mextchannelにリンクします) 【情報Ⅰ】授業・解説動画 コンピュータとプログラミング [0]「コンピュータとプログラミングについて」(文部科学省/mextchannelにリンクします) [1]「センサーライトを作ろう!」(文部科学省/mextchannelにリンクします)
ヤコブ・ニールセンのインタラクションデザインのための一般的な原則。これらの原則は幅広い経験則であり、具体的なユーザビリティガイドラインではないため、「ヒューリスティックス」という。 10 Usability Heuristics for User Interface Design by Jakob Nielsen on November 15, 2020 日本語版2021年4月12日公開 この記事の最後で、ヤコブの10ユーザビリティヒューリスティックスの無料ポスター(英語)をダウンロードできる。 1. システム状態の視認性 デザインは、妥当な時間内に適切なフィードバックを通じて、今、何が起こっているのかを絶えずユーザーに知らせる必要がある。 ユーザーが現在のシステムの状態を把握できれば、彼らは自分がそれまでに行ったインタラクションの結果を知り、次のステップを決定することができる。予測可能
Prometheusには、quantileを計測する方法としてSummaryとHistogramの2種類があります。 prometheus.io 上記公式documentに記載がある通り、Summaryはclient sideでquantileを計測するのに対し、Histogramではprometheus sideでqueryを打つ際にアドホックに算出します。 Summaryはqueryの際にaggregationすることはできないため、たとえば「複数台のAPIサーバーがあり、それら全体での99th percentile response latencyをモニタリングしたい」といった場合は必然的にHistogramを選択することになります。(「1台1台からreportされた99th percentileの平均」などは、それはそれでモニタリングする価値のある指標ではあるかもしれませんが、統計
トランスクリプト Protsenko氏:私の名前はMykytaです。Netflixで働いています。私の仕事は基本的に、他の開発者が遅くまで職場に残らなくてもいいようにすることです。彼らが午後5時に退社しても生産的であることが私の実現したいことです。私はプラットフォーム組織、つまり生産性エンジニアリング部門で働いており、他のエンジニアのために労力を抽象化しようとしているのです。エンジニアが同じ退屈な技術的問題に何度も対処するのではなく、ビジネス上の問題の解決に集中できるようにします。 いくつか質問させてください。あなたたちのうち何人が、自分で作って自分で動かすという哲学を実践している会社で働いてますか?生産現場との間にゲートキーパーがいないこと、機能や修正をより早く提供できることに満足している人はどれくらいいますか?本番環境で発生したインシデントに対処しているときに、どうすればいいのか分から
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう! @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス(正確には、ホ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く