Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
useEffect完全ガイド
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
Reactのchildren探訪 - Qiita
ReactのJSXでも子要素を定義できますが、これが結構面白いものでした。 自作エレメントにも子要素 ReactのJSXでは、（DOMを組み立てるものである以上当然ですが）<div>の中に<a>を書いて、そしてさらに文字列を書き込む、ということが可能です。 そして、これはHTML由来のエレメントだけでなく、自作のコンポーネントでも実現可能です。 このように、子要素はchildrenというPropとして渡ってきます。 childrenの中身が知りたくて では、このchildrenには何がどのような形式で来るのでしょうか。JSXの変換先であるReact.createElementのソースコードに当たってみました。挙動はchildrenの数によって違います。 0個…childrenにはpropとして渡したchildrenが（もしあれば）渡される 1個…childrenには唯一のchildren引
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
JWT・Cookieそれぞれの認証方式のメリデメ比較 - Qiita
JWTとは JSON Web Tokenの略。ジョットと読むらしい。 ざっくりいうとJsonに電子署名を加え、URL-Safeな文字列にしたTokenのこと 正確にいうと、電子署名を使用する方式はJWS（JSON Web Signature）と呼ばれ、別途暗号化を使用するJWE（JSON Web Encryption）も存在する。よく見かける説明はJWS方式のほう。 JWS方式の場合、電子署名であり暗号化ではないため、中身を見ることは可能。但し改ざんはできない、という仕組み。 実際のユースケースで言うと、サーバ側で認証情報が入ったJsonを加工（電子署名を加える等）し、JWTにしたのち、それを認証Tokenとしてクライアントに渡す。クライアントはそのTokenを認証Tokenとして使用する。 仕組みについては調べればたくさん出てくるのでそちらを参照したほうが良いかと思います。 この記事では
JWTは使うべきではない 〜 SPAにおける本当にセキュアな認証方式 〜 - Qiita
React/Redux/Spring Boot/AWSでSPAを作っているのですが 認証の方式をどうするか悩みました。 ベストと思われる認証方式をこちらに記載することにしました（随時更新します）。 JWTは使うべきじゃない ログイン済みであるという事実を サーバーサイドのセッションを使わずに保存しておく場合、 ログインした後でJWTなどのトークンをサーバーで生成し、 それをクライアントサイドで何らかの形で保存しておく必要がある。 なぜなら、ReactおよびReduxのstateで管理してしまうと、 ページをリロードされたときにstateがクリアされてしまうから。 具体的な保存先はローカルストレージくらいしか無いのだが JWTをローカルストレージに格納するのは危険。 なぜなら、ローカルストレージはJavaScriptで簡単に読み込めてしまうから。 自ドメイン以外のJavaScriptを読み込
JWT 認証のメリットとセキュリティトレードオフの私感 - ..たれろぐ..
2020/5/9追記: 考えた結果、Authorization Bearer ヘッダを使った正規のJWTの場合、同一ドメイン下で読み込む全 JavaScript が信用できる場合でないとブラウザ上で安全にトークンを保持できないのでブラウザからのAPIアクセス時の認証用には使うべきではないというところに着陸しました。ブラウザからのアクセスでは http only cookie にトークンを入れ、 CSRF 対策も忘れずにというこれまで通りの定石が手堅いように思います。 JWTを使うのはトークンの安全な保管ができる非ブラウザなネイティブクライアントからのAPIアクセス時に限った方がよさそうです。 APIサーバ側ではアクセス元に合わせて認証方法を使い分ける両対応が要求されるので手間は増えますが手抜きできる場所でもないので仕方なしと。 React(SPA)での認証についてまとめ - エンジニアの本
Headless mode - Mozilla | MDN
Since Firefox 57, the --screenshot flag allows you to take screenshots of websites. The basic usage is as follows: /path/to/firefox -P my-profile -headless --screenshot https://developer.mozilla.org/ This creates a full-height screenshot of https://developer.mozilla.com/en-US/ called screenshot.png, in the active directory, with a viewport width of 800px. You can omit -headless when using --screen
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css"> </head> <body> <div class="mermaid"> graph TD; A-->B; </div> <script src="https://unpkg.com/mermaid/dist/mermaid.min.js" charset="UTF-8"></script> <script> mermaid.initialize({ startOnLoad:true }); </script> </body> </html> 環境に依るかもしれないが、scriptのcharset指定しないとなんかmermaid.min.jsがエラー吐いて死
知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
SNS mixi の障害察知手法の進化
WebQA Meeting Vol.2 https://peraichi.com/landing_pages/view/webqa-2
CORSまとめ - Qiita
今更ですが、**CORS (Cross-Origin Resource Sharing)**を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 一部破壊的な変更があり 既に非推奨と公表していたAPIを削除 ドキュメントにない隠しAPIの削除 特定の入力値に対する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
How to Render a Component Dynamically Based on a JSON Config
How to render dynamic component defined in JSON using React | Storyblok
React.useEffectで非同期処理をする場合の注意点2つ（変更あり） - Qiita
GitHub - puppeteer/puppeteer: JavaScript API for Chrome and Firefox
