はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
1時間で出来るWordPress環境構築(※永久無料・・・だった)【※2020/7/1より約300円/月が有料になります】 - Qiita
個人用メモです。 !! ======================== !! ※この記事は2019年の記事です。著者はもうWordPressを使用しておりません。この記事で紹介している内容は2019年当時の内容である事を理解した上で、実際に設定する際は最新の情報を確認しながら行ってください。 2019/9/26追記 2020年1月1日より静的IPが有料になる旨Googleから発表がありました。 $0.004/時間=最大約300円/月が有料となります。 それ以外の部分についても無料でなくなり次第記事を更新してまいります。 情報: @mattn 様 2020/3/20追記 まだ請求額が0円だったので「あれ？」って思って調べたら、上記の静的IP有料の変更は1/1から反映されてるものの、キャンペーンで2020/4/1までは割引されている事に気がついたので注釈追記しました。ちなみに割引されなかった
こういうツイートが話題になっていた。千葉県佐倉市のSound Stream sakuraというライブハウスのようだ。 田舎のライブハウスがコロナ禍で配信ライブにめちゃめちゃ力を入れたら全世界上位1%に入って200万円請求された話。 pic.twitter.com/m159xVtzuU— Sound Stream sakura/サンスト@Go To 21st Anniversary‼︎ (@sound_sakura) December 6, 2021 要約すると、Vimeoから突然200万円請求され支払わざるを得なくなったということだ。 この文面だけ見ると、『なんていう酷いサービスなんだ、許せない！』と感じてしまうだろう。 しかしこれはフェアではない。自分の視点から見ると、Vimeo側に非は殆ど無く、むしろこのツイート主が宣伝目的で炎上させているように感じる。 何故そう言い切れるかというと、
20 年代のフロントエンド.md
Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address. 明日の下書き これはなに 高円寺.dev #3 用の資料 https://koenji.connpass.com/event/160886/ フロントエンド専門じゃない人向けの、フロントエンドの最先端〜やや未来の話です このレイヤーでは Node.js を使うべき/使うと強いという部分がありますが、他言語を否定しているわけではありません。むしろ他言語でこのアーキテクチャを模倣してほしいという話です。 10 年代のフロントエンドのポストモーテム 10 年代まとめ IE が死ななかったので各種ポリフィル、メタ言語からのトランスパイルが発達。しかしモダンとレガシーの乖離が深刻に。 node と npm エコシステムの成立
Cloudflare D1 がヤバい
まだ検証足りないけど、マジで想像通りのブツなら魂震えるかもしれん…。 Announcing D1: our first SQL database Cloudflare D1 = Edge SQLite Cloudflare D1 は Cloudflare Worker で、つまり CDN Network 上で sqlite が動きます。これだけなら普通の sqlite ホスティングなんですが、もちろん Cloudflare が出すからにはそれだけではなく、CDN Edge 上に Read Replica がバラ撒かれた sqlite になります。ヤバくないですか？ 僕はヤバいと思いました。 このヤバさを知るために、Cloudflare が開発した基盤についていくつか抑えておく必要があります。 Durable Objects は CDN 上の Actor モデルを構築できます。この Acto
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
はてなブログのキャッシュ周りをきちんと改善したら、アプリケーションサーバの台数を半分にできた話 - Hatena Developer Blog
はてなブログでSREをやっているid:cohalzです。 2019年12月頃からid:utgwkkやid:onkとともに、はてなブログにおけるキャッシュ周りの改善を行いました。その結果、次のような成果が得られました。 ブログ記事のキャッシュヒット率が、1日平均で8％から58％に向上 アプリケーションサーバの台数を、以前の半数以下に削減 DBに届くリクエスト数が、以前の3分の2まで減少 レスポンスタイムの平均が、以前の8割まで減少 この記事では、実際にどういった改善を行ったのか、その際に気をつけたことや大変だったことを紹介します。 はてなブログがVarnishを導入した経緯と課題 開発合宿をきっかけに問題が明らかになる 進め方をまず考える ホストのメモリをできるだけたくさん利用する メモリを積んだホストでなぜかレイテンシが悪化 キャッシュが分散しないようVaryヘッダを使う デバイス情報を適
「CDN」（content delivery network）という言葉からは、Googleのような大企業がいくつもの巨大なハードウェアを管理し、1秒当たり何百ギガビットものデータを処理する様子が想像されます。しかし、CDNは単なるWebアプリケーションです。私たちのイメージとは違いますが、それが事実です。8年前に買ったノートパソコンを使って、コーヒーショップの席に座りながらでも、きちんと機能するCDNを構築できます。この記事では、これから5時間でCDNを開発しようとするときに、直面するかもしれないことを紹介します。 まずはCDNの機能を明らかにしておきましょう。CDNはセントラルリポジトリ（通称：オリジン）からファイルを吸い上げ、ユーザーに近い場所でコピーを保存します。初期のオリジンはCDNのFTPサーバーでした。現在、オリジンは単なるWebアプリとなり、CDNはプロキシサーバーとして機
これは何 以下記事のアンサーブログです。 qiita.com 以下のことはコメントに書いたんですが、書ききれなかった部分もあったり整理したほうがいいなと思い記事に起こしています。 現代のアプリケーションではC10K問題よりも先にDBやアプリケーションのボトルネックが先に来るため、C10K問題に遭遇するよりも先にやることがある ミドルウェアとしての成り立ちから設定ファイルの書き方に至るまで、それぞれのソフトウェアで思想が根本的に異なるので、単なるパフォーマンス比較をしてもあまり意味がない NginxとApacheの違いをC10K問題を中心に語るのは時代が違う この記事に限らず、多くの「Nginx vs Apache」系記事では「ApacheはC10K問題を抱えている」という論理をベースにそれぞれの違いを表現しています。 が、これは2022年においては(実際にはもっと前からですが)既に事実では
はじめに WASMをブラウザの外で動かすトレンドに関して「Linuxコンテナの「次」としてのWebAssemblyの解説」というタイトルで動画を投稿したのですが、動画では話しきれなかった内容をこちらの記事で補完したいと思います。 2022年もWebAssembly(WASM)の話題が多く発表されましたが、そのひとつにDocker for DesktopのWASM対応があります。FastlyやCloudflareもエッジ環境でWASMを動かすソリューションを持っていますし、MSのAKS(Azure Kubernetes Service)でもWASMにpreview対応しています。WASM Buildersでも2023年のWASMの予想としてWASMのアプリケーションランタイム利用に関して言及されました。 WASMといえば元々ブラウザ上で高速にC++のコードなどを実行するところから始まっている
何故 Fastly を使うのか
数ある CDN のなかでも Fastly は圧倒的に優れた特性を持つものだと思うので、障害にかこつけてその優れた点を紹介していく。 キャッシュが消えるのがはやいCDN とは世界各地にあるキャッシュサーバーにコンテンツをキャッシュして配信してもらうことで、オリジンサーバーの負荷を軽減したりユーザーへの配信速度を上げたりするリバースプロキシのホスティングサービスだが、 Fastly の最大の特徴としてはそのキャッシュが消えるのが速い。普通の CDN が数十秒〜数分とかかるのにたいして 0.2 秒で全部消えることが保証されているし、キャッシュにたいしてキーをつけておけば(HTTP ヘッダーに Surrogate-Key って入れるだけ)特定のキーがついているキャッシュだけ 0.2 秒以内に消したりということができる。 これにより、 CDN による配信高速化の恩恵を受けながら、コンテンツをリアルタ
『アメブロのAMPを終了します』
アメーバスタッフブログでも記載させていただいた通り、11/15より順次アメブロのAMP対応を終了させることになりました。 なぜAMPをやめるのか？2016年の3月にアメブロはAMP対応をスタートさせていました。 （当時のブログ記事はこちら） そこから5年以上AMPを採用し、モバイルの検索結果からはAMPキャッシュに飛ぶようになっていました。 Googleの検索結果からはGoogleのキャッシュに移動するわけで、当然体感速度としては良好なものであったと思います。 「それなのになぜやめるのか？」 ですが、基本的にはビジネス的な問題となります。 ウェブ界の状況、社会状況等々によっての総合的な判断ということになります。 検索結果がクリックされた際にGoogleのキャッシュが表示されるという点では、CDNのコスト削減等はあるのですが、それでもやはりトータルで考えたときに今回はAMPを終了させるという
CloudflareのサーバーはもうIPを所有していません。では、どのようにインターネットに接続しているのでしょうか？
データセンター内のIP共有サーバー間でIPを共有するという考え方は新しいものではありません。ルーター上のSource-NATで実現してきた方法です。残念なことに、必要なエグレスIPの数が非常に多く、また運用のサイズも大きいため、ルーターレベルでステートフルファイアウォールまたはNATに依存できません。また、当社は共有状態を好まないので、NATの分散インストールは避けたいところです。 代わりに選択したのは、ポート範囲によるサーバー間におけるエグレスIPの分割です。特定のエグレスIP に対して、各サーバーは使用可能な送信元ポートのごく一部（ポートスライス）を所有します。 インターネットからリターンパケットが届くと、それを正しいマシンに戻すルーティングをしなければなりません。このタスクのために、L4 XDPベースのロードバランサーである "Unimog "をカスタマイズしました。当社のL4 XD
「フロントエンド領域」を再定義する
freee のweb とモバイルでのテスト自動化の取り組み / web-and-mobile-test-automation-initiatives-in-freee
ブラウザからDBに行き着くまでただまとめる
はじめに あなたはブラウザからデータベース(DB)に情報が行き着くまでにどんな技術が使われているか説明できますでしょうか？ どのようなプロトコルが用いられ、どの技術を駆使してサーバと通信しているのか、Webサーバでは何が行われ、どのようにして負荷が分散されているのか、トランザクションはどのように管理されているのか、そしてデータベースではシャーディングや負荷対策のためにどのような対策が取られているのか… なんとなくは理解しているものの、私は自信を持って「こうなっている！！」とは説明ができません。 そこで今回は「大規模サービス」を題材としてブラウザからデータベースに至るまでの、情報の流れとその背後にある技術について、明確かつ分かりやすく解説していきたいと思います。 対象としてはこれからエンジニアとして働き出す、WEB、バックエンド、サーバーサイド、インフラ、SREを対象としております。 1.
AbemaのW杯配信、ヤマトだけでなく佐川と西濃と日本郵便も呼んだ、みたいな増強で臨んでいて別の熱い戦いが繰り広げられていた
にゃーんっ @st9708f ABEMAのワールドカップ配信、AWSとAkamaiを同時利用、バランシングさせていて"本気"を感じる なんと韓国リージョンまで利用してインターネットの限界に挑戦中 耐えろ・・・！ pic.twitter.com/F85Wyk9a63 2022-12-05 23:27:39
いくつかのクラウドサービスでは、新規ユーザーに対する1年程度の無料トライアルや一定額のクーポンなどの提供だけでなく、期間の制限なくずっと無料で使える、いわゆる「Free Tier」や「Always Free」と呼ばれるサービスが提供されています。 こうしたサービスは試行用の環境や一時的なテスト環境、あるいはホビー用途などに適しています。 本記事では期限の制約なく無料で提供されている主なクラウドサービスを、2023年版としてまとめました（新規ユーザーとして期限の制約なく無料で使えるものを優先しています）。 ただしこれらの無料のサービスは、提供側の都合によって申し込みや利用が制限されたり、もしくは提供自体が終了したりすることがあります（昨年、多くのITエンジニアに人気であったHerokuのFreeプランが終了したことをご記憶の読者も多いでしょう）。 無料のサービスを利用する場合には、そうした提
2021年6月8日、fastlyのCDNサービスで障害が発生し、国内外複数のWebサイトやサービスに接続できないなどといった事象が発生しました。ここでは関連する情報をまとめます。 原因はソフトウェアの潜在的な不具合 fastlyより6月8日付で今回の障害の顛末が公開されている。 www.fastly.com 障害原因はソフトウェアの潜在的な不具合で特定状況下かつ顧客構成で発生する可能性があった。このソフトウェアは5月12日に展開が開始されていた。 6月8日早くにこの不具合を発生条件を満たす構成変更が顧客によって行われネットワークの85%がエラーを返す事態が発生した。サイバー攻撃の可能性は否定と報じられている。*1 障害は発生から1分後にfastlyに検知され、49分以内にネットワークの95%が復旧した。 今回の障害を受け、短期的には修正プログラムの早期適用、復旧時間の短縮、テスト時に不具合
コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開
ローカル・経路上のキャッシュを併用しよう キャッシュは再利用されるほどいいものです。 サイトの規模にもよるのですが、ローカルと経路上のキャッシュはそれぞれ性質が異なるため、ブラウザキャッシュだけ適切に設定しておけば経路上では不要というわけではありません。 ローカルキャッシュはキャッシュを持つクライアント自身がサイトを再訪する場合は有効ですが、キャッシュを持っていない新規クライアントには無効です。 経路上のキャッシュは新規クライアントに対してもキャッシュを返すことができるため、例えばサイトへの流入が突然増えるといった事態でも対処がしやすいです。 そのためコンテンツ次第ではありますが、ブラウザキャッシュのように特定のクライアントでしか使えないprivate cacheにするよりも、 効率を考えてローカル・経路上のどちらでもキャッシュができ、多数のクライアントで共有できるshared cache
仕事で Netlify にデプロイしたSPAの読み込みが遅いので原因を調査してほしい、という依頼を受けてウェブパフォーマンス調査を行った。顧客から許可をもらって、この記事ではNetlifyに対してどういう調査をしたのかを書く。 結論だけをまず書くと、NetlifyのCDNのファイル配信パフォーマンスは日本国内からだと非常に悪い。パフォーマンスを改善させるためには、Netlifyに直接アクセスさせるのではなく、前段に他のCDNやキャッシュサーバを挟んだりするほうがいいだろう。 調査の前提 日本国内からのみの調査 サイトには静的なファイルをデプロイしているのみ 該当するNetlifyにデプロイしたSPAをブラウザで試しに開いてみると、確かに初回の読み込みのパフォーマンスがめちゃくちゃ悪い。 Chrome Devtoolsを開いてネットワークタブでどういうふうにリソースの読み込みを行っているのか
月間ページビュー(PV)が500万PVあり、データ転送量も80TBあるという人気ウェブサイトを400ドル(約4万6000円)以下で維持する方法を、3Dのアセットライブラリを一般公開しているPoly Havenがまとめています。 How we handle 80TB and 5M page views a month for under $400 – Poly Haven Blog https://blog.polyhaven.com/how-we-handle-80tb-and-5m-page-views-a-month-for-under-400/ ウェブサイト運営のポイントの1つは「資金リソースをどう管理するか」です。資金があればAmazon S3のようなクラウドプラットフォームを利用するのが簡単ですが、データ転送量が月間80TBもあるPoly HavenのようなウェブサイトでAmaz
SHOWROOM株式会社の映像配信遅延が業界最速レベルに縮まったので嬉しいという話 - izm_11's blog
概要 現在僕はSHOWROOM株式会社というところでxRのクライアントエンジニアをしています。 が、SHOWROOM株式会社はライブ配信サービスを行っています。 今回の記事は、このライブ配信サービスの方でかなり面白い取り組みが行われて、世に出たので面白さをみんなに布教したいと思って書きます。 prtimes.jp ライブ配信サービスの話 SHOWROOMは国内ライブ映像の配信サービスとしては古株で、確か6年くらいの歴史があります。 その後pixivさん(pixiv Sketch)やCyberZさん(OPENREC.tv )や、LINEさん(LINE LIVE)など、色々な会社さんがライブ配信サービスを生み出して、国内の市場は活気づいています。 配信者と視聴者間でコメントやギフティングでリアルタイムコミュニケーションを取る感じの仕組みです。 SHOWROOMの技術的負債 先ほど説明した通りに
ランニングコストほぼゼロから始めるスケーラブルな本番環境
はじめに 私は個人開発で一山当てたいと常々思っていて、そのためにいくつかヒットしそうなサービスのアイデアがあります。エンジニアであればアイデアを具現化することに躊躇してはいけないと思うわけですが、一度リリースしてしまうとランニングコストが発生するわけで、仮に全く人気がでなかったとしたらランニングコスト分の赤字を垂れ流すことになります。 一方、個人開発者というのはおそらく誰しも夢見がちなので、リリース後バズったりしてユーザーが大量に押し寄せてきてしまってサーバーダウンする可能性も考えてしまいます。 その結果、「全く誰も来なくてランニングコストが赤字になったらどうしよう」という不安と「めちゃくちゃバズってしまってサーバーダウンしてチャンスを逃したらどうしよう」という不安が、心の中でせめぎ合うことになります。 そこで、今回はその2つの不安を一気に解消する「使われなければランニングコストが限りなく
✔️Googleも参戦してしまった韓国の通信戦争 去る9月20日、韓国科学技術情報通信部で電気通信事業法改正案関連公聴が開かれました。マスコミではこの法をいわゆる「ネットワーク使用料法」と命名しました。コンテンツ事業者（CP）とインターネットサービスプロバイダ（ISP）間のネットワーク利用料の支払いを法的に義務付ける法案の推進を本格化し始めました。 すると、YouTubeアジア・太平洋地域総括副社長であるガトム・アナンド（Gautam Anand）氏は、公式ブログに「今回の法案が通過する場合、YouTubeは韓国での事業方式を変更しなければならない」とし、韓国のクリエイターやユーザーに反対請願を促し、敏感な反応を示しました。事実上、韓国事業への投資縮小を警告したのです。 実際に公聴会以後、ストリーミングプラットフォーム「Twitch（ツイッチ）」は運営費負担を名分に韓国ユーザーの最大画質を
ブラウザキャッシュの仕組み
はじめに 最近Denoをよく触っており、DenoのSSRフレームワークであるFreshのミドルウェア・キャッシュについて調べている際にブラウザキャッシュのEtagヘッダが使用されており、気になったのでブラウザキャッシュの仕組みについて調べてみました。 Etagの正体 Etagとは、ブラウザキャッシュの仕組みの中で使用されるHTTPレスポンスヘッダーでリソースの特定のバージョンに関する識別子のことです。 Etagがあることでウェブサーバーは、コンテンツが変更されていない場合はレスポンス全体を再送する必要がないので、キャッシュがより効率的になる。 ブラウザキャッシュの設定について ブラウザキャッシュを設定する際に必要なHTTPレスポンスヘッダーはEtagを含めて以下の通りです。 Expiresヘッダー Cache-Controlヘッダー Last-Modifiedヘッダー Etagヘッダー そ
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
This post is also available in Deutsch, Français, 简体中文, 繁體中文, 日本語, 한국어, Español and ไทย. IntroductionToday, June 21, 2022, Cloudflare suffered an outage that affected traffic in 19 of our data centers. Unfortunately, these 19 locations handle a significant proportion of our global traffic. This outage was caused by a change that was part of a long-running project to increase resilience in our busi
Honoという僕が作っているWebフレームワークのGitHubスター数が2,000に迫ってきた。これまで作ってきたOSSのソフトウェアでは最高で revealgo の221、次点で gh-markdown-preview の134だ。それが一気に2,000である。 もちろん、スターの数がソフトウェアの良し悪しを決めるものではない。 それに2,000はとりわけ多いわけではない。 でも、以前の自分には遥か彼方に見えていた数を獲得できたのは、とても嬉しいことだ。 去年12月から作り始めて9ヶ月間、552コミット。 今や使ってくれる人も増えた。 cdnjs のAPI Serverのバックエンドにも使われているし、 HonoをきっかけにGitHubスポンサーをしてくれている企業や人も現れている。 なにより、いろんなことを勉強させてもらった。 今回はHonoというプロダクトがどうやって2,000のスタ
Webシステムにおいて「画像や帳票等のファイルはDBへ格納すべきなの？」を調べてみた（ファントムファイル） - Qiita
Webシステムにおいて「画像や帳票等のファイルはDBへ格納すべきなの？」を調べてみた（ファントムファイル）oracleWeb この記事は、 JPOUG Advent Calendar 2023 24日目の記事です。 23日目は multilayer さんの記事『OCIのLanding Zoneについて調べてみた！』でした。 想定読者 ファントムファイルについてよく知らない、帳票の扱い方をあまり考えたことがない人 イントロダクション 皆さん、世の中のWebシステムで利用される画像や帳票ファイルがどこに保存されているかご存知でしょうか？ 帳票や大きな画像ファイルなどを扱う際、大きく分けて２つの設計方針があります。 ・DBに直接保存する ・DB外部に保存し、パスなどをDBに保存する オライリーのSQLアンチパターンの、”ファントムファイル”という章にはこのあたりのことが書いています。 [Amaz
ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいて Next.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAuth.jsを使っているのが分かる。 next-auth.js.org Emailでサインアップする
ユ－ダチ @Shower_1508 ウマ娘高速リセマラ方法 1チュートリアルを終わらせる。(チュートリアルガチャは固定) 2ガチャを引く。星3交換券は引かない。 3メニューを選択してタイトル画面へ戻る 4タイトル画面のメニュー開いてデータ削除 5チュートリアルスキップ可能なので、2〜5を繰り返す。 #ウマ娘 pic.twitter.com/WgRvS2ag3E 2021-02-24 11:37:20 ところてん @tokoroten 株式会社NextInt 代表 「仕事ではじめる機械学習」「データサイエンティスト養成読本 ビジネス活用編」共著者。 データ分析、コンサル、ゲームディレクター、技術顧問、企業での研修・講演などで出稼ぎ労働中。 お仕事相談はDMからどうぞ。 nextint.co.jp slideshare.net/TokorotenNakay… ところてん @tokoroten
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
【Next.js Update!】v12リリースを踏まえ、Next.jsの採用を考える 本発表は以下URLでアーカイブ視聴が可能です。https://youtu.be/KaS3bgz_CA4 イベントページ：https://forkwell.connpass.com/event/228457/
at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
Python at Netflix
By Pythonistas at Netflix, coordinated by Amjith Ramanujam and edited by Ellen Livengood As many of us prepare to go to PyCon, we wanted to share a sampling of how Python is used at Netflix. We use Python through the full content lifecycle, from deciding which content to fund all the way to operating the CDN that serves the final video to 148 million members. We use and contribute to many open-sou
SPF レコードで許可されている IPアドレスの実態がクラウドやプロキシ等の共用サービスのものであるケースは多く、それらの IPアドレスが第三者によって利用できる可能性があることを悪用し、SPF 認証を pass、結果的に DMARC 認証まで pass して詐称メールを送信できてしまうことを指摘した論文が公開されています。 この論文では、上記のような SPF の脆弱な展開に対する攻撃手法を BreakSPF と呼び、関連するプロトコルや基盤の実装に対する分析と共に、その内容が体系的にまとめられています。 本記事では、その論文を参照しながら、簡単に概要をまとめておきます。 補足事項 (2024/3/5) 本記事につきまして、(当サイトとしては) 多くのアクセスいただいているようで (ちょっとビビってま) す。まことに大変ありがたいことに色々とシェアいただいたりしたようです。 そこで、記事の
CDNのエッジで実行する系が面白い
先日の Next.js Conf で Vercel は Next.js の新しいバージョン「12」をリリースした。 興味深いのは、Vercel は同時にEdge Functionsというサービスを開始したことだ。 Edge Functions – Vercel 謳い文句のひとつに Push your functions to the edge とあるように、「エッジ」で実行される「関数」を提供するプラットフォームである。 ここで言うエッジとはなにかというと、Vercel は明言していないが CDN のエッジのことだ。 Vercel の例のように「CDN のエッジで実行する系」が増えている。例えば以下の 7 つだ。 Cloudflare Workers Fastly Compute@Edge AWS CloudFront Functions AWS Lambda@Edge Deno Depl
どういうこと？/TL;DR AWS → Cloudflareに移行したら費用が99%削減できました。 対象読者 今CloudFront + S3で構築しているけど転送量に困っている人 Cloudflare R2を検討している人 (CloudFrontとCloudflareをよく間違える人) はじめに 元々、動画CDNの構築はCloudFront + S3で構築していました。 この構成の場合、課金ポイントは主に三つあります。 CloudFrontのアクセス数に対する課金: そこそこ(多量ではない) S3の保管に対する課金: 200GB程度 CloudFrontの転送量(Egress)に対しての課金: 数TB そのため、毎回イベントごとにかなり費用がかかる状態でした。 動画の数もアクセス数もそこそこではあったのですが、動画特有の転送量が非常に多い… そういった状態でした。 導入前夜 この時はち
シンプルな構成により爆速で表示されることで有名な阿部寛のホームページですが、さまざまな技術を駆使してさらに35％の高速化を実現した動画が人気です。ぜひ本家サイトでも取り入れてほしい改善策。 まだ高速化の余地が……!? この動画を公開したのは、コスメティック田中さん（YouTube／Twitter）。動画によると、阿部寛のホームページがホームページビルダーというやや古いソフトで作られているなど、近代的な技術を駆使すれば改善できる余地が見られることを発見し、高速化に乗り出したそうです。 今回実施する高速化 この2点を改善していきます 最初に実施した高速化は、サイトの通信速度の改善から。CDNという技術で通信速度を上げる技術を使用するため、AmazonのCloudFrontにファイルをそのままアップロードして、コピーの阿部寛のホームページを作成しました。 ファイルをアップロードします このCDN
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Vimeoで200万円請求話はミスリードなので騙されない方が良い - Cloud Penguins
CDNは5時間で開発できる | POSTD
Re: NginxとApacheって何が違うの？？ - inductor's blog
Linuxコンテナの「次」としてのWebAssembly、の解説
期限の制約なく無料で使えるクラウド「Free Tier」主要サービスまとめ。2023年版
fastlyのCDNで発生したシステム障害についてまとめてみた - piyolog
HTTPキャッシュ入門の入門 – cat /dev/random > /dev/null &
Netlifyが日本からだと遅い - id:anatooのブログ
月間500万PV＆転送量80TBのサイトをたった4万円で維持する方法
VPN装置やファイアウォールを無料でクラウド化！ より使いやすく進化した「Cloudflare Zero Trust」【イニシャルB】
KORIT韓国だけ低画質で動画を見る？「ネットワーク使用料」 問題総まとめ
メルカリShops のフロントエンド | メルカリエンジニアリング
Cloudflare outage on June 21, 2022
How I/we got 2k stars - ゆーすけべー日記
「しずかなインターネット」の技術スタックを調べる - laiso
最近のソシャゲが「リセマラ」をシステムでサポートしているのはDL時のコストの問題らしい
Edge Side Frontend という新領域
SPF (やDMARC) を突破する攻撃手法、BreakSPF | 朝から昼寝
Cloudflareに移行したら99％コスト削減できた話
阿部寛のホームページをさらに高速化した猛者現る 35％の高速化に成功し速度制限未満でも一瞬で表示可能に
head-flower.com
togetter.com
togetter.com
news.yahoo.co.jp
kodomosafetypj.metro.tokyo.lg.jp
eikaiwa.dmm.com