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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
👩‍💻 Разбираем методы Array — мощный инструмент для работы с данными в JavaScript!

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

🔥 — если узнал новое
🤝 — если уже пользовался


Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥41🤝20👍12
👩‍💻 Разберем свойство scroll-snap-type, которое задаёт направление и строгость привязки прокрутки!

Показываю возможные его значения для задания направления привязки:
x — привязка по горизонтали;
y — привязка по вертикали;
block — привязка в блоковом направлении;
inline — привязка в строчном направлении;
both — привязка в обоих направлениях: горизонталь + вертикаль или блочное + строчное.


Также можно указать строгость смещения к точкам привязки, настроить которые позволяет свойство scroll-snap-align:
mandatory — принудительная привязка. Прокрутка всегда смещается к точке привязки.

proximity — мягкая привязка. Скролл сместится к точке привязки, только если прокрутка остановилась достаточно близко к ней.


➡️ Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥11🤝7
📱 Плавное появление элементов при скролле

Всем привет! Сегодня разберём, создание прикольного эффекта плавного появления элементов при прокрутке страницы на чистом Html, Css и JavaScript.

Анимировать элементы будем с помощью IntersectionObserver API, благодаря которому мы сможем отслеживать, когда элемент попадает в область видимости, и запускать красивую анимацию.


📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥46👍14🤝7
👩‍💻 Если хотите добавить всплывающую подсказку к изображению, то атрибут вам в помощь title!

Наведите курсор — и появится дополнительная информация, помогающая лучше понять, что к чему.

Это особенно удобно, когда на странице много графики: пояснения дают контекст, которого не видно сразу.

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

➡️ Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥12🤝6😁3
📱 Разбираем методы String — незаменимые помощники при работе с текстом в JavaScript!

Они позволяют удобно находить, изменять, разделять и проверять строки без необходимости писать сложную логику вручную. Методы строк особенно полезны при валидации данных, форматировании вывода и обработке пользовательского ввода.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥49👍24🤝13