Будни разработчика

🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 Можно бесконечно ходить на самые разные митапы, знакомиться с людьми… И совсем не видеть эффекта А всё потому, что всем нам нужна не встреча на 3 часа, а постоянное и активное коммьюнити, чтобы обсуждать наболевшее. Именно это сейчас хорошо получается у AvitoTech — регулярно у них в канале видим анонсы интересных встреч, отдельных подкастов для SRE, Go-разработчиков, тим и техлидов и какой-то бесконечный поток прикладных статей и советов. Если находили ещё что-то похожее, делитесь в комментах! Реклама. Рекламодатель ООО «Авито Тех». erid: 2VtzqurNidV

#статья дня Scroll-driven animations уже давно есть в Chrome, и за последний год вокруг них накопилось много примеров — у того же Bramus Van Damme были подробные демки с view-timeline и разными вариантами ranges. Теперь появился ещё один большой разбор от самого Джоша Комо: https://www.joshwcomeau.com/animation/scroll-driven-animations/ Как всегда, это интерактивная документация по animation-timeline. Посмею себе напомнить ключевую идею процесса: прогресс анимации берётся не из времени (`animation-duration`), а из положения элемента относительно viewport или scroll-контейнера. В статье это сразу показывается на примере с progress bar, где значение анимации напрямую связано со скроллом страницы. Дальше он последовательно вводит scroll-timeline и view-timeline. Первый вариант привязывается к прокрутке контейнера, второй — к тому, как конкретный элемент входит и выходит из viewport. Есть наглядные демо, где один и тот же @keyframes ведёт себя по-разному в зависимости от выбранного таймлайна. Отдельно разбирается animation-range. На интерактивных примерах видно, как entry, exit, cover, contain влияют на диапазон, в котором проигрывается анимация. Есть демонстрации с несколькими timeline’ами и синхронизацией анимаций, где один scroll-прогресс управляет сразу несколькими свойствами. Практически в каждом блоке есть интерактив: можно скроллить вложенные контейнеры и сразу видеть, как меняется поведение. Документация: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline Примеры от Google: https://developer.chrome.com/docs/css-ui/scroll-driven-animations/ Из нюансов — Safari всё ещё отстаёт: часть API отсутствует или работает неполно, так что без фоллбеков пока не обойтись. #css #scroll

#фишка дня А вы знали, что в GitHub Markdown не надо списки нумеровать самому?

    
        
1. Раз
1. Два
1. Три
{}
    

будет буквально преобразовано в

    
        
1. Раз
2. Два
3. Три
{}
    

И не надо париться, когда редактируешь.

🏄‍♂️ Приближаем лето всем фронтенд-сообществом 23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴 ♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене. В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати! 🔖 Смотрите подробности и регистрируйтесь. Встречаемся только в офлайне, количество мест ограничено.

#инструмент дня Наткнулся на шрифт Datatype. Это вариативный шрифт, который превращает текст в… графики. Прямо через лигатуры. Пишешь что-то вроде: {l:15,45,90,30,75,20,85,95} → получаешь линейный график {b:30,70,50,90} → столбики {p:65} → круговую диаграмму То есть никакого SVG, canvas и прочего. Сделано это через OpenType-лигатуры + вариативные оси. По сути, шрифт парсит жисон и подменяет символы на нужные глифы. Выглядит интересно. Где это может быть полезно: — быстрые прототипы графиков прямо в тексте — документация — демки и презентации Минусы: — копирование: вставится исходный текст, но не график (логично) — доступность: скринридеры будут читать это как {l:15,45…}, а не как график (решаемо) — кастомизация сильно ограничена Хотя как концепт — очень круто. Пощупать можно тут: https://franktisellano.github.io/datatype/ Где используем, котаны? #font #diagram

#статья дня Висящие промисы как простой способ оборвать async-функцию

    
        
await new Promise(() => {})
{}
    

Зачем так делать? Отмена через throw ненадёжна — её легко случайно поймать в try/catch, и код поедет дальше.

    
        
try {
  await handler()
} catch (e) {}
{}
    

С висящим же промисом выполнение гарантированно останавливается. Где это используется? В пошаговых workflow, где функция должна завершиться на середине и продолжиться позже.

    
        
async function signup(user) {
  await step("create-user", user)

  if (!user.emailVerified) {
    await new Promise(() => {}) // закончили здесь
  }

  await step("send-email", user)
}
{}
    

Оркестратор сохраняет прогресс и потом запускает её заново, пропуская выполненные шаги. Минусы: — такой код легко сломать случайно: забытый await или лишний Promise — и функция зависнет навсегда — трудно дебажить: нет ошибки, нет стека, просто «ничего не происходит» — не подходит для обычного приложения без оркестратора (сам по себе это тупик) — может путать других разработчиков: выглядит как баг, а не как намеренное поведение В общем, это способ явно остановить выполнение без исключений, но он требует дисциплины и инфраструктуры вокруг. А, ну да. Сама статья: https://www.inngest.com/blog/hanging-promises-for-control-flow #js #promise #halt

НДС 0% для твоего продуктаБольшинство небольших IT-команд думают, что реестр российского ПО - это для корпоратов с юристами и штатом 300 человек. Но это не так. Если у тебя есть:– мобильное приложение– SaaS продукт– B2B сервис для бизнеса– AI сервис / бот / автоматизация…то вполне возможно, что продукт можно включить в реестр российского ПО. И вот зачем это делать:– НДС 0% (и для НДС 5% на УСН тоже)– возможность работать с госзаказчиками– репутация: “реестровое ПО” звучит убедительнее, чем “мы стартапчик”.Если у тебя уже есть продукт и ты хочешь понять, можно ли включиться в реестр - напиши нам.Разберем бесплатно твою ситуацию, скажем честно:– можно зайти или нет– что нужно доработать– сколько времени займет– какие выгоды ты получишь.Пиши или переходи на сайт.Пока одни думают “это не для нас”, другие уже экономят деньги.

#такое дня Кто хочет поорать на монитор? На меня не смотрите, я уже поорал. Итак, насколько хорошо ты понимаешь даты в JavaScript? Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают. Итак, вашему вниманию квиз на пограничные условия в JS Date API. Вперёд, делитесь результатами: https://jsdate.wtf/ У меня всё очень плохо 🫠 #js #date #wtf

Как давно вы от души смеялись? А отдыхали? Кажется, можно делать это чаще — даже вне зависимости от ответа. Да и лучше это всё совместить и поучаствовать в розыгрыше 10 и 20 тысяч рублей на 🌍Путешествиях. Переходите в тг-канал команды Яндекс Вертикалей, чтобы посмотреть подробности.