Зачем Нужен TypeScript: Преимущества Использования

Читать 👨‍💻

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

Как сделать плавный скроллинг по разделам

Читать 👨‍💻

#какэтосделать

HTML range

Читать 👨‍💻

#теория | #html

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

Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: 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() для извлечения имён пользователей.

#домашка

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

Посмотреть макет 👨‍💻

#макетдлятренировки

image-rendering

Читать 👨‍💻

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

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

Лучшие статьи @free_html_lessons:
1. image-rendering
2. HTML range
3. Как сделать плавный скроллинг по разделам

Лучшие фронтенд вакансии @job_webdev:
1. Разработчик с опытом написания дизайн системы
2. Frontend разработчик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UI-UX дизайнер
2. Web-дизайнер
3. UI-UX дизайнер

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

Задача: Управление библиотекой (на ООП)

Создайте классы для управления библиотекой книг. Вам нужно создать следующие классы:
Book — класс для представления книги.
Library — класс для управления коллекцией книг.
Класс Book
Класс Book должен иметь следующие свойства и методы:

Свойства:
title (название книги)
author (автор книги)
year (год издания книги)
genre (жанр книги)
Методы:

Конструктор для инициализации свойств
Метод getSummary() для получения краткой информации о книге в виде строки: "Title" by Author, published in Year (Genre)
Класс Library
Класс Library должен иметь следующие свойства и методы:

Свойства:
books (массив книг)

Методы:
Конструктор для инициализации свойства books пустым массивом
Метод addBook(book) для добавления книги в библиотеку
Метод removeBook(title) для удаления книги по названию
Метод findBooksByAuthor(author) для поиска книг по автору, возвращает массив книг
Метод findBooksByGenre(genre) для поиска книг по жанру, возвращает массив книг
Метод getAllBooks() для получения всех книг в библиотеке

Пример использования:

// Создание экземпляров книг
const book1 = new Book('To Kill a Mockingbird', 'Harper Lee', 1960, 'Fiction');
const book2 = new Book('1984', 'George Orwell', 1949, 'Dystopian');
const book3 = new Book('The Great Gatsby', 'F. Scott Fitzgerald', 1925, 'Fiction');
// Создание экземпляра библиотеки и добавление книг
const library = new Library();
library.addBook(book1);
library.addBook(book2);
library.addBook(book3);
// Поиск книг по автору
const orwellBooks = library.findBooksByAuthor('George Orwell');
console.log(orwellBooks);
// Поиск книг по жанру
const fictionBooks = library.findBooksByGenre('Fiction');
console.log(fictionBooks);
// Получение всех книг
const allBooks = library.getAllBooks();
console.log(allBooks);
// Удаление книги
library.removeBook('1984');
console.log(library.getAllBooks());

#домашка

Генераторы и yield

Читать 👨‍💻

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

mix-blend-mode

Читать 👨‍💻

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

Как начать изучать React.js для верстальщику

Читать 👨‍💻

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

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

Посмотреть макет 👨‍💻

#макетдлятренировки

Задача: Обработка списка URL

У вас есть список URL, которые нужно загрузить, и в каждом из них содержится JSON-объект. Ваша задача — написать функцию, которая:
Загружает все URL параллельно.
Собирает все данные в массив.
Обрабатывает данные (например, суммирует определённые поля).
Возвращает результат.
При этом необходимо обработать ошибки так, чтобы загрузка оставшихся данных не останавливалась, если один из запросов завершится с ошибкой.

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

const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3',
];

Пример результата:

{
    total: 42
}

Шаблон кода:

async function fetchData(urls) {
    // Ваш код здесь
}
// Пример вызова функции
fetchData(urls).then(result => {
    console.log(result); // Ожидаемый результат
}).catch(error => {
    console.error(error); // Обработка ошибки
});

Подсказки:
- Используйте fetch для загрузки данных по URL.
- Используйте Promise.allSettled для обработки всех промисов, независимо от их завершения.
- Обработайте результаты так, чтобы проигнорировать ошибки и работать только с успешно загруженными данными.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Как начать изучать React.js для верстальщику
2. Задача: Управление библиотекой
3. mix-blend-mode

Лучшие фронтенд вакансии @job_webdev:
1. Junior React Developer
2. HTML-верстальщик
3. Frontend разработчик

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

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

CSS счетчики

Читать статью👨‍💻

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

Как создать и использовать цветовую палитру в CSS

Читать 👨‍💻

#какэтосделать