Вёрстка сайтов | HTML, CSS, JS

Задача: Фильтрация и сортировка списка пользователей

Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).

Ваша задача:
Отфильтровать массив, оставив только активных пользователей.
Отсортировать активных пользователей по возрасту в порядке возрастания.
Вернуть массив имён отсортированных активных пользователей.
Пример входных данных:

const users = [
    { name: 'Alice', age: 25, isActive: true },
    { name: 'Bob', age: 30, isActive: false },
    { name: 'Charlie', age: 20, isActive: true },
    { name: 'David', age: 35, isActive: true },
    { name: 'Eve', age: 28, isActive: false }
];

Пример выходных данных:

['Charlie', 'Alice', 'David']

Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.

#домашка

Макет для тренировки (amatto design)

Перейти к макету 🧑‍💻

#практика | #макет

5 Советов для Ускорения HTML-верстки

Верстка — это не только про точность, но и про скорость работы. Если вы хотите писать код быстрее, но без потери качества, вот несколько простых и полезных советов:

1. Используйте Emmet для ускорения работы
Emmet — это встроенный инструмент большинства редакторов кода. Он позволяет создавать сложные структуры HTML за пару секунд.
Пример:

div.container>header+main+footer 

Расширяется в:

<div class="container">  
  <header></header>  
  <main></main>  
  <footer></footer>  
</div> 

Попробуйте использовать Emmet для повторяющихся задач, таких как создание списков или вложенных блоков.

2. Организуйте структуру проекта
Пишите код так, чтобы любой мог его понять:
Разделяйте стили и скрипты в отдельные файлы.
Придерживайтесь единого стиля именования классов (например, BEM).
Пример:

<div class="menu__item menu__item--active">Главная</div>  

3. Работайте с семантикой
Семантические теги (например, <header>, <article>, <nav>) делают ваш код понятнее и лучше для SEO. Используйте их вместо универсальных <div>.

4. Добавляйте комментарии
Комментарии помогут вам или вашим коллегам быстрее разобраться в коде. Например:

<!-- Главное меню сайта -->  
<nav>...</nav> 

5. Проверяйте верстку на всех устройствах
Обязательно тестируйте:
В браузерах: Chrome, Firefox, Safari.
На разных устройствах: телефонах, планшетах и ноутбуках.
Попробуйте бесплатные инструменты, такие как Chrome DevTools, чтобы посмотреть, как ваш сайт выглядит на экранах с разным разрешением.
Ваш HTML-код — это не просто текст, это фундамент любого сайта. Чем чище и качественнее он будет, тем проще с ним работать другим разработчикам.

#полезнаястатья

Графика на Canvas для начинающих

Читать 👨‍💻

#теория

Как улучшить UX c помощью микровзаимодействий?

Микровзаимодействия — это небольшие, но мощные детали, которые могут превратить обычное приложение в запоминающийся и удобный инструмент. Их задача — направлять, информировать и радовать пользователя, создавая плавный и интуитивно понятный опыт. Вот несколько советов, как добавить микровзаимодействия в проект и сделать 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, чтобы уведомления появлялись на экране и исчезали, не прерывая основной процесс.

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

#полезности

Что будет в консоли? Асинхронные функции: Порядок выполнения с await

async function f() {
console.log(1);
const promise = new Promise((resolve) => {
  console.log(2);
  setTimeout(() => {
    console.log(3);
    resolve('готово!');
    console.log(4);
  });
});
console.log(5);

const result = await promise;
console.log(6);
console.log(result);
return 'Result';
}

f();
console.log(7);

Ответ:
async function f() {
console.log(1); // Синхронно #1
const promise = new Promise((resolve) => {
console.log(2); // Синхронно #2 (в executor)
setTimeout(() => { // Макрозадача #1
console.log(3); // Внутри макрозадачи #1.1
resolve('готово!'); // Разрешает промис, ставит возобновление 'f' в микрозадачи
console.log(4); // Внутри макрозадачи #1.2
}, 0); // Минимальная задержка
});
console.log(5); // Синхронно #3

// 'f' приостанавливается здесь, ждет разрешения 'promise'
const result = await promise; // Возобновится как микрозадача после resolve()

// Возобновление 'f' (Микрозадача #1)
console.log(6); // После await #1
console.log(result); // После await #2
return 'Result';
}

f(); // Запускает 'f'
console.log(7); // Синхронно #4 (после запуска 'f', но до завершения await)

// Порядок вывода:
// 1 ← Синхронно #1
// 2 ← Синхронно #2
// 5 ← Синхронно #3
// 7 ← Синхронно #4
// 3 ← Макрозадача #1.1
// 4 ← Макрозадача #1.2 (Promise resolved)
// 6 ← Микрозадача #1 (Возобновление f, после await #1)
// "готово!" ← Микрозадача #1 (Возобновление f, после await #2)

#домашка
Задача из hackfrontend.com

Макет для тренировки (parity)

Перейти к макету 🧑‍💻

#практика | #макет

Splide - аналог swiper.js

Splide.js это легкая и гибкая библиотека JavaScript для создания адаптивных и настраиваемых слайдеров или каруселей на веб-страницах. Он предоставляет простой и интуитивно понятный API, который позволяет разработчикам легко внедрять и настраивать слайдеры с минимальными усилиями.

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

Смотреть 👨‍💻

#полезности

Api в js

Читать 👨‍💻

#js

async/await в JavaScript

Читать 👨‍💻

#js | #теория

Кроссбраузерное тестирование: чек-лист и лучшие практики

Читать 👨‍💻

#полезности

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Core Web Vitals
2. Компонентный подход в CSS
3. MyReadonly

Лучшие фронтенд вакансии @job_webdev:
1. Next.js-разработчик
2. Frontend-разработчик (Angular)
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер продуктовых интерфейсов
2. Web-дизайнер
3. UX/UI-дизайнер

#лучшеезанеделю

MyReadonly

Напишите тип MyReadonly который делает все поля только для чтения.

type User = {
  id: number
  name: string
}

type MyReadonly<T> = any

const user: MyReadonly<User> = { id: 1, name: "John" }

user.name = "Jane"

#домашка #typescript

Макет для тренировки (moonlab)

Перейти к макету 🧑‍💻

#практика | #макет

Анимации с помощью CSS Scroll Snap: Управляем прокруткой

Читать 👨‍💻

#css | #полезности

Создаем анимации с помощью JavaScript: Используем requestAnimationFrame() для плавного рендеринга

Читать 👨‍💻

#js | #полезности

Компонентный подход в CSS: Введение в BEM, OOCSS и Atomic Design

Читать 👨‍💻

#css