Задача: Реализовать функцию для "сворачивания" массива
Представьте, что вам нужно реализовать функцию, которая "сворачивает" массив, объединяя элементы с одинаковыми значениями и подсчитывая их количество. На вход подается массив значений, а на выходе ожидается объект, где ключами будут уникальные значения массива, а значениями — количество их вхождений.
Пример:
Условия:
Функция должна корректно работать с массивами любых типов данных, например, строк, чисел, или даже объектов, если в них используется одинаковая ссылка.
Постарайтесь реализовать решение с минимальным количеством проходов по массиву.
Вопросы для обсуждения на собеседовании:
Как функция будет обрабатывать массив с большим количеством элементов?
Как можно оптимизировать использование памяти при работе с крупными массивами?
Как можно адаптировать функцию для обработки массивов, содержащих объекты с одинаковыми значениями, но разными ссылками?
#домашка
Представьте, что вам нужно реализовать функцию, которая "сворачивает" массив, объединяя элементы с одинаковыми значениями и подсчитывая их количество. На вход подается массив значений, а на выходе ожидается объект, где ключами будут уникальные значения массива, а значениями — количество их вхождений.
Пример:
const input = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const result = countOccurrences(input);
console.log(result);
// Ожидаемый вывод:
// {
// apple: 3,
// banana: 2,
// orange: 1
// }
Условия:
Функция должна корректно работать с массивами любых типов данных, например, строк, чисел, или даже объектов, если в них используется одинаковая ссылка.
Постарайтесь реализовать решение с минимальным количеством проходов по массиву.
Вопросы для обсуждения на собеседовании:
Как функция будет обрабатывать массив с большим количеством элементов?
Как можно оптимизировать использование памяти при работе с крупными массивами?
Как можно адаптировать функцию для обработки массивов, содержащих объекты с одинаковыми значениями, но разными ссылками?
#домашка
Календарь для сайта
Современный и удобный календарь для сайта на чистом js
Посмотреть на github 🧑💻
#полезности
Современный и удобный календарь для сайта на чистом js
Посмотреть на github 🧑💻
#полезности
🔥3👏1
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. async/await в JavaScript
2. Крутые CSS свойства
3. auto-fill против auto-fit
Лучшие фронтенд вакансии @job_webdev:
1. Frontend developer
2. HTML-верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Designer
2. Web-дизайнер
3. UX/UI designer (CMS) Middle+
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. async/await в JavaScript
2. Крутые CSS свойства
3. auto-fill против auto-fit
Лучшие фронтенд вакансии @job_webdev:
1. Frontend developer
2. HTML-верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Designer
2. Web-дизайнер
3. UX/UI designer (CMS) Middle+
#лучшеезанеделю
👍1
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