こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか？ おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト（コーディング面倒…）インラインCSS（コーディング面倒…）メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の
問題 Grunt では shift_jis のファイルをうまく扱うことができません。 特に、grunt-contrib-connect などで立てたローカルサーバで shift_jis の HTML ファイルを表示すると文字化けしてしまい、使い物になりません。 解決策 普段通り utf-8 で開発を行いながら、shift_jis のファイル群も生成する Grunt タスクを作成しました。 以下のようなディレクトリ構造を想定しています。 module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); var iconvLite =
{ "name": "grunt_encoding", "version": "0.0.0", "description": "file encofing sample", "author": "svartalfheim", "license": "MIT", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-copy": "^0.5.0", "iconv-lite": "^0.4.3" } } var iconvLite = require('iconv-lite'); module.exports = function(grunt) { var pkg = grunt.file.readJSON('package.json'); // Project configuration. grunt.initConfig({ copy
最近SmashingMagにてマット・マーキスが書いたように、srcset属性は開発者がユーザー使っているデバイスのpixel密度によって表示する画像を指定することができます。
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
A Grunt Task to Measure and Grade Web Page Performance. By Andy Shora ← back to andyshora.com | Tweet this article Need a way to measure your page load time using Grunt? Or how about the number of requests your page makes, or the total page weight? I can't take the credit for the underlying library, but I've packaged up the YSlow library into a Grunt task so you can test the performance of your we
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツールとして TinyPNG は有名ですが、開発者向けの API も提供されています。 この TinyPNG API を使った画像の最適化を Grunt タスクとして実行できる 「grunt-tinypng」 をここのところ試していたんですが、いい感じだったので紹介。これまでは 「grunt-pngmin」 を使っていたのですが grunt-tinypng に移行して試しています。 grunt-tinypng ： marrone/GitHub TinyPNG ： Compress PNG images while preserving transparency ちなみに、TinyPNG API は処理する画像の数によって有料になりますので、その点は注意が必要です。現時点での価格設定は下記のようになっています。 Free プラン
一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行います。 オプション解説 以下のオプションが設定可能です。変更が必要なオプションのみ記載して下さい。記述がないオプションは、srcで指定されたCSSファイルのフォーマットでそのまま出力されます（そのため、ほぼ全てのプロパティに初期値を指定していません）。 なお、''は改行も空白も入れないことを意味しますので注意して下さい。 decl.before 型 String 初期値 なし CSSプロパティ名の
http://www.youtube.com/watch?v=1OAfGm_cI6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 GoogleのAddy OsmaniによるFuture of Web Appのキーノートスピーチです。 49分間 [Video]で下記の話題を全てまとめてます。フロント関連の便利ツールが一通り網羅されてます。おかげで、Yeoman (Yo/Grunt/Bower) の概要もすっきり理解できました。スライド（236枚）で確認されたい方はこちら。 Codekit Hammer Prepros Koala Mixture compass.app scout-app Yeoman / Grunt grunt-image: JPG/PNG/Gifを最適化して軽量化 grunt-
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
IE9以下で4096個以上のセレクターがあるとスタイルが反映されなくなるバグのチェックを行うGruntプラグイン、selector4096を作った。CSSプリプロセッサーでネストしつつ@extendするとぽんぽんセレクター増えていくので、最近はまめにチェックするようにしている。自己最多記録は3400くらいで、バグに引っかかったことはまだない。 npmで普通にインストールした後、Gruntfile.jsに以下のように書いて準備完了。 grunt.initConfig({ selector4096: { all: ['src/css/**/*.css'] } }); grunt.loadNpmTasks('grunt-selector4096'); 読み取り専用タスクなので、destとかは必要ない。 $ grunt selector4096:all 実行すると、src/css/以下のすべてのC
読書の秋、ご勉学の方はいかがでしょうか。 I’m your @t32k. 今日はCSSO (CSS Optimizer) – A CSS minimizer unlike othersの紹介だ。前回のCSSCombは単純にプロパティのソートをしてくれるものだったが、今回のはminimizerだ。 普段はSassの:compressed出力で最後デプロイしてるんだけど、もっとマシなものはないかなーと特には探してはないけど、@cssradarパイセンがCSSOがいいって言ったとか言わないとかあったので調べてみた。 ちなみにSassの:compressedはこんな感じで出力しているらしい。 Compressed style takes up the minimum amount of space possible, having no whitespace except that necessa
Gruntプラグインを紹介していくAdvent Calendarです。 メジャー/マイナー, 役立つ/役立たないもの問いません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![GitHub - buildingblocks/grunt-combine-media-queries: [DEPRECATED] A new version is managed here: https://github.com/frontendfriends/grunt-combine-mq](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e09101ebe9dfb2d0ed9c1f0578feabce9452d89/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fopengraph.githubassets.com%2F8c211702c9e1bcce5f9ed68217e0174fed8a7f736578106fca6e1e783d3e00ca%2Fbuildingblocks%2Fgrunt-combine-media-queries)
