Пока я готовлю свою первую статью на Хабр, хочу напомнить о редко используемых или относительно новых операторах в JavaScript.

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

?? — Nullish coalescing operator (оператор нулевого слияния)

Что означает ❓

Оператор нулевого слияния — это логический оператор, возвращающий значение правого операнда, если значение левого содержит null или undefined.

Как пишется ❓

const nullValue = null;
const someValue = "Какое-то значение";
const zeroValue = 0;

const valueA = nullValue ?? "Вот уж не надо нам null'ов!";
const valueB = someValue ?? "А здесь значение есть";
const valueC = zeroValue ?? "Сюда не дойдём, так как в левой части выражения число 0";

console.log(valueA) // "Вот уж не надо нам null'ов!"
console.log(valueB) // "Какое-то значение"
console.log(valueС) // 0;

Если мы составим цепочку из операторов ??, то операция остановится на первом значении, которое определено:

const valueA = null;
const valueB = "Остановитесь на мне!";

console.log(valueA ?? valueB ?? "А как же я?"); // "Остановитесь на мне!"

В чём особенности ❓

Этот оператор является частным случаем логического оператора ИЛИ ||. Но если в случае с ИЛИ правый операнд возвращается при любом ложноподобном значении левого операнда, то при использовании ?? значениями левого операнда могут быть только null или undefined. Оператор нулевого слияния удобно использовать, если такие значения как 0, "", false или NaN считаются валидными и не могут быть отброшены.

Очень часто оператор ?? используется для проверки наличия определённого свойства в объекте или наличия у этого свойства значения:

const object = {
  someProperty: "У меня всё в порядке со значением",
  nullProperty: null
};

console.log(object.someProperty ?? "До сюда не дойдём"); // "У меня всё в порядке со значением"
console.log(object.nullProperty ?? "А вот тут уже нас ждут"); // "А вот тут уже нас ждут"
console.log(object.undefinedProperty ?? "Что-то такого свойства не найдено :("); // "Что-то такого свойства не найдено :("

Кроме того, для избежания ошибок при работе со свойством объекта, которое может быть null или undefined, оператор нулевого слияния можно использовать совместно с оператором опциональной цепочки ?., о котором я расскажу чуть позже.

??= — Nullish coalescing assignment (оператор нулевого присваивания)

Что означает ❓

Оператор нулевого присваивания позволяет присвоить значение правого операнда переменной, указанной в левом операнде, если значение этой переменной содержит null или undefined.

Как пишется ❓

let name;
let age = 31;

name ??= "Aleksandr";
age ??= 100;

console.log(name); // "Aleksandr"
console.log(age); // 31

В чём особенности ❓

Оператор нулевого присваивания позволяет элегантно решить такую часто встречающуюся задачу, как переопределение переменной, у которой значение не определено или задано как отсутствующее. Ранее для этого использовалась громоздкая конструкция:

let name;

if (name === null || name === undefined) {
  name = "Aleksandr";
}

||= — Logical OR assignment (логическое присваивание ИЛИ)

Что означает ❓

Оператор логического присваивания ИЛИ позволяет присвоить значение правого операнда переменной, указанной в левом операнде, если значение этой переменной при приведении его к false будет ложноподобным. Иными словами — если значение переменной, указанной слева от оператора ||= не приводится к true, то этой переменной присваивается значение, указанное справа от оператора.

Как пишется ❓

let name = "";

name ||= "Aleksandr";

console.log(name); // "Aleksandr"

В чём особенности ❓

Оператор логического присваивания ИЛИ призван упростить задачу проверки значения на истинность и последующего переопределения переменной через условную конструкцию if:

let name = "";

if (!name) {
  name = "Aleksandr";
}

&&= — Logical AND assignment (логическое присваивание И)

Что означает ❓

Оператор логического присваивания И работает практически так же, как и оператор логического присваивания ИЛИ, но с одним отличием: значение правого операнда будет присвоено переменной, стоящей слева от оператора, только если значение этой переменной истинно.

Как пишется ❓

let name = "Aleksandr";

name &&= name + " Grigorenko";

console.log(name); // "Aleksandr Grigorenko"

В чём особенности ❓

Данный оператор может упростить работу с некоторыми выражениями, которые иначе потребовали бы использования условных конструкций. Попробую привести пример, который вполне можно встретить в реальном коде:

const getData = () => data || null; // Сервис, который получает данные откуда-то извне и может вернуть null

let localData = getData();

localData &&= { ...localData, ...otherLocalData }; // Если данные, полученные из сервиса определены, обогатим их дополнительными данными

?. — Optional chaining (Опциональная цепочка)

Что означает ❓

Оператор опциональной цепочки позволяет безопасно обратиться к свойствам объекта или вызвать его методы, которые могут быть не определены или иметь значение null.

Как пишется ❓

Довольно частая проблема обращений к объектам в JavaScript — отсутствующие свойства или их значения и, как следствие, нарушающие взаимодействие с программой рантайм-ошибки:

const user = {};

console.log(user.name.toUpperCase()); // Ошибка: Uncaught TypeError: user.name is undefined

Данных ошибок можно избежать, если использовать опциональные цепочки:

const user = {};

console.log(user?.name?.toUpperCase()); // В консоль выведется undefined

В чём особенности ❓

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

Как пример, это может быть полезно при работе с DOM API:

const element = document.querySelector('.element')?.innerHTML; // Не будет ошибки, если DOM-элемент не найден

Или в случае с попыткой обратиться к свойствам несуществующего элемента массива:

const users = [{ name: "Pavel", age: 28 }];

const userAge = users.find(user => user.name === "Aleksandr")?.age; // С использованием опциональной цепочки вернёт undefined, иначе бы завершилось ошибкой: Uncaught TypeError: users.find(...) is undefined

Как я уже упоминал выше, оператор опциональной цепочки удобно использовать совместно с оператором нулевого слияния ??, чтобы отработать случай, если обращение к свойству или методу объекта вернёт undefined:

const user = {};

console.log(user?.name?.toUpperCase() ?? "ALEKSANDR"); // В консоль выведется "ALEKSANDR"

———

На сегодня это все операторы JavaScript, о которых я хотел рассказать. Если хотите узнать больше об этих или напомнить себе про другие операторы в JS, рекомендую почитать соответствующий раздел на mdn web docs:
🇬🇧 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
🇷🇺 https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators

Почему-то не существовало подобного мемаса, решил исправить ситуацию 🤵

Совсем недавно вышла новая мажорная версия 👩‍💻 Astro 4.0, и я хотел рассказать об основных изменениях, которые появились с обновлением. Может показаться, что существенных нововведений не так много, и в целом покажется правильно. Но для меня это лишний показатель того, что Astro — уже достаточный зрелый, хоть и относительно свежий инструмент для генерации статических сайтов, который продолжает развиваться в сторону улучшения тулинга, скорости сборки и удобства использования основных API, тем самым создавая лучший developer experience.

🚀 Давайте пройдемся по основным нововведениям Astro 4.0:

Тулбар для разработчика. В режиме разработки появился компонент, который появляется внизу страницы и позволяет получить быстрый доступ к инструментам разработчика. В тулбар встроены такие возможности как инспектор интерактивных элементов, написанных на сторонних UI-библиотеках типа React, Vue или Svelte («островов»), а также помощник для решения проблем с доступностью (accessibility). Но главная особенность — это возможность добавлять свои собственные инструменты или устанавливать готовые из каталога Astro. Для разработки своих инструментов есть отдельное API, но в каталоге с интеграциями пока что нет чего-то действительно полезного — впрочем, времени с выхода новой версии прошло совсем ничего.

Увеличение скорости билда больших коллекций с контентом. Эта фича порадует владельцев блогов и статических каталогов, которые построены на основе большого количества записей, описанных как коллекции с контентом в виде markdown или json/yaml файлов. Благодаря отслеживанию и кэшированию тех файлов, которые не изменились между билдами, скорость сборок повышается практически в два раза. Стоит упомянуть, что эта фича пока экспериментальная, так что требует специального флага experimental.contentCollectionCache в настройках проекта.

Новые возможности View Transitions API. <ViewTransitions /> — это встроенный в Astro компонент, который перехватывает переходы между страницами и позволяет внедрить собственную функциональность в процесс этих переходов. При помощи минимального количества JS-кода этот компонент позволяет добавить новый слой интерактивности для статических страниц — например, активировать анимации при переходе между страницами или сохранить и передать состояния страниц между переходами. Это позволяет программировать опыт, который можно получить только в Single Page Applications, но для статических HTML-страниц. В последней версии Astro были добавлены новые возможности при переходах между страницами, правда они будут интересны только опытным разработчикам Astro. Для первого знакомства с View Transitions API лучше начать с туториала на официальном сайте: https://docs.astro.build/en/tutorials/add-view-transitions/.

Мультиязычность, основанная на роутинге, теперь в стабильной версии. Теперь вы можете смело указывать локали для вашего сайта в конфигурации проекта и генерировать многоязычные страницы в зависимости от структуры файлов в директории src/pages. Подробнее можно почитать тут: https://docs.astro.build/en/guides/internationalization/.

***

Это все основные изменения, которые появились в новой версии Astro. Не могу сказать, что это достаточное количество и качество новшеств для мажорной версии, но я в любом случае планирую использовать всю мощь и удобство этого фреймворка для будущего переезда своего блога https://alexgriss.tech с WordPress на Jamstack, в который входит и Astro (чуть позже я расскажу, что такое этот Jamstack и с чем его едят). Я хочу попробовать использовать коллекции контента для постов и формат MDX, который позволяет встраивать динамический JSX прямо в markdown. Так что ускорение скорости сборки коллекций уж точно не помешает.

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

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

Ставьте 🤵, если согласны.

Я не понимаю, почему 👩‍💻 Tailwind внезапно стал модной заменой обычного CSS. Неужели миллион однозадачных классов на однотипных элементах лучше, чем один, но самописный и продуманный?

Хотел бы покритиковать аргументы в пользу выбора Tailwind, которые можно найти на официальном сайте и в различных статьях в интернете.

▶️ Лёгкость использования. C Tailwind вам нужно знать не только все CSS-свойства и их значения, но и встроенные во фреймворк алиасы для их использования. Вы думали, что утилитарный класс .p-10 означает CSS-правило padding: 10px;? Вот и нет, Tailwind так зашифровал внутренние отступы размером в 2.5rem. Будьте добры выучить это и ещё несколько сотен специфических классов.

▶️ Скорость и удобство написания стилей. Если в вашей вёрстке десять одинаковых пунктов меню, то копировать нагромождение классов придётся для всех десяти. Знаю, что объединять одинаковые наборы классов в один общий класс можно с помощью директивы @apply, но для этого нужно отойти от чисто инлайнового подхода написания стилей прямо в HTML и создать отдельный файл со стилями для утилитарных классов поверх наборов утилитарных классов. При этом использование @apply возвращает проблему инкапсуляции стилей и нейминга, о которой речь пойдёт в следующем пункте.

▶️ Не нужно задумываться о нейминге. Считаю это скорее минусом, чем плюсом, так как необходимость контроля над неймингом позволяет принимать более осмысленные решения при написании разметки и стилей. Я до сих пор готов рекомендовать подходы БЭМ и CSS Modules для работы с нативным CSS и решения проблем инкапсуляции стилей. Возможно, через несколько лет с распространением @scope решатся все боли верстальщиков, но сейчас я точно не вижу, чем набор лапши типа bg-white shadow-md rounded-md p-4 hover:shadow-lg transition duration-300 ease-in-out hover:bg-gray-200 лучше адекватно именованного БЭМ-класса или CSS модуля.

▶️ Небольшой размер файлов стилей. Да, в экосистему Tailwind встроена утилита, которая при сборке проекта может порезать лишние неиспользуемые классы. Однако, обычно требуется произвести нетривиальную настройку, чтобы добиться действительно существенного уменьшения размеров выходного файла со стилями Tailwind. Без этого шага размер стилевого файла может достигать более 10MB — со всеми лишними удобствами, компонентами и утилитами. При этом даже для урезанного файла нельзя будет настроить code splitting, чего ожидаешь от современного инструмента для работы с CSS.

Я понимаю, почему был популярен Bootstrap, ведь он давал не просто набор псевдонимов к всевозможного вида отступам и фоновым цветам разной яркости. Его классы были привязаны к парадигме 12-ти колоночной сетки и очень упрощали работу с проектированием и вёрсткой адаптивных интерфейсов, когда flexbox был чем-то экзотическим, а про CSS Grids никто ещё даже не говорил. Но я откровенно не понимаю, какую проблему решает Tailwind. Пожалуй, для меня всё это демонстрирует, что в попытках снизить принципиальную сложность стилизации, популярным может стать любой велосипед, который может упростить одни стороны этой сложности (вопрос — какие?), но привнесёт ещё больший хаос в другие. Особенно если для этого велосипеда написать побольше модных инструментов и хорошо разрекламировать.

Поделитесь, какое у вас мнение по поводу Tailwind?

👋 Всем привет!

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

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

При создании этого проекта мы поставили себе несколько амбициозных целей:

▶️ Продумать идеальный пользовательский путь, который будет интуитивно понятен. Для этого мы используем подход Customer Journey Map (CJM), с помощью которого можно наглядно проанализировать все пользовательские сценарии: от регистрации пользователя и создания проекта до переноса конкретной задачи из одного статуса в другой. Пользовательский путь выглядит как граф, узлами которого являются точки соприкосновения (touchpoints) с продуктом, а связи между узлами формируют различные сценарии взаимодействия. Создание такой наглядной схемы позволяет оптимизировать пользовательский опыт.

▶️ Разработать максимально удобный интерфейс, который будет интуитивно понятен и приятен в работе. Основой такого интерфейса будет механизм drag-n-drop, и в нашем проекте я использую современную React-библиотеку dnd-kit. Dnd-kit не использует HTML Drag and Drop API, так как он имеет несколько критических ограничений — это отсутствие поддержки touch-девайсов и довольно сложная кастомизация и настройка типовых интерфейсных решений.

▶️ Инструмент должен работать очень быстро: как на сервере, так и на клиенте. Для этого мы используем gRPC, который позволяет использовать бинарный формат для коммуникации между бэковскими сервисами и между бэком и клиентом (что даёт прирост примерно в х5 по сравнению с JSON REST API), умеет работать на любой платформе и в любой среде благодаря развитым инструментам кодогенерации, и особенно важно, что такая генерация существует и для веба. Protobuff-модели с описанием типов данных могут быть преобразованы в TypeScript-интерфейсы, с которыми можно удобно взаимодействовать на фронте, используя gRPC-web как основу для работы с gRPC-методами.

▶️ Инструментом можно будет пользоваться совместно в коллаборативном режиме. По умолчанию мы решили добавить стримы как основу работы с gRPC-методами, чтобы отслеживать действия разных пользователей, которые они совершают над задачами на одном экране. Со стримами, которые приходят от сервера на клиент, можно работать напрямую, всё также благодаря gRPC-web. В данный момент я нахожусь в процессе анализа и подбора технологий для работы с данными, полученными со стримов на фронте, пока что смотрю в сторону RxJS. Буду рад, если вы вдруг предложите какие-то свои идеи.

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

👇 Голосуйте за наиболее интересную вам тему. Так я смогу понять, о чём можно написать в первую очередь.

💓 Спасибо за ваши голоса, я вижу, что наибольший интерес вызвала тема Drag and Drop, так что буду готовить подробный пост про особенности работы с этим интерфейсным подходом.

А пока что я хочу рассказать про крайне полезный инструмент для совместной работы в VSCode, который мы используем в нашей мини-команде.

Это расширение LiveShare для 👩‍💻 VSCode и 👩‍💻 Visual Studio, которое разрабатывает Microsoft. Полную документацию по установке и настройке расширения можно найти тут: https://learn.microsoft.com/en-us/visualstudio/liveshare/quickstart/share.

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

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

Совместный дебаг проекта. Хост сессии может запустить процесс дебага проекта, с которым смогут одновременно работать все участники сессии.

Совместное использование локально запущенных серверов хоста. Хост может расшарить для всех участников сессии определённый порт, на котором локально запущен какой-то сервис: например, сервер баз данных, бэкенд API сервер или фронтенд-приложение.

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

LiveShare позволяет настраивать приватность: можно включить режим «только для чтения» или же ограничить файлы, доступные для совместного редактирования.

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

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

Изначально я хотел написать одну большую сборную статью — так много интересного материала я смог найти, но в итоге пост про Drag and Drop разросся до целой трилогии:

➖ История появления и эволюции подхода Drag and Drop: ретроспективный обзор развития технологии от появления в самом первом в мире графическом интерфейсе до современного веба. С архивными видосами и ностальгическими скриншотами. Статья уже доступна для чтения на Хабре: https://habr.com/ru/articles/788426

➖ Тонкости проектирования дизайна и юзабилити интерфейсов с Drag and Drop: как сделать "перетаскиваемый" интерфейс максимально удобным и эргономичным. Получилось очень объёмное руководство, которое можно прочитать по ссылке: https://habr.com/ru/articles/791294/.

➖ Техническая реализация Drag and Drop в вебе: подробный обзор нативного стандарта HTML5 Drag and Drop API и готовых библиотек для React. Это будет следующий материал в трилогии, так что следите за обновлениями в канале.

Жду ваших вопросов и комментариев! 🤵

О том, как я нашёл браузер своей мечты

Как фронтенд-разработчику, мне важно запускать и тестировать код в самых разных условиях. Для этого у меня стоит почти весь зоопарк актуальных браузеров и готов к работе аккаунт BrowserStack. Но чаще всего я работаю в 👩‍💻 Google Chrome и 👩‍💻 Firefox Developer Edition.

У Firefox удобнее интерфейс, чем в Chrome, однако, некоторые фичи в Firefox появляются позже, а его DevTools покрывает не все необходимые в работе задачи.

Для обычного сёрфинга и личных задач я всегда использовал Firefox, хотя с ним у меня связана одна драма. Когда-то давно в Firefox была очень полезная фича — Tab Groups (она ещё называлась Panorama). С помощью Tab Groups можно было создавать разные группы вкладок, которые помогали разделять пространства работы над разными задачами. Это помогало хоть как-то организовывать творческий беспорядок в открытых вкладках, когда их становилось слишком много в процессе активной работы. А потом эту фичу удалили... 😭

Разработчики из Mozilla говорят, что удалили Tab Groups из-за её низкой популярности (что-то типа 0.01% всех юзеров): поддерживать работу над фичёй стало просто нерентабельно. Я отлично помню тот момент, когда после очередного автоматического обновления все мои группы вкладок удалились вместе с контекстом работы над важным проектом.

Долгое время я использовал вместо Tab Groups сторонние расширения или пытался работать сразу в нескольких браузерах. Это всё работало плохо, но недавно я нашёл браузер 👩‍💻 Arc — экспериментальную оболочку для движка Chromium. И все мои проблемы решились разом⚒

В Arc тоже есть аналог Tab Groups, который называется Spaces (пространства), и по сути это те же группы вкладок, которые открываются в разных окнах и позволяют разделить контексты работы.

Сами вкладки в Arc расположены не в горизонтальном списке наверху программы, как в остальных браузерах, а вертикально сбоку. И почему до этого никто не додумался раньше? Работать с таким списком в разы удобнее, чем со съёживающимися до сантиметра превьюшками вкладок в Google Chrome. В Arc же все открытые вкладки можно сгруппировать по папкам, а каждой открытой вкладке можно дать новое название, чтобы ориентироваться по ним ещё лучше.

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

Вообще Arc — это очень "прокачанный" и удобный браузер. Например, у него есть встроенная консоль, похожая на маковский Spotlight, в которой можно легко запускать различные команды, открывать конкретные страницы или переходить в поисковую систему с набранным запросом. В Arc встроен инструмент создания заметок и интерактивных досок как в Miro — в них можно записывать идеи, рисовать схемы и легко делиться с друзьями и коллегами. Со всем функционалом Arc можно познакомиться тут.

Могу порекомендовать Arc не только тому 0.01% людей, которым интересно организовывать работу, используя несколько групп вкладок, но и тем, кто любит кастомизировать программы под себя, и кому интересно переизобрести или хотя бы освежить для себя опыт сёрфинга в интернете. К сожалению, сейчас это получится только у пользователей Mac, для Windows продолжается набор участников в бета-тестировании.