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

Лучшие статьи @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

#домашка

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

Лучшие статьи @free_html_lessons:
1. Плагины и решения для создания звездного рейтинга
2. Тег <progress>
3. Блюр текста при скролле

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

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Продуктовый дизайнер

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

Тег <time>

HTML тег <time> представляет временную метку в документе HTML. Он используется для указания даты, времени или их комбинации.

Пример использования тега <time>:

<time datetime="2022-01-01">1 января 2022</time>

В данном примере мы указываем, что наша временная метка соответствует 1 января 2022 года. Атрибут datetime используется для указания конкретной даты и времени в формате ГГГГ-ММ-ДД.
Однако, тег <time> не ограничивается только датами. Он также может быть использован для указания времени:

<time datetime="12:30">12:30 PM</time>

В этом случае мы указываем, что временная метка соответствует 12:30 PM.

Тег <time> также поддерживает комбинированные значения, включающие и дату, и время:

<time datetime="2022-01-01T12:30">1 января 2022 года, 12:30 PM</time>

Этот пример указывает, что временная метка соответствует 1 января 2022 года, 12:30 PM.

Тег <time> особенно полезен для поисковых систем и адаптивного дизайна. Поисковые системы могут использовать информацию из тега <time> для индексации дат и времени, а адаптивный дизайн может автоматически адаптировать формат и отображение временных меток в зависимости от устройства пользователя.
Тег <time> является одним из многих полезных инструментов, предоставляемых HTML для более точного и информативного описания контента.

#html | #теория

Initial-letter. Буквица в css

Читать 👨‍💻

#css | #теория

CSS св-во contain

Читать 👨‍💻

#полезности

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

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

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