Артём Горбунов написал книгу «Типографика и вёрстка». Там он формализовал правила, которыми руководствуется в вёрстке (не в смысле разработки, а в смысле расположения элементов на странице). Я думаю, всем фронтендерам стоит понимать, как устроена композиция на странице, чтобы работать лучше. Подписка на книгу стоит 400р в первые три месяца — дорого, но книга действительно полезная.

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

→ https://goo.gl/eFN8jo

Привет! В пятницу была pitercss_conf. Вы ходили? Я да :) Очень понравилась организация: всё было отлично спланировано, площадка уютная, в перерывах между докладами можно было поиграть на старых компах в старые игры, поучаствовать во всяких конкурсах и выиграть призы. Футболки, блокноты, зарядки-катушки для телефона... И конечно значки и наклейки.

Конференция проходила целиком на английском (все доклады, вопросы, и всё-всё-всё), и пять из восьми докладчиков не говорили по-русски. Кажется, это первая международная CSS-ориентированная конференция в России. По ощущениям было около 300 человек. Организаторам огромное спасибо. Надеюсь, в следующем году получится не менее здорово!

Доклады были интересные и даже зажигательные :) Смотрите дамп текстовой трансляции → https://goo.gl/Qf6F6y

Пожалуй, самой интересной темой доклада был проект Houdini. Про это рассказывал Патрик Кеттнер из Майкрософта, из команды Edge. Вот только мне было тяжело понимать речь Патрика: он говорил очень быстро и не всегда чётко, хорошо что слайды были с подробными примерами. Houdini — это черновик W3C о новых API, которые позволят вклиниваться в любые этапы отрисовки страниц (parsing→DOM→cascade→layout→paint→composite).

На хабре есть статья про Гудини: → https://goo.gl/MM6ubw

На CSS-Tricks на прошлой неделе вышел хороший разбор. Где вас поджидают проблемы с переполнением в CSS и как их предотвратить → https://goo.gl/8MMt2G

У меня для вас три задачи. От простой к сложной:

Упаковать два массива в один, применяя к ним функцию. Типа

const a = [ 1, 2 ];
const b = [ 10, 20 ];
const f = (x, y) => x + y;
zipWith(f, a, b) // => [ 11, 22 ]

6 кю → https://goo.gl/72cpnv


Схлопнуть массив до строки с промежутками. Типа

solution([ 10, 11, 12, 13, 20, 21, 22, 23, 100 ])
// => "10-13,20-23,100"

4 кю → https://goo.gl/J7fm5d


Найти локальные максимумы в массиве. Локальный максимум — это «пик», максимальная точка в своей окрестности. Например в массиве [ 1, 2, 3, 2, 4, 10, 18, 3, 2 ] локальные максимумы это 3 и 18. Т.е. до этой точки числа возрастали, а после неё стали убывать. Ну, на случай, если вы забыли школьную математику :)
4 кю → https://goo.gl/b9YJKk

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

Вот прошлогодняя, но не потерявшая актуальности статья в блоге Макса Полетаева, где он рассказывает, как наконец начать читать документацию и всё такое на английском → https://goo.gl/P29JQa

Noisli — генератор шума

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

Там можно зарегистрироваться и сохранять свои комбинации шумов. И для зарегистрированных есть таймер, можно поставить на, к примеру, 30 минут, и пойти работать. Через 30 минут шум прекратится, значит пора встать из-за компьютера и размяться. Потом снова взвести таймер и работать дальше. Попробуйте, может Noisly поможет вам сосредоточиться.

→ https://goo.gl/xJv2pa

Нойзли не единственный такой сервис, есть еще Пуррли, который кошачье мурчание генерирует. Но под него можно скорее уснуть, чем сосредоточиться.

→ https://goo.gl/uAG2rs

Илья Бирман пару недель назад опубликовал отзыв клиента на свою работу. Отзыв кроме прочего о том, как Илья внимательно решает задачу: вникает в контекст, работает с замечаниями. Сам Илья комментирует отзыв:

> По поводу внимания к замечаниям. Я по себе знаю, насколько это важно. В проектах, где я выступаю «клиентом» (арт-директором или ведущим дизайнером), невнимательный дизайнер усложняет мою работу в несколько раз. Если я увидел, что он забыл о моём замечании два или три раза, то уже непонятно, как ему доверять — приходится всё перепроверять. А после такого с дизайнером не очень хочется иметь дело.

Внимательность важна не только для дизайнеров, она нужна в любой работе. В любом деле неудобно, когда за работником приходится перепроверять, напоминать об одном и том же несколько раз. Представьте, что вы попросили разработчика сделать яркую фокус-обводку на элементах формы и подкрасить ссылки. Он обводку сделал, про ссылки забыл и говорит: «Я всё сделал», а вы такой: «А ссылки?»

Илья потом на видео рассказывает, как ему удаётся ничего не пропускать: он ведёт конспекты встреч. Просто не стесняется во время встречи печатать. Если встреча личная, извиняется за ноутбук и объясняет, зачем это нужно.

У меня есть проблемы с внимательностью: память меня часто подводит, и раньше мне казалось ну типа что поделать, такая память, спрошу вот это ещё раз. Теперь я понимаю, что моя память — это моя проблема, и никто не хочет тратить время, чтобы говорить и объяснять мне что-то второй раз. Теперь я тоже просто записываю важное.

Отзыв клиента Ильи → https://goo.gl/WJKpRA
Как Илья ведёт конспекты встреч → https://goo.gl/115KqU

К новостям Санкт-Петербурга.

29-го июля, в эту субботу, пройдёт очередная встреча NodeSchool SPB. Это классное событие для начинающих и продолжающих разработчиков на JS.

Вы выбираете какой-то воркшоп, приходите на встречу, и начинаете этот воркшоп на своём ноутбуке проходить. Если у вас появился вопрос, вы можете попросить помощи у старших товарщей. Воркшопы есть по всему вообще: от основ джаваскрипта до работы с WebGL, MongoDB или даже с торрентами из ноды.

Отличное событие для того, чтобы чему-нибудь научиться и влиться в локальное сообщество. На встречу надо заранее зарегистрироваться, чтобы пропустили в офис. В этот раз в офисе Одноклассников будет. Я рекомендую.

→ https://goo.gl/7N7wmV

Читатель канала спрашивает:

Должен ли фронтендер кроме юнит-тестов, писать и настраивать селениум-тесты (интеграционные), или это должен делать тестировщик, есть ли грань в обязанностях? Или если фронтендер может писать селениум-тесты, он просто более крутой специалист?

Тут два вопроса, и ответы на них, по-моему, слабо связаны.

Я считаю, что дополнительные навыки — это круто. А дополнительные навыки в твоей области и смежных с ней — это круто для тебя, как специалиста. Конечно, фронтендер должен уметь то, что делает его фронтендером: программировать на JS, верстать, дебажить, ну и короче всё то, без чего ты не можешь назвыться фронтендером. Но если кроме этого ты ещё умеешь:

— писать селениум-тесты;
— настраивать nginx;
— готовить бекенд;
— конфигурировать сервера;
— делать дизайн;
— управлять командой;
— ...

То это круто и повышает твою ценность как специалиста. Это конечно не значит, что на работе вдруг ты должен делать сразу всё, что умеешь.

Кто же должен писать селениум-тесты? Тестировщик или фронтендер? А это всё зависит от договорённостей в команде. Точно так же, как вопрос: кому переводить вёрстку в шаблоны: фронтендеру или бекендеру? Как договоритесь, ребята, так и будет :)

Если вы не знаете, что такое селениум-тесты, то вот вам видео → https://goo.gl/QuJv94

Сегодня расскажу, почему отмазка «Я пока не пиксельпёрфектил» показывает, что студент верстает нерационально.

На интенсивах по вёрстке в HTML Academy студенты верстают макет пиксельпёрфектно. То есть, когда накладываешь макет на вёрстку, видно, что они совпадают. На базовом интенсиве, который сейчас идёт, допускается различие в 5 пикселей по высоте (при расстояниях более 30 пикселей) и 2 пикселя по ширине. На последнем продвинутом была такая формулировка: «вертикальная погрешность не более 10 пикселей, горизонтальная погрешность не более 5 пикселей».

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

Часто тактика у студентов такая: весь интенсив верстают на глазок, а перед сдачей начинают усиленно «пиксельпёрфектить». В одном месте поправят, другое разъехалось. Я так и вижу. Студент включает грустную музыку, делает отрешённое лицо и поехал макет на вёрстку накладывать. Полная шляпа. Представьте, вы пришли в ателье заказать платье или костюм, а вам говорят: да щас мы на глазок сошьём, приходите через три недели, там подгоним.

Такие ребята делают двойную работу. Есть к примеру кнопка. Текст в ней набран кеглем 18px с межстрочным расстоянием 20px, паддинги у кнопки 8px и 16px, цвет #2aab6d. И вот студент вместо этих чисел использует другие. И потом в конце интенсива подставляет вместо них подходящие. Почему сразу не использовать нужные значения?

Наложите макет на вёрстку сразу, как только начали верстать блок. Пишите сразу нужные значения. И сразу проверяйте их по PP. Почти всё можно измерить в фотошопе. Самое сложное, пожалуй — вертикальные паддинги, т.к. надо учитывать line-height. Но его же можно просто в веб-инспекторе подогнать.

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

Вот вам статья, как без боли попасть в макет → https://goo.gl/8FCHsH

Сейчас самый разгар базовых интенсивов по вёрстке и js в HTML Academy. Привет всем, кто там учится или учит! Новички знакомятся не только с технологиями, но и с инструментами разработки. Самый главный инструмент, конечно, редактор.

Чтобы помочь новичкам в нём освоится, я буду каждый день рассказывать про какую-нибудь одну функцию или настройку редактора. Я постараюсь говорить о функциях, которые есть везде. Но показывать буду на примере Visual Studio Code.

Что использовать для табуляции: табы или пробелы? Зависит от языка и от проекта. У меня в редакторе включена подсветка пробельных символов, так я всегда вижу, где используются табы или пробелы. Вижу, где несколько пробелов. Или где пробел в конце строки. На скриншоте выше в js-файле используется 4 пробела. В go-файле — символы табуляции. И выравнивание сделано пробелами — видите по две точки перед символом равенства?

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

Обычно настройка называется как-нибудь вроде «Show invisibles» или «Show whitespaces». В VS Code это editor.renderWhitespace.

Увеличить табуляцию строки можно клавишей Tab. Уменьшить её можно, нажав Shift+Tab. Можно выделять несколько строк и двигать их одновременно. Вправо Tab, влево Shift+Tab.

Не нажимайте четыре раза Delete, не шокируйте наставников!

Сегодня про выделение (selection). Хоткеи в разных редакторах могут отличаться, поэтому я снова расскажу про VS Code для mac, а вы найдите для своего редактора. Для Windows скорее всего нужно вместо Cmd жать Ctrl. Цветовая схема поярче, чтобы было видно, что выделяю.

Выделить одно слово можно дабл-кликом. Везде, не только в редакторах.

Поставить несколько курсоров (multiple cursors), если зажать Alt и кликать в нужные места.

Выделить фрагмент строки (multiline selection) или просто поставить курсор и нажимать Cmd+Alt+Вниз или Cmd+Alt+Вверх, тогда будет выделятся то же место на строках ниже или выше.

Выделить слово и нажать Cmd+Shift+L, тогда это слово будет выделено во всём файле. Например, чтобы заменить его. Нагуглить хоткей можно по фразе «select all occurrences».

Если нужны не все совпадения, а только несколько, можно выделить слово и нажать Cmd+D, тогда выделится следующее совпадение. Нажимать, пока не выделятся все нужные.