Conservative web development September 4, 2018 on Drew DeVault's blog Today I turned off my ad blocker, enabled JavaScript, opened my network monitor, and clicked the first link on Hacker News - a New York Times article. It started by downloading a megabyte of data as it rendered the page over the course of eight full seconds. The page opens with an advertisement 281 pixels tall, placed before eve
こんにちは、エンジニアリングGの高橋です。 去年の11月にエムスリーにSREとして参画してから、サーバのセットアップ作業などの基本的なインフラ作業に加えて、各サービスのサービスレベルの設定や監視の仕組み作りなども行ってきました。 今回はそのサービスレベルを監視する仕組みをご紹介したいと思います。 本稿の流れ SLI設定 SLO設定 各種メトリクスの収集 アラーティング 監視ダッシュボードの作成 まとめ 全体像 ざっくりとした全体像としては上図のような感じです。 また、この取り組みを実施した前後で、下のような変化（効果）がありました。 前 ログの収集はしているが、全サービスでは取れていない ログの収集経路がサーバによって異なる（Service AからElasticsearchとかもあったり） 後 全サービスのアクセスログを収集・閲覧可能 ログの収集経路を共通化 ほとんどのサービス（70以上）
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
概要 前回までのアプリケーションにルーティングを追加する．ルーティングとは，いわゆる画面遷移とほぼ等価で．SPAになる前のWebアプリケーションで，リンクをクリックするとページ全体が書き換わる処理をSPAで実行する仕組みのことを指す．これを実現するライブラリとしてreact-routerが有名なので，それを使ってルーティング機能を組みこんでみる． 準備 まず，react-routerをインストールする これをインストールすると，BrowswerRouter, HashRouter, Link, Routeなどのコンポーネントが使えるようになる．それぞれのコンポーネントを概説する．その前に．SPAのルーティングがどのように行われているか整理してみる．SPAのルーティングでも，URLに関連付けて管理したほうが都合が良い(管理しやすい)．しかし，実際にはSPAなので，画面全体の再描画はしてほしく
[機能アップデート]ついに Lambda@Edge が HTTP リクエストボディにアクセスできるようになった！ ついに Lambda@Edge で HTTP リクエストボディにアクセスできるようになりました！サンプルケースでは Lambda@Edge を Kinesis Firehose のプロキシとして使う方法をご紹介します！ AWS 本家ブログ記事にて、Lambda@Edge で HTTP リクエストの BODY にアクセスできることがアナウンスされました。 Today we announced that Lambda@Edge can now access the HTTP Request Body. これまで Lambda@Edge ではヘッダのみに限定されていましたので、これは大きなアップデートですね！早速、本家記事を参考に、サンプルケースを試してみましょう！ どんなことが出来
![[機能アップデート]ついに Lambda@Edge が HTTP リクエストボディにアクセスできるようになった！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/52bf254866896bb47cb09e8d89e2d3e41513b212/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2017%2F01%2Feyecatch-cloudfront.png)
Ebook PPC Trends 2025 In this guide, industry experts explore the challenges and opportunities presented by the onslaught of AI tools, and provide actionable tips for thriving amid these shifts. Download Now Webinar How To Unlock Growth In 30 Days: The Secrets Of Enterprise SEO Join us as we share insights from the top SEOs at the world’s largest traffic-driving websites. Instead of guesswork, you
Web担当者Forum の連載コーナー、「海外&国内SEO情報ウォッチ」を更新しました。 今週取り上げた記事は次のとおりです。 今週のピックアップ 実録：Googleスピードアップデートで遅いサイトの検索順位が本当に落ちた！ グーグル検索 SEO 情報 インデックス送信ツールをグーグルが廃止！（ただし……） グローバルサイトのSEO、今はIPアドレスを気にする必要なし 画像検索のリファラーURLをグーグルが変更 クロールできているのにレンダリングのFetch as Googleに失敗するのはなぜ？ Web 担当者に役立つ最新情報 「まだHTTPSじゃないサイトは、あきらめてね」Chromeが「保護されていない通信」ラベルを常時表示開始 HSTSを構成していればHTTPからHTTPSへのリダイレクトは不要か？ 目的が同じだが内容が違う2つのページ両方を上位表示できるか？ AMP対応した大手E
ユーザーエンゲージメント部の諸橋 id:moro です。 わたしはずっと、ユーザー登録やログイン周りという、サービス的には基盤的なところ、技術スタック的にはアプリケーション寄りのところに取り組んできました。関連する話を何度かこの開発者ブログにも書いています。 ユーザー基盤を作り直しながらRailsでのサービス層に向き合う 巨大なWEBアプリケーションに巨大な変更を取り入れるためにやったこと この記事で触れている「電話番号による登録」について、チームメンバーが別の側面を紹介してくれています。 今日はそのあたりの開発を通じて考えた、Railsアプリケーションでのフォームオブジェクトやサービス層といったものが何であるか、という問いに対する、現在の自分のスタンスを紹介します。 サービス層、サービスオブジェクト、フォームオブジェクト もともと Railsは Web 画面から DB 構造までをあえて密
Ruby’s Rack Push: Decoupling the real-time web application from the web
(UPDATED: updated to the PR are now reflected in the post) Something exciting is coming. Everyone is talking about WebSockets and their older cousin EventSource / Server Sent Events (SSE). Faye and ActionCable are all the rage and real-time updates are becoming easier than ever. But it’s all a mess. It’s hard to set up, it’s hard to maintain. The performance is meh. In short, the existing design i
2018-04-24(日本時間2018-04-25)にNode.js v10.0.0がリリース そのクラス図（event付き）を（たぶん）世界最速で公開 https://github.com/darai0512/node-class-diagram core moduleの一部のみ net, tls, udp, http, httpsとそれらの親クラスに当たるevents, stream WIP 公式ドキュメント記載分のみ Deprecated APIはDocumentation-only1も含め除外 図でhttp.IncomingMessageに'close'イベントがないのは、streamのものを継承していることを表す（ただしoverwriteして別物になっていることもあるので注意） 赤字はv9以降で追加されたもの、うちv10.0.0で追加されたのは下記2 EventEmitter o
Open Container Initiative（OCI）がDockerイメージの配布プロトコル標準化に着手。事実上の標準であるDocker Registry HTTP API V2をベースに Dockerコンテナの標準仕様を策定するOpen Container Initiativeは、事実上の標準であるDocker Registry HTTP API V2をベースに、コンテナイメージの配布プロトコルの標準化に着手すると発表した。 コンテナ型仮想化を実現するDockerは、登場当初こそDocker社によって開発された独自実装でしたが、2015年にDocker社やマイクロソフト、Google、Red Hat、VMware、IBM、Amazon Web Servicesなど主要各社がコンテナの標準化団体「Open Container Initiative」（OCI）が発足。仕様の標準化作業が
Web API開発において、エラーをどういう形式で返却するか、というのは設計する際の悩みポイントかもしれません。エラーレスポンスの仕様の1つとして RFC7807 Problem Details for HTTP APIs があります。 この形式をサポートしつつ Rails や Sinatra でも使える Ruby ライブラリをこの度作りましたのでそのご紹介。その名も ProblemDetails. 本記事では Rails での使い方について。 ProblemDetailsの機能概要 gem では以下の機能をサポートしています。 RFC7807形式を実装したオブジェクトクラス Railsサポート: problem detail 形式でレスポンスする problem renderer Sinatraサポート: problem render function problem details 形
サイトをHTTPSにする 2018年7月に公開されるChrome 68でHTTPなサイトは”Not Secure”と表示されるようになるので、このサイトもHTTPS化することにしました。 Google Online Security Blog: A secure web is here to stay 個人的なサイトなので適当にやってもいいですが、一応ちゃんと追跡できる方法を使ってHTTPS化することにしました。 この記事では次のことを目標しました。 https化後にhttpでアクセスしているリソースがないことをツールで確認できる 要はMixed Contentがないことを検知する方法をもつ 常時HTTPSでアクセスできるようにする Content-Security-Policy-Report-Only このサイトはJekyll + GitHub Pagesで動いている(動いていた)静的サ
1. はじめに 今回はajaxでマルチパートを使わずにファイルをアップロードする方法について説明したいと思います。 （ポイント） JQueryなどの外部ライブラリは利用せず、素のJavaScriptのみで実現する XMLHttpRequestとFile(Blob)を利用する multipart/form-dataではなく、ファイル種別に応じた任意のcontent-typeでデータを送信する HTTPリクエストのBODYはファイルデータそのもの（バイナリ）となり、multipart/form-data（たとえばbase64）のエンコード、デコード処理が不要となる サーバ側のアップロード処理がこの方法に対応している必要がある 2. ソースコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title>
これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象 Firefoxを開発するMozillaは、Firefoxにおいてこれから開発されるWeb関連の新機能はすべて安全なコンテキスト（Secure Context）のみを対象にすると、Mozilla Security Blogの1月15日付の記事「Secure Contexts Everywhere」で明らかにしました。 安全なコンテキストとは？ 安全なコンテキストとは、W3Cのドキュメント「Secure Contexts」で厳密に定義されています。日本語での説明はMDNの「Secure Contexts」で読むことができ、次のように説明されています。 (HTTPS / TLS を介して) コンテンツが安全に配信され、安全ではないコンテキストとの通信の可能性が限られているという合理的な確信
本記事では、 チームによる持続的に変更可能なWebアプリケーションの開発を目標に、フレームワーク導入時に考慮すべき22の観点を紹介する。 フレームワークによって特徴は異なるが、本番導入にあたって、考慮すべきポイントはあまり変わらないので、極力フレームワーク1に依存しすぎないよう配慮する。また、話をシンプルにするため、REST APIを提供するアプリケーションを題材とする。 前提 ソフトウェアのエントロピー ソフトウェアがエントロピー増大の法則を避けられないことを、体感している開発者は多いだろう2。普通にアプリケーション開発を続けると、開発スピードは鈍化し、品質は低下してバグが増え、開発者からは技術的負債への怨嗟の声が聞かれるようになる。エントロピー増大というフォースは極めて強力で、意思を持って立ち向かわなければ、容易にダークサイドに堕ちてしまう。 関心事の分離 大規模Webアプリケーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
