パッケージマネージャー「Bower」が大変便利で捗りそうです - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 外部リソースをプロジェクトにインストールするのに、今まではSublimeText2のNettuts+ Fetchを使用していましたが、 node.jsベースのパッケージマネージャーの「Bower」が大変良さそうだったのでレポートをしたためておきます。 Bower とは BOWER – THE BROWSER PACKAGE MANAGER html, css, and javascript Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. BowerはWeb開発向けのパッケージマネージャー
コーダーさんの為のGrunt入門（前編）〜導入編 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 以前はmakeを使って納品用のデータをビルドしていたりしたのですが、 去年くらいから代替にGruntを使ってみています。 この度0.3.xから0.4系に切り替えたので、覚書も兼ねてGruntの導入・使い方を記しておきます。 Gruntってなに Gruntを導入する 使ってみよう どんなタスクがあるの？ その他Gruntの魅力 まとめ Grunt ってなに GRUNT: The JavaScript Task Runner Gruntはnode.jsベースで作られたタスクベースのコマンドラインビルドツールです。 ビルドツールってなに ビルドは、ソースファイル群を元にして、実行出来る成果物を生成するプロセスの事を指します。 cf) ビルド (ソフトウェア) – Wikipedia 鍋に鶏と野菜とコンソメを入れて煮込んだらポトフが出来
コーダーさんの為のGrunt入門（後編）〜CSSプリコンパイラ編 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 前編の導入編 に続いて、 コーダーさんにとって強力な武器である、Less/Sass/Stylus等のCSSプリコンパイラのコンパイルを Gruntにお任せしてみる方法を紹介していきます。 Less/Sass/Stylus をGruntでコンパイルする ではさっそく、GruntでCSSプリコンパイラを扱うタスクを紹介します。 grunt-contrib-less – LessをCSSにコンパイルします grunt-contrib-sass – SassをCSSにコンパイルします grunt-contrib-stylus – StylusをCSSにコンパイルします 指定できるオプションは異なりますが、設定の仕方に差はありません。 違いを挙げるならば、Less/StylusはJavaScriptで書かれているのでnode.js上で動作
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
Sublime TextとNettuts+ Fetchで音速のスタートアップ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） Sublime Textは高機能でマルチプラットフォームなプログラミングエディタです。 この度リリースされたSublime Text向けのプラグイン「Nettuts+ Fetch」が素敵だったので エディタも含めてご紹介致します。 Nettuts+ Fetch ってなに？ Introducing Nettuts+ Fetch | Nettuts+ Nettuts+ Fetchは、名前の通り、Nettuts+からリリースされたSublime Text用のプラグインで、 外部リソースを簡単なコマンドで手元にpullする事ができます。 例えば、普段からよく使うjQueryやリセット用のCSS、 常用するフレームワークや、Wordpress等のCMS等、 設定さえしておけば、コマンド一発（正確には三発）でダウンロード・展開してくれます。
条件分岐に特化したリソースローダー「yepnope.js」を試してみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 最近ブログ記事のソースコードで見かけるようになった「yepnope.js」を試してみました。 条件分岐によって読むリソースを切り分ける事に特化したライブラリです。 yepnope.jsとは yepnope.js | A Conditional Loader For Your Polyfills! 手書き風のロゴがかわいい。 yepはyes、nopeはnoの口語体で、固く言えば「yesno.js」。 与えた条件がtrueの場合とfalseの場合で読むJS/CSSを切り替えるのが得意な リソースローダーです。 最も簡単なサンプル yepnope("hoge.js"); yepnope("style.css"); 単一ファイルをロードするだけの簡単なサンプルです。 内部的には、ドキュメント内で一番最初のScript要素を探して、 その
はじめてのRaphael (1) : お絵かき編 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） SVGが少しずつ市民権を獲得し始めている昨今のWWWですが、 Raphaelとは、そのSVGをコントロールするのに非常に便利なライブラリです。 公式によさげなチュートリアルがなかったのもあり、 今回はその使い方をまとめてみようという試み。 Raphaelとは RaphaelはSVGで図を描画するためのフレームワークです。 正しくは「Raphaël」と書きますが、 毎度めんどくさいのでRaphaelでいきます。 なにをしてくれるのか SVGが動かないクラシックなIE環境の為に、VMLでも出力してくれます。 イベントやアニメーションまわりも簡単に実装できるようになっています。 特に助かるのがVML対応。 旧ブラウザをサポートしなければならないケースには、 ぜひとも導入したいライブラリですね。 極めてシンプルな例 Rraphaelで図
IE8/9.jsで、ある条件が揃うとスタイルが飛んでしまう現象について - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） ちょっとハマったので備忘録。 IE7.jsは、クラシックなIEでモダンブラウザの機能を使うためのライブラリですが、 その系列のIE8/IE9.jsを使ってある条件が整うと、スタイルが消えてしまう不具合に遭遇しました。 ※執筆当初のIE7.jsの最新バージョンは、7.2.1(beta4) セレクタの一番はじめのプロパティの値が「inherit」 セレクタの一番はじめのプロパティと「{」の間にスペースや改行等がない セレクタ内で「inherit」を値にもつプロパティが二つ以上ある IE8.jsまたはIE9.jsを読み込んでいる これらの条件を全て揃えると、そのセレクタ以降のCSSが全て無効になってしまいます。 例えばこんなコードで再現出来ます。 input,textarea,select{font-family:inherit;fo
IE9.jsで実現するシンプルなclearfixとその他の恩恵 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 既に広く知られているであろう、IE9.jsは、 新旧IEの差異を（出来るだけ）埋めてくれる素晴らしいスクリプトです。 今日のお話は、IE9.jsで実現出来るシンプルなclearfixと、 このスクリプトで実際どんな恩恵が受けられるかの備忘録です。 cf) ie7-js – Project Hosting on Google Code シンプルになったclearfix 念の為スクリプトのロードも記載しておきます。 IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。 （これも内部で条件分岐して頂けると大変幸せだなぁ） <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
