Маленький конвертер текста, где HTML, CSS и JS наконец работают вместе

Если уже знаете теги, стили и пару строк JavaScript, но не очень понятно, как собрать из этого готовую страницу, хороший следующий шаг — небольшой инструмент.

В разборе freeCodeCamp предлагают сделать case converter: поле ввода, кнопки для UPPERCASE, lowercase и Title Case, счётчик символов и слов, копирование текста в буфер и скачивание результата. Буфер обмена — это место, куда попадает текст после команды «копировать».

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

Первый scatter-график в Python без лишней математики

Диаграмма рассеивания помогает увидеть связь между двумя наборами чисел. Например, как время обучения связано с результатом теста или как цена товара зависит от рейтинга.

В разборе показывают plt.scatter() из Matplotlib: как передать значения по осям X и Y, поменять цвет и размер точек, добавить подписи и сетку. Matplotlib — популярная библиотека Python для графиков.

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

Как поставить боту потолок шагов, чтобы не сжечь бюджет

Если пишете бота, который сам решает, что делать дальше, начните с правила: у цикла обязательно должно быть условие выхода. Агентный цикл — когда модель внутри while True сама вызывает функции и решает, остановиться или идти дальше. Без условия выхода он не падает: делает то, что ему сказали, пока не кончатся деньги. В статье есть случаи, когда такие циклы сжигали десятки тысяч долларов за часы или дни.

Поэтому перед запуском задайте предохранитель: лимит шагов и счётчик. Проверяйте их до очередного вызова модели. Главное: заранее решить, что значит «готово».

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

Как большие сервисы переваривают миллионы операций в день

Свежий разбор freeCodeCamp объясняет масштабирование платформ без прыжка сразу в сложную теорию распределённых систем.

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

Как мы проскочили путь от первого iPhone и сложной разработки под мобильные устройства до эпохи ИИ? Что случилось и к чему это привело — в третьей части цикла об истории российского IT.

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

Приложений, проектов и стартапов становилось больше — начался расцвет российского IT. Но разработчиков не хватало, и на сцену вышли курсы, школы и онлайн-уроки. Желающих войти в профессию оказалось огромное количество, и рынок быстро перегрелся. Теперь новичков заменяет ИИ, а найти работу — задача со звёздочкой. Сегодня гонка за лучшими программистами превратилась в гонку ИИ-инфраструктур.

Так решения порождали новые проблемы, а российская IT-индустрия вышла на новый уровень сложности. Подробнее — в материале на Tproger.

Один качественный пул-реквест лучше сырых правок

Если пока неясно, что такое пул-реквест — коротко: это запрос влить ваши изменения в чужой проект. GitHub теперь позволяет владельцу проекта задать лимит: у внешнего автора одновременно не может быть открыто больше заданного числа таких запросов. Если превысил лимит, закрой один запрос или доведи его до принятия в проект, прежде чем открывать следующий. Черновики не считаются, доверенных авторов можно внести в исключения.

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

Почему код иногда ведёт себя странно: учимся думать как JS-движок

Когда вы только начинаете учить JavaScript, легко запомнить синтаксис и повторять за примерами. Но иногда код ведёт себя не так, как ожидается, и без понимания, как движок выполняет инструкции, разобраться трудно.

Сумит Саха на freeCodeCamp разбирает, как устроен JavaScript изнутри: область видимости переменных, замыкания, события и асинхронность. Не просто синтаксис, а то, что происходит за кулисами.

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

Как найти свою первую задачу в open source

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

Сложнее всего выбрать первый проект. GitHub предлагает начать с Copilot Chat: попросите подобрать проекты на знакомом языке с меткой good first issue. Эта метка означает, что задача подходит для новичков: её обычно можно решить, не разбираясь во всём коде сразу.

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

Если вы фронтендер и вам нужен бэкенд, этот разбор стоит сохранить

Автор собрал учебный Task Manager API на FastAPI так, чтобы за один проект пройти структуру, SQLAlchemy-модели, Pydantic-схемы, отдельный crud.py и маршруты через APIRouter. Получается 10 эндпоинтов для пользователей и задач — узнаваемая схема сервиса, а не игрушка.

Сохранил бы тем, кто переходит от учебных скриптов к полноценному API и хочет разложить файлы по полочкам. Разбор с кодом на GitHub.

#restapi #фронтенд #бэкенд

Почему async без await — плохая привычка

Кажется, что добавить async к функции «на всякий случай» безопасно. На деле вы меняете правила работы функции: она начинает возвращать не готовое значение, а Promise. Теперь каждый, кто её вызывает, обязан писать await, а значит, и его вызывающие тоже становятся async-функциями.

Так «асинхронность» расползается по коду заразно: вдруг половина проекта завёрнута в Promise, хотя реальной работы с сетью или файлами там нет. Читать такой код сложнее — непонятно, где настоящее ожидание ответа от сервера, а где просто возврат готовой переменной.

Правило проще, чем кажется: если внутри функции нет await, не пишите перед ней async. Добавите потом за минуту, когда это реально понадобится. Разбор Мэтта Смита поможет почувствовать разницу.

В Go нет классов и наследования — и это не баг, а особенность

Если вы только начинаете Go после Java или Python, первым делом удивит отсутствие классов. Вместо них структуры: обычный набор полей, к которому методы «прикрепляются» отдельно. Конструкторов тоже нет, поэтому обычно пишут вспомогательную функцию вроде NewOrder.

Главная ловушка для новичка: приёмник метода. (o Order) передаёт копию, а (o *Order) передаёт указатель и может менять оригинал. Если метод вроде MarkPaid не меняет статус, проверьте, не забыли ли звёздочку.

Наследования нет, поэтому «расширить» Order до PremiumOrder через extends не получится. Это заставляет думать не в категориях «родитель и ребёнок», а в категориях «данные + поведение». В статье автор разбирает, чем в Go заменяет наследование, и почему серьёзные проекты на этом строятся.

Import on interaction: не грузите всё сразу

Когда вы только учитесь делать сайты, хочется подключить все скрипты и виджеты сразу — чат, плеер, комментарии. Но браузер тратит силы на загрузку того, что пользователь ещё не открывал, и страница тормозит.

Паттерн import on interaction говорит: тяжёлые куски интерфейса можно подгружать в момент взаимодействия. Например, код видеоплеера загружается не при открытии страницы, а когда пользователь нажал «Play». То же работает с чатами и другими встраиваемыми виджетами.

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

Попробуйте в своём следующем учебном проекте отложить хотя бы один скрипт до клика.

Авторитетный и рекурсивный DNS: зачем фронтендеру это знать

Если вы меняли хостинг или прикручивали CDN, то видели, как новые записи встают не сразу — кто-то уже попадает на новый сервер, а кто-то ещё стучится в старый. Виноват не фреймворк, а разница между двумя ролями DNS.

Авторитетный сервер считается источником правды для вашего домена: именно он отвечает за его DNS-записи. Рекурсивный резолвер выступает посредником: ходит от корня к TLD, затем к авторитетному серверу и кеширует ответ на своей стороне. Именно кеш резолверов, а не «где-то там в интернете», создаёт задержку при propagation.

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

Почему в обучении коду стоит искать трение, а не избегать его

JetBrains Education пишет про friction-maxxing, то есть намеренный поиск трудностей в удобной жизни. В программировании это работает так же: гладкие уроки дают иллюзию знаний, а разбор ошибки самому даёт настоящее понимание.

Низкая проходимость вводных курсов объясняется не «неправильным» мозгом, а мифом, что код для избранных. Чем раньше вы перестанете обходить сложные места и начнёте докапываться до причины бага, тем быстрее вырастёт уверенность.

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

Почему одного Python на компьютере мало и как не запутаться в версиях

Кажется: установили Python и уже пишете код. Но через пару проектов возникает ситуация: одна программа требует одну версию Python, другая использует другую, а библиотеки из разных задач начинают мешать друг другу.

Тут на помощь приходят две вещи. В статье разбирается pyenv. Он позволяет переключать версии Python под каждый проект, не трогая системную установку. А виртуальное окружение: это изолированная «коробка» со своими пакетами: начните со встроенного venv и pip, а когда проекты подрастут, посмотрите на Poetry, Pipenv или uv.

Главное правило: не смешивайте всё в одну кучу. Отдельный проект — отдельное окружение.

ImHex — hex-редактор, который бережёт глаза при ночном реверсе

ImHex нацелен на реверс-инженеров и программистов, которым приходится разглядывать бинарники допоздна. Главная заявка: не только удобная работа с байтами, но и интерфейс, который не выжигает сетчатку к 3 часам ночи.

Если вы копаетесь в файловых форматах, анализируете прошивки или отлаживаете протоколы, проверьте, насколько здесь удобнее классического hex-редактора. Упор на визуальную подачу данных может снизить усталость при долгих сессиях. Исходники лежат на GitHub, можно скачать и потрогать руками.

50 сайтов с примерами кода на C/C++ — куда смотреть после синтаксиса

После input, условий и циклов у многих новичков затык: а что теперь писать? В подборке на MYCPLUS собраны 50 сайтов и страниц с готовым кодом на C и C++: от справочников и туториалов до готовых кусков кода и онлайн-компиляторов.

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

Подборка с сайтами и примерами поможет найти точку, с которой удобно начать.

Flexbox: как CSS сам подстраивает форму под экран

Когда вы только начинаете верстать, блоки ведут себя непредсказуемо. Flexbox — это режим раскладки в CSS, который помогает элементам делить пространство и выстраиваться в ряд или колонку.

В статье Josh Comeau разбирают пример формы с именем, email и кнопкой. Без специальных правил для разных ширин экрана она сама перестраивается: на широком поля выстраиваются в строку, на узком переносятся. Секрет в трёх свойствах: flex-grow решает, кто займёт больше места, flex-basis задаёт стартовую ширину, а flex-wrap разрешает перенос.

Прошли базовый HTML и CSS и хотите, чтобы страницы не «ломались» при изменении ширины? Поэкспериментируйте с демками в гайде: поменяйте цифры в примере и посмотрите, как меняется раскладка.

Fetch API в JavaScript: как браузер просит данные у сервера

Когда вы учите JS, наступает момент, когда хочется не просто менять страницу, а получать реальные данные и обрабатывать их. Fetch API — это встроенный способ браузера (и Node.js 18+) отправить сетевой запрос и получить ответ.

Главная ловушка для новичка: fetch() не считает ошибку 404 или 500 настоящей ошибкой. Запрос всё равно выполнится, и его нужно проверять через response.ok или response.status. Иначе программа молча проглотит битый ответ.

Чтобы закрепить, откройте консоль браузера, сделайте простой запрос на получение данных к любому открытому API и выведите результат. Подробнее — в туториале DigitalOcean.

Почему CSS @function ведёт себя как замыкание в JS

Если вы проектируете компоненты или библиотеки, @function может упростить API: кастомная CSS-функция видит переменные не только там, где определена, но и в точке вызова. Это похоже на замыкание — переменные из контекста вызова становятся доступны внутри функции.

Обычно --var наследуется вниз по DOM, а @function ломает эту привычку: при вызове она получает доступ ко всем переменным текущего контекста. В статье разбирают, как использовать это для тем, размеров и палитр без лишних аргументов.

Я бы сохранил паттерн для дизайн-систем: задаёте --theme и --size-1 на корне, а функция сама подхватывает их там, где вызвана. Меньше дублирования и меньше шанса забыть пробросить значение в параметры.

Как переключаться между задачами в Git без stash

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

Команда git worktree add создаёт такую папку из нужной ветки. Текущий проект остаётся нетронутым, а рядом появляется ещё одна копия для срочной задачи. Особенно удобно, когда в ветках разные зависимости.

Попробуйте в учебном репозитории: создайте worktree для ветки hotfix и переключайтесь между папками. В блоге GitHub разбирают, почему эта старая фича внезапно стала популярной.