ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開
一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行います。 オプション解説 以下のオプションが設定可能です。変更が必要なオプションのみ記載して下さい。記述がないオプションは、srcで指定されたCSSファイルのフォーマットでそのまま出力されます（そのため、ほぼ全てのプロパティに初期値を指定していません）。 なお、''は改行も空白も入れないことを意味しますので注意して下さい。 decl.before 型 String 初期値 なし CSSプロパティ名の
CSS Subclassing
上野 学（@manabuueno）- 2014年1月17日 CSS Subclassing は、主にアプリケーションよりのウェブの実装に役立つ CSS の書き方である。 アプリケーションよりのウェブとは、企業広報サイトのように各画面でデザインの個別性が高いものではなく、コンポーネント化されたUI要素の組み合わせのみで各画面が構成されるようなもののことである。 CSS Subclassing の目的は、HTML 要素をユーザーインターフェースオブジェクトのインスタンスとして捉え、そのスタイルをクラスとして定義することにある。そしてあるクラスの性質（スタイル）を継承した、サブクラスの定義もできるようにする。 HTML 要素にスタイルをあてる場合、class 属性にクラス名をセットしてそれを CSS のセレクターに用いることは普通に行われる。しかし HTML 要素の class 属性は、いわゆる
grunt-spritesmith を Windows にインストールする - メモ用紙
CSS スプライトを自動で作ってくれて Grunt で自動実行できるツール grunt-spritesmith を Windows 7 (64 bit) 環境にインストールした。（参考：Mac へのインストール） Grunt に関しては Grunt を使って LESS のコンパイル環境を作る を参照されたい。 PhantomJS のインストール grunt-spritesmith は、スプライト画像を作るエンジンとして phantomjs と gm (Graphics Magick / Image Magick) を選べる。PC-UNIX では node-canvas も選べるそうだが残念ながら Windows では動作しない。 PhantomJS は WebKit 互換の動作で、JavaScript を使って Web ページを制御したりスクリーンショットを撮ったりできるツールらしく、面白
複数言語が入り交じったファイルのシンタックスハイライト(PHP内のJavaScriptなど) - JetBrains のブログ
時々一つのファイルに複数のプログラミング言語を書かなければいけないことがあります。1つや2つの小さなコードブロックであれば言語インジェクションを使うことをおすすめします。では別の言語がたくさんある場合はどうしたらいいでしょう？ たとえばJavaScriptやCSSファイル内でPHPの変数や関数を呼び出している場合、どうやって言語別のシンタックスハイライトやコード補完、インスペクションを働かせればいでしょうか？こういった場合にぴったりなのがTemplate Data Languageです。 このブログエントリで紹介する機能はIntelliJ IDEA、PyCharm、WebStorm、PhpStorm、RubyMine、AppCodeでご利用いただけます。 例えばPhpStormにファイル、フォルダ、またはプロジェクト全体という単位で複数の言語を扱うよう設定できます。以下の例ではJavaSc
60fps scrolling using pointer-events: none
60fps scrolling using pointer-events: none Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class. UPDATE: I’ve done a follow up article which demonstrates a more robust technique. That approach doesn’t scale well an
ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは本末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者
PhoneGapアプリのパフォーマンスを改善する10のポイント -Adobe MAX 2013
米アドビ システムズは、5月6日～8日(米国時間)までの3日間に渡って、同社製品のユーザを集めたカンファレンス「Adobe MAX 2013」を開催した。同社では近年HTML5やCSS3を中心とするWeb標準技術のサポートに力を入れており、今年のAdobe MAXでもこれらの技術やツールに関連したセッションが数多く設けられた。本レポートではその中のひとつ、アドビのテクニカルエバンジェリストChristophe Coenraets氏による「Top 10 Performance Techniques for PhoneGap Appplications」の内容をレポートする。 PhoneGapは、HTML5やJavaScriptといったWeb標準技術を用いて各種モバイルプラットフォーム向けのネイティブアプリを作成することができるオープンソースのフレームワーク。元々はNitobi Softwar
» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
WebStorm & PhpStorm Blog日本語訳：WebStorm 6におけるFile Watchers（別名"Background Tasks"） - 448.jp blog
こんにちは、沖です。 今週は、ひさしぶりに毎日ブログを書くことができました。すべて翻訳記事です。 WebStorm Blog日本語訳：WebStorm 6.0をリリースしました：TypeScript追加、ソースマップでのデバッグ、新しいUIとその他 JetBrains Company Blog日本語訳：JetBrainsのツールが50% OFF、それを支える正当な理由 WebStorm Blog日本語訳：WebStorm 6のビルトインサーバー WebStorm & PhpStorm Blog日本語訳：WebStorm 6におけるJavaScriptライブラリの改善 writing in the journal / erink_photography ブログはできる限り書き続けたいと思っているのですが、仕事が忙しくなってくると途端に難しくなってしまいます。GWに向けてなぜか右肩上がりに忙し
ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単！ Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
チェックボックスとラジオボタンのコントローラとスタイリング jq.ui.checks :: 5509
jq.carouselに引き続きよくあるシリーズです。（つまり車輪の再開発 ベースはチェックボックス・ラジオボタンをまとめて操作するようなUIのためのコントローラーで、それのついでにビューになるHTMLとinput要素を（見た目上）置きかえる機能がついてます。それだけです。 ドキュメント・サンプルは以下のリンク先を参考にしてください。（引き続き変な英語ですけども。 jq.ui.checks 要望とかバグ報告などはgithubのIssuesへお願いします。 github repository 5509/jq.ui.checks Leave a comment If you have bug tickets or nice idea, please post that at github repository issues, thx. バグや要望などはgithubのIssuesでください ;)
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
Prototype Dissected - snook.ca
In getting to know Prototype a little better, I decided to go through the latest version of the Prototype library (1.5.0_pre0) and detail every method and property that was available. In doing so, I got a much better understanding of how the code works. Here are the files in a 1280x960 and a widescreen 1440x900 version. 1280x960 1440x900 1280x960 on White 1440x900 on White And with WHITE backgroun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sign PDF Documents | DocHub
非Flash搭載マシンに対応する為の progression.js の仕様変更