Упрощаем добавление значений в Map 👨🏻‍💻

Недавно все основные браузеры стали поддерживать очень удобный вариант безопасного добавления значения в Map

Сейчас при добавлении ключа, мы как правило сначала проверяем его наличие, и в этом случае не производим добавление

const map = new Map([["key", "value"]]);

if (map.has("key")) {
  return;
}
map.set("key", "value");

Теперь можно сэкономить три строки и вызвать новый метод, который сделает эту проверку за нас

const map = new Map([["key", "value"]]);

map.getOrInsert("key", "value"));

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

Документация

#заметки

Цифровая доступность (a11y) в Angular 📺

Серия статей на английском про цифровую доступность в Angular приложениях

1️⃣ Введение — история и место цифровой доступности в современном мире

2️⃣ Инструменты тестирования — обзор инструментов, позволяющих следить за доступностью

3️⃣ Роутер — возможности роутера, связанные с доступностью

4️⃣ ARIA и атрибуты — обзор атрибутов и ролей доступности

5️⃣ Формы — возможности форм, связанные с доступностью

6️⃣ Angular CDK — возможности CDK для улучшения доступности

7️⃣ Angular ARIA — новоиспечённые директивы для соблюдения WAI-ARIA паттернов

#статья #доступность

Рефлексия на работе 🧘🏻‍♂️

Хочу поделиться очень классной практикой, которой пользуюсь уже на протяжении долгого времени

Я организовываю рабочее время так, чтобы оставлять себе 15 минут в начале и в конце дня чтобы просто оглянуться назад и заглянуть вперёд

🌆 Вечером:
По результатам дня я пытаюсь понять, что сделал (что успел, что нет и почему), а так же что планирую сделать завтра и всё это записываю куда-то чтобы сразу же не забыть (если есть какие-то важные детали, их тоже лучше записать)

🌇 Утром:
Я возвращаюсь к вечерним записям, быстро вспоминаю свой прогресс и примерно знаю, что нужно делать сегодня

Какие плюсы вижу для себя:
▪️В конце рабочего дня я ставлю логическую точку и больше не думаю о работе (стараюсь😅)
▪️В начале рабочего дня я чётко могу сказать что было вчера и вспомнить детали и контекст при наличии (особенно это полезно после выходных)
▪️Голова становится свободнее

Попробуйте сегодня вечером, а вдруг понравится😉

#советы

Особенность подчёркивания текста 🔗

Все мы привыкли искать ссылку по характерному синему тексту и подчёркиванию снизу

И мало кто задумывался как браузеру непросто подчеркнуть текст на любом языке 🤔. Недавно мне было необходимо добавить подчёркивание текста, который имел всем знакомую букву «Д» в начале

Я как обычно сделал

text-decoration: underline;

Но из-за того, что ножки буквы распологаются достаточно низко, она как будто не была подчёркнута. По умолчанию браузер не подчёркивает выступающие сверху или снизу глифы, но не всегда это выглядит опрятно

На помощь пришло ещё одно свойство, которое отключает это поведение, и мы видим подчёркивание всегда

text-decoration-skip-ink: none;

Документация

#заметки #css

Доступен Angular 22 🚀

Недавно на работе обновлял зависимости и дошёл до 21 версии и вот 22 не заставила себя ждать

Что интересного 📰

▪️Signal forms и Signal API в виде resource и httpResource готовы к проду с обновлённой документацией и исправлением всех замечаний

▪️@Injectable({providedIn: ‘root'}) можно заменять на новый @Service()

▪️После внедрения Zoneless, OnPush стратегия устанавливается по умолчанию, а чтобы её отключить используется Eager

▪️Эспериментально представлен асинхронный DI с помощью injectAsync() для lazy-загрузки зависимостей

▪️Добавлен набор Skills для Angular, которые так же можно использовать с вашими агентами

▪️Представлен (доступен будет позже) блок @boundary, который позволит недопустить падения страницы из-за одного элемента

▪️Экспериментально добавлена интеграция с Navigation API и очистка ресурсов неиспользуемых маршрутов воизбежание утечек памяти

Больше подробностей в официальной статье 🗞️

#новости

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад с советами и рекомендациями по подготовке к архитектурной секции интервью. Автор рассказал как подготовиться к таким интервью, а также поделился своим видением архитектуры веб-приложений

2️⃣ Доклад про то, как показывать меньше лоадеров и грузить сайт быстрее. Доклад включает в себя не самые тривиальные рекомендации

3️⃣ Доклад про промышленный дизайн автономного грузовика Яндекса

#видео

Управляем начертанием цифр 🔢

Давно слышал про это CSS-свойство для изменения стиля цифр и знал, что когда-нибудь оно пригодится и вот его время пришло, поэтому расскажу и вам👨🏻‍💻

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

Для управления начертанием цифр существует свойство font-variant-numeric. Данную проблему решает значение tabular-nums, которое делает ширину каждой цифры одинаковой

Вот другие полезные значения:

slashed-zero — ноль будет с чертой внутри для отображения разницы между нулём и буквой «О»

oldstyle-nums — набор строчных цифр, в котором 3, 4, 7, 9 свешены с базовой линии

Больше примеров и информации в документации

#заметки #css

Отключение автозаполнения 🚫

Недавно столкнулся с необходимостью отключить автозаполнение и хочу рассказать что получилось

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

Решение:
У инпута есть атрибут autocomplete со значением off, который должен решить проблему, но браузер игнорирует это значение и это не баг, а осознанное решение из-за жалоб людей, которые критиковали браузер за отсутствие автозаполнения, хотя виноваты были сайты 🤔

А вот значение new-password отключает заполнение и говорит браузеру, что это поле для нового, а не для существующего пароля.
Но если нажать на поле два раза, предложение заполнить есть, пока что мы перенесли поле пароля в вёрстке в начало формы, чтобы оно заполняло только себя 🩼

Документация

#заметки

Договорённости не работают 🤐

Думаю все мы привыкли договориваться с коллегами о каких-либо правилах: написание кода, тестов и так далее 👨🏻‍💻

Но я постоянно слышу фразу «Если договённость ничем не закреплена, считайте ее нет» и готов с ней согласиться, даже если в команде всего два человека

Почему же?

1️⃣ Через полгода коллеги могут смениться, а вы уже забудете о чём договаривались

2️⃣ Код ревью становится более предметным, так как вы не следите за договорённостями вручную

3️⃣ В эпоху ИИ-агентов вообще лучше всё закреплять инструментами, чтобы они не отступали ни на шаг от ваших принципов

Именно поэтому никогда не забывайте закреплять все договорённости линтерами, документацией и другими подходящими инструментами ✍️

#заметки #советы

Подборка свежих статей 🗞️

В течении недели смотрю разные ресурсы и сохраняю статьи, которые вызвали интерес, а на выходных по возможности читаю их

Попробую поделиться подборкой хороших статей за последние пару недель, вдруг не одному мне будет полезно

🤔 Точно ли здесь нужен `any`? 13 сценариев из TypeScript-код-ревью — от `unknown` до границы приложения
В статье в мельчайших деталях раскрывается как в 100% случаев можно избежать использования any в коде и как грамотно донести это на код-ревью
Читать

🚧 Технический долг в деньгах: как считать ROI рефакторинга легаси-системы
Статья о том, что такое техдолг и как грамотно донести необходимость его погашения бизнесу
Читать

🏘 Хороший код, но плохая архитектура
Статья о том, как незаметно при написании хорошего на текущий момент кода появляется плохая архитектура и как можно попытаться избежать её в будущем
Читать

#статья

Не доверяй обновлениям 💻

Сегодня популярен подход zero-trust, который подразумевает, что всё должно быть запрещено по умолчанию, а все разрешения должны быть получены ✅

Глядя на новости о том, что даже самые популярные пакеты (например, axios) могут содержать уязвимости, становится ясно — никому нельзя доверять

Именно поэтому мы отказались от использования спецификаторов версий в нашем package.json и устанавливаем только конкретные версии пакетов и не ожидаем сюрпризов

1️⃣ Добавили в конфиг

npm config set save-exact true

2️⃣ Написали тест на проверку наличия спецификаторов в package.json

К счастью, с проблемой безопасности мы до этого не столкнулись, а вот с упавшей при мерже в main сборкой из-за того, что один из пакетов решил поднять себе патч-версию и стал несовместим с другими, столкнулись, поэтому будьте осторожны❗️

#заметки #безопасность

Пошаговая инструкция по внедрению скелетон-загрузки в ваше приложение 📑

У меня вышла статья, где я рассказываю о том, как мы внедряли скелетон-загрузку в приложение с семилетней историей 👨‍💻

В ней я рассказал немного теории, как мы анализировали приложение для оптимизации трудозатрат, как пошагово внедряли скелетон-загрузку и как мы поддерживаем и развиваем это решение

В статье много картинок, поэтому если любите их - welcome 😁

Читать

#статья

«Джедайские техники», Максим Дорофеев 📓

Давно хотел прочитать эту книгу и вот, наконец, закончил 🎉

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

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

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

И это далеко не всё. В ней очень много полезного, однозначно рекомендую

📚 Обычно даю PDF-файл тут @frontendanyabooks, но в этот раз не нашёл. Купить её на любом маркетплейсе не составит проблем🛍

#книги

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад о том, как оптимизации могут привести к неожиданным последствиям и выстрелить в ногу

2️⃣ Доклад о том, как устроена дизайн-система ЮMoney с некоторыми подробностями реализации

3️⃣ Доклад о том, как в Ozon работает предзагрузка страниц, которая оптимизирует скорость загрузки

4️⃣ Доклад об истории поэтапного техноапгрейда легаси фронтенд проекта

#видео

Рекомендации по поддержке мультибрендового приложения 👨🏻‍💻

Недавно превращал приложение, которое создавалось с учётом одного бренда в мультибрендовое, и готов поделиться некоторыми советами по тому, как поддерживать мультибрендовость и не получать баги типа: «У вас тут цвет или название другое вылезло»

Рекомендации:

▪️Напишите правило для линтера на поиск упоминания названий брендов и уберите их из кода (тексты, названия переменных, компонентов, файлов и так далее). Таким образом вы получите независимый код для любого количества брендов

▪️Установите запрет на явное использование цветов в коде и вынесите все небрендовые цвета в отдельный файл, а для брендовых заведите файлы конфигурации и следите за их изменениями

▪️Вынесите в конфигурации все возможные логотипы и другие ассеты, а ссылки на них подставляйте при сборке

▪️Убедитесь ещё раз, что каждый из брендов ничего не знает о других

#заметки

Jest съел всю оперативку и уронил WebStorm 😱

Купил себе MacBook с 24 ГБ оперативки, запускаю тесты — и через минуту WebStorm просто вылетает 🤯

Открываю монитор — вся оперативка забита

Приехали, на более слабом Windows ноубуке я такого не встречал. Да, тесты шли дольше, но ничего не вылетало

Оказалось, Jest по умолчанию жрёт все ядра и всю память, которую найдёт. А тестов у нас много, вот он и разгулялся

Пофиксил двумя строчками в конфиге (ограничил число воркеров и память для каждого):

{
  "maxWorkers": 4,
  "workerIdleMemoryLimit": "2GB"
}

И всё, тесты работают, WebStorm жив 🔥

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

#заметки #jest

Расскажи всем о коде, который написал🙊

Правило простое: делаешь коммит — напиши пару предложений понятным языком. Что сделал и зачем

Да, по коду может и так всё понятно, но это сегодня и завтра. А через полгода? А когда поверх будут ещё десятки коммитов?

Стараюсь всегда давать такие описания своим изменениям и
каждый раз говорю себе спасибо, потому что чётко понимаю, зачем было сделано то или иное изменение, что проверить и так далее 🔧

Это полезно как для людей, которые будут работать с кодом, так и для ИИ, ведь он будет иметь чуть больше контекста

Мораль: хорошее сообщение коммита — это не бюрократия, а подарок себе будущему 🔥

#советы #git

Как протестировать сайт на телефоне 📱

*проверено в связке MacBook + iPhone (не знаю как будет на других)

Недавно появилась необходимость запустить html-файл на телефоне, чтобы проверить вёрстку, сохраню инструкцию здесь, вдруг кому-нибудь понадобится

1️⃣ Узнаём свой IP с помощью команды

ipconfig getifaddr en0

2️⃣ В консоли переходим в нужную папку где лежит файл, который необходимо открыть

3️⃣ Далее запускаем сервер с помощью команды, в которую необходимо вставить ранее полученный IP (для начала, скорее всего надо будет установить Python)

python3 -m http.server 8000 --bind ${IP}

4️⃣ После, на телефоне переходим на

http://${IP}:${запущенный порт}/${путь до нужного файла}

Теперь необходимый файл доступен с телефона 💪

#заметки

Осторожно, ошибка 🚧

Иногда при подсвечивании ошибки TypeScript нам приходится использовать // @ts-ignore — конечно, это должен быть исключительный случай, но такое бывает

Ошибка исчезла, но часто это мина замедленного действия 🧨

Сегодня хочу напомнить про более безопасную альтернативу — // @ts-expect-error

В чём разница?

ts-ignore — просто глушит ошибку всегда, даже если её уже нет. Через месяц вы уберёте код, а ignore останется — и будет молча скрывать новые ошибки

ts-expect-error — требует, чтобы ошибка была. Если её нет — TypeScript скажет, что тут ошибки нет и попросит убрать директиву

А ещё можно включить правило, которое обяжет вас коммент с объяснением оставить
@typescript-eslint/ban-ts-comment

По итогу у вас получится вот такая запись, которая будет работать только тогда, когда ошибка есть и дополнительно объяснять, почему она возникла

// @ts-expect-error — библиотека уже не экспортирует типы, но всё работает корректно
import { foo } from 'legacy-lib'

#советы #typescript

Месяц работы с ИИ-агентом. Хронология принятия 🤔🤖

1️⃣ Этап 1. Полное отрицание

«Да я сам, я точно сделаю лучше»
Классика — не доверие к тому, что не контролируешь, и кажется, что быстрее сделать руками

2️⃣ Этап 2. Принятие

«Оказывается рутину можно делегировать. Да и тесты он неплохо пишет»
И это правда экономит время — ты не тратишь его на однообразные вещи, а занимаешься чем-то более важным

3️⃣ Этап 3. Как я раньше писал всё сам?

Теперь я понимаю: если заберут агента — обратно к прошлому циклу вернуться будет сложно

⚠️ Есть, конечно, ряд нюансов

‼️ Если ты не понимаешь каждую строку, которую получаешь от него — это мина замедленного действия

‼️ Если у тебя нет рамок и ограничителей в виде тестов, линтеров, скиллов и тд — скорее обзаводись ими, чтобы получать ожидаемый результат

Пока не могу позволить себе не проверять всё за ним, ответственность всё равно на мне. За упавший прод агента не уволят, надо это помнить 😅

Опыт интересный, двигаемся дальше 🚀

#советы #ai