そろそろ押さえておきたい AngularJSのセキュリティｃonstexpr関数はコンパイル時処理。これはいい。実行時が霞んで見える。cpuの嬌声が聞こえてきそうだ
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スコープ それぞれ見ていきましょう。 基本的
Ember.jsの無限スクロールの改善 - ワザノバ | wazanova
http://eviltrout.com/2014/01/04/hiding-offscreen-ember.html1 comment | 0 pointsDiscourseのRobin Wardが、Ember.jsで無限スクロールのパフォーマンスを改善させた取組みについて紹介しています。 Long Lived Applications Discourseは無限スクロールを多用している。投稿数の多いトピックを閲覧している際に、ブラウザのviewportの終わりに近づくと、サーバから非同期に新しい投稿が読込まれる。短いトピックについては、DOMにコンテンツを追加することはパフォーマンスの問題にはならない。最近のブラウザは、モバイルであっても、数百の投稿はレンダリングできる。しかし、数千件の投稿があるトピックを閲覧する時は、ブラウザの動きが不安定になり、クラッシュすることもあった。 Cloa
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプ
PolymerでのCSSについて - Qiita
最近はPolymerにどっぷりです。Polymerをこのタイミングでプロダクション環境に使おうとしているのは、正直かなり厳しいとは思いますが、人柱のつもりでまぁ・・・。いや、プロダクション環境で人柱すんなって話ですね。 それはそれとして、Polymer、というかWeb Componentsが現状全うに動作する環境、というのは、事実上Chrome(PC/Android)しかありません。iOS上ではまだ確認してませんが、運がよければネイティブ実装があるのかなー、という程度です。 実際には、Platform.jsを確認してもらえればわかりますが、他のブラウザでネイティブ実装が進んでいるものはかなり少ない、ほとんどないといっても過言ではありません。 Web Componentsを利用するモチベーションとして、デザインの完全なカプセル化が可能、というのがあげられると思います。 （JavaScript
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
Navigation Timingだからできる、Webアプリを俯瞰したパフォーマンス計測(2/3)
Navigation Timingだからできる、Webアプリを俯瞰したパフォーマンス計測(2/3) 川田寛（ピクシブ株式会社） 前回の記事でもお伝えしたとおり、ブラウザのメカニズムが、TATの計測を複雑にしています。その事情について、まずTATの「開始」をどこにするかについて考え、紐解いてみましょう。Web標準で定義するところのブラウザの動作について、少しだけデフォルメさせた処理モデルを使って、全体の流れを解説します。以下の図の赤字はtimingオブジェクト配下にあるプロパティ、数字が振ってある矢印は処理の流れです。 0. ナビゲーション開始 Webページの読み込み動作を、「ナビゲーション」と呼びます。ブラウザは、ネットワーク上のHTMLドキュメントにアクセスすると、Webページを構成する様々な情報を削除(アンロード)します。そして、新しくHTMLドキュメントを読み込み、DOMを構成し、J
『Web Componentsで行うHTMLのコンポーネント化』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水（@1000ch）です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
Ractive.js入門 - lxyuma BLOG
これは、jsCafe18で話したSlideです。 概要 これから、「Ractive.js」という js上でReactiveなUIを とてもsimpleにbuildするためのlibraryの話をします 目次 reactive programming ractive.js 他のframeworkとの比較 Backboneに入れてみる そもそもReactive Programmingとは？ 古くは、2003年頃から日本のblogでも幾つか言及されてる模様 去年、更に色々と動きが出てきた。 2013/7 ガートナーの2013年のreportで扱われてる 2013/9 リアクティブマニフェストが出た。これ訳されてる方がいた。 2013/9 infoQの記事見ると大体の流れや概要が分かる バズりと意味の広がり なんか徐々にバズり感がある 他のバズりワード(cloud等)と同じように意味が広義に、より抽
後から書くフロントエンドのテスト - tohashi's blog
今業務でやってるプロジェクト、ジョインした時点では 普通のソーシャルゲーム 規模はそこそこ大きい MVCフレームワークなどは使ってない テスト0 運用中 フロントはこんな感じでした。 これはヤバいと思い開発の合間合間にテストを書いていったのですが、 その時にやったことの記録です。 使ったもの Mocha chai Sinon.js testem PhantomJS CasperJS DOMのテストもしたかったので実行環境はブラウザにしています。 Jasmineでも良かったのですがアサーションも自分で選びたかったので Mochaを使いました。 どのくらい書いたか 結論から言うと共通のメソッドやコンポーネントだけしか書いてません。 そもそもテストを書く事を全く考慮されていないコードで、 DOMと密結合しまくりだったり if (result) { resultDom += '<div class
MutationObserverを使った高速setImmediate/nextTick - 素人がプログラミングを勉強していたブログ
MessageChannel / setTimeout / requestAnimationFrame / postMessageを使ったものより異様に速い。 というのも、setTimeout等は、次のサイクル（すなわちnextTick）の開始時に実行する関数を登録し、DOMや画面の更新後に実行されるのだが、 MutationObserverのコールバックは、現在の(同期的な)JS実行が完了した時点でコードを走らせるためである。さらに、MutationObserverは同じ実行サイクルでのDOM上の変更を次回のサイクルにすべてまとめてrecordsとしてコールバックに渡すので、これもsetImmediateの実装には非常に都合が良い。 MutationObserverのような実行タイミングをmicrotaskといい、setTimeout / postMessage / MessageCha
Facebookみたいにtextareaの一部を強調する - Qiita
Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り
Live DOM Viewer
Markup to test (permalink, save, upload, download, hide): <!DOCTYPE html> ... DOM view (hide, refresh): Rendered view: (hide): innerHTML view: (show, refresh): <!DOCTYPE HTML><html></html> Log: (hide): Script not loaded. This script puts a function w(s) into the global scope of the test page, where s is a string or object to output to the log. Some files are available for testing purposes, notably
プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス | ゆっくりと…
本ブログでは、サイトの高速化に直結する「JavaScript 非同期読み込み」の話題を多数取り上げてきました。タイトルに釣られてこの記事を見てくれている方なら Google Analytics の非同期コードスニペット はご存知でしょうし、規模の大きいサイトやアプリ用に RequireJS などのフレームワークを使っている方もいるでしょう。 GA も RequireJS も、動的に生成したスクリプト要素を DOM に埋め込む「DOM 挿入法」が用いられています。さらに遡れば、Steve Souders が 2009年4月の記事 ノン・ブロッキングなスクリプト読み込み で、6つの手法に分類しています。 果たしてこれらの方法は、サイトの高速化にとってベストなのでしょうか？ 答えは2012年12月の海外記事にありました。そこで本エントリーでは、日本ではほとんど取り上げられていない Frame i
Spectacular - Introduction
Spectacular is a BDD framework for CoffeeScript and JavaScript whose attempt to bring the power of RSpec to JavaScript. Spectacular tries to favor the best practices used for writing better RSpec tests in its design. These are the kind of tests you can write with Spectacular: describe Array, -> given 'item', -> foo: 'bar' it -> should exist itsInstance 'length', -> should equal 0 describe '::index
Angular.jsとBackbone.jsのDOM依存を図解する - ジンジャー研究室
果敢にもMVCフレームワークの図解を試みたので、どうぞ！ MVCの動機 MVCという言葉が初めて登場してから30年以上たった今、最早なんだったのか分からないほどMVCの定義は混迷をきたしているわけだが、どれがMVCでMVVMでMVPであるという定義についてあれこれ考察するのは個人的には好きでなくて、「結局何がしたいのか」という動機がぶれていなければ何でも良いと思っている。 じゃあそれは一体何なのかということを自分なりに考えてみたところ、次の一言に落ち着いた。 「ModelはViewに依存したくない」 世間的には（？）ModelとViewを単に「分ける」と説明されることが多いが、私はそれだけでは納得していなくて、依存の方向こそが重要だと思っている。たとえ分かれているように見えてもModelがViewを参照していたら、情報の取得先や表現方法は固定化されてしまう。 ModelはViewの事情から
jQuery Learning Center
Learning Center Chat Twitter GitHub Copyright 2025 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trad
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js note(v0.10.3). not translate. This is draft of https://github.com/koba04/vuejs-book .
DOM Tree