Patrick Wied | Products, Data Visualization, Web Developer.
Oh hello there! My name is Patrick Wied. I'm a software developer based in Vienna/Austria with a strong interest in Web Technologies, Data Visualization, Mathematics, and Product Development. I'm passionate about creating things that make lives easier. I try to write regularily about my ideas and some technologies I come across. Most of the content is published on my weblog. Find me on social plat
DOM APIとinnerHTMLは等価ではない
最近、徳丸本をじわじわ読んでいるのですが、DOM based XSSの話が書いてあったので、少し言及しておこうと思います。 徳丸本から引用 DOM based XSSと呼ばれるXSSがあります。これは、JavaScriptによりクライアント側で表示処理する箇所があり、そこに脆弱性がある場合のXSSです。 サンプル書いてみました。 <script> document.write(unescape(location.href)); </script> こいつを適当なファイル名で保存して、domxss.html#<script>alert("hello")<script>などのURLでアクセスするとalertが表示されるはずです。任意のスクリプトが実行可能な状態ってことですね。任意のスクリプトが実行可能ってことは、セッションクッキー盗み放題で、他人に成り済まして買い物できちゃったりするレベルです
Modern Debugging Tips and Tricks
Luckily, we also have better tools. The JavaScript console is a standard feature of most major browsers. Both JavaScript and the HTML DOM offer native error handling. We also have services and applications that help us remotely debug our sites. In this article I’ll cover error thowing and handling, code injection, and mobile debugging. For more on debugging, see Hallvord R.M. Steen and Chris Mills
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
Noise Generator - ノイズ画像ジェネレータ - jsdo.it - Share JavaScript, HTML5 and CSS
最近いろんなサイトでよく見る、ノイズが入ったような背景画像を生成します。 http://expressjs.com/ を見て興味が湧いたので作ってみました。 chrome, firefox, safari, operaで動作確認できました。 画像サイズは200 x 200 形式はpng この画像をjpegで圧縮するとさらにそれっぽくなります。 画像はご自由にお使いください。 function Rgb(colorString){ var match = /^#?(\w\w?)(\w\w?)(\w\w?)$/.exec($.trim(colorString)) for(var i = 1; i < 4; i++){ if(match[i].length === 1){ match[i] += match[i] } } this.r = parseInt(match[1], 16), this.
jQuery slider tools, 200 best !
This is a selection with 200 of the best jQuery sliders plugins and tutorials with a lot of differents features, we’re pretty sure you’ll find exactly what you need or been looking for a while now, so please, go ahead and enjoy. jQuery is such an amazing tool that delivers what offers: writing less and doing more, that’s why now we’d like to share with all of you this huge list where you can find
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net
jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); }); }); 列のどこにいてもクリック出来るようにする。tr要素には予めdata-href=”http://example.com”というマークアップをしてあります。 マー
Javascript Basics - part 1
This document provides an overview and introduction to JavaScript basics. It discusses key JavaScript concepts like dynamic typing, prototypal inheritance, closures, and the event loop. It also covers variable scope, the module pattern for encapsulation, operators like || and &&, and the fact that almost everything in JavaScript is an object that is passed by reference.
HTML5 CSS3 Animation Spiderman Cartoon w/ jQuery and HTML5 - Look Ma, No Flash!
Inspiration Searching YouTube for inspiration I stumbled on to the intro of the classic 1967 spider-man cartoon series. While watching I realized that the animation was very basic. It was the paper doll sort of animation that lends itself perfectly to css3. Hmmm… “I could something like that with a little css3”, I thought. Character & background art CSS3-MAN The character art was created in adobe
Dynamic Heatmaps for the Web
heatmap.js Dynamic Heatmaps for the Web heatmap.js is a lightweight, easy to use JavaScript library to help you visualize your three dimensional data! Use it to add new value to your project, build a business based on it, study and visualize user behaviour, or why not build something completely crazy/awesome? Whether you want to have an aggregated overview of your users behaviour, or look at thous
実行間隔を調整する - はてなダイアリー - 無料で簡単。広告のないシンプルなブログをはじめよう！
JavaScriptDebouncing Javascript Methods | Unscriptable.com 密に処理が実行されてしまうのを避けるため、二つのかたちがあるとのこと。下のデモ。throttleは、0.5秒ごとに点の位置が変わる。debounceは、0.5秒いると赤くなる。 デモ throttleひとつ目は一定間隔以内の呼び出しは間引いて無視する方法。イベントの発生頻度が多く、処理が重い場合に使う。 Function.prototype.throttle = function(threshold, alt){ threshold = threshold || 100; var me = this; var last = Date.now(); return function(){ var now = Date.now(); if(now - last debounceも
Firebug の monitorEvents unmonitorEvents がバグってる件とそのバグ修正方法 - IT戦記
以下のエントリーを見て FirebugのmonitorEventsが動かない - Enjoy*Study で、実際はどうなんだろうと試してみた。 ちなみに monitorEvents とは Firebug のコンソールで >>> monitorEvents(document.body) と打ち込むと document.body にあがってきた全てのイベントをモニタリングできる >>> monitorEvents(document.body, 'click') と打ち込むと document.body にあがってきたクリックイベントをモニタリングできる >>> monitorEvents($('target')) もちろん document.body 以外もできる そんな機能 たしかに、現在の Firebug 1系 ではこれがバグっててまったく機能してない！ なんで今まで気がつかなかったんだ
SASSIENCEの仕様書（Evernoteのメモ）を公開してみる - アインシュタインの電話番号
先月書いた以下の仕様書公開記事が好評だったので、先週リリースしたCSSのインデントを綺麗にするサービスSASSIENCEの仕様書を公開してみる。 個人で作ったWebサービスの仕様書（Evernoteのメモ）を2つ公開してみる 今回も、前回公開した2つの仕様書とほとんど同じ形式だけど、より具体的に細かく書いてある。気がする。また今回は、公開前に数人の方にサービスを使ってもらって感想やツッコミ等のフィードバックをもらい、リリース前にブラッシュアップする作業を加えたので、その作業ログも入っているのが前回と違う点。 SASSIENCEの概要については、サービス紹介記事を書いたので詳しくはそちらをご覧いただきたい。今回も前回と同じEvernoteにTODOリストを書きまくる体裁の仕様書(?)で、このメモを作る目的は以下の2点。 実装する仕様の優先順位を明確にするため 思いついたアイデア・仕様を忘れな
JavaScript Tools (PHPConference 2011, Berlin)
10 gefällt mir1,115 aufrufeDurch KI verbesserte Beschreibung Das Dokument diskutiert verschiedene Werkzeuge und Techniken zur Verbesserung der JavaScript-Entwicklung, einschließlich Minifizierungs- und Testtools sowie Debugging-Methoden. Es enthält Links zu nützlichen Ressourcen, wie Code-Compiler und Unit-Testing-Frameworks. Der Autor, Wolfram Kriesing, hebt die Bedeutung des Testens und der effe
wise9 › JavaとJavaScriptの20年戦争
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
Run Linux on your iPhone, iPad, or Mac from a Web Browser
Run Linux on your iPhone, iPad, or Mac from a Web Browser If you’re bored of the Mac command line this is both cool and geeky and should keep you entertained for a bit. JSLinux is a fully functioning version of Linux running entirely in a web browser, meaning if you have almost any modern web browser suddenly you can run a basic version of linux on any computer. You don’t need to install anything,
canvasのテスト
HTML5の目玉機能(?)、canvas要素とJavascriptでいろいろサンプル作成中。画面をマウスクリックでパーティクルが吸着するよ。 追記：ちょっと修正 (19:30) Javascriptのソースはこんな感じ。 [sourcecode language=”javascript”] const NUM = 500; //円の数 const WIDTH = 400; //画面の幅 const HEIGHT = 400; //画面の高さ var speedX = new Array(NUM); //X方向のスピードの配列 var speedY = new Array(NUM); //Y方向のスピードの配列 var locX = new Array(NUM); //円の中心位置のX座標の配列 var locY = new Array(NUM); //円の中心位置のY座標の配列 var r
JavaScript基本概念最速マスター - TechTalkManiacs
プログラミング言語の文法をまとめた最速基礎文法マスターが流行っていますが、それだけだと物足りないので少し視点を変えてJavaScriptという言語の基礎となっている概念について簡単にまとめてみようと思います。(基礎文法についてはこちらを参照してください) (20010/2/4 記述ミス Typoなどを修正しました) JavaScriptの基本概念 JavaScriptの基本となる概念は次の二つです。 連鎖指向 全てがオブジェクト 連鎖指向はプロトタイプチェーンやクロージャ、全てがオブジェクトであるという性質は連想配列やプリミティブ型などの性質に関わってきます。 連鎖指向 JavaScriptでは変数、オブジェクト、メソッドなどのリソースの利用において鎖のようにリソースを定義や宣言できるポイントが連なり、一番近くの宣言や定義に基づいてリソースの内容が決定される、という仕組みが採用されています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://github.com/borismus/DevTools-Lab/raw/master/cheatsheet/chromedev-cheatsheet.pdf
http://jqfundamentals.com/book/index.html