DOM2Texture: Abusing Arcane APIs — surma.dev
When using OpenGL (or WebGL), you have to do everything yourself, including font rendering and layouting. I thought: “Wouldn’t it be great if you could just reuse the browser’s layouting and font-rendering engine instead of heaving to reinvent the wheel?”. Yes, but there’s no API for that. Or is there? TL;DR: You can use <foreignObject> to embed normal HTML content in an SVG, encode that SVG as a
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() を呼ぶことで、スクロールそのものを止めることもできる。
CSS containment in Chrome 52 | Blog | Chrome for Developers
contain: none | strict | content | [ size || layout || style || paint ] It’s in Chrome 52+ and Opera 40+ (and it has public support from Firefox), so give it a whirl and let us know how you go! The contain property When making a web app, or even a complex site, a key performance challenge is limiting the effects of styles, layout and paint. Oftentimes the entirety of the DOM is considered “in scop
AngularでDOMにアクセスする
テンプレート内のローカル変数を利用する HTMLテンプレート内では #hoge="xxxx"の書式で、ローカル変数が使えます。 [html] ログイン [/html] この例では、form要素を送信時のlogin(f)でform要素を渡しています。 ちなみにngFormは、FormsModuleを利用するためのグルーピングに指定しています。 また、属性値なしでも利用できます。 [html] [/html] Template reference variables – angular.io ElementRef ElementRef というクラスを介してDOMにアクセスできます。 ElementRef.nativeElement プロパティでネイティブのDOMを参照します。 [js] import { Component, ElementRef } from ‘angular2/core’;
速報：仮想 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
ES6時代におけるWeb開発者とセキュリティ業界の乖離
3. いまどきのWeb開発 • 静的なHTML+API • アプリとWebの共通化、ＳＰＡ • コンパイルされたＪＳ • AltJS、Closure Compiler • MV*、データバインディング • Vue.js、AngularJS • Virtual DOM • React 4. 静的なHTML+API • サーバサイドではHTMLを生成しない • スマホ用アプリとWebでバックエンドを共通化 • Single Page Applicationsの台頭 • JSON等のAPIのみのレスポンス • 脆弱性検査する側 • 「ページ単位」でのボリューム管理の破たん • 反射型、蓄積型XSSの根絶 • もちろんSQLインジェクションなども存在しない 5. コンパイルされたJS • AltJS、Closure Compiler等の利用 • TypeScript、CoffeeScript、JS
DOM: element IDs are global variables
Several tweets mentioned that in order to display an element in Chrome’s JavaScript console, you only have to type its ID. @johnjbarton pointed out that that is because all element IDs are global variables. This blog post explains a few more details. The standard The HTML5 standard specifies that the window object must have a property key whose value is elem if... there is exactly one DOM element
DMM inside
なぜDMMがweb3に参入したのか。Seamoon Protocolが目指す新たなエンタメ体験の未来とは
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
ES6 Promiseの何が美しいのか - saneyuki_s log
この記事は某JavaScript Advent Calendar 2013の2日目ではありませんし、ECMAScript Advent Calendar 2013のn日目でもありません（そんなものは本稿執筆時点で存在していない事を確認しています）。単に締め切りのある原稿を書いていて、疲れてしまって好き勝手に文章を書きたかったので、好き勝手に書いているだけです。 接頭辞にES6とつけるべきかDOMとつけるべきか迷うのですが、unwrappingされてるPromiseの話です. WHATWG DOM Standardからもそれが直接参照されてますし、ES6 Promiseあたりと呼んでおくのが妥当でしょうか。 何がいいのか ECMAScriptとDOMの大合同コンセンサスが出るなどすっかりECMAScriptのためのDOM感が増しつつ有る今日この頃ですが、この幸せな点は何と言っても標準化された
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - wnr/element-resize-detector: Optimized cross-browser resize listener for elements.
resize-observer/explainer.md at master · WICG/resize-observer
What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?
http://oridomi.com/
search?q=chrome%20developer%20tools
