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

Полезные js консольные команды

Читать 👨‍💻

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

Что такое toast уведомления + плагины

Читать 👨‍💻

#полезности

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

Читать 👨‍💻

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

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

Читать 👨‍💻

#полезности

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

Читать 👨‍💻

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

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

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

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

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

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

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

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

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

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

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

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

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

#домашка

Анимации при движении курсора

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

#практика

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

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

#полезности

CSS inset

Читать 👨‍💻

#полезности

Архитектура в верстке сайтов

Читать👨‍💻

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

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

Лучшие статьи @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. Продуктовый дизайнер

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

Задача на JavaScript:

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

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

#домашка

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

Читать 👨‍💻

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

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

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

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

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!');
});

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

Секретные фишки 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 (размытое зрение).
Вы увидите, как весь ваш сайт налету изменит цвета. Это сразу покажет, не сливаются ли важные кнопки с фоном и считывается ли текст.

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