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

#такое дня Когда в следующий раз будете ворчать на коллегу за PR в 200 строк — вспомните это: https://github.com/oven-sh/bun/pull/30412 Ментейнеры Bun, конечно, могут сколько угодно рассказывать нам о бессонных ночах в попытке отдебажить утечку памяти в Zig (будучи крупнейшим проектом на этом языке), но без этих ночей ничего бы не вышло. Штош. #rust #zig

Захотелось какой-нибудь лёгкий холивар устроить… А подходящее для этого место, кстати, есть 🚀 19 мая AvitoTech собирает у себя в офисе фронтендеров на два круга открытых дискуссий на самые разные темы. Вот некоторые из них: — Дизайн-системы в эпоху AI. — Микросервисы во фронтенде. — Рост в тимлида и страхи, связанные с ним. — T-shape, мода на фулстек и важность бэкенда для фронтенда. Хороший способ влиться или просто пообщаться с комьюнити! Закончится вечер, к слову, афтерпати на веранде. Зарегаться можно тут!

#инструмент дня Надоело каждый раз выходить из уютной консоли и открывать caniuse.com, чтобы посмотреть, с каких браузеров поддерживаются сабгриды? Ой, только не говорите, что я один тут верстаю вслепую. Вашему вниманию Bramus Van Damme и его caniuse-cli: https://www.npmjs.com/package/@bramus/caniuse-cli

$ caniuse viewport-units
$ caniuse "viewport units"
$ caniuse @property

Имеется автокомплит для zsh. Ну, консольные маньяки, перепись! #cli #caniuse

В CodeRun встроили AI-тренера на SourceCraft CodeRun — это онлайн-тренажер Яндекса для разработчиков: решаешь задачи, качаешь скиллы и готовишься к техсобесам. Теперь в нем появился AI-помощник: он не напишет код за тебя, но проведёт от намека к инсайту, не лишая права на ошибку. Вместо готового решения ты получаешь: — прогрессивные подсказки; — тест-кейсы для проверки решения, включая краевые случаи; — разбор примеров из условия. Чтобы попробовать, заходи в задачи на CodeRun и открывай вкладку «Кодерун AI». Пока фича в бета-режиме, нужна авторизация, а лимит — 20 запросов в сутки.

#заметка дня Ли Робинсон — разработчик и тренер в Cursor — поделился практическими советами о том, как выделиться среди сотен кандидатов при подаче на инженерную позицию. Как сделать своё инженерное резюме заметным (глазами человека, который смотрит сотни резюме): 1. Резюме должно быть на одну страницу. Если нужно больше — добавьте ссылку на сайт. Не нужно по 10+ пунктов на каждую работу. 2. Вы сразу будете выделяться среди >90% кандидатов, если у вас есть персональный сайт с продуманным содержанием. 3. Если вы указываете свой X (Twitter), возможно, стоит почистить посты? Звучит очевидно, но люди публикуют всякое. 4. Обязательно добавьте GitHub. И, пожалуйста, без профиля в стиле MySpace с кучей бейджей и картинок — я хочу видеть код и ваши реальные навыки. 5. Адаптируйте отклик под компанию. Для стартапа курсы из университета менее важны. Для FAANG — могут помочь пройти ATS. 6. Удивительно, но многие резюме вообще не упоминают AI или агентов. Разработка меняется, и от вас ожидается понимание работы с AI. Это должно быть отражено в проектах и резюме. 7. Относитесь к LinkedIn серьёзно. Да, разработчики чаще сидят в X, но внутри компаний всё ещё пересылают именно LinkedIn. 8. Покажите свою индивидуальность: интересы, вкус, мышление. Книги, тексты, фильмы — всё, что раскрывает вас как человека. В конце концов, люди хотят работать с теми, кто им интересен и приятен. 9. Не используйте AI для написания резюме или сопроводительного письма. Это очень заметно, особенно в AI-компаниях. Можно использовать для идей, но писать — самому. 10. Не добавляйте фото в резюме. Лучше разместите его на внешних ссылках. 11. Качество важнее количества. Лучше 3 сильных проекта, чем 27 поверхностных AI-поделок. Помните: рекрутеры просматривают сотни и тысячи откликов. Они не будут тратить 20 минут на каждый. Уберите лишнее и переходите к сути. #resume

Замечал странную штуку: дел не так уж много, но любое – как будто через сопротивление? Не то чтобы лень. Просто не делается и все тут! Зато видосики на Ютубе залетают на ура... Попался годный разбор, советую посмотреть, если тоже чувствуешь, что превращаешься в апатичного зомби 👉🏼 https://t.me/Manifestans Мысль, которая зашла: когда перестаешь понимать "чего хочу Я", даже нормальная жизнь ощущается, как каторга. Кликай сюда, чтобы разобраться, что с тобой происходит и как снова начать испытывать ощущение, что ты живешь, а не существуешь.

#инструмент дня Вот что происходит, когда компания годами игнорирует запросы сообщества и вместо этого штампует один AI-инструмент за другим. Rebased — новый открытый графический Git-клиент, который быстро набирает обороты. Все, кто работал с IDE от JetBrains, знают — их Git-инструменты долгое время считались одними из самых удобных. Особенно Diff. Но пока рынок уходил в сторону AI-разработки, JetBrains топтались на месте — и многие пользователи начали искать альтернативы. И вот появляется разработчик, который берет IntelliJ Community Edition (open source), вырезает оттуда всё, связанное с языками программирования, оставляет только Git — и собирает из этого отдельный продукт. Так и появился Rebased. Для тех, кто привык к экосистеме JetBrains — интерфейс будет знакомым. В итоге: • Полностью open source (Apache 2.0) • Продвинутый Diff / Code Review (на базе JetBrains) • Полноценные VCS-инструменты: Commit, Git Log, ветки • Интерактивный rebase + визуальное решение конфликтов • Полнотекстовый поиск • Встроенный терминал (с вкладками) • Нативная поддержка Git Worktree • Те же хоткеи и UX, что в IntelliJ Минус: потребляет больше памяти, чем другие клиенты. Но всё ещё заметно легче полноценной IDE. На фоне быстрого развития agentic-разработки, удобный и привычный Git-клиент это очень важно, котаны. GitHub: https://github.com/DetachHead/rebased Скрины отсюда. #git #ide #jetbrains

🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖 Можно бесконечно ходить на самые разные митапы, знакомиться с людьми… И совсем не видеть эффекта А всё потому, что всем нам нужна не встреча на 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-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене. В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати! 🔖 Смотрите подробности и регистрируйтесь. Встречаемся только в офлайне, количество мест ограничено.

#статья дня Висящие промисы как простой способ оборвать 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

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

В Сбере и Т-Банке менеджерил людей. Сейчас — Claude и OpenClaw. Не легче. Егор у себя в канале рассказывает, как собирает AI-продукты соло — без команды, без кода руками. Собрал MVP за 3 недели. Потом репозиторий вырос — и AI-агенты начали ошибаться на каждой задаче. Файл не туда положит, логику переиначит, чинит фикс в одном — ломает в трёх. Два дня правил за ним то, что он сам же и сломал, выглядел как идиот. 🫠 Дошло: дело не в модели. Дело в подходе. В маленьком репо контекст помещался целиком — в большом агент стал работать по обрывкам: даёшь задачу, подтягивает 5 файлов, а нужны 12. Делает правдоподобно — а оно не работает. Что понял: • писать код — больше не работа. Работа — строить пайплайн, в котором AI не сбивается с задачи. • контекст — это валюта. Каждый промпт = вопрос «что именно агент должен сейчас видеть, чтобы не угадывать». Без ретуши — в @itsbulychev.

#codepen дня Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей. Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz 1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none. 2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так. Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом. 3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов. Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~. Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has. И да, поддерживается везде. #css #has #appearance #бородач

#статья дня Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Teansitions, и только сейчас — между элементами. В Chrome 147, наконец, добавили element-scoped view transitions. До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок. Выглядело это примерно так:

document.startViewTransition(() => {
  list.sort(...)
  render()
})

Теперь можно запустить переход прямо на контейнере списка:

listElement.startViewTransition(() => {
  list.sort(...)
  render()
})

И в этот момент браузер работает только с этим куском DOM. На практике это означает, что можно спокойно: — анимировать список — параллельно обновить, например, сайдбар — и одно не будет цеплять другое Сплошные плюсы. Собственно, статья: https://developer.chrome.com/blog/element-scoped-view-transitions Что ещё в Chrome 147: https://developer.chrome.com/blog/new-in-chrome-147 #chrome #view #transitions

Весна — идеальное время, чтобы освоить и обновить навыки по выгодной цене. При оплате курсов Яндекс Практикума до 30 апреля вы получите: — 5 дополнительных курсов, подобранных специально под вашу программу — набор из 5 электронных книг по саморазвитию А также — скидку 15% для карьерного роста. Начните сейчас — и уже к осени вы значительно прокачаете свои навыки и сможете уверенно выйти на рынок в пик сезона найма.

#инструмент дня Наткнулся на шрифт 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

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

#статья дня Злые Марсиане в очередной раз хвастаются!

Making your site visible to LLMs: 6 techniques that work, 8 that don't

Ладно, на самом деле — крайне забавный кейс. Заказчик сидел-сидел, пилил чота с Клодом, в итоге решился на заказную разработку. И ему выкинуло, что, мол, Злые Марсиане отлично подходят. Как вам такое SEO, а? Сразу ссылка: https://evilmartians.com/chronicles/how-to-make-your-website-visible-to-llms На самом деле, статья большая, с историческими экскурсами и подробностями обсуждений, но сводится всё к одному: LLM-ки любят простой текст и чёткие направления. А кто-то застал этот максимально дурацкий бред от SEO-оптимизаторов? Помните же, как они ломали всю крутую семантику, не давали использовать заголовки, не давали прописывать strong, заставляя упихивать все стили в CSS и писать на дивах? В моей карьере был случай, когда нас заставляли в каждую статью вносить грамматическую опечатку, просто чтобы поймать людей, ищущих с ошибками 🤦‍♂️ Да, Google и прочие в итоге, конечно, стали ранжировать нормальные проекты выше, но ущерб уже был нанесён. А что же теперь? llms.txt, отдельные роуты на md-файлы — потому что все ваши скрытые в HTML SEO-смысла для LLM-ок чистый бред и расход токенов — и вот вы уже великолепны. Статью всё равно почитайте, там хорошо. #llm #ai #seo