Sassの@functionでサイズをコンバートする関数を自作すると、マークアップで少し手抜きできます。
レティーナディスプレイ対策もすっかり定番となり
Photoshopのデザインデータは大概×2サイズでできたものとなっているかと思います。
これを、マークアップのときサイズ変換するのが地味に面倒だったりします。
たとえば、デザイン上で36px(36pt)と指定されている文字は×0.5してこうなります。
.headline {
font-size: 18px;
}
これまで何の疑問もなくいちいち×0.5していましたが、functionを使えばそもそも計算しなくて済むことに気づきました。
このように値を半分にコンバートする関数を設定すれば
@function size($n) {
@return: $n * .5;
}
デザインデータの値をそのまま入力するだけでOK。塵も積もれば工数削減になります。
.headline {
font-size: size(36px);
}
SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。
これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。
参考：
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス
が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。
IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。
See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0
AngularJSで出力する一覧はorderByで並べ替えられます。
<div ng-repeat="item in datas | orderBy : date">
<div>{{item.id}}:{{item.name}} {{item.date}}</div>
</div>
複数条件で並べ換えたいときは、この書式で。
<div ng-repeat="item in datas | orderBy : ['id', 'date']">
<div>{{item.id}}:{{item.name}} {{item.date}}</div>
</div>
テキストエリアのplaceholderは、数値実体参照で改行コードのCRとLF書けば改行させられる…と思っていたら
Safariでは効かないことが判明。
<textarea placeholder="改行 させる"></textarea>
荒技でいくなら、属性値の途中でリアル改行させる手もあります。
<textarea placeholder="改行 させる"></textarea>
しかし、Safariでは効かないのか… うーん。
pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。
工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。
pointer-eventは、最新ブラウザでは実装されています。
Internet Explorer 10未満でサポート外となっているので、レガシーな環境へ対応が必要なクライアントワークでは使うことができません。
複数台あるMacで写真を共有したかったので
「写真」アプリの保存データであるフォトライブラリを共有ディスクに設置してみました。
がしかし。
公式のガイドでは、Optionキーを押しながら「写真」を起動すれば
「ライブラリ選択」というメニューが立ち上がるとあるのですが
これが何度やっても普通にしか立ち上がらない。
その時のシステム構成はこちら
Optionキー押下で「写真」起動でフォトライブラリを切り替えることはできませんでしたが
フォトライブラリデータから、開くアプリケーションで「写真」を選ぶと成功しました。
ファインダーで、「写真」のデータ元としたいフォトライブラリデータがあるディレクトリまで移動し
フォトライブラリデータの「このアプリケーションで開く」から「写真」を選択。
すると、写真アプリが起動し
選択していた新しいフォトライブラリの内容が表示されました。
あとは、公式ガイドにある手順で
環境設定からシステムフォトライブラリを切り替えれば操作完了です。
パソコンを初期化するなどの機会で、外部メディアへ秘密鍵のバックアップをとることがあるのですが
こうして保存してあった鍵を、外部メディアからコピー＆ペーストで復元すると、鍵を認識してくれなくなることがあります。
この場合、permissionが不正で秘密鍵へのアクセスができないパターンが濃厚なので
まずは、秘密鍵id_rsaのpermissionを600に指定してみると良いです。
$ chmod 600 ~/.ssh/authorized_keys
webpackというタスクランナーが良いと教えてもらったので、さわりだけ試してみました。
挑戦はしましたが、私の中ではこのようなふんわりした認識しかないので、解説は省略！
webpack自体については、既出のしっかりした記事が検索すればたくさん見つかりますので、そちらを参考にしてください。
現状のクライアントワークは、HTML+CSSでのコンテンツ制作をベースにJavascriptでの機能実装がほとんどなので
まずはHTML+CSSの快適さが気になる。
使用頻度の高いSassのコンパイル環境を作る手順を調べてみました。
過去の苦い経験から、納品後にちょっと手を加えたいからCSSの触りかたと場所を教えて…という連絡がないこともないので
webpackを使用しますが、SassはJavascriptではなくCSSとして書き出せるようにします。
参考記事：
Webpackで Browsersync + Sassコンパイルを試す
webpackを使ってsassをコンパイルできるようにしよう！
なお、私の記事は覚書と感想のようなものなので
環境構築の手順やポイントは参考記事のほうがためになります。どうもありがとうございました。
最近知ってしまった真実…
一部のブラウザで、CSSの強制折り返しが効かないケースがあることがわかりました。
* {
word-bleak: break-all;
}
こうしときゃ万能だろうという神話を信じていたのに、:（コロン）や/(スラッシュ)が連続している場合は折り返してもらえません。
2016年11月2日現在ではこうなっていました。
定番ライブラリのUnderscore.jsに、今更ながら手をだしてみました。
この短い指定でエスケープもその逆（アンエスケープ）もできるのは助かる！
_.escape(値)
_.unescape(値)