フロントエンドのアルバイトをしていたときのメモ

大学生の頃git,scss(compass),atomとか使ってフロントエンド書いていたときのメモ
compassあたりはもう使っている人はいないかな？

git

checkout

git checkout css：cssの変更を破棄する
git checkout .：全ての変更を破棄する
git checkout -：直前のブランチに戻る

他のブランチのファイルを取り込む

git checkout ブランチ名ファイルパス
例） git checkout \#200_hoge_redesign scss/hoge.scss

diff

git diff --name-only：一行のみ変更点を表示
git diff -- ファイルパス：ファイルの変更を確認
その他

log

git log --oneline：一行のみログの表示

amend

直前のコミット名を上書き
git commit --amend -m "新しいコミット名"

マージ済みローカルブランチ一括削除

git branch --merged | egrep -v '\*|develop|master' | xargs git branch -d

stash

作業を隠す
git stash：一時保存
git stash list：保存リストの表示
git stash apply：直前の保存を元に戻す
git stash apply stash@{0}：0を元に戻す

rebase

git rebase -i HEAD~~
参考１
参考２

絵文字

Emoji

正規表現での置換

1行以上の改行をなくす
置換前：^\r\n
置換後：``

置換前：\s+\r\n
置換後：\r\n
{　の前に空白を入れる
置換前：(\S){
置換後：$1 {
インデントを揃えたまま削除する
置換前：hogehoge\s+
置換後：``
メタ文字一覧

chrome

vim

操作	コマンド	備考
コピー	y
行をコピー(ヤンク)	Y	yyでも可
ペースト	p
現在位置にペースト	P
1文字削除	x	ヤンクに保存される
削除	d	ヤンクに保存される
カーソル以降を削除	D	ヤンクに保存される
行を削除	dd	ヤンクに保存される
元に戻す	u	ctrl+rで戻したものを戻す
行末に移動してインサートモード	A
検索	/hoge
下に再検索	n
上に再検索	N

atom

ファイルのパスをコピー
ctrl + shift + c
新しいファイルを開く：ファイルを閉じる
ctrl + n ： ctrl + w
エクスプローラーからファイルを開く
ctrl + o
ファイル検索
ctrl + p , ctrl + t
更新ファイルの検索
ctrl + shift + b
閉じたタブを開く
ctrl + shift + T
一行複製
ctrl + shift + d
一行削除
ctrl + shift + k
いい感じの選択
ctrl + d
インデントの追加・削除
ctrl + [・ctrl + ]
行をたたむ
+ alt
コマンドパレット
ctrl + shift + p
スタイルガイド
ctrl + shift + g
検索窓等をしまう
Esc

Packages

pigments
カラーコードに色付けしてくれる

SASS,コンパス

コンパイル
compass compile
強制コンパイル
compass compile --force

config.rbの生成

$ compass create --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "images"

config.rb

line_comments = true
Encoding.default_external = 'utf-8'
# ソースマップの生成
sourcemap = true

シェルスクリプト

連続したurlが存在するか確認する

連番のURLをurls.txtに書きだす。
seq -f "http://examle/help/%g.html" 0 400 > urls.txt

urlが404でないときurlをechoする

checkurl.sh

# !/bin/bash

for uri in `cat -`
do
  result=`curl -LI ${uri} -w '%{http_code}\n' -s -o /dev/null`
  if [ 404 != "${result}" ]; then
    echo "${uri}"
  fi
done

urls.txtをchech.shでURL確認してurl.listに書き込む。
cat urls.txt | sh checkurl.sh > url.list

; & && | ||の使い分け

Linuxコマンドを連続して使うには

備忘録

実態参照、エスケープ処理、正規表現、Unicode
メディアクエリ
【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう
(『ノンデザイナーズ・デザインブック』はデザインに関する名著らしい)
業務でよく使うコマンドたち
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら...
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？

いろんなエイリアスやパスの設定

solarized

~/.bashrc

## PATH
export PATH=$PATH:/c/Program\ Files\ \(x86\)/Google/Chrome/Application

# vi mode
set -o vi

# color
source ~/Desktop/sol.dark

# alias
alias ll='ls -l'                              # long list
alias la='ls -A'                              # all but . and

# color scheme
alias light='sed -i "s/^source\s~\/Desktop\/sol.\+$/source ~\/Desktop\/sol.light/" ~/.bashrc && bash'
alias dark='sed -i "s/^source\s~\/Desktop\/sol.\+$/source ~\/Desktop\/sol.dark/" ~/.bashrc && bash'

# shortcut
alias ch='chrome'
alias cde='. C:/Desktop/prac/test/sh/replace.sh'
alias atba='atom -m ~/.bashrc'
alias viba='vim ~/.bashrc'
alias soba='source ~/.bashrc'

# compass
alias cc='compass compile'
alias cw='compass watch'
alias cf='compass compile --force'
alias cfw='compass compile --force && compass watch'

# git
alias co='git checkout'
alias s='git stash'
alias sa='git stash apply'
alias sli='git stash list'
alias dif='git diff --name-only'
alias log='git log --oneline'
alias cle='git clean -f'
alias coal='git checkout css ; git clean -f'
alias coall='git checkout . ; git clean -f'

個人的なsolarized

sol.light

echo -ne   '\eP\e]11;#FDF6E3\a'  # Background   -> base3 背景
echo -ne   '\eP\e]10;#224b5a\a'  # Foreground   -> base00　通常文字
echo -ne   '\eP\e]12;#6d5000\a'  # Cursor       -> red
echo -ne  '\eP\e]4;0;#073642\a'  # black        -> Base02
echo -ne  '\eP\e]4;8;#002B36\a'  # bold black   -> Base03
echo -ne  '\eP\e]4;1;#DC322F\a'  # red          -> red
echo -ne  '\eP\e]4;9;#CB4B16\a'  # bold red     -> orange
echo -ne  '\eP\e]4;2;#859900\a'  # green        -> green
echo -ne '\eP\e]4;10;#586E75\a'  # bold green   -> base01 *
echo -ne  '\eP\e]4;3;#B58900\a'  # yellow       -> yellow
echo -ne '\eP\e]4;11;#657B83\a'  # bold yellow  -> base00 *
echo -ne  '\eP\e]4;4;#268BD2\a'  # blue         -> blue
echo -ne '\eP\e]4;12;#609e00\a'  # bold blue    -> base0 * フォルダとか
echo -ne  '\eP\e]4;5;#D33682\a'  # magenta      -> magenta
echo -ne '\eP\e]4;13;#6C71C4\a'  # bold magenta -> violet
echo -ne  '\eP\e]4;6;#2AA198\a'  # cyan         -> cyan
echo -ne '\eP\e]4;14;#93A1A1\a'  # bold cyan    -> base1 *
echo -ne  '\eP\e]4;7;#EEE8D5\a'  # white        -> Base2
echo -ne '\eP\e]4;15;#FDF6E3\a'  # bold white   -> Base3

sol.dark

echo -ne   '\eP\e]10;#839496\a'  # Foreground   -> base0
echo -ne   '\eP\e]11;#002B36\a'  # Background   -> base03
echo -ne   '\eP\e]12;#3C3C3C\a'  # Cursor       -> red
echo -ne  '\eP\e]4;0;#073642\a'  # black        -> Base02
echo -ne  '\eP\e]4;8;#002B36\a'  # bold black   -> Base03
echo -ne  '\eP\e]4;1;#DC322F\a'  # red          -> red
echo -ne  '\eP\e]4;9;#CB4B16\a'  # bold red     -> orange
echo -ne  '\eP\e]4;2;#859900\a'  # green        -> green
echo -ne '\eP\e]4;10;#586E75\a'  # bold green   -> base01 *
echo -ne  '\eP\e]4;3;#B58900\a'  # yellow       -> yellow
echo -ne '\eP\e]4;11;#657B83\a'  # bold yellow  -> base00 *
echo -ne  '\eP\e]4;4;#268BD2\a'  # blue         -> blue
echo -ne '\eP\e]4;12;#609e00\a'  # bold blue    -> base0 *
echo -ne  '\eP\e]4;5;#D33682\a'  # magenta      -> magenta
echo -ne '\eP\e]4;13;#6C71C4\a'  # bold magenta -> violet
echo -ne  '\eP\e]4;6;#2AA198\a'  # cyan         -> cyan
echo -ne '\eP\e]4;14;#93A1A1\a'  # bold cyan    -> base1 *
echo -ne  '\eP\e]4;7;#EEE8D5\a'  # white        -> Base2
echo -ne '\eP\e]4;15;#FDF6E3\a'  # bold white   -> Base3

ATOMのstylesheet

Settings → Packages → your stylesheet
個人的なスタイルシート

style.less

atom-text-editor .gutter {
  min-width: 0em;
}
.markdown-preview:not([data-use-github-style]) {
  color: #443431;
  tbody tr:nth-child(2n-1){
    background: antiquewhite;
  }
  th,td {
    border: 1px solid #d8a51c;
  }
  hr {
    margin: 2em 0;
    border-top: 2px dashed #d6b048;
  }
  h1 {
    line-height: 1.2;
    margin-top: 0.6em;
    margin-bottom: 0.5em;
    color: #1e2427;
  }
  code {
    background-color: #ffe18e;
  }
  a em {
    color: #92B558;
  }
}

.select-list ol.list-group {
	max-height: 500px;
	li:not(.selected) {
		transition: background-color 0.2s ease-out;
		&:hover {
			background-color: @background-color-selected;
		}
	}
}