Forwarded from Red Collar
🏠 Родные стены — теперь онлайн
Сталинки, хрущевки, брежневки, панельки и новостройки — собрали в одном месте целую архитектурную историю Москвы.
И сделали ее живой.
Проект «Родные стены», который мы сделали для Авито Недвижимости и «Москвы глазами инженера», — это не просто сайт о типовых домах. Это взгляд на архитектуру Москвы с любовью и с инженерной точностью.
На сайте можно проследить, как развивалось массовое жилье: когда и почему появлялись разные серии домов, какие планировки предлагали людям, какие инженерные решения скрыты в панельных стенах.
Мы продумали и собрали интерактивный сайт за месяц — дизайн, фронт, бэк. Но что еще важнее — мы вложили туда частичку себя.
⠀
Карусель фотографий на полароид — не стоковые изображения. Это наши люди и наши воспоминания.
Соня с семьей заезжает в новую квартиру. Ксюша идет из школы. Лера гуляет с братом. Все это — счастливые моменты жизни наших коллег. И родные стены, в которых они происходили.
Подробнее с проектом можно ознакомиться здесь: doma.avito.com
📣 О проекте уже рассказали Mash и Baza. Поделитесь и вы.
Подписывайтесь🔥 Red Collar
Сталинки, хрущевки, брежневки, панельки и новостройки — собрали в одном месте целую архитектурную историю Москвы.
И сделали ее живой.
Проект «Родные стены», который мы сделали для Авито Недвижимости и «Москвы глазами инженера», — это не просто сайт о типовых домах. Это взгляд на архитектуру Москвы с любовью и с инженерной точностью.
На сайте можно проследить, как развивалось массовое жилье: когда и почему появлялись разные серии домов, какие планировки предлагали людям, какие инженерные решения скрыты в панельных стенах.
Мы продумали и собрали интерактивный сайт за месяц — дизайн, фронт, бэк. Но что еще важнее — мы вложили туда частичку себя.
⠀
Карусель фотографий на полароид — не стоковые изображения. Это наши люди и наши воспоминания.
Соня с семьей заезжает в новую квартиру. Ксюша идет из школы. Лера гуляет с братом. Все это — счастливые моменты жизни наших коллег. И родные стены, в которых они происходили.
Подробнее с проектом можно ознакомиться здесь: doma.avito.com
📣 О проекте уже рассказали Mash и Baza. Поделитесь и вы.
Подписывайтесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Оптимизация CSS-анимаций: как избежать тормозов
Сегодня разберем ключевые моменты оптимизации анимаций в вебе.
Когда вы анимируете свойства вроде
— пересчитывать размеры и позиции элементов на CPU (layout)
— заполнять элементы цветами, менять видимость (paint)
— размещать элементы относительно друг друга (composite)
Это ресурсоемкий процесс, особенно при множестве компонентов.
Используйте
Это позволяет пропустить этапы layout и paint, работая напрямую с композицией.
Дополнительная оптимизация
1.
2. Разделение элементов по слоям через небольшие
А по ссылке можете ознакомиться со статьей целиком и найти другие подсказки по улучшению кода
Подписывайтесь🔥 RDCLR.DEV
Сегодня разберем ключевые моменты оптимизации анимаций в вебе.
Когда вы анимируете свойства вроде
top или left, браузеру приходится:— пересчитывать размеры и позиции элементов на CPU (layout)
— заполнять элементы цветами, менять видимость (paint)
— размещать элементы относительно друг друга (composite)
Это ресурсоемкий процесс, особенно при множестве компонентов.
Используйте
transform вместо позиционных свойств:// Вместо этого:
element.style.top = `${y}px`;
// Используйте это:
element.style.transform = `translateY(${y}px)`;
Это позволяет пропустить этапы layout и paint, работая напрямую с композицией.
Дополнительная оптимизация
1.
will-change: transform — предупреждает браузер о будущих изменениях (однако избегайте избыточного использования, т. к. это может перегрузить память)2. Разделение элементов по слоям через небольшие
translateZ()А по ссылке можете ознакомиться со статьей целиком и найти другие подсказки по улучшению кода
Подписывайтесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Чёрная магия трансформов, или об оптимизации анимаций на CSS
Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Тогда анимации перестанут зависать, ничего не...
Forwarded from Red Collar
⚡️Юра Макаров, со-фаундер Red Collar, кушает сладости на Дне Рождения ФКН
Если вы сейчас на факультете, ищите человека справа!
Если вы сейчас на факультете, ищите человека справа!
Forwarded from Red Collar
Чуть за полночь: детское время кончилось, и мы принесли напоминание ⏰
На фото Макс Мишанин, наш СТО, и регистрация на его лекцию закроется через 12 часов.
Успейте кликнуть на ссылку в предыдущем посте!
На фото Макс Мишанин, наш СТО, и регистрация на его лекцию закроется через 12 часов.
Успейте кликнуть на ссылку в предыдущем посте!