Раньше я думал, что скрипт test в npm можно запускать двумя способами. Оказывается, их четыре:

npm run test
npm test
npm tst
npm t

На выходных поучаствовал в подкасте «Веб-стандарты» — https://soundcloud.com/web-standards/episode-96

Вадим и Лёша записывались в питерском офисе Академии HTML, я записывался удалённо. Технически запись подкаста с приглашённым гостем устроена так: все созваниваются по скайпу, каждый локально пишет свою звуковую дорожку и после записи присылает её для сведения. Записываться было волнительно, в процессе путались мысли и казалось, что я несу какую-то чепуху (местами так и есть). Зато сделал из всей этой истории важный вывод — нужно меньше переживать, больше практиковаться в подобных вещах, учиться формулировать свои мысли (написание заметок в канал как раз этому способствует).

Три главных совета по вёрстке доступных писем:
1. Задавайте role="presentation" всем таблицам, которые используются не для представления табличных данных, а для раскладки.
2. Старайтесь верстать всё по-честному, а не сплошными картинками. Всем картинкам обязательно задавайте alt (оставляйте его пустым, если изображение декоративное).
3. Используйте семантичные теги header, footer, h1 – h6, etc.

Письма тоже должны быть доступными! Джейсон Родригез с советами по доступной вёрстке писем — https://css-tricks.com/html-email-accessibility/

У «Одноклассников» есть целый мессенджер, сделанный на основе веб-компонентов. В продакшене у них не выключены сорсмапы, интересно почитать исходники. Мне, например, понравился парсер сообщений.

Главное-то забыл, вот ссылка — https://tamtam.chat/

Наткнулся на этот мессенджер в презентации доклада «А так ли нужен VDOM» Сергея Чикуёнка — http://piterjs.org/events/19/2_Sergey_Chikuyonok.pdf

Самая любопытная часть презентации — о новом фронтенд-фреймворке «Одноклассников», который:
— основан на веб-компонентах;
— использует только Web API, добавляя недостающие части: шаблонизатор и передачу объектов в атрибутах;
— позволяет описывать компоненты полностью декларативно;
— не требует shouldComponentUpdate для компонентов;
— весит всего 6 КБ в gzip;
— поддерживает серверный рендеринг на любом языке программирования.

К сожалению, описание фреймворка в презентации ограничивается этим списком преимуществ. Остальную информацию предлагается узнать, устроившись работать в «Одноклассники» :–(

«Мораль истории такова: механизм автоматической вставки точек с запятыми (ASI) предназначен для исправления синтаксических ошибок. Если вы начнёте программировать, опираясь на него как на универсальное правило вставки точек с запятой на месте перевода строки, вы облажаетесь».

Брендан Айк объясняет, почему нужно ставить точки с запятыми в JS-коде — https://brendaneich.com/2012/04/the-infernal-semicolon/

Из переводов «Питера» можно мемы делать

Два часа ночи. Самое время рассказать, как сделать уведомления доступными — https://github.com/andrew--r/ui-developer-tips/tree/master/tips/008-alerts-accessibility

Тед Дзюба о трёх инструментах инженера (http://widgetsandshit.com/teddziuba/2010/12/the-3-basic-tools-of-systems-engineering.html)

Цель инженера — решить задачу, а не написать код. Для решения технических задач есть три основных инструмента.

1. Деньги
Лучший инструмент для решения задач, потому что экономит время и не требует написания кода. Чаще всего применяется для решения проблем масштабируемости и производительности.

2. Время
Деньги решают не все проблемы (и денег не всегда хватает). Время следует тратить в первую очередь на поиск уже существущих инструментов для решения задачи. Не бойтесь пользоваться результатами работы других людей для достижения собственных целей.

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

Важно использовать эти инструменты именно в указанном порядке. Худшее, что можно сделать — начать решать задачу с помощью кода.

Форматирование чисел в браузере

Если вам нужно отформатировать числа в браузере, не подключайте для этого сторонние библиотеки и не пишите велосипеды, а используйте нативный Intl.NumberFormat. Простой пример:

const numberFormatter = new Intl.NumberFormat();

numberFormatter.format(12345.67); // -> 12 345,67

По умолчанию NumberFormat использует правила системной локали. При необходимости можно указать нужную локаль: new Intl.NumberFormat('en-US'). Вторым аргументом передаются опции вроде минимального/максимального количества знаков после запятой, подробнее в документации.

Intl поддерживается начиная с IE 11 и Safari 10, на мобильных поддержка хуже, поэтому нужно при открытии страницы проверять поддержку и при её отсутствии подгружать полифил.

Проще всего использовать сервис Polyfill.io от Financial Times:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Polyfill.io проверяет по юзерагенту, какие фичи не поддерживает браузер, и отдаёт полифилы только для них.

Как описывать состояние загружаемых данных — https://github.com/andrew--r/ui-developer-tips/tree/master/tips/009-data-state

В Google Fonts добавили новую кайфовую антикву Spectral с поддержкой кириллицы — https://design.google/library/spectral-new-screen-first-typeface/

Любая статья становится на порядок круче, если добавить в неё интерактивности, как, например, в этом введении в квантовые вычисления — http://davidbkemp.github.io/QuantumComputingArticle/

Сегодня открылся шестой набор в ШРИ Яндекса: https://academy.yandex.ru/events/frontend/shri_msk-2018/

Нынешнее тестовое задание гораздо сложнее, интереснее и цельнее того, которое я делал год назад. Год назад тестовое делилось на три разные задачи: сверстать телепрограмму, написать JS-библиотеку для управления школой, починить и доработать написанный кем-то сервис-воркер. В этом году тестовое всё также делится на три задачи, но теперь они связаны друг с другом: сперва нужно доработать чужой серверный код, затем сверстать пару страничек, а в конце связать бэкенд и вёрстку, получив на выходе сервис для бронирования переговорок в виде SPA.