Точка входа в программирование

Два файла помогают перестать путаться в HEAD и ветках Git

Когда похожие термины Git сливаются в одно, сообщения программы трудно читать. Для начала хватит простой модели: heads называют ветки, а HEAD обозначает текущую ветку. Ветки хранятся в каталоге .git/refs/heads, указатель на текущую ветку лежит в файле .git/HEAD. У модели есть исключения, поэтому это отправная точка, а не полное определение.

Проверьте её в учебном репозитории: посмотрите файл .git/HEAD и содержимое каталога .git/refs/heads. Цель упражнения: увидеть две разные роли за почти одинаковыми именами. После этого сообщения Git проще разбирать по частям, а не запоминать целиком.

В разборе запутанных терминов Git собраны варианты записи HEAD с символами ^ и ~, а также похожие команды reset, revert и restore. Выберите сообщение, которое уже ставило вас в тупик, и разберите его следующим.

Хочешь стать аналитиком? Подай заявку на олимпиаду DANO

Попробуй себя в роли аналитика на олимпиаде НИУ ВШЭ и Т-Банка. Тебя ждут:
— Тест-драйв профессии до поступления.
— Задания, составленные на реальных данных.
— Командная работа, как в настоящих исследованиях и аналитических отделах.
— Выездной проектный тур для финалистов.
— Упрощенный отбор на стажировку в Т-Банке для победителей.

Не страшно, если нет опыта в анализе данных. Хватит школьных знаний по математике и логике. Перед каждым этапом будет обучающий модуль.

Подай заявку до 5 октября по ссылке

Как устроены хеш-функции и зачем им равномерное распределение

Статья с интерактивными визуализациями показывает превращение строки в число и способы оценить результат. Коллизии неизбежны: если диапазон содержит 8 значений, среди 9 разных входов хотя бы два дадут одинаковое число.

Хорошая функция равномерно распределяет результаты и создаёт лавинный эффект: при изменении одного входного бита в среднем меняется 50% выходных. murmur3 сравнивают с функцией, которая суммирует коды символов по модулю 1 000 000. На случайных строках разница почти незаметна, но числа от 1 до 1 000 образуют у простой функции узоры.

Затем автор собирает на JavaScript хеш-таблицу из корзин: хеш ключа выбирает корзину, а поиск перебирает её элементы до совпадения. Статья Hashing связывает знакомый Map с распределением данных и показывает, почему хеш-функцию нельзя оценивать только на случайном вводе.

Потренируйте CSS-селекторы на предметах виртуального стола

Селектор — часть CSS-правила, которая выбирает элементы для оформления. Например, в правиле p { margin-bottom: 12px; } селектор p выбирает все абзацы, а правило добавляет им нижний отступ.

В CSS Diner вместо конспекта сразу дают задачу: ввести селектор и выбрать нужные предметы на столе. Если ответ верный, откроется следующий уровень. Наведите курсор на предмет, чтобы увидеть его HTML-разметку, то есть запись этого предмета в коде страницы. Подсказки по селекторам находятся справа.

Пройдите первые уровни и после каждого объясните себе, почему селектор выбрал именно эти элементы. Так вы проверите не память на готовые записи, а понимание связи между HTML-разметкой и CSS-правилом.

Соедините две SQL-таблицы и получите один ответ

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

INNER JOIN сопоставляет строки двух таблиц по общему уникальному ключу, то есть значению, которое однозначно обозначает объект. Условие ON указывает, какие ключи сравнить, а фильтрация, сортировка и ограничение числа строк выполняются уже после соединения.

В шестом уроке SQLBolt это можно потренировать на базе Pixar: к ней добавили таблицу BoxOffice с рейтингами и продажами. Соберите запрос и проверьте, какие данные оказались в одной строке. Если связь не складывается, сначала сравните поля по обе стороны ON.

Проверяйте раскрывающиеся кнопки по контексту, а не по одному атрибуту

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

Поэтому наличие aria-expanded ещё не доказывает, что разметка верна. Для тренировки задайте три вопроса: к какому типу относится элемент, уместен ли здесь атрибут и можно ли заменить его встроенным элементом HTML.

Стив Френзель разбирает сворачиваемые разделы и интерактивные элементы: аккордеон, отдельный раскрывающий блок и похожие случаи, где контент скрывается без aria-expanded. Возьмите знакомую страницу, определите тип кнопки и сверьте решение с примерами. Образцы из ARIA Authoring Practices Guide автор советует тщательно тестировать: это демонстрации, а не готовый код.

Запоминаем и применяем в работе

Как обходить несколько списков одновременно с Python zip()

В одном списке лежат названия товаров, в другом цены. zip() соединяет элементы с одинаковыми позициями в пары, поэтому оба списка можно обработать в одном цикле. Функция возвращает итератор: пары появляются по мере обхода, а не хранятся в готовом списке заранее.

Проверьте ловушку на двух списках разной длины. zip() остановится вместе с самым коротким и пропустит остаток. Сравните list(zip(...)) с itertools.zip_longest(): второй вариант сохранит лишние элементы и подставит заполнитель там, где пары нет.

В разборе Real Python показано, как собрать словарь через dict(zip()) и разъединить готовые пары оператором *. Для тренировки замените числа и буквы двумя своими списками и распечатайте получившиеся пары.

Как устроить адаптивную сетку с CSS Grid

CSS Grid делит один HTML-элемент на невидимые строки и столбцы без дополнительных элементов для каждой ячейки. Если задать только display: grid, получится один столбец, а строки будут добавляться под вложенные элементы.

Сравните проценты и fr. Проценты задают жёсткие доли родительского блока, поэтому колонки общей шириной 100% вместе с промежутком могут выйти за его границы. Единица fr учитывает ширину содержимого и промежутки, затем делит оставшееся место.

Для тренировки соберите календарь из семи колонок через repeat(7, 1fr), добавьте свойство промежутка gap, замените доли на проценты и сузьте блок. В интерактивном руководстве Josh W. Comeau результат можно проверить в примерах.

Викторина на Python научит вас собирать программу по частям

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

Затем программа научится обрабатывать ошибки, давать подсказки и объяснять ответы. Вопросы переедут в TOML-файл, то есть отдельный файл с данными, а сама викторина получит несколько тем.

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

С днем программиста, коллеги!

Желаем, чтобы код компилировался с первого раза, баги находились до релиза, а таски «на пять минут» действительно занимали пять минут. 

И конечно, пусть в жизни будет больше приятных сюрпризов — один из них мы уже подготовили. Скорее переходите по ссылке, трясите коробку и забирайте свой подарок ко Дню программиста: https://tprg.ru/PXaD

Симулятор кубиков учит собирать программу по частям

Маленький проект полезнее россыпи упражнений, когда результат можно запустить и сразу проверить. В этом приложении вы вводите число шестигранных кубиков, а Python показывает случайный бросок рисунком из текстовых символов.

Вместо одного большого куска кода программа собирается по этапам. Сначала текстовый интерфейс принимает команду и проверяет ввод. Затем random.randint() выбирает случайное целое число для каждого кубика, а отдельная функция превращает результаты в рисунок. Последний этап посвящён переработке кода, который строит этот рисунок.

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

Поймите, почему один клик запускает несколько функций

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

Соберите страницу, где кнопка button вложена в span, а тот — в div. Назначьте функции для button, span, div и body: пусть каждая выводит имя элемента в консоль браузера. Нажмите кнопку и увидите тот же порядок. Затем нажмите span: кнопка промолчит, потому что событие идёт к родителям, а не к дочерним элементам.

Разбор на freeCodeCamp.org с иллюстрациями поможет повторить пример. После него поменяйте вложенность элементов и предскажите порядок до клика: так всплытие превратится из термина в понятное поведение.

Читайте ошибку undefined справа налево и находите причину

Сообщение Cannot read properties of undefined выглядит расплывчато, но указывает на конкретный сбой. Если оно заканчивается на (reading 'name'), программа попыталась взять свойство name у значения, которого нет.

Сначала найдите указанное свойство, затем посмотрите, что стоит слева от точки. В строке user.name проблема не в name: переменная user получила undefined. Например, метод find() возвращает такое значение, когда не находит элемент.

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

Ошибка NoneType показывает, где искать пропавший объект

Скрипт падает на user.name, а Python сообщает: у объекта NoneType нет атрибута name. Это не жалоба на сам атрибут name. В этой строке переменная user оказалась равна None, хотя код ожидал объект пользователя.

Искать причину удобнее в обратном порядке. Сначала найдите обращение к атрибуту, затем переменную слева от точки и место, где она получила значение. В примере из статьи функция find_user() возвращает None, если не находит пользователя: значит, нужно проверить target_id и наличие записи в списке.

Разбор на DEV Community показывает этот поиск по шагам. Возьмите похожую ошибку из своего кода и пройдите цепочку назад до первого None: так сообщение об ошибке превратится в маршрут от симптома к причине.

Настройте доступ к GitHub и не запутайтесь в двух SSH-ключах

Когда впервые отправляете код из терминала, открытый и закрытый ключ легко поменять местами. Закрытый файл должен остаться только на компьютере, открытый добавляют в GitHub. Затем Git использует закрытый ключ, чтобы подтвердить вашу личность при отправке и загрузке кода; открытый ключ в GitHub должен ему соответствовать.

GitHub собрал пошаговую инструкцию: как создать ключи, добавить их в программу ssh-agent, которая хранит ключи и избавляет от постоянного ввода пароля для ключа, а затем перенести открытый ключ в настройки профиля.

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

Жёсткий диск, переживший три компьютера, две переустановки Windows и один синий экран смерти — знакомая история? SpaceWeb и Типичный программист посвятили ей анкету к 25-летию компании: школьные вопросы про спорт, лучшего друга и обои на рабочий стол, а между ними — история развития веба с 2001 по 2026 год. В конце — небольшой взгляд в будущее, промокод на услуги SpaceWeb и результат: может, ты и есть тот самый надёжный жёсткий диск.

Нумерация PDF покажет, как связать JavaScript с интерфейсом

Когда учебные примеры выглядят набором отдельных функций, полезно собрать из них вещь с видимым результатом. В этом мини-проекте такой результат — PDF с номерами на выбранных страницах.

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

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

Разберите ревью кода на одном маленьком изменении

Ревью легко выучить как слово и так и не понять, что делать после замечания. Материал GitHub Skills посвящён совместной проверке изменений: участники дорабатывают работу по предложениям до объединения кода.

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

Откройте репозиторий GitHub Skills о проверке изменений перед объединением. Затем повторите тот же сценарий в своём учебном проекте.

SQL-запрос может молча отфильтровать нужные строки, но это легко исправить

Вы ищете клиентов без телефона, пишете WHERE phone = NULL и получаете ноль строк, хотя значения NULL в столбце есть. Ошибки нет: запрос выполнился, но условие не стало истинным ни для одной строки.

В SQL NULL означает неизвестное значение. Сравнение через = поэтому даёт не истину или ложь, а третий результат: «неизвестно». WHERE оставляет только строки, для которых условие истинно, и отбрасывает остальные. Даже NULL = NULL не даёт истину.

Для поиска отсутствующих значений используйте IS NULL, для обратной проверки — IS NOT NULL. Разбор с таблицей и пошаговым объяснением показывает, почему обычное сравнение здесь отвечает не на тот вопрос.

Попробуйте оба условия на таблице из трёх строк: одно вернёт пустой результат, второе найдёт строку без телефона.