Events and disabled form fields
I've been working on the web since I was a small child all the way through to the haggard old man I am to day. However, the web still continues to surprise me. Turns out, mouse events don't fire when the pointer is over disabled form elements, except in Firefox. Serious? Serious. Give it a go. Move the mouse from the blue area below into the disabled button: It's not like the disabled button eleme
Passive Event Listeners によるスクロールの改善 | blog.jxck.io
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、 Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。
速報：仮想 DOM は殺された。誰に？ magnum.js に - Qiita
mag.module('lister', { controller: function(props) { this.item = [1, 2, 3] this.title = 'Lister' }, view: function(state, props, element) { state.h2 = { _text: state.title, _onclick: function() { state.show = state.show ? !state.show : true state.item.reverse() state.title = 'Gister' + state.show } } } }) mag.module の第一引数、lister は <div id="lister"> と対応しており、ここで両者が結ばれます。controller 関数は一度だけ呼ばれて、view 関
ractivejs.org| The diamond age of web development
Live, reactive templating ractivejs.orgis a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default. Powerful and extensible Two-way binding, animations, SVG support and more are provided out-of-the-box – but you can add whatever functionality you need by downloading and creating plugins. Opt
How Javascript Loading Works – DOMContentLoaded and OnLoad « a.blog.about.code
There are actually three different windows of time during a web request in which we can load and execute javascript. These windows are delineated by the DOMContentLoaded event and the OnLoad event. We can load our scripts before DOMContentLoaded, after DOMContentLoad, and after OnLoad. But before I dig into the details of how this is done, what the heck are these two events and when are they actua
AngularJSのチューニング - ワザノバ | wazanova.jp
http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ モニタリング/ログ分析ツールのScalyrがそのブログで、AngularJSをチューニングしてページの更新時間を短縮した事例を紹介してます。成果は近日中にオープンソースとして提供される予定です。 1) 背景 Scalyr Logsアプリにおいて、DBクエリは数十 msで処理できるが、ページの読み込み時間で数秒かかってしまう状況であった。シングルページアプリを実現するためのフレームワークとしてAngularJSを採用。”fail fast” (失敗するなら早めに)の方針のもと、難易度の高いログビューからつくることにした。 Scalyr Logsのページに表示されたログデータのどの単語をクリックしても、その検索結果を表示。(サンプル画面 / デモ画面）次ページのログデータも事
Brick
What is Brick? Brick is a bundle of reusable UI components created to enable rapid development of HTML5 apps. Brick adds new HTML tags- allowing developers to express the structure of an application in a clearer, more concise manner. What are Web Components? Web Components is a series of emerging W3C standards that allow developers to define custom HTML elements, and interact with them using the n
jQuery : 要素の操作は必ずAPIを使うべし : typeOf 'aki_mana'
身近なところで話題になったので。 過去にも、「empty() とか remove() するより、DOMオブジェクトにアクセスして innerHTML = ”” した方が速いよ！」というブログエントリを投下する方が多かったのですが、「必ずAPIを使う」こと。 理由は、「メモリリークの温床だから」 GitHub で manipulation.js のソース読めば判るとおり、結構頻繁に jQuery.cleanData() が実行されてます。― jQuery.cleanData() メソッドは、data() API として独自に実装された「各要素と紐づけられるキー・バリューストア（メモリストア）」に対する処理なので、innerHTML を使う場合でも、jQuery.cleanData() を使うなら、まぁ問題無いです。 要するに、jQuery （Zeptoみたいな類似ライブラリもそう）は、常にH
So you need a template engine..
Template-Engine-Chooser! This tool is not being updated — more info Is this for use on the client or the server? client server both How much logic should it have? the entirety of JS just the basics none at all Does it need to be one of the very fastest? yes no Do you need to pre-compile templates? yes no Do you need compile-time partials? yes no Do you want a DOM structure, or just a string? DOM s
Avoiding unnecessary paints | Articles | web.dev
Introduction Painting the elements for a site or application can get really expensive, and it can have a negative knock-on effect on our runtime performance. In this article we take a quick look at what can trigger painting in the browser, and how you can prevent unnecessary paints from taking place. Painting: A super-quick tour One of the major tasks a browser has to perform is converting your DO
Domenlightenment – Coding And Software
Main Uses Of Software Software is used to control, manage, and perform tasks on a computer or other digital devices. It tells the hardware what to do and how to do it. Main Uses of Software: Automation Software can automate tasks like calculations, data entry, or controlling machines. Productivity Tools like Word, Excel, or Docs help people work more[…..] Get Started Basic Studies How To Code Codi
innerHTMLとjQuery.text()の間のDOMNodeInsertedとDOMSubtreeModifiedの挙動の違い - koroharoの日記
Chrome拡張作ってて、ある要素のテキストの変更を監視しようとしたときに気づいたのでメモ。 書いてあること以上のことは調べていない。*1 要素内のテキストをjQuery.text()で変更している場合と、innerHTMLで変更している場合とで発生するDOMNodeInsertedとDOMSubtreeModifiedに差異があってなんだかなーなんだかなーという話。 とあるh1要素の変更を監視するため、以下のように DOMNodeInsertedとDOMSubtreeModified を設定。 document.querySelector('div.foo h1').addEventListener('DOMNodeInserted', function(e){ console.log('***DOMNodeInserted:' + e.srcElement.constructor.na
JavaScript template language shootoff · jsPerf
JavaScript performance comparison Revision 365 of this test case created by Jarno Keskikangas on 2012-2-24 Preparation code <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://leonidas.github.com/transparency/js/transparency.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore.js"></script> <script src="http://gith
anything from here jQuery()の挙動を解読する(21) $(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)
$(document).ready(fn) - bindReady() - $.ready() $(document).ready(fn) が bindReady() を、そしてそこから $.ready() が呼び出される三層構造で、これらのメソッドが機能します。 それぞれの役割は、順に以下のようになります。 $(document).ready(fn)……(1/2) DOM読み込み完了通知イベントの登録（ bindReady()メソッドの実行 ） $(document).ready(fn)……(2/2) DOM 読み込み完了時の fn の実行と DOM 読み込み完了時に実行させる関数の登録、 bindReady()……(2) DOM 読み込み完了のチェックと完了時の jQuery.ready()呼び出し jQuery.ready()……(3) DOM 読み込み完了を記録するプロパティの設定
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://oridomi.com/
search?q=chrome%20developer%20tools