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

Найти работу фронтендера трудно? Ты просто не там ищешь! @job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑‍💻

#фишка дня У скроллящегося сайдбара можно сделать fade по краям так, чтобы пункты меню как будто уходили под градиент сверху и снизу. И сделать это красиво. Сразу пример со всем кодом и описанием: https://codepen.io/editor/alinaki/pen/019d954a-79e7-7e49-8653-181b0b67ad61 Для этого используется mask-image, а управляет всем scroll timeline: скролл контейнера становится прогрессом CSS-анимации. Дальше анимация меняет стопы градиента в маске, поэтому в начале верхний fade выключен, после начала прокрутки появляется, а в конце исчезает нижний.

    
        
@keyframes sidebar-fade-mask {
  0% { --fade-top-end: 0%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
  8%, 92% { --fade-top-end: 6%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
  100% { --fade-top-end: 6%; --fade-bottom-start: 100%; --fade-bottom-end: 100%; }
}

.menu-scroll {
  animation: sidebar-fade-mask auto linear both;
  animation-timeline: scroll(self block);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--fade-top-end),
    #000 var(--fade-bottom-start),
    transparent var(--fade-bottom-end)
  );
}
{}
    

Важный момент в том, что здесь не двигается сам градиент и не меняется opacity списка. Меняются именно стопы градиента, и из-за этого fade ведёт себя как часть скролла, а не как отдельный декоративный слой. Если хочется понять глубже, смотреть стоит в сторону animation-timeline, scroll-timeline и обзора scroll-driven animations. #css #scroll

#фишка дня У скроллящегося сайдбара можно сделать fade по краям так, чтобы пункты меню как будто уходили под градиент сверху и снизу. Визуально это выглядит не как обычное затемнение, а как изменение самого окна, через которое видно содержимое. Сразу пример со всем кодом и описанием: https://codepen.io/editor/alinaki/pen/019d954a-79e7-7e49-8653-181b0b67ad61 Для этого используется mask-image, а управляет всем scroll timeline: скролл контейнера становится прогрессом CSS-анимации. Дальше анимация меняет стопы градиента в маске, поэтому в начале верхний fade выключен, после начала прокрутки появляется, а в конце исчезает нижний.

    
        
@keyframes sidebar-fade-mask {
  0% { --fade-top-end: 0%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
  8%, 92% { --fade-top-end: 6%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
  100% { --fade-top-end: 6%; --fade-bottom-start: 100%; --fade-bottom-end: 100%; }
}

.menu-scroll {
  animation: sidebar-fade-mask auto linear both;
  animation-timeline: scroll(self block);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--fade-top-end),
    #000 var(--fade-bottom-start),
    transparent var(--fade-bottom-end)
  );
}
{}
    

Важный момент в том, что здесь не двигается сам градиент и не меняется opacity списка. Меняются именно точки перехода внутри маски, и из-за этого fade ведёт себя как часть скролла, а не как отдельный декоративный слой. Если хочется повторить приём, смотреть стоит в сторону [`animation-timeline`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline), [`scroll()` timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll), [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/%40property) и обзора [scroll-driven animations](https://developer.chrome.com/docs/css-ui/scroll-driven-animations). #css #scroll

❤️ Небольшая, но полезная подборка. В IT сейчас слишком много шума. Собрана папка с каналами по разработке, аналитике и кибербезопасности. Без сгенерированных текстов — только реальные кейсы и мысли от практикующих специалистов. 🔥 Забирайте, чтобы оставаться в контексте

#codepen дня В какую сторону крутится? :) #threejs #3d

Ищем героев для интервью в новый проект крупнейшего IT сообщества Хотим взять интервью у айтишников, которые пробили $10к зарплаты в месяц. Требования для участия (обязательно попросим пруфы): • доход от $10к с одной работы без учета годовых премий • доход не должен быть от менторства 👉 Если подходишь и хочешь поучаствовать, напиши @m0rtymerr_support с хэштегом #богатый_айтишник Интервью выйдут на YouTube канале. Студию для записи оплатим сами, от тебя — присутствие и рассказ о своем опыте. Компанию и собственное ФИО при желании можно публично не называть. Если не подходишь сам, но знаешь того, кто вписывается в требования, присылай контакт — за успешную запись наградим. #реклама О рекламодателе

#фишка дня В CSS есть ключевое слово safe, которое используется вместе со значениями выравнивания и не даёт контенту «вылезать» за границы контейнера. Если элемент не помещается при обычном выравнивании, браузер автоматически смещает его так, чтобы он оставался видимым. Это удобно в адаптивных интерфейсах, где размеры могут меняться и важно не терять доступ к содержимому. safe работает с flexbox, grid и свойствами вроде align-items, justify-content и другими. Простой пример:

    
        
.container {
  display: flex;
  justify-content: safe center;
}
{}
    

Здесь элементы будут центрироваться, но если не помещаются, выравнивание изменится так, чтобы их не обрезало. Подробнее читать тут: https://iprodan.dev/l/safe-alignment/ #css #flex #safe

#инструмент дня YouTube в 4k в независимом браузере? Да! Я уже давно посвещаю вас в процесс разработки браузера Ladybird — нового и независимого. Но что-то давно не присылал обновлений. А их полно! Вот из апрельской рассылки: https://ladybird.org/newsletter/2026-03-31/ В мартовском апдейте Ladybird много простых, но важных вещей. За месяц замержили 352 PR’а от 49 контрибьюторов, причём 19 из них — это люди, которые раньше в проект не коммитили. В целом видно, что разработка идёт непрерывно и без провалов по активности. Из заметного по движку — добавили AsmInt, свой байткод-интерпретатор на ассемблере для LibJS. Он берёт на себя операции вроде арифметики и сравнений, а в более сложных случаях уже уходит в C++. Параллельно его допиливали в течение месяца: убирали лишние проверки, использовали аппаратные флаги переполнения, кэшировали часто используемые значения. На этом фоне бенчмарки подросли: Kraken ~1.44×, Octane ~1.37×, SunSpider ~1.69×. Добавили часть Media Source Extensions — теперь есть поддержка VP9 и Opus в WebM, за счёт чего начинает работать выбор качества на YouTube, вплоть до 4K. Пока это доступно только с флагом --expose-experimental-interfaces, и есть проблемы с памятью (буфер не очищается), но сама связка уже функционирует. В остальном месяц прошёл в доработках и оптимизациях: продолжали шлифовать новый интерпретатор, подтягивали производительность в разных местах и постепенно расширяли поддержку веб-фич. А главное, собрать его очень легко. Ну, если вы в принципе имеете C++ Toolchain на вашей машине. Главное, cmake поставить не забудьте :) Ну или я могу скинуть билд под мак. Как раз собираю сейчас. #ladybird #browser

Выиграй деньги, став чемпионом ИТ-соревнования от МТС Остались считанные дни до окончания регистрации — призовой фонд 1 500 000 рублей. True Tech Hack — это три уникальные задачи для инженеров данных, разработчиков и системных аналитиков. За лучшие решения дают деньги и зовут на стажировку. Для всех финалистов — закрытая вечеринка с диджеем в Москве на видовой площадке. Среди всех, кто зарегистрировался, разыгрывают 2 приставки с геймпадами для облачного гейминга МТС Fog Play и 10 подписок по 20 часов игры. Регистрация закроется 10 апреля в 10:00 — торопись!

#статья дня Разработчики Microsoft Edge очень любят доставать разные экспериментальные фишки и включать их. Чем и живут. Но в этот раз они пошли дальше! Вашему вниманию представляется focusgroup: https://blogs.windows.com/msedgedev/2026/03/05/making-keyboard-navigation-effortless/ Что делает? А довольно крутую штуку: внутри группы фокус элементов можно будет передвигать клавиатурными стрелками, а не только табом. Захват фокуса произойдёт автоматически, не надо городить скрипты. В блоге Chrome они тоже отметились: https://developer.chrome.com/blog/focusgroup-rfc Потестировать можно уже сегодня в Chromium-браузерах: включаете Experimental Web Platform features в about://flags и дальше тут: https://microsoftedge.github.io/Demos/focusgroup/ Очень жду распространения, поддержка клавиатурной навигации штука сложная. #focus #a11y