Разбираю несколько инженерных решений из небольшого браузерного проекта: бинго на шахматных задачах Lichess. Механика такая: карточка 4×4 с тактическими мотивами (вилка, связка, мат в два), игроку по очереди показывают позиции, он решает задачу и закрывает подходящую клетку. Ограничения, с которыми я сел за проект: своего сервера нет, только Supabase; играть можно без регистрации; у всех игроков в один день одна и та же карточка.
Рубрика «React»
Одна карточка на всех без сервера: детерминированная генерация, RLS и флаг retired в шахматном бинго
2026-09-22 в 5:35, admin, рубрики: React, supabase, бинго, тактика, шахматыИстория npm‑библиотеки morphing‑scroll
2026-09-21 в 11:28, admin, рубрики: Carousel, lazyload, React, scroll, scrollbar, slider, virtualizationХочу рассказать о своей npm‑библиотеке — это мой второй и самый сложный npm‑проект на момент написания статьи. Глубоко в код погружаться не буду — поделюсь историей создания и мотивацией.
Вступление
Мы сделали свой UI Kit: 6 компонентов превратились в 30+, а одна ошибка сломала разметку во всех проектах
2026-09-10 в 10:21, admin, рубрики: javascript, React, react.js, TypeScript, UI, ui kit, uikit, Программирование, фронтендПрактический разбор создания и развития собственной UI-библиотеки
Коротко: Собственная UI-библиотека — это не только набор React-компонентов. После появления нескольких проектов-потребителей на первый план выходят API, состояние, совместимость, зависимости, тестирование, документация и версионирование.
С чего всё начиналось
Когда в проекте начинает появляться всё больше одинаковых элементов интерфейса, рано или поздно возникает вопрос: зачем каждый раз создавать один и тот же Button, Input или Select?
Как я объяснял племяннику 2x + 4 = 10 и случайно собрал визуальную лабораторию (сайт)
2026-09-09 в 2:35, admin, рубрики: edtech, MathRoots, open source, React, визуализация, граф знаний, искусственный интеллект, математика, нейросети, образованиеМеня зовут Артур Валиев. Недавно мне пришлось объяснять племяннику совершенно страшную математическую конструкцию:
Как я запарился считать плитку для ванной и написал свой калькулятор раскладки
2026-08-21 в 9:51, admin, рубрики: canvas, DIY, konva, React, калькулятор плитки, обрезки, плитка, раскладка плитки, ремонтЗатеял ремонт в ванной, дошёл до плитки — и тут понеслось. Санузел у меня Г‑образный, в углу венткороб, раскладку хочу диагональную, а «раздели площадь на плитку» вообще не работает, я это понял когда мои циферки не сошлись с тем что плиточник насчитал — разница набежала непонятно откуда.
Плиточник говорит — берите пятнадцать процентов запаса и всё. Пятнадцать процентов от плитки по 2000 с лишним за метр это уже сумма, я в столбик посчитал и решил что нет, надо по‑другому. Калькуляторы онлайн — площадь на цену умножают, я и сам умею. В CAD полез — там сначала модель строй, а мне не чертежи нужны были.
От идеи создания своего React‑проекта до столкновения с реальностью
2026-08-06 в 13:09, admin, рубрики: BookStrata, headless-браузер, prerendering, React, SPA, ssr, индексация, книжный тир-лист, пет-проект
Введение. Контекст и почему традиционные сервисы устарели.
Привет! Хочу рассказать свою не уникальную историю создания пет‑проекта bookstrata.ru, амбиций, ожиданий и реальности.
React Update Lifecycle: что происходит при обновлении компонента
2026-08-05 в 10:42, admin, рубрики: Commit Phase, Concurrent Rendering, fiber, React, React Elements, React Internals, React Update Lifecycle, Reconciliation, Render Phase, virtual domКаждый раз, когда я пытался разобраться, как устроен React Update Lifecycle, у меня возникали одни и те же вопросы. Что такое Virtual DOM? Где заканчивается Render Phase? Когда обновляется DOM? Почему useLayoutEffect срабатывает раньше useEffect? И в какой момент React вообще применяет изменения?
Поэтому я решил наглядно визуализировать жизненный цикл обновления в React 18+, разбить весь процесс на фазы и объединить их в одну схему. Под схемой — детальный разбор каждого шага.
Схема
Как меня достало руками создавать одни и те же файлы в Python-проектах — и я написал crt
2026-08-05 в 6:34, admin, рубрики: CLI-инструменты, CRT, crtfiles, fastapi, python, React, автоматизация разработки, генерация файлов, структура проекта, шаблоны проектов
Каждый раз, когда я начинаю новый проект, происходит один и тот же ритуал: создать папку app, в ней api, services, utils, накидать Читать полностью »
Почему сайт невидим для роботов: проблемы вайб-кодинга
2026-07-24 в 11:10, admin, рубрики: NeXT, React, seo, SPA, ssr, вайбкодингВайб-кодинг уронил порог входа в разработку до плинтуса. Lovable, Bolt, v0 и им подобные позволяют за вечер собрать лендинг для своей мастерской, студии или небольшого бизнеса без единой строчки кода, написанной руками. Lovable вообще был первой нейронкой, с которой я познакомился для создания фронта: удобная штука для быстрой сборки концепта, когда в голове уже есть картинка будущего сайта.