14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
Вы только посмотрите на эту красоту!
Да, я в курсе, что компонентов для красивого прокручивания цифр у нас какое-то невероятное количество, но до сих пор не было ничего настолько универсального и простого в использовании.
И не только для React! Vue и Svelte тоже там.
Итак, встречайте: NumberFlow от Максвелла Барвиана.
GitHub: https://github.com/barvian/number-flow
Документация и демо: https://number-flow.barvian.me/
Настраивается формат чисел, параметры анимированных переходов. И, собственно, никаких скрытых зависимостей.
Прекрасное.
#react #number #transition #бородач
#инструмент дня partysocket — это миниатюрная (всего ~2 КБ!) обёртка над WebSocket, которая делает их использование гораздо приятнее.
📦 Что это такое?
По сути, это просто WebSocket-клиент, но с «магией»: автоматические переподключения, буферизация сообщений при обрыве, устойчивость к сбоям — и всё это без лишнего кода.
💬 Как выразился автор:
"A tiny abstraction (like, 2kb) on top of websockets that adds reconnections/buffering/resilience + optional React hooks. Doesn’t even need PartyKit or Cloudflare!"
send, onopen, и т.д.)
import { PartySocket } from "partysocket";
const socket = new PartySocket({
host: "example.com",
room: "main-room", // опционально — удобно для namespace'ов
});
socket.addEventListener("message", (evt) => {
console.log("📨", evt.data);
});
socket.send("Hello, world!");
«А хватит ли моего английского, чтобы работать за границей?»
Этот вопрос не даёт покоя многим айти- и диджитал-специалистам.
🟠Кто-то не понимает, какой у него сейчас уровень.
🟠Кто-то вроде занимался с репетитором, но не может пройти интервью.
🟠А кто-то просто боится звучать «непрофессионально» — из-за акцента, нехватки словарного запаса и неестественных пауз.
Если ты откладываешь работу за рубежом “до лучших времён”, пока не подтянешь английский — есть один вебинар для тебя.
📆 24 апреля в 19:00 мск
Ведёт Настя Алексюк — senior-преподаватель AgileFluent, 8 лет в бизнес- и тех-английском, параллельно работает PM в американском стартапе.
Настя поможет тебе:
— разобраться, достаточно ли у тебя английского, чтобы искать работу за границей;
— понять, какие именно навыки тормозят тебя (и что с этим делать);
— получить подборку нескучных упражнений без учебников.
Вебинар бесплатный и с пользой: ты выйдешь с чётким пониманием, что прокачивать и как.
🎁 А еще всем участникам — бонус: полезные материалы + скидка на занятия в AgileFluent!
Регистрируйся по ссылке вот тут 👉 https://agilefluent.ru/web-240425
Реклама. ООО «Эджайл», ИНН 7810964334, erid: 2VtzqvfboC6
#такое дня
Очень неожиданная информация всплыла в комментариях к одному из предыдущих постов.
Теперь в Chrome дефолтные стили для тегов b и strong не bold, а... bolder!
Пруф: https://github.com/chromium/chromium/commit/0f34660cbc02352d5deabbf135c4b07303979df5
Судя по дате изменения, это как раз улетело в последнюю (135) версию Chromium и Chrome, соответственно.
Казалось бы, какое мелкое изменение, но уже принесло людям проблем :) А главное, посмотрите сколько тестов!
Да-да, тестов там сильно больше, чем в твоём PR, который меняет вообще всё в проекте.
Ладно, а что кроется-то за этим изменением?
А кроется имплементация последних изменений в спеке: https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
Ведь задача strong и b — выделить текст во что бы то ни стало. А если он уже полужирный? То-то и оно.
Или ещё хуже, глядите, на span стоит font-weight: 100: https://codepen.io/alinaki/pen/XJJrEPo
Видите отличия? Я — нет.
Ладно, кроме шуток, объяснение на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#meaning_of_relative_weights
Если 700 на родителе — то 800 на strong/b и так далее.
Чудны дела твои, HTML. Упёрлось же кому-то...
Да, кстати, ещё существует lighter :)
P. S. Safari всё ещё использует bold, а Firefox — тоже bolder. Но когда конкретно Firefox внёс это изменение я пока не знаю.
P. P. S. normalize.css тоже всё приводит к bolder.
#html #bolder #bold
#статья дня
Когда-то давно я в качестве демо накладывания ячеек грида друг на друга сделал табло аэропорта: /channel/htmlshit/2814
Очень схематичное, конечно, но сделать что-то более симпатичное руки не дошли.
Задо дошли у всем известного нам Jhey!
У него получилось трёхмерное табло, которое выглядит и ведёт себя как настоящее. И, более того, он выпустил прекрасную статью со всеми аспектами имплементации!
От построения модели ячейки, с лепестками и осью, до анимации этой модели: https://craftofui.substack.com/p/time-travel-with-javascript
И, более того, анимация выполнена в двух вариантах: GSAP и WAAPI aka Web Animation API, а это значит, можно обойтись без зависимостей вообще.
Горячая рекомендация, в общем.
#css #gsap #waapi
Как ворваться в IT и начать зарабатывать на вёрстке с нуля?
Проведи 1 неделю на бесплатном интенсиве по вёрстке сайтов с куратором и получи:
- Реальный опыт;
- Сайт в портфолио;
- Пошаговый план выхода на доход от 100 000₽/мес.
За 7 дней ты:
- Сверстаешь современный лендинг (HTML + CSS);
- Добавишь интерактив на JavaScript;
- Соберёшь проект на Angular;
- Свяжешь сайт с backend'ом и выложишь его в сеть;
- Узнаешь, как использовать ChatGPT и Giga в работе;
- Получишь пошаговый план по поиску заказов и работы.
🎁 Бонус: гайд «Как пройти собеседование в IT-компанию, если у тебя нет опыта».
🕒 Старт уже завтра!
👉 Успей записаться — и к лету выйдешь на стабильный доход в IT.
С начала 2000-х браузеры предоставляли пользователям удобную возможность видеть, какие ссылки они уже посещали, используя CSS-псевдокласс :visited.
Однако это удобство обернулось уязвимостью.
С помощью анализа стилей отрисованных ссылок можно было выяснить, какие страницы были посещены, что открывало путь для скрытых атак. Эта техника называется Visited Link Sniffing.
Как браузеры защищали от этого?
Для борьбы с такой угрозой браузеры внедряли различные меры:
✅ Ограничение доступа к вычисляемым стилям для :visited
✅ Игнорирование некоторых стилей вообще
Но эти подходы оставались полумерами, так как информация о посещённых ссылках оставалась глобальной, и её всё ещё можно было использовать для скрытого отслеживания. Например, буквально считая миллисекунды парсинга стилей: https://codepen.io/alinaki/pen/ogNrVoj
Примечание: это будет работать только на Firefox и Safari и только на достаточно старых машинах.
Что теперь предлагает Google?
В Chrome 123 появился новый подход — Partitioned Visited Links History. Теперь ссылки считаются посещёнными только в пределах определённого контекста. Например, для одного сайта или даже внутри конкретного iframe.
Это значит:
✅ Один сайт не будет знать, какие страницы вы посетили на другом.
✅ История посещений разделена на изолированные части (partition'ы).
Псевдокласс :visited больше не работает глобально — он зависит от контекста.
Собственно, смотрим на иллюстрацию: пока вы не посетили ссылку на каком-то сайте, она подсвечиваться не будет. А вот в каком-нибудь поисковике или соцсети, куда вы заходите постоянно — будет. Что буквально нивелирует суть атаки.
Это не только предотвращает старые методы слежки, но и делает браузеры более приватными по умолчанию. Защита теперь встроена в механизм работы с веб-страницами.
👉 Подробности:
https://github.com/explainers-by-googlers/Partitioning-visited-links-history
#history #security #safety
#заметка дня
Вчерашний день начался с лёгкой тряски из-за неспособности некоторых разработчиков правильно обрабатывать такую простую вещь, как аналитику ссылок:
Каждый веб-разработчик, который блокирует открытие ссылки в новой вкладке по нажатию Ctrl/Cmd или средней кнопкой мышки — мой личный враг. Этому нет ни единого разумного объяснения.
function trackEventWithBeacon(eventName, params = {}) {
const measurementId = 'G-XXXXXXX'; // ← замени на свой GA4 ID
const apiSecret = 'YOUR_API_SECRET'; // ← замени на свой API Secret
const clientId = getClientId(); // читаем из _ga cookie
const payload = {
client_id: clientId,
events: [{
name: eventName,
params
}]
};
const url = `https://www.google-analytics.com/mp/collect?measurement_id=${measurementId}&api_secret=${apiSecret}`;
const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
navigator.sendBeacon(url, blob);
}
дополнительные выводы:
- контрактная разработка позволяет уменьшить риски
- динамические схемы валидации с бэкэнда позволяют сохранить источник истины
- стандартизация обработки ошибок всегда дополнит контекст пользователя и избавит службу поддержку от дополнительной нагрузки
- в случае ошибки всегда следует предлагать посмотреть рекомендации по заполнению, а не оставлять пользователя наедине с иконками i в полях ввода (да-да, я тоже редко кликаю на них чтобы посмотреть попап с каким-то текстом)
Выиграй стажировку в IT и стартуй в карьере!
Pulpy и SuperJob запустили проект “Карьера шаг за шагом”. Его участники могут выиграть индивидуальную карьерную консультацию и стажировку в топовых компаниях.
У каждого направления (маркетинг, ИТ, бизнес, большие данные) есть свой эксперт. В вопросах ИТ своим опытом поделилась Наталия Давыдова, разработчица и автор канала “Наташа пишет про IT”. На сайте вы найдете видео-интервью и гайд: там много дельных советов и личный опыт Наташи по поиску работы.
Что делать?
Зайди на сайт, посмотри видео и скачай гайд
Отправь резюме — первым 200 участникам эксперты SuperJob бесплатно дадут обратную связь!
В мае эксперты выберут нескольких ребят, которых пригласят к себе на карьерную консультацию. А самый сильный участник получит стажировку в ИТ-департаменте SuperJob.
🔗 Ссылка на проект
Реклама АО “Мултон”, ИНН 7810249327, erid: 2W5zFK9uByA
#карьера #стажировка #IT #вайб
Яндекс снова запускает Баттл вузов — турнир по программированию, где можно выиграть 1 млн рублей!
В этом году участвовать смогут не только студенты и выпускники вузов, но и 11-классники. Опыт в программировании не так важен, главное — ваша страсть к кодингу.
Победителей ждет:
— 1 млн. рублей
— кубок чемпиона
— набор умных устройств для 30 финалистов
200 лучших участников выйдут в финал, который пройдет на фесте Young Con.
Решайте задачи быстрее соперников и станьте легендой своего вуза! Первый этап стартует в онлайне 14 мая, но зарегистрироваться лучше уже сейчас!
📥 Разработчики, больше никаких ложных срабатываний при анализе сторонних библиотек. Positive Technologies выпустила новую версию сканера PT Application Inspector.
🌀 В релизе объединили технологии анализа сторонних компонентов и статического анализа кода приложения — в продукте появились возможности анализа достижимости и поиска транзитивных зависимостей.
Результаты тестирования новой версии на 193 открытых проектах на GitHub, использующих уязвимые компоненты, впечатляют: количество ложноположительных срабатываний снизилось на 98–100%. Теперь можно сэкономить время на анализе срабатываний и сосредоточиться на исправлении реальных дефектов безопасности.
❌ Надоело копаться в ложных срабатываниях? Оставьте заявку на тестирование PT Application Inspector.
#ссылка дня
Я исчезающе мало пишу о Vue.js, потому что в своей жизни использовал его лишь в одном проекте.
Поэтому, если кто-то хочет присоединиться и периодически писать в канал что-то о Vue.js — милости просим.
Тем не менее, нельзя пройти мимо ставшего поулярным в последние несколько лет тренда State of...
И сегодня это — кто бы мог подумать — State of Vue.js Report 2025.
1. Почти все, кто попробовал Vue.js, остаются с ним: в одном из отчётов сообщалось, что 96% разработчиков, использующих Vue.js, планируют продолжать его использовать в будущем. Людям нравится!
2. Документация Vue.js получила высокую оценку: 60% опрошенных отметили качество документации как одно из главных преимуществ фреймворка. Тут, кстати, да. До появления новой версии, документация по React отставала от Vue.js на световые десятилетия.
3. Широкая интеграция с различными бэкенд-технологиями: Vue.js часто используется вместе с PHP (53% случаев) и Node.js (45% случаев). Это, кстати, забавно. У нас все internal tools — на Vue и пишутся бакенд-разработчиками.
4. Быстрый рост популярности: в 2022 году, после того как Vue 3.0 стал стандартом, количество загрузок npm увеличилось в 4 раза, достигнув в среднем 800 000 в неделю. Ну, заслуженно.
5. Постоянное развитие экосистемы: в 2024 году были отмечены значительные улучшения в инструментах разработки, таких как официальное расширение для VS Code и DevTools для Vue и Nuxt, что значительно улучшило DX.
State of Vue — это не просто отчёт. Это способ собрать обратную связь, понять, как меняются потребности разработчиков, и построить будущее фреймворка вместе с сообществом. Именно благодаря таким инициативам Vue остаётся живым, активно развивающимся проектом.
Читая весь отчёт, можно, теоретически, даже узнать что-то новое! Например, какой нынче самый модный способ для менеджмента стейта.
В общем, на самом деле, такие отчёты — это прекрасный способ уложить состояние индустрии в голову.
#vuejs #stateof
Станьте востребованным специалистом в SE, ML, CS или биоинформатике в магистратуре института прикладных компьютерных наук ИТМО!
Весь апрель проходят дни открытых дверей программ, среди которых корпоративные магистратуры Яндекса, VK, Альфа Банка, YADRO, Самолет. Преподаватели – разработчики IT- компаний. А еще есть возможность учиться онлайн и много проектной работы на каждой программе.
Вас ждет:
✅ Разбор особенностей поступления в 2025 году
✅ Презентация всех программ магистратуры института
✅ Ответы от руководителей, менеджеров и студентов программ на ваши вопросы
🔗 Все мероприятия пройдут онлайн, регистрируйтесь, чтобы получить ссылку
Реклама. Университет ИТМО ИНН:7813045547
#красивое дня
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
✅ Имба: в сети обнаружили мегашпаргалку с самыми полезными нейросетями на все случаи жизни.
Сохраняем самое крутое:
🤩Claude 3.7 Sonnet — мастхев для программистов
🤩Same New — быстрая копия интерфейса сайта
🤩Openrouter — доступ ко всем ИИ
🤩Suno AI — своя музыка с нейросетью
Подпишись и находи для себя крутые нейросети бесплатно: /channel/+9ctf35SNV3k0MTBi
#статья дня
Итак, перед тобой задача: поставить заглушку, пока грузится основное изображение.
Нет проблем, говоришь ты, и шлёпаешь серый прямоугольник.
И все такие: «Ну чот...»
Наверное, есть же что-то получше?
Да, есть. LQIP-техники вида, собственно, LQIP, SQIP и BlurHash. Вот, писал тут: /channel/htmlshit/2565
Ну или генерация всенаправленного градиента по фото: /channel/htmlshit/3517
Но это всё как-то муторно... вот бы что попроще.
И таки есть! Лин Рада — разработчик из Canva — придумал новую технику LQIP, основанную на CSS. Заключается она в кодировании цветных тёмных/светлых участков короткой последовательностью символов.
Ну, типа:
<img src="…" style="--lqip:192900">
#новость дня
Figma зарегистрировала словосочетание Dev Mode на себя!
Никогда такого не было и вот опять.
Кроме шуток, Figma направила официальное письмо компании Lovable, которые разрабатывают визуальную AI IDE, c требованием прекратить называть их средство просмотра сгенерированного исходного кода Dev Mode.
Всего у Figma 13 зарегистрированных торговых марок, кроме Dev Mode там ещё есть, например, Schema и слоган "Nothing great is made alone". И слово Config!
Подали они заявку летом 2023, а получили одобрение в ноябре 2024.
Словосочетание Dev Mode, хоть и подразумевается во многих приложениях, до этого момента никем не регистрировалсь и, кстати, нигде в общем-то кроме Figma напрямую и не применяется.
Хотя тут с полей сообщают, что Atlassian применяла ещё в 2021.
Но чтоб прямо регистрировать... Каковы ваши мысли по поводу, котаны?
P. S. Надо бы проверить Google DevTools :)
#trademark #devmode
В новом выпуске yet another podcast обсуждают, как и зачем Яндекс нанимает стажёров круглый год. Почему компания делает на это такую большую ставку, что ценят начинающие спецы и как олимпиадное программирование может помочь при старте карьеры.
Говорят не только про задачи и процессы, но и про подход — как стажёры становятся полноценной частью команды, получают офферы, иногда даже отложенные, и переезжают на лето в «Айтиобщагу». Делятся цифрами (в 2025 году хотят нанять 2800 человек, в прошлом — было 2300) и объясняют, чем стажёры лучше «готовых» специалистов. Спойлер: стажёры растут быстрее, так как приходят в компанию с «чистого листа».
Из интересного: самые популярные направления для стажировки — бэкенд, ML, аналитика и Data Science, причём спрос на машинное обучение в этом году вырос в полтора раза.
Выпуск будет полезен тем, кто рассматривает стажировку, только готовится к первой работе или вообще думает, стоит ли идти в ИТ. А для тех, кто готов систематизировать скиллы в определенном направлении уже доступны Летние школы. Ежегодные интенсивы начнутся летом, но подать заявку нужно уже сейчас.
#фишка дня
Как контролировать прозрачность фоновых изображений?
Первое, что приходит в голову: «Никак».
Точнее, как — никак. Можно сымитировать фоновую картинку через наложение фона на псевдоэлемент или любой другой элемент вообще, и уже его прозрачность и контролировать.
Но может, как-то ещё?
И таки да!
background-image: url(image.jpg);
background-color: rgba(255, 255, 255,0.2);
background-blend-mode: lighten;
background-image: url(image.jpg);
background-color: rgba(0, 0, 0,0.2);
background-blend-mode: darken;
#статья дня
7 апреля 2025 года системе контроля версий Git исполнилось 20 лет!
По этому поводу GitHub (а кто же ещё) провели с автором — Линусом Торвальдсом — интервью.
Выдержки:
– Он не хотел писать систему контроля версий — это казалось скучным. Но BitKeeper перестал быть вариантом, и пришлось самому.
– У него не было «плана» или видения. Всё делал на ходу, по мере необходимости. Даже не знал, насколько всё это станет популярным.
– Git задумывался не как «инструмент для всех», а как «инструмент для меня». И, по мнению Линуса, именно в этом причина успеха.
– Его подход: «не делать предсказаний», особенно в open source. Он сам не ожидал, что Git проживёт 20 лет.
– Команду git bisect называет «одной из умных штук», но уклоняется от выбора любимой команды: «это как выбирать любимого ребёнка».
А прочитать целиком рекомендую тут: https://github.blog/open-source/git/git-turns-20-a-qa-with-linus-torvalds/
Кстати, интервью скоро обещают выложить в формате видео!
#git #anniversary
⚡️Поступите в магистратуру ИТМО без экзамена с помощью хакатона DevWeek!
Вас ждут:
✅ Реальные проекты от Газпром нефти, Самолета, Альфа банка и YADRO
✅ Менторы — специалисты из компаний-партнеров
✅ Лекции практиков по разработке ПО и управлению проектами
✅ Призы от партнеров
✅ Шанс стать студентом магистратуры ИТМО без экзаменов
🔗 Узнать больше и подать заявку можно здесь:
Поторопитесь, дедлайн для регистрации – 20 апреля
Реклама. Университет ИТМО ИНН:7813045547
Многие тимлиды рано или поздно сталкиваются с одними и теми же вопросами:
— Как наладить доверие в команде?
— Почему разработчики не всегда говорят о проблемах вовремя?
— Как замечать, когда человек выгорает, если он всё время “окей”?
— И как вообще не теряться в рутине и продолжать развивать людей?
Часто решение начинается с простой регулярной практики — 1-1 встреч. Но и тут возникают трудности:
— Зачем они, если всё и так работает?
— О чём говорить, кроме задач?
— Как не скатиться в формальность или, наоборот, в дружескую болтовню?
1-1 — это не про контроль. Это про внимание. К человеку, к тому, что важно, но не видно в таск-трекере.
Разобраться в этом можно на вебинаре «1-1 — победа или ничья?», где вместе с HR BP из Selectel Ириной Лаксовой обсудим:
— зачем эти встречи нужны не только лидеру, но и каждому участнику команды;
— как их проводить осмысленно;
— и какие темы действительно стоит поднимать.
Формат спокойный, без лозунгов. В фокусе — коммуникация и то, как с её помощью сделать команду сильнее.
Вебинар бесплатный. Будет полезно и тем, кто уже практикует 1-1, и тем, кто пока только к ним приглядывается.
Зарегистрироваться на вебинар
#история дня от подписчика
Сегодня столкнулся с частым огрехом - неявная обработка серверных ошибок.
У альфа банка это безусловное отображение блока с ошибкой вместо кнопки "Оплатить".
А теперь моя история.
Нужно было оплатить таможенную пошлину по реквизитам из квитанции.
Заполняю все поля и обязательное КБК (код бюджетной классификации).
Однако, как обыватель, не знал о том что обязательно к заполнению поле УИН (уникальный идентификатор начисления) и, если не указано в квитанции, ему можно смело присвоить значение 0.
Важное дополнение - пока не заполнено или неправильно заполнено поле УИН, апи альфа банка всегда будет присылать ошибку и клиент никогда не узнает что он сделал не так.
На UI никакой валидации с подсветкой полей нет и догадаться можно только... правильно, во вкладке Network консоли разработчика.
Иду смотреть запросы с ошибкой и вижу запрос с 500-м статусом, а там чудо:
{
"errorId": "afb38dc005f03ee3",
"application": "multistep-router-api",
"errorCode": "INVALID_UIN_FIELD",
"level": "ERROR",
"messages": {
"ru": "УИН или код НПА введены с ошибкой. Проверьте данные ещё раз"
},
"errorPath": "INVALID_UIN_FIELD"
}
#фишка дня
Все прекрасно знают, что на мобильных устройствах щипок двумя пальцами — отвечает за зум (хотя это было ого-го какое изобретение), двойной тап — иногда — тоже. Что можно скроллить, что можно тапать...
Но знали ли вы, что этим поведением можно управлять? Знали ли вы, что браузеры (часто) устанавливают задержку между тапом и его обработкой, примерно в 300 мс? Да-да, всё для обработки двойного тапа.
Так вот, вашему вниманию:
touch-action: manipulation;
#element {
touch-action: pan-right pinch-zoom;
}
touch-action: pan-x; элемент можно скроллить только по вертикали, но пока он движется по инерции, его можно и вертикально скроллить. После чего скролл успешно в последнем положении блокируется вновь.
#фишка дня
Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.
Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB
Но он не остановился на достигнутом эффекте и пошёл дальше. Я не просто так сначала приложил простое демо. "Фонарик" — это радиальный градиент, координаты центра которого устанавливаются JS-ом. Собственно, база.
Теперь давайте перейдём к эффекту посложнее, на видео. Там подключен реакт, чтобы можно было добавлять карточки и управлять параметрами эффекта.
Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR
1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:
[data-glow] {
background-image: radial-gradient(
var(--spotlight-size) var(--spotlight-size) at
calc(var(--x, 0) * 1px)
calc(var(--y, 0) * 1px),
hsl(var(--hue) 100% 70% / 0.25), transparent
);
background-attachment: fixed;
}
mask:
linear-gradient(transparent, transparent),
linear-gradient(white, white);
mask-clip: padding-box, border-box;
mask-composite: intersect;
#заметка дня
Как мы все знаем, в JavaScript есть две формы «пустоты»: undefined и null.
Но почти весь современный фронтенд давно выбрал сторону.null — это ошибка на миллиард долларов, о которой пожалел даже его создатель, Тони Хоар. Он добавляет путаницу, ломает API и заставляет писать лишние проверки.
Почему null — плохая идея:
Разные API возвращают то null, то undefined, то оба.
Это неясно, это ошибки.
✅ TypeScript-гайд от Microsoft прямо говорит: используйте undefined, избегайте null.
✅ В TSLint null запрещён по умолчанию (`no-null-keyword`).
✅ Правила ESLint Unicorn (да, название неслучайное) — тоже пропагандируют борьбу с null в пользу чистого, предсказуемого кода.
✅ В крупных экосистемах, например, как у Prisma, null создаёт баги и недопонимание в API (issue #572)
✅ undefined — поведение по умолчанию в JS для необъявленных свойств и пустых объектов.
✅ undefined выигрывает даже в JSON. Когда ты сериализуешь данные:null остаётся в объекте:
{ "a": null }
undefined просто исчезает:
{ "a": undefined } → { }
null весил 13.9 MB, а с undefined — всего 21 байт. И если ты работаешь с Node.js и хорошо контролируешь свои API — undefined тебе только на руку.null, и даже DOM API возвратит null при отсутствии элемента (ноды), выбор становится не настолько простым. К счастью, мы можем использовать optional chaining (?.) и nullish coalescing (??) чтобы снизить вероятность конфуза.null для пустых сторов, но с недавнего времени разрешил undefined (в своей манере, там сложная концепция).null — это рудимент. Он создаёт больше проблем, чем решает. undefined уже делает всё, что нужно — чище, предсказуемей и легче.null — это наш бакенд на PHP и MySQL 🤷
#заметка дня
Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.
Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.
К счастью, решение что для v5 React Router, что для v6 одинаковое:
function ScrollToTop() {
const { pathname } = useLocation();
useLayoutEffect(() => {
document.documentElement.scrollTo(0, 0);
}, [pathname]);
return null;
}
<BrowserRouter>
<Routes>
...
</Routes>
<ScrollToTop/>
</BrowserRouter>
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);
Насыщенная программа на 12 часов, 5 треков докладов и тусовка с экспертами в IT
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310