マークアップのアルバイトをしていたときのメモ
フロントエンドのアルバイトをしていたときのメモ
大学生の頃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
絵文字
正規表現での置換
1行以上の改行をなくす
置換前:^\r\n
置換後:``
置換前:\s+\r\n
置換後:\r\n
{ の前に空白を入れる
置換前:(\S){
置換後:$1 {
インデントを揃えたまま削除する
置換前:hogehoge\s+
置換後:``
メタ文字一覧
chrome
-
Developer tools
ctrl+shift+I
or F12
-
タブの復元
ctrl+shift+T
シークレットモード
ctrl+shift+N
:リンクがvisitedでない状態を確認したいときなどに便利
vim
ctrl+shift+I
or F12
ctrl+shift+T
シークレットモード
ctrl+shift+N
:リンクがvisitedでない状態を確認したいときなどに便利
操作 | コマンド | 備考 |
---|---|---|
コピー | 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
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
pigments
カラーコードに色付けしてくれる
SASS,コンパス
コンパイル
compass compile
強制コンパイル
compass compile --force
$ compass create --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "images"
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する
#!/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
; & && | ||の使い分け
備忘録
実態参照、エスケープ処理、正規表現、Unicode
メディアクエリ
【初心者】デザインってなんだ?「デザイン」の概念と、4つの基本原則を知ろう
(『ノンデザイナーズ・デザインブック』はデザインに関する名著らしい)
業務でよく使うコマンドたち
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら...
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな?
いろんなエイリアスやパスの設定
## 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
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
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
個人的なスタイルシート
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;
}
}
}
Author And Source
この問題について(マークアップのアルバイトをしていたときのメモ), 我々は、より多くの情報をここで見つけました https://qiita.com/kodama321/items/ccfe40a85194a955e1c9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .