Задача на js: Список контактов

Читать 👨‍💻

#домашка

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

Лучшие статьи @free_html_lessons:
1. CSS Контейнерные запросы
2. Защита интерфейса: Атрибуты autocomplete для безопасности
3. Метод structuredClone()

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик Cloud
2. Стажер frontend developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. ux/ui-дизайнер
2. Дизайнер интерфейсов
3. Продуктовый дизайнер

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

Свойство accent-color

Каждый, кто хоть раз пытался сделать нативные чекбоксы (<input type="input">), радиокнопки или ползунки (<input type="range">) фирменного цвета бренда, знает эту боль. Приходилось скрывать стандартный инпут через appearance: none, верстать псевдоэлементы ::before / ::after и прописывать логику для состояний :checked и :focus.
Но в современном CSS есть потрясающее свойство – accent-color. Оно позволяет перекрасить интерактивные элементы UI буквально в одну строку!

/* Перекрасит ВСЕ нативные инпуты на сайте в ваш бренд-цвет */
root {
  accent-color: #7b2cbf;
}

/* Или можно применить точечно к конкретной форме */
.custom-form {
  accent-color: #ff007f;
}

Какими элементами управляет accent-color?
Чекбоксы (<input type="checkbox">)
Радиокнопки (<input type="radio">)
Ползунки (<input type="range">)
Индикаторы прогресса (<progress>)

Браузер не просто тупо заливает элемент вашим цветом. Он автоматически рассчитывает контрастность для галочки внутри чекбокса! Если ваш accent-color слишком темный, галочка станет белой, а если светлый — черной, чтобы сохранить доступность (A11y).
Да, это не заменит сложный кастомный дизайн с иконками, но для 90% стандартных проектов и админок – это идеальное решение, экономящее кучу времени и килобайты кода.

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

Секретные фишки Google Chrome DevTools

Фишка 1: Идеальный скриншот конкретного HTML-узла
Часто нужно скинуть дизайнеру или заказчику скриншот отдельного блока (например, только сверстанной шапки или карточки), но вырезать его ножницами из экрана неудобно.
Откройте DevTools (F12) и выберите нужный тег во вкладке Elements.
Нажмите комбинацию клавиш Ctrl + Shift + P (на Mac: Cmd + Shift + P), чтобы открыть командное меню.
Введите слово screenshot и выберите пункт Capture node screenshot.
Браузер сделает скриншот ровно этого элемента с идеальным качеством, прозрачным фоном (если нет задника) и сохранит его как картинку!

Фишка 2: Эмуляция дефектов зрения (Проверка доступности)
Хороший интерфейс должен быть доступен всем, включая людей с дальтонизмом. Проверить, как видят ваш сайт разные пользователи, можно прямо в Chrome:
Откройте DevTools и снова вызовите командную строку через Ctrl + Shift + P (или Cmd + Shift + P).
Наберите слово Rendering и нажмите Enter. Откроется одноименная панель внизу.
Проскролльте ее до пункта Emulate vision deficiencies (Эмулировать дефекты зрения).
Выберите, например, Deuteranopia (протанопия/дейтеранопия) или Blurred vision (размытое зрение).
Вы увидите, как весь ваш сайт налету изменит цвета. Это сразу покажет, не сливаются ли важные кнопки с фоном и считывается ли текст.

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

Web Animations API (WAAPI)

Обычно анимации на сайте делают двумя путями: либо пишут @keyframes в CSS (отлично для простых вещей), либо подключают тяжелые JS-библиотеки вроде GSAP / Anime.js (когда нужен сложный контроль, паузы, реверс или динамические значения).
Но мало кто помнит про Web Animations API (WAAPI) – нативный браузерный движок, который объединяет силу JS-управления и производительность CSS (анимации выполняются на уровне композитного слоя GPU).
простой пример: анимируем появление элемента по клику

const box = document.querySelector('.box');

document.querySelector('.btn').addEventListener('click', () => {
  // Вызываем нативный метод .animate()
  box.animate(
    // 1. Описываем ключевые кадры (как в @keyframes)
    [
      { transform: 'scale(0.5)', opacity: 0 },
      { transform: 'scale(1.2)', opacity: 0.8, offset: 0.8 }, // offset — это аналог 80% в CSS
      { transform: 'scale(1)', opacity: 1 }
    ], 
    // 2. Настройки тайминга
    {
      duration: 500,        // Длительность в мс
      easing: 'ease-out',   // Функция плавности
      fill: 'forwards'      // Сохранить состояние после окончания
    }
  );
});

Почему это круче, чем просто вешать CSS-классы?
Потому что метод .animate() возвращает объект анимации, которым можно полностью управлять из JS кода:

const myAnimation = box.animate([...], {...});

myAnimation.pause();   // Поставить на паузу
myAnimation.play();    // Запустить снова
myAnimation.reverse(); // Проиграть в обратную сторону
myAnimation.playbackRate = 2; // Ускорить анимацию в 2 раза

// И даже отловить окончание через Промисы!
myAnimation.finished.then(() => {
  console.log('Анимация успешно завершилась, можно удалить элемент из DOM!');
});

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

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

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

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

Как сделать выпадающее меню?

Читать 👨‍💻

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

Задача на JavaScript:

Представим, что у нас есть массив чисел от 1 до 1000. Наша задача состоит в том, чтобы определить, сколько чисел из этого массива являются палиндромами (то есть числами, которые одинаково читаются слева направо и справа налево).

Чтобы решить эту задачу, мы можем использовать следующий алгоритм:
Создаем переменную count и устанавливаем ее значение равным 0. Эта переменная будет использоваться для подсчета количества палиндромов в массиве.
Итерируемся по каждому числу в массиве.
Преобразуем каждое число в строку с помощью метода toString().
Проверяем, является ли полученная строка палиндромом. Для этого мы сравниваем строку с ее обратной версией, которую мы получаем, используя метод split('').reverse().join(''). Если строки равны, значит число является палиндромом.
Если число является палиндромом, увеличиваем значение переменной count на 1.
По окончании итерации, выводим значение переменной count, которое указывает на количество палиндромов в массиве.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Свойство accent-color
2. Секретные фишки Google Chrome DevTools
3. Как сделать выпадающее меню?

Лучшие фронтенд вакансии @job_webdev:
1. angular developer
2. Senior HTML-верстальщик
3. vue.js разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Product-дизайнер (UX/UI)
3. Продуктовый дизайнер

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

CSS inset

Читать 👨‍💻

#полезности

CSS battle - игра-соревнование. Необходимо повторить какой-либо шаблон

Перейти на сайт 👨‍💻

#полезности

Задача на js: Перестановки

Напишите функцию, которая принимает строку и возвращает все возможные перестановки символов этой строки.
Пример:

permute("abc");
// Ожидаемый результат: ["abc", "acb", "bac", "bca", "cab", "cba"]

Условия:
Время работы: O(n!)
Использовать рекурсию для решения задачи.

#домашка

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

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

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

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

Лучшие статьи @free_html_lessons:
1. Архитектура в верстке сайтов
2. CSS inset
3. Задача на js: Перестановки

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

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. ux/ui дизайнер

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

Выравнивание по центру в CSS

Читать 👨‍💻

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

ТОП-13 книг по JavaScript

Читать 👨‍💻

#полезности

Бесконечность в css

Читать 👨‍💻

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