Последние посты
Точка входа в программирование
22 сент., 09:37
Как искать по отсортированному списку с bisectВ отсортированном списке не обязательно перебирать элементы. Бинарный поиск отбрасывает половину оставшегося диапазона на каждом шаге. В примере статьи для 10 млн чисел понадобилось 23 сравнения, а проверке через in — больше 2 млн.Модуль bisect делает такой поиск. bisect_left возвращает индекс первого совпадения, а bisect_right — позицию после последнего. Срез между ними содержит все повторы. Если значения нет, обе функции указывают, куда его вставить без нарушения сортировки. Чтобы проверить точное совпадение, убедитесь: индекс находится в списке, а элемент по нему равен искомому.Для тренировки возьмите отсортированный список с повторами: найдите границы значения, выведите срез и обработайте отсутствие совпадения. В разборе Python Morsels есть готовые рецепты для проверки наличия, подсчёта совпадений и поиска крайних индексов.
Точка входа в программирование
22 сент., 07:19
Как добавить динамику на статический сайт без своего сервераСтатический сайт может получать открытые данные через API и обновлять страницу с помощью JavaScript. Для тренировки добавьте погоду или список репозиториев, затем покажите загрузку, результат и ошибку. Так вы отработаете запросы к API без отдельного сервера.Секретный ключ в код страницы класть нельзя. Для такого запроса подойдёт бессерверная функция: хостинг запускает её вне браузера, а ключ хранит в закрытых настройках. Формы, вход и комментарии можно поручить готовым сервисам.В разборе freeCodeCamp показано, что оставить браузеру, когда добавить функцию и в какой момент обычный сервер проще набора сервисов. Начните с загрузки погоды из открытого API, затем проведите запрос с тестовым ключом через функцию.
Точка входа в программирование
22 сент., 05:00
Когда в Python действительно нужен классКласс не обязателен для каждой программы. Он пригодится, когда несколько связанных функций получают один и тот же объект. В примере с почтой функция подключения создаёт объект сервера, а функции поиска и загрузки писем и завершения сеанса получают его как аргумент.После рефакторинга сервер хранится внутри объекта класса IMAPChecker. Функции становятся методами: через объект можно войти, получить идентификаторы писем, загрузить письмо и отключиться. Данные и действия теперь собраны вместе.Для тренировки возьмите три-четыре функции, которым передаёте один объект, и соберите их в класс. Затем сравните оба варианта и проверьте, какой легче прочитать. В материале Python Morsels также разобрано, как класс обозначает смысл возвращаемых значений.
Точка входа в программирование
21 сент., 09:36
Как превратить функцию Python в веб-приложение с GradioЕсли скрипт живёт только в файле, следующий шаг: дать ему страницу в браузере. Gradio связывает функцию Python с полями ввода и показывает её ответ на странице. Например, пользователь загружает изображение и видит результат модели, не запуская код вручную.Начните с функции приветствия: подключите к ней текстовое поле через gr.Interface, затем запустите приложение командой demo.launch(). После этого замените приветствие своей функцией и проверьте, правильно ли страница передаёт ей данные.Книга freeCodeCamp ведёт от первой формы к обработке нажатий, сохранению данных между действиями, работе с файлами, моделями машинного обучения и публикации приложения в сервисе Hugging Face Spaces.
Точка входа в программирование
21 сент., 07:18
Как привязать подсказку к кнопке через CSS Anchor PositioningПодсказку легко поставить над кнопкой, пока та не оказалась у верхнего края окна. CSS Anchor Positioning связывает элементы и может перенести подсказку вниз, если сверху мало места.Для тренировки дайте кнопке имя через anchor-name, у подсказки задайте position: fixed и свяжите её с кнопкой через position-anchor. Затем position-area: top поставит подсказку сверху, а position-try-fallbacks: bottom проверит место снизу при выходе за край окна.Соберите пример и прокрутите страницу. С absolute подсказка движется вместе с блоком предка, а у fixed её граница — окно браузера. В подробном разборе есть интерактивные примеры и варианты для неполной поддержки браузерами.
Точка входа в программирование
21 сент., 05:00
Стек или очередь в Python: выбираем подходящую структуруСтек отдаёт последним то, что добавили последним (LIFO), а очередь отдаёт первым то, что пришло первым (FIFO). Проверьте: добавьте числа 0–4 в список и вызывайте pop(). Получите 4, 3, 2, 1, 0.Для очереди возьмите deque из модуля collections: добавляйте элементы через append(), а забирайте слева через popleft(). Тогда числа выйдут в исходном порядке. Обычный список тоже позволяет удалить первый элемент через pop(0), но для таких операций он не оптимизирован.В разборе Python Morsels оба сценария показаны на коротких примерах. Повторите их в консоли, затем добавьте элемент слева через appendleft(): так вы увидите, почему deque называют двусторонней очередью.
Точка входа в программирование
20 сент., 09:39
Как читать ввод с геймпада в JavaScript и не принять поломку за нормуВ Gamepad API нет событий о движении стиков и нажатии кнопок. Контроллер приходится опрашивать в цикле requestAnimationFrame и на каждом кадре заново вызывать navigator.getGamepads(): сохранённый объект содержит старый снимок.В Chromium есть ловушка. Ось отдаёт ноль, пока браузер хотя бы раз не увидит её значение в диапазоне от −0,1 до 0,1. Сильно дрейфующий стик может не попасть туда и выглядеть исправным.Потренируйтесь: подключите геймпад, нажмите кнопку и откройте консоль. Выведите значения осей, проведите стик через центр и проверьте, когда вместо нулей появятся реальные данные. Готовый код и разбор того, почему браузер не всегда определяет модель контроллера, есть в руководстве freeCodeCamp.
Точка входа в программирование
20 сент., 07:21
Как выбрать пагинацию для APIПагинация делит ответ API на части. Offset пропускает N строк: он прост, а клиент может открыть страницу. Но база читает пропущенные строки, а изменения списка между запросами дают повторы или потерю записей.Cursor передаёт скрытый указатель на последний элемент. Keyset показывает ключ прямо, например after_id=100. Оба выбирают строки после индексированного ключа. Для неуникального поля нужен дополнительный id, иначе строки можно пропустить.Для тренировки сделайте обработчик с limit=20: запросите 21 запись. Последняя покажет, есть ли продолжение, а клиенту верните первые 20. Добавьте запись между запросами и сравните offset с cursor. В разборе на DEV Community есть SQL-запросы и пример обработчика.
Точка входа в программирование
20 сент., 05:02
Какие исключения ловить в Python и какие оставить видимымиОдин except для ValueError, TypeError, KeyError и NameError смешивает ошибки данных с багами программы. В CSV-файле неверная дата вызывает ValueError, пропущенная дата приводит к TypeError, а NameError обычно указывает на опечатку в коде.Обрабатывайте проблему там, где понятна причина: ловите ошибки разбора даты, заголовки проверяйте до чтения строк, NameError оставляйте видимым. except Exception, который ловит почти все обычные ошибки, уместен при обработке независимых файлов: ошибка одного не должна останавливать остальные.В разборе Python Morsels этот подход показан на готовом скрипте. Для тренировки по очереди подайте ему CSV с неверной датой, пропущенным полем и ошибкой в заголовке. Сравните сообщения и решите, где нужен except, а где предварительная проверка.
Точка входа в программирование
19 сент., 17:57
Превращаем статичную HTML-страницу в редактор на JavaScriptРезюме или меню можно отдать автору текста без просьб править файл. Статья показывает временный редактор: текст меняется в браузере, блоки двигаются и удаляются, ссылки редактируются, а разрывы страниц задаются перед печатью в PDF.Атрибут contenteditable даёт курсор, выделение, вставку и отмену действий. Около ста строк обычного JavaScript добавляют кнопки для блоков и переставляют сами HTML-элементы. Изменения не записываются, поэтому обновление страницы возвращает исходную версию.Повторите разбор freeCodeCamp на простой странице. Добавьте свой блок и проверьте перемещение, удаление и сброс правок после обновления. Так вы потренируете JavaScript на задаче с видимым результатом.
Точка входа в программирование
19 сент., 16:35
Инструкция по применению: открыть анкету, ответить на вопросы из школьной тетрадки, по дороге вспомнить QIWI-терминалы, рингтоны по смс и первые разговоры про биткоин, дойти до финала, забрать промокод. Побочный эффект — желание немедленно обсудить всё это с кем-нибудь, кто тоже помнит.
Точка входа в программирование
19 сент., 15:38
freeCodeCamp.org выпустил бесплатный курс по Python с тремя проектамиЭто четырёхчасовой видеокурс для новичков. Вы напишете три программы для терминала: делитель счёта, игру с перемешанными словами и очередь для караоке. Так упражнения на ввод, условия и циклы складываются в программы, которые можно запустить и проверить.Проекты усложняются постепенно. Делитель счёта принимает суммы и выполняет расчёты. Игра просит угадать слово, ведёт счёт и выдаёт подсказки. В менеджере очереди логика разбивается на функции, а ошибки ввода перехватываются, чтобы программа не завершалась аварийно.В материале freeCodeCamp.org есть программа курса и переход к видео. Начните с первого проекта: повторяйте код за преподавателем и запускайте программу после каждого блока, чтобы сразу увидеть результат.
Точка входа в программирование
19 сент., 13:20
Как дать кнопке с иконкой понятное имя для скринридераКнопке только с иконкой нужно доступное имя. Его озвучит скринридер, то есть программа для чтения интерфейса вслух. Имя можно задать HTML-атрибутом aria-label.У Джейка Арчибальда «Bold» было и в имени, и в подсказке через aria-describedby, поэтому скринридер VoiceOver повторял слово. Удаление имени сделало хуже: JAWS на Windows подхватил ещё и текст соседней подсказки.Исправление: aria-labelledby берёт имя из подсказки, а aria-describedby оставляет дополнительное описание. Попробуйте оба атрибута на кнопке с иконкой и проверьте её в двух программах чтения с экрана. В разборе Джейка Арчибальда есть ошибочный и исправленный HTML.
Точка входа в программирование
17 сент., 18:43
freeCodeCamp.org выпустил часовой курс по командной строкеНа YouTube-канале проекта появился курс для новичков. В командной строке задачи задают текстовыми командами через терминал. К концу занятия автор обещает научить настраивать терминал и работать в нём на своём компьютере.За час вы потренируетесь перемещаться по дереву папок, создавать и менять файлы и каталоги, а также читать и записывать данные. После этого будет проще перейти к программам, которые запускаются только из командной строки.Повторяйте команды сразу за автором, а после видео соберите контрольный пример: создайте учебную папку, добавьте в неё файл, запишите текст и прочитайте его через терминал. Так результат курса можно проверить без дополнительной теории.
Точка входа в программирование
17 сент., 16:25
Как нарисовать CSS-треугольник коническим градиентомКонический градиент conic-gradient() раскрашивает фон секторами вокруг выбранной точки. Если поставить соседние цвета на одной угловой отметке, переход станет резким, а сектор внутри прямоугольного элемента превратится в треугольник.Для тренировки задайте центр градиента в левом верхнем углу, начало направьте вправо, а границу цветов поставьте на 45 градусов. Меняйте угол и наблюдайте за фигурой: так связь между градусами и формой видна сразу.В статье Master.dev Blog этим способом делают крупные треугольники навигации и меняют их углы при наведении. Затем сравните результат с линейным градиентом linear-gradient(): он тоже справится, но конический вариант позволяет описывать форму через угол сектора.
Точка входа в программирование
17 сент., 13:07
Как f-строки помогают отлаживать PythonОбычный print(answer) может скрыть ошибку: строка '5' и число 5 выглядят одинаково. В примере программа сравнивает результат input() с произведением двух чисел и каждый раз считает ответ неверным.Добавьте = после выражения внутри f-строки, то есть строки, куда Python подставляет значения: print(f"{answer = }"). Python выведет имя переменной, а строковое значение оставит в кавычках: answer = '18'. У числа кавычек не будет: expected = 18. Так видно, почему сравнение не сработало.Повторите пример Python Morsels, затем преобразуйте ввод в число через int(input(...)). Приём работает с любым выражением внутри фигурных скобок и показывает его вместе с результатом.
Точка входа в программирование
17 сент., 10:49
Как устроена игра с динозавром в Chrome и чему учит её кодВ разборе freeCodeCamp видно, зачем игровому движению нужен учёт времени. Если сдвигать объект на одинаковое число пикселей при каждом кадре, на мониторе с 144 Гц он побежит быстрее, чем при 40 Гц. Игра умножает скорость на время с прошлого кадра, поэтому темп не зависит от частоты обновления.Сложность тоже заложена в правилах. Широкие группы кактусов появляются лишь тогда, когда динозавр уже может их перепрыгнуть. С ростом скорости увеличиваются и промежутки между препятствиями.Повторите первый механизм: нарисуйте квадрат в canvas, HTML-элементе для рисования, и вызывайте requestAnimationFrame, чтобы браузер готовил следующий кадр. Сдвиг вычисляйте по прошедшему времени. Затем снизьте частоту кадров и проверьте, сохранилась ли скорость. Это небольшая, но наглядная тренировка анимации на JavaScript.
Точка входа в программирование
17 сент., 08:31
Почему проверка ключа через [] незаметно меняет unordered_mapВ C++ контейнер unordered_map хранит значения по ключам. Но выражение mp[key] не просто ищет ключ: если его нет, контейнер создаёт новую запись со значением 0. Поэтому условие if (mp[complement]) в задаче Two Sum формально работало с индексами от единицы, однако каждый неудачный поиск раздувал таблицу лишними записями.Автор разбора на DEV Community заменил квадратные скобки на find(): в его замере время сократилось с 3 до 0 мс. Этот метод возвращает признак отсутствия ключа и не добавляет запись. В C++20 для простой проверки наличия есть contains().Попробуйте повторить пример и вывести размер таблицы после нескольких промахов. Если вопрос к контейнеру меняет его размер, для проверки ключа нужны find() или contains().
Точка входа в программирование
17 сент., 05:13
Почему type="number" возвращает строку в JavaScriptВведите 5 в числовое поле, прочитайте input.value и прибавьте 1. Получится 51: свойство вернуло строку «5», а JavaScript склеил текст. Тип поля включает проверку значения, клавиатуру смартфона и кнопки со стрелками, но value остаётся строкой.Для числа можно читать valueAsNumber. Пустое или некорректное значение даст NaN, то есть «не число», поэтому проверьте его через Number.isNaN. У Number(value) другая ловушка: пустая строка превращается в ноль. Для флажка используйте checked, если нужен ответ «отмечен или нет».Повторите эти случаи в консоли и сравните результаты. В статье на сайте John Kavanagh также разобраны выпадающие списки, переключатели и FormData, который собирает поля формы перед отправкой.
Точка входа в программирование
16 сент., 18:56
Как устроена база данных: собираем клон SQLite на CЭто обстоятельная серия для тех, кому знаком SQL, но путь данных от запроса до файла скрыт за интерфейсом СУБД. Автор строит клон SQLite с нуля на C и документирует каждый слой. Всего 15 частей: маршрут идёт от цикла чтения команд и компилятора SQL к многоуровневому B-дереву.Сначала появляются цикл чтения команд, простейший компилятор SQL и виртуальная машина. Затем одна таблица в памяти получает тесты, сохранение на диск и курсор для обхода записей. Дальше автор разбирает формат узлов B-дерева, двоичный и рекурсивный поиск, разделение узлов и обновление их родителей.В серии How Does a Database Work? удобно идти по порядку и смотреть, как знакомые операции превращаются в структуры данных. Читать стоит разработчикам, которые работают с SQL и хотят разобраться в индексах, полном сканировании таблицы и границе между памятью и диском.Let’s Build a Simple DatabaseHow Does a Database Work?Writing a sqlite clone from scratch in C
