ScrollReveal 使うと楽しいよねー。
作ってて楽しいのは2系の方かもしれんねー。
HTMLに書いてたし、直感的やもんねー。
ScrollReveal.jsって楽しいよねー
作ってて楽しいのは2系の方かもしれんねー。
HTMLに書いてたし、直感的やもんねー。
作ってて楽しいのは2系の方かもしれんねー。
HTMLに書いてたし、直感的やもんねー。
作ってて楽しいのは2系の方かもしれんねー。
HTMLに書いてたし、直感的やもんねー。
height auto でも transitionさせたい
height: 0; から height: auto; を行ったり来たりとか、
height: Xem; からheight: auto; を行ったり来たりするときにも、transitionかけたいけど効かないじゃないですかー。
冷静に探したらありましたですよ。
CSS3 transition height 0 to auto
max-height にまあ安全な大きめの数値入れとけば一応transitionかかる。
けれども、あまり巨大な数値を入れておくと、
そこから戻ってくるイメージなんで、初期の反応がえらい鈍くなる。
（※詳しくはよく知らない）
だもんで、duration も短めで、巨大すぎないまあ安全な大きめの数値入れとくのがベターか。
当たり前のとこでハマるjQuery
blog書くまでもないけど・・・。jQueryは既に世に出て結構時間が経っている。
検索して引っかかるのが今のバージョンで動くとは限らない。んでjQuery1.12で動かなかったセレクタの例↓
|
1 2 3 |
$('a[href^=#]').click(function() { |
こうが正しい↓
|
1 2 3 |
$('a[href^="#"]').on('click',function(){ |
ドロワーメニューfixedでヘッダーもfixedなとき
Slidebars使っときーというメモダウンロードすると、examplesフォルダがあるんで、その辺よー見ときーオレfixed-positions.htmlにほぼ答えがあるあとはanimation-styles.htmlも見ときー
IE9対応でwindow.matchMediaが使えない時
完全にこのBlogのこと忘れてた。講座でBlogはーとか言ってて全く書いてないのもアレなんで久々のIE9対応、window.matchMediaも使えない。やり方忘れとったんでメモメディアクエリで表示切り替えしてる部分があると思うので
まあ下記のようなイメージで
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { $(window).on('load resize', function(){ if ( $('#mdContent').is(':visible') ) { console.log('md'); } else if ( $('#smContent').is(':visible') ){ console.log('sm'); } else if ( $('#xsContent').is(':visible') ){ console.log('xs'); } }); }); |
しかし、タスクランナーとかな慣れきってたのか、直にcssとかゴリゴリ書くの意外と大変
はじめてのCoffeeScript
いまさらながらCoffeeScript書き出している。たった数行の動いているJavaScriptをCoffeeScriptにしようとしたら、動かなかった。公式サイトには、CoffeeScript→JavaScriptはあるが逆はない。ググったら下記のサービス発見
それでも解決できなかった。ちなみに下記のようなコード
|
1 2 3 4 5 6 7 8 9 10 |
var myApp = angular.module('myApp', []); var myController = myApp.controller ('myController',function($scope){ $scope.change = function(){ //処理 } }); |
色々ググッてみてたら、先人の方のありがたい記録を発見
んでこうなって動いた
|
1 2 3 4 5 6 7 8 9 10 11 12 |
'use strict' angular.module('myApp',[]) .controller 'myController',[ '$scope' ($scope) -> $scope.change = -> #処理 ] |
動いて嬉しかったので、思わずブログに書いた。&よく使いそうなんでメモ。
Bracketsが相当使えるんじゃないかと
SublimeText と恋に落ちてたんであまり触ってなかったんだけど、Brackets は相当使えるように進化していると思うので、しばらくは浮気しようと思います。
Brackets のポイント
-
Dreamweaver CCのExtract なあれ PSDデータから色々する奴
-
クイック編集（インライン要素）
簡単にいえば、デベロッパーツールが凄く賢くなった感じ。
Cmd-Eで該当部分のスタイルとかがインラインで出てくる。
こちらとしては、ファイルのタブも遷移しなくていいので楽。
-
ライブプレビュー
元々CSSEditを愛してたので、最近の状況に対応したライブプレビューは嬉しい。
タスクランナー設定するまでもないようなモノでもライブプレビュー。
オレオレ設定等
EmmetのExpandをCtrl-Eにした
ちなみに自分はMac。他のエディタでもCtrl-EでExpandしてるんで合わせたかった。
Tabを当ててる人はEmmetの設定で、チェックボックス入れるだけでいい。
キーバインドをSublimeTextと合わせた
https://github.com/adobe/brackets/wiki/User-Key-Bindingsここに書いてある通り
ユーザーキーマップはこうなった
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings", "overrides": { "Cmd-Shift-L": "edit.splitSelIntoLines", "Ctrl-Shift-Up": "edit.addCursorToPrevLine", "Ctrl-Shift-Down": "edit.addCursorToNextLine", "Cmd-Shift-D": "edit.duplicate", "Ctrl-Shift-K": "edit.deletelines", "Cmd-L": "edit.selectLine", "Cmd-D": "cmd.addNextMatch", "Cmd-Opt-1": "cmd.splitViewNone", "Cmd-Opt-2": "cmd.splitViewVertical", "Cmd-Opt-Shift-2": "cmd.splitViewHorizontal", "Ctrl-G": "navigate.gotoLine", "Cmd-Opt-Right": "navigate.nextDoc", "Cmd-Opt-Left": "navigate.prevDoc", "Cmd-R": "navigate.gotoDefinition", "Cmd-P": "navigate.quickOpen", "Ctrl-E": "io.emmet.expand_abbreviation" } } |
最後の行がEmmetのキーバインドでその他はSublimeTextと合わせる用
エイリアスに追加すると便利:忘れてたので、2015.1.2追記
atomなんかは、何もしなくても、ターミナルから
|
1 |
atom hoge.futa |
とか
|
1 |
atom . |
とかでatomで開けて便利なんだけど、Bracketsはできない。 正しくは、Terminalからファイル名を指定してBracketsを開く – Qiita のようにシェルスクリプトかな？と思って試したけどうまく動いてくれなかった。 「じゃあ、単なるエイリアスでいいか」って感じで、.bash_profileに
|
1 |
alias brackets="open -a /Applications/Brackets.app" |
って追記した。
|
1 |
brackets hoge.futa |
とか
|
1 |
brackets . |
とかでBracketsで開けて便利になった。 しかし、bracketsは打つのがダルいな。bra位にするかな。
Sublime Text で括弧の中だけ選択がどうも
完全に自分用のメモ
sublime-expand-region がうまく動かせんな〜って思ってたけど、
しばらくというかずっと放置してました。
今日ちょっと見なおして、
英語キーボードで、Karabiner とか使ってたんで、
どうもcmd+shift+spaceが、言語入力切り替えに取られちゃって
うまく動いてなかったようだったんで、
キーバインド-ユーザ で
{ “keys”: [“super+shift+m”], “command”: “expand_region” }
ってな具合でspaceの代わりにmで妥協。
node.jsやらnpmやらgruntやらインストールしようとしてはまったのでメモ
もやは何日も前に、インストールしようとしてハマったのでメモ。
※だいぶ前の事なので色々あやふやｗ
結論
Mavericksにしてから、XcodeのCommand Line Toolsがちゃんと入ってなかったらしい。
先に、ちゃんとCommand Line Tools入れないかん！
経緯
Homebrewでnode.jsやらnpmの最新のをインストールしようとしても
ErrorやらWarningだらけでなんのこっちゃ？と
ErrorやらWarningだらけでなんのこっちゃ？と
右往左往しよったんですが、
たぶんその間にbrew doctorもしたかもだけど、それらしきこと書いてなかった気がする。
たぶんその間にbrew doctorもしたかもだけど、それらしきこと書いてなかった気がする。
もしかして、MavericksにしてからあんまりHomebrewとかいじってないぞとか思って、
XcodeのCommand Line Tools入れたら、ちゃんとインストールできたって話。
結局、Homebrewごとインストールしなおして、綺麗になったｗ
Twenty Fourteen
Twenty Fourteen 使うなら
Jetpack か Slim Jetpack じゃないの？
タイルギャラリーとかカルーセルとか使いたいやん。
デモで使ってあるやん。