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

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

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

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

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

Читать полностью…

Полноценный эмулятор процессора архитектуры x86 на чистом CSS? Да!

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

Как это реализовано технически:
— эмулятор исполняет реальный машинный код для процессоров 8086;
​— тактовый генератор построен на CSS-анимациях, поэтому система работает автономно и не требует от пользователя постоянно водить курсором по экрану;
​— логика работает благодаря новым спецификациям CSS, таким как условные операторы if(), стилевые запросы и кастомные функции

Вы даже можете запустить в этом эмуляторе собственные программы. Достаточно написать код на C и прогнать его через GCC с помощью скрипта из репозитория автора. На выходе вы получите готовый HTML-файл со стилями, внутри которого будет крутиться ваш бинарник.

Да, современный CSS действительно стал тьюринг-полным языком программирования. Но из-за использования экспериментальных функций запустить демку пока можно только в браузерах на базе Chromium.

Подробности на сайте.

#css

Читать полностью…

Победителями премии Тпрогер 🐀становятся...

Здесь играет барабанная дробь и интригующая музыка... Вам нужно только выждать драматическую паузу перед объявлением победителей — в каждой номинации он один, и определяется большинством голосов. Готовы?

В номинации «Продукт года» золотая мышь достается компании:
🐀NetVision за платформу интеллектуального мониторинга СИМ.

В номинации «Облачный продукт года» побеждает компания:
🐀Гравитон с паком виртуализации «Гелиус»

Звание «IT-ивент года» вручается компании:
🐀Островок! за О!Хакатон

И в категории «Дизайн года» первое место занимает компания:
🐀AcademiaDev за интерактивную инсталляцию.

Каждый ваш лайк, голос влияли на исход премии. Давайте поддержим всех — ставьте 🏆участникам, которые хоть и не заняли призового места, но точно остались в сердечке.
И 🔥, если хотите аналогичных активностей и готовы выбирать еще!

Читать полностью…

Разыскивая виновника, главное — не выйти на самого себя

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

Читать полностью…

Playwright и Allure как хорошая практика для разработки веб-приложения

Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Один из рабочих рецептов — это фронт + E2E-тесты.

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

Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.

В статье автор рассказывает, как пользоваться этими инструментами и как прогонять порядка 1000 автотестов в сутки, имея всего 2 тестировщика вместо 15: https://habr.com/ru/companies/clevertec/articles/822583/

#react

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

Читать полностью…

Внезапное порно в Conda

История такая: один разработчик хотел посмотреть YouTube, открыл меню «Пуск» в винде, начал вбивать You и увидел подсказу YouPorn. Очень удивился, потому что он не смотрит порно (конечно, а как вы подумали).

Начал расследование. Оказалось, что файл с таким именем лежит в

Anaconda3\pkgs\protego\info\test\tests\test_data

Protego — Python-библиотека для парсинга файлов robots.txt. В её тестовых данных есть пример файла robots.txt с сайта YouPorn т.е. обычный тест на реальных данных из интернета. Никакого вредоносного кода, никакой атаки на supply chain, просто Windows Search проиндексировал содержимое тестовых файлов внутри пакетов Conda.

Это хороший повод напомнить: Windows Search индексирует всё подряд, включая содержимое директорий с пакетами. При разработке на винде лучше добавить такие диры в исключения. Или не разрабатывать на винде.

@zen_of_python

Читать полностью…

Давно в VS Code встроенный код ревьюер появился?

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

Читать полностью…

Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax

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

#javascript #видео

Читать полностью…

Курс по основам компьютерных сетей

Хотите разобрать компьютерные сети от физического уровня до DNS с нуля, как на экзамене с бумагой и ручкой? freeCodeCamp выложил бесплатный курс "Computer Networking Fundamentals" от Kshitij Sharma — 12+ часов глубокого погружения в стек сетей.

Смотрим по ссылке: https://www.youtube.com/watch?v=fQbBPa0ADvs

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

Читать полностью…

Проголосовали за все номинации?

До конца нашей Tproger Award осталось совсем ничего — уже 28 февраля закончится голосование, а в марте мы узнаем, кто получил золотую мышь.

Kind reminder — все кейсы претендентов на победу мы собрали на сайте. Поторопитесь, в этом народном голосовании важен каждый голос!

Читать полностью…

UI-паттерны для асинхронных задач и пайплайнов

Статья на LogRocket разбирает, как бороться с неопределённостью пользователей во время фоновых задач — импорт файлов, обновления, ETL-пайплайны. Главная идея: делайте невидимую работу видимой, чтобы юзеры не паниковали от спиннеров с загрузкой.

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

Читать полностью…

Сравнение golang веб-фреймворков 2026 года: топ-5 лучших вариантов

Не можете выбрать веб‑фреймворк для проекта на Go? Мы сравнили топ‑5 вариантов 2026 года: Gin, Fiber, Echo, Chi и Beego! Разбираем плюсы, минусы и сценарии использования — читайте и выбирайте лучший!

#golang

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

Читать полностью…

Возьмут, чтобы узнать продолжение

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

Читать полностью…

Navigation API — удобный способ навигации,​ теперь доступен в базовой версии во всех основных браузерах

Наконец-то стал доступен официальный роутер для SPA без хаков на history.pushState. Десятилетия жалоб на History API позади.

Всё упрощается до одного слушателя navigation.addEventListener('navigate'), который ловит клики по ссылкам, формы, back/forward и даже programmatic navigation.navigate(). event.intercept() автоматически обновляет URL, историю, фокус (a11y), а ты просто рендеришь контент в handler().

Примеры и подробности в статье.

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

Читать полностью…

Где лучшие тусовки? На тех-ивентах!

Последняя по очереди, но не по значимости — номинация «IT-ивент года». Здесь тоже собрались три компании, и если вы еще не добрались до чтения их кейсов, то давайте сделаем это вместе.

— Лаборатория Числитель собрала конференцию, на которой обсуждают строго только K8s.

— Мероприятие Selectel, которое стало уже традицией, делали полностью in-house.

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

Выбирайте компанию-фаворита и вручайте ей золотую мышь — голосование доступно на сайте.

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

Читать полностью…

Любопытный факт: базовый комплект из 12 документов (сканы и фото основного разворота паспорта и страницы с пропиской, СНИЛС, ИНН, трудовой книжки, СТД-Р, военного билета, свидетельств ЗАГС о браке и рождении, диплома об образовании, загранпаспорта и водительского удостоверения) специальные OCR-программы могут распознать 100 раз за минуту на сервере без GPU.

Что для этого нужно, рассказывают здесь: https://tprg.ru/HVQO

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

Читать полностью…

Эдди Османи из команды Google Chrome опубликовал отличную ретроспективу про историю развития Core Web Vitals. Если вы когда-нибудь оптимизировали LCP или пытались побороть сдвиги вёрстки ради зелёной зоны в Lighthouse, этот лонгрид стоит добавить в закладки.
​
Внутри собрано много закулисья о том, как интернет уходил от закрытого формата AMP к открытым стандартам:

— как исследователи выбирали пороги для метрик и почему отклик интерфейса должен занимать не больше 100 миллисекунд;
​
— каким образом показатели скорости стали частью алгоритмов ранжирования в поиске Google;
​
— сколько времени сэкономили пользователям все эти оптимизации (только за 2024 год набежало почти 30 тысяч лет ожидания).
​
Отдельный интерес для инженеров представляет блок про будущее оценки производительности. Османи подробно объясняет переход от старого показателя FID к более честному INP, который замеряет задержки ввода на протяжении всей сессии пользователя, а не только при первом клике.

Ссылка на статью: https://addyosmani.com/blog/core-web-vitals/

@tproger_web

Читать полностью…

Это понравится дизайнерам: появился ИИ для создания векторной графики

Arrow 1.0 позволяет с помощью простого промпта создать изображение на чистом SVG. Такие изображения легко добавить в макет на сайте, сделать с ними лого, ну и подредактировать, если понадобится.

Работает бесплатно.

Читать полностью…

Новые реактивные формы в Angular: Signal Forms API

В 21 релизе Angular команда разработчиков представила экспериментальное API для построения реактивных форм с помощью сигналов. Тому, кто знаком с классическими Reactive Forms в Angular, новый Signal Forms API покажется эволюционным шагом: те же мощные возможности, но с сигналами — а значит, с автоматической реактивностью, полной типизацией и меньшим количеством шаблонного кода.

В статье вы узнаете, как с помощью сигналов теперь можно быстро создать типобезопасную форму, настроить валидацию с условными правилами, гибко управлять состояниями полей и легко встраивать кастомные компоненты-контролы.

#angular

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

Читать полностью…

Как бы выглядел интернет, если бы Adobe не убила Flash

Вспомните нулевые — браузерные страницы мигали баннерами и интерактивными элементами, игры запускались прямо во вкладке, а Flash Player был знаком почти всем. Но в 2020 году Adobe завершила его поддержку и начала блокировать Flash-контент. Так и закончилась эта история. А что было бы, если всё пошло иначе? Историю Flash и альтернативный сценарий разобрали в статье.

#историяit

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

Читать полностью…

Что умеет новый псевдокласс :near(), который может появиться в браузерах

В CSS может появиться псевдокласс :near() — он реагирует на расстояние курсора или сенсорного ввода до элемента, измеряя его в реальных единицах вроде пикселей или сантиметров. Это откроет двери для динамических интерфейсов: например, подсвечивать кнопки при приближении мыши, показывать всплывающие подсказки до клика или заранее прогружать изображения в галерее, когда пользователь просто ведёт курсором рядом.

В отличие от :hover, который срабатывает только при прямом наведении, :near(10px) позволит задавать радиус чувствительности. Это также пригодится для touch-устройств пользователей с толстыми пальцами или VR/AR, где точность ввода плавает. Элемент уже тестируется в Chrome Canary, с полифиллами для экспериментов.

Подробный разбор с примерами кода — в статье на CSS-Tricks.

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

Читать полностью…

Делаем браузер снова браузером

JustTheBrowser.com — проект, который чистит популярные браузеры (Chrome, Edge, Firefox) от навязчивых дополнений: убирает ИИ-функции вроде Copilot, телеметрию, спонсорский контент, напоминания о дефолтном браузере и прочий мусор. Всё через официальные политики групп — без модов исполняемых файлов.

Устанавливается всего одним скриптом для Windows/Mac/Linux, или вручную по гайдам. Если бесит реклама, AI-помощники и сбор данных — мастхэв.

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

Читать полностью…

Последний день голосования в Tproger Award!

Две недели, 16 компаний, 4 номинации — спасибо, что читали, участвовали и лайкали. И отдельное спасибо, что голосовали! Вообще не представляем, что вы там наделали, уже узнать хочется!

Давайте сегодня зафиналим голосовалку и раздадим по максимуму золотых мышей. Интересно, расстановка сил сможет измениться за один день?

Если потеряли, то номинации вот:
— Продукт года
— Облачный продукт года
— ИТ-ивент года
— Дизайн года

Только сайт не положите, очень просим 🙏

Пойти голосовать: https://tprg.ru/bWfy

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

Читать полностью…

Инструменты дебага LLM-приложений на JS

Антон Непша на HolyJS 2026 рассказал про инструменты для отладки приложений с большими языковыми моделями на JavaScript. Доклад — чистая практика для тех, кто строит чат-боты или агентов.

Он показал, как console.log и node inspect быстро исчерпываются. Вместо этого — LangGraph Studio, LangSmith, LangFuse, Arize Phoenix и Lunary. Каждый инструмент даёт трейсы вызовов моделей, время, токены, манипуляцию состоянием на паузе.

Разбор плюсов и минусов: что удобно для локалки, что для продакшена, как обойти платные ключи и софхостинг. Сравнение с Sentry, OpenTelemetry, трюки вроде косинусного сходства для роутинга и мониторинга дрифта моделей.

#доклад

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

Читать полностью…

Офер за 2 дня в Яндекс через Weekend Offer Multitrack

Это формат быстрого найма для бэкенд-разработчиков с опытом работы от 5 лет на C++, Python, Java/Kotlin или Go.

Все этапы отбора проходят в течение двух дней:

🟢 14 марта — технические секции.
🟢 15 марта — финальная секция и офер.

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

Этот подход позволяет сравнить разные проекты внутри Яндекса, оценить задачи изнутри и принять взвешенное решение.

Регистрация на участие в программе открыта до 6 марта. Подробности — по ссылке.

Реклама. ООО "Яндекс". ИНН 7736207543

Читать полностью…

Регулярные выражения простыми словами

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

В своем материале он постарался помочь вторым стать первыми.

Если вас тоже начинает бросать в холодный пот при виде hello(\s*,\s*|\s+)world, то эта статья явно будет вам полезна:

https://habr.com/ru/companies/selectel/articles/848114/

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

Читать полностью…

Как вам формат TOON (Token-Oriented Object Notation) вместо JSON?

Массивы объектов объявляются один раз в заголовке users[2]{id,name,role}:, а дальше идут только данные через запятую без лишних скобок и ключей. Это сокращает объём данных на 30–60%.

Для Python уже есть готовые библиотеки, например python-toon и toons. Для промтов в ИИ экономия токенов. Для людей на глаз вроде тоже проще читается.

С другой стороны это просто CSV с дополнением, вложенности не очень удобно делать. Что думаете?

@zen_of_python, также в Max

Читать полностью…

WebKit анонсировал Interop 2026

Сделать так, чтобы ваш сайт работал во всех браузерах, может быть непросто, особенно если браузерные движки реализуют одну и ту же веб-технологию немного по-разному. Проект Interop решает эту проблему, объединяя основные браузерные движки для улучшения одного и того же набора функций в течение одного года. Interop 2026 — это уже пятая итерация совместного проекта браузерных движков (Apple/Safari, Google/Chromium, Microsoft/Edge, Mozilla/Firefox, плюс Igalia) по повышению кроссбраузерности веба.

В этом году 20 фокусных областей (15 новых, 5 carryover). Подробнее в статье.

#новости

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

Читать полностью…

Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

#typescript #crdt

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

Читать полностью…

В чем разница между «компонентами» и «утилитами» в Tailwind

Проблема в том, что Tailwind поощряет утилиты-first, но на практике люди создают компонентные классы через @apply или плагины — и тут начинается бардак: дублирование стилей, конфликты специфичности, сложность в поддержке. Статья предлагает чёткое разделение: утилиты в @layer utilities, компоненты в @layer components (с @apply), чтобы каскад работал правильно и утилиты всегда перекрывали.

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

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

Читать полностью…