環境を整える

[Mac (Terminal)]
不可視ファイル表示
  • defaults write com.apple.finder AppleShowAllFiles TRUE
  • killall Finder
コマンドラインツール
MacOSでfinderからファイルのパスを簡単にクリップボードにコピーする
QuickLook
  • BrushViewQL
  • QLColorCode
  • QLMarkdown
  • QLStephen
  • QuickLookCSV
  • QuickLookJSON
  • qlImageSize

[Soft]
MAMP
Homebrew
  • /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
Sass

[nodejs]
 
nodejs
bower
browserify
gulp

gulpプラグイン
<CSS>
gulp-sass 又は gulp-ruby-sass 又は node-sass
gulp-plumber ※scssのコンパイルエラーを止めない
gulp-autoprefixer
gulp-csscomb ※CSSプロパティの順番整理
gulp-frontnote ※スタイルガイド作成
<JS>
gulp-concat ※jsファイル結合
gulp-uglify
gulp-browserify ※モジュール導入
<Other>
gulp-notify ※タスク完了時に通知
gulp-sourcemaps ※ソースマップ作成
gulp-pleeease

Font
Ricty Diminished
Migu 1M

Atom setting
Font
  • “Migu 1M”
  • “Ricty Diminished”
Theme

Atom plugin
  • Japanese Menu
  • japanese-zen-han-convert
  • highlight-line
  • highlight-selected
  • indent-guide-improved package
  • Minimap
  • minimap-autohide
  • file-icons
  • tag
  • Emmet plugin Atom editor
  • color-picker
  • atom-project-manager
  • atom-beautify
  • autocomplete ※
  • tree-view ※
  • atom-terminal
※デフォルト

Atom snippet
別ファイルで。

Photoshop CS6
グループレイヤーフォルダ書き出し
カット&スライス

Dreamweaver
DreamweaverでSass環境を整える
Emmet

CSSのanimationやtransitionの終了をJavascriptで検知する

簡単なサンプルを作成。
まずはHTML。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
<script src="zoom.js" charset="utf-8"></script>
</head>
<body>
<button type="button" id="btn">btn</button><br>
<div class="container">
	<div class="box">
		<div class="inner"></div>
	</div>
</div>
</body>
</html>

つづいてCSS。ボックスが中心に表示されるように設定。

button {
	font-size: 16px;
}

.container {
	position: relative;
	vertical-align: top;
	position: relative;
	width: 480px;
	height: 480px;
	border: 1px solid #ddd;
}

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200px;
	height: 200px;
	background: #99b1ee;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform   : translate(-50%, -50%);
	-ms-transform    : translate(-50%, -50%);
	transform        : translate(-50%, -50%);
	-webkit-transition: all 1s ease 0s;
	transition        : all 1s ease 0s;
}

.box.active {
	width: 300px;
	height: 300px;
}

最後にJS。

$(function() {
	var transitionEndEvents = [
		'webkitTransitionEnd',
		'mozTransitionEnd',
		'oTransitionEnd',
		'transitionend'
	];
	var animEnd = transitionEndEvents.join(' ')

	$('.box').on(animEnd, function() {
		alert('done!');
	});
	
	$('#btn').on('click', function() {
		var $el = $('.box');
		if ($el.hasClass('active')) {
			$el.removeClass('active');
			return false;
		}
		$el.addClass('active');
	});
});

CSSの.activeで、widthとheightを変更しているので、完了後のアラートは2回表示さる。