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

Как выбрать следующие элементы после выбранного?

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

#практика

C чего начать обучение верстке?

Читать 👨‍💻

#полезности

Что такое SSL сертификат?

Читать 👨‍💻

#полезности

Вопросы и задачи из собеседований на js

Читать 👨‍💻

#полезности

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

Лучшие статьи @free_html_lessons:
1. Каррирование в javascript
2. Как легко создать диалоговое окно?
3. Как лучше делать анимации?

Лучшие фронтенд вакансии @job_webdev:
1. Junior Верстальщик HTML/CSS с использованием AI-инструментов (Gemini, Claude)
2. Front-End Developer
3. HTML-верстальщик

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

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

Задача: Алгоритм расчета sticky-элементов при вложенном скролле

Контекст
Страница с несколькими scroll-контейнерами (как Notion или Figma панель).

Условие
Есть вложенные блоки, каждый из которых может быть position: sticky.
Нужно определить, какой заголовок должен быть:
- закреплен
- заменен следующим
- скрыт

в зависимости от:
- положения всех родительских контейнеров
- их scrollTop
- высоты элементов

Вход
- DOM-дерево в виде JS-структуры
- текущие scroll-позиции контейнеров

Выход
- список активных sticky-элементов с их координатами

#домашка

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

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

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

Как лучше делать анимации?

Почему для анимаций лучше transform, а не top / left

Одна из частых ошибок в анимациях интерфейсов — двигать элементы через top, left, right, bottom. Работает, но это плохая идея.

Что происходит при top / left
Когда ты меняешь top или left, браузеру приходится:
1. пересчитать layout
2. пересчитать позиции соседних элементов
3. перерисовать страницу

Это цепочка reflow → repaint → composite.

На простых страницах разницы почти не видно.
Но как только интерфейс становится сложнее, появляются:
• фризы
• дёрганые анимации
• нагрузка на CPU

Что происходит при transform
transform работает иначе.

.element {
transform: translateX(100px);
}

В этом случае браузер:
• не трогает layout
• не пересчитывает соседние элементы
• просто двигает уже отрисованный слой

Фактически это этап composite, часто с использованием GPU.

Результат:
• более плавная анимация
• меньше нагрузки
• стабильный FPS



Простой пример

Плохо:

.element {
  left: 0;
  transition: left 0.3s;
}

.element.active {
  left: 100px;
}

Хорошо:

.element {
  transform: translateX(0);
  transition: transform 0.3s;
}

.element.active {
  transform: translateX(100px);
}

Итог
• top / left ломают производительность
• transform работает на этапе compositing
• браузеры оптимизированы именно под него

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

Три редких значения display

Все знают block, inline, flex. Но у display есть несколько значений, которые либо неправильно понимают, либо вообще игнорируют. Разберём три таких: unset, list-item и run-in.

display: unset

Многие думают, что unset это что-то вроде none. Нет.

unset означает:
• если свойство наследуемое, применяется inherit
• если ненаследуемое, применяется initial

Для display это просто возврат к дефолтному поведению элемента.

.element {
  display: unset;
}

Что будет:
• div снова станет block
• span снова станет inline

Когда реально полезно:
• нужно отменить переопределения в медиазапросах
• хочется аккуратно «откатить» стиль, не вспоминая дефолт
• работаешь с большим CSS и не уверен, где что сломали

display: list-item

Позволяет любому элементу вести себя как <li>.

.card {
  display: list-item;
}

Что получаем:
• появляется маркер списка
• работает list-style
• можно управлять позицией маркера

Где может пригодиться:
• визуально нужен список, но HTML уже зафиксирован
• кастомные списки без <ul>/<li>

Важно понимать:
• это не делает элемент семантическим li
• для доступности лучше использовать настоящие списки

display: run-in

Самое странное значение из всех.

Идея была такая:
• элемент становится inline или block в зависимости от следующего элемента

h3 {
  display: run-in;
}

Планировалось использовать для заголовков вида:
«Заголовок: текст продолжается в той же строке»

Реальность:
• плохая поддержка браузерами
• нестабильное поведение
• по факту считается мёртвым

Вывод:
• знать полезно
• использовать не стоит
• любую задачу решают span, inline-block или flex

Итог
• unset полезный и безопасный
• list-item нишевый, но рабочий
• run-in скорее из истории CSS

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

Как легко создать диалоговое окно?

Читать 👨‍💻

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

Каррирование в javascript

Каррирование в JavaScript - это процесс преобразования функции с несколькими аргументами в последовательность функций с одним аргументом. Каждая последующая функция принимает один аргумент и возвращает новую функцию, которая также принимает один аргумент, и так далее.
Пример использования каррирования в JavaScript:

// Исходная функция, принимающая 3 аргумента
function sum(a, b, c) {
 return a + b + c;
}
// Функция для каррирования
function curry(fn) {
 return function curried(...args) {
  if (args.length >= fn.length) {
   return fn(...args);
  } else {
   return function (...args2) {
    return curried(...args.concat(args2));
   };
  }
 };
}
const curriedSum = curry(sum);
console.log(curriedSum(1, 2, 3)); // Вывод: 6
const add5 = curriedSum(5);
console.log(add5(2, 3)); // Вывод: 10
console.log(add5(4, 5)); // Вывод: 14

В приведенном выше примере функция sum каррируется с использованием функции curry. В итоге получается функция curriedSum, которая принимает аргументы по одному. Когда все аргументы собраны, она вызывает исходную функцию sum.
Каррирование может быть полезным при разработке функций, которые требуют частичного применения аргументов или при создании более универсальных функций, которые могут быть использованы для создания других функций с фиксированными аргументами.
С помощью карирования вы можете легко изменять и композировать функции для создания новых функций с требуемым поведением.

#js | #теория

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

Лучшие статьи @free_html_lessons:
1. Тег <samp>
2. Тег <dfn>
3. Эффекты на текст при скролле и наведении

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

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

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

Задача: Дебаунс + дедупликация запросов к API

Контекст
Есть поиск с автокомплитом. Пользователь печатает быстро, API медленный.

Условие
Реализовать функцию smartFetch(query), которая:
- отправляет запрос только если предыдущий с таким же query еще не в полете
- отменяет устаревшие запросы
- дебаунсит ввод
- гарантирует, что в UI попадет только последний актуальный ответ

Ограничения
- Использовать Promise, AbortController
- Без сторонних библиотек
- Возможны одинаковые запросы подряд

#домашка

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

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

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

Эффекты на текст при скролле и наведении

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

#практика

Как сделать сокращение длинного текста с тремя точками на конце на css?

CSS код:

-webkit-line-clamp: 3; 

(в этой строке пишем сколько строк должно показываться)

-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

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

Тег <dfn>

Тег <dfn> используется для выделения термина или определения в тексте. Он помогает семантически обозначить слово или фразу, которое затем будет объяснено.

Как работает <dfn>?
Обычно <dfn> применяется для выделения слова, которое будет определено рядом с ним. Браузеры не применяют к этому тегу специальных стилей, но его использование улучшает семантическую структуру документа:

<p>Понятие <dfn>API</dfn> означает интерфейс прикладного программирования.</p>

В этом примере слово API отмечено как термин, который определяется далее.

Зачем использовать <dfn>?
Семантика: Помогает поисковым системам и программам для чтения с экрана лучше понимать структуру страницы.
Ясность: Читатель сразу видит, что слово или фраза будет объяснено в тексте.
Тег <dfn> особенно полезен при создании учебных материалов, словарей, документации и статей, где есть много определений и новых терминов.

#html | #теория

Тег <samp>

Тег <samp> в HTML предназначен для отображения текста, представляющего вывод программы или системы. Это отличный способ выделить текст, демонстрирующий, что программа выдала в ответ на команду пользователя.

Как работает <samp>?
Этот тег обычно используется для оформления сообщений об ошибках, системных уведомлений и других текстов, которые нужны для показа результата программы. Например:

<p>Ошибка: <samp>Файл не найден</samp></p>

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

Когда использовать <samp>?
Отображение вывода кода или команд.
Системные сообщения и уведомления.
Демонстрация примеров ответов программ.

#html | #теория

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

Лучшие статьи @free_html_lessons:
1. Почему position: sticky ломается и как это чинить
2. Step indicator
3. Почему 100vh ломает мобильную вёрстку

Лучшие фронтенд вакансии @job_webdev:
1. React (Typescript) Frontend Developer
2. TeamLead команды разработки
3. Junior Верстальщик HTML/CSS

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

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