タグ

ブックマーク / blog.jxck.io (6)

  • XMLHttpRequest とはなんだったのか | blog.jxck.io

    Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命

    XMLHttpRequest とはなんだったのか | blog.jxck.io
  • mouseover 中に表示される DOM のデバッグ | blog.jxck.io

    Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ

    mouseover 中に表示される DOM のデバッグ | blog.jxck.io
    fuyu77
    fuyu77 2021/08/21
  • ローカル開発環境の https 化 | blog.jxck.io

    Intro Web の https 化が進み、それに伴って https を前提とする API も増えてきた。 そうした API を用いた開発をローカルで行う場合、 localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。 localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。 この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。 特に推奨するつもりはない。 Update chrome の --host-rules について追記 localhost での開発の注意点 例として https://example.com にデプロイする予定の ServiceWorker を用いたアプリがあったとする。 開発をローカルで行う

    ローカル開発環境の https 化 | blog.jxck.io
    fuyu77
    fuyu77 2020/07/13
  • Preload を用いたリソースプリローディングの最適化 | blog.jxck.io

    Intro Preload を指定する <link rel=preload> の仕様が公開されており、現在 Chrome Canary に実装されている。 この仕様のモチベーションについて、 Chrome 開発者の Yoav Weiss 氏のブログも公開された。 今回は、この仕様の特徴と用途を解説し、サイトへの適用について検討する。 W3C Preload Spec Intent to Ship: <link rel=preload> Preload: What Is It Good For? Preload Preload はリソースのローディングを最適化することを目的に策定された仕様である。 link 属性ファミリーで、最適化に用いられる値としては、以前書いた Resource Hints 系 と近いが、仕様としては別になっている。 また、既に HTTP2 においてこの仕様の一部が使

    Preload を用いたリソースプリローディングの最適化 | blog.jxck.io
    fuyu77
    fuyu77 2019/03/03
  • JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io

    Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID

    JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
  • Bookmarklet という一番身近な自動化技術 | blog.jxck.io

    Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と

    Bookmarklet という一番身近な自動化技術 | blog.jxck.io
  • 1