FE Meetup #2

1. Общие принципы: Use the keyboard, Luke
    Упор на горячие клавиши. Мышь — медленно, клавиатура — быстро. Модель GOMS это подтверждает.

    Что такое модель GOMS?
    Подход к количественному анализу моделей интерфейсов.

    Перевод: правила для целей, объектов, методов и выделения (the model of goals, objects, methods and selection rules).
    Позволяет предсказать, сколько времени потребуется опытному пользователю на выполнение конкретной операции.

    K = 0,2 c — нажатие клавиши;
    P = 1,1 c — указание курсором;
    H = 0,4 с — переключение между клавиатурой и мышью (и обратно);
    M = 1,35 с — ментальная подготовка к следующему шагу.

    Время может варьироваться, однако, метод прекрасно подходит для сравнительного анализа задач.

    Источник: Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем» — библия проектировщика
    интерфейсов.

2. Запуск приложениЙ, работа в OS X
    2.1 Spotlight и Alfred

        Достоинства Spotlight: встроен в OS X. Быстрый.
        Достоинства Alfred: вагон и тележка фишек, кастомизируемые поиски, синхронизация настроек через Dropbox, и всё, что душе угодно.

        Демонстрация:
            1. Запуск Фотошопа;
            2. Поиск Шульца в 2гис;
            3. Очистка корзины / блокировка компьютера;
            
            Bonus Track: Large Type

    2.2 Плагины QuickLook: https://github.com/sindresorhus/quick-look-plugins
    2.3 defaults write com.apple.finder QLEnableTextSelection -bool TRUE; killall Finder — позволяет выделять текст в QuickLook
        (запускаем один раз и радуемся).

3. Написание кода
    3.1 Cниппеты
        Помимо горячих клавиш, следует использовать сниппеты: меньше букв — больше кода.
        Важно иметь одинаковые сниппеты: это позволяет сесть за компьютер товарища и, не напрягаясь, быстро ему помочь.

        Примеры:
            JS:
                l → console.log(|);||
                r → return |;||
                if → if (|) {||}
                f → function(|) {||}
                fn → function [someName](||) {|||}
            CSS:
                dib → display: inline-block;|
                oh → overflow: hidden;|
                l → left: [0];||
                pa → position: absolute;|
            HTML:
                div → <div class="|">||</div>
                span → <span class="|">||</span>
                a → <a href="[#]" class="||">|||</a>

    3.2 Emmet (в прошлом известен, как Zen Coding)
        Лично я этим не пользуюсь, тут лучше расскажет Тим.

    3.3 Tern.js
        Помогает писать JS-код в редакторах вроде Sublime Text и Vim (не IDE).
        Возможности:
            1. Переход к определению переменной / функции (jump to definition);
            2. Поиск всех упоминаний (find references);
            3. Переименование переменных;
            4. Умное автодополнение.

4. Поиск документации
    4.1 Devdocs.io — бесплатно, онлайн;
    4.2 Dash (Aviable in Mac App Store) — бесплатно (с ограничением по времени, а-ля Sublime Text), оффлайн, умеет интегрироваться с редакторами и Альфредом.
    4.3 Keyword Searching
        Демонстрация: поиск в Яндексе, Github, VK Audio

5. Работа в Терминале
    5.1 Навигация и редактирование
        1. Перемещение на слово назад: Esc + b (мнемоника: back);
        2. Перемещение на слово вперёд: Esc + f (мнемоника: forward);
        3. Перемещение на начало строки: Ctrl + a;
        4. Перемещение на конец строки: Ctrl + e (мнемоника: end);
        5. Удаление слова перед курсором: Ctrl + w;
        6. Удаление до конца строки: Ctrk + k;
        7. Отменить последнее редактирование: Ctrl + _;
        8. Очистить терминал (аналог команды clear): Ctrl + l
        9. Поставить курсор куда угодно: Alt + Click.

    5.2 ZSH
        Достоинства:
            1. Общая история между всеми запущенными экземплярами ZSH;
            2. Мощное дополнение команд и подкоманд;
            3. Автокоррекция комманд;
            4. Дополнение и разворачивание путей. Пример: /u/p/de/o <Tab> → /Users/porqz/Desktop/online4;

        Популярный фреймворк для управления конфигурацией ZSH — oh-my-zsh, содержит кучу плагинов и плюшек.
        
    5.3 Алиасы ZSH (Bash)
        alias g="git"
        alias l="ls -la"
        alias 3="cd path/to/project/online3"
        alias 4="cd path/to/project/online4"
        alias j="cd path/to/project/JSAPI"

    5.5 Алиасы git
        b  = branch
        d  = difftool
        s  = stash
        st = status -s
        a  = add
        aa = add .
        ap = add -p
        c  = commit -m
        co = checkout
        p  = push
        l  = pull
        lr = pull --rebase
        cp = cherry-pick
        ri = rebase -i
        r = rebase
        f = fetch
        cl = clone

    5.5 Поиск по файлам: grep
        Частоиспользуемые аргументы: 
            -r — рекурсивный поиск;
            -l — выводить только имена файлов (а не их содержимое);

        Примеры:
            1. Требуется найти все JS-файлы в текущей директории, которые содержат строку «ie-shit»:
                grep -rl "ie-shit" . | grep js

            2. Требуется найти все не JS-файлы, которые содержат строку «ie-shit»:
                grep -rl "ie-shit" . | grep -v js

            3. Требуется найти все не JS-файлы, которые содержат строку «ie-shit», и открыть их в редакторе по умолчанию:
                open `grep -rl "ie-shit" . | grep -v js`

            Bonus Track: Найти все JS-файлы в текущей директории: find . -name "*.js"

6. Работа в ФШ
    На все случаи жизни требуется ограниченное количество горячих клавиш.

    v - Move Tool
    m — выделение
    i - пипетка и линейка

    Хитрость: настроить ФШ таким образом, чтоб сочетание Cmd + Shift + I открывало окно Blending Options.