Entry Point - programming basics

Как отправлять 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, данные которого исчезают после закрытия вкладки и доступны только в ней. После упражнения замените значение настройкой темы или содержимым поля формы и найдите сохранённую запись в инструментах разработчика браузера.

Два файла помогают перестать путаться в 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-правилом.