2008年のエントリ http://d.hatena.ne.jp/uupaa/20080413/1208067631 のリニューアル版です。 (ε・◇・)з o O ( 2018年頃にでも、もう一度調べて書きたいと思います。
お手軽に画像の読み込みをハンドリングする、今どきな方法 - latest log
2008年のエントリ http://d.hatena.ne.jp/uupaa/20080413/1208067631 のリニューアル版です。 (ε・◇・)з o O ( 2018年頃にでも、もう一度調べて書きたいと思います。
クライアントサイドJavaScriptのライセンス管理 | GREE Engineering
最近シリコンウエハーもらって嬉しかったago（@kyo_ago）です。 このエントリはGREE Advent Calendar 2013 11日目の記事です。 今回はクライアントサイドJavaScriptにおけるライセンス管理の問題を取り上げたいと思います。 ライセンス管理の問題点 「使用しているライブラリのライセンス管理をどうするか」はクライアントサイドJavaScriptにかぎらず発生する問題ですが、クライアントサイドJavaScriptには以下の様な特徴があるため問題が複雑になります。 コードが結合、圧縮される場合がある クライアントサイドJavaScriptでは読み込みの速度を上げるため、使用しているライブラリの結合、圧縮を行うことがあります。しかし、この時誤ってライセンス文が捨てられてしまうことがあります。 ソースが外部に公開される クライアントサイドJavaScriptではソー
弊社のホームページにContent Security Policy(CSP)を導入しました
弊社のホームページにCSP(Content Security Policy)を導入しました。CSPについては、はせがわようすけ氏のスライド「5分でわかるCSP」がわかりやすいと思います。以下にスライドの一部を引用します。 具体的には、以下のように指定して使います。 Content-Security-Policy: default-src 'self' この結果、以下のようにJavaScriptの記述が制限されます。 外部のJavaScriptの読み込みは禁止 HTMLソースに記述した<script>...</script>のJavaScriptは禁止 イベント属性(onload="xxxx"など)は禁止 何も書けなくなるじゃないかと思われるかもしれませんが、JavaScriptは全て*.jsファイルに記述すればよい、ということです。 CSPは、JavaScriptのコードとデータを分離して
JavaScriptでdoctestを行う power-doctest を作った
power-doctest という doctest風 にコードと評価結果のコメントを並べるとテストとして実行出来るようなNode製のツールを作りました。
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
asm.jsとかPNaClとかLLVMに興味あったので調べて回ったら少しだけ理解できた話 - hdk_embeddedの日記
このエントリーは以下の「Webの未来 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること〜」というスライドへのアンサーエントリーです。 ひょんなことからまとめはじめたのですが、とりあえずタイトルにあがっているようなasm.js（あせむじぇいえす）やPNaCl（ぴなくる）、LLVMという単語が知らない人でもわかないひとがわかった気になれるように書きました。つまりわかってないやつとはエントリを書いている本人のことだよ！ PNaClとasm.jsでカワルミライ Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること from Kei Nakazawa 結構ブクマが多いのでみんな気になっているんだろうなぁ、という雰囲気があります。 でも読んでみると良く分からない単語があったり、業界背景を理解して
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
Responsive Nav — Responsive Navigation Plugin
Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window. Download Features Responsive Nav is a tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “cle
RaphaelJS
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Create beautiful, interactive images on the Web with RaphaëlJS, the JavaScript library that lets you draw Scalable Vector Graphics (SVG) right in the browser. With this concise guide,
HTML(.js) - Befriend the DOM!
Intuitive HTML lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code. Powerful HTML's functions enable you to flexibly use all native DOM features with brevity, clarity, and more power than ever. HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|A
HTMLElementのdata attributeの使いどころ
Twitterでアプリの状態をdata-*属性で管理するかJavaScriptの変数で管理するかの使い分けに関して質問を受けたので、まとめてみました。 個人的には以下の様な理由から、data属性はJSから参照する変数の初期値としてのみ使用し、JSから直接状態を保持するための変数としては使用しないほうがいいと思っています。 Objectを保持できない JSのObjectは.toStringされた結果が保持されるため、JSの内部状態をそのまま保持できません DOMアクセスが有るため遅い これに関してはベンチマークをとったわけではないですが、JS内で完結する変数アクセスに比べると速度的なペナルティはあると思います （data-*もCSSから参照できるからそのへんの解決もいるし） jQuery.fn.dataの実装はこれらの問題をある程度解決しているので、「HTMLElement毎の独自変数を保持
集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 | DX.univ
8月3日〜4日に開催されたプログラマのためのお祭り的イベント集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 by Yoshiaki Sato in Tech — 2013/08/06 フロントエンド担当のヨシアキです。 8月3日〜4日に開催された"Code 2013"に参加してJavaScriptのコードゴルフの問題を出題してきましたので、そのレポートを兼ねて、JavaScriptのショートコーディングについて語ってみようと思います。 Codeとは プラットフォーム・言語・コミュニティの壁を超えてプログラマが達が集う、プログラマのためのお祭り的イベントです。 開催地はこれまでのところ、温泉郷で有名な札幌の定山渓で開催されています。 そのため、ゆったりと温泉に浸かりながらプログラミングについて語り、美味しいお料理とお酒に舌鼓を打ちなが
Adding Comments to JSON - FADE FADE
If you've ever tried to add comments to a JSON file, you'll have found that it's impossible. To clarify, I'm not talking about object literals in javascript, I'm talking about real JSON that a JSON parser can parse. This is unfortunate, especially in cases where a JSON file is being used a configuration file. It's nice to be able to document your settings. But I seem to have found a little hack th
CSS と jQuery で作るスクロールにあわせて回転するロゴ
Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し
Mashitup | {Mashitup}
I'm a freelance software developer who spent a lot of spare time on web automation. I started Software Development in early 2000's when I was in School. My preference went to Microsoft technologies because of the ease of usability of their tools and excellent integration with Windows. Over the course of 20 years I've worked for several organisations where I've worked on dozains of custom software
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - Front End Developer Playground & Code Editor in the Browser
Byte saving techniques
