Почему HTML-атрибут accept ухудшает загрузку файлов и чем его заменить

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

Защитой такой фильтр всё равно не служит: перетаскивание файла позволяет его обойти, размер он не проверяет, а Firefox на Android его не поддерживает. Значит, обработка ошибок всё равно нужна.

Практический вариант: заранее перечислить допустимые форматы в подсказке, но не рассчитывать, что её прочитают. После выбора проверить файл и сразу показать ошибку, по которой понятно, что исправить. Аргументы и примеры интерфейса собраны в разборе атрибута accept.

Фреймворки меняются, а логика и процессы в работе над проектами всегда останутся главными. В подборке разбираем, как задача проходит путь от бэклога до релиза, какие стратегии деплоя не роняют прод и как подходить к модернизации легаси, а заодно как перестроить мышление при переходе с React на Angular. Дополняют её тексты про работу с выделенной командой и безопасность, от многофакторки до ловушек формального контроля в ИБ.

Как выстроить работу с выделенной командой
Как работает IT-команда: путь задачи от бэклога до релиза
7 стратегий модернизации легаси
Стратегии деплоя, которые не роняют прод 
Как сделать ИБ по-настоящему надёжной 
Зачем бизнесу многофакторка
Использование разных фреймворков качает мозг

Как публиковать блог через Standard.site и AT Protocol

Standard.site задаёт схему JSON-записей для статей в сети Bluesky. Материал получает известные сервисам поля, поэтому pckt, Docs.surf, potatonet и Leaflet могут показать его без отдельной интеграции, а Bluesky собирает расширенное превью.

Для запуска нужны две записи: одна описывает издание, вторая статью. В разборе Piccalilli показана реализация на JavaScript через официальный пакет @atproto/api: авторизация, создание записей и необязательная проверка связи с доменом.

Я сохранил этот маршрут для эксперимента с переносимым блогом: можно начать с одной статьи и проверить, какие сервисы AT Protocol её подхватят. Пароль приложения стоит держать в переменной окружения: он даёт полный доступ к аккаунту и обходит многофакторную аутентификацию.

Как сверстать диагональную шапку таблицы доступнее

Эрик Мейер разбирает шапку таблицы Apollo 16: угол разделён диагональю между подписями строк и столбцов. Доступность двух span в одной ячейке показалась ему сомнительной.

Он оставил подписи в двух строках thead, растянул заголовки на обе строки через rowspan и наложил вторую строку на первую. Диагональ рисует CSS-градиент. Safari не применяет относительное позиционирование к thead, поэтому потребовался обход через @supports.

В разборе Эрика Мейера есть код. Базовые тесты не выявили крупных проблем, но гарантии для всех экранных дикторов нет. Если нужна такая ячейка, сохраните табличную семантику, проверьте раскладку в Safari и навигацию в экранных дикторах.

Как проверять все пути к res.redirect() в Node.js

В cas-authentication-user 0.3.0 проверка отклоняла внешний returnTo, но брала запасной путь из адреса запроса. url.parse() превращал /\bad.example.com в //bad.example.com, а браузер считал это адресом чужого домена. Исправление одного открытого редиректа оставило второй в той же функции.

Аудит начинайте с res.redirect(): перечислите все входящие значения и проверьте запасную ветку после отказа валидатора. Она работает на атакующем вводе и тоже должна вернуть безопасный адрес.

В 0.4.0 проверяют результат разбора URL, а внешний адрес заменяют на /. В разборе Megapixel99 на DEV Community есть код. Если пакет есть в проекте, обновитесь до 0.4.0.

Что делает архитектор решений и как подготовиться к этой роли

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

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

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

Как связать Lottie-анимацию с кликами через DOM

В веб-игрушке Stress Release нужна была точная реакция на клик. Физический движок выдавал правдоподобное движение, но мог подменить заданные кадры расчётами. Поэтому команда выбрала Lottie.

Клик переводят в локальные координаты персонажа, а расстояние до центра вычисляют через Math.hypot(). Оно определяет очки и интенсивность отклика; анимация взрыва появляется в месте нажатия. Код проигрывает через Lottie нужный отрезок кадров, блокирует новые клики до его завершения и возвращает персонажа к циклу ожидания.

В разборе Smashing Magazine есть код расчёта попадания, управления кадрами и изменения размеров через CSS-переменные. Приём пригодится, когда реакция по макету важнее физической симуляции.

Как собрать турнирную сетку FIFA на CSS Grid и subgrid

На странице FIFA каждый столбец раунда вынесен в отдельный элемент: разметка повторяет экран. В разборе макета показана другая структура: один элемент на раунд, внутри две группы матчей по сторонам.

Сетка получает восемь колонок и четыре строки. Вложенный раунд растягивается по ней и через subgrid наследует те же линии, поэтому группы можно поставить в первую и последнюю колонки без отдельных обёрток. Матчи по вертикали автор распределяет с помощью Flexbox: каждый занимает равную долю доступной высоты, и соединительные линии сходятся с центрами карточек.

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

Как работает балансировка нагрузки в веб-бэкенде

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

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

Откройте разбор на DEV Community перед проектированием API: внутри сравнение алгоритмов и уровней балансировки, проверки состояния серверов и привязка сессий.

Как читать HTML-реликты из эпохи браузерных войн

В старом head можно встретить строки, смысл которых уже не восстановить по имени. Например, X-UA-Compatible заставлял Internet Explorer выбирать самый новый доступный режим документа, а условные комментарии показывали разную разметку отдельным версиям браузера.

Другие теги защищали страницу от вмешательства сторонних программ. Skype Toolbar превращал номера телефонов в кнопки и мог ломать вёрстку, поэтому сайт отключал его отдельным метатегом. Baidu пропускала мобильные страницы через свой сервис, перестраивала макет, удаляла стили и подменяла рекламу; от этой обработки тоже можно было отказаться в разметке.

Разбор Antiquated HTML Snippets and Artefacts пригодится при ревизии унаследованных шаблонов: сначала выясните, какую интеграцию обслуживала незнакомая строка и существует ли её цель, а затем решайте, удалять ли её.

Как ловить утечки памяти в SPA с помощью Playwright

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

Метрики Playwright получает через протокол Chrome DevTools, поэтому приём работает только в Chromium. Таймеры можно проверить с ускоренными часами страницы: 18 секунд на каждом проходе превращают 200 циклов в час работы таймеров.

Из-за разброса показаний такую проверку лучше поставить в ночной запуск. Код soak(), двойную сборку мусора и пример порога для DOM-узлов автор собрал в разборе теста.

Как рисовать управляемые CSS-треугольники коническим градиентом

Для декоративного треугольника не обязательно рисовать фигуру рамками или обрезать через clip-path. У conic-gradient() можно перенести центр в угол блока, задать направление и жёсткую границу цветов в нужном градусе. При угле меньше 45° цветная область получается треугольной и управляется числами.

Автор применил приём к треугольникам навигации: при наведении менял угол, а linear() добавил фигурам подрагивание. Приём подходит для декоративной графики. Для диаграмм автор советует SVG: отдельным секторам можно добавить интерактивность и сведения для доступности.

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

Как проверять cookie-баннеры на сотнях страниц через Playwright

В Dropbox согласие на cookie превратили в браузерный тест. Аудитор запускает сессии для США и ЕС, а также с сигналом приватности из браузера. Он записывает cookie до выбора, находит элементы управления независимо от 22 языков, отклоняет необязательные cookie, перезагружает страницу и проверяет, сохранился ли выбор.

Детектор адресов удаляет повторы из миллиардов записей о посещениях, группирует страницы с одинаковой логикой согласия и выбирает образцы. Новые страницы не выпадают из проверки.

Схема теста: чистый контекст, cookie до клика, отказ, перезагрузка, повторное сравнение. Правила и исключения держите вне кода, чтобы менять их без релиза. Подробности Dropbox разбирает в инженерном блоге.

Как убрать одинокий элемент в строке Flexbox

При flex-wrap: wrap последний пункт иногда остаётся один на новой строке. Медиазапрос исправляет конкретный набор элементов, но при изменении содержимого его порог легко перестаёт подходить.

Новая декларация flex-wrap: balance распределяет элементы по строкам равномернее. По статье, она выпущена в Chrome 150 и пока работает только в Chrome. Среди альтернатив: порог ширины через контейнерный запрос, max-width с условным clamp() и группировка через display: contents.

Разбор Ahmad Shadeed пригодится для навигации и рядов иконок: есть код и интерактивные демо. Пока поддержка ограничена, он помогает выбрать компромисс: вычислять порог, заранее знать размеры и число элементов либо добавлять обёртки.

Как перенести стили с Sass на нативный CSS

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

Начинайте не с переименования .scss в .css. Сначала найдите миксины и функции Sass вроде lighten(), затем замените комментарии // на /* ... */: иначе браузер не разберёт правила после комментария. Только потом удаляйте сгенерированные файлы, меняйте расширения и обновляйте ссылки.

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

Как фильтровать ботов в Cloudflare и не мешать пользователям

За неделю сервер PatronView отдал 1,28 млн полных страниц, а браузерная аналитика зарегистрировала 5 977 просмотров: 214 невидимых загрузок на каждый учтённый просмотр. Поэтому сравните серверные логи с браузерным счётчиком, иначе основная нагрузка останется за пределами отчёта.

Автор разделяет блокировки и проверки. Краулеров с невыгодным соотношением запросов к переходам он блокирует по строке User-Agent. Подтверждённых Googlebot и Bingbot освобождает от проверок. Запросам из дата-центров и старых браузеров показывает CAPTCHA, а не закрывает доступ: её смогут пройти пользователи с VPN или облачных рабочих столов.

Сверьте сегменты со своим живым трафиком, прежде чем копировать фильтры. Полные правила собраны в разборе PatronView.

В веб-проектах работают не только фронтендеры и бэкендеры, но и дизайнеры, аналитики, продакты. Кто все эти люди (на самом деле очень важные)? Чем они занимаются? Об этом новая мини-подборка. Хорошо почитать, если хочется лучше понимать, какие задачи решает дизайн, что делают аналитики и как работают продуктовые метрики.

Как один лотерейный билет превратился в несколько сотен требований, десятки интеграций и пять месяцев Discovery
Очнуться от мрака метрик: три истории от продакта о том, как решать неочевидные проблемы бизнеса
Как проверять продукт на UX на примере личного кабинета студента
Как тестировать пуши и диплинки в финансовом приложении
Дизайн в маркетинге: как фирменный стиль решает бизнес-задачи

Почему браузерный поиск не видит текст в аккордеоне

FAQ может исправно открываться и закрываться, а его кнопки работать с клавиатуры, но обычный Ctrl/Cmd+F всё равно провалится. Если закрытый ответ скрыт через display: none, встроенный поиск браузера считает, что этого текста на странице нет.

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

В разборе Агустина Барриентоса показаны воспроизводимый пример и код, из-за которого поиск не срабатывает.

#html #фронтенд

Как собрать кастомный скроллбар почти целиком на CSS

Обычно размер и положение ползунка приходится пересчитывать в JavaScript на каждом событии прокрутки. В результате код читает размеры контейнера, обновляет DOM и может вызывать перерасчёт вёрстки.

В разборе Master.dev Blog эту работу переносят в CSS. Якорное позиционирование удерживает полосы поверх контейнера, а анимация от прокрутки двигает края ползунка. Контейнерные единицы связывают его высоту с отношением видимой области к полной высоте содержимого. JavaScript остаётся только для перетаскивания указателем; колесо, клавиатура и тач работают через нативную прокрутку.

Подход доступен в Chrome и Safari, а в Firefox пока только в Nightly. Поэтому его стоит брать как прототип для дизайн-системы и отдельно проверять поддержку браузеров и доступность кастомного элемента.

Как связать HTML-атрибуты с адаптивными компонентами в CSS

Расширенный attr() читает data-атрибут как число, длину или CSS-идентификатор. Поэтому data-repeat=4 можно передать в repeat(), а data-gap=2 превратить в 2cqi, то есть отступ в единицах ширины контейнера. Отдельные классы под каждое значение не нужны.

Запросы по стилю контейнера добавляют контекст: карточка проверяет вычисленное CSS-свойство ближайшего предка, например --density: compact, и меняет отступы, размер аватара и видимость описания. Для такого запроса container-type не нужен.

В разборе utilitybend оба механизма соединены в сетке и переключателе плотности. Демо намеренно оставлены без @supports и запасных стилей: перед продакшеном проверьте поддержку и добавьте запасной вариант.