Code Ready | Frontend
22.7K subscribers
1.13K photos
472 videos
17 files
783 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Нужно быстро понять, когда и как менялся код?

Git History — показывает историю изменений прямо в VS Code: коммиты по файлу, авторов правок, различия между версиями и изменения строк. Можно быстро посмотреть старый код, найти причину бага или понять логику изменений.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
15👍10🤝10
8 марта уже на горизонте. Цветы — это база. А что добавим к релизу?

Если хочется сделать красивый апгрейд праздника, присмотритесь к дизайнерским игрушкам от Super Toys!

Это не только милый сувенир, но и стильные арт-объекты от современных художников и культовых брендов, которые украсят её рабочий стол или полку и будут напоминать о вашем вкусе и внимании гораздо дольше, чем праздничные сторис.

Мы собрали специальную праздничную подборку — чтобы вы закрыли задачу по подарку быстро и красиво!

Прокачайте 8 марта до версии Pro!

Реклама. ООО "НОВЫЕ МЕДИА". ИНН 7813407148. erid: 2W5zFGjfcYZ
👍1
Убираем задержку клика и лишние тап-эффекты!

На мобильных браузерах элементы могут реагировать с задержкой, потому что система ожидает двойной тап для зума или обрабатывает жесты прокрутки.

Свойство touch-action позволяет явно указать браузеру, какие жесты разрешены, и тем самым улучшить отзывчивость интерфейса.

Если элемент — обычная кнопка или ссылка, можно оставить только базовое взаимодействие:
.button {
touch-action: manipulation;
}


В большинстве современных браузеров это убирает ожидание двойного тапа и делает нажатие более мгновенным (особенно для кастомных контролов).

Это полезно для кнопок, карточек, меню и любых интерактивных элементов, где важна отзывчивость:
.card {
touch-action: manipulation;
}


Для элементов с горизонтальным свайпом можно разрешить только нужное направление:
.slider {
touch-action: pan-x;
}


🔥 В итоге интерфейс ощущается быстрее, уменьшаются случайные зумы и лишние жесты, без JS. Используйте точечно на интерактивных элементах.

📣 Code Ready | #совет
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝2014👍9🔥5
☕️ Полезную статью нашел на Хабре: «Что происходит внутри Angular и React при решении одних и тех же задач»!

В этой статье:
• Наглядно разобрано, как оба инструмента на самом деле создают и обновляют DOM — Virtual DOM vs Incremental DOM;
• Показано, что происходит под капотом при рендерах, эффектах, асинхронности и архитектуре приложений;
• Объясняется, почему одинаковые задачи в React и Angular приводят к разным затратам ресурсов, сборке и поведению интерфейса.


🔊 Продолжайте читать на Habr!


📣 Code Ready | #статья
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🤝109🔥1
👩‍💻 Полноэкранная прокрутка с фиксацией секций!

Полноэкранная фиксация секций нужна, когда важно управлять ритмом восприятия контента. Это упрощает навигацию, усиливает фокус и делает структуру интерфейса предсказуемой.

Как работает:
контейнер получает scroll-snap-type, который включает режим фиксации прокрутки;

каждая секция занимает высоту экрана через 100vh;

scroll-snap-align указывает точку прилипания;

режим mandatory гарантирует чёткую остановку на каждом экране.


Это чистый нативный способ собрать лендинг, презентационный экран или onboarding без JS.

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1510🔥8