出張 Shibuya.js 24 「正しい Photoshop の使い方」 - 氾濫原
Mozilla 24 の 出張 Shibuya.js 24 で LT しました。 スライドは CodeRepos にコミットしました。psd でプレゼンしましたがたぶん見れない人のほうが多いので png に変換してあります。 出張 Shibuya.js 24 「正しい Photoshop の使い方」変換済み 時間の関係で全部できませんでしたが、実演のシナリオも一応あります。 あのシェルも CodeRepos にコミットしてあります。pshell (追記: SlideShare にもアップしました) Windows 版の CS3 を持っていないのでうごくのかよくわからないですが、基本的にファイルのよみかきしか行なっていないので、ruby と CS3 があればうごくんじゃないかと思います。 追記 そういえば深夜にやっていたライブコーディングにもせかんどらいふさん経由で飛び入り参加しました。ネタ
フロントエンド系(XHTML・CSS・JavaScript・XML)のチートシート
(X)HTML、CSS、JavaScript、XMLなどのサイト制作のフロントエンド系のチートシートのまとめです。 各チートシートのリンクは、下記の「チートシートのポータルサイト」より収集しました。 (X)HTMLのチートシート CSSのチートシート JavaScriptのチートシート JavaScritpt ライブラリのチートシート XMLのチートシート チートシートのポータルサイト (X)HTMLのチートシート XHTML Basic: children - parents XHTML Basic: elements - attributes XHTML Strict: children - parents XHTML Strict: elements - attributes HTML Cheat Sheet HTML Quick Reference(PDF) XHTML Cheat
XPath のパーサ書いた - IT戦記
ふー。XPath パーサが出来ましたよ＞＜ わーい。 昨日中に作ろうとは思っていたけど＞＜ もうすぐ朝の 6:00 か。 もう 18 時間くらいはずっとコード書いてたんだなあ。集中してて時間が過ぎるのが一瞬だったよ。 XPath パーサのデモ http://amachang.art-code.org/xpathparser/ このデモでは、テキストボックスに書かれた XPath を動的に解析していきます。 実際に XPath を書き足していくと「うにょうにょ」構文木が構築されていく様子が分かります。 ちょっとおもしろいです。 注意 とりあえず、実装することだけを目標に書いたので、高速化や最適化やリファクタリングなどは一切やっていません。 あと、 パーサを作りながら、いろいろ勉強になって、いろんなことブログにも書きたいんだけど＞＜ でも、今日はもうヘロヘロ＆手がプルプル＆明日拡張勉強会なので
IT戦記 - XPath の字句解析をワンライナーで作ってみた。
ソースコード var expression = '/html/body/div/[attribute::class="hoge fuga piyo"]'; var tokens = expression.match(/"[^"]*"|'[^']*'|\d+(?:\.\d*)?|\.\d+|\*|\/\/|\/|\||\+|!=|<=|>=|<|>|=|\(|\)|\[|\]|\.\.|\.|@|,|::|-|(?![0-9-:])[\w-]+:\*|\$(?:(?![0-9-:])[\w-]+:)?(?![0-9-:])[\w-]+|(?:(?![0-9-:])[\w-]+:)?(?![0-9-:])[\w-]+|\s+/g); // tokens is ["/", "html", "/", "body", "/", "div", "/", "[", "attribute", "::",
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
リキッドレイアウトの弱点を克服 - Hatena::agenda
リキッドレイアウト採用にあたって問題点を再検討してみた。ブラウザで解決できる問題だとは思うので、リキッドレイアウトに起因するデメリットではないが、少なくとも現在ある問題としてこれは明らかにまずい。 ブラウザのサイドバーを利用するなどしてメイン領域の幅を変更すると、文字の表示位置が大きくずれ、読んでいた場所が分からなくなる。 今のところ回避方法としては、内容が長大な場合には複数のページに分割するなどして縦方向のスクロールを多く要求しないようにすることくらいしかないが、よく考えてみればそれはウェブデザイン的に結構基本的なことだったりする。 ここで陥ってはならないのが、逆も真（謎）と思い込んでしまって「ある程度縦長にならざるを得ない場合には幅固定の選択肢もあり」と判断してしまうミス。複数のページに分割とは、何も物理的に分割しなければならないわけではない。こういう止むを得ない状況を打破するためのC
Ciencia Inútil o el Alquimista ドメイン名でMD5なパスワードを作るBookmarklet
2025-07 « 12345678910111213141516171819202122232425262728293031 » ついったー部に書いたエントリに、結城浩さんとid:sendさんからトラックバックをもらった。 www.textfile.org - Twitterとソーシャルハッキング nothing but trouble - パスワードとかの話 小飼弾さんにも触れてもらった。 404 Blog Not Found:javascript - Random Password Bookmarklet 僕はid:sendさんと同じく別環境でも使いたいので、パスワードマネージャによる管理は選べない。紙のメモも持ち歩くと不便。 自分ルールに則ってドメイン名を組み合わせたパスワードを使う、という手もあるけど、twitterのパスワード「twitter1234」をヌイッターに抜かれたら、
ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
[NS] お知らせ:「コナミコマンド」を実装しました
当サイトでは、本日よりコナミコマンドを実装いたしました。コマンドはファミコン版グラディウス準拠の「上上下下左右左右BA」です。SFC版グラディウスIIIのように自爆はしません。ご安心ください。 コマンドを打つとサイト全体がパワーアップします。もう一度コマンドを打つと元に戻ります。携帯電話やRSSリーダでご覧の場合は効果がありません。ご了承ください。 特に意味はありませんが、どうしようもなくコナミコマンドを打ちたくて打ちたくて仕方がなくなったときなどにご利用ください。料金は一切いただきません。 著作権を主張するようなモノでもないので、自分のサイトに付けたいと考えてらっしゃる奇特な方はソースを見て勝手にお持ち帰りください。 追記:うまくいかない方は日本語入力をオフにしてください。Windows版のInternetExplorer、Firefox、Operaそれぞれの最新版で動作確認済みです。
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
（2007.7.20 記事更新） 誰かがそろそろExtについて詳しい事を書いてくれるのではとか、甘い期待をしていたけど、ぜんぜん出てこないって事は人気がないって事なんでしょうか。 でもこれ、相当すごいものだと思うんです。 例えば、このページ（hello worldをクリック）だけをとっても良い動きをしてくれるのが確認できると思います。 なので今回はJavaスプリクト＋Ajaxなオープンソース『Ext』をご紹介しておきます。 概要 非常に簡単なコードで、高度な動作を要求することが出来る。 それがJavaScriptフレームワーク『Ext』です。 フレームワークについてはウィキ等で見てもらえればわかると思いますが、私の絵心のない簡略図でよければ、以下のようなイメージがフレームワークですね。 基本的に商用は有料。 個人利用や、企業内でも、閉鎖されたネットワークでの使用はOKだそうです。 ライセン
JavaScriptを埋め込んだ画像を作ってみました
補足 この記事は旧徳丸浩の日記からの転載です。元URL、アーカイブ、はてなブックマーク1、はてなブックマーク2。 備忘のため転載いたしますが、この記事は2007年7月17日に公開されたもので、当時の徳丸の考えを示すものを、基本的に内容を変更せずにそのまま転載するものです。 補足終わり 寺田さんの日記に触発されて、JavaScriptを埋め込んだPNG画像を作ってみました。 注意:この画像にはJavaScriptが埋め込んであります。 ここをクリックすると、JavaScriptが発動し、あなたのクライアント上でCookieの値を表示します(IE限定です) 追記 ImageMagic の convertコマンドでPNG→GIF→PNGと変換しても、JavaScriptは削除されませんでした。これは、T.Teradaさんの解説の追試に過ぎませんが、一応ご報告まで。 追記(2007/10/10)
JavaScript勉強会でYahoo UI Libraryについてしゃべりました。 - VTuberになったプログラマーの魂の残滓
とりあえず資料を公開します。 資料 JavaScript ONでご覧ください。 最初のリンクをクリックするとプレゼンモードで閲覧できます。 プレゼンモードは若干大きい画面が必要になります。 基本喋りがメインなので資料だけではわかりづらい＆抜けがあるかと思いますが、ご了承ください。 まぁYUIを使うメリットって クロスブラウザ対応がメインだよね。 あとYUIって結構パフォーマンスいいよ。 みんなもっとYUI使えばいいのに！！ というわけで 参加されたみなさん（っていうか現在進行中だけど）お疲れ様でした＞＜ 勉強会全体のまとめはUKStudioがきっと書いてくれると思います＞＜ 最後に 会議室を貸してくださった上鍵さんをはじめとしたノッキングオンの皆様ありがとうございました！ 会議室を利用したいかたは「ノッキングオンの会議室使いたい!」までこんにちは！こんにちはしましょう！
超便利！JavaScript用の文字列拡張関数いろいろ:phpspot開発日誌
Ivan Uzunov Blog Blog Archive Top 10 JavaScript String.prototype Extensions This is the list of mine top 10 JavaScript String.prototype extensions. If you want to you can post yours bellow. 超便利！JavaScript用の文字列拡張関数いろいろ String.prototype でStringクラスを拡張し、次のような機能を実装するための関数が公開されています。 trim - トリミングを行う関数 splitrim - トリミングとsplitを行う関数 escHtml - HTMLエスケープを行う関数 unescHtml - HTMLアンエスケープを行う関数 urlEncode - URLエンコードを
ハタさんのブログ : javascriptの暗黒面
javascript の暗黒面については、ちょっと書かれているので何も言わずもがな。なのですが、最近こういった質問が増えてきたので少し書く。 via - JavaScript の暗黒面を覗く nullはオブジェクトだ！ nullは歴史的理由からobjectです。なので、typeofするとobjectって返ってきます。 alert(typeof null); // object なので、この事に気がついている方は次のようなコードを書きます。 if(typeof hoge == 'undefined' || hoge == null){ // do something } たとえば、次のようなコード var hoge = function (a){ if(typeof a == 'number'){ // was number // 数値計算とか return a + 1; } if(type
IE 以外の JavaScript で getter setter が使えるようになる！ - IT戦記
Opera 9.5 では getter setter が使えるようになります。 http://my.opera.com/desktopteam/blog/kestrel-is-coming で Safari 3 でも使えるか試してみたら・・・ alert({ get x() { return 'ok' } }.x); // ok つ、使えた！ Firefox でも かなり前から getter setter が使える という事は・・・ IE 以外で getter setter が使えるのはもうすぐだ！！！ IE にしかないプロパティを他のブラウザで実装することができるようになる！！ たとえば、こんな感じ？ // ↓条件付きコンパイル /*@cc_on @if (@_jscript) @else @*/ if (!('returnValue' in Event.prototype)) { Ev
javascriptを理解するためのたった2つの大切なこと
9割ぐらいはハッシュ何がハッシュなのかjavascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。 var arr = [0,1,2,3]; とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。 これは var has = {0:0,1:1,2:2,3:3}; と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。 ためしに arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1; としてみよう。 Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。 でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。 それどころかarr.xで'string'がかえってくるんだ。 別の例を
最速インターフェース研究会 :: フィード吐いてそうなリンクを強調するブックマークレット
先日書いた、リンク先まとめて購読する機能のAPIが公開されたので、 http://blog.livedoor.jp/staff_reader/archives/51035779.html こんなことができます。IE6の文字列制限ギリギリに圧縮（たぶん） フィードを吐いてそうなリンクを強調 ソース (function(){ var api="http://rpc.reader.livedoor.com/feed/discover?url="; window.__feed_discover=function(r){ var seen={}; var links=document.links;len=links.length; for(var i=0;i<len;i++){ var a=links[i];href=a.href; for(var l=0;l<r.length;l++){ var
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/jsscrolling
?D of K