Не спешите обновлять библиотеки

Пару часов назад вышел mobx 4, я прочитал ченджлог и радостно решил обновиться. И сразу же обнаружил, что в релизе поломаны аннотации типов для flow.

Та же история у меня была с обновлением Реакта с 15.5.x до 15.6.0: я в день релиза обновился в рамках одной из рабочих задач, и вечером тестировщица вернула мне задачу с комментарием «на ios не работает». Проблема оказалась в коде Реакта, её пофиксили через два дня в версии 15.6.1.

Мораль проста — в любом крупном (и даже не очень) релизе есть баги. Так что если в вас нет духа авантюризма, перед обновлением мажорной версии любой библиотеки ждите пару недель, пока не исправят упущенные проблемы.

Учебник по основам теории музыки с классными интерактивными визуализациями — https://www.lightnote.co/

Тесты — отличная возможность на практике попробовать async/await, не трогая клиентский код и не заморачиваясь с подключением полифилов

javascript:void(0)

Очень распространённая ошибка доступности, которая встречается даже в популярных библиотеках — использование ссылок с href="javascript:void(0)". С точки зрения семантики и доступности такие ссылки не имеют никакого смысла. Вместо них нужно использовать обычные кнопки.

Запомните простое правило: если при нажатии должен меняться URL, это <a>. Во всех остальных случаях используйте <button>.

Напоминание от Николая: кнопка без явно заданного type="button", оказавшаяся внутри формы, при нажатии отправит эту форму

​​Менеджер продукта по мнению Яндекса:
1. Постоянно пользуется своим продуктом и продуктами конкурентов.
2. Тестирует свой и чужие продукты на других людях.
3. Рассказывает участникам команды и заказчикам, что и зачем они делают.
4. Болеет за качество и умеет убеждать участников команды держать нужную планку.
5. Оценивает и приоритизирует задачи по соотношению «цена/польза».

Программистам ничего не мешает разделить с продактами как минимум 1, 4 и 5 компетенции ;–)

​​Наткнулся на генетический тест «Атлас». Сдаёте образец слюны, ждёте 8 недель и получаете подробные и понятно оформленные результаты анализа вашей ДНК: от происхождения и предрасположенности к каким-либо заболеваниям до рекомендаций по питанию и спорту. Выглядит очень круто — https://atlas.ru/gentest/

Наконец дошло дело до предложения по добавлению опциональной статической типизации в JavaScript.

Пока предлагают добавить только enum и примитивные типы, от которых будет не очень много пользы, но это хороший первый шаг — https://github.com/sirisian/ecmascript-types

​​Нейромаркетологи добрались и до технологий: Фейсбук, Инстаграм и другие продукты захватывают наше внимание всеми правдами и неправдами. Хороший обзор эксплуатируемых биологических механизмов и способов защиты — https://knife.media/dopamine-loop/

​​Вдогонку набор простых приёмов, которые помогут меньше отвлекаться на смартфон — https://humanetech.com/take-control/

• Отключите все уведомления, которые приходят не от людей.
• Переведите телефон в чёрно-белый режим. Цветные иконки провоцируют небольшие выбросы дофамина (нейромедиатор, вызывающий предвкушение удовольствия и счастья), из-за этого вырабатывается привычка.
• Уберите с главного экрана все развлекательные приложения, чтобы их было сложнее бездумно открыть.
• Заряжайте телефон за пределами спальни, вместо него используйте отдельный будильник: так вы не будете начинать утро с тупления в экран телефона.
• Отправляйте голосовые сообщения вместо текстовых. Это требует меньше внимания и сил, и к тому же уменьшает вероятность недопонимания — в текстовых сообщениях теряются интонации.
• Крайняя, но действенная мера: удалите приложения соцсетей с телефона.

​​Если вы публикуете NPM-пакеты, попробуйте утилиту np, которая сильно упрощает процесс релиза — https://github.com/sindresorhus/np

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

​​О состоянии фронтенд-экосистемы

css-loader создан для того, чтобы Вебпак обрабатывал @import и url() в CSS так же, как import в JavaScript. ОДНАКО! В его конфигурации есть опция minimize, которая позволяет включить минификацию стилей. Под капотом для минификации используется cssnano, который, в свою очередь, тоже можно настроить. А в продвинутом режиме cssnano (напомню, минификатор стилей) начинает применять Автопрефиксер, который вообще никакого отношения к минификации не имеет.

Принцип единственности ответственности? Не, не слышали.

Для тех, кто беспокоится о скорости загрузки страницы: bundlephobia показывает размер и время скачивания выбранного NPM-пакета — https://bundlephobia.com

Импорт модулей относительно проекта, а не текущего файла

Обычный подход к импорту модуля в проекте — указание пути к нему относительно текущего файла:

import smoosh from '../../../utils/flatten';

Этот подход хрупкий и неудобный:

— сложно найти все импорты какого-либо модуля, потому что они выглядят по-разному в зависимости от местоположения;
— перенос файла с импортом в другую директорию уровнем выше или ниже ломает все импорты в этом файле;
— импорты вида '../../../utils' сложны для чтения и понимания, разработчику приходится мысленно резолвить путь до модуля, чтобы понять, где он лежит.

Эти проблемы решаются использованием путей относительно корня проекта, например:

import smoosh from '~/utils/flatten';

Здесь ~ — это алиас корня проекта (например, /Users/andrew-r/work/personal-site/source). Недостаток такого подхода заключается в том, что он не работает из коробки. Чаще всего этот подход используют с Вебпаком, в конфигурации которого можно указать нужные алиасы:

const path = require('path');

module.exports = {
  entry: './source/index.js',
  /* ... */
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './source'),
    },
  },
};

Документация по настройке алиасов в Вебпаке — https://webpack.js.org/configuration/resolve/#resolve-alias

Полина Немчак делится альтернативой в виде переменной окружения NODE_PATH для тех, кто не использует Вебпак. Эта переменная говорит ноде о дополнительных директориях, в которых нужно искать модули при импортах. Можно прописать в NODE_PATH путь к директории с исходниками проекта, тогда импорты будут такого вида:


import smoosh from 'utils/flatten';


Учтите, что при таком подходе повышается вероятность конфликта имён между директориями проекта и установленными NPM-пакетами.

а как же NODE_PATH=./src ?

​​Дизайн-подорожник

Александр Быков пишет серию статей с пошаговыми примерами улучшения дизайна городской среды. Уже вышли три статьи:

Убитый фасад в Новороссийске → https://zen.yandex.ru/media/id/5a78aa06f03173b1df500be8/5a9019a6256d5cdcf7814bdc
Входная группа в брежневке → https://zen.yandex.ru/media/id/5a78aa06f03173b1df500be8/5a97b81877d0e69928b56b41
Петербург — хорошо. Но можно лучше → https://zen.yandex.ru/media/id/5a78aa06f03173b1df500be8/5ac1c8cc610493acb72f9d00

После прочтения становится ясно, что жить не в дерьме не так уж сложно. Учитесь культуре дизайна с помощью подобных примеров и расширяйте зону комфорта за пределы своей квартиры (дома ведь, например, мало кому приходит в голову кидать мусор на пол?). Чем больше людей начнут замечать изъяны городского дизайна, тем раньше все эти изъяны устранят.

​​Если вам нужно захостить статический сайт (или SPA без серверного рендеринга), что-то лучше Нетлифая вы сейчас вряд ли найдёте. На нём уже хостятся сайты с документацией React, Vue, Lodash, Yarn, и многие другие.

Перевёл на него три сайта буквально за 15–20 минут, всё суперпросто и удобно: подключаете к сервису репозиторий с сайтом, и далее при каждом пуше в релизную ветку сайт автоматически собирается и деплоится. Причём для этого не нужно заводить никаких конфигурационных файликов в корне проекта или лезть в настройки репозитория, всё настраивается автоматически (а при необходимости кастомизируется).

Помимо прочего, сервис позволяет:
— в один клик (!) создать и привязать к домену бесплатный SSL-сертификат;
— автоматически разворачивать демо-стенды для каждой ветки в гите;
— собирать данные с форм;
— делать сплит-тесты;
— авторизовывать пользователей;
— автоматически деплоить функции AWS Lambda из репозитория.

Вишенка на торте — базовые возможности сервиса (хостинг, CI, DNS, SSL) доступны бесплатно. Короче, в мире хостингов больше не нужно быть девопсом или вебмастером, можно побыть обычным пользователем.

История пройденных собеседований

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

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

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

Общую информацию о компании вроде структуры и процессов. Это расширит ваш кругозор и сэкономит время на повторных собеседованиях.

Детали и специфику работы/проекта. Обычно в вакансиях не пишут о реальной специфике работы, а отделываются общими фразами вроде «вы будете разрабатывать гибкие и современные приложения» (на самом деле может оказаться, что вам предстоит верстать формочки на джейквери и бутстрапе). Это тоже ценная информация, которой можно поделиться с друзьями, сэкономив их время на прохождение первого интервью и выправив их ожидания от вакансии.

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

Старайтесь записать всё сразу после прохождения собеседования, чтобы важные детали не успели забыться.