​​Как навсегда забыть про конфликты в package-lock.json: https://twitter.com/maybekatz/status/972176473736937473

(Даже не нужно делать npm install при конфликте, как в Yarn)

​​Очень классное введение в Ramda. Основы функционального программирования — операторы для условий — трансформация данных — линзы: http://randycoulman.com/blog/2016/05/24/thinking-in-ramda-getting-started/

(Ramda — это как Lodash, но более приспособенная для ФП)

Читатель Максим добавляет, что npm-merge-driver работает и с Yarn-ом: https://github.com/npm/npm-merge-driver/blob/latest/README.md#using-with-other-package-managers

Если вечно забываете, какие заголовки кеширования вам нужны, то вот → https://iamakulov.com/notes/caching/

​​Оказывается, если вообще не указывать заголовки для кеширования, браузеры всё равно будут кешировать контент: https://paulcalvano.com/index.php/2018/03/14/http-heuristic-caching-missing-cache-control-and-expires-headers-explained/

— Кеширование в таком случае работает по внутренним правилам браузера. Chrome кеширует файлы на срок 10% с даты Last-Modified (то есть если ресурс изменился 180 дней назад, то Chrome закеширует его на 18 дней). Firefox делает точно так же, но ограничивает максимальный срок неделей. IE и Edge — ???

— С таким кешированием сайт может ломаться у части посетителей. Например, вы только что обновили index.css и index.js, но у кого-то index.css закешировался только вчера. Когда этот человек зайдёт на сайт, JS-файл у него обновится, а CSS — нет. (Но эта проблема решается, если вы добавляете хеш или версию в название файла)

Оформил первую часть гайда в бекенд как пост → https://iamakulov.com/notes/backend-nodejs/

Если хотели поделиться ссылкой, но не могли этого сделать, теперь самое время :–)

​​Обновил гугловый гайд по веб-производительности с Вебпаком.

Теперь там и про Вебпак 4. Читайте про режим продакшена и новый подход к код-сплиттингу :–)

https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size

​​Дмитрий Меньшиков (@notieinit) написал клёвую подробную статью про то, как происходит резолвинг домена в Linux: https://dmenshikov.com/2018-03-16-hostname-resolving-on-linux/

(Оказывается, кроме /etc/hosts, в процессе обычно участвует ещё пара других баз данных. А утилиты типа dig этого не учитывают)

​​Отличное демо CSS-атрибута font-display: http://font-display.glitch.me

(font-display нужен, если вы используете кастомные шрифты. Он позволяет показать текст, пока шрифт для него всё ещё загружается)

​​🔥 Узнал, что Chrome умеет считать количество неиспользованного CSS и JS.

DevTools → Меню справа сверху → More tools → Coverage

Важное замечание, что неиспользованный код на текущий момент.

Например, если вы не инициировали :hover, то он будет считаться неиспользованным. Если в вашем JS в блоке if-else сработал только if, то else будет также считаться неиспользованным.

Если вдруг захотите удалить что-то, то помните об этом 🙂

Посмотрел страничку на сайте Волмарта и написал, что можно оптимизировать: https://twitter.com/iamakulov/status/981617891530461184

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

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

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

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

​​Вышел Вебпак 4.6. Теперь можно предзагружать чанки с помощью <link rel="prefetch">: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

​​⚛ Денис Довгань (клёвый разработчик и мой хороший друг) проведёт бесплатную онлайн-лекцию про Реакту!

В программе:
— Что такое Реакт и зачем он?
— Почему Реакт?
— В чем основные отличия от других библиотек и фреймворков (Angular/Angular.js/Vue/Ember)?
— Как развернуть приложение на Реакт?
— Что такое компонентный подход? Компоненты-функции и компоненты-классы.
— Основные концепции при разработке на Реакте (состояние, свойства, жизненный цикл компонентов).
— Написание вместе простого TODO-приложения.
— Что делать дальше? Материалы для изучения.

🕛 Это всё пройдёт 21 апреля в 12–13 по киевскому/московскому времени.

Приходите → https://facebook.com/events/215033762596260/

​​​​Узнал про navigator.sendBeacon().

Этот метод посылает фоновый POST-запрос на указанный адрес с указанными данными. Полезно для аналитики: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

​​От обычного fetch() это отличается в основном в двух моментах:

1. sendBeacon() нормально работает в событиях onbeforeunload/onunload (с fetch() там, кажется, проблемы).

2. Браузеры могут посылать beacon-запросы с меньшим приоритетом или с задержкой ↓