Создание горизонтальной галереи с параллаксом: от DOM до WebGL.
Разбираем создание плавной галереи с параллаксом, начиная с классического подхода на DOM/CSS/JS с переходом к версии на WebGL, полностью использующей возможности GPU для максимальной гладкости.
Демо | Github
https://tympanus.net/codrops/2026/02/19/creating-a-smooth-horizontal-parallax-gallery-from-dom-to-webgl/
Разбираем создание плавной галереи с параллаксом, начиная с классического подхода на DOM/CSS/JS с переходом к версии на WebGL, полностью использующей возможности GPU для максимальной гладкости.
Демо | Github
https://tympanus.net/codrops/2026/02/19/creating-a-smooth-horizontal-parallax-gallery-from-dom-to-webgl/
👍6❤2🔥1
Почему "scroll fade" эффект вызывает раздражение у пользователей
Эффект, при котором элементы плавно появляются при скролле страницы, часто используется без реальной цели. Такая анимация просто перегружает интерфейс, вместо того чтобы улучшать.
https://frontendmasters.com/blog/death-to-scroll-fade/
Эффект, при котором элементы плавно появляются при скролле страницы, часто используется без реальной цели. Такая анимация просто перегружает интерфейс, вместо того чтобы улучшать.
https://frontendmasters.com/blog/death-to-scroll-fade/
💯10❤3👍3
Пишем систему частиц и физику на чистом JS для создания Canvas-конфетти
Посмотрим, как построить собственную архитектуру на Canvas для анимаций: от базовых примитивов до сложных систем частиц с реализацией физики и эффектов вращения.
https://habr.com/ru/articles/1001462
Посмотрим, как построить собственную архитектуру на Canvas для анимаций: от базовых примитивов до сложных систем частиц с реализацией физики и эффектов вращения.
https://habr.com/ru/articles/1001462
👍6🔥4
Как фронтенд получает данные с сервера: лучшие практики 2026.
Ключевые подходы к получению данных: от классического REST и GraphQL до паттерна Backend for Frontend (BFF) и реактивных методов.
https://habr.com/ru/companies/otus/articles/994238
Ключевые подходы к получению данных: от классического REST и GraphQL до паттерна Backend for Frontend (BFF) и реактивных методов.
https://habr.com/ru/companies/otus/articles/994238
👍8👎3❤2⚡2🔥2
Главный подвох якорного позиционирования в CSS
Якорное позиционирование в CSS имеет важные ограничения по расположению элементов в DOM. Якорный элемент должен быть полностью отрисован до того, как к нему будет привязан другой элемент, что требует внимания к порядку их следования и структуре DOM.
https://frontendmasters.com/blog/the-big-gotcha-of-anchor-positioning/
Якорное позиционирование в CSS имеет важные ограничения по расположению элементов в DOM. Якорный элемент должен быть полностью отрисован до того, как к нему будет привязан другой элемент, что требует внимания к порядку их следования и структуре DOM.
https://frontendmasters.com/blog/the-big-gotcha-of-anchor-positioning/
👍7❤4⚡1😁1
GitLab CI/CD для фронт разработчиков: от 0 до задеплоено
Настройте автоматизированное тестирование, сборку и развертывание на GitLab Pages. Подробное руководство с реальными примерами и практическими советами.
https://www.sitepoint.com/git-lab-ci-cd-for-frontend-developers
Настройте автоматизированное тестирование, сборку и развертывание на GitLab Pages. Подробное руководство с реальными примерами и практическими советами.
https://www.sitepoint.com/git-lab-ci-cd-for-frontend-developers
Sitepoint
GitLab CI/CD for Frontend Developers: From Zero to Deployed
Learn GitLab CI/CD for React: set up automated testing, building, and deployment to GitLab Pages. Complete guide with real examples and practical tips.
👍9🔥4👎2❤1
Спрайты в вебе
Используйте технику спрайтов, чтобы создавать эффективные покадровые анимации с помощью современных CSS-свойств, таких как
https://www.joshwcomeau.com/animation/sprites/
Используйте технику спрайтов, чтобы создавать эффективные покадровые анимации с помощью современных CSS-свойств, таких как
object-fit, object-position и функции steps().https://www.joshwcomeau.com/animation/sprites/
👍6❤4🔥3
На подходе стандартная ленивая загрузка HTML-видео и аудио!
Эта функция позволит отложить загрузку медиа-ресурсов до момента их появления в области видимости браузера, значительно снижая вес страницы и улучшая производительность. Используя
https://scottjehl.com/posts/lazy-media/
Эта функция позволит отложить загрузку медиа-ресурсов до момента их появления в области видимости браузера, значительно снижая вес страницы и улучшая производительность. Используя
loading="lazy" для <video> и <audio>, разработчики смогут оптимизировать загрузку медиа, что уже доступно для тестирования в Chrome Canary.https://scottjehl.com/posts/lazy-media/
1👍13🔥4🤯2
Подробное руководство по настройке списков с помощью CSS
Разбираем свойства
https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/
Разбираем свойства
list-style-type, псевдоэлемент ::marker для базовой кастомизации и правило @counter-style для создания собственных систем нумерацииhttps://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/
👍7❤2🤔1
Popover API или Dialog API: что выбрать?
Popover API упрощает создание всплывающих элементов, предлагая встроенные функции доступности. В то время как Dialog API лучше подходит для модальных окон, автоматически изолируя контент.
https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/
Popover API упрощает создание всплывающих элементов, предлагая встроенные функции доступности. В то время как Dialog API лучше подходит для модальных окон, автоматически изолируя контент.
https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/
❤8🔥3👍2
Переосмысление тестовых заданий для фронтендеров.
Методология, включающая короткое тестовое задание, совместное ревью кода и рефакторинг легаси, которая позволяет выявить реальные навыки работы с кодом и принятия решений
https://habr.com/ru/companies/doubletapp/articles/1005810
Методология, включающая короткое тестовое задание, совместное ревью кода и рефакторинг легаси, которая позволяет выявить реальные навыки работы с кодом и принятия решений
https://habr.com/ru/companies/doubletapp/articles/1005810
👍9❤2🔥2
Друзья!
Стартует новый сезон Podlodka React Crew: «Продвинутый React». Podlodka React Crew — онлайн-конференции для React-разработчиков.
По традиции иду сам и зову вас с собой 😊
Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Поэтому в этот раз программа будет очень технической — от внутренней работы V8 до React Server Components и профилирования производительности.
С 23 по 27 марта ее участники:
⚙️ узнают, как устроен рендер и внутренние механизмы в современном React
🧠 познакомятся с архитектурой приложений, где применяются React Server Components
📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak
🛠познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы
👉 Формат уже знакомый: несколько дней живых Zoom-сессий утром и вечером, закрытое комьюнити в Telegram и возможность пообщаться со спикерами.
Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇
🎟 Забрать early-bird билет можно до 16 марта
🎁 По традиции разыгрываем один билет. Для участия заполните форму. Итоги подведем в ближайшее время!
Для подписчиков FrontEndDev есть промокод на скидку 500р 🥳: FrontEndDev
Стартует новый сезон Podlodka React Crew: «Продвинутый React». Podlodka React Crew — онлайн-конференции для React-разработчиков.
По традиции иду сам и зову вас с собой 😊
Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Поэтому в этот раз программа будет очень технической — от внутренней работы V8 до React Server Components и профилирования производительности.
С 23 по 27 марта ее участники:
⚙️ узнают, как устроен рендер и внутренние механизмы в современном React
🧠 познакомятся с архитектурой приложений, где применяются React Server Components
📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak
🛠познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы
👉 Формат уже знакомый: несколько дней живых Zoom-сессий утром и вечером, закрытое комьюнити в Telegram и возможность пообщаться со спикерами.
Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇
🎟 Забрать early-bird билет можно до 16 марта
🎁 По традиции разыгрываем один билет. Для участия заполните форму. Итоги подведем в ближайшее время!
podlodka.io
Онлайн-конференция Podlodka React Crew, сезон #4
Недельное мероприятие от команды Podlodka: ежедневные интерактивные сессии в Zoom по актуальным проблемам frontend-разработки, нон-стоп общение с экспертами и звёздами индустрии, закрытое профессиональное сообщество в Telegram.
❤7👍3🔥2
CSS-свойство corner-shape: новые горизонты для интерфейсов
Новое свойство corner-shape в связке с border-radius наконец позволяет легко создавать скошенные, вогнутые, скругленные и другие формы, делая ваш интерфейс выразительнее и чище
https://www.smashingmagazine.com/2026/03/beyond-border-radius-css-corner-shape-property-ui/
Новое свойство corner-shape в связке с border-radius наконец позволяет легко создавать скошенные, вогнутые, скругленные и другие формы, делая ваш интерфейс выразительнее и чище
https://www.smashingmagazine.com/2026/03/beyond-border-radius-css-corner-shape-property-ui/
❤8🔥4⚡2
Прощай innerHTML, привет setHTML
Новый метод .setHTML() в JavaScript, входящий в состав Sanitizer API, является прямой заменой для .innerHTML(). Это значительно усиливает защиту от XSS-атак, эффективно устраняя все риски DOM-XSS и повышая безопасность сайтов.
https://frontendmasters.com/blog/goodbye-innerhtml-hello-sethtml/
Новый метод .setHTML() в JavaScript, входящий в состав Sanitizer API, является прямой заменой для .innerHTML(). Это значительно усиливает защиту от XSS-атак, эффективно устраняя все риски DOM-XSS и повышая безопасность сайтов.
https://frontendmasters.com/blog/goodbye-innerhtml-hello-sethtml/
❤23👍11
Друзья! Мои коллеги пишут выпускную работу и проводят исследование "о важности аспектов бренда работодателя для IT-специалистов поколения Z при выборе компании".
Если у вас есть свободные 6 - 8 минут и вы родились позже 1996, ответьте пожалуйста на несколько вопросов.
Всем добра ✌️
PS: сегодня подведем итоги розыгрыша билета на Podlodka React Crew. Следите за постами 😊
Если у вас есть свободные 6 - 8 минут и вы родились позже 1996, ответьте пожалуйста на несколько вопросов.
Всем добра ✌️
PS: сегодня подведем итоги розыгрыша билета на Podlodka React Crew. Следите за постами 😊
Google Docs
Влияние привлекательности бренда работодателя на намерение трудоустройства IT-специалистов поколения Z
Здравствуйте! Мы — студентки НИУ ИТМО (Сорокина София и Машир Анастасия) проводим исследование в рамках выпускной квалификационной работы. Цель — понять, какие аспекты бренда работодателя наиболее важны для IT-специалистов поколения Z при выборе компании.…
👍6❤4
О специфике разработки приложений под Smart TV: личный опыт перехода от веба к ТВ
В отличие от привычного веба, здесь нужно учитывать линейную навигацию, принципы 10-foot UI и аппаратные ограничения.
https://habr.com/ru/companies/vk/articles/1008506
В отличие от привычного веба, здесь нужно учитывать линейную навигацию, принципы 10-foot UI и аппаратные ограничения.
https://habr.com/ru/companies/vk/articles/1008506
👍9❤3
FrontEndDev
Друзья! Стартует новый сезон Podlodka React Crew: «Продвинутый React». Podlodka React Crew — онлайн-конференции для React-разработчиков. По традиции иду сам и зову вас с собой 😊 Разработчики регулярно сталкиваются с проблемами производительности, утечками…
Итак!
Бесплатная проходка на Podlodka React Crew рандомным образом достается @m_hodeneva
Поздравляем!🎉🎉🎉
У всех остальных еще есть шанс урвать early-bird билет!
Всем хорошей недели 😊
Бесплатная проходка на Podlodka React Crew рандомным образом достается @m_hodeneva
Поздравляем!🎉🎉🎉
У всех остальных еще есть шанс урвать early-bird билет!
Всем хорошей недели 😊
podlodka.io
Онлайн-конференция Podlodka React Crew, сезон #4
Недельное мероприятие от команды Podlodka: ежедневные интерактивные сессии в Zoom по актуальным проблемам frontend-разработки, нон-стоп общение с экспертами и звёздами индустрии, закрытое профессиональное сообщество в Telegram.
👍8❤4
Улучшаем производительности анимаций с помощью requestAnimationFrame
requestAnimationFrame — это браузерный API, разработанный специально для визуальных обновлений, который позволяет планировать их прямо перед следующей перерисовкой, обеспечивая плавность и отзывчивость.
https://www.debugbear.com/blog/requestanimationframe
requestAnimationFrame — это браузерный API, разработанный специально для визуальных обновлений, который позволяет планировать их прямо перед следующей перерисовкой, обеспечивая плавность и отзывчивость.
https://www.debugbear.com/blog/requestanimationframe
👍10❤1🔥1
5 операторов RxJS в Angular, которые решают 80% проблем
Эти операторы упрощают работу с асинхронными данными, помогая отменять устаревшие запросы, объединять данные из нескольких источников, реагировать на изменения множества фильтров и корректно обрабатывать ошибки.
https://habr.com/ru/companies/ruvds/articles/1008646
Эти операторы упрощают работу с асинхронными данными, помогая отменять устаревшие запросы, объединять данные из нескольких источников, реагировать на изменения множества фильтров и корректно обрабатывать ошибки.
https://habr.com/ru/companies/ruvds/articles/1008646
🔥8❤1
Переход от Moment.js к Temporal API
Хотя Moment.js был популярен, его недостатки, такие как большой размер и изменяемость объектов, привели к появлению нового стандарта. Современный Temporal API в JavaScript решает эти проблемы.
https://smashingmagazine.com/2026/03/moving-from-moment-to-temporal-api/
Хотя Moment.js был популярен, его недостатки, такие как большой размер и изменяемость объектов, привели к появлению нового стандарта. Современный Temporal API в JavaScript решает эти проблемы.
https://smashingmagazine.com/2026/03/moving-from-moment-to-temporal-api/
🔥7👍1😁1