Explore DOM EventsThere are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
Document: characterSet プロパティ - Web API | MDN
ドキュメントオブジェクトモデル (DOM)DocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColor 非推奨; all 非推奨; anchors 非推奨; applets 非推奨; bgColor 非推奨; bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨; embedsfeaturePolicy Experimental fgColor 非推奨; firstElementChildfontsformsfragmentDirectivefullscr
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
画像に関する新しい DOM API の紹介 - pixiv inside
こんにちは、福岡オフィスでエンジニアをしている petamoriken です。 ECMAScript と DOM API が好きで、気づいたらいつも仕様を眺めています。よろしくお願いします。 この記事では画像に関する新しい DOM API を紹介します。一般的に DOM API は二つのブラウザによる実装があれば安定していると言われていますが、プロダクトなどに採用する際には十分気をつけてください。また将来的に仕様が変更される可能性があることにも留意してください。 HTMLImageElement#decode() 明示的に画像のデコードをさせるメソッドです。Promise<void> を返します。 実は画像の load イベント完了後では画像の大きさを取得することは出来ますが、まだデコード処理はなされていません。今まで明示的にデコードさせたかったらこのようなコードを書いていたと思います。
ウェブブラウザの off-the-main-thread API の話
ウェブブラウザにおいてメインスレッドはとても重要なリソースです。なるべくメインスレッドを使える状態にしておくことが滑らかな UI/UX を実現する上で重要になります。しかし、実際には多くの処理が実装上の理由やブラウザ仕様の不足によりメインスレッドでしか動かせないため、メインスレッドは忙しくなりがちです。特にページロード時は JavaScript の実行やリソース読み込みなどでとても忙しくなります。 とあるページの perf プロファイル。メインスレッドでせわしなく処理が行われている様子が分かる。 これを解消するために、ブラウザの処理をメインスレッド以外 (off-the-main-thread) でも実行できるようにする試みが行われています。 1. Off-the-main-thread とは メインスレッド以外のスレッドに処理を委譲することを off-the-main-thread と呼
KeyboardEvent.keyCodeとは何か - WebStudio
Tweet (list) 導入 KeyboardEvent.keyCodeとは何なのかについて少し解説してみたいと思います。 Webアプリでキーボードからの入力を処理する場合に、KeyboardEvent.keyCodeと、 KeyboardEvent.charCodeの二つ(さらにKeyboardEvent.whichを使う人も希に見かけますが)を最初に見かけられた方が多いのではないかと思います。 あなたがこれらの属性を初めて知った時、そのドキュメントはどのように解説していたでしょうか。 KeyboardEvent.charCodeはシンプルで誤解するのも難しいぐらいです。 しかし、KeyboardEvent.keyCodeはそうではありません。 多くの人は、この属性を根本的に間違った情報と共に知ったと思います。 KeyboardEvent.keyCodeの歴史 KeyboardEven
An Overview of JavaScript Testing in 2020
(Updated on: 21.11.2021) This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing for the year 2022. It combines information from the best articles recently released (they are referenced at the bottom) and adds from my own experience. It’s a little long but whoever reads and understands this guide, can safely assume they know the
Navigation Timing APIの仕様 - Qiita
利用可能なブラウザ Google Chrome Ver18〜 Firefox 7〜 Android OS Ver4〜 概要 Webサイトの制作では、ページデータの読み込み時間が問題になることがあります。ページが表示されるまでに時間がかかると、ユーザーのストレスが増加し、場合によってはユーザーが離れてしまう場合もあります。すばやく表示されるWebサイトであれば、ユーザーも使いやすいはずです。また、Googleはページの表示速度を検索結果の順位算出に使っていると明らかにしています（Googleの発表）。 ページの読み込み速度はJavaScriptで計測できます。ところが、JavaScriptではHTMLファイルが読み込まれHTMLの解釈が始まった段階からしか計測できず、どの処理に時間がかかっているのか、詳細な処理時間を把握できません。 そこで登場したのが、「Navigation Timing
Fullscreen API と 闇 - Browser
Fullscreen API は動画再生やゲームなど全画面にし没入させたい時などに使います。 iOS Safari と Opera Mini, Android Browser 以外のモダンブラウザで動作するようです。 Can I use... Support tables for HTML5, CSS3, etc サンプル 下のボタンを押してみたください。 フルスクリーン対象は真ん中の DIV タグ部分となっています。 Fullscreen API 使い方 document."プレフィックス"FullscreenEnabled で Fullscreen API が使えるかどうかを調べて、 document."プレフィックス"RequestFullscreen() でフルスクリーン表示を開始します。 今回使っていませんが、"プレフィックス"ExitFullscreen() でフルスクリーン表
ActiveXコントロールは死んだ L'eclat des jours(2015-04-04)
_ ActiveXコントロールは死んだ 消費者市場ではフラッシュなどを除けばとっくの昔に死んでいるが、業務用としても死んでいる。 最近、やっとそれが動きが遅いところでも理解されはじめたようだ。と、とあるシステムのアーキテクチャを見て感慨深かった。 死んだ理由はいろいろあるが、一番重要なのは、結局のところマシンとそれを取り巻くパワーの向上によって、JavaScriptがまともな速度で動くようになったこと、ネットワークが速くそこそこ信頼性が向上したことだ。 それにともなって、各種の規格に対する知識が雰囲気として知れ渡って来た（正確に理解している層は最初から正確に理解しているわけだが、そうではなく、なんだかわけがわからないと考えている上に調べる気も知る気も無い層が、なんだかありふれていて普通に手が届くものだという曖昧模糊たるコンセンサスが生じたということ）ことが挙げられる。それが証拠に初心者です
Web ComponentsのWebブラウザ別動作を調べてみた
Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか？Polyfillとして適用するのは、もちろん platform.jsです。これを使って、複数のWebブラウザで動作検証をちょっとしてみようと思います。試してみたのは、以下の3つです。 基本的なWeb Componentsの動作確認 HTMLElement#createShadowRoot()の動作確認 Shadow DOMのCSSスコープ それぞれ見ていきましょう。 基本的
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - fabiospampinato/cash: An absurdly small jQuery alternative for modern browsers.
Document.getElementById()マニアックス