一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
Tumblrの省メモリーな無限スクロール - 記録
無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。 ところが最近のTumblrのダッシュボードでは、ポストが画面外に出るとその中の要素が一時的にページから削除され、画面内に表示されると要素が再度復元されるようになっている。どうやらこれによって無限スクロールによるメモリーの圧迫が抑えられているらしい。 関連するコードはhttps://secure.assets.tumblr.com/assets/scripts/dashboard.jsの/*! s
Fernandes
Pengantar Salam kepada para pembaca yang budiman! Selamat datang di artikel kami yang kali ini akan membahas tentang Festival Cerita Rakyat. Apakah kalian pernah mendengar tentang festival ini? Jika belum, jangan khawatir! Kalian akan mendapatkan informasi yang menarik dan lengkap di sini. Festival Cerita Rakyat merupakan salah satu acara yang … Read More » Kata Pengantar Halo para pembaca! Pada k
Firefox新機能の3Dビューがなんだかすごい | バシャログ。
花粉に勝った！と思っていたら、そんなことは全然なかったminamiです。 今回は非常に軽い話題です。先日 Firefoxの最新バージョン Firefox 11 がリリースされました。どこが変わったのかな？と思っていたらとんでもない新機能が追加されていました。 流行りの3D 既に以前のバージョンから、Firebugなどのアドオンを使わずにhtmlの要素を調査できる機能が追加されていました。 これはこれでいいけれどやっぱりFirebugを使っちゃうな～と思ってスルーしていたのですが・・・ 右クリックで「要素を調査」 3D！？ 飛び出す！ なんと、バージョン11から3Dビューのモードが追加されていました！無駄にすごい！ 3Dなので当然拡大、縮小、回転もできます。裏からサイトを見ることもできます。 階層が深くなるほど高く表現されるようで、確かに要素の重なり順がわかりにくいサイトを調査するときには一
jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC engineers' blog
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
JavaScriptのテンプレートエンジン「T.js」を公開しました
結構前に公開していたんですが、きちんとした紹介を書いてなかったので改めて。Githubにて、T.jsという名前のJavaScript用テンプレートエンジンを公開しています。 T.js - DOMBuilder-like template engine for JavaScript T.jsとは JavaScriptでHTMLを書くためのライブラリ（一種のテンプレートエンジン）です。 T.table("#addressbook")({style:{borderCollapse:"collapse"},border:"5"}, T.thead( T.tr( T.th("name"), T.th("address"))), T.tbody( T.tr(".odd")( T.td("alice"), T.td("a street")), T.tr( T.td("bob"), T.td("b str
live な NodeList の作り方 - IT戦記
live な NodeList 概要 NodeList の IDL interface NodeList { Node item(in unsigned long index); readonly attribute unsigned long length; }; Interface NodeList - Document Object Model Core 「live な」NodeList とは DOM の変更が動的に反映される NodeList のこと 現状の leve な NodeList のユースケース getElementsByTagName getElementsByTagNameNS getElementsByName getElementsByClassName childNodes children, all, tags (IE legacy) 重要な事 現状の liv
セレクター API
この文書「セレクター API」は、W3C の WebApps ワーキンググループ による「Selectors API (W3C Working Draft 14 November 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-11-21 公開日: 2008-11-15 翻訳者: 矢
IE 6.0 - Javascript - Benchmark - W3C DOM vs. innerHTML
Section 8F of the book discusses innerHTML and when it's preferable to "real" W3C DOM methods. This is a test page intended to find out which method of generating large amounts of content is fastest in the browsers. Of course the results differ significantly from browser to browser. Each of the test scripts creates a 50x50 table, all of whose cells are filled with one character, *. Then the time y
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
HTMLの要素をSQLのように取り出せるPHPのライブラリ『htmlSQL』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
ノードの集合を「ドキュメント順」に高速に並べ替える。その１ - IT戦記
ドキュメント順とは何か？ ドキュメント順とは、簡単に言えば「XML のソース上の前にある順」のこと。 詳しくはこのへんを見てね。 XPath ではこの「ドキュメント順」という概念がよく登場する。 たとえば、ノードを文字列化するときは子孫テキストノードを「ドキュメント順」に文字列として連結しなければならない。とかとか でも、このドキュメント順へのソート 考えただけでもめちゃめちゃ重そうだ・・・。 いろいろ考えてみた。 XPath 実行中はドキュメント順が変わることがないので、DOM アクセスはキャッシュできる。 ノードの集合は木構造で保存したほうが比較回数が少なくてすむ（アルゴリズム初心者なので、実際に早いか検証しないと＞＜） で、今回は DOM アクセスをキャッシュしながらノードを比較する関数を作る 汎用的に作ったので XPath 目的以外でも使えます。 var order = funct
IT戦記 - XPath は実用に耐えうるかの考察と xpath.js
背景＞＜ Safari 3 系から DOM Level 3 XPath が実装されました！！！キタコレ！！！ Firefox 2 系は DOM Level 3 XPath が実装されている。 Opera 9 系は DOM Level 3 XPath が実装されている。 XPath 1.0 in JavaScript • Cameron McCormack's blog (以下、 xpath.js)なるものがあり Internet Explorer 6 および 7 のような DOM Level 3 XPath を実装していないブラウザでもそれ相当の機能を実装することができる ということで、以下のことを試してみたい！！ Safari, Firefox, Opera の XPath のパフォーマンスはどうか？ xpath.js のパフォーマンスはどうか？ xpath.js は XPath 1.0
Document Object Model (DOM) - Web APIs | MDN
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language. The DOM represents a document with a logical tree. Each branch of the tree end
Keyboard events and key identifiers
Appendix A: Keyboard events and key identifiers Editors: Björn Höhrmann Philippe Le Hégaret, W3C (until November 2003) (This part of the specification is likely to be moved to a separate specification on keyboard events.) This section contains necessary information regarding keyboard events: Relations between keys, such as dead keys or modifiers keys. Relations between keyboard events, their defau
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
DOM Level 2 Object Index