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

Как читать ввод с геймпада в JavaScript и не принять поломку за норму

В Gamepad API нет событий о движении стиков и нажатии кнопок. Контроллер приходится опрашивать в цикле requestAnimationFrame и на каждом кадре заново вызывать navigator.getGamepads(): сохранённый объект содержит старый снимок.

В Chromium есть ловушка. Ось отдаёт ноль, пока браузер хотя бы раз не увидит её значение в диапазоне от −0,1 до 0,1. Сильно дрейфующий стик может не попасть туда и выглядеть исправным.

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

Как выбрать пагинацию для API

Пагинация делит ответ API на части. Offset пропускает N строк: он прост, а клиент может открыть страницу. Но база читает пропущенные строки, а изменения списка между запросами дают повторы или потерю записей.

Cursor передаёт скрытый указатель на последний элемент. Keyset показывает ключ прямо, например after_id=100. Оба выбирают строки после индексированного ключа. Для неуникального поля нужен дополнительный id, иначе строки можно пропустить.

Для тренировки сделайте обработчик с limit=20: запросите 21 запись. Последняя покажет, есть ли продолжение, а клиенту верните первые 20. Добавьте запись между запросами и сравните offset с cursor. В разборе на DEV Community есть SQL-запросы и пример обработчика.

Какие исключения ловить в Python и какие оставить видимыми

Один except для ValueError, TypeError, KeyError и NameError смешивает ошибки данных с багами программы. В CSV-файле неверная дата вызывает ValueError, пропущенная дата приводит к TypeError, а NameError обычно указывает на опечатку в коде.

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

В разборе Python Morsels этот подход показан на готовом скрипте. Для тренировки по очереди подайте ему CSV с неверной датой, пропущенным полем и ошибкой в заголовке. Сравните сообщения и решите, где нужен except, а где предварительная проверка.

Превращаем статичную HTML-страницу в редактор на JavaScript

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

Атрибут contenteditable даёт курсор, выделение, вставку и отмену действий. Около ста строк обычного JavaScript добавляют кнопки для блоков и переставляют сами HTML-элементы. Изменения не записываются, поэтому обновление страницы возвращает исходную версию.

Повторите разбор freeCodeCamp на простой странице. Добавьте свой блок и проверьте перемещение, удаление и сброс правок после обновления. Так вы потренируете JavaScript на задаче с видимым результатом.

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

freeCodeCamp.org выпустил бесплатный курс по Python с тремя проектами

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

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

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

Как дать кнопке с иконкой понятное имя для скринридера

Кнопке только с иконкой нужно доступное имя. Его озвучит скринридер, то есть программа для чтения интерфейса вслух. Имя можно задать HTML-атрибутом aria-label.

У Джейка Арчибальда «Bold» было и в имени, и в подсказке через aria-describedby, поэтому скринридер VoiceOver повторял слово. Удаление имени сделало хуже: JAWS на Windows подхватил ещё и текст соседней подсказки.

Исправление: aria-labelledby берёт имя из подсказки, а aria-describedby оставляет дополнительное описание. Попробуйте оба атрибута на кнопке с иконкой и проверьте её в двух программах чтения с экрана. В разборе Джейка Арчибальда есть ошибочный и исправленный HTML.

freeCodeCamp.org выпустил часовой курс по командной строке

На YouTube-канале проекта появился курс для новичков. В командной строке задачи задают текстовыми командами через терминал. К концу занятия автор обещает научить настраивать терминал и работать в нём на своём компьютере.

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

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

Как нарисовать CSS-треугольник коническим градиентом

Конический градиент conic-gradient() раскрашивает фон секторами вокруг выбранной точки. Если поставить соседние цвета на одной угловой отметке, переход станет резким, а сектор внутри прямоугольного элемента превратится в треугольник.

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

В статье Master.dev Blog этим способом делают крупные треугольники навигации и меняют их углы при наведении. Затем сравните результат с линейным градиентом linear-gradient(): он тоже справится, но конический вариант позволяет описывать форму через угол сектора.

Как f-строки помогают отлаживать Python

Обычный print(answer) может скрыть ошибку: строка '5' и число 5 выглядят одинаково. В примере программа сравнивает результат input() с произведением двух чисел и каждый раз считает ответ неверным.

Добавьте = после выражения внутри f-строки, то есть строки, куда Python подставляет значения: print(f"{answer = }"). Python выведет имя переменной, а строковое значение оставит в кавычках: answer = '18'. У числа кавычек не будет: expected = 18. Так видно, почему сравнение не сработало.

Повторите пример Python Morsels, затем преобразуйте ввод в число через int(input(...)). Приём работает с любым выражением внутри фигурных скобок и показывает его вместе с результатом.

Космический хакатон. Санкт-Петербург, Красноярск или онлайн из любой точки страны.

Старт 18 сентября.

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

Санкт-Петербург. К 2035 году над Землёй должен работать топливный узел, у которого заправляются корабли, и откуда он будет получать топливо — с Земли, с Луны или из резерва — пока не решил никто. Команде предстоит собрать схему поставок, посчитать резервы и решить, во что вкладываться сразу. Призовой фонд 1,2 млн ₽.

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

Лучшие забирают приз на площадке и билет в финал в Москве, 25–27 сентября, где разыграют ещё 2,4 млн рублей.

Команда 3–5 человек, недостающих можно найти на платформе.

Регистрация по ссылке — космохакатон.рф

Как устроена игра с динозавром в Chrome и чему учит её код

В разборе freeCodeCamp видно, зачем игровому движению нужен учёт времени. Если сдвигать объект на одинаковое число пикселей при каждом кадре, на мониторе с 144 Гц он побежит быстрее, чем при 40 Гц. Игра умножает скорость на время с прошлого кадра, поэтому темп не зависит от частоты обновления.

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

Повторите первый механизм: нарисуйте квадрат в canvas, HTML-элементе для рисования, и вызывайте requestAnimationFrame, чтобы браузер готовил следующий кадр. Сдвиг вычисляйте по прошедшему времени. Затем снизьте частоту кадров и проверьте, сохранилась ли скорость. Это небольшая, но наглядная тренировка анимации на JavaScript.

Почему проверка ключа через [] незаметно меняет unordered_map

В C++ контейнер unordered_map хранит значения по ключам. Но выражение mp[key] не просто ищет ключ: если его нет, контейнер создаёт новую запись со значением 0. Поэтому условие if (mp[complement]) в задаче Two Sum формально работало с индексами от единицы, однако каждый неудачный поиск раздувал таблицу лишними записями.

Автор разбора на DEV Community заменил квадратные скобки на find(): в его замере время сократилось с 3 до 0 мс. Этот метод возвращает признак отсутствия ключа и не добавляет запись. В C++20 для простой проверки наличия есть contains().

Попробуйте повторить пример и вывести размер таблицы после нескольких промахов. Если вопрос к контейнеру меняет его размер, для проверки ключа нужны find() или contains().

Почему type="number" возвращает строку в JavaScript

Введите 5 в числовое поле, прочитайте input.value и прибавьте 1. Получится 51: свойство вернуло строку «5», а JavaScript склеил текст. Тип поля включает проверку значения, клавиатуру смартфона и кнопки со стрелками, но value остаётся строкой.

Для числа можно читать valueAsNumber. Пустое или некорректное значение даст NaN, то есть «не число», поэтому проверьте его через Number.isNaN. У Number(value) другая ловушка: пустая строка превращается в ноль. Для флажка используйте checked, если нужен ответ «отмечен или нет».

Повторите эти случаи в консоли и сравните результаты. В статье на сайте John Kavanagh также разобраны выпадающие списки, переключатели и FormData, который собирает поля формы перед отправкой.

Как устроена база данных: собираем клон SQLite на C

Это обстоятельная серия для тех, кому знаком SQL, но путь данных от запроса до файла скрыт за интерфейсом СУБД. Автор строит клон SQLite с нуля на C и документирует каждый слой. Всего 15 частей: маршрут идёт от цикла чтения команд и компилятора SQL к многоуровневому B-дереву.

Сначала появляются цикл чтения команд, простейший компилятор SQL и виртуальная машина. Затем одна таблица в памяти получает тесты, сохранение на диск и курсор для обхода записей. Дальше автор разбирает формат узлов B-дерева, двоичный и рекурсивный поиск, разделение узлов и обновление их родителей.

В серии How Does a Database Work? удобно идти по порядку и смотреть, как знакомые операции превращаются в структуры данных. Читать стоит разработчикам, которые работают с SQL и хотят разобраться в индексах, полном сканировании таблицы и границе между памятью и диском.

Как отправлять GET и POST через Fetch API и обрабатывать ошибки

fetch() возвращает промис, то есть обещание получить результат позже. Этим результатом будет объект Response, а не готовый JSON: тело нужно отдельно прочитать через response.json().

Статусы 404 и 500 не отклоняют промис. Проверяйте response.ok и сами выбрасывайте ошибку. Сетевой сбой промис отклонит, а try...catch поможет обработать обе ситуации.

Для тренировки напишите две функции. Первая делает GET-запрос, проверяет статус и структуру списка товаров. Вторая отправляет товар методом POST, превращает объект в JSON через JSON.stringify() и добавляет заголовок Content-Type: application/json. Примеры каждого шага есть в статье о Fetch API.

Поймайте паузу в движении мыши одним таймером

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

const debounce = (callback, wait) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(
      () => callback(...args), wait
    );
  };
};

const onMove = debounce(
  event => console.log(event.clientX), 250
);
window.addEventListener('mousemove', onMove);

Запустите пример, поводите мышью и остановитесь. Обработчик сработает после паузы. Затем уберите debounce и сравните число строк в консоли. Исходный вариант функции и пояснения есть в сниппете Josh W. Comeau.

Добавьте номера к элементам списка без отдельного счётчика

Когда в цикле нужны и значение, и его номер, легко завести отдельную переменную и обновлять её вручную. Функция enumerate() выдаёт их парой на каждом шаге:

names = ["Аня", "Борис", "Вера"]
for number, name in enumerate(names, start=1):
    print(number, name)

Аргумент start=1 начинает нумерацию с единицы. Программа напечатает номер рядом с каждым именем, а вам не придётся следить за отдельным счётчиком.

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

Почему блок не центрируется и как освободить место для отступов

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

.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

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

В гайде Josh W. Comeau этот приём показан с изменяемой шириной контейнера. Повторите опыт: сузьте контейнер и сравните max-width: fit-content с фиксированной шириной width: 200px. В первом случае блок сможет сжаться, во втором может выйти за границы контейнера.

Научите страницу помнить данные после закрытия браузера

Форма или настройка сбрасывается после обновления страницы? Для первого упражнения возьмите localStorage: это хранилище в браузере, где данные лежат парами «ключ — значение» и остаются после обновления, закрытия вкладки или браузера.

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

В разборе freeCodeCamp localStorage сравнивают с sessionStorage, данные которого исчезают после закрытия вкладки и доступны только в ней. После упражнения замените значение настройкой темы или содержимым поля формы и найдите сохранённую запись в инструментах разработчика браузера.