Задача: Генератор мемов (JS + HTML Canvas)

Создай веб-страницу, где пользователь загружает картинку (через <input type="file">), вводит текст для верхней и нижней части, а скрипт отрисовывает готовый мем в <canvas>.

Условия:
- Текст должен автоматически центрироваться по горизонтали.
- Размер шрифта подстраивается под ширину картинки.
- Готовый мем можно скачать кнопкой "Сохранить".

Подсказка:
Используй canvas.getContext('2d') для рисования изображения и текста. Метод drawImage — для вставки картинки, fillText — для текста.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Font-stretch css
2. HTML <template> и <slot>
3. Полезные сss функции

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

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

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

JSON to Flowchart

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

#практика

Subgrid: расширенные возможности Grid для вложенных сеток

CSS Grid уже давно стал стандартом для построения сложных макетов. Но есть одна проблема: вложенные элементы не могут «наследовать» линии сетки родителя. Приходилось дублировать разметку или писать громоздкие правила.
Свойство subgrid решает эту задачу. Теперь дочерний grid может использовать сетку родителя, оставаясь при этом самостоятельным контейнером.

Когда это полезно
- Карточки внутри сетки должны выравниваться по тем же колонкам, что и заголовки/текст снаружи.
- Вложенные компоненты (например, таблицы или галереи) должны соблюдать общий ритм колонок.
- Когда нужен единый вертикальный ритм по всей странице.

Пример кода

<div class="wrapper">
  <header>Заголовок</header>
  <section class="content">
    <article>
      <h2>Карточка 1</h2>
      <p>Описание...</p>
    </article>
    <article>
      <h2>Карточка 2</h2>
      <p>Описание...</p>
    </article>
  </section>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* три колонки */
  gap: 1rem;
}

.content {
  display: grid;
  grid-template-columns: subgrid; /* наследуем родительскую сетку */
  grid-column: 1 / -1; /* растягиваемся на всю ширину */
  gap: 1rem;
}

.content article {
  background: #f3f3f3;
  padding: 1rem;
}

В этом примере .content использует ту же сетку, что и .wrapper. Карточки внутри аккуратно «подстраиваются» под общую колонку, а не создают собственную сетку с другими линиями.

Вывод
subgrid — это мощное расширение Grid, которое делает макеты чище и избавляет от хака с дублированием колонок. Уже сейчас можно экспериментировать, а в будущем это станет must-have для сложных адаптивных интерфейсов.

#css

Цветовые функции в CSS: от RGB до color-mix()

Цвета в вебе — это не только red, #000 или blue. В современном CSS есть целый набор цветовых функций, которые дают гибкость и позволяют делать красивые эффекты без графики.

1. rgb() и rgba()
Классика. Цвет задаётся через компоненты красный, зелёный, синий (0–255).
rgb(255, 0, 0) → ярко-красный
rgba(0, 0, 255, 0.5) → полупрозрачный синий
📌 a (alpha) отвечает за прозрачность от 0 до 1.

2. hsl() и hsla()
Более “человеческий” способ. Цвет задаётся через:
h — оттенок (0–360° по цветовому кругу)
s — насыщенность (%)
l — светлота (%)
Пример:
color: hsl(200, 100%, 50%); /* ярко-голубой */
Фишка: легко делать вариации цвета. Например:
hsl(200, 100%, 70%) → светлее
hsl(200, 100%, 30%) → темнее

3. color-mix()
Позволяет смешивать два цвета прямо в CSS.

color: color-mix(in srgb, red 40%, blue);

Здесь берём 40% красного и 60% синего → получится фиолетовый.
Синтаксис:
color-mix(in <цветовое пространство>, <цвет1> <процент>, <цвет2> <процент>)
Можно использовать для плавных переходов, hover-эффектов и генерации палитры без дизайнера.

4. Градиенты
Градиенты — это тоже функции!
Линейный:
background: linear-gradient(90deg, red, blue);
Радиальный:
background: radial-gradient(circle, yellow, green);
Конический (новее):
background: conic-gradient(from 0deg, red, yellow, blue);

Их можно комбинировать и накладывать друг на друга для сложных эффектов.

Где это полезно
Создание цветовых схем, которые легко адаптировать под тёмную/светлую тему.
Смешивание корпоративных цветов под разные состояния UI.
Градиентные кнопки, бордеры, иконки без Photoshop.

Поддержка браузеров
rgb() и hsl() поддерживаются давно.
color-mix() — работает в Chrome, Safari и Firefox (новые версии).
Градиенты — тоже везде, включая мобильные.

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

Intl API: интернационализация в JavaScript

Обычно разработчики форматируют даты и числа «вручную»: конкатенацией строк или костылями. Но у браузеров уже есть встроенный инструмент — Intl API. Он решает задачи интернационализации (i18n) и избавляет от лишних библиотек.

1. Форматирование чисел
const number = 1234567.89;

console.log(new Intl.NumberFormat('de-DE').format(number));
// 1.234.567,89 (немецкий формат)

console.log(new Intl.NumberFormat('en-US').format(number));
// 1,234,567.89 (американский)
📌 Локаль ('de-DE', 'en-US') задаёт стиль записи чисел.

2. Валюта

const price = 1999.99;

const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(usd.format(price)); // $1,999.99

const eur = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(eur.format(price)); // 1.999,99 €

Теперь цены отображаются привычно для пользователей разных стран.

3. Даты и время

const date = new Date();

const us = new Intl.DateTimeFormat('en-US').format(date);
console.log(us); // 8/21/2025

const ru = new Intl.DateTimeFormat('ru-RU', { dateStyle: 'full' }).format(date);
console.log(ru); // четверг, 21 августа 2025 г.

📌 Можно настраивать dateStyle, timeStyle, часовые пояса и даже календари.

4. Сравнение строк

const collator = new Intl.Collator('ru-RU');
console.log(['ёж', 'яблоко', 'арбуз'].sort(collator.compare));
// ['арбуз', 'ёж', 'яблоко']

Без Intl.Collator сортировка могла бы работать неправильно для кириллицы.

Где это полезно?
• Мульти-язычные проекты (сайты, интернет-магазины).
• Корректное отображение цен, дат, валют и чисел для разных стран.
• Локализованная сортировка (например, списки по алфавиту).

#полезности

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

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

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

Задача: Интерактивный чеклист с локальным сохранением (JS + LocalStorage)

Реализуй список задач, где можно:
Добавлять новую задачу.
Отмечать задачу выполненной (перечёркивание).
Удалять задачу.
Состояние должно сохраняться в LocalStorage.

Условия:
При перезагрузке страницы задачи и отметки остаются.
Можно реализовать анимацию появления/удаления.

Подсказка:
Сохраняй список задач как массив объектов

([{ text: "купить хлеб", done: true }]) в localStorage через JSON.stringify().

#домашка

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

Лучшие статьи @free_html_lessons:
1. Intl API
2. Цветовые функции в CSS
3. JSON to Flowchart

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

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

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

Полезные meta-теги 1 часть

Читать 👨‍💻

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

Полезные meta-теги 2 часть

Читать 👨‍💻

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

Как сделать ленивую загрузку?

Читать 👨‍💻

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

Красивый спойлер с помощью тега <details> на html и css

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

#практика

Макет для тренировки (про балконы)

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

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

Задача: Таймер Pomodoro с кастомными интервалами (JS)

Сделай таймер по технике Pomodoro: 25 минут работы, 5 минут отдыха.

Функции:
Кнопка "Старт/Пауза".
Автоматический переход между работой и отдыхом.
Возможность задать свои интервалы.

Условия:
На экране должен быть чёткий индикатор времени (MM:SS).
Можно добавить звуковое уведомление по окончании.

Подсказка:
Используй setInterval для отсчёта времени и обновления DOM.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Полезные meta-теги 1 часть
2. Как сделать ленивую загрузку?
3. Красивый спойлер с помощью тега <details> на html и css

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

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

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

Протокол FTP

Читать 👨‍💻

#полезности

Open ui

Цель Open UI, группы сообщества W3C, состоит в том, чтобы позволить веб-разработчикам стилизовать и расширять встроенные компоненты веб-пользовательского интерфейса и элементы управления, такие как <select> выпадающие списки, флажки, переключатели и средства выбора даты / цвета.

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

#полезности

Proxy и Reflect в JavaScript

Читать 👨‍💻

#js | #теория