Все про тег <img>

Читать👨‍💻

#html | #теория

Как создать репозиторий на GitHub

Читать 👨‍💻

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

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

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

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

Частичное применение функций

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

function partial(fn, ...fixedArgs) {
  // Твой код здесь
}

function multiply(a, b, c) {
  return a * b * c;
}

const double = partial(multiply, 2);

console.log(double(3, 4)); // 24 (2 * 3 * 4)

#домашка

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

Лучшие статьи @free_html_lessons:
1. 5 ошибок, которые делают новички в вёрстке
2. Анимация shadow
3. Все про тег <img>

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

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

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

:optional css

Читать 👨‍💻

#css | #теория

CSS-приемов, которые сэкономят вам часы работы

Знаете ли вы, что в CSS есть фичи, которые редко используют, но они могут упростить жизнь? Вот они:

- aspect-ratio – задает соотношение сторон элемента без костылей с padding-top.
- scroll-snap – плавная фиксация скролла, как в мобильных галереях.
- :empty – стилизация пустых блоков (удобно для динамического контента).
- gap во Flexbox – больше не нужны margin-хаки для отступов!
- @supports – проверка поддержки свойств в браузере.

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

9 полезностей HTML

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

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

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

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

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

Группировка массива по ключу

Напиши функцию groupBy, которая группирует элементы массива по заданному ключу или колбэку.

function groupBy(array, keyOrFn) {
  // Твой код здесь
}

const data = [
  { category: "fruit", name: "apple" },
  { category: "fruit", name: "banana" },
  { category: "vegetable", name: "carrot" }
];

console.log(groupBy(data, "category"));
// {
//   fruit: [{ category: "fruit", name: "apple" }, { category: "fruit", name: "banana" }],
//   vegetable: [{ category: "vegetable", name: "carrot" }]
// }

console.log(groupBy([6.1, 4.2, 6.3], Math.floor));
// { 6: [6.1, 6.3], 4: [4.2] }

#домашка

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

Лучшие статьи @free_html_lessons:
1. :optional css
2. Индикатор скрола
3. Группировка массива по ключу

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

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

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

Что такое Reflow и Repaint — и почему они тормозят сайт

Когда ты меняешь стили через JavaScript или CSS, браузер перерисовывает страницу. Но не все изменения равны — есть два уровня нагрузки:

Reflow (Layout)
Что происходит:
Браузер пересчитывает геометрию элементов — ширину, высоту, положение.
Это дорогая операция, особенно на больших страницах.

Когда возникает:
- width, height, padding, margin, top, left, font-size
- добавление/удаление DOM-элементов
- изменение контента (например, текст внутри блока)

Пример:

element.style.height = '300px'; // вызывает reflow

Repaint
Что происходит:
Только перекраска элементов без изменения их размеров/позиции.

Когда возникает:
- background-color
-color
- box-shadow
- visibility

Пример:

element.style.backgroundColor = 'red'; // repaint, без reflow

Оптимизация
Как избежать лишней нагрузки:
- Используй transform, opacity — они не вызывают reflow или repaint, обрабатываются GPU
- Группируй DOM-изменения в requestAnimationFrame или за 1 кадр
- Не читай свойства (offsetHeight, getBoundingClientRect и т.д.) сразу после изменения стилей — это может форсировать reflow

Плохо:

el.style.width = '200px';
console.log(el.offsetHeight); // форсирует reflow

Хорошо:

el.getBoundingClientRect(); // читаем сначала
el.style.width = '200px';   // потом пишем

Вывод
Reflow — дорого. Repaint — дешевле, но тоже не бесплатен.
Лучше использовать transform, opacity, а DOM трогать по минимуму.

#полезности

Тег <progress>

Читать 👨‍💻

#html | #теория

Плагины и решения для создания звездного рейтинга

1. Просто верстка
2. Вариант Фрилансера по жизни
3. Плагин Rate Yo
4. Решение с codepen

#полезности

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

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

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

Функция каррирования

Реализуй функцию каррирования, которая позволяет передавать аргументы по одному.

function curry(fn) {
  // Твой код здесь
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)); // 6

#домашка