⚡️ Наглядно, как работает Веб и что происходит при переходе по URL

#doc #cheatsheet

🧪 Тестирование JavaScript-кода с помощью библиотек Jest и Cypress

Тестирование вашего JavaScript-кода стало проще благодаря Jest и Cypress. Эти инструменты предлагают мощные функции для написания эффективных тестов и автоматизации. 📊

Jest: Фокусируется на тестировании модулей и компонентов.

Cypress: Идеален для end-to-end тестирования.

🔗 Обучающие материалы: Testing JavaScript

🌟 Убедитесь, что ваш код работает безупречно!

@javascriptv

Подборка механических клавиатур: 5 беспроводных моделей для работы и творчества / Хабр
https://habr.com/ru/companies/first/articles/848086/

Бывший член совета директоров Linux Foundation пояснил причины удаления мэйнтейнеров из РФ https://opennet.ru/62106/

Jujutsu — новая система контроля версий / Хабр
https://habr.com/ru/articles/853416/

Создателю Флибусты Стиверу, с благодарностью от Java / Хабр
https://habr.com/ru/articles/856128/

Прекрасные аутлайны для фокуса

Томас Гюнтер делится советами, как сделать хорошее выделение фокусом, если дефолтные браузерные вам не подходят.

1. Используйте :focus-visible вместо :focus. В таком случае фокусное выделение будет показываться тогда, когда оно действительно нужно.

2. Если нужно выделить только текст, без фона, можно цветом обводки сделать currentColor — в целом, смотрится неплохо. В статье есть готовый сниппет, который можно попробовать вставить в проект как умолчание, если дизайнер пока не придумал отдельно фокусные состояния интерактивных элементов.

3. Когда элемент находится на каком-то фоне, нужно помнить про контрастность, подсматривать в рекомендации WCAG. Красивая белая обводка на белом фоне — лучше уж дефолтная браузерная.

4. Обводку можно делать двойную (внутри светлое, снаружи тёмное) при помощи outline и box-shadow. Вполне себе универсальный паттерн, который будет смотреться хорошо почти на любом фоне, если вдруг не наткнётся на опасный overflow: hidden.

5. Можно в принципе не делать никакую обводку, если есть уже готовые стили для :hover, которые явно меняют внешний вид элемента, чтобы было видно, что он выделен. Заметное изменение фона, цвета текста, тени или бордера — что угодно, лишь бы было понятно, что я сфокусировался на элементе.

https://medienbaecker.com/articles/focus-outlines

Новый этап эволюции Vue — Vapor / Хабр
https://habr.com/ru/companies/first/articles/856346/

Вся правда о переходе с монолита на микросервисы, когда у тебя сеть из десятков тысяч магазинов: опыт Х5 Tech / Хабр
https://habr.com/ru/companies/netologyru/articles/857026/

Лучшие backend-фреймворки для веб-разработки в 2024 году / Хабр
https://habr.com/ru/companies/timeweb/articles/856584/

Хабр: «Энциклопедия профессора Фортрана»: вспоминаем легендарную книгу из детства миллениалов
https://habr.com/ru/companies/ruvds/articles/856730/

У CSS новый лого

Пока в соц. сетях между адептами Tailwind и БЭМ идут очередные тёрки, а AI-стартапы учатся генерировать целые приложения в 2 клика, Адам Аргайл запустил на гитхабе голосование за новый логотип CSS. Началось это ещё в августе, а буквально вчера выбор был сделан.

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

https://github.com/CSS-Next/logo.css

Разработка Telegram Mini App с помощью React / Хабр
https://habr.com/ru/companies/timeweb/articles/858382/

Новый PHP-фреймворк Imhotep: быстродействие, оптимизация и импортозамещение / Хабр
https://habr.com/ru/news/861314/

Релиз набора инструментов для фронтенда Vite 6.0 / Хабр
https://habr.com/ru/news/861750/

Заметил, что многие пропустили появление satisfies в TS 4.9, а штука-то классная.
Объясняю на пальцах. Иногда нам нужно убедиться, что объект соответствует какому-то типу, но при этом нужно сохранить специфичность типа.

type TestType = {a: number | string; b?: string};

const testObject = {a: 1} as TestType;

testObject.a.toFixed(); // Ошибка: Property 'toFixed' does not exist on type 'string'.

Используем satisfies

type TestType = {a: number | string; b?: string};

const testObject = {a: 1} satisfies TestType;

testObject.a.toFixed();  // Никаких ошибок

testObject.b?.toUpperCase(); // Ошибка: Property 'b' does not exist on type '{ a: number; }'

Полезные чипсы с Vue 3 Composition API: Создание адаптивного компонента с фильтрацией и множественным выбором / Хабр
https://habr.com/ru/articles/863210/