マークアップのアルバイトをしていたときのメモ

# フロントエンドのアルバイトをしていたときのメモ
大学生の頃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 -- ファイルパス`：ファイルの変更を確認
[*その他*](http://qiita.com/shibukk/items/8c9362a5bd399b9c56be)

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

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

## マージ済みローカルブランチ一括削除
`git branch --merged | egrep -v '\*|develop|master' | xargs git branch -d`  

## stash
[*作業を隠す*](https://git-scm.com/book/ja/v1/Git-%E3%81%AE%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB-%E4%BD%9C%E6%A5%AD%E3%82%92%E9%9A%A0%E3%81%99)
`git stash`：一時保存
`git stash list`：保存リストの表示
`git stash apply`：直前の保存を元に戻す
`git stash apply stash@{0}`：0を元に戻す

## rebase
`git rebase -i HEAD~~`
[*参考１*](https://qiita.com/takke/items/3400b55becfd72769214)
[*参考２*](https://iwb.jp/git-commit-rebase-squash/)

## 絵文字
[*Emoji*](https://www.webpagefx.com/tools/emoji-cheat-sheet/)

# 正規表現での置換

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

置換前：`\s+\r\n`
置換後：`\r\n`
**{　の前に空白を入れる**
置換前：`(\S){`
置換後：`$1 {`
**インデントを揃えたまま削除する**
置換前：`hogehoge\s+`
置換後：``
[*メタ文字一覧*](http://www.megasoft.co.jp/mifes/seiki/meta.html)


# chrome
* **Developer tools**  
`ctrl+shift+I` or `F12`  
* **タブの復元**  
`ctrl+shift+T`  
* **シークレットモード**
`ctrl+shift+N`：リンクがvisitedでない状態を確認したいときなどに便利  

* [*DevToolsショートカット一覧*](https://developers.google.com/web/tools/chrome-devtools/shortcuts?hl=ja)

# vim
|操作|コマンド|備考|
|:--|:--:|:--|
|コピー|y||
|行をコピー(ヤンク)|Y|yyでも可|
|ペースト|p||
|現在位置にペースト |P||
|1文字削除|x|ヤンクに保存される|
|削除|d|ヤンクに保存される|
|カーソル以降を削除|D|ヤンクに保存される|
|行を削除|dd|ヤンクに保存される|
|元に戻す|u|ctrl+rで戻したものを戻す|
|行末に移動して<br>インサートモード|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*](https://atom.io/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"
```  

```ruby: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する

```sh: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コマンドを連続して使うには*](https://qiita.com/egawa_kun/items/714394609eef6be8e0bf)

# 備忘録

実態参照、エスケープ処理、正規表現、Unicode   
メディアクエリ   
[*【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう*](http://wp-e.org/2014/03/09/995/)
(『ノンデザイナーズ・デザインブック』はデザインに関する名著らしい)  
[*業務でよく使うコマンドたち*](https://qiita.com/mint__/items/32649e2431ec967589c1#_reference-4edf71ba28bcfb0a5e00)  
[*もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら...*](https://qiita.com/ryosukemaehira/items/3af1196b9947dec79ed5)  
[*2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？*](https://qiita.com/rana_kualu/items/96b303307d6435aedf8b)  


# いろんなエイリアスやパスの設定  
[*solarized*](https://github.com/mavnn/mintty-colors-solarized)

```bash:~/.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  


```sh: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
```

```sh: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`  
個人的なスタイルシート

```scss: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;
		}
	}
}
```