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

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

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

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

@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

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

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

#историяit

@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

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

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

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

#angular

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

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

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

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

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

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

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

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

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

@tproger_web

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

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

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

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

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

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

#css

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

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

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

Репозиторий, в котором собраны лучшие практики по тестированию 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