JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
ChatGPTをぬるぬるにする🐌Server-Sent Eventsの基礎知識
単方向通信であるということと、HTTP/1.1上で動作しているのが大きな特徴です。 また、HTTP上で動作することから、通信の互換性が高く、セキュリティモデルも使いまわせるので安心です。 どんな用途と相性がいいの？ 双方向通信がしたいわけでなければ、相性の幅がとても広いです。 今回の ChatGPT のような、GPT がトークンを生成するごとに送るケースはもちろん、通知の未読件数バッジの更新、ニュース速報の表示など、サーバからイベントを送りたい時ならなんでも使えます。 HTTP/1.1で動くカラクリ SSEはHTTPのレスポンスヘッダにContent-Type: text/event-streamを指定した上で動作します。 SSEが動く流れ クライアントがサーバーに HTTP/1.1 リクエストを送信し、イベントストリームに接続します。 サーバーは、Keep-Alive 接続を使用して、T
The Future of the Web is on the Edge
Except Singapore, we’ve got a world of sub-100 millisecond TTFBs. This is because instead of heading off to Virginia to get the site, each of these locations can use an edge server nearest to them. The edge is about getting 50ms response times vs 150ms response times. You can test this for yourself with a VPN. If you: curl -I https://deno.landYou’ll get the server nearest your location: server: de
TLS 1.3 学習ノート
はじめに これは筆者が TLS 1.3 を学習した時のメモを記事にしたものです。 内容の正確性は担保できませんので、あらかじめご了承ください。 参考にした書籍 プロフェッショナルSSL/TLS (ISBN: 978-4-908686-00-9) ラムダノートでを購入するとダウンロードできる特別版PDFも参照しています 徹底解剖 TLS 1.3 (ISBN: 978-4-7981-7141-8) 参考にしたウェブサイト うるふブログ | wolfSSL Wikipedia IT用語辞典 e-Words TLS とは？ TLS は Transport Layer Security の略で、インターネット上で安全に通信を行うためのプロトコルです。 インターネット上で安全に通信を行う必要性 前提として、インターネットはセキュリティが考慮されていません。 もともとインターネットは、大学間で少数のノー
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
React Server Componentsの仕組み：詳細ガイド | POSTD
React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のクライアントの多くは、Plasmicを使用して高いパフォーマンスが求められるマーケティングサイトやECサイトを構築しています。 したがって、RSCはまだReact 18の初期実験機能ですが、Plasmicではその仕組みを詳しく調べています。 このブログ記事では、これまでに分かったことを紹介したいと思います。 Plasmicのメンバーによるツイートまとめもご覧ください。 React Server Componentsとは何か サーバサイドレンダリングとの
Visual Studio Code blog
Register now for a full day of community, learning, and all things Visual Studio Code The Visual Studio Code Server July 7, 2022 by Brigit Murtaugh, @BrigitMurtaugh A remote present and future Note: We've released changes to how you can connect to the VS Code Server since this blog was published. Check out the December 2022 blog post for the latest guidance. In 2019, we released the Remote Develop
Next.js 12.2
We're laying the foundation for the future of Next.js with 12.2: Middleware (Stable): Dynamic routing for your entire application. On-Demand ISR (Stable): Update content without redeploying. Edge API Routes (Experimental): High performance API endpoints. Edge SSR (Experimental): Server-render your app, at the Edge. SWC Plugins (Experimental): Extend compilation with your own plugins. Improvements
Fresh 1.0
Fresh is a new full stack web framework for Deno. By default, web pages built with Fresh send zero JavaScript to the client. The framework has no build step which allows for an order of magnitude improvement in deployment times. Today we are releasing the first stable version of Fresh. Client side rendering has become increasingly popular in recent years. React (and React-like) pages allow program
リアルタイム共同編集のアルゴリズム (Operational Transformation; OT) を理解する試み – RORO
Google Docsのように文書を複数人でリアルタイムに共同編集できるアプリケーションがあります。あのような機能は、多かれ少なかれ、Operational Transformation (OT; 操作変換) という考え方を使って実現されているようです。興味があったので、このOTについて調べてみました。 (追記: これからは OT でなく CRDT だという話 → I was wrong. CRDTs are the future) なおGoogle Docsではいわゆる「リッチテキスト」を共同編集できますが、ここでは話を簡単にするために「プレーンテキスト」を共同編集することを想定します。 リアルタイム共同編集の流れ 共同編集システムの登場人物は次の通りです： サーバ x 1（各クライアントから届く編集操作をもとに、最新の文書を保持します） クライアント x N（文書を編集する側です） そ
1000万ユーザに耐えるサーバを作ってみた
概要 スケーラビリティが高く1000万ユーザに耐えるAPIサーバを作成しました。TwitterのようなSNSです。実装はGitHubで公開しています。 開発環境は次の通りです。 Node 16.14 Express 4.17.3 DynamoDB 2012-08-10 機能要件は次の通りです。 ツイート機能 ツイートに対してコメント機能 フォロー機能 タイムライン機能 導入 Facebook、Amazon、Youtubeのような数億人のユーザを抱えるサービスでは大量のトラフィックを捌く必要があります。大量のトラフィックを捌くためのアプローチとして一般的に使われるのはスケールアップではなくスケールアウトです。スケールアップは性能の高い機器を使うためにコストが高いです。また、1つのサーバで運用するためにパフォーマンスの限界が存在します。 スケールアウトについて考えます。アプリケーションは大きく
Why LSP?
Why LSP? Apr 25, 2022 LSP (language server protocol) is fairly popular today. There’s a standard explanation of why that is the case. You probably have seen this picture before: I believe that this standard explanation of LSP popularity is wrong. In this post, I suggest an alternative picture. Standard Explanation The explanation goes like this: There are M editors and N languages. If you want to
電子メール送信に関する技術
ふと気になって調べたことの備忘メモです ✍ （2022/4/2追記）Twitterやはてブで色々とご指摘やコメントを頂いたので、それに基づいて加筆と修正をおこないました 特に、幾つかの技術については完全に誤った説明をしてしまっており、大変助かりました…ありがとうございました🙏 （2024/8/13追記）今年に入って、実務で使える メール技術の教科書という本が出版されています🎉 私も買って読みましたが、電子メールに関するトピックについて広くカバーされていました パブリッククラウドに関する記述は少な目ですが、メールサーバーを自身で構築する方法が紹介されていたりなど、より基礎的な内容に主眼をおいている本だと思います なぜ調べたか メール送信機能のあるWebアプリケーションを開発・運用していると、 特定のアドレスに対してメールが届かないんだが とか MAILER-DAEMONなるアドレスからメ
Docker Compose V2で変わったdocker-compose.ymlの書き方
概要 2021年の後半にDocker Compose V2がリリースされました Docker Compose V2はCompose Spec[1]に準拠しているため、docker-compose.ymlもその仕様に則った書き方ができるようになっています services: app1: image: awesome/webapp configs: - my_config secrets: - server-certificate app2: image: awesome/database extends: service: app1 configs: my_config: file: ./my_config.txt secrets: server-certificate: file: ./server.cert services: app1: configs: - source: my_co
Next.js で始める gRPC 通信 - 30歳からのプログラミング
サーバ・クライアント間の通信を gRPC で行う場合、インターフェイスを定義した共通のファイルから、サーバとクライアント双方のコードを生成することができる。 この記事では、インターフェイスの定義ファイルを作成するところから始めて、gRPC を利用した単純なウェブアプリを作っていく。 gRPC についての概念的な説明などは扱わず、実際に手元で動くウェブアプリを作ることで、gRPC を使った開発についてイメージしやすくなることを意図している。 Next.js では API Routes を使って API サーバを作ることができるが、それを gRPC クライアントとして実装する。 そのため、リクエストの流れは以下のようになる。 Frontend == (REST) ==> API Routes == (gRPC) ==> gRPC Server 動作確認は Node.js のv16.13.2で行
Catalog of Patterns of Distributed Systems
Distributed systems provide a particular challenge to program. They often require us to have multiple copies of data, which need to keep synchronized. Yet we cannot rely on processing nodes working reliably, and network delays can easily lead to inconsistencies. Despite this, many organizations rely on a range of core distributed software handling data storage, messaging, system management, and co
WebVM - Linux virtualization in WebAssembly
__ __ _ __ ____ __ \ \ / /__| |_\ \ / / \/ | \ \/\/ / -_) '_ \ V /| |\/| | \_/\_/\___|_.__/\_/ |_| |_|
SQLクエリを実行、クエリ結果を可視化できるウェブアプリ「SQLPad」を試してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 SQLクエリをローカル環境でウェブアプリとして実行できるものが無いか少し探していたのですが、「SQLPad」というアプリケーションを見つけたので実際に試してみたいと思います。 SQLPadとは SQLクエリを実行、クエリ結果を可視化できるセルフホスティング型のウェブアプリケーションです。2022年1月現在では以下の15個のデータベースに対応しており、ODBCにも対応しているのでODBC接続を利用すれば、これ以外のデータベースにも接続可能なようです。 Postgres MySQL SQL Server ClickHouse Crate Vertica Trino Presto Pinot Drill SAP HANA Snowflake BigQuery SQLite TiDB 公式サイトでの解説は以下の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SadServers - Linux & DevOps Troubleshooting Interviews
14 Best Practices to Secure SSH Bastion Host
