Splide - аналог swiper.js
Splide.js это легкая и гибкая библиотека JavaScript для создания адаптивных и настраиваемых слайдеров или каруселей на веб-страницах. Он предоставляет простой и интуитивно понятный API, который позволяет разработчикам легко внедрять и настраивать слайдеры с минимальными усилиями.
Одним из ключевых преимуществ Splide.js является его производительность. Он разработан таким образом, чтобы быть быстрым и эффективным, обеспечивая плавные переходы и анимацию даже при большом количестве контента. Он также имеет небольшой размер файла, что помогает оптимизировать время загрузки страницы.
Смотреть 👨💻
#полезности
Splide.js это легкая и гибкая библиотека JavaScript для создания адаптивных и настраиваемых слайдеров или каруселей на веб-страницах. Он предоставляет простой и интуитивно понятный API, который позволяет разработчикам легко внедрять и настраивать слайдеры с минимальными усилиями.
Одним из ключевых преимуществ Splide.js является его производительность. Он разработан таким образом, чтобы быть быстрым и эффективным, обеспечивая плавные переходы и анимацию даже при большом количестве контента. Он также имеет небольшой размер файла, что помогает оптимизировать время загрузки страницы.
Смотреть 👨💻
#полезности
👍4👎1
Задача на html и js:
Выведите элементы этого массива в виде таблицы table так, чтобы каждое поле объекта попало в свой тег td. Сделайте заголовки колонок вашей таблицы..
#домашка
let users = [
{id: 1, name: 'user1', country: 'Armenia', age: 18},
{id: 2, name: 'user2', country: 'Russia', age: 19},
{id: 3, name: 'user3', country: 'Ukraine', age: 20},
];
Выведите элементы этого массива в виде таблицы table так, чтобы каждое поле объекта попало в свой тег td. Сделайте заголовки колонок вашей таблицы..
#домашка
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Практическое руководство по JSON в JavaScript
2. Popover API
3. Api в js
Лучшие фронтенд вакансии @job_webdev:
1. Frontend Developer
2. Верстальщик сайтов
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI-дизайнер
2. Web-дизайнер
3. Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Практическое руководство по JSON в JavaScript
2. Popover API
3. Api в js
Лучшие фронтенд вакансии @job_webdev:
1. Frontend Developer
2. Верстальщик сайтов
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI-дизайнер
2. Web-дизайнер
3. Дизайнер
#лучшеезанеделю
Плавная прокрутка без JS
Ранее плавная прокрутка при навигации на странице делалась с помощью нескольких строк JS-кода. Сегодня это можно решить с помощью CSS и сейчас установить плавную прокрутку можно использовав такое CSS-свойство как scroll-behavior.
Ранее плавная прокрутка при навигации на странице делалась с помощью нескольких строк JS-кода. Сегодня это можно решить с помощью CSS и сейчас установить плавную прокрутку можно использовав такое CSS-свойство как scroll-behavior.
body{
scroll-behavior:smooth;
}
#полезности👍13
Как улучшить UX c помощью микровзаимодействий?
Микровзаимодействия — это небольшие, но мощные детали, которые могут превратить обычное приложение в запоминающийся и удобный инструмент. Их задача — направлять, информировать и радовать пользователя, создавая плавный и интуитивно понятный опыт. Вот несколько советов, как добавить микровзаимодействия в проект и сделать UX незабываемым:
1. Обратная связь при нажатии
Добавьте анимацию или изменение цвета кнопок при клике. Такие отклики дают пользователю знать, что его действие принято системой. Пример:
2. Подсказки и хинты
Появление подсказок при наведении курсора помогает пользователю понять, как работает интерфейс. Используйте CSS hover для простых анимаций и плавного появления элементов.
3. Загружаемые анимации
Долгая загрузка может раздражать пользователей, но небольшая анимация, такая как «скелет» интерфейса, помогает сделать процесс менее скучным и воспринимаемым быстрее.
4. Подсветка ошибок
Если пользователь заполняет форму, дайте ему моментальную обратную связь: ошибки в реальном времени (в поле ввода, например, текст становится красным) помогут не допустить ошибок и улучшить UX.
5. Интерактивные уведомления
Ненавязчивые уведомления помогут пользователю ориентироваться в приложении и быстрее находить нужные данные. Используйте CSS и JS, чтобы уведомления появлялись на экране и исчезали, не прерывая основной процесс.
Микровзаимодействия помогают создавать более человечный интерфейс и делают взаимодействие пользователя с сайтом интуитивным и приятным. Не забывайте, что такие детали должны помогать пользователю, а не отвлекать от основной цели.
#полезности
Микровзаимодействия — это небольшие, но мощные детали, которые могут превратить обычное приложение в запоминающийся и удобный инструмент. Их задача — направлять, информировать и радовать пользователя, создавая плавный и интуитивно понятный опыт. Вот несколько советов, как добавить микровзаимодействия в проект и сделать UX незабываемым:
1. Обратная связь при нажатии
Добавьте анимацию или изменение цвета кнопок при клике. Такие отклики дают пользователю знать, что его действие принято системой. Пример:
button {
transition: transform 0.1s ease;
}
button:active {
transform: scale(0.95);
}2. Подсказки и хинты
Появление подсказок при наведении курсора помогает пользователю понять, как работает интерфейс. Используйте CSS hover для простых анимаций и плавного появления элементов.
.tooltip {
opacity: 0;
transition: opacity 0.3s ease;
}
button:hover + .tooltip {
opacity: 1;
}3. Загружаемые анимации
Долгая загрузка может раздражать пользователей, но небольшая анимация, такая как «скелет» интерфейса, помогает сделать процесс менее скучным и воспринимаемым быстрее.
4. Подсветка ошибок
Если пользователь заполняет форму, дайте ему моментальную обратную связь: ошибки в реальном времени (в поле ввода, например, текст становится красным) помогут не допустить ошибок и улучшить UX.
5. Интерактивные уведомления
Ненавязчивые уведомления помогут пользователю ориентироваться в приложении и быстрее находить нужные данные. Используйте CSS и JS, чтобы уведомления появлялись на экране и исчезали, не прерывая основной процесс.
Микровзаимодействия помогают создавать более человечный интерфейс и делают взаимодействие пользователя с сайтом интуитивным и приятным. Не забывайте, что такие детали должны помогать пользователю, а не отвлекать от основной цели.
#полезности
👍3
Что делает ключевое слово await?
Anonymous Quiz
6%
Запускает таймер в коде
5%
Прерывает выполнение функции
76%
Задерживает выполнение функции до завершения промиса
14%
Обрабатывает ошибку асинхронного кода
🔥4👍1
Какая система лучше всего подходит для создания многоколоночной раскладки?
Anonymous Quiz
23%
Flexbox
70%
Grid
4%
float
3%
inline-block
👍3
Задача на js: Наибольшая сумма подмассива
Дан массив целых чисел, необходимо найти максимальную сумму подмассива, который может быть получен путем выборки подряд идущих элементов.
Пример:
Условия:
Время работы: O(n)
#домашка
Дан массив целых чисел, необходимо найти максимальную сумму подмассива, который может быть получен путем выборки подряд идущих элементов.
Пример:
maxSubArraySum([1, -2, 3, 4, -1, 2, 1, -5, 4]);
// Ожидаемый результат: 8 (подмассив [3, 4, -1, 2])
Условия:
Время работы: O(n)
#домашка
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Как улучшить UX
2. Полезные фичи css 2024
3. Ошибки новичков на фрилансе
Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик
2. Frontend разработчик
3. HTML верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. UI/UX дизайнер
3. Web дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Как улучшить UX
2. Полезные фичи css 2024
3. Ошибки новичков на фрилансе
Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик
2. Frontend разработчик
3. HTML верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. UI/UX дизайнер
3. Web дизайнер
#лучшеезанеделю
🌭1
Что произойдет, если вызвать асинхронную функцию без await?
Anonymous Quiz
32%
Вернется Promise
28%
Функция выбросит ошибку
24%
Функция выполнится немедленно
16%
Код остановится до выполнения функции
👍3