Чем отличается 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

Поиск текста в файлах Linux

Иногда может понадобится найти файл, в котором содержится определённая строка или найти строку в файле, где есть нужное слово. В Linux всё это делается с помощью одной очень простой, но в то же время мощной утилиты grep. С её помощью можно искать не только строки в файлах, но и фильтровать вывод команд

losst.ru/gerp-poisk-vnutri-fajlov-v-linux
#linux

Вы не знаете деструктуризацию, пока

Синтаксис деструктурирующего присваивания в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.
Кажется это знает каждый, но в какие интересные конструкции это может вылиться?
• установка дефолтных значений
• вложенная деструктуризация
• присваивание с повторением
• распаковка массива в объект
• частичная распаковка
Главное не переусердствовать т.к. это может понизить читаемость кода

habr.com/post/530248
#javascript #basics

Заготовка для HTML

В заголовке html файла может быть много meta и link тегов, все они имеют свое особо предназначение, нередко они потребуются только для одного браузера, устройства или даже сайта.
В статье предлагается эталонный заголовок html файла с полным разбором каждой строчки

habr.com/post/555082
#html
@webcodernotes

Анонс TypeScript 4.6 Beta

- Разрешен код в констукторе перед super()
- Улучшенная проверка рекурсивных типов
- Улучшен вывод типов по ключу объекта
- Добавлен вывод типов в элементах rest оператора по другим элементам
- Больше проверок для JS файлов
- В анализатор трассировки добавлено больше информации, которую можно посмотреть через analyze-trace
Breaking Changes
- TS по умолчанию будет ругаться, если в JS будут ошибки (но это можно отключить комментарием // @ts-nocheck в начале JS файла)

devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/
#typescript #announce
@webcodernotes