とあるサイトの高速化についてフロントエンドでやったことまとめ。 | Toro_Unit

2015/11/27 736 users Toro_Unit フロントエンド 大小 高速化 急増

業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われ... 続きを読む

自分のHTMLやCSSのコーディング環境がベストか見直してみよう！作業を効率化する技術やツールの導入・使い方がよく分かるオススメの本 | コリス

2015/04/28 93 users コリス less BEM Git Sass

SassやLESSなどのCSSプリプロセッサ、OOCSSやBEMを使ったCSSの設計、Gitでのバージョン管理、gulpを使ったタスクランナー、Bootstrapなどのフレームワークの導入など、ここ数年でコーディング業界にさまざまな新しい技術やツールが登場しました。 なんだか便利そうなのは分かるけど、どこから手をつければよいのか分からない。似たようなものがあるけど、どれが自分にあっているのか？ コ... 続きを読む

俺的フロントエンド開発

2015/02/26 142 users フロントエンド開発 変数 エディタ JSフレームワーク CSS

Transcript 1. 俺的フロントエンド開発 2015/02/26 2. • HTML/CSSプリプロセッサ • 静的サイトジェネレータ • JSフレームワーク • エディタ アジェンダ 3. HTML/CSSプリプロセッサ • HTMLとかCSSとか生で書くのが面倒くさい • 少しでもタイプ数を減らして書きたい • あわよくば変数とかループとか使いたい 4. HTMLプリプロセッサ • H... 続きを読む

CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog

2014/12/06 62 users rework PostCSS CSSプリプロセッサー CSS

2014-12-07 CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサ... 続きを読む

Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開 | Another Sky

2014/02/17 55 users CSS grunt.js another sky 整形 公開

一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行い... 続きを読む

今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL

2013/12/01 353 users りんど Sass MOL コンパイル Grunt

SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的... 続きを読む

CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ - Mitsu.log();

2013/04/13 79 users Co-Edo テー クックパッド CSS Nite パターン化

2013-04-13 CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ 4月4日に行われたCSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは！！と思い。テー... 続きを読む

昔のCSSをLessとかSassにしたいの | WP-D

2013/02/15 55 users Sass less Stylus バカヤロー WP-D

昔のCSSをLessとかSassにしたいの ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを... 続きを読む

CSSプリプロセッサでスタイルガイド - inkdesign

2012/12/07 62 users スタイ CSS Preprocessor 親和性 ツール 影響

07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイ... 続きを読む

はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog

2012/03/19 247 users tikeda CSSメタ言語 近年 導入 はてな

こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか ... 続きを読む