14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#фишка дня
Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»
Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb
Весь секрет в наложении маски в виде градиента под элемент:
&::after {
mask: linear-gradient(calc(var(--pointer-angle) * 1deg), #ffffff80, #ffffff30 30% 60%, #fff);
}
Разверните свою облачную среду за несколько минут: виртуальные машины, S3-совместимое хранилище, Managed Kubernetes, базы данных.
▪️Быстрый старт, прозрачный биллинг, российские дата-центры.
▪️Удобные интерфейсы управления: веб-консоль, CLI, API, Terraform.
▪️Собственная разработка: развиваем облако так, как нужно пользователям, а не ждём решений от вендоров.
Развивайте свои IT-продукты. Об инфраструктуре позаботится облако.
Попробуйте MWS Cloud Platform бесплатно с грантом для новых пользователей.
#заметка дня
Вам всем наверняка знакома раскладка masonry — «кладка каменщика». Собственно, название она получила от Masonry.js, библиотеки сетки, влияние которой на веб сложно переоценить.
Так вот. Естественно, давно предпринимались попытки внести эту раскладку в стандарты. Попытки эти усилились с началом полноценной поддержки гридов в браузерах, но к общему знаменателю за много лет так и не пришли.
Собственно, в 2020 Firefox стал первым браузером, внёс масонри в display: grid под флагом и так и сидел все эти годы. А Chrome 140 (и соответствующий Edge) так и назвали — display: masonry.
Масонам это не понравилось.
Потому в стандарт пошло название grid-lanes. Да-да, display: grid-lanes, частью grid это так и не стало (и очень хорошо).
Короче, к чему это я. Буквально три недели назад команда WebKit смёрджила в стабильную базу PR, который включает поддержку grid-lanes. И, соответственно, выпустила Safari Technology Preview 234 под соответствующую новость в блоге: https://webkit.org/blog/17660/introducing-css-grid-lanes/
Там очень подробная статья о том, как и когда применять, какие режимы есть, какие настройки.
Chrome и Firefox тоже уже вносят изменения в свой код, так что Masonry в Baseline не за горами!
P. S. кстати, скачивать разные ранние версии WebKit задолго до выхода очередной версии Safari TP можно отсюда: https://webkit.org/build-archives/
#css #masonry
#статья дня, даже две
Похоже, команды браузеров всё-таки пришли к общему пониманию, как должен выглядеть безопасный способ вставки HTML.
Речь про Sanitizer API — нативную замену innerHTML, которая сразу учитывает XSS и не оставляет это на совести разработчика. Вместо работы со строками используется setHTML(): HTML парсится один раз, очищается и сразу вставляется в DOM.
Это снижает риск обходов безопасности, возникающих при раздельном парсинге и сериализации строк.
API по умолчанию намеренно жёсткий. Удаляются <script>, <iframe>, <object>, <embed>, SVG-элементы, style, link, все form-теги, кастомные элементы, комментарии и любые on*-атрибуты — по факту остаётся минимум безопасного HTML, остальное надо разрешать вручную через конфигурацию. Подробности: https://olliewilliams.xyz/blog/sanitizer/
Первая реализация появилась в Chrome, но её удалили, потому что спецификация сильно изменилась и текущая версия API её не отражает. Команды решили не фиксировать «устаревший» API в движках и сейчас переписывают его в соответствии с обновлённым стандартом.
И вот, собственно, статья о том, как все вместе приходили к упрощению API: https://frederikbraun.de/why-sethtml.html
Ссылки на ишью с намереними релизнуться:
https://groups.google.com/a/chromium.org/g/blink-dev/c/iu3VwMotMBc
https://groups.google.com/a/mozilla.org/g/dev-platform/c/9ddjRQbYKuk
Актуальный Sanitizer API в соответствии с новой уже есть в Firefox Nightly и в Chrome Canary за флагом. Ожидаем в 145 Хроме и 148 Лисе.
А вот Safari как обычно. Полифиллим, котаны?
Ах, да! MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API/Using_the_HTML_Sanitizer_API
#sanitizer #xss
#фишка дня
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.
Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents #бородач
#заметка дня
Минутка удивительно полезной информации!
Почему Vite.js стартует на порту 5137, а не на 8000, 8080, 8888 и прочих стандартных для разработки веба портах?
Потому что, следим за руками:V — 5
I — 1
T — 7
E — 3
Я уже вижу, как вы потянулись к клавиатуре чтобы написать: «Пять и один-то понятно, римские. А 7 и E тут при чём?»
Так вот, котаны, это называется leetspeak. Пруф: https://en.wikipedia.org/wiki/Leet
Просто 7 похожа на T, а 3 на E. А ещё всё это вместе похоже на SITE :)
Кстати, Evan You, собственно, создатель Vitejs, Vitest, и Vue.js, подтвердил это достаточно давно.
Какие ещё будут примеры, помимо 1337? :)
#web
#статья дня
Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (ascent, descent, line gap).
Из-за них текстовый элемент по box-модели почти никогда не совпадает с тем, как текст выглядит визуально: появляется лишнее пространство сверху и снизу, которое мешает точному вертикальному выравниванию.
Для этого в Chrome и Safari не так давно появился text-box-trim — CSS-правило, позволяющее обрезать это дополнительное пространство и привести текстовый бокс к реальным границам глифов:
.text {
text-box: trim-both cap alphabetic;
}
А вот и ссылка на статью в девблоге: https://developer.chrome.com/blog/css-text-box-trim
В Firefox пока не работает совсем.
Ранее похожий эффект достигался с помощью библиотек вроде Capsize и других `leading-trim`-решений. Они опираются на вычисление метрик конкретного шрифта и генерацию псевдоэлементов с отрицательными отступами, что усложняет систему, привязывает её к шрифтам и может создавать проблемы с производительностью при масштабировании.text-box-trim — это попытка решить задачу на уровне браузера и сделать точную вертикальную типографику частью нативного CSS.
Давно пора или классическая типографика — наше всё, котаны?
#css #trim
#ссылка дня
CSS Wrapped 2025 от разработчиков Google Chrome!
Это отличный способ наверстать всё, что произошло в CSS за год, даже если ты вообще ничего не читал и не следил. Google собрали самое важное в одну компактную, приятную страницу.
Пластилиновую!
В этом году в CSS сильно прокачали готовые элементы: диалоги стали умнее, поповеры — гибче, а <select> наконец можно нормально стилизовать. Появились и новые мелочи вроде скролл-кнопок и скролл-маркеров, которые позволяют делать аккуратные нативные галереи без лишнего JS.
Но не всё — в Safari :(
Состояние скролла теперь можно ловить прямо в CSS, появились функции для подсчёта соседей в DOM, а анимации и переходы стали куда более контролируемыми и предсказуемыми.
Отдельная тема — сахар. Это всё, что делает код чище: новые функции вроде if() и shape(), более понятные размеры, формы и условия.
Всё очень приятно оформлено, заходите хотя бы просто посмотреть: https://chrome.dev/css-wrapped-2025/
#css #google #chrome
#такое дня
Отлично провёл вечер в компании шестигранных ключей. Засор чистил-с.
#игра дня
GameShell — это консольная игра-тренажёр, вдохновлённая классическими текстовыми адвенчурами, где весь мир существует в виде текста, а действия — это команды. Только здесь команды настоящие Unix. Игра учит работать с терминалом через задания и миссии, превращая обучение в квест.
Проект родился как университетская учебная разработка: автор сделал GameShell для студентов, которым нужно было быстро освоить базовые Linux-команды. Идея сработала — вместо скучных лекций студенты начали проходить практические миссии, используя реальные инструменты командной строки.
GameShell полностью open-source, работает на Linux, macOS, есть образ Docker. Установка минимальна: скачал скрипт, запустил — и получил тренировочное окружение с сохранением прогресса.
Каждая задача — маленькая текстовая «комната» из старых приключенческих игр, только с реальными командами.
Очень круто, однозначно рекомендация.
#bash #game #console
#молния дня
В React обнаружили критическую уязвимость в механизме серверных компонентов (React Server Components). Из-за ошибки в том, как React разбирает входящие данные, сервер может попытаться выполнить вредоносный объект как часть своей логики. Достаточно специально подготовленного HTTP-запроса — и код на сервере окажется под контролем не того, кто его писал.
Это не проблема конкретного фреймворка. Под удар попадает любой проект, где используются RSC: Next.js, Remix (с RSC-вставками), любые кастомные серверные интеграции, экспериментальные рантаймы, кастомные бандлы — неважно. Если у вас есть React Server Components, риск реальный.
Уязвимы версии пакетов react-server-dom-* — 19.0.0, 19.1.0, 19.1.1, 19.2.0.
Официальное описание: https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components
Next.js упоминают чаще всего просто потому, что он массово использует RSC «из коробки», и поэтому количество уязвимых приложений там особенно велико. Но это не его эксклюзивная проблема — это дыра именно в React.
Патчи уже вышли: React закрыл её в версиях 19.0.1, 19.1.2, 19.2.1.
Если у вас Next.js, то актуальные безопасные релизы: 15.0.5+ и 16.0.7
(детали: https://nextjs.org/blog/CVE-2025-66478)
Суть в том, что если ваш сервер хоть как-то отдаёт RSC-ответы и принимает RSC-запросы, обновиться нужно обязательно. Если серверных компонентов нет — пофигу.
Кстати, вот и технический разбор как проблемы, так и патча: https://www.ox.security/blog/rce-in-react-server-components/
#react #rsc #next
#статья дня
Google в очередной раз доказал всем, что дизайн — это не про них.
Если вы, как и я, понимаете, что на этой иллюстрации не так — обнимемся.
Если же нет, или хотите понять больше — есть всё ещё пока лучшая в русскоязычном сегменте интернета статья Оптическое выравнивание и пользовательские интерфейсы.
— Почему при обычном центрировании слоёв и фигур иконки всё равно могут выглядеть «смещёнными» и невыровненными?
— Почему важно не просто «на глаз» выравнивать иконки, а знать, где у фигуры настоящий центр — её геометрический «центр тяжести» (барицентр)?
— Почему автоматизация поиска центра фигуры и её выравнивание — более надёжный путь, чем ручная корректировка, особенно при большом количестве иконок в интерфейсе?
Всё там :) Очень рекомендую.
Кстати, раз уж снова подняли эту тему, маленький лайфхак для дизайнеров: размойте иконку и сразу станет понятно, сбалансирована она, или нет. Вот как тут.
#design #alignment #icons
#инструмент дня
История от подписчика!
На иллюстрациях — время прогона тестов, стало и было. Как добиться подобного?
Сменой тулинга, конечно же!
Переход с ts-jest на @swc/jest даёт ощутимый прирост скорости. ts-jest завязан на стандартный TypeScript-компилятор. Он работает в одном потоке, выполняет полноценную проверку типов и в целом довольно медленно трансформирует файлы. В больших проектах это приводит к заметной задержке перед запуском любого тестового набора.
@swc/jest использует SWC — транспайлер, написанный на Rust. Его ключевые особенности:
* трансформация работает в нативном коде без виртуальной машины;
* парсер и трансформер многопоточные;
* типы не проверяются, а просто удаляются;
* преобразование максимально близко к «быстрому проходу».
Для тестов это идеальный сценарий: типизация проверяется отдельно, а от тестового раннера требуется лишь быстрое преобразование модулей.
Дополнительно ускорить прогон помогает параллелизация. В GitLab CI достаточно указать:
parallel: 3
#инструмент дня
Зачем писать !(a && !b && c >= 10 && d !== e), если можно !a || b || c < 10 || d === e?
Ответ на эти и другие вопросы прост: «Потому что не подумал».
Но думать — сложно. И не всегда нужно. Поэтому в IDE от JetBrains встроен преобразователь логических вырадений по законам де Моргана.
А тем, кто предпочитает быть свободным, приходится искать иные решения.
Иногда — даже думать.
И тут есть вариант, откуда не ждали: правило для ESLint!
ESLint Plugin De Morgan: https://github.com/azat-io/eslint-plugin-de-morgan
Запросто преобразует ваши const value = !(a || b !== c) в const value = !a && b === c.
В плагине два правила:
- no-negated-conjunction
- no-negated-disjunction
Все правила имеют автофикс. У плагина нет зависимостей. Поддерживает как современный, так и легаси формат ESLint конфигов.
Твиттер автора с анонсом: https://x.com/azat_io/status/1888874193007132762
Пользуемся, котаны!
#boolean #eslint #logic #бородач
Заказчик кинул с деньгами? Отправьте его в суд.
Чаще из-за ошибок в договоре правда может быть не на вашей стороне. 8 пунктов для безопасного договора — проверьте прямо сейчас.
В 2026 году требования к IT-компаниям и фрилансерам станут жёстче. Разберитесь с налогами, сайтами и договорами уже сейчас.
Подписывайтесь на LAWLEGKO — канал практикующего юриста Инны Вялковой. Новости от государства и юридические тонкости простым языком.
Или передайте всё юристам: договоры, налоги, реклама — юридическое абонентское сопровождение.
Вы занимаетесь работой, юристы LAWLEGKO — вашим спокойствием.
#инструмент дня
На связи Глеб, который принес немножечко странного.
Думали ли вы когда-нибудь о том, что алгоритмы сжатия строк потребуются для передачи состояния приложения?
Всё когда-нибудь случается впервые, вот и мне потребовалось передавать в ссылке текущее состояние редактора кода (в нашем продукте это один из основных иструментов).
Так как в нашем редакторе есть владки, то у каждой свои параметры рабочего пространства, которые составляют композицию объектов.
Передавать необходимо как раз такую компиляцию состояний в одном объекте, который должен передаваться в генерируемой ссылке.
Но как, ведь длина адресной строки очень ограничена и не вместит даже небольшой сериализованный объект в параметре адресной строки.
Оказывается не так уж это сложно если вспомнить про алгоритмы сжатия.
Сериализуем объект, сжимаем его с помощью библиотеки lz-string и генерируем ссылку с параметрами состояния редактора в одном из параметров.
Попробовать можно в codepen.
Да, можно использовать более эффективный алгоритм LZMA (один из примеров), однако он существенно медленнее. Тем не менее, производительность LZMA в контексте ограниченного числа символов, позволяет вообще не думать о каком-либо существенном влиянии на результат.
В CedrusData (компания, в которой работаю) много интересных задач, в том числе связанных с производительностью. Ждите новых заметок😎
#compression #performance
#фишка дня
Итак, верстаешь ты страницу с кучей врезок, аккордеонов, вкладок и прочих интерактивных элементов, требующих действия пользователя.
Но у аккордеонов есть один очевидный минус: поиск по странице не подсветит найденное. Ну ещё бы, оно же скрыто.
Так вот, Chrome очень старается это исправить и именно поэтому начиная со 102 версии у атрибута hidden есть уникальное для Chrome значение until-found, говорящее само за себя.
Ссылка на блог разработчиков: https://developer.chrome.com/docs/css-ui/hidden-until-found
Сразу пример, если кому-то в лом на статью лезть: https://codepen.io/web-dot-dev/pen/JjMxmom
Попробуйте поискать слово, которое скрыто в каком-либо из аккордеонов.
Ну и для браузеров, которые не поддерживают этот атрибут, либо для иных UI-виджетов, они предлагают проверять поддержку события onbeforematch:if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
Довольно странное решение, если честно, но очевидно, что проблема существует и делать с ней что-то надо.
#chrome #hidden #бородач
#фишка дня
Не так давно я выкладывал статью и пример, как вывести коллег в вашем любимом командном мессенджере, будь то слак, тимс, маттермост и прочие поделки от разных остальных компаний.
Всего-то достаточно загрузить свою аватарку или реакцию в HDR и начать выжигать глаза всем обладателям макбуков и вообще ноутбуков с экранами, поддерживающими расширенный динамический диапазон цвета. Вот: /channel/htmlshit/3594
И от этого, кстати, очень страдают соцсети, например, пресловутый твиттер, aka X. Стоит одному умнику загрузить свою аватарку в HDR — всё, вся страница сереет, а он один сверкает.
Но, как оказалось, на это есть решение! В CSS есть правило, которое позволяет в том числе нормализовать динамический диапазон:
dynamic-range-limit: standard;
filter: brightness(1);.
🔴🔴🔴🔴🔴🔴🔴🔴
🔥 СРОЧНО СКАЧАЙТЕ!!! АЛЬФА-БАНК ВЕРНУЛ ОПЛАТУ АЙФОНОМ В НОВОМ ПРИЛОЖЕНИИ 🔥
СКАЧИВАЙТЕ СКОРЕЕ И ПЛАТИТЕ ЗА ВСЁ БЕЗ КАРТЫ. Просто подключайте Alfa Pay — а мы вернём кэшбэк до 50% за первую покупку.
ПРЯМО СЕЙЧАС СКАЧИВАЙТЕ на айфон приложение Альфото. Кто не успел, тот опоздал 😉
@alfabank
Без лишних слов — рекомендую канал про Германию от практикующего немецкого рекрутера Инессы Тиконов. Это не просто канал, а практическая база знаний с реальными кейсами, советами и инсайтами о том, как устроен найм в Германии и что помогает кандидатам получить оффер.
Подойдёт и тем, кто активно ищет работу и тем, кто пока не ищет, но хочет быть готовым к любым изменениям: релокации, увольнению, смене роли или рынка.
Кейсы поиска работы и релокации в Германию:
→ Senior Cloud Infrastructure Engineer из Армении — пришёл по Карте шансов, получил оффер от немецкой компании за 2,5 месяца и оформил Blue Card
→ Senior SAP Consultant из Грузии — за 2 месяца получил два оффера и выбрал предложение с зарплатой выше рынка
→ Data-специалист из Батуми — получил оффер на сложную стратегическую роль
→ Engineering Manager из Google (США) — после детального анализа рынка выбрал Transparent Hiring и сейчас проходит интервью в немецких компаниях
→ Senior Backend Engineer — оффер в Берлине с зарплатой выше рынка
Про поиск работы в Германии:
→ Резюме, которое реально выделяется среди других: неочевидные советы
→ Почему немецкие компании могут отозвать оффер
→ Как объяснить перерыв в работе рекрутеру и не завалить интервью
→ 10 шагов, чтобы профиль в LinkedIn начал притягивать рекрутеров
Про жизнь и адаптацию в Германии:
→ Work-life balance и один из самых быстрых путей к европейскому паспорту: 12 причин переезда в Германию
→ Где в Германии жить хорошо (спойлер: не Берлин и не Мюнхен 😉)
→ Почему в Германии так сложно снять квартиру и как проходит отбор «кандидатов в жильцы»
→ Как вернуть налоги в Германии — в том числе за услуги Transparent Hiring
👉 Подписывайтесь на канал “Германия с Инессой” — даже если переезд пока в планах, там вы соберете «чемодан» знаний, который потом сэкономит время, деньги и нервы.
#статья дня
SourceCraft обновил ИИ-агента — Code Assistant теперь помогает с безопасностью кода и командной работой.
ИИ-агент анализирует найденные уязвимости в коде, оценивает степень риска и сразу предлагает исправления. Каждая найденная проблема превращается в карточку с объяснением, насколько она критична и как её можно безопасно устранить.
Всё это экономит часы рутинного разбора уведомлений: анализ безопасности теперь занимает минуты, а не полдня.
Для наглядности добавили центр контроля уязвимостей — интерактивные дашборды, где можно увидеть типы рисков и затронутые системы.
Хороший пример того, как ИИ перестаёт быть «магией» и становится инструментом ежедневной разработки.
#ai #code #security
#дайджест недели, а точнее, двух
Понедельник
Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки.
/channel/htmlshit/3922
Среда
Обсуждение адвент-календарей по разработке и статьям.
/channel/htmlshit/3923
Четверг
Критическая уязвимость в React Server Components, позволяющая выполнить код на сервере через специально сформированный запрос. Затрагивает все проекты с RSC, патчи уже выпущены.
/channel/htmlshit/3925
Воскресенье
Текст о доступности в реальных условиях использования, а не в идеальной среде. Разбор распространённых мифов и причин, почему a11y касается всех.
/channel/htmlshit/3927
Понедельник
GameShell — обучающая консольная игра для изучения Unix-команд в формате текстового квеста. Подходит для практики базовой работы с терминалом.
/channel/htmlshit/3928
Вторник
Почему серверы специально увеличивают размер страниц ошибок. Коротко о поведении браузеров, стандартных заглушках и решении, которое использует nginx и Cloudflare.
/channel/htmlshit/3930
Среда
Как DRM в стриминговых сервисах блокирует скриншоты через EME и GPU. Почему в Chrome кадры чёрные и при чём тут аппаратное ускорение.
/channel/htmlshit/3932
Пятница
CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
/channel/htmlshit/3933
#фишка дня
Не совсем про разработку, но достаточно интересно.
Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг HBO Max, нашёл нужные кадры, снял скриншот...
А он чёрный. Элементы UI и... чёрный экран.
— DRM, — подумал Штирлиц.
И таки да, DRM. Защита авторских прав содержимого.
Виральность? Не, не слышали.
Технология, по которой работает DRM на стримингах, называется EME: Encrypted Media Extensions. Разработана совместно Netflix, Google и Microsoft.
Есть хорошее описание её работы: https://hsivonen.fi/eme/
Encrypted Media Extensions (EME) — это JavaScript API для <video> и <audio>, предназначенное для работы с DRM-защищенным контентом. Для расшифровки требуется Content Decryption Module (CDM), который доверен правообладателями и скрывает определенные данные от пользователя. Браузер при этом считается ненадежным.
CDM может быть встроен в браузер, загружен отдельно или реализован на уровне ОС и железа. Он управляет ключами для расшифровки контента. В EME есть учебная система Clear Key, но она не предназначена для коммерческого использования.
CDM может работать по-разному: просто расшифровывать данные, расшифровывать и декодировать видео в браузере, передавать декодированные кадры напрямую ОС или работать с GPU, скрывая пиксели даже от системы. EME определяет только интерфейс API, оставляя детали DRM разработчикам.
Так вот, к фишке дня. В Firefox EME не реализованы, скриншоты делаются без проблем. А в Chrome — работают на GPU, иначе ваши процессоры сошли бы с ума.
А это значит, что достаточно (по крайней мере пока) отключить аппаратное ускорение графики. И, вуаля, скриншоты снова можно делать!
Очевидно, с развитием железа и это скоро станет невозможно. Останется только аналоговая брешь (крутое название для экранки, не правда ли?).
#drm #eme #api #бородач
#заметка дня
Cloudflare стал так часто падать, блокируя доступ ко всему и вся, что хочешь-не хочешь приходится извлекать из этого хоть какую-то полезную информацию.
Ну, помимо того, что Rust не настолько и крут в руках посвеместно проникших вайб-кодеров, если верить соцсетям.
Но нас тут заинтересовало, зачем Cloudflare добивает стандартную страницу ошибки комментариями?
<!-- a padding to disable MSIE and Chrome friendly error page -->
#ссылка дня
Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы.
Кстати, в X прямо сейчас очередной напоминающий жабогадюкинг срач как раз на эту тему.
Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.
Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.
Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?
Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия.
И так с любым проектом. Думать надо.
Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/
Мифы о доступности на разных языках. Всем читать, котаны.
#a11y #бородач
#поделись дня
Я в этом году просрал все сроки поиска интересных адвент-календарей по коду и разным статьям.
Поэтому, делитесь, котаны. Кто что читает в этом декабре?
Я вот только календарь от HTMHell сходу вспомнил: https://htmhell.dev/adventcalendar/, одна статья в день.
Ну и, пожалуй, ещё https://adventjs.dev/en, возможно, я даже в него ещё запрыгну и буду с вами делиться.
Показывайте ваши!
#advent
#дайджест недели
Понедельник
Jhey показал эффект с подсветкой краёв карточек по движению мыши — координаты курсора, CSS и SVG-фильтры. Аккуратная демка, чистая реализация.
/channel/htmlshit/3914
Вторник
virtua — библиотека для виртуализации списков с динамическими размерами, бесконечным скроллом и поддержкой популярных фреймворков. Быстрая и универсальная.
/channel/htmlshit/3916
Среда
ESLint Plugin De Morgan переписывает отрицания по законам де Моргана. Два правила, автофикс, без зависимостей — мелочь, но делает логику чище.
/channel/htmlshit/3917
Пятница
Хороший буст к скорости тестов: заменить ts-jest на @swc/jest. SWC работает быстрее за счёт native-кода и отсутствия проверки типов — проекты ощутимо ускоряются.
/channel/htmlshit/3919
Раньше зарплаты разработчиков росли вместе с опытом. Сейчас все иначе: пока ребята со стажем 10+ лет получают меньше 150 тысяч, зумерочки зарабатывают по 400+ тысяч.
Сегодня больше зарабатывает тот, кто знает, сколько стоят его навыки, а не тот, кто 15 лет пишет идеальный код.
Что это значит для нас? То, что нужно знать рыночек и понимать, на какие деньги сейчас реально можно претендовать. Чтобы не зарабатывать в два раза меньше, когда можно зарабатывать в два раза больше!
Следите за ситуацией на рынке в канале «зэпэшки в разработке». Здесь разработчики, DevOps-инженеры, тестировщики и техлиды рассказывают, сколько они зарабатывают и что конкретно делают за эти деньги:
• 450 000 ₽ у iOS-разработчика в 24 года
• 60 000 ₽ у Fullstack-разработчика
• 330 000 ₽ у DWH аналитика в 27 лет
Подписывайтесь на «зэпэшки в разработке» и становитесь осведомленнее → @sweetsalaryD
#инструмент дня
Кому адекватной современной виртуализации списков?
Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.
В других фреймворках и ванильных средах ситуация ещё веселее.
При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.
Если вы были застигнуты врасплох моими утверждениями и не понимаете вообще, о чём я, то вкратце поясню: чтобы дать возможность человеку поскроллить тысячи и сотни тысяч объектов на экране, совсем не обязательно отрисовывать их все разом. Можно отрисовать штук 10-20 строк, заполнив экран, и просто переиспользовать эти элементы раз за разом. Виртуальные списки, буквально.
Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.
GitHub: https://github.com/inokawa/virtua
Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.
Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.
Отличное современное решение.
#scroll #virtual #бородач
#codepen дня
Jhey стал очень редко радовать нас новыми дропами — готовится к изданию своего курса по эффектной вёрстке, потому кодом делиться — увы — почти перестал.
Но надо отдать должное, когда идея не полностью исходит от него — он всё ещё продолжает демонстрировать уровень!
Итак, помните мы с вами пытались делать эффект Ambilight? Как оказалось, ту же идею можно применить чтобы подсветить края карточек!
Немного JS для передачи координат курсора в CSS, немного SVG-фильтров для размытия продублированного контента — и вы неотразимы!
Собственно, пример: https://codepen.io/jh3y/pen/WbwZaNa
Не забудьте потыкать настройки, чтобы понять реализацию.
#svg #css #ambilight