Первый сайт, где HTML, CSS и JavaScript собираются вместе

Есть момент в обучении, когда теги вроде понятны, стили тоже, но всё ещё непонятно, как из этого получается настоящая страница. Для такого шага хорошо подходит модуль Microsoft Learn: вы собираете небольшой веб-проект в VS Code, по ходу делаете HTML-страницу, подключаете CSS-файл со стилями, добавляете JavaScript для переключения темы и проверяете результат через инструменты разработчика в браузере.

Нормальная тренировка, если хочется не просто выучить три слова — HTML, CSS и JS, — а увидеть, как они работают вместе. Модуль короткий и идёт по шагам, так что его реально пройти за один подход.

#веб

Генератор историй, который показывает, зачем нужны массивы и строки

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

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

Мне нравится такой формат: результат смешной и простой, но по дороге становится видно, как JavaScript оживляет страницу. Задание можно пройти прямо как мини-проект после базовых переменных, строк и массивов.

#javascript

Тренажёр безопасности кода, который запускается в браузере

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

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

Попробуйте Secure Code Game — уровни идут от простого к сложному, а для старта хватит любопытства: опыт в ИИ или программировании даже не обязателен.

Причём им сделана задняя часть, потому что он решил не тянуть легаси, а сделать нормально

Singleton в Spring не спасает от гонок в коде

Есть неприятная ловушка для тех, кто только изучает Spring: слово singleton звучит так, будто объект один, значит с ним всё безопасно. На деле Spring просто создаёт один bean на приложение. Если несколько запросов одновременно меняют поля этого объекта, они всё равно могут перетереть данные друг друга.

В разборе на DEV показывают основные scope’ы: singleton, prototype, request и session. Scope — это правило, как долго живёт объект и когда Spring создаёт новый экземпляр. Самая полезная часть здесь не в заучивании названий, а в понимании простого правила: сервисы лучше держать без состояния, а данные запроса хранить отдельно.

Хороший материал, если уже трогали Spring и хотите понять, почему «работает локально» иногда разваливается под нагрузкой.

#spring #java

Рисовалка в браузере, которая учит управлять страницей через JavaScript

У The Odin Project есть хороший учебный проект: собрать Etch-a-Sketch прямо в браузере. Это такая простая рисовалка: наводите курсор на клетки, и они закрашиваются.

Ценность не в самой игрушке, а в том, что вы руками собираете маленький интерфейс: создаёте сетку из div’ов через JavaScript, раскладываете её с помощью Flexbox, вешаете события наведения, добавляете кнопку для нового размера поля и проверяете ввод, чтобы пользователь не сломал страницу огромной сеткой.

Такие проекты хорошо связывают HTML, CSS и JS в одну понятную штуку. После базовых упражнений это как раз тот шаг, где становится видно, зачем нужны события, DOM и DevTools. Задание можно пройти как есть, а потом добавить случайные цвета, очистку поля или постепенное затемнение клеток.

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

#веб #javascript

В JavaScript легко привыкнуть, что Number подходит для любых чисел: возраст, цена, счётчик, ID — всё вроде работает одинаково. А потом внезапно оказывается, что 9007199254740991 + 2 может дать совсем не тот результат, который вы ожидаете.

В разборе freeCodeCamp объясняют safe integer limit — границу, до которой JavaScript хранит целые числа точно. Дальше начинаются потери точности: большие ID, финансовые значения и счётчики могут незаметно искажаться. Для таких случаев есть BigInt — отдельный тип для больших целых чисел.

Можете проверить это прямо в консоли браузера: Number.MAX_SAFE_INTEGER, Number.isSafeInteger() и пару сложений выше лимита.

#javascript

Лексер показывает, как программа начинает понимать ваш код

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

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

Подробнее в разборе.

Python-скрипт не обязан быть простынёй из команд сверху вниз

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

Real Python показывает, как постепенно привести скрипт к более взрослому виду: разнести импорты, вынести константы, добавить main(), использовать if __name__ == "__main__", принимать аргументы из командной строки и аккуратнее оформлять вывод.

Хороший следующий шаг после прочтения — взять свой старый скрипт и попытаться его декомпозировать. Хотя бы вынести настройки в константы, а основной запуск положить в main().

#python

Первый парсер, который достаёт данные с реальной страницы

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

В разборе freeCodeCamp это проходит пошагово: запросить HTML, разобрать его, выбрать данные по тегам/классам и сложить их в удобный вид. HTML здесь — разметка страницы, а парсер помогает достать из неё нужные куски.

Хороший следующий шаг: взять одну простую страницу с таблицей или списком и вытащить из неё 5–10 строк. Не весь интернет, а маленький понятный кусок.

Перед первым сайтом лучше выбрать не фреймворк, а задачу

Когда только начинаешь делать сайты, очень легко застрять в вопросе, что брать: React, Vue, Next или что-то ещё?. Но стек — это не отправная точка, а инструмент под уже понятную задачу.

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

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

Маленький конвертер текста, где 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. Добавите потом за минуту, когда это реально понадобится. Разбор Мэтта Смита поможет почувствовать разницу.