Хекслет - школа программирования

Плавные переходы по страницам (View Transition)

В браузерах относительно недавно появился механизм который называется View Transition API. Эта штука, которая позволяет сделать переход между страницами плавными, а не как это происходит обычно, когда одна страница пропадает, дальше белый экран (медленно или быстро) и дальше новая страница. Причем это работает как для SPA так и MPA приложений (классический серверный рендеринг).

А зачем вообще для этого отдельное API? Разве нельзя сделать всё то же самое на чистом CSS и JavaScript?
Можно. Так и делали раньше. Но на практике это быстро превращается в сложный и хрупкий код.

Чтобы реализовать даже простой переход в SPA, приходится вручную:

— синхронизировать старое и новое состояние интерфейса
— управлять их одновременным присутствием в DOM
— анимировать оба состояния так, чтобы переход выглядел естественно
— блокировать взаимодействие пользователя на время анимации
— корректно убирать старый контент после завершения
И это только базовый сценарий. Дальше начинаются проблемы с доступностью: сбивается фокус, ломается позиция чтения

С MPA всё ещё хуже, там такие переходы в принципе были недостижимы, потому что браузер просто перезагружает страницу.

View Transition API закрывает эти проблемы на уровне браузера. Он берёт на себя синхронизацию состояний, управление DOM и анимации, позволяя описывать переходы декларативно и без лишней ручной логики.

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

Собственно это мы и сделали на Хекслете. Если сейчас вы походите по страницам, то заметите как плавно работает смена страниц. Старая исчезает и появляется новая. Вызывает немного странные ощущения, но вроде бы всем понравилось. Кстати, нам даже не пришлось для этого писать код, потому что эта фича заехала нам бесплатно вместе с обновлением Inertia.js.

Приятно что мы стали одними из первых во всем интернете 🙂

Как вам такие переходы?

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

3 days ago | [YT] | 8

Хекслет - школа программирования

После года рефакторинга, мы переехали на Inertia.js и попрощались Bootstrap

Ну вот и закончился мегарефакторинг, в рамках которого мы переезжали с классической серверной шаблонизации на React SPA, но не через api + фронтенд стейт + клиентский роутинг. Мы взяли тогда еще набирающую популярность Inertia.js, которая работает по похожему принципу как next.js (серверный роутинг, отсутствие api и стейта на клиенте), но где в качестве бекенда выступает фреймворк на любом языке.

Жизнь показала, что мы сделали правильный выбор и с тех пор инерция не только стала популярнее и пошла по всем языкам, но и недавно ребята выпустили третью версию, на которую мы оперативно обновились. Если вы походите по сайту Хекслета, то заметите как плавно переключаются страницы, это они включили View Transition.

Одновременно с этим мы меняли Bootstrap на Mantine. Бутстрап служил нам верой и правдой больше 10 лет, но в какой-то момент он начал нас тормозить. И дело не только в новых подходах, а в том, что больше не хотелось работать на уровне верстки. По настоящему эффективность повышают готовые библиотеки компонентов на React (любом другом фреймворке), когда мы получаем не только внешний вид, но и готовую функциональность из коробки. Взять хотя бы тот же грид, сделать это самому со всеми фишками типа фильтров сортировок инлайн редактирований это еще тот челендж.

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

Планируя переход мы сразу целились в максимальную типизацию, поэтому везде ts и mantine, который очень этому способствует (вместо классов props). Плюс сюда же типизированный i18next.

Такое разделение еще навело порядок в беке, потому что вместо кода в шаблонах, все теперь собрано в DTO, чем явно проще управлять и рефакторить. Люди которые всю жизнь работают через апи надо мной посмеются, но вот да, если у вас шаблоны это тоже код на сервере, то там работают без DTO.

В общем я немного выдыхаю и перестаю херачить код как не в себя. Теперь наводим красоту, правим косяки и фокусируемся на контенте. Давно я серьезно не махал шашками, а тут столько курсов надо выпустить :)

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

1 week ago | [YT] | 12

Хекслет - школа программирования

Обновленный редактор Хекслета

На этих выходных, мы выпустили новую версию редактора, которая значительно влияет удобство работы с ним, а так же пачку небольших улучшений. И так подробности =>

Загрузка

Редактор Хекслета, это клиент-серверное приложение, поэтому недостаточно просто показать фронтовую часть. Для нее нужно погрузить бекенд, а это занимает от 10 до 30 секунд. Связано это с тем, что бекенд у практик Хекслета спроектирован так, чтобы стартовать задачи почти любой сложности, поэтому на фоне легко может подниматься база данных, веб-сервера и все остальное, что было заложено в конкретное задание. Поэтому с точки зрения пользователя это выглядело так, он стартовал практику и ждал. Нам даже пришлось написать на этот этап текст, где мы объясняли почему это происходит не моментально (в реальности все еще чуть сложнее, там был iframe и загрузка фронта с бекенда).

Можно ли сделать эту процедуру быстрее? Если сильно упереться может быть немного да, но кардинально проблема так не решится. Поэтому мы пошли другим путем. Фронтовая часть редактора грузится сразу и дальше входит в режим ожидания бекенда, но уже в фоне.

С одной стороны, это все равно не дает возможность начать работать сразу, но с другой, перед написанием кода всегда требуется прочитать задание и это всегда занимает больше 10 секунд, а иногда и минуты, чтобы разобраться (если задание сложное). В итоге задание видно сразу и пока вы его читаете, редактор уже подключился и готов к работе.

Горячие клавиши

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

Тота ИИ

Чат с ассистентом для работы над практиками мы добавили довольно давно, но только сейчас появилась интеграция с редактором и теперь Тота знает про запуски проверок, про то что сработало и что нет. Больше не надо копировать контекст в чат!

Поиск файлов

Если в задании много файлов, то теперь можно не рыскать по дереву файлов, а воспользоваться fuzzy search прямо как во взрослых редакторах. Для этого надо нажать на кнопку поиска слева вверху либо использовать комбо ctrl+p

Разное

И другие полезняхи, которые мы завезли:

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

Сейчас мы сфокусировались на стабильности. Добиваемся того, чтобы реконнектов было меньше, а если и были разрывы, то оно само восстанавливалось. Сейчас это происходит не всегда. Отдельно работаем над улучшением механики сохранения решений, пока она не очевидна новичкам. Ну и планируем добавить начальный тур для новичков. Спасибо за внимание, оставайтесь с нами :)

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

1 week ago | [YT] | 24

Хекслет - школа программирования

Чай налит, кот спит, ноутбук заряжен – вы тоже. К работе готов!
Но только вы занесли руку над клавиатурой… Кто-то написал в общий чат. Через минуту еще пять сообщений, потом обсуждение в соседнем канале, а потом коллега упомянул вас в комментарии. Проходит час, а вы так и не написали ни строчки – только читали, отвечали, ставили реакции.

Корпоративные чаты – не зло, но если не научиться с ними работать, они съедают весь день. Вот несколько правил, которые спасают наше внимание (и надеемся, пригодятся вам).

Разложите каналы по полочкам
Не все сообщения одинаково важны. Есть чаты, где решаются срочные вопросы (ваш отдел или проектная группа). Есть информационные – с объявлениями, и есть флудильни, где коллеги делятся мемами. Читать их в реальном времени совсем не обязательно. Научитесь игнорировать второстепенное без угрызений совести.

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

Смотрите на теги, а не на ленту
В больших чатах сотни сообщений в день. Читать всё невозможно, да и не нужно. Научитесь фильтровать: сначала просматривайте личные упоминания (@ваше_имя), потом ответы на ваши комментарии, потом задачи с дедлайнами. Остальное – фоновый шум. Если будет что-то действительно важное, вас обязательно тегнут.

Не храните важное в переписке, умоляем!
Обсудили задачу в чате, решили как делать и закрыли окно. А через неделю коллега спрашивает: «А почему ты сделал именно так? Мы же договаривались иначе!». И придется листать сотни сообщений. Чтобы этого избежать, договоренности сразу переносите в задачу (Jira, Trello, Notion) или в документ. Мы, кстати, недавно писали об этом пост.

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

Учитесь управлять своим вниманием, иначе им станут управлять уведомления. И тогда вечером возникает знакомое чувство: «Я целый день что-то делал, но ничего не сделал». А еще это может привести к выгоранию, не забывайте.

Берегите свою менталочку и делитесь в комментариях лайфхаками по управлению вниманием ⬇️

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

1 week ago | [YT] | 8

Хекслет - школа программирования

Программисты, признавайтесь:

Какая самая нелепая, смешная или абсурдная переменная встречалась вам в коде?

Может, сами так называли когда-то — или видели у коллег?

Пишите свои варианты в комментариях! Можно с небольшой историей — как вообще до такого дошли 🤣

2 weeks ago | [YT] | 6

Хекслет - школа программирования

Обычно мотивация уходит не на пустом месте.
Причины всегда лежат в одной из трех плоскостей: вы выжаты как лимон, вы не видите результата или вы забыли, ради чего все это затевали.
Поэтому, прежде чем бросать учебу, сначала проверьте ресурс.
Если вы спите по 4 часа, не выходите из дома и живете на кофеине, никакая сила воли не заставит мозг учиться, потому что он находится в режиме выживания. Иногда единственное работающее решение – лечь спать пораньше, выключить уведомления и погулять час в парке. Отдохнувший мозг соображает быстрее, а код перестает вгонять в отчаяние.
Также не забывайте напоминать себе, что вы движетесь. Хуже всего, когда вы учите-учите, а конца и края не видно. Не удивительно, что в таких условиях падает мотивация, ведь прогресс незаметен. Выход: сделайте что-то маленькое, но завершенное. Допишите ту самую функцию, которая висела три дня. Закройте старый баг. Решите пять задач на Codewars подряд. Ощущение «сделано» перезапускает интерес лучше любых мотивационных речей.

А бывает так, что мы ставим себе задачи, от которых трещит планка, например, «выучить Java за месяц». Звучит как приговор, согласны? Разбейте цель на микро-шаги. Не «выучить backend», а «сегодня разобраться, как работают middleware в Express». Когда задача влезает в голову, за нее проще взяться.

Вернитесь к истокам, а именно: сядьте и честно спросите себя, зачем вы вообще в этом? Ради денег? Ради переезда? Чтобы не работать на дядю? Когда большая цель заслоняется рутиной, мотивация испаряется. Напомните себе, что будет через год, если вы продолжите. Обычно этого хватает, чтобы допить чай и открыть IDE.

И главный секрет 👇

Мотивация не приходит по щелчку, а является следствием действия.
Если вы начнете делать хотя бы по чуть-чуть, энергия появится в процессе. Помните, как нам говорили в детстве? «Аппетит приходит во время еды». Возможно, не всем подходит такой подход к пищевым привычкам, но вот к учебе – совершенно точно.

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

2 weeks ago | [YT] | 36

Хекслет - школа программирования

Когда вы только приходите в новую компанию, кажется, что все вокруг ждут от вас чего-то невероятного. Особенно если это ваша первая работа.

Без лишних предисловий: идеального кода и молниеносной скорости в первый месяц от вас никто не ждет. Наоборот.

Вас взяли не для того, чтобы вы совершили подвиг, а чтобы вы адаптировались. И вот короткий список того, чего от вас точно не ждут в первые 30 дней.

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

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

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

Кода без единой ошибки
Ошибки будут. Серьезно, смиритесь. Если вы не ошибаетесь, вы не учитесь. Вопрос к вам возникнет только в одном случае: если вы будете наступать на одни и те же грабли по десять раз. Если вы делаете выводы и больше не пишете git push --force в main, значит, вы молодец.

Революций на пустом месте
Фраза «ребята, да тут все не так, давайте перепишем с нуля на новом стеке» в первый месяц – верный способ прослыть выскочкой. Система работает, она приносит деньги. Сначала разберитесь, почему она такая. А потом, когда поймете боль команды, можно и предлагать.

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

Как у вас проходил первый месяц? Делитесь опытом в комментариях 🙌

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

2 weeks ago | [YT] | 22

Хекслет - школа программирования

💡 Вспоминаем первые фейлы на работе!

Только начинаете путь в программировании? Не переживайте, ошибки делают все: не тот коммит, не туда смержили, или вообще — “упал прод”. На ошибках учатся! 🙃

А какой был ваш первый фейл на работе?

Давайте соберём коллекцию самых забавных (и полезных!) историй в комментариях

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

2 weeks ago | [YT] | 4

Хекслет - школа программирования

Знаете, из-за чего чаще всего выгорают новички? Вовсе не от объема работы.
А выгорают они из-за ожиданий, которые, как правило, сильно расходятся с реальностью.

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

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

Считайте свое время честно
Типичная ошибка начинашки: «Буду учиться по 4 часа каждый день». А по факту после работы/учебы максимум на два часа концентрации и хватает. И это нормально! Планируйте от реальности, а не от амбиций. Два часа в день – уже отлично.

Дробите цель на конкретные проекты
«Изучить Python» – это бесконечность, от которой опускаются руки. А вот «написать телеграм-бота» или «сделать REST API с авторизацией» – уже понятный и измеримый результат. Когда видишь конечную точку, мозг не паникует, запомните это.

Оставляйте воздух в расписании
Если вы расписали день поминутно, значит, уже заложили провал. Всегда оставляйте запас на отладку, усталость, внезапные дела. Идеально, если запланируете только 60% времени. Тогда даже если что-то пойдет не так, день не будет казаться потерянным.

Думайте неделями, а не годами
Горизонт «через год» мозг не воспринимает – слишком далеко. Разбивайте путь на недельные циклы. К воскресенью должен быть четкий результат и понимание, что получилось, а что – нет. Это дает ощущение движения.

Учитывайте когнитивную нагрузку
Невозможно четыре часа подряд впитывать новое. Чередуйте 🙌Немного теории, сразу практика, потом закрепление. Если весь день долбить только новое, к вечеру будет каша и отвращение.

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

Не сравнивайте себя с другими
Открываете соцсети и видите пост: «Я за три месяца стал джуном». Но вы же понимаете, что за этими словами часто скрыт чужой бэкграунд, свободное время и контекст, которых у вас нет. Не забывайте, что у каждого свой темп, а те результаты, что бросаются на вас из каждого утюга – фасад, редкой имеющий прямое отношение к реальному положению вещей.

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

Зафиксируйте себе где-то и повесьте на видное место: стабильность всегда выигрывает у рывка. А реалистичные цели не показатель отказа от мечты, а умение соотносить амбиции с реальными ресурсами. И тогда вы точно не перегорите еще на старте. Удачи!

Telegram: t.me/hexlet_ru | YouTube: youtube.com/@HexletOrg/ | Сообщество: t.me/hexletcommunity/

2 weeks ago | [YT] | 30

Хекслет - школа программирования

Как начать использовать агентов бесплатно

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

Прокаченные модели с условно-бесплатным доступом

Copilot. В первую очередь бесплатно (ограниченно) он дает автокомплиты и nes. Если вдруг вы еще не пользуетесь, то хотя бы попробуйте. Поставьте в редактор как расширение и подрубите базовую версию.

Gemini Cli. Free tier: 60 requests/min and 1,000 requests/day with personal Google account.

Не знаю как их пропустил изначально, но у этого агента 100 тыщ старов на гитхабе. Вчера попробовал с его помощью реализовать пару задач и мне прямо зашло. Тут мы получаем доступ к крутой модели условно бесплатно. Без vpn в рф вроде не работает

Qwen Code CLI. ~1000–2000 запросов в день через OAuth (зависит от региона/лимитов). Дает доступы к своим моделям (qwen-x)

Kilo Code. Еще один агент, который дает: "Get $20 in bonus credits when you top-up for the first time Credits can be used with 500+ models like Gemini 3.1 Pro, Claude 4.6 Sonnet & Opus, and GPT-5.2" Выглядит очень вкусно.

SourceCraft Coding Agent. Это агент разрабатываемый яндексом у которого сейчас под капотом DeepSeek есть бесплатный тариф и очень дешевый платный. Если вы помните, руководитель этого проекта Дмитрий Иванов был пару раз у меня на подкасте. Ребята общеают какие-то мегаапдейты скоро, будем посмотреть. А еще у нас запланирован с Димой вебинар где мы будем кодить с агентами в районе мая.

Бесплатные модели по проще

Их довольно много, но насколько они действительно справляются с задачами это вопрос. Как минимум, всегда можно разграничивать, более крутые модели для планирования, простые (включая бесплатные) для реализации.

OpenCode Free Models. На выбор дают (mimo v2 pro, minimax m2.5, nemotron 3 super, big pickle).

По крутости не скажу, сажусь за них буквально на этой неделе. Если у вас есть опыт, поделитесь плс.

В целом бесплатный список моделей можно посмотреть на сайте OpenRouter. Дальше регаемся и подключаем через OpenCode или плагин к редактору.

Доступное из платного

Самый вкусный тариф из платных пожалуй дает OpenCode go. Первый месяц 5$, потом 10$.

Напомню что курс стартует 30 марта. А завтра я провожу вебинар про агентскую разработку. Зарегаться можно по ссылке: special.hexlet.io/ai-for-developers-2026 Буду ждать 🙂

3 weeks ago | [YT] | 2