Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法 - EC studio デザインブログ
Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。 Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。 JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。 zen_setting.jsに秘密がある Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。 実はその中に、省略コードやスニペットがすべて書き込
驚きいっぱいのJavaScript？ - 風と宇宙とプログラム
言語やインタフェースの設計には「驚き最小の原則」というのがある。まつもとさん本人はそんなこと言っていないようだが、かつて、Rubyはその原則に沿った言語と言われていた。一方、JavaScriptはそれに反する言語と未だに見なされているようだ。多くの場合、よく理解していないのが原因である。理解した上でも、やっぱりおかしいよ、というのもあるかも知れないが、じゃ、その場合どう定義したらよいんだ、というのはいろいろ難しい問題がある。 wtfjs(http://wtfjs.com/)にはJavaScriptのそんな「変な挙動」が集められている。wtfなんてタイトルをつけているくらいなので、あまり真面目に見る必要はないのかも知れないけれど、主なものについて古い順から軽く解説してみた。ちなみに、wtfはWhat The F*ckの略。 typeof NaN === 'number' // true In
DOM Elementオブジェクトをテキストダンプしてデバッグ - hogehoge @teramako
DOM APIを使用して作ったDOMツリー、うまく生成されているか見てみたい事は多々ある。少なくともオイラはある。簡単にテキスト表示してくれると嬉しいなぁと常々思っていたのだが発見した。 Firefox（というかMozilla系かな）限定だろうけどXMLSerializerがあるのだ。 使い方は簡単。 var serializer = new XMLSerializer(); //略 var root = document.createElement('div'); var anchor = document.createElement('a'); var aText = document.createTextNode('はてな'); anchor.setAttribute('href','http://www.hatena.ne.jp/'); anchor.appendChild( aT
Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - monjudoh’s diary
Firebugでは条件付きブレークポイントが使えるので、 scriptタブにて該当行にブレークポイントを貼り、 条件としてconsoleへの出力を||区切りで、最後に&& falseを入れる。 console.debug('this.lastPosition') || console.dir(this.lastPosition) && false こうするとブレークポイントを通る度にconsoleへの出力は評価され、 consoleに出力され、最後の&& falseのため式全体は必ずfalseとして評価されるため ブレークすることはない。 追記 console出力系関数の戻り値はundefinedなんだから&& falseは不要か 追記 nanto_vi @monjudoh JSでは||より&&の方が優先順位が高いので、a || b && c はaが真ならbもcも評価されずに全体が真として
//から始まるURL - by edvakf in hatena
このブログでも前に一回出てきたことがあるんだけど、// から始まる URL のことが紹介されていた。(問題・このブログのどの記事で出てきたでしょうか?) Using Protocol Relative URLs to Switch between HTTP and HTTPS - HttpWatch Blog <img src="//example.com/img/foo.jpg" />とか書いてあると、そのページのプロトコル (http: か https:) をブラウザが勝手に補完してくれるので HTTP と HTTPS を使い分けるのに便利だよっていう話。 ただし、IE7と8では // から始まる URL で指定されたスタイルシートは何故か2回リクエストが出てしまうので気をつけましょう。…らしい。(受け売りです) High Performance Web Sites :: 5a Mis
Lucky bag::blog: IE でも擬似的に子供セレクタ
ある要素の直接の子要素に対してだけ CSS で指定をしたい場合、子供セレクタ div > p が便利。しかし、IE がこれに対応していなくて残念って感じだったんだけど、meyer 氏が IE でも擬似的に直接の子要素を指定できる方法を発見した模様。 Eric's Archived Thoughts: Universal Child Replacement 例えば、下記の (X)HTML があったとして、id="content" の子要素の段落だけ背景色を #ff8800 に変えたいって場合。 <div id="content"> <p>content の直接子供要素の段落。ここだけ背景色を変えたい。</p> <div id="foo"> <p>この段落は色は変えたくない。</p> <p>この段落は色は変えたくない。</p> </div> </div> 子供セレクタに対応しているブラウザであ
Javaバイトコードの読み方 - プログラマーの脳みそ
Javaのデバッグをしていて、ステップ実行中にステップインを繰り返したらソースコードのないところに行き当たったことがあるだろう。あるいはEclipseでF3キーでクラスやメソッド・フィールドの宣言元を辿っていってソースコードのないところに行き当たったことがあるだろう。 Eclipseの場合、"Class File Editor"というものが開く。そこにはJavaのバイトコードのニーモニックがズラズラと並んでいて、「これは読めないや、ワケが分からない」と投げ出してしまったりしていないだろうか。 怖がることはない。ちょっとコツを掴めばすぐに読めるようになる。 Class File Editorの開き方 自前のJavaクラスの場合、ビルドして出来上がったclassファイルを開く必要がある。"Package Explorer"だとclassファイルは隠されていて見えないのでWindow -> Sh
FirefoxでのJavaScriptデバッグテク等 - 素人がプログラミングを勉強していたブログ
obj.watch("prop", function (id, older, newer) { console.log(id, older, newer, arguments.callee.caller); return newer; });obj.propに値を代入してる関数を調べるテクニックの紹介。 下のスクリプトはFC2Blogではてな記法を使えるようにする（デバッグ前の動かない）スクリプトで、text-hatena.jsについては長いからここに載せるときに削った。 // ==UserScript== // @name FC2 Hatenation // @namespace http://oksoftware.blog52.fc2.com/ // @description Use Hatena syntax in FC2 Blog // @include http://blog*.
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Javaのシステムプロパティをすべて表示するJavaコード - いろいろ解析日記
Javaのシステムプロパティは、System.getProperties()メソッドを呼び出すことで取得できます。このメソッドはMapを継承したPropertiesクラスのインスタンスを返すので、Mapと同様にfor-each文を用いてすべてのデータ(システムプロパティ)への繰り返し処理が可能です。 以下、システムプロパティをすべて表示するJavaコードです。 import java.util.*; /** * Javaのシステムプロパティの表示。 * @nattou_curry */ public class PrintProperties { public static void main( String[] args ) { // システムプロパティをすべて取得する。 Properties properties = System.getProperties(); // すべてのシステ
handleEvent、addEventListener - 素人がプログラミングを勉強していたブログ
addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。 window.addEventListener("click", { handleEvent: function (e) { console.log(e); } }, false); また、この仕様を利用すると、 ({ run: function () { window.addEventListener("click", this, false); this.counter = 0; }, handleEvent: function () { this.counter++ if (this.counter < 3) alert(this.counter + "clicked!"); else this.destroy(); }, destroy: fun
Array.concatで配列のクローン(コピー)を作成する - latest log
JavaScriptで配列のクローンを作成しようとして、悩んでいる方もいらっしゃるようですが、 以下のように、for ループや再帰なコードを手書きする必要はなくて、Array.concat() で配列のクローンは作成できます。 Array.prototype.clone = function(){ return Array.apply(null,this) } Array.prototype.clone = function() { if ( this[0].constructor == Array ) { var ar, n; ar = new Array( this.length ); for ( n = 0; n < ar.length; n++ ) { ar[n] = this[n].clone(); } return ar; } return Array.apply( null,
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
JaGraプロフェッショナルDTP&Webスクール スキルアップブログ
スタッフAです。 JaGraプロフェッショナルDTP＆Webスクールは、2024年4月1日より、スクール名称を「ジャグラショートカット」に変更します。 当スクールは、印刷物制作のデジタル技術を学ぶ場として1995年に開校、アドビのDTP系アプリケーションのトレーニングを中心に、Microsoftのビジネス文書作成講座を開講しておりましたが、その後はDTP講座とWeb講座をメインに開講、近年では動画制作講座が人気となっております。 このように、時代の変遷とともにスクールが扱う講座内容も変化してきたこと、そしてコロナ禍でスクール運営が難しかった時期を乗り越え、今後ますます多くの方に役立つスクールとして躍進していこうという決意を込め、名称を変更することとしました。 新しいスクールロゴは下記になります。 ▲ジャグラショートカットロゴ 今後も引き続き、【ジャグラショートカット】に生まれ変わる当スクー
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
2分でわかる uupaa.js の サクサク :: handsOut.jp
スライド1: 2 分でわかる uupaa.js~ Speedy ~uupaa.js@gmail.com スライド2: 今日のテーマは「サクサク」 スライド3: サクサクにするには1. 名前解決コストを減らす2. ガベージレス3. Hash で評価4. Hash の事前生成5. イベントハンドラの軽量化 スライド4: 1. 名前解決コストを減らす• スコープ内に alias を作成し、そちらを参照する– STYLE B は JIT 非搭載ブラウザで特に効果的例: IE6で 6%, IE7,IE8で 9%, Firefox3で 12%, Opera10で 3% 高速化例: 関数の alias を用意すると IE6で 2.7倍 高速化// 元のコード (STYLE A)var _regexp = /regexp/;(function() {(function job() {for () {
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
スタイルシート［CSS］/イメージ/画像に並ぶテキストの位置（垂直方向）を指定する - TAG index
