リクルートテクノロジーズ エンジニアコース新人研修の内容を公開します！（2020年度版） | Recruit Tech Blog
こんにちは！ リクルートテクノロジーズでセキュリティエンジニアとして活動している、藤原 巧です。 毎年恒例となっており、大きな反響をいただいている、エンジニアコースの新人研修の内容を紹介させていただきます。 研修の概要 リクルートテクノロジーズでは、新卒採用の新人向けに３ヶ月間の技術研修を行っています。この技術研修では大きく分けて２つのコースが設けられています。 1. プログラミングやWebサービスの構造の基礎を体系的に学び、その後一人につき、ひとつのスマホサイトを企画からリリースまで行うコース 2. 一定以上のプログラミングスキルと開発系経験がある新人に向けた、実際の開発で必要となる様々な技術要素をより深く学び、その後実際のサービスでチーム開発にてOJTを行うコース 今回公開するのは 2. で使用した資料です。 この技術研修は、そのほとんどの部分を内製で実施しています。 この研修の最大の
Published: August 4, 2023 Updated: October 27, 2023 Part 1: an intro about music, defaults, and bubbles Like a lot of people, there was a time when the only music I listened to was whatever was played on my local radio station. (A lot of people over 30 or so, anyway. If this doesn’t sound familiar to you yet, just stick with me for a minute here.) At the time, I was happy with that. It seemed like
はじめに この記事は、Qiita: TypeScript Advent Calendar 2020 24 日目の記事です 🎄✨ 今回は、Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass で紹介されていた Prisma 2 を、同じく紹介されていた frourio を使って試してみます。 環境構築 frourio で一気に まずは create-frourio-app でサクッと環境構築します。 今回は以下の構成で試してみます。 MySQL を建てるのが面倒な場合は、SQLite でもいいと思います。 Core framework of frourio : Fastify Frontend framework : Next.js Building mode : Basic HTTP client of aspida : axios
成熟したRailsアプリのフロントエンドを最新にリニューアルする方法（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Keep up with the Tines: Rails frontend revamp — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2020/06/03 著者: Rita Klubochkina、Andy Barnov サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語タイトルは内容に即したものにしました。 アセットパイプラインで提供される既存のjQueryやCoffeeScriptのフロントエンドを一切損なわずに、「React」「MobX」「GraphQL」「Tailwind CSS」「Webpacker」の複雑な
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
Vercel Web Analyticsが正式機能に。Google Analyticsのようなサードパーティのスクリプトやクッキーによるトラッキングが不要
Vercel Web Analyticsが正式機能に。Google Analyticsのようなサードパーティのスクリプトやクッキーによるトラッキングが不要 Next.jsの開発元であり、Webアプリケーションのホスティングサービスなどを提供するVercelは、同社のホスティング環境で利用できるアクセス解析機能「Web Aanalytics」を正式版としてリリースすると発表しました。 Web Analytics: Privacy-friendly, first-party traffic insights. View top pages, referrers, user demographics, and more Track custom events to measure user actions Works with any frontend framework or <script>
How Netflix Scales its API with GraphQL Federation (Part 1)
Netflix is known for its loosely coupled and highly scalable microservice architecture. Independent services allow for evolving at different paces and scaling independently. Yet they add complexity for use cases that span multiple services. Rather than exposing 100s of microservices to UI developers, Netflix offers a unified API aggregation layer at the edge. UI developers love the simplicity of w
【翻訳】Prettier を Rust で書き換えたプロジェクトに $20k の報奨金を支払うプログラムは Biome が勝ちました
この記事は vjeux 氏によって Prettier 公式ブログに投稿された「$20k Bounty was Claimed!」を許可をもらって翻訳したものです。 もとのタイトルを翻訳するのが難しかったので、できるだけわかりやすいものに翻訳しました。 PrettierというJavaScriptのコードフォーマッターは、人々がコードを書く様々な方法を慎重に扱うことで、驚くほど広く採用されています。この時点で、フォーマットロジックは安定しており、私たちの三項演算子に関する作業が完了すれば、それは満足のいく状態になるでしょう。 これは、次の重要な側面に注目できるということを意味します：パフォーマンス。Prettierは決して速いとは言えませんが、ほとんどの使用例には十分な速さです。これはいつも不満足な感じがしたので、何かをすることを望んでいました。それには、友好的な競争以上の方法はありません。
Denoのフロントエンド開発の動向【2023年夏】
半年程前に、以下のような記事を書きました。 この記事では、上記の記事から半年程の間で起きたDenoでのフロントエンド開発に関して影響がありそうな内容などをまとめていきます。 Deno本体のアップデート node:URLのサポート Deno v1.30でNode.js組み込みパッケージのimportがサポートされています。 import { EventEmitter } from "node:events"; const emitter = new EventEmitter(); 後述するesm.shの?target=denonextなどと併用すると、効果を発揮しそうです。 注意点として、node:を付与しなければNode.js組み込みパッケージは読み込むことができません。具体的には、以下のような読み込み方はサポートされていません。
SRE / DevOps / Kubernetes Weekly Reportまとめ#13(4/26~5/1) - 運び屋 (A carrier(forwarder) changed his career to an engineer)
この記事は2020/4/26~5/1に発行された下記3つのWeekly Reportを読み、 DEVOPS WEEKLY ISSUE #487 April 26th, 2020 SRE Weekly Issue #216 April 27th, 2020 KubeWeekly #214 May 1st, 2020 English Version of this blow is here. DEVOPS WEEKLY ISSUE #487 April 26th, 2020 News A detailed write up from the recent Failover Conf on all things chaos engineering. Lots of notes and links to related content. A good post for any software d
まえがき AWS AmplifyでついにNext.jsのISRに対応したようです。実際にやってみる。 Deploy and host server-side rendered apps with Amplify - AWS Amplify 少しハマったので備忘録も兼ねて。 Amplify + Next.jsをデプロイ Next.jsのプロジェクトを作成 yarn create next-app --typescript ✔ What is your project named? … next-sample-app Next.jsにISRのページを作成 サンプルでISRのページを新規作成します。簡単にタイムスタンプを表示し、5秒間キャッシュするようにします。 pages/isr.tsx import Head from 'next/head' import styles from '../s
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
こんにちは。メルカリのSoftware Engineerの@tanashoです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の6回目を担当させていただきます。 メルカリ ハロのWebアプリケーションは複数存在し、Webフロントエンドチームが横断的に開発をしています。本記事では、その前提を踏まえ、スピードと品質をどのように両立させて開発しているかを紹介します。 プロジェクトの概要とWebフロントエンドの担当領域 メルカリ ハロは「あたらしい出会いを繋ぎ、信頼と機会をひろげる」がミッションで、いますぐ働き手が欲しいパートナー (事業者) と、いますぐ働きたいクルー(働き手)を繋げるサービスです。クルーは自身のスキルや時間を活用して働くことができます。 メルカリ ハロは複数のアプリケーションが存在し、そのなかでWebフロントエンドが関わる領域として以下の3つが
@1000ch です。Merpay Advent Calendar 2020 の 22 日目を担当します。私は 2018 年 3 月に創業期のメルペイにジョインしまして、もう 2 年 10 ヶ月が経ったことになります。2020 年は新型コロナウイルスで何かと大変な状況が続いていますが、今年の頭からメルカリ側のプロジェクトにも関わっていまして、メルカリとメルペイ両方の Web に関わっています。メルカリ側の話はまた別の機会に書かせてもらうとして、今回はメルペイの Frontend の話をします。 チーム組成のこれまで 入社したのは 2018 年 3 月ですが、メルペイに Frontend チームが組成されたのは 2018 年 7 月で、PM/EM/TL体制が導入されたタイミングでした。そこから本格的に Merpay Frontend の組成に関わってきました。…と言いたいところですが、本当は
Connect-Web: It's time for Protobuf and gRPC to be your first choice in the browser Today we're releasing connect-web, an idiomatic TypeScript library for calling RPC servers from web browsers. If you've been unimpressed by gRPC and Protobuf on the web before, now's the time to take another look: connect-web generates modern TypeScript that's just as ergonomic as a hand-written REST client. Client
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info テーマ textlint Privacy Firstな校正ツールを作る サーバにデータを送らずに、ローカルで文章のチェックをする textlintとは? textlint textlintJavaScriptで書かれた文章のLintツール ESLintの文章版 Markdown、Re:View、HTMLなど文章構造をパースしてからチェックする 一般的なスペルチェッカーは構造を見ないので誤検知する 200弱ぐらいのルールがある Collection of textlint rule · textlint/textlint Wiki 日本語、英語、言語に依存しな
Greetings everyone! With the recent launch of our Early Access preview of 1Password 8 on macOS I wanted to take a few minutes to pull back the curtain on this software development project that is over two years in the making. Before we get into that, though, I think a bit of backstory is warranted. 1Password 7, 6, 5, 4… With a fifteen year history, 1Password has seen a lot of changes across all ou
Vuestic UI is an OpenSource Vue 3 based UI framework. It is a MIT-licensed UI framework that provides ready-to-use frontend components that are easily configurable and speed up development of responsive and fast-loading web interfaces. It was initially released in May 2021 by Epicmax and that is what Vuestic UI today.
Snowpack
Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects. Check out Vite for a well-maintained Snowpack alternative. See also: esbuild, parcel What is Snowpack?Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Sno
MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ（モック関数）をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「WebAPI リグレッションテスト」を実施するための、MSW 活用方法を解説します。記事で使用しているサンプルコードはこちら。 課題の概要 Web アプリケーションページのほとんどは「1.UI を表示し／2.入力操作し／3.WebAPI 通信し／4.通信後処理を行う」という一連処理が責務です。このようなページに書かれるテストは、WebAPI 通信前後に集中しがちです。MSW を使用すると、以下の図の様に「送信後処理」まで到達可能なため、例えば「WebAPI レスポンスが返っ
In our team at Rakuten, we have been using Elm1 in production for almost two years now. This post is about our story, the lessons we learned, and our likes and dislikes. This post is quite long so if you prefer to see an overview, feel free to jump to the index. Everything started in the Berlin branch of Rakuten during the summer of 2017. We were maintaining a medium-size single-page application w
mirage-ecsで各メンバー専用開発サーバーを実現！まちのコインの運用事例を紹介します - KAYAC engineers' blog
SREチームの長田です。 突然ですが、 mirage-ecs というツールをご存知でしょうか？ 今回はこのツールをまちのコインの開発チームでの使用例をもとに紹介します。 coin.machino.co mirage-ecs を使うと動作確認用のサーバー環境を、サーバーサイドのエンジニアでなくとも自由にいくつでも立ち上げることができるようになります。 「環境」は AWS のECSクラスタ上で起動し、専用のURLが割り当てられ、 認証*1を通過すればどこからでもアクセスできます。 これにより 「クライアントアプリとつなぎ込んで動作確認したいけど、開発環境が空いてないから確認できない」 や、 「プロダクトオーナーに新機能を確認してもらいたいけど、開発環境が空いてないから(以下略)」 といった問題が解消し、 開発と動作確認のサイクルをスピーディーに回すことができるようになります。 mirage-e
話題騒然！に全然なっていない Java x TypeScript な Web フレームワーク "Hilla" の紹介
はじめに あまり話題になっていない Web フレームワーク "Hilla"[1] を紹介したいと思います（もう少し話題になってほしい）。 BFF を Java で作りたい、または作らざるを得ない人向けなので該当しない方は、ここで exit です。Hilla は、SSR とかないので SEO が不要なシステムが対象になるかと思います。 Hilla の最大の特徴は、TypeScript クライアントのコード自動生成により、BFF(Java)とフロントエンド(TypeScript)でタイプセーフな通信を実現している点だと思います。 概要を掴むためには最初に以下の記事を読んでもらうと良いかもしれません。。 フレームワーク構成 フレームワークの構成は、以下のようになっています。 BFF Spring Boot Frontend Lit Vaadin Web UI Components かなりフルスタ
はじめに こんにちは！ソウゾウのSoftware engineerの@yosanです。 「メルカリShops [フライング] アドベントカレンダー2022」5日目を担当します。 今回はメルカリShopsで行っている、フロントエンドのパフォーマンスの可視化について説明したいと思います。 メルカリShopsにおけるフロントエンドのパフォーマンス可視化 メルカリShopsはWebベースのアプリケーションであり、大まかに次のような構成で運用されています。 iOSやAndroidのネイティブアプリケーションに中おいても、メルカリShopsの部分はWebViewによって提供されています。 この記事における「フロントエンドのパフォーマンス」とは、いわゆるWeb Vitalsになります。例えば、ユーザがサイトにアクセスしてからコンテンツが表示されるまでに何秒かかっているか、あるいは意図せず画面レイアウトが
※この投稿は米国時間 2023 年 2 月 18 日に、Google Cloud blog に投稿されたものの抄訳です。 Cloud Run を使用すれば、デベロッパーは、Google のスケーラブルなインフラストラクチャ上で実行されるサーバーレス環境に本番環境のウェブ アプリケーションと API を簡単にデプロイできます。開発チームは Cloud Run を活用して開発のアジリティを向上させ、迅速に反復処理できますが、多くの場合、インフラストラクチャのセキュリティ体制が見落とされています。十分な注意が払われていないセキュリティの側面として特に注目すべきなのが、アクセス管理と最小権限の原則です。 最小権限の原則とは、あるリソースに対してその機能に必要なリソースのみへのアクセスを許可することを示します。この原則は、ID の侵害によって攻撃者に幅広いリソースへのアクセスが許可されるリスクに対応
Next.js 13には、LayoutとTemplateというよく似た機能が存在します。 この記事では、それぞれの特徴と使い分け方についてまとめてみました。 Layoutとは？ Layoutは複数のページに渡って共有されるUIのことを指します。 特徴としては画面遷移が行われた際に、その状態を保持し、再レンダリングは行われません。またLayoutはネスト（入れ子）にして使用することも可能です。 Layoutの定義方法 appディレクトリ配下で layout.tsx ファイルを定義するとLayoutとして定義できます。 例えば、以下のようなLayoutを定義することができます。 // app/posts/layout.tsx export default function Layout({ children, }: { children: React.ReactNode; }) { retur
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
フロントエンドカンファレンス沖縄2023の登壇資料です。 https://frontend-conf.okinawa.jp/ PDF出力の関係で一部レイアウトが崩れてるので、アニメーションありは以下のリンクから表示できます。 https://yuheifujita.github.io/frontend-conf-2023/
自社OCRエンジン「NineOCR」の学習効率化のため SageMaker Training を導入した話 - Sansan Tech Blog
はじめに NineOCR とは NineOCR が抱える課題 Amazon SageMaker Training とは SageMaker Training の始め方 事前準備 AWS が提供しているコンテナイメージを拡張する方法 独自のコンテナイメージに SageMaker Training Toolkit をインストールする方法 スクラッチでコンテナイメージを作成する方法 まとめ 学習ジョブの実行 学習結果の確認 終わりに はじめに こんにちは、研究開発部の石井です。 本エントリーでは、弊社の OCR エンジン「NineOCR」の開発フローに SageMaker Training を導入した話を紹介します。 NineOCR とは NineOCR は Sansan が独自に開発した名刺特化の OCR エンジンです。 名刺をデータ化するフローの中で実際に活用されており、タスクの高速化・高精
Why I Stopped Using Redux
Redux was a revolutionary technology in the React ecosystem. It enabled us to have a global store with immutable data and fixed the issue of prop-drilling in our component tree. For sharing immutable data across an application, it continues to be an excellent tool that scales really well. But why do we need a global store in the first place? Are our frontend applications really that complex or are
GitHub Container registry とは GitHub Packages を構成する1つで Docker を始めとしたコンテナを扱えるレジストリです。 Docker registry (docker.pkg.github.com) から Container registry (ghcr.io) へ統合されました。 パブリックコンテナへの匿名アクセス コンテナの Organizational レベルの所有権 コンテナのきめ細かいパーミッション制御 有益な情報が豊富なコンテナ用ランディングページ コンテナの可視性はリポジトリの可視性から独立 Organizational におけるコンテナの内部的な可視性設定 GITHUB_TOKEN による Actions ワークフローからコンテナへのセキュアでシームレスなアクセス Container registry (ghcr.io) へパ
Vue3にアップグレードしてフロントエンドを改善した話 - SMARTCAMP Engineer Blog
vue3-migration-improve-frontend はじめまして！ BALES CLOUDエンジニアのえーす（井上）です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜVue3移行をしたか TypeScriptサポート 各ライブラリが古い Vue2のEOLが近い 具体的なVue3移行ステップ Vuetify卒業 Vue3導入 Vue3完全移行 移行にあたって問題だったこと ライブラリのアップグレード Vuetify卒業 ElementUI -> ElementPlus 巨大PRによるレビュー負荷 チーム体制 マイグレーションビルドと他ライブラリの相性 よかったこと 課題感 これから 2024/04/03 編集部追記 やったこと Vue2を卒業し、Vue3を
こんにちは。メルカリのQAエンジニアリングマネージャーの@____rina____ です。今回は、連載『Mercari Hallo, World! -メルカリ ハロ 開発の裏側-』の第4回を担当します。 本記事では、メルカリ ハロのサービスローンチまでのQAプロセスを通じて、私たちはどのようにして安心・安全なプロダクトを迅速にリリースするための戦略を実行したか、具体的な方法とともに詳述しています。 この記事を通じて、以下の点についての理解を深めていただけることを目指しています： QAの役割とプロジェクト概要 効率的なQAアサイン戦略 成果物の透明性と管理ツールの効果的な活用方法 また、この記事を書くにあたり、私自身が学んだことや得た教訓についても触れています。これらの経験は、今後のプロジェクトにおいて更なる品質向上と効率化を目指す上で非常に貴重なものとなりました。 プロジェクト概要とQAの
A Complete Guide to LLVM for Programming Language Creators
Update: this post has now taken off on Hacker News and Reddit. Thank you all! Who’s this tutorial for?This series of compiler tutorials is for people who don’t just want to create a toy language. You want objects. You want polymorphism. You want concurrency. You want garbage collection. Wait you don’t want GC? Okay, no worries, we won’t do that :P If you’ve just joined the series at this stage, he
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
「開発者のための最高の環境をつくる 」をミッションに新設されたReliability Engineeringセンターを紹介します
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEの開発組織のそれぞれの部門やプロジェクトについて、その役割や体制、技術スタック、今後の課題やロードマップなどを具体的に紹介していく「Team & Project」シリーズ。今回は「エンジニアに価値ある環境とツールを作る 」「環境とツールをより価値あるものにする方法を探し出して実行する 」をミッションに設立された、Reliability Engineeringセンター（REC）を紹介します。 RECのセンター長である片野をはじめ、室長やマネージャーを務めるLINEのエンジニアたちに話を聞きました。 ―― センター設立の背景、目的、コンセプトなどを教えてください 片野： RECのセンター長を務めている片野です。LINEの開
Renovate の PR を 89% 自動マージして楽している話｜食べログ フロントエンドエンジニアブログ
はじめにこの記事は食べログアドベントカレンダー2021の 18 日目の記事です。 食べログ FE チームの @hagevvashi です。 食べログでは 2021年7月から Renovate を運用しています。 Renovate は月に 50 件近い PR を出してきますが、半年近く溜めずに運用を続けられています。 もちろんこの量の PR を一つ一つ動作確認してから手でマージしているわけではありません。自動マージを活用して楽に運用しています。 この記事ではどのように自動マージを設計し、運用しているか紹介します。 自動マージ導入による効果 まずは、Renovate の自動マージを導入することによってどのような効果がもたらされたのか紹介します。 2021/7/21 に導入を開始してから合計 235 件の PR が Renovate によって作られました。 その内 89% を占める 210 件も
TL;DR 弊社で実験的に導入を始めている、2024初頭時点で今後に期待が高まる最新のweb技術についてまとめています。 新規プロダクトの技術選定に迷っている方などにおすすめです。 Turborepo - Monorepo管理 モノレポ構成における懸念点の一つとして、プロダクトが大きくなるにつれてビルド時間が膨大になって来る点です。 TurborepoはRust製、並列化、差分ビルド、Remote Cashingなど、肥大化しがちなmonorepoのビルド時間を短縮するメソッドがたくさん詰まっています。 Bun - Package manager (runtime, test tool) 正確にはBunはランタイムですが、Nextなど厳密にはNode.jsで動かす必要があるため、弊社では（ほぼ）パッケージマネジャーとして活用しています。 pnpmやyarnと比較してnpm installな
こんにちは！ソウゾウのSoftware Engineerの@ogataka50です。連載：「メルカリShops」プレオープンまでの開発の裏側の9日目を担当させていただきます。 1日目の記事「メルカリShops の技術スタックと、その選定理由」にあった通りメルカリShopsではMonorepoで開発を行なっています。この記事では主にSoftware Engineerとして、DX (Developer eXperience)の観点からPJ初期からMonorepo上で開発を進めていった中で経験したこと感じたことを実際に起きた出来事とともに共有したいと思います。 Monorepoとは Monorepoとは単一のリポジトリに特定のプロジェクトのコードをすべて含めるパターンです。 下記のような利点があると言われています。 コードの可視性 統一されたバージョン管理, Single Source of T
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性（ページがユーザー入力に応答する速度）がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP（Interaction to Next Paint）は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性（インタラクション）を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
Server-Sent Events (SSE) 目新しい技術というわけではありませんが、最近 Server-Sent Events (SSE) について言及する記事をよく見かけます。 何番煎じかはわかりませんが、個人的に興味があることと、正直触ってみたことがなかったので、コードを書きつつ調べてみました。 ※本記事で登場するサンプルコードは次のリポジトリで公開しています。 SSE とは SSE 自体を解説する記事は無数に存在するため詳細な説明は割愛しますが、簡単に言うと、サーバーからクライアントへ一方向の Push 通信を行うための仕組みです。 MDN にもページが存在するため、参考になります。 独自プロトコルを必要とせず、HTTP/1.1 でも動作するのも特徴です。 SSE の歴史 wikipedia に SSE に関するページが存在し、次のような記述があります。 SSE メカニズムは、
Async Python is not faster
50th and 99th percentile response times are in milliseconds, throughput is in requests per second. The table is ordered by P99, which I think is perhaps the most important real world statistic. Note that: The best performers are sync frameworks but Flask has lower throughput than others The worst performers are all async frameworks Async frameworks have far worse latency variation Uvloop-based opt
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Things you forgot (or never knew) because of React
最近話題の TS 製 ORM「Prisma 2」でログイン処理を試してみたら超快適だった
React部分導入時の開発・検証環境紹介｜食べログ フロントエンドエンジニアブログ
AWS AmplifyでNext.jsのISRを試してみる | DevelopersIO
Merpay Frontend のこれまでとこれから | メルカリエンジニアリング
Connect-Web: It's time for Protobuf and gRPC to be your first choice in the browser
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話
1Password 8: The Story So Far | 1Password
Vuestic UI — Vue.js 3.0 UI Framework
MSW を活用した WebAPI リグレッションテスト
Elm at Rakuten | Rakuten Engineering Blog
メルカリShopsフロントエンドのパフォーマンスを可視化する | メルカリエンジニアリング
最小権限の原則による Cloud Run のデプロイ保護 | Google Cloud 公式ブログ
Next.js 13 Template と Layout の使い分け
GitHub Container registry が GA したので触ってみる
メルカリ ハロ リリースのQA戦略 | メルカリエンジニアリング
【2024初頭】新規開発で使ってみたいモダンフロントエンド最前線
メルカリShops での monorepo 開発体験記 | メルカリエンジニアリング
応答性を示す新しい指標「INP」 | フロントエンドBlog | ミツエーリンクス
Server-Sent Events を複数パターンで実装して理解を試みる