14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
С начала 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
#фишка дня
Поменяли какую-то настройку в VS Code, и теперь всё сломалось?
Вообще не проблема! Вводим в поиск @modified и — вуаля — видим все настройки, отличные от дефолтных!
Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.
#vscode #settings #json
🧠 Коуч, которая раньше искала баги в коде, а теперь помогает находить баги в мышлении
Хочу дать рекомендацию, которая не про код, а про то, что стоит за ним.
Наталья Голубева — коуч ICF и в прошлом QA-инженер. Она помогает тем, кто застрял в карьерных или личных задачах.
К ней приходят айтишники, которые:
– хотят уйти из найма, но боятся;
– выгорели, но продолжают тащить проекты на силе воли;
– мечтают о чём-то своём, но саботируют;
– сомневаются в себе, несмотря на 10+ лет опыта.
Если чувствуешь, что сам не вывозишь, мысли закольцевались, настроение падает с ошибкой 500, а понимание, что делать — с ошибкой 404, рекомендую попробовать коучинг с Натальей.
Также она ведёт свой канал 👉 @golubeva_online👈, где делится постами и заметками о мышлении. Например, её посты:
На чём на самом деле держится ваша сила воли?
Как найти нужный ответ внутри себя?
Всё равно всё будет через ЖОПП
Подпишись, чтобы не потерять полезный контакт!
Реклама. О рекламодателе
#фишка дня
Применяя position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.
Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем margin-bottom на thead размером во всю высоту строки:
margin-bottom: calc(1lh + 20px);
1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.
#инструмент дня
Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.
Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.
И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).
И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/
Я, честно, не считаю вручную акцентированный градиент настолько лучше автоматически созданного по контрасту, но для основных, идейных изображений, наверняка кому-то пригодится.
Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.
#gradient #tool #mesh #бородач
#видео дня
Прямо сейчас идёт трансляция Epic Web Conf 2025. Конкретно в этот момент — рассказ об фронтенд-инфраструктуре компании ByteDance (стоящей за TikTok). А именно, о RSpack (моя любовь), RSBuild, Lynx. Большое влияние уделено микрофронтендам и Module Federation.
Срочно подключаемся: https://www.youtube.com/watch?v=SDuvi5eUqp0
#инструмент дня
Мой самый любимый виджет из всех — Modal Bottom Sheet. Это как в построении маршрута на Google Maps. Шторка, по-нашему. Дёргаешь её туда-сюда, забавно.
Так вот, в мобильных фреймворках вроде того же Flutter и SwiftUI шторка реализована из коробки, а для веба — приходится изгаляться.
Хотя у шторки на мобильных устройствах очень много на самом деле общего со множеством других виджетов: модалка, тост, боковое меню, лайтбокс, стек (как в Tinder). Просто потому что их очень интуитивно можно смахнуть или развернуть жестами.
Так вот, собственно, к чему это я: https://silkhq.co/
Прекрасная библиотека, реализующая шторку и ей подобные виджеты, их анимации и взаимодействия на разных устройствах.
Множество примеров, нативные анимации, жесты. Одна проблема: платная для коммерческого использования. И не открытая.
Две, получается, проблемы :(
P. S. В комментариях пишут, что так-то три проблемы. Третья — React. Штош.
#react #sheet #widget
⚡️Поступите в магистратуру ИТМО без экзамена с помощью хакатона 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
#новость дня
Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!
Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.
И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select
Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.
И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.
Впрочем, на этом преимущества заканчиваются.
А вот в новом селекте можно даже HTML писать в option!
Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.
Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)
Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output
Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.
А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.
Кроме заказчиков.
#select #custom
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
В айти давно поменялась философия рабочей среды. Спецы выбирают место работы не по формальным критериям, а по ощущению — «моё/не моё». То есть это не про «привлечение талантов» корпоративными методами, а про ценности, которые мэтчатся с личными.
Яндекс на фестиваль New Star Camp в горах Сочи перенес лучшие практики из своих офисов в три разные зоны. Они все про простые, но очень важные идеи:
— доступность — любой гость попробовать себя в роли сотрудника и перенести свою фотографию на большой «бейдж», а еще потестировать бенефиты сотрудников, получить приглашения на мероприятия или сделать кастомный мерч
— активности — в отдельном селфбуст-пространстве проходили воркшопы, дискуссии про ИИ и даже D&D игры
— атмосфера — уютная терраса в стиле офисных крыш компании, где можно взять чай, послушать музыкальные вечера, и просто неформально пообщаться
Выглядело это как естественное продолжение фестиваля. Когда компании становятся не работодателем, а местом для единомышленников — это совершенно другой уровень вовлеченности.
#инструмент дня
Охренеть какая штука!
https://react-explorer.com/
Это обозреватель зависимостей. Я бы даже сказал, созвездия завимимостей и сейчас вы поймёте, почему.
Потому что помимо простого дерева, которое в целом умеет строить кто угодно, тут имеется мини-карта!
Перемещаешься по карте — смотришь подсвеченные созвездия. Инспектор работает на любом реакт-сайте без отдельной установки, потому что построен по принципу React Scan — инджектит React DevTools на страницу.
Да, на минифицированном коде результат получается не очень понятный, но осознать масштаб зависимостей и связи между ними всё же позволяет.
Проект пока не открыт, но находится в открытом тестировании.
#react #analyze #dependencies
Яндекс вновь проведет масштабный фестиваль Young Con для всех, кто интересуется сферой IT
25 июня во второй раз пройдет фестиваль про технологии и карьеру в IT — Young Con. В этом году он будет доступен не только студентам, выпускникам и начинающим специалистам, но и школьникам 9-11 классов. Участники смогут познакомиться с IT-профессиями, посетить интерактивные зоны ведущих вузов, попробовать сервисы Яндекса, пообщаться со специалистами и пройти пробное собеседование.
Подробнее — на сайте Young&&Yandex и в Телеграм-канале.
Основа веб-разработки — это HTML 👀
Изучить этот язык можно на бесплатном онлайн-курсе от экспертов VK. Вы научитесь создавать структуру веб-страниц, подготавливать сайты для SEO, работать с текстом, таблицами, изображениями. Как итог — создадите свою первую веб-страницу.
Формат курса: видеоуроки уже записаны, учитесь в своём темпе.
Стоимость: бесплатно.
Как записаться: перейти на сайт VK Education и зарегистрироваться на курс.