Forwarded from Веб-страница
Если вы фронтендер и вам нужен бэкенд, этот разбор стоит сохранить
Автор собрал учебный Task Manager API на FastAPI так, чтобы за один проект пройти структуру, SQLAlchemy-модели, Pydantic-схемы, отдельный
Сохранил бы тем, кто переходит от учебных скриптов к полноценному API и хочет разложить файлы по полочкам. Разбор с кодом на GitHub.
#restapi #фронтенд #бэкенд
Автор собрал учебный Task Manager API на FastAPI так, чтобы за один проект пройти структуру, SQLAlchemy-модели, Pydantic-схемы, отдельный
crud.py и маршруты через APIRouter. Получается 10 эндпоинтов для пользователей и задач — узнаваемая схема сервиса, а не игрушка.Сохранил бы тем, кто переходит от учебных скриптов к полноценному API и хочет разложить файлы по полочкам. Разбор с кодом на GitHub.
#restapi #фронтенд #бэкенд
❤3🔥1👏1😁1
Почему
Кажется, что добавить
Так «асинхронность» расползается по коду заразно: вдруг половина проекта завёрнута в Promise, хотя реальной работы с сетью или файлами там нет. Читать такой код сложнее — непонятно, где настоящее ожидание ответа от сервера, а где просто возврат готовой переменной.
Правило проще, чем кажется: если внутри функции нет
async без await — плохая привычкаКажется, что добавить
async к функции «на всякий случай» безопасно. На деле вы меняете правила работы функции: она начинает возвращать не готовое значение, а Promise. Теперь каждый, кто её вызывает, обязан писать await, а значит, и его вызывающие тоже становятся async-функциями.Так «асинхронность» расползается по коду заразно: вдруг половина проекта завёрнута в Promise, хотя реальной работы с сетью или файлами там нет. Читать такой код сложнее — непонятно, где настоящее ожидание ответа от сервера, а где просто возврат готовой переменной.
Правило проще, чем кажется: если внутри функции нет
await, не пишите перед ней async. Добавите потом за минуту, когда это реально понадобится. Разбор Мэтта Смита поможет почувствовать разницу.❤2🔥1🎉1
В Go нет классов и наследования — и это не баг, а особенность
Если вы только начинаете Go после Java или Python, первым делом удивит отсутствие классов. Вместо них структуры: обычный набор полей, к которому методы «прикрепляются» отдельно. Конструкторов тоже нет, поэтому обычно пишут вспомогательную функцию вроде
Главная ловушка для новичка: приёмник метода.
Наследования нет, поэтому «расширить»
Если вы только начинаете Go после Java или Python, первым делом удивит отсутствие классов. Вместо них структуры: обычный набор полей, к которому методы «прикрепляются» отдельно. Конструкторов тоже нет, поэтому обычно пишут вспомогательную функцию вроде
NewOrder.Главная ловушка для новичка: приёмник метода.
(o Order) передаёт копию, а (o *Order) передаёт указатель и может менять оригинал. Если метод вроде MarkPaid не меняет статус, проверьте, не забыли ли звёздочку.Наследования нет, поэтому «расширить»
Order до PremiumOrder через extends не получится. Это заставляет думать не в категориях «родитель и ребёнок», а в категориях «данные + поведение». В статье автор разбирает, чем в Go заменяет наследование, и почему серьёзные проекты на этом строятся.✍6
Import on interaction: не грузите всё сразу
Когда вы только учитесь делать сайты, хочется подключить все скрипты и виджеты сразу — чат, плеер, комментарии. Но браузер тратит силы на загрузку того, что пользователь ещё не открывал, и страница тормозит.
Паттерн import on interaction говорит: тяжёлые куски интерфейса можно подгружать в момент взаимодействия. Например, код видеоплеера загружается не при открытии страницы, а когда пользователь нажал «Play». То же работает с чатами и другими встраиваемыми виджетами.
На старте это полезно понимать на уровне идеи: не обязательно всё тащить в начало. В статье разбирают, какие варианты отложенной загрузки бывают и когда какой выбрать.
Попробуйте в своём следующем учебном проекте отложить хотя бы один скрипт до клика.
Когда вы только учитесь делать сайты, хочется подключить все скрипты и виджеты сразу — чат, плеер, комментарии. Но браузер тратит силы на загрузку того, что пользователь ещё не открывал, и страница тормозит.
Паттерн import on interaction говорит: тяжёлые куски интерфейса можно подгружать в момент взаимодействия. Например, код видеоплеера загружается не при открытии страницы, а когда пользователь нажал «Play». То же работает с чатами и другими встраиваемыми виджетами.
На старте это полезно понимать на уровне идеи: не обязательно всё тащить в начало. В статье разбирают, какие варианты отложенной загрузки бывают и когда какой выбрать.
Попробуйте в своём следующем учебном проекте отложить хотя бы один скрипт до клика.
❤1👏1🤔1
Forwarded from Веб-страница
Авторитетный и рекурсивный DNS: зачем фронтендеру это знать
Если вы меняли хостинг или прикручивали CDN, то видели, как новые записи встают не сразу — кто-то уже попадает на новый сервер, а кто-то ещё стучится в старый. Виноват не фреймворк, а разница между двумя ролями DNS.
Авторитетный сервер считается источником правды для вашего домена: именно он отвечает за его DNS-записи. Рекурсивный резолвер выступает посредником: ходит от корня к TLD, затем к авторитетному серверу и кеширует ответ на своей стороне. Именно кеш резолверов, а не «где-то там в интернете», создаёт задержку при propagation.
Понимание этой разницы помогает быстрее диагностировать, почему одни пользователи видят новую версию сайта, а другие продолжают видеть старую. Разбор от DNS Assistant стоит сохранить, если редактируете зоны.
Если вы меняли хостинг или прикручивали CDN, то видели, как новые записи встают не сразу — кто-то уже попадает на новый сервер, а кто-то ещё стучится в старый. Виноват не фреймворк, а разница между двумя ролями DNS.
Авторитетный сервер считается источником правды для вашего домена: именно он отвечает за его DNS-записи. Рекурсивный резолвер выступает посредником: ходит от корня к TLD, затем к авторитетному серверу и кеширует ответ на своей стороне. Именно кеш резолверов, а не «где-то там в интернете», создаёт задержку при propagation.
Понимание этой разницы помогает быстрее диагностировать, почему одни пользователи видят новую версию сайта, а другие продолжают видеть старую. Разбор от DNS Assistant стоит сохранить, если редактируете зоны.
❤4
Почему в обучении коду стоит искать трение, а не избегать его
JetBrains Education пишет про friction-maxxing, то есть намеренный поиск трудностей в удобной жизни. В программировании это работает так же: гладкие уроки дают иллюзию знаний, а разбор ошибки самому даёт настоящее понимание.
Низкая проходимость вводных курсов объясняется не «неправильным» мозгом, а мифом, что код для избранных. Чем раньше вы перестанете обходить сложные места и начнёте докапываться до причины бага, тем быстрее вырастёт уверенность.
Возьмите тему, которую прошли бегло, например циклы или обработку ошибок, и решите без подсказок три задачи посложнее обычных. В блоге JetBrains объясняют, почему это полезнее очередного курса в закладках.
JetBrains Education пишет про friction-maxxing, то есть намеренный поиск трудностей в удобной жизни. В программировании это работает так же: гладкие уроки дают иллюзию знаний, а разбор ошибки самому даёт настоящее понимание.
Низкая проходимость вводных курсов объясняется не «неправильным» мозгом, а мифом, что код для избранных. Чем раньше вы перестанете обходить сложные места и начнёте докапываться до причины бага, тем быстрее вырастёт уверенность.
Возьмите тему, которую прошли бегло, например циклы или обработку ошибок, и решите без подсказок три задачи посложнее обычных. В блоге JetBrains объясняют, почему это полезнее очередного курса в закладках.
💯3❤2
Почему одного Python на компьютере мало и как не запутаться в версиях
Кажется: установили Python и уже пишете код. Но через пару проектов возникает ситуация: одна программа требует одну версию Python, другая использует другую, а библиотеки из разных задач начинают мешать друг другу.
Тут на помощь приходят две вещи. В статье разбирается pyenv. Он позволяет переключать версии Python под каждый проект, не трогая системную установку. А виртуальное окружение: это изолированная «коробка» со своими пакетами: начните со встроенного
Главное правило: не смешивайте всё в одну кучу. Отдельный проект — отдельное окружение.
Кажется: установили Python и уже пишете код. Но через пару проектов возникает ситуация: одна программа требует одну версию Python, другая использует другую, а библиотеки из разных задач начинают мешать друг другу.
Тут на помощь приходят две вещи. В статье разбирается pyenv. Он позволяет переключать версии Python под каждый проект, не трогая системную установку. А виртуальное окружение: это изолированная «коробка» со своими пакетами: начните со встроенного
venv и pip, а когда проекты подрастут, посмотрите на Poetry, Pipenv или uv.Главное правило: не смешивайте всё в одну кучу. Отдельный проект — отдельное окружение.
❤2
Forwarded from Инструменты программиста
ImHex — hex-редактор, который бережёт глаза при ночном реверсе
ImHex нацелен на реверс-инженеров и программистов, которым приходится разглядывать бинарники допоздна. Главная заявка: не только удобная работа с байтами, но и интерфейс, который не выжигает сетчатку к 3 часам ночи.
Если вы копаетесь в файловых форматах, анализируете прошивки или отлаживаете протоколы, проверьте, насколько здесь удобнее классического hex-редактора. Упор на визуальную подачу данных может снизить усталость при долгих сессиях. Исходники лежат на GitHub, можно скачать и потрогать руками.
ImHex нацелен на реверс-инженеров и программистов, которым приходится разглядывать бинарники допоздна. Главная заявка: не только удобная работа с байтами, но и интерфейс, который не выжигает сетчатку к 3 часам ночи.
Если вы копаетесь в файловых форматах, анализируете прошивки или отлаживаете протоколы, проверьте, насколько здесь удобнее классического hex-редактора. Упор на визуальную подачу данных может снизить усталость при долгих сессиях. Исходники лежат на GitHub, можно скачать и потрогать руками.
❤4
50 сайтов с примерами кода на C/C++ — куда смотреть после синтаксиса
После
Не нужно проходить всё сразу. Выберите один ресурс, найдите там простой пример, скопируйте его в редактор или онлайн-компилятор, запустите, а потом измените одно число или условие и посмотрите, что изменится. Так разрозненные темы вроде переменных, циклов и функций собираются в работающую программу.
Подборка с сайтами и примерами поможет найти точку, с которой удобно начать.
После
input, условий и циклов у многих новичков затык: а что теперь писать? В подборке на MYCPLUS собраны 50 сайтов и страниц с готовым кодом на C и C++: от справочников и туториалов до готовых кусков кода и онлайн-компиляторов.Не нужно проходить всё сразу. Выберите один ресурс, найдите там простой пример, скопируйте его в редактор или онлайн-компилятор, запустите, а потом измените одно число или условие и посмотрите, что изменится. Так разрозненные темы вроде переменных, циклов и функций собираются в работающую программу.
Подборка с сайтами и примерами поможет найти точку, с которой удобно начать.
❤1
Flexbox: как CSS сам подстраивает форму под экран
Когда вы только начинаете верстать, блоки ведут себя непредсказуемо. Flexbox — это режим раскладки в CSS, который помогает элементам делить пространство и выстраиваться в ряд или колонку.
В статье Josh Comeau разбирают пример формы с именем, email и кнопкой. Без специальных правил для разных ширин экрана она сама перестраивается: на широком поля выстраиваются в строку, на узком переносятся. Секрет в трёх свойствах:
Прошли базовый HTML и CSS и хотите, чтобы страницы не «ломались» при изменении ширины? Поэкспериментируйте с демками в гайде: поменяйте цифры в примере и посмотрите, как меняется раскладка.
Когда вы только начинаете верстать, блоки ведут себя непредсказуемо. Flexbox — это режим раскладки в CSS, который помогает элементам делить пространство и выстраиваться в ряд или колонку.
В статье Josh Comeau разбирают пример формы с именем, email и кнопкой. Без специальных правил для разных ширин экрана она сама перестраивается: на широком поля выстраиваются в строку, на узком переносятся. Секрет в трёх свойствах:
flex-grow решает, кто займёт больше места, flex-basis задаёт стартовую ширину, а flex-wrap разрешает перенос.Прошли базовый HTML и CSS и хотите, чтобы страницы не «ломались» при изменении ширины? Поэкспериментируйте с демками в гайде: поменяйте цифры в примере и посмотрите, как меняется раскладка.
❤1
Fetch API в JavaScript: как браузер просит данные у сервера
Когда вы учите JS, наступает момент, когда хочется не просто менять страницу, а получать реальные данные и обрабатывать их. Fetch API — это встроенный способ браузера (и Node.js 18+) отправить сетевой запрос и получить ответ.
Главная ловушка для новичка:
Чтобы закрепить, откройте консоль браузера, сделайте простой запрос на получение данных к любому открытому API и выведите результат. Подробнее — в туториале DigitalOcean.
Когда вы учите JS, наступает момент, когда хочется не просто менять страницу, а получать реальные данные и обрабатывать их. Fetch API — это встроенный способ браузера (и Node.js 18+) отправить сетевой запрос и получить ответ.
Главная ловушка для новичка:
fetch() не считает ошибку 404 или 500 настоящей ошибкой. Запрос всё равно выполнится, и его нужно проверять через response.ok или response.status. Иначе программа молча проглотит битый ответ.Чтобы закрепить, откройте консоль браузера, сделайте простой запрос на получение данных к любому открытому API и выведите результат. Подробнее — в туториале DigitalOcean.
Digitalocean
How to Use the JavaScript Fetch API | DigitalOcean
Learn the JavaScript Fetch API for GET and POST requests with error handling, async/await, AbortController, and tested examples.
❤1💯1
Forwarded from Веб-страница
Почему CSS @function ведёт себя как замыкание в JS
Если вы проектируете компоненты или библиотеки,
Обычно
Я бы сохранил паттерн для дизайн-систем: задаёте
Если вы проектируете компоненты или библиотеки,
@function может упростить API: кастомная CSS-функция видит переменные не только там, где определена, но и в точке вызова. Это похоже на замыкание — переменные из контекста вызова становятся доступны внутри функции.Обычно
--var наследуется вниз по DOM, а @function ломает эту привычку: при вызове она получает доступ ко всем переменным текущего контекста. В статье разбирают, как использовать это для тем, размеров и палитр без лишних аргументов.Я бы сохранил паттерн для дизайн-систем: задаёте
--theme и --size-1 на корне, а функция сама подхватывает их там, где вызвана. Меньше дублирования и меньше шанса забыть пробросить значение в параметры.❤1👍1
Как переключаться между задачами в Git без stash
Представьте: вы пишете код новой фичи, и тут прилетает срочный баг. Обычно приходится прятать текущие правки через
Команда
Попробуйте в учебном репозитории: создайте worktree для ветки
Представьте: вы пишете код новой фичи, и тут прилетает срочный баг. Обычно приходится прятать текущие правки через
git stash, переключать ветку, а потом возвращаться. Worktree в Git решает это проще: отдельная рабочая копия репозитория в соседней папке, где можно сразу работать над другой веткой.Команда
git worktree add создаёт такую папку из нужной ветки. Текущий проект остаётся нетронутым, а рядом появляется ещё одна копия для срочной задачи. Особенно удобно, когда в ветках разные зависимости.Попробуйте в учебном репозитории: создайте worktree для ветки
hotfix и переключайтесь между папками. В блоге GitHub разбирают, почему эта старая фича внезапно стала популярной.❤1👍1
HTML научат обновлять часть страницы без JavaScript
Если вы учите веб-разработку, полезно понимать, как браузер получает страницу кусками. Сервер может сначала отправить шапку, потом боковое меню, а потом основной текст. Но если один блок тормозит на сервере, всё остальное ждёт его в очереди.
Сейчас это обходят фреймворки и библиотеки вроде HTMX с помощью JavaScript. Предложение в Chrome добавляет в сам HTML маркеры-заполнители: сервер сначала говорит «сюда потом придёт контент», а когда он готов, браузер подставляет его в нужное место — без скриптов.
Это не готово для настоящих сайтов, но помогает понять потоковую загрузку и частичные обновления изнутри. Разбор с примерами синтаксиса: откройте статью и найдите маркер-заполнитель — увидите, как HTML делится на «сейчас» и «потом».
Если вы учите веб-разработку, полезно понимать, как браузер получает страницу кусками. Сервер может сначала отправить шапку, потом боковое меню, а потом основной текст. Но если один блок тормозит на сервере, всё остальное ждёт его в очереди.
Сейчас это обходят фреймворки и библиотеки вроде HTMX с помощью JavaScript. Предложение в Chrome добавляет в сам HTML маркеры-заполнители: сервер сначала говорит «сюда потом придёт контент», а когда он готов, браузер подставляет его в нужное место — без скриптов.
Это не готово для настоящих сайтов, но помогает понять потоковую загрузку и частичные обновления изнутри. Разбор с примерами синтаксиса: откройте статью и найдите маркер-заполнитель — увидите, как HTML делится на «сейчас» и «потом».
❤2🔥1
Как не превратить ИИ-код в лапшу
Когда ИИ пишет код за вас, легко потерять контроль: через пару правок файл разрастается, старые фичи ломаются, а разобраться в своём же проекте становится страшно. Биргитта Бёкелер из Thoughtworks рассказывает, как это ловить рано с помощью сенсоров поддерживаемости.
Проще всего начать со статического анализа. Это программа, которая проверяет ваш код до запуска и подсвечивает проблемы: слишком длинные функции, неиспользуемые импорты, нарушение зависимостей. Включите линтер в редакторе и смотрите на его замечания как на подсказки, а не как на оценки.
Разбор других сенсоров, от правил зависимостей до мутационного тестирования, поможет понять, как держать код под контролем, даже если писать его помогает ИИ.
Когда ИИ пишет код за вас, легко потерять контроль: через пару правок файл разрастается, старые фичи ломаются, а разобраться в своём же проекте становится страшно. Биргитта Бёкелер из Thoughtworks рассказывает, как это ловить рано с помощью сенсоров поддерживаемости.
Проще всего начать со статического анализа. Это программа, которая проверяет ваш код до запуска и подсвечивает проблемы: слишком длинные функции, неиспользуемые импорты, нарушение зависимостей. Включите линтер в редакторе и смотрите на его замечания как на подсказки, а не как на оценки.
Разбор других сенсоров, от правил зависимостей до мутационного тестирования, поможет понять, как держать код под контролем, даже если писать его помогает ИИ.
❤1
Как GitHub Copilot помогает агентам следить за вашими задачами
Когда вы учитесь программировать, важные задачи часто теряются между уроками, доками и уведомлениями. Автор из GitHub рассказал, как у него была похожая проблема на работе, и как он с ней справился.
Он начал использовать автоматизации в приложении GitHub Copilot. Это не просто чат: агенты (программы, которые действуют за вас) подключаются к календарю, почте, сообщениям и репозиториям, чтобы каждый день подсказывать, на чём сфокусироваться. Вы задаёте правила один раз, а они работают сами.
Если уже пробуете Copilot, скачайте отдельное десктоп-приложение и настройте одну автоматизацию: пусть агент утром покажет, какие задачи и пул-реквесты (issues и PR) ждут вашего внимания. Так вы увидите, как ИИ-агент действует не по одному запросу к чату, а по постоянному заданию.
Когда вы учитесь программировать, важные задачи часто теряются между уроками, доками и уведомлениями. Автор из GitHub рассказал, как у него была похожая проблема на работе, и как он с ней справился.
Он начал использовать автоматизации в приложении GitHub Copilot. Это не просто чат: агенты (программы, которые действуют за вас) подключаются к календарю, почте, сообщениям и репозиториям, чтобы каждый день подсказывать, на чём сфокусироваться. Вы задаёте правила один раз, а они работают сами.
Если уже пробуете Copilot, скачайте отдельное десктоп-приложение и настройте одну автоматизацию: пусть агент утром покажет, какие задачи и пул-реквесты (issues и PR) ждут вашего внимания. Так вы увидите, как ИИ-агент действует не по одному запросу к чату, а по постоянному заданию.
❤1
Forwarded from Zen of Python
time.sleep() — не везде правильный способ подождатьВ синхронном скрипте
time.sleep(2.5) идиоматичен: пауза в текущем потоке, никаких сюрпризов. Но в отдельном потоке ту же паузу не прервать по сигналу: лучше threading.Event().wait(), который просыпается по event.set().В асинхронном коде
time.sleep() заморозит весь event loop, потому что корутина не уступает управление. Правильный инструмент: await asyncio.sleep(), он приостанавливает только текущую задачу. В гайде ещё про декоратор retry, rate limit и паузы в GUI через
root.after().❤1
Один невидимый символ в терминале может сломать ссылку
Автор маленького сокращателя ссылок заметил, что друзьям приходят битые адреса на файлы из облачного хранилища S3. Дело оказалось в знаке перевода строки, который утилита
Выход — флаг
Если только начинаете работать с командной строкой, почитайте разбор, это экономит часы отладки.
Автор маленького сокращателя ссылок заметил, что друзьям приходят битые адреса на файлы из облачного хранилища S3. Дело оказалось в знаке перевода строки, который утилита
jq добавляла к результату, а терминальный мессенджер gurk переводил в букву j на конце URL.Выход — флаг
jq --join-output (или -j): он убирает завершающий перевод строки, и скопированный адрес получается чистым. Это хороший повод проверить свои скрипты в терминале, потому что неочевидные символы в выводе часто ломают то, что вы передаёте дальше.Если только начинаете работать с командной строкой, почитайте разбор, это экономит часы отладки.
napkins.mtmn.name
how a stray "j" ruined my evening — napkins
❤1
Соберите свой USB-WiFi из Raspberry Pi Pico и поймите, как железо разговаривает с компьютером
Если после базового Python хочется потрогать, как код превращается в физическое действие, вот проект, который даёт такой шаг. Автор baiyibai выложил на GitLab репозиторий pico-usb-wifi: он превращает недорогую плату Raspberry Pi Pico в USB WiFi-адаптер.
Это хороший способ увидеть, как микроконтроллер подключается к компьютеру по USB и выходит в сеть. Не нужно сразу разбираться во всех протоколах — можно начать с прошивки, проверить, что система видит устройство, а потом уже копать глубже. README и CHANGELOG в репозитории помогут не потеряться в первых шагах.
Сначала попробуйте просто собрать и запустить. Когда получится — станет понятнее, зачем изучать работу с периферией и низкоуровневый ввод-вывод.
Если после базового Python хочется потрогать, как код превращается в физическое действие, вот проект, который даёт такой шаг. Автор baiyibai выложил на GitLab репозиторий pico-usb-wifi: он превращает недорогую плату Raspberry Pi Pico в USB WiFi-адаптер.
Это хороший способ увидеть, как микроконтроллер подключается к компьютеру по USB и выходит в сеть. Не нужно сразу разбираться во всех протоколах — можно начать с прошивки, проверить, что система видит устройство, а потом уже копать глубже. README и CHANGELOG в репозитории помогут не потеряться в первых шагах.
Сначала попробуйте просто собрать и запустить. Когда получится — станет понятнее, зачем изучать работу с периферией и низкоуровневый ввод-вывод.
❤2
Каким может быть роадмап для QA в 2026 году?
Пять лет назад тестирование начиналось с ручного: чек-листы, клики, результат. Сегодня в тех же вакансиях — Kafka, Kubernetes и автотесты на Java. «Вкатиться через мануальное» больше не работает, но что же делать? Собирать базу, с которой можно будет работать и двигаться дальше!
Что по-настоящему пригодится:
— Архитектура микросервисов;
— HTTP/REST, SQL и брокеры сообщений;
— Чтение логов;
— Язык программирования для автоматизации;
— Инженерное мышление вместо «кнопка не работает».
Подробнее обо всём в новой статье на Tproger.
Пять лет назад тестирование начиналось с ручного: чек-листы, клики, результат. Сегодня в тех же вакансиях — Kafka, Kubernetes и автотесты на Java. «Вкатиться через мануальное» больше не работает, но что же делать? Собирать базу, с которой можно будет работать и двигаться дальше!
Что по-настоящему пригодится:
— Архитектура микросервисов;
— HTTP/REST, SQL и брокеры сообщений;
— Чтение логов;
— Язык программирования для автоматизации;
— Инженерное мышление вместо «кнопка не работает».
Подробнее обо всём в новой статье на Tproger.
❤2