スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
HTML5 Cross Browser Polyfills
The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users
第1回 外部サイトに貼り付けるJavaScriptの作法―ポリシー、速度、セキュリティ、プライバシー（1） | gihyo.jp
フロントエンドWeb戦略室 第1回外部サイトに貼り付けるJavaScriptの作法―ポリシー、速度、セキュリティ、プライバシー（1） フロントエンドを考えるということ みなさんこんにちは。NHN Japanでエンジニアをやってますmalaです。livedoor Readerを作ったりJavaScriptを使ったUI（User Interface）、非同期処理、Webアプリケーションセキュリティ周りの仕事をしています。 この連載ではフロントエンド[1]を語るうえでは外せないJavaScriptを中心に、その周辺のUI・Webアプリケーションセキュリティを扱います。そして、ただ理想のフロントエンドを考えるだけでなく、具体的な実装を提案していくこと。これが本連載最大の目的です。 第1回となる今回は、広告やブログパーツ、ウィジェットなど、外部ドメインに貼り付けられるJavaScriptを書くう
RequireJS
/* --- RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code. IE 6+ .......... compatible ✔ Firefox 2+ ..... compatible ✔ Safari 3.2+ .... compatible ✔ Chrome 3+ ...... compatible ✔ Opera 10+ ...... co
JavaScript Regex :: XRegExp
More regex stuff by me: • Awesome Regex List of the best regex resources • Regex+ JS regexes + future “Regular Expressions Cookbook manages to be simultaneously accessible and almost ridiculously comprehensive.” —Jeff Atwood Check out Regex+, the lightweight spiritual successor to XRegExp that once again takes JavaScript regexes to the next level. What is it? XRegExp provides augmented (and extens
グローバルコンテキストでビルトインオブジェクト/関数と同名のものを定義した場合の動作 - Enjoy*Study
下記のようなページを実行すると、Firefox11とIE8だとエラーになって、Chrome18だとエラーとならずにalertが実行されました。 <html> <body> <script type="text/javascript"> var alert = alert; alert(1); </script> </body> </html> Firefox、IEの動作だと、var宣言された時点で、右辺のその変数が未定義扱いとなっているようです。 もともとは、下記のようなコードがFirefoxで動作しなくて気がつきました。 (これはグローバルコンテキストで実行された場合で、関数内なら意図した動作(window.URLが代入)になります) var URL = window.URL || window.webkitURL;
すでにある機能の廃止は難しい - fragmentary
OperaがWebKitの接頭辞を…というのは、まあとりあえずは中の人からの報告を待っておくとして。 さて、WebKitプロジェクトは接頭辞についてどう考えているんだろうか。先週やっていたWebKit Contributor Meetingで接頭辞などについて取り上げたセッションがあったらしい。 Deprecating features and vendor prefixes 機能の廃止、接頭辞の削除と、ふたつトピックがあったので、ふたつに分けて書く。 機能は廃止できるのか この前WebKitは接頭辞をエイリアスとして残す方針があると書いた。もう少し広げてかくと、既存のコンテンツが依存している機能は、接頭辞の有無にかかわらず、削除せず残しておく感じだ。カジュアルに使われやすいCSSの機能は、たぶん削除されることは今後もほぼないと考えている。 けれど、APIについては実装を削除している場合も
[UserScript] ロケーション・ハックとは？: スーパーハッカーになりたい
ロケーション・ハック (location hack) とは汎用ユーザー・スクリプトを開発する上で（残念ながら）ほぼ必須となる方法のことである。紹介元の記事は英語だが、対応する日本語はなさそうなので、そのままカタカナにした。 ユーザー・スクリプトの通常の役割は DOM ツリーをいじることだが、場合によってはページ側で動いている JavaScript の動きを変更したい場合がある。変数の値を書き換えたり、ページ側で定義されている関数を呼んだりする場合だ。 残念ながら、これらは簡単にはできない。セキュリティ対策のため、サンドボックス (sandbox) と呼ばれる専用の環境でユーザー・スクリプトが実行され、コンテンツ・スコープ (content scope) で実行されているページ側のデータにアクセスできないようになっているからだ。 このあたりの実装はブラウザによって異なるので、主要ブラウザでテ
クライアントサイドの巨大なクッキーとサーバーサイドのヘッダーサイズ制限の組み合わせによるDoSについて - デー
もう10年以上前のネタなのですが、いまだに有効だし、最近、セッションを扱っていないならXSSがあってもあまり問題ないという意見を見ることがあるので、サービス提供側として案外面倒なことになる場合がある、という話を書きました。 POCです。 http://www.udp.jp/misc/largecookiedos.html 内容としては、 JavaScriptから巨大なCookieをブラウザに設定できる HTTPサーバーは受け取れるHTTPヘッダーサイズの上限を持っていて、それを超えていた場合にBad Requestを返す 1によって2を超えるサイズのCookieが設定可能な場合がある（たぶんほとんどの場合可能） よってXSSなどによって巨大なCookieを設定されると以降サービスが利用できなくなる というものです。 Cookieの有効期限を何十年も設定されるとユーザー側で勝手に回復すること
Zombie.js : Insanely fast, headless full-stack testing using Node.js
Insanely fast, full-stack, headless browser testing using node.js View the Project on GitHub Download ZIP File Download TAR Ball View On GitHub Zombie.js Insanely fast, headless full-stack testing using Node.js Zombie 6.x is tested to work with Node 8 or later. If you need to use Node 6, consider using Zombie 5.x. The Bite If you’re going to write an insanely fast, headless browser, how can you no
クライアントのテストはzombie.jsでいいんじゃないか - mizchi log
zombie.jsとは jsdomというnode製のDOMシミュレータがあります。これを使えば、ブラウザを使わずにDOMイベントを発行することができます。 zombie.jsはセッション管理とブラウザのアクションを管理するjsdomのラッパーです。 個人的には、Ajaxのテストは無理せずJavaScriptでやれとおもってるので、その点zombieは素直に動いてくれます。 利点 AjaxでDOMを書き換えたりするイベントもテストできる (qt-webkitと比較して) 無茶苦茶早い コンパイルが楽(というかQTは定期的に互換崩れてバイナリ壊れてる… 論よりコード サンプルをアップロードしてあります mizchi/zombie-tester-example https://github.com/mizchi/zombie-tester-example インストール等はReadme見てもらうと
【翻訳】document.writeでSCRIPTを書き出すなやで！ - MOL
Original：Don’t docwrite scripts（2012-04-10）by Steve Souders 昨日のブログ記事のHTTP Archiveが速くなっている、大きな要因の一つとしてはスクリプトローダーを使用しないことです。そのスクリプトローダーとはスクリプトを動的に読み込むためにdocument.writeを使用しているものです。振り返れば、私は2009年4月のブロッキングなしのスクリプト読み込み、続・ハイパフォーマンスWebサイト(4章)において、document.writeテクニックについて記述していました。それは以下のようなものです。 document.write('<script src="' + src + '" type="text/javascript"><\/script>’); document.writeを使ったスクリプトローダーの問題点： 挿入し
Selenium でブラウザを自動操縦して Web アプリをテストする - present
はじめに Jasmine の RubyGems を使ってコマンドラインから JavaScript のテストを実行できたけど、Ruby からブラウザを自動操縦するのには Selenium WebDriver を使っているみたい。この Selenium WebDriver 、Ruby だけじゃなくて、C# や Java や Python から利用するためのライブラリもあります。ということは、慣れ親しんだ C# で Web アプリの UI のテストが書けますね。 Selenium WebDriver を試してみる Selenium WebDriver のライブラリは下記のページで入手できます。 Downloads C# 用のライブラリを使って、「IE を起動してこのブログを表示し .NET で記事を検索する」テストを書いてみました。 using System; using System.Coll
IE 6, IE7, IE 8 でキャッシュしておいた文字列を、動的に生成した script 要素に設定し、文字列を JavaScript として評価する方法 - latest log
IE 8 で文字列から動的に script 要素を生成したい時もあると思います。 オフラインにキャッシュしておいた文字列を JavaScript として評価したい場合などです。 こうすると動作します IE6 ～ IE8 専用です。 var script = document.createElement("script"); document.getElementsByTagName("head")[0]).appendChild(script); script.outerHTML = ' <script defer="defer">' + jsExpression + '</script>'; document.createElement("script") でダミーの(プレースホルダの) script 要素を作り、そのあとで outerHTML で上書きしています。 これでも良
JavaScriptのindexOf - 車輪を再発明 / koba04の日記
JavaScriptのIndexOfといえば、こんな感じで文字列に対して指定するものだと思っていたのですが、 // 文字列 var str = "hello javascript"; console.log( str.indexOf("javascript") ); // => 6 他にもECMA-262のJavaScript拡張ではあるけど、配列に対しても使えたんですね。(追記:IE6-8は使えない) var akimoto = ["AKB48", "SKE48", "NMB48"]; console.log( akimoto.indexOf( "SKE48" ) ); // 1 このイコール判定は===な厳密な比較で行われているので型を意識する必要があります。 var list = [1, "2", 3, "4", 5]; console.log( list.indexOf(5) );
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.snappymaria.com/misc/TouchEventTest_v2.html
Google Issue Tracker
https://slip.lisperator.net/
Android 4の新機能でカメラWebアプリ作ってみた (1/5)
http://blog.monoweb.info/article/2012031523.html