В редакторах есть хоткеи, чтобы быстро открыть нужный файл. Не кликая мышкой по папкам в дереве проекта. Выглядит обычно так: нажимаете хоткей, открывается окошко, вы вводите туда примерное название файла, а редактор показывает подсказки. Можно листать их стрелками и жать энтер. В VS Code такое меню открывает Cmd+P.

Как заставить редактор писать код за вас? Используйте сниппеты. Это готовые куски кода, которые по короткой фразе раскрываются. В сниппетах есть табстопы — места, в которых вам обычно шаблонный кусок надо на свой заменить: имена переменных, названия классов, текст элемента, адрес картики и т.п. Между табстопами можно табом переключаться.

На видео выше я использую сниппет для цикла for. Ввожу for, в подсказке выбираю сниппет, нажимаю энтер. Слово for превращается в настоящее описание цикла.

Курсор встаёт после первой переменной i. Я печатаю вместо неё i, и index заменяется на i во всём сниппете. Жму таб и попадаю на переменную array. Пишу fruits. Снова жму таб, попадаю на element и пишу fruit.

Потом перехожу на следующую строку и пишу log — это у меня тоже сниппет, и слово log превращается в console.log();, а курсор сразу встаёт между скобками. И я просто пишу, что хочу вывести.

В редакторах бывают встроенные сниппеты, можно установить плагины с пачками сниппетов, и самое главное: можно писать свои сниппеты. Если вы часто пишете одно и то же, заведите сниппеты.

Мы обсудили пять базовых функций, о которых должны знать все разработчики. Надеюсь, на этой неделе вы стали использовать редактор эффективнее. Продолжайте изучать свой редактор сами. Познакомьтесь с хоткеями вашего редактора, с его уникальными фичами. Внедряйте их по чуть-чуть в свою повседневную работу.

Уменьшайте время, которое вы тратите на написание кода. Лучше потратить это время на обдумывание. А написание должно быть простым и быстрым.

Если вы ещё не придумали, чем заняться вечером в воскресенье, ловите пару головоломок. Взрывные задачи! 💣

Simple Time Bomb. Нужно обезвредить бомбу, перерезав провод. Но какой провод?
→ https://goo.gl/4pS4AH

Diffuse the bombs! Что, если у вас не одна бомба, а целых десять? И у каждой свой способ обезвреживания. Думаю, в процессе решения вы узнаете много нового: от декодинга base64 до патчинга встроенных объектов.
→ https://goo.gl/6KdWyE

Вы наверное уже слышали, что iTerm2 делает днс-запросы с текстом под курсором, чтобы определить, не ссылка ли это. Это можно было отключить в настройках, но никто про такую проблему не знал. В версии 3.1.1 эту опцию отключили по умолчанию.

Если вы пропустили, то вот подробности про днс-лукапы → https://goo.gl/sAsNXr

С обновлением завезли приятную фишку. Я люблю, когда новая вкладка или сплит терминала открываются в той же папке. Ну типа сидишь в ~/Project/work, открываешь новую вкладку, и в ней ты сразу в ~/Project/work. Эта опция раньше не работала в tmux-сессиях, а теперь наконец работает.

Tmux-интеграция в iTerm это когда окна и вкладки тмукса открываются как нативные окна и вкладки iTerm. Типа заходишь по ssh на сервер, говоришь там `tmux -CC`и открывается новое окно iTerm. В нём открываешь новую вкладку или ссплит — и ты всё ещё внутри ssh-сессии, всё ещё на сервере. И вот теперь даже в той же папке.

Видео про tmux+iTerm → https://goo.gl/WqH1NX

Ах да, папка-то настраивается вот где. Settings → Profiles → Your Profile → General

О собеседованиях верстальщиков.

Я собеседую фронтендеров в команду, часто веду интервью про вёрстку. У нас нет отдельных людей, которые верстают, поэтому нужно, чтобы разработчик верстал.

Сперва мне казалось, ну что тут собеседовать, мы же не стажёров нанимаем. Если уж человек два-три-пять лет в профессии, то верстать он умеет. Оказалось нет, верстать могут не только лишь все.

Я отвожу на теоретические вопросы полчаса. В теории стараюсь пообщаться на фундаментальные темы. И полчаса на практические задачи: предлагаю кандидату решить 3-4 задачи в кодпене.

В теоретической части для меня важны вот какие темы:

- CSS-селекторы: как рассчитывается их специфичность, круто если кандидат еще про скорость и механизм поиска элементов может рассказать;
- поток документа: что это значит, как ведут себя элементы в потоке, как вырвать элемент из потока;
- блочная модель: что это такое, как на неё влиять, что в неё входит, что нет;
- stacking context: как работает z-index для разных случаев, как создать новый контекст наложения.

Про селекторы мой любимый вопрос. Кто-то говорит про разряды. Типа, вес селектора это число, вот в этом разряде айдишники, в этом классы, тут теги. Такие обычно считают, что 11 классов перевесят один id.

Недавно у меня был кандидат, который который сказал, что вес селектора это забота не разработчика, а браузера. А разработчику надо знать, что чем селектор точнее, тем у него больше шансов повлиять на элемент. Например .a > .b тяжелее, чем .a .b.

Я считаю, что обсуждать такие фундаментальные вопросы важно. Если человек не понимает базовых принципов, как он будет разрабатывать? Сколько времени у него будет уходить на решение проблемы? Насколько хорошим будет код? На задачах не всегда это можно проверить: они обычно небольшие, к тому же кандидат мог решать конкретную подобную задачу раньше.

Если кандидат верстает давно, несколько лет, и не понимает таких фундаментальных вещей, то это тревожный звоночек. Человек уже долго работает с платформой, но не разобрался в базовых принципах. Как он будет разбираться в проекте, в задачах?

Вопросы, на мой взгляд, несложные. Если вы верстаете, а у вас какие-то пробелы в этих темах, советую в ближайшее время их восполнить. Тем более, если готовитесь к собеседованию!

Я эту картинку кидаю своим студентам, когда они оставляют комментарий рядом с очевидным куском кода. Комментировать надо то, что не понятно. И писать в каменте не что это, а зачем это. На вопрос «что это» код должен отвечать сам. Например, имя функции должно отвечать на вопрос, что делает эта функция, а имя переменной — что в ней лежит. Такой понятный код легче поддерживать.

Саша Беспоясов коротко пересказывает книгу «The Art of Readable Code» у себя в блоге. Книга про то, как писать понятный код. Он уложил самое важное в три поста. Ловите:

Первая часть → https://goo.gl/UrRpSv
Вторая часть → https://goo.gl/qfvzoB
Третья часть → https://goo.gl/BHpWVS

Оптимизация загрузки сайтов — Лекция Виталия Фридмана

Сейчас в HTML Academy заканчивается продвинутый интенсив по вёрстке, и один из последних разделов посвящён оптимизации скорости загрузки. Я студентам рекомендую посмотреть вот это видео Виталия Фридмана, основателя и главреда Smashing Magazine.

Виталий очень подробно разбирает, какие узкие места есть и как их оптимизировать. Лекция 2014-го года, в браузерах появились какие-то новые возможности за последние три года, но лекция всё ещё актуальна. За три недели они в Smashing Magazine ускорили загрузку до 0,5с.

Ещё он рассказывает, как показать клиенту, что скорость загрузки это важно.

→ https://goo.gl/JMgNjp

На хабре вышел перевод статьи про «синдром ученика». Среди комментариев к оригиналу и к переводу есть несколько интересных.

Статья про то, что люди (и сам автор) стремятся учиться, но не применяют полученные знания. Например, автор сделал много туду-приложений на разных языках и фреймворках.

Я как наставник на курсах по веб-разработке отчетливо вижу эту проблему. У меня было много студентов, которые подсели на курсы. Один весной закончил Epic Skills, осенью пришел в HTML Academy. Другой проходит курс по вёрстке третий раз, чтобы сделать еще один проект под контролем наставника. Третий прочитал три умных книжки вместо того, чтобы писать код.

После некоторого порога изучение технологий больше не прибавляет вам ценности. Вы просто накачиваетесь знаниями, но не получаете достаточно опыта.

Чтобы стать хорошим программистом, нужно постоянно писать код. Если вы в планируете начать карьеру, то не тормозите: изучите основы и ищите работу. В процессе работы вы обнаружите, чего именно вам не хватает. Тогда это и изучайте. Нет смысла изучать паттерны проектирования, когда вы со скрипом решаете задачи про поиск максимума в массиве.

Изучайте то, что сделает вас сильнее прямо сейчас, или что дополнит вашу картину мира. И не забывайте про практику.

https://goo.gl/jMsn9T

Если вы соскучились по кодварзу, то вот вам две задачи на кодирование и декодирование данных.

Кодировка Base64 → https://goo.gl/U9BjZU
Кодировка ASCII85 → https://goo.gl/2p5qb8

В решениях Base64 встречаются решения через nodejs Buffer. Но по-моему, гораздо интереснее реализовать алгоритм кодирования со всякими там битовыми сдвигами. Про ASCII85 убойная задача, подсказывать не буду :)

Перед решением перечитайте какую-нибудь википедию про эти кодировки ;)

Вчера в твитере SilentImp поделился классным расширением для браузера (скриншот на картинке выше). Превращает подключение зависимостей в исходниках на гитхабе в ссылки на подключенные модули. Работает для npm-модулей и для локальных модулей, которые импортируются по относительному пути. Если у вас какие-то там настройки вебпак-резолвера, расширение их конечно не поймёт :)

Кроме npm поддерживает Go, Ruby, Python и всё такое.

https://twitter.com/SilentImp/status/940711754425880576

Тихо и незаметно открылась регистрация в Школу разработки интерфейсов. Это крутые и бесплатные курсы по фронтенду в Москве, которые проводит Яндекс. Длятся они три месяца. В этом году они начинаются в марте. Иногородним студентам оплачивают проезд и проживание в хостеле. Нужно только поступить.

Тестовое задание непростое, но вполне решаемое. Первая задача про поиск багов в уже написанном Nodejs-приложении. Вторая — на вёрстку макетов. И третья — про написание маленького SPA. У каждой задачи есть подробное описание и критерии, по которым будут оценивать решения.

Приём работ закроется между 15 и 31 января — как только наберётся достаточное количество претендентов с хорошо выполненным заданием. Это значит, что к 15-му января нужно успеть. Начинать пора уже сейчас!

→ https://goo.gl/cpE1nB