Паттерн PRPL для создания отзывчивых веб приложений

Этот паттерн описывает структурирование и доставку веб приложений. Название - аббревиатура ключевых этапов загрузки приложения:
1️⃣ Push загрузка ресурсов, притом только тех ресурсов, которые нужны именно этой странице.
Здесь отлично подойдет SSR.
2️⃣ Render инициализация полноценного приложения.
3️⃣ Pre-cache фоновая загрузка и кеширование часто используемых ресурсов.
Для этого отлично подходит Service Worker.
4️⃣ Lazy-load загрузка редко используемых модулей при обращении к ним.

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

addyosmani.com/blog/the-prpl-pattern/
#theory #patterns #ssr

Масштабируемая конфигурация nginx

Игорь Сысоев рассказывает как работают конфиги nginx и как написать конфигурацию, что бы она была удобна, масштабируема и легка в поддержке.

youtu.be/jf3wIN-FwW4
#nginx

TypeScript: почему интерфейсы предпочтительнее

Как-то Роб Палмер написал в твитере:
Вчера я уменьшил .d.ts файлы на проекте с 700Kb до 7Kb изменив всего одну строчку кода
Дело в том, что в ряде случаев яльяс типа будет заменен на его значение, в отличии от интерфейсов, которые всегда используются только по имени.

ncjamieson.com/prefer-interfaces
#typescript

Как использовать React Refs

Рефы в React позволяют получить ссылку непосредственно на HTML DOM элемент.
Рассмотрим виды и способы работы с рефами:
- React.createRef(): самый удобный способ:
const inputRef = React.createRef()
<input ref={inputRef} />
- callback: в атрибут ref передается колбек, который вызывается уже вместе с самой ссылкой:
<input ref={ref => inputRef = ref} />
- строковый: самый старый вид работы с рефами, не рекоммендуется к использованию.

Так же рефы можно передавать как обычные параметры и даже пробрасывать как собственный реф компонента:
const AnyComponent = React.forwardRef((props, ref) => <LogProps {...props} forwardedRef={ref} />;

Не злоупотребляйте рефами: большинство действий с компонентом удобнее и правильнее производить с помощью React.
Взаимодействие с рефами рекомендуется инкапсулировать в компонент, тем самым изолировать его логику.

makeweb.me/anatomiya-react-urok-12-chto-takoe-ref-y-i-kak-imi-polzovatsya/
rossbulat.medium.com/how-to-use-react-refs-4541a7501663
#react

Чем отличается Senior, Middle и Junior?

Градации очень условны и сильно разнятся в разных компаниях, но все же есть общие черты:
👨‍🎓 Джун
• Умеет программировать
• Задает вопрос в любой непонятной ситуации
👨‍💻 Миддл
• Умеет правильно программировать
• Самостоятелен, вопросы скорее инфраструктурные
🧔 Сениор
• Вопросы не задает, вместо этого он согласовывает один из вариантов решения бизнес задачи
• Может организовывать работу других людей

habr.com/post/513022/
medium.com/@ittheredpill/27e455fcaef4

Столкнулся с проблемой на iOs, что функция "Версия для ПК" в Chrome и "Запросить настольный веб-сайт" в Safari работали некорректно - сайт оставался в мобильном виде даже после включения режим просмотра для ПК.

На нашем сайте использовался метатег viewport:
<meta name="viewport" content="width=device-width,initial-scale=1">
Что значит что ширина viewport будет равна количеству реальных пикселей экрана.
Chrome на Android, для просмотра версии для ПК, по сути, выставляет метатегу viewport значение width=980px
По каким-то причинам, на iOs это не работает.
Я решил устанавливать такое значение вручную если идет просмотр версии для ПК.
Однако нет никакго флага, который показывал бы этот режим, UserAgent меняется на десктопный и, видимо, все.
Все же хак был найден:
const isIOsFakeDesktop = (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
У мобильного устройства много точек касания а у десктопа только одна (точнее, их нет).

stackoverflow.com/a/58064481/13862767
#ios #safari #browser

SSR, CSR, SSG, WTF?

В зависимости от того, где формируется страница зависит то, как быстро пользователь ее увидит и как быстро он сможет с ней взаимодействовать.
Существует три варианта:
Server Side Rendering - генерация HTML страницы на стороне сервера
Client Side Rendering - генерация страницы только в браузере, на стороне клиента
Static Site Generation - предварительная генерация HTML файлов, после генерации можно отдавать сайт с любого хостинга статических файлов

Если страница сформирована сервером, то на клиенте может быть выполнена регидрация (Rehydration) - загрузка и выполнение JavaScript компонентов на клиенте таким образом, чтобы они повторно использовали HTML, сформированный на стороне сервера.

Все это влияет на ключевые параметры производительности:
TTFB (Time to First Byte, время до первого байта) - время между кликом по ссылке и поступлением первого фрагмента содержимого
FP (First Paint, первая отрисовка) - когда пользователю становится виден первый пиксель
FCP (First Contentful Paint, первая содержательная отрисовка) — время первого отображения запрашиваемого содержимого (например, статьи)
TTI (Time To Interactive, время до интерактивности) — момент времени, в который страница становится интерактивной (закрепляются все события и т. д.)

В статье (перевод и оригинал) детальнее, с графиками описываются плюсы и минусы различных подходов, инструменты и возможные сферы применения.
tproger.ru/translations/rendering-on-the-web/
developers.google.com/web/updates/2019/02/rendering-on-the-web
#performance #ssr #csr #ssg

Инкрементальная (ре)генерация статики в NextJS

Использование Incremental Static REgeneration (ISR) позволяет генерировать и обновлять страницы уже в процессе работы сервера.

Для этого в getStaticProps выставляется поле revalidate - время в секундах, в течении которого страница не требует обновления. Когда указанный интервал истекает то страница сама не обновляется, а обновление произойдет только после следующего запроса к этой странице. В ответ на этот запрос сервер вернет сохраненную версию страницы, и уже следующий запрос к этой странице вернет обновленную версию, но это не проблема если пользователей достаточно много.
Если страница была сгенерирована впервые то она будет сформированна в fallback mode - props пусты, а isFallback будет true.

Таким образом ISR позволяет получить плюсы и SSG и SSR, но команда next export становится недоступна.

arunoda.me/blog/what-is-nextjs-issg
blog.logrocket.com/incremental-static-regeneration-with-next-js/
#nextjs #isr #ssg #ssr

Подсчет размера блока до его отображения

Бывают случаи, когда требуется узнать какого размера будет блок, до его отображения.
Автор статьи предлагает хоть и, по моему мнению, костыльное, но тем не менее рабочее решение:
Создать элемент, заполнить его необходимым содержимым, измерить его размеры и удалить. Все это сделать синхронно в одной функции, таким образом браузер даже не будет отображать этот элемент.
Думаю, существуют более элегантные решения.

❓Какие решения знаете вы?

dev.to/sstraatemans/calculate-html-element-width-before-render-4ii7
#ui #browser

Ведете ли вы какие-то каналы?
Не хотите ли поделиться ссылкой на них?

Тестирование типов с @ts-expect-error

При написании тестов, иногда возникает необходимость проверки именно типизации, особенно если в коде используются дженерики.
Например, если требуется убедиться что при компиляции с определенными типами TypeScript выбросит исключение.
Для этого в версии 3.9 был введен специальный комментарий
// @ts-expect-error
который проверяет следующую за ним строку и скрывает ошибку если она там есть, в ином случае генерирует исключение Unused '@ts-expect-error' directive .
У flow есть аналог $ExpectError, который работает так же.
В отличие от @ts-expect-error директива @ts-ignore подавляет любые ошибки.

dev.to/oliverjumpertz/making-good-use-of-ts-expect-error-in-typescript-1f41
#typescript #testing #tdd

⚡️ Class fields, private methods и static class features переходят на stage 4 и станут первыми фичами ES2022!

Наборы красивых ссылок на GitHub

При разработке open source проекта хочется добавить красивую ссылку на репозиторий. Вот несколько шаблонов.

github.blog/2008-12-19-github-ribbons/
tholman.com/github-corners/
#github #ribbons #corners

Какие красивые ссылки встречали вы?

Друг покаялся мне что накостылил в проекте заказчика. Я ему в ответ:

Сервис наш, сущий на серверах
Да прости ты баги наши
И избавь от них пользователей наших
Не веди нас к говнокоду
Но избавь нас от дедлайнов страшных
Ибо искуплением будет нам
Исправление багов прежних наших
А карой - дебаг долгий и унылый
Во имя Лисы, Сафари и Хрома.
Админь.

Разница между Continuous Delivery и Continuous Deployment

Что такое CI/CD?
CI знают, наверное все, это continuous integration (непрерывная интеграция) - быстрая и частая интеграция отдельных изменений в код приложения.
C CD не все так однозначно, это или continuous delivery или continuous deployment в зависимости от того, что именно вам нужно.
Разница между ними маленькая, но существенная.
И то и другое подразумевает быстрые и частые сборки приложения и прогон тестов, но в continuous deployment (непрерывное развертывание) деплой выполняется автоматически, а в continuous delivery (непрерывная доставка) деплой выполняется только после ручного подтверждения.

doam.ru/difference_between_continuous_delivery_and_continuous_deployment/

Event Loop NodeJS: Part 1

Высокая производительность NodeJS обусловлена его архитектурой, в основе которой лежит цикл событий (Event Loop).
Что это и как это работает?
Программа выполняет запрос к асинхронному API, указывая обработчики ответа и продолжает выполнение дальше.
Каждый запрос обрабатывается циклом событий:
1. Event Demultiplexer получает запрос и отправляет его в соответствующую систему.
2. После обработки ввода / вывода Event Demultiplexer регистрирует обработчики этого события, и, когда придет ответ, необходимый обработчик будет добавлен в очередь событий (Event Queue)
3. Когда в очереди имеются события они обрабатываются в порядке их добавления в очередь
4. Если событий больше нет и нет ожидающих ответа запросов, программа завершается
Именно это и есть Event Loop. Он однопоточный и почти бесконечный.

arswarog.ru/post/event-loop-nodejs-p1/

Well-known Symbols

Символ (Symbol) — это примитивный тип данных, представленный в ES2015 / ES6, позволяющий создавать уникальные идентификаторы Их так же можно использовать в качестве ключей для свойств объектов.
Символы, которые JavaScript обрабатывает особым образом, называются хорошо известными символами (Well-known Symbols). Они играют важную роль, поскольку позволяют осуществлять тонкую настройку поведения объектов.

✔️ Symbol.iterator позволяет итерировать объект
✔️ Symbol.hasInstance измененяет поведение оператора instanceof
✔️ Symbol.toPrimitive используется при преобразовании объекта в примитив
✔️ Symbol.toStringTag указывает как преобразовать объект к строке
✔️ Symbol.species используется при создании производного объекта
✔️ Symbol.match, Symbol.replace, Symbol.search, Symbol.split позволяют использовать объект как регулярное выражение
✔️ Symbol.isConcatSpreadable для преобразования объекта в массив

habr.com/ru/post/529560/
#javascript