Я фронтенд‑разработчик. Этой осенью сын пошёл в пятый класс, и с началом информатики я заметил, насколько медленно он печатает. Со смартфоном он на «ты», а за обычной клавиатурой теряется.
За компьютер мы его специально не усаживали: в начальной школе он пользовался им в основном для учебных тестов. Стало понятно, что пора подтягивать компьютерную грамотность. Решили начать с базового навыка — печати.
Мы попробовали несколько известных тренажёров: какие‑то я помнил сам, какие‑то нашли в поиске. Одни сыну не понравились визуально, в других мне не хватало понятной схемы пальцев и анализа слабых мест. Особенно хотелось, чтобы пользователь видел не только нужную клавишу, но и конкретный палец.
Так появилась идея сделать свой тренажёр. Заодно хотелось прощупать у сына интерес к IT, сделать современный интерактивный дизайн и добавить больше визуала прогресса и игровых элементов.
Понятно, что клавиатурных тренажёров уже много. Но мне было интересно не просто реализовать ещё один, а попробовать решить несколько задач: сделать понятную ребёнку схему пальцев с ярким интерактивом, научиться определять слабые места по реальным нажатиям и на их основе автоматически собирать персональные упражнения.
Чего мне не хватало в существующих тренажёрах
Делать обычный тренажёр, который просто выдаёт случайный текст или набор символов, не хотелось. Хотелось чем‑то выделиться. Подробного ресерча я не проводил, но в том, что мы пробовали, подобного не увидели.
Первая идея — анализ ошибок. Ты печатаешь, тебе показывают скорость и процент ошибок, и всё. А ведь по ошибкам понятно, что именно у человека не получается.
Вторая вытекает из первой: тренировка слабых мест. Если ты постоянно промахиваешься по «Ж» или путаешь сочетания правой руки, логично давать больше упражнений именно на них, а не гонять весь алфавит по кругу. Мне встречались «тренировки слабых мест», но это был просто линейный список упражнений без какого‑либо анализа.
Как это все реализовано
Стек обычный для меня: React + TypeScript и React Query на фронте, Node.js, PostgreSQL и Prisma на бэкенде.
Тренажёр запоминает каждое нажатие, не только ошибки: какую букву надо было нажать, какую нажали на самом деле и сколько на это ушло времени. Вся эта история сохраняется вместе с результатом урока, а считается всё уже в браузере.
Первая версия была совсем простой: процент ошибок по каждой букве за всё время. Но быстро вылезли две проблемы. Если ты когда‑то путался в букве, а потом научился, она всё равно числится «слабой». А если по букве было всего пять нажатий и две опечатки, она вдруг становится «самой худшей».
Поэтому сейчас логика такая:
-
по каждой букве смотрим только последние 60 нажатий;
-
старые ошибки со временем «остывают»: каждые две недели вес ошибки уменьшается вдвое;
-
если по букве пока мало данных, тренажёр ей меньше доверяет и не спешит записывать в проблемные;
-
если последние 20 нажатий прошли без ошибок, буква сразу считается выученной, и ждать, пока забудутся старые ошибки, не нужно.
Например, если «Ж» долго была проблемной, но последние 20 нажатий прошли без ошибок, старые промахи больше не держат её в списке слабых. Мне хотелось, чтобы тренажёр реагировал на то, чему человек уже научился, а не бесконечно помнил ошибки недельной давности.
Кроме отдельных букв тренажёр смотрит и на сочетания. Например, если после «О» ты часто промахиваешься по «В», проблемной считается пара «ОВ». Сочетания берутся только из обычного текста, а не из тренировочных наборов букв, иначе статистика была бы искусственной.
Из трёх самых слабых букв и двух самых слабых сочетаний собирается персональная тренировка: сначала слоги, потом слова, потом предложения. Самая проблемная буква попадается чаще всех, остальные реже, и это не случайность, а чёткое чередование по кругу. После тренировки видно, как изменился процент ошибок по каждой букве: было и стало.
Ещё одна мелочь для честной статистики: если переключиться в другую вкладку или окно, упражнение встаёт на паузу и секундомер останавливается. Тренажёр предлагает продолжить, и отсчёт идёт дальше только после возвращения.
Самое сложное для меня — руки
Больше всего времени ушло не на бэкенд и не на алгоритм, а на анимацию рук. Хотелось, чтобы было видно не просто подсвеченную клавишу, а какой палец нажимает и как рука к ней тянется.
Нарисовать красивые руки вектором сложно, а обычную картинку нельзя подсветить по отдельным пальцам. Поэтому я сделал гибрид: снизу лежит обычная растровая картинка рук, а поверх неё невидимые векторные контуры каждого из десяти пальцев. Когда нужно подсветить палец, его контур закрашивается цветом. Подсветка плавно растворяется к ладони, поэтому выглядит так, будто светится сам палец на картинке.
Картинка на экране одна и та же, но показана дважды: одна копия обрезана до левой руки, другая до правой. Так каждая рука двигается сама по себе.
Чтобы рука дотягивалась до нужной клавиши, я не храню никаких таблиц координат. Тренажёр просто смотрит, где на экране находится клавиша и где кончик нужного пальца, и сдвигает руку на разницу. Если поменять вёрстку клавиатуры, руки всё равно попадают куда надо.
По дороге было несколько граблей:
-
если мерить положение пальца, пока рука ещё едет от прошлой клавиши, замер получается неправильным, и рука промахивается. Пришлось перед замером мгновенно возвращать её в исходную точку;
-
на ноутбуках с небольшим экраном весь тренажёр немного уменьшен, и координаты приходилось пересчитывать с учётом масштаба;
-
руки иногда наезжали друг на друга, пришлось их раздвигать;
-
большой палец лежит на пробеле боком, и для него расчёт пришлось делать отдельно.
Ещё одна мелочь, которой я доволен. Когда нажимаешь одну и ту же букву несколько раз подряд, анимация нажатия пальца сначала срабатывала только один раз. Решилось неожиданно просто: я сделал две одинаковые анимации с разными названиями и переключаю их на каждое нажатие. Браузер думает, что анимация новая, и проигрывает её заново.
Звук нажатия, кстати, не записан в файл, а генерируется прямо в браузере: это короткий щелчок из шума.
Тестирование на главном пользователе
Главным тестировщиком, конечно, был сын. И он быстро показал вещи, которые взрослому в голову не придут.
Например, ему было непонятно, что Shift надо зажимать, а не нажимать. Он нажимал Shift, отпускал, потом нажимал букву и не понимал, почему не выходит заглавная. Для нас это очевидно, а для ребёнка, который раньше клавиатурой почти не пользовался, нет.
В итоге для Shift появилась подсказка в три шага: «Зажми Shift → Нажми букву → Отпусти Shift». На самой клавише Shift пульсирует надпись «Зажми», потом «Держи». А если отпустить Shift раньше времени, тренажёр так и говорит: «Не отпускай Shift».
Для Shift появилась отдельная пошаговая подсказка: зажать → нажать букву → отпустить.
После таких случаев я стал внимательнее смотреть на всё, что мы, опытные пользователи, считаем само собой разумеющимся.
Сын сейчас проходит 1–2 урока в день и старается следить прежде всего за точностью, а не за скоростью. Сейчас он печатает примерно 40 знаков в минуту.
Где помог ИИ, а где оказалось быстрее самому
Проект я делаю один, в свободное время, и честно использую ИИ‑агентов там, где моих знаний не хватает. В основном это бэкенд: как фронтендеру мне было бы сильно дольше разбираться самому. ИИ помогает и с дизайном: ему можно задать направление, и он предлагает довольно креативные решения. А если подключить плагин в Figma, можно заранее прорабатывать дизайн и потом переносить его в разработку.
Во фронтенде опыт вышел противоположный. Когда не было времени править самому и я отдавал баг агенту, иногда приходилось просить исправить его несколько раз подряд. В итоге я всё равно открывал код и правил руками, только уже потеряв время.
Что пришлось сделать с публичными страницами
Сам тренажёр работает как клиентское React‑приложение, но для публичных страниц мне хотелось отдавать поисковикам готовый HTML. Поэтому главная и несколько информационных страниц пререндерятся на этапе сборки, а затем React гидратирует их через hydrateRoot. Страницы самого тренажёра оставил полностью клиентскими: поисковой индексации там всё равно делать нечего.
Где проект сейчас
Скажу честно: пользователей пока почти нет. Тренажёром пользуются в основном друзья и знакомые, поэтому все наблюдения выше — это пока ранний этап, а не выводы по большой выборке.
Сейчас в SkillTap есть уроки от отдельных букв до предложений с подсказками по пальцам, тест скорости печати, поиск слабых клавиш, персональные тренировки и статистика прогресса. Если кому‑то интересно посмотреть реализацию целиком, проект работает на https://skill‑tap.ru
Дальше хочу попробовать игровые режимы. Сын уже подкидывает идеи: например, скины для рук, которые можно открывать за заработанные в упражнениях монеты. Посмотрим, какие из этих механик действительно помогают не бросать занятия после нескольких уроков.
Вопрос к вам
Сколько вы печатаете и как вообще учились работать с клавиатурой? Особенно интересно мнение тех, у кого есть дети: учили их печатать специально или навык появился сам?
И отдельно интересно мнение разработчиков: как бы вы определяли «слабую» клавишу — только по ошибкам или учитывали бы ещё и время до нажатия? Я это время уже сохраняю, но пока не использую в расчётах.
Автор: Dadfront
