Почему вложенный текст уменьшается с em и как это исправить

Задайте списку font-size: 0.9em и добавьте внутрь ещё три списка. Для размера шрифта единица em отсчитывается от шрифта родителя, поэтому каждый уровень умножает предыдущее значение на 0,9. При исходных 16 пикселях получатся 14,4, затем 12,96 и 11,66 пикселя.

Замените em на rem: эта единица зависит от размера шрифта корневого элемента html, поэтому вложенность больше не уменьшает текст.

Но em пригодится для отступов кнопки. У padding он зависит от шрифта самой кнопки: увеличите её текст, и отступы вырастут пропорционально. В разборе единиц CSS есть формулы перевода пикселей в em, обратный расчёт и готовые примеры. Повторите оба опыта рядом и сравните результат в браузере.

Как устроен разбор аргументов командной строки в Rust

Аргументы командной строки — это параметры, которые передают программе при запуске. С ними один и тот же инструмент может выбирать режим работы без правок в исходниках. Для новичка это следующий шаг после программы, которая всегда выполняет один сценарий.

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

Для практики соберите небольшой прототип, запустите его с корректными и ошибочными параметрами и сравните вывод. Затем добавьте собственную опцию: так станет видно, как параметры запуска меняют поведение программы и где нужно обрабатывать ошибки.

Как посчитать книги по жанрам и не перепутать WHERE с HAVING

Возьмите таблицу из шести книг и получите по одной строке на каждый жанр. GROUP BY genre объединит книги одного жанра в группу, а COUNT(*) посчитает строки внутри неё:

SELECT genre, COUNT(*) AS total_books
FROM books
GROUP BY genre;

Затем замените подсчёт на SUM(price) или AVG(price), чтобы найти сумму или среднюю цену книг каждого жанра. Если нужно убрать отдельные книги до группировки, используйте WHERE. Для отбора уже посчитанных групп нужен HAVING, например HAVING COUNT(*) > 1.

В готовом наборе данных и запросов можно повторить примеры в PostgreSQL и проверить частую ошибку: обычное поле в SELECT должно входить в GROUP BY либо обрабатываться функцией вроде COUNT.

Как найти ошибку в Python с подсказкой ИИ, а не готовым ответом

Возьмите функцию вычисления среднего, которая делит сумму чисел на len(numbers) - 1. Для списка [80, 90, 70, 100] она получает 340 / 3 вместо ожидаемых 85.

Сначала запустите код и сравните фактический результат с ожидаемым. Затем попросите ИИ не исправлять функцию, а указать, какую часть вычисления стоит проверить. Найдите ошибку самостоятельно и добавьте проверки: среднее четырёх чисел равно 85, двух чисел равно 15, одного числа равно самому числу. После этого передайте пустой список: так обнаружится деление на ноль, которого первая правка не устранила.

Для других задач пригодится схема из пяти этапов: собрать контекст, поставить диагноз, получить подсказку, проверить исправление и объяснить причину ошибки.

Сентябрь, учебный год, сессия не так далеко, как вы думаете. Это всё про вас? Тогда загляните в подборку подборок для студентов!

Подготовка к сессии
Полезные сервисы для студентов-технарей: от учёбы до стажировки
9 ИИ для презентаций

Семь ошибок индексации PostgreSQL и как их проверить

Индекс помогает PostgreSQL быстрее находить строки, но при каждой вставке, правке и удалении база обновляет все индексы таблицы. Поэтому индексы «на всякий случай» замедляют запись. Ещё два частых промаха: индекс по полю с парой значений и неверный порядок колонок в индексе из нескольких полей.

Возьмите один медленный SELECT-запрос и запустите EXPLAIN ANALYZE: команда покажет реальный план, число прочитанных строк и затраченное время. Если большая таблица сканируется целиком ради малой выборки, проверьте, соответствует ли индекс условиям запроса. Разбор семи ошибок индексации даёт SQL-примеры, способы найти неиспользуемые или занявшие лишнее место индексы и варианты исправлений.

Как извлекать данные из объектов и массивов в JavaScript

Деструктуризация создаёт отдельные переменные из значений объекта или массива одной строкой. У объекта свойства выбираются по имени: const { name, age } = person. У массива важна позиция: const [first, second] = colours.

Попробуйте запустить оба примера и поменять исходные данные. Затем переименуйте переменную через { name: fullName } и задайте значение по умолчанию: { size = "medium" }. Оно пригодится, если свойства size в объекте нет.

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

Как сделать прилипающие заголовки списка на CSS

Соберите список контактов, в котором буква группы остаётся сверху, пока имена прокручиваются под ней. Для заголовка достаточно position: sticky и top: 0, но его движение ограничивает родительский блок.

Оберните каждую группу вместе с заголовком в отдельный контейнер. Когда контейнер уйдёт за верхнюю границу, его заголовок освободит место следующему. Самому списку задайте высоту и вертикальную прокрутку. Непрозрачный фон не даст тексту просвечивать, а z-index разместит заголовок поверх строк.

В интерактивных примерах с HTML и CSS можно сравнить два варианта: заголовки сменяют друг друга или накапливаются сверху. Повторите оба и уберите обёртки групп: так сразу станет видно, как структура страницы задаёт границы position: sticky.

Как понять оси Flexbox и перестать путать выравнивание

Соберите контейнер с тремя блоками и добавьте ему display: flex. По умолчанию элементы стоят в строке: главная ось идёт по горизонтали, а поперечная по вертикали. Свойство justify-content выравнивает элементы вдоль главной оси, align-items вдоль поперечной.

Теперь переключите flex-direction с row на column и оставьте остальные правила прежними. Элементы начнут двигаться иначе, потому что главная ось станет вертикальной, а поперечная горизонтальной. Так проще увидеть, почему знакомое свойство иногда сдвигает блоки не в ту сторону, которую вы ожидали.

Меняйте по одному значению: попробуйте flex-start, center и space-between, затем сравните строку и столбец. Схема двух осей и готовые шаблоны Flexbox помогут закрепить результат на навигации, карточке с текстом и подвале страницы.

Первое изменение проекта в GitHub Copilot app: как проверить результат

Возьмите небольшой учебный проект и попросите приложение внести одну видимую правку, например добавить хлебные крошки: цепочку ссылок от главной страницы к текущей. Так вы проверите весь путь от запроса к ИИ до работающей программы.

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

Если всё работает, усложните запрос: добавьте ещё один уровень навигации или измените подписи ссылок. После второй правки снова сравните файлы и запустите проект. Это небольшая, но понятная тренировка работы с ИИ-помощником.

Как превратить объект JavaScript в JSON и обработать ошибку разбора

JSON пригодится, когда объект нужно отправить по сети или сохранить как текст. Попробуйте взять объект { name: "Ada", age: 36 }, передать его в JSON.stringify(), а результат восстановить через JSON.parse(). Так станет видна разница между объектом со свойствами и его текстовым представлением.

Затем усложните пример: передайте в JSON.parse() строку "not json". Метод выбросит ошибку, поэтому разбор внешних данных стоит помещать в try...catch. После перехвата программа сможет продолжить работу, например показать сообщение о неверных данных.

В примерах преобразования JSON также разобраны ограничения: свойства с функциями и undefined пропускаются, а даты превращаются в строки и сами обратно в даты не восстанавливаются. Проверьте каждый случай в консоли: это короткая тренировка перед работой с ответами сервера.

Как добавить прямой эфир и перемотку в видеоплатформу на FastAPI

В ретроспективе своего проекта Vadim_Klimov показывает, как учебный CRUD на FastAPI вырос в видеоплатформу с прямыми трансляциями. Для эфира сервис принимает видеопоток, транскодирует его и на лету создаёт HLS-сегменты, которые браузер загружает последовательно.

Отдельно разобрана перемотка прямого эфира. Зритель может вернуться к уже прошедшему фрагменту, пока тот остаётся в хранимом окне. Доступную глубину перемотки ограничивает TTL, то есть срок хранения сегментов.

Разбор собственной реализации пригодится при проектировании live-плеера: автор показывает, как организовать поток и хранение сегментов. Подключаясь к уже начавшемуся эфиру, зритель может смотреть текущий момент или вернуться к пропущенным фрагментам в пределах сохранённого окна.

Как выбирать случайные значения в Python и повторять результат

Попробуйте короткий эксперимент. random.choice(colors) выберет один элемент списка, а random.choices(colors, k=3) вернёт сразу три. Один цвет может попасться несколько раз: функция выбирает значения с повторениями.

Затем вызовите random.seed(5), получите несколько значений и повторите те же действия, снова установив seed в 5. Обе последовательности совпадут. Seed задаёт начальное состояние генератора псевдослучайных чисел, поэтому такой приём помогает воспроизводить ошибку и делать тесты предсказуемыми.

Разбор функций random и secrets также объясняет границу: для паролей и токенов нужен модуль secrets, который получает криптографически стойкую случайность от операционной системы.

#python

Ссылка или кнопка: как выбрать HTML-элемент по действию

Если клик ведёт на другую страницу или к фрагменту текущей, нужен <a href="…">. Если он меняет содержимое, сохраняет настройку или открывает окно, выбирайте <button type="button">.

В практике по семантическому HTML вы соберёте страницу заметок: ссылка откроет другую заметку, а кнопка отметит текущую прочитанной.

После упражнения добавьте заметку и решите, что ей нужно: переход или действие. Так выбор тега будет зависеть от смысла, а не от внешнего вида.

Как правильно сортировать числа и товары в JavaScript

У sort() есть ловушка: без функции сравнения метод превращает элементы в строки и сопоставляет их посимвольно. Поэтому [3, 1, 10, 2].sort() выдаёт [1, 10, 2, 3]: строка «10» начинается с «1» и оказывается раньше «2».

Для чисел передайте правило (a, b) => a - b. Отрицательный результат ставит a раньше b, поэтому массив идёт по возрастанию. Чтобы так же расположить товары от дешёвых к дорогим, сравнивайте их цены через a.price - b.price.

Учтите, что sort() меняет исходный массив. Если его надо сохранить, сортируйте копию: [...numbers].sort(...). Запустите все три варианта и сравните исходные данные с результатом, а затем разберите сортировку строк, дат и нескольких полей.

Как потренировать COMMIT и ROLLBACK в SQL

Транзакция объединяет несколько SQL-команд в одну операцию: база либо сохраняет все изменения, либо отменяет их. Удобнее всего увидеть это на учебной таблице, где ошибочный UPDATE ничего не сломает.

Запустите BEGIN, измените одну строку через UPDATE и проверьте её командой SELECT. Затем выполните ROLLBACK: значение вернётся к исходному. Пока не было COMMIT, изменения оставались внутри открытой транзакции.

Повторите те же шаги, но завершите их командой COMMIT. Теперь изменение сохранено, и следующий ROLLBACK его не отменит. В разборе типичных ошибок с транзакциями также показано, почему закрытие соединения может отменить несохранённую работу и как BEGIN страхует массовый DELETE или UPDATE.

Как собрать интерактивную карту Leaflet со своими метками

Для первой карты не нужен сложный геосервис. Leaflet — лёгкая библиотека JavaScript: она выводит карту в браузере и позволяет добавлять метки. Вы создадите index.html, style.css и script.js, подключите файлы Leaflet по внешней ссылке и откроете результат локально.

Начните с карты Бостона на подложке OpenStreetMap. Затем добавьте обычную метку, оформите круглую и вынесите несколько мест с координатами в массив, то есть список объектов. Цикл пройдёт по списку и создаст для каждого места маркер с подписью. Так данные из JavaScript превратятся в элементы на карте.

Если видна пустая страница, сначала проверьте высоту контейнера #map: без неё карте негде отрисоваться. Для первого запуска возьмите полный файл script.js: ранний фрагмент показывает только начало обработчика загрузки страницы DOMContentLoaded.

Соберите кнопку и карточку с CSS-градиентами

Начните с двух небольших элементов: задайте кнопке linear-gradient(), а карточке radial-gradient(). Первый смешивает цвета вдоль прямой, второй распределяет их от центра. Разница станет видна прямо в браузере.

В разборе линейных и радиальных градиентов есть готовые примеры кнопки и светового пятна. Там же показано, как угол задаёт направление линии, положение центра смещает пятно, а проценты отмечают места, где должны появиться выбранные цвета.

Скопируйте примеры и проведите три проверки: замените угол 90deg на 135deg, перенесите центр с 50% 30% на 30% 20%, затем добавьте третий цвет. После каждого изменения сравните результат: так синтаксис быстрее связывается с тем, что рисует браузер.

Собираем счётчик кликов на JavaScript

Счётчик с одной кнопкой помогает увидеть базовый цикл интерактивной страницы: браузер замечает нажатие, программа меняет число в переменной и выводит новое значение на экран.

В пошаговой сборке счётчика вы создадите файлы index.html и script.js, найдёте кнопку и число по их id, подключите функцию к событию клика через addEventListener и обновите текст с помощью textContent.

Разбор также поможет найти типичные ошибки: несовпадающие id, слишком ранний запуск скрипта и переменную счётчика внутри обработчика. В последнем случае каждый клик показывает 1, потому что значение каждый раз создаётся заново. После запуска попробуйте добавить кнопки уменьшения и сброса: так станет понятнее, как одно состояние связывается с несколькими действиями.