Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений

Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.

Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices

#javascript #nodejs #тестирование

@tproger_web
Читайте также в VK и Max

Ох уж этот уникальный японский веб-дизайн

Японцы известны своим минимализмом, но в случае сайтов у них, почему-то, всё наоборот. Страницы пестрят всевозможными цветами, что уже нарушает 3 принципа дизайна, плюс на них используются мелкие иконки и мно-о-о-о-го текста.

Автор этого материала решила проанализировать с помощью ИИ какие паттерны дизайна сегодня существуют в мире. Это помогло разобраться в причинах такого необычного японского подхода к сайтостроению. Подробности в статье: https://habr.com/ru/companies/ruvds/articles/1003532/

#дизайн #ui

@tproger_web
Читайте также в VK и Max

Код для входа: какие джуны нужны в 2026 году

Рынок труда для новичков в ИТ больше не похож на открытые ворота. Это хорошо охраняемый объект с пропускной системой. Код для входа меняется каждый год. В 2026 году компаниям нужны не энтузиасты, а специалисты с конкретным набором «ключей» — это касается даже начинающих.

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

@prog_point (теперь ещё в VK и Max)

Ключевой нюанс якорного позиционирования в CSS

В CSS якорное позиционирование накладывает строгие правила на структуру DOM и последовательность элементов. Привязываемый элемент может появиться только после полной отрисовки якорного, поэтому важно тщательно продумывать их порядок и иерархию в документе.

Подробнее об этой особенности: https://frontendmasters.com/blog/the-big-gotcha-of-anchor-positioning/

#css

@tproger_web
Читайте также в VK и Max

Это уже какой-то вайб-сисадмининг получается

@tproger_web
Читайте также в VK и Max

Эволюция конечных автоматов: от кода-монстра к визуальным схемам

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

Часть 1
Часть 2

А вы используете конечные автоматы в своих проектах?

#бэкенд #фронтенд #архитектура

@tproger_web
Читайте также в VK и Max

Браузеры научатся лениво грузить видео и аудио — стандарт на подходе!

Скотт Джел из Squarespace добился поддержки loading="lazy" для <video> и <audio> — аудио и видео теперь можно будет подгружать только при скролле к элементу, как у картинок. Никаких скриптов, чистый HTML.

Уже в Chrome Canary (флаг --enable-features=LazyLoadVideoAndAudio), патчи для Firefox/WebKit в работе. Тесты: видео с автоплеем ждёт viewport, запросы в DevTools видно. Идеально для длинных страниц с медиа — экономия трафика и CPU.

Стандарт в HTML уже скоро. Подробности: https://scottjehl.com/posts/lazy-media/

#веб #html

@tproger
Читайте также в VK, Max и Дзен

У админа есть идея для медицинского стартапа. Про сферу ничего не знаю, но тема 100% рабочая. Пишите в личку

@tproger_web
Читайте также в VK и Max

Великий раскол во фронтенде: джаваскриптеры против HTML/CSS-мастеров

Старая, но интересная статья о том, как фронтенд-комьюнити раскололось на два лагеря. Одни живут в React/Vue/Node.js и считают HTML/CSS «для дизайнеров», другие обожают чистый CSS Grid, доступность и семантику — и презирают обилие JS-кода.

С одной стороны JS-фреймворки усложняют простые сайты, но дают мощь SPA. С другой — HTML/CSS проще вход, но не тянет сложную логику. Оба лагеря растут в сложностях — никто не знает всего.

Давний спор особенно интересен с учётом развития ИИ и изменений парадигм разработки в целом. Осуждаем в комментариях, а читаем здесь: https://css-tricks.com/the-great-divide/

@tproger_web
Читайте также в VK и Max

Спрайты в вебе: техника анимаций из игр на чистом CSS

Josh Comeau показал, как спрайтшиты из геймдева оживают в браузере без JavaScript. Берешь PNG с кадрами (например, мерцающий трофей или спящая анимированная героиня), вставляешь в <img> и переключаешь фреймы.

Для motion-дизайнеров и фанатов ретро-эффектов обязательно к прочтению: https://www.joshwcomeau.com/animation/sprites/

JavaScript localStorage: что такое и как использовать?

LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.

В статье рассказали, как работает и как использовать localStorage в JS: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/

#js

@tproger_web
Читайте также в VK и Max

Vite 8 вышел — теперь на Rust и с новым бандлером!

Команда Vite выпустила 8-ю версию: прощай дуэт esbuild + Rollup, здравствуй Rolldown — единый бандлер на Rust, в 10-30 раз быстрее сборок. Полная совместимость с плагинами, никаких глюков — протестировано на Linear (46с → 6с), Ramp (-57%) и других.

Что нового: реестр плагинов registry.vite.dev, devtools для дебаггинга, tsconfig paths из коробки, emitDecoratorMetadata, Wasm в SSR, консоль браузера в терминал (для агентов ИИ) и не только.

Подробности по ссылке: https://vite.dev/blog/announcing-vite8

#vite #веб

@tproger
Читайте также в VK, Max и Дзен

Забудьте innerHTML — встречайте setHTML для безопасного JS

Появился новый метод .setHTML() из Sanitizer API — прямую замену опасному innerHTML(). Теперь можно вставлять HTML без риска XSS-атак, браузер сам чистит код от вредных скриптов.

В Firefox 148 это уже работает, Chrome/Safari на подходе. Никаких библиотек вроде DOMPurify — чистый стандарт, drop-in замена. Идеально для динамических дашбордов, админок и всего, где юзерский контент.

Подробнее можно узнать в статье: https://hacks.mozilla.org/2026/02/goodbye-innerhtml-hello-sethtml-stronger-xss-protection-in-firefox-148/

@tproger_web
Читайте также в VK и Max

Сделал бы с первого раза без ошибок и отдыхал

@tproger_web
Читайте также в VK и Max

Dembrandt: извлекаем дизайн-системы сайтов одной командой

Open-source инструмент Dembrandt анализирует любой сайт и вытаскивает токены дизайна: цвета, шрифты, отступы, тени, радиусы, состояния кнопок и даже брейкпоинты. Выводит в JSON по стандарту W3C, делая пригодным для использования с Figma, Tailwind или Storybook.

Инструкция по использованию и установке по ссылке: https://www.dembrandt.com

#инструменты

@tproger_web
Читайте также в VK и Max

Как создавать сложные расширения Chrome

Создать сложное расширение для браузера не так-то просто, особенно для новичков.

Но не волнуйтесь. Это руководство покажет вам, как сделать полнофункциональное расширение для Chrome на реальном примере!

В итоге у вас получится расширение для сохранения изображения с любых сайтов в ваш сервис через API.

#extensions #chrome

@tproger_web
Читайте также в VK и Max

Сloudflare показал новый /crawl endpoint в Browser Rendering. Достаточно отправить стартовый URL, а сервис сам найдёт все страницы (через sitemap/ссылки), отрендерит в headless-браузере и вернёт HTML, Markdown или JSON (Workers AI).

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

#новости

@tproger_web
Читайте также в VK и Max