ReworkとPostCSS
AutoprefixerやMyth経由で話題になったRework。そしてAutoprefixerが乗り換えたPostCSS。両者はどのようなことに主眼を置いているライブラリなのか、SassやLESSとの関係はどうなのか、そしてどのようなツールを書く時にそれらを使うべきなのだろうか。 ReworkはCSSをプリプロセスするためのライブラリということになっている。サポートされているかどうかよくわからない最先端の標準仕様のドラフトに従って書かれたCSSをブラウザーがちゃんと解釈できるようにするとか、特殊な記法を展開するとか、だ。こういった現実世界ではうまく動かないCSSをプリプロセスしてちゃんと動くCSSに変換するツールを作るためのものということになる。 SassやLESSと同じ立ち位置のものを作るためのものなので、共存させることにはあまり意味が無い(まったく無いわけではない)。現状のSassや
入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
頭の固いウェブ専門家
初心者が犯しがちなウェブデザインの間違いという記事を読んだ。だいたいその通りで間違ってはないんだけど、こういった積み重ねた知識や記憶は、動きが速いウェブの世界では重石にもなる。あまり先入観を持たないように、頭の硬いウェブ専門家にならないように、することもまた大事だ。 昨日言われていたことが今日は違うとか良くある。そして大抵の意見には見るところ・学ぶところがあったりもする。ユーザビリティ的にはアンチパターンではあってもグロースハックとしては成立するとか、そこまでではなくてもとりあえず大切なお金にはなるとか。 マウスオーバーでズームする広告、ものすごい効果でびっくりする。
rel="canonical"はhead要素の先頭に置いてね
Googleでのrel="canonical"の扱いについての中の人の話。rel="canonical"が適切ではないURLを指していた場合に、Googleとしては無視したいし、多くの場合無視するので、万全を期すのなら(「If you really want to be safe」)head要素の先頭に書けと言っている。わかるけどHTMLの書き方が検索エンジンの意向に左右される世の中は嫌だなぁ……。 こういったネガティブなURL評価だけでなく、rel="canonical"のhref属性の値がスラッシュで始まる相対URLで書いてあれば信用してくれるとか、そういうポジティブなURL評価も欲しいですね。要は違うドメインを指しているrel="canonical"の評価を下げてくれれば、場合によっては無視してくれれば、良いんじゃないかとかそんな感じです。まぁユーザーのページがサブドメインで切られて
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト
Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト 最近になってGoogleのClosure Compiler Serviceを良く使うようになった。今まで使っていたYUI Compressorと比較すると、複数のJavaScriptファイルをまとめて圧縮出来ることと圧縮にとどまらない最適化を行うことも出来ることがメリットで、CSSの圧縮には対応していないことがデメリット。ウェブのUIで圧縮するのは面倒になってきたので、REST APIを利用してウェブのUIと同じようにコメントで設定を記述してコンパイルするPerlスクリプトを書いてみた。タイトル長い！ #!/usr/bin/perl # gccs.pl - Compile your JavaScript code with Google Closure Compi
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
Version Control for Designers
このドキュメントは Version Control for Designers の日本語訳であり、元のドキュメントと同じくソースコード管理に予備知識がまったくない人を想定している はじめに リポジトリの構造 ブランチ 作業の流れ ブランチを切る その他の便利なツール ベスト・プラクティス はじめに What have you done for me lately? バージョン管理、ソース管理やリビジョン管理とも呼ばれているものはあらゆる開発に必須である。なぜなら基本的にはメールやインスタント・メッセンジャーと同じようなコミュニケーションをとることができるツールでありながら、人々の会話ではなくソースコードを元にして機能することができるからだ。 バージョン管理 他のプログラマと簡単に意思の疎通を図ることができる 開発チームでコードを共有することができる デプロイしている「製品」バージョンを別個
Version Control for Designersを訳した
Gitを使い始めた時に読んだドキュメントのひとつであるVersion Control for Designersを日本語に訳した。for Designersとタイトルについているが、そのことは忘れて読んだ方が良いと思う。 このドキュメントは開発者向けではない。かといってデザイナ向けの特別な何かがあるわけでもない。主にターゲットになるのは、 バージョン管理システムをほとんど触ったことがない人 ちょっとは使っているけどブランチとか良くわからない人 他のを覚えるのがやっとでGitとか言われても困るという人 あたりになると思う。内容はGitの基本的なコマンドの使い方を通して、バージョン管理システムをざっと説明するとかそういう感じ。これを読めばあとはヘルプだけで良いというようなものではないが、Gitを始める時のとっかかりにはなると思う。 deployとかcodebaseとかうまい訳語が思いつかない。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
