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

🌐 Что происходит внутри инфраструктурных сервисов Yandex Cloud? Разработчики Yandex Cloud и Yandex Infrastructure расскажут об этом на встрече для разработчиков, архитекторов и инженеров, которая пройдет 16 апреля. В программе вас ждут реальные технические варианты реализации и опыт нетривиальных решений разработчиков платформы: — Инфраструктура как код для управления оповещениями: и никаких проблем — Развёртывание в ритме танго: как мы заменили оркестрацию процесса установки «хореографией» — Как мы оптимизируем вывод больших языковых моделей: кэширование, время отклика и ресурсы графических ускорителей — Как мы строили собственную сеть доставки контента и через что нам пришлось пройти? — Как мы работаем с уязвимостями на примере современных аппаратных атак Также команда расскажет о разработке программных решений, которые устанавливаются в инфраструктуре заказчика, и о том, как в процессе установки оркестрацию заменили «хореографией». Участники смогут обсудить волнующие вопросы, варианты реализации и ошибки с разработчиками сервисов Yandex Cloud и другими участниками. Встреча пройдет офлайн в Москве и онлайн. Помимо экспертных докладов, офлайн участников ждут секретная техническая сессия и развлекательная программа, а онлайн-участников ждёт инженерное соревнование в прямом эфире. Зарегистрируйтесь, чтобы послушать реальные истории от разработчиков, обменяться опытом и узнать, что скрыто под «капотом» инфраструктурных сервисов, а также какие планы у команды на будущее!

#красивое дня Угадайте, что красиво летит по небу и укладывается в 249 символов? Правильно, SpaceX Starship! Не, ну правда:

    
        
vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-6,6,8),v;for(float i,f=3.+snoise2D(p+vec2(t*7.,0));i++<50.;o+=(cos(sin(i)*vec4(1,2,3,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*f*.02,v.y))))v=p+cos(i*i+(t+p.x*.1)*.03+i*vec2(11,9))*5.;o=tanh(pow(o/1e2,vec4(1.5)));
{}
    

Это валидный код шейдера на GLSL для приложения Twigl: https://twigl.app/?ol=true&ss=-OGqcXbWDIJun2QTR4Cm Они буквально конкуренты Shadertoy, и тот и другой — онлайн-инструменты для мгновенной проверки и рисования шейдеров на языке GLSL. Вот, кстати, пример на Shadertoy: https://www.shadertoy.com/view/XX3fDH В этом варианте ещё и камера дрожит. Красиво? Не то слово! #shader #glsl #3d

Стань стажером-разработчиком Frontend/Fullstack в Яндексе Реализуйте новые фичи и интерфейсы в приложении Умного Дома, пишите веб‑приложения для роботов‑доставщиков и автономных машин, участвуйте в развитии международных финтех‑стартапов Yango Pay и Buy&Sell, создавайте геймификацию на трекинге заказа в Яндекс Лавке и Яндекс Карты нового поколения. Фронтенд-разработчику необходимо: — уверенно владеть HTML, CSS и основами JavaScript — иметь опыт взаимодействия с TypeScript, React и SSR. Как преимущество: понимать основы Git, Docker, написания тестов — обладать базовыми техническими навыками. Фулстек-разработчику необходимо: — иметь опыт с Node.js — понимать основы CI/CD, баз данных, WebSocket, REST API или GraphQL — знать основы Python или Go. Стажировка официально оформляется, оплачивается, имеет гибкий график и предлагает оплату проезда и проживания для студентов из других городов. Станьте частью одной из команд фронтенд или фулстек разработчиков в Яндексе — оставляйте заявку.

#статья дня А ну, сходу ответьте, чем отличается :has(:not()) от :not(:has())? На самом деле, если тупо воспользоваться логикой английского языка — легко ошибиться. Разработчики браузера для, простите, разработчиков —Polypane — ведут свой блог с разными мелкими фишками, и сегодня — вот такая, как раз об этом. 📌 :has(:not()) Выбирает элементы, которые содержат определённые дочерние элементы, но не содержащие другие.

    
        
.card:has(:not(img)) {
  background: lightblue;
}
{}
    

🔹 Выберет .card, если внутри есть любой элемент, кроме <img>. 📌 :not(:has()) Выбирает элементы, не содержащие определённый дочерний элемент.

    
        
.card:not(:has(img)) {
  background: lightcoral;
}
{}
    

🔹 Выберет .card, если внутри вообще нет <img>. 🏁 Итого: :has(:not(img)) проверяет, есть ли что-то, кроме <img>. :not(:has(img)) проверяет, что <img> вообще нет. Ну а в статье всё то же самое, только чуть подробнее. Не ошибайтесь, котаны. #css #has #not

#такое дня Развлекаюсь тем, что извлекаю из ТВ-пульта на Flutter разные общие штуки в библиотеки. Первым на выход пошла реализация DLNA, ну а теперь — D-Pad, крестовина. Понятное дело, сама по себе крестовина мало интересна. А вот как концепт радиального меню — очень даже! Ну и потренироваться выкладывать пакеты в общий репозиторий тоже надо. #flutter

#фишка дня А вы знали, что Apple уже очень давно для каждой ноутбука поставляет и 3D-модель? Кроме шуток, если зайти на страницу продукта с Safari на iPhone, появится возможность посмотреть, например, ноутбук в дополненной реальности. Ясное дело, скачивается 3D-модель. Но эту модель легко вытащить и посмотреть даже на десктопе! Ссылка, нонечно, скрыта, потому лезем в исходники и ищем USDZ-файл. USDZ расшифровывается как Universal Scene Description Zipped, и придумал был ещё в Pixar. Что значит Zipped? Очевидно, zip-контейнер, а значит, можно распаковать и найти там и модель, и текстуры и карты нормалей. Но это история давняя, ARKit с нами уже лет 10. Что новое — это то, что начиная с MacBook Neo модель поставляется с возможностью конфигурации по цвету и состоянию! Закрыт-открыт, розовый-жёлтый... вот это вот всё. Можете сами зайти на яблочный сайт и скачать USDZ любого продукта. Как минимум, это забавно. А дальше уже можно и модельки покрутить, если надо. #apple #3d #ar

#фишка дня Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно. А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте. В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :) #vscode #minimap #бородач

#статья дня Страница грузится 7 секунд. Причина — один эмодзи ❤️ Иногда проблемы с производительностью оказываются совсем не там, где их ищешь. В статье Аллена Пайка «A Broken Heart» он разбирает случай, когда страница внезапно начала грузиться по 7 секунд, хотя сервер, сеть и JavaScript работали нормально. В профайлере оказалось, что почти всё время Safari тратит на layout — причём один проход занимал больше секунды. Дальше — обычный путь: постепенно вырезать куски интерфейса и смотреть, когда станет быстрее. В какой-то момент выяснилось, что всё упирается в один эмодзи в кнопке. Убираешь его — всё работает мгновенно. Возвращаешь — снова тормоза. Причина оказалась в том, как Safari работает со шрифтами. Если указать Noto Color Emoji как основной шрифт, он используется даже для обычного текста, хотя покрывает только эмодзи. Для всех остальных символов браузер каждый раз ищет подходящий fallback-шрифт. В процессе layout он пересчитывает размеры текста, переносы строк и позиции элементов, и делает это много раз подряд. В норме такие пересчёты почти ничего не стоят, но в Safari здесь есть просадка, из-за которой всё резко замедляется. В итоге одна строка с emoji-шрифтом может увеличить время layout в десятки или даже сотни раз. Минимальный пример:

    
        
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">

<style>
  body {
    font-family: "Noto Color Emoji";
  }
</style>

<button>Click ❤️</button>
{}
    

Если не ставить emoji-шрифт основным, а оставить его только в конце списка как fallback, проблема исчезает. В оригинальной статье есть ещё детали про поиск причины и минимизацию примера — стоит почитать: https://allenpike.com/2026/a-broken-heart/ Ну и официальный issue: https://bugs.webkit.org/show_bug.cgi?id=305636 Потрясающая хрень, конечно. На пустом месте. #css #emoji #svg #performance

#заметка дня Иногда стоит выкладывать рекламу, чтобы просто увидеть, что вы живы, котаны. На посты такого количества реакций никогда нет. А тема сегодняшней заметки — очередная статья на тему «Нам не нужен useEffect»: вот тут. В чём же проблема таких статей? Да на самом деле проблемы-то особой и нет, есть некоторая недосказанность. И недосказанность эта связана с тем, что ВСЕ ваши прекрасные библиотеки управления состоянием, анимацией, загрузкой данных и кешем — будут использовать useEffect внутри себя. И говорить, что вы отказываетесь от useEffect — не очень верно. Что верно, так это то, что их имплементация будет просто намного лучше протестирована. Ну, возможно. Тем не менее, самый любимый пример, когда отказ от useEffect действительно имеет смысл — на иллюстрации. Суть проста: если ваше действие требует полной перезагрузки логики, перерисовки компонента — так перерисуйте, блин, компонент, а не пытайтесь через useEffect чота там стартануть. Продублирую текстом:

    
        
// ❌ BAD: Effect attempts to emulate remount behavior
function VideoPlayer({ videoId }) {
  useEffect(() => {
    loadVideo(videoId);
  }, [videoId]);
}

// ✅ GOOD: key forces clean remount
function VideoPlayer({ videoId }) {
  useMountEffect(() => {
    loadVideo(videoId);
  });
}

function VideoPlayerWrapper({ videoId }) {
  return <VideoPlayer key={videoId} videoId={videoId} />;
}
{}
    

Это настолько чисто, элегантно и понятно — что удивляешься, почему это не стало общим паттерном. Впрочем, дело за вами, котаны. #react #useeffect #article

Сеньор за полгода? 📈 Эта девушка получила оффер в IT-компанию, хотя весь её опыт — пара курсов с ютуба 😱 Она воспользовалась ИИ-помощником и легко скрыла все свои пробелы в знаниях. Теперь впереди: ⤵️ удалёнка, стартовое обучение и ставка 55$ в час. Проходи собеседования вместе с Interview Ninja 🥷 Проверь успех на себе — есть 100 бесплатных запросов на день. 👉 @interview_ninja