От нечего делать сделал семейный сайт с фотографиями, скажем так личная замена инстаграму и теперь его постепенно наполняю. Осталось отсортировать чуть больше четырех тысяч страниц. Будем надеяться, что его не забянят за такое самоуправство :).
Заходите, смотрите, ругайте криворукого меня на здоровье. Главное мне нравиться.
Работает кто-то с Directus?
Как орагнизуете деплой, git?
В описании указано Flex
👨🦰 Сэр Тимоти Джон Бернерс-Ли — британский учёный и инженер, подаривший миру World Wide Web — систему, которая изменила способ, как человечество хранит, находит и передаёт информацию.
![🗓 08.06.1955 - День рождения Тима Бернерса-Ли [вехи_истории]](https://cs17.pikabu.ru/s/2025/06/05/23/fgqflz73.jpg)
🗓 08.06.1955 - День рождения Тима Бернерса-Ли [вехи_истории]
💡 В конце 1980-х, работая в Европейском центре ядерных исследований (CERN), Тим столкнулся с проблемой обмена информацией между учёными, работающими на разных компьютерах и системах. В 1989 году он предложил решение — проект под названием “Mesh”, который вскоре стал World Wide Web. Он включал три ключевых технологии:
👉 HTML — язык разметки гипертекста
👉 URI/URL — универсальные адреса ресурсов
👉 HTTP — протокол передачи данных
🔓 Тим Бернерс-Ли сознательно не запатентовал своё изобретение и настоял, чтобы оно было открытым и бесплатным для всех. Это решение стало основополагающим для стремительного роста Интернета в 1990-е.
👨🔬 Он продолжил развивать Web как руководитель W3C — консорциума, отвечающего за стандарты Интернета. Позже он запустил проект Solid, цель которого — вернуть контроль над личными данными пользователям.
🌍 Его вклад был признан по всему миру: он получил рыцарский титул, премию Тьюринга, был включён в список 100 величайших британцев и считается одним из самых влиятельных людей в истории цифровых технологий.
📱 Именно благодаря его труду мы имеем доступ к сайтам, соцсетям, онлайн-играм, цифровым библиотекам и бесконечному числу других сервисов.
📼 Подробную историю о создании интернета мы рассказывали в видео:
Кто придумал ИНТЕРНЕТ?
YouTube | RuTube
«Хочется сделать простую карту, чтобы листать её в Telegram». С этого всё и началось. А закончилось — изометрическим движком, авторизацией по WebApp, системой энергии, покупкой участков и боевым ровером с шестью колёсами.
В начале всё было очень просто.
Мы сделали простенького бота, о котором я уже как-то тут писал, и бэк рендерил картинки с кусочком карты, где ты находишься.
В целом, даже эта идея была вполне рабочей и первые 300 пользователей с разных источников легко собрались. Мы даже провели на 9 мая конкурс "найди звезду победы" и выплатили победителю небольшой приз :)
Но само собой, что бот - не предел мечтаний, нужно было пилить полноценный мини-апп.
На боте лишь проверили гипотезу, отладили механики, типа уменьшения энергии, подзарядки аккумулятора в течении времени, пока не заходишь в игру.
Первый шаг в сторону мини-аппки - сделали вебстраничку, где можно было листать мышкой или пальцем — просто ради визуализации. Прямоугольная сетка, тайлы, немного стилей. Telegram WebApp проглатывал HTML5 на ура. Тогда не было никакой логики, просто подгрузка текстур и картинка под пальцем.
Вот как это выглядело:
Пользователь заходил и видел карту Марса.
Никакого взаимодействия — только “глянуть”.
Следующим шагом стало добавление изометрии — чтобы выглядело как псевдо-3D. Самое интересное, что даже не потребовалось изменять текстуры. Серьезно :) Они по-прежнему те же самые, квадратные, 64 х 64. И не используется никакой 3д - движок.
вот краткое и понятное объяснение, как строится изометрическая карта из квадратных тайлов:
Каждый квадратный тайл поворачивается на 45° и масштабируется по вертикали, чтобы получился ромб (изометрическая проекция). Вместо привычной сетки (x, y) мы рассчитываем экранные координаты (left, top) по формуле:
При размере одного тайла T:
W = T * sqrt(2) — изометрическая ширина (диагональ квадрата).
H = W / 2 — изометрическая высота (высота ромба).
WX2 = W / 2, HX2 = H / 2 — половинки для смещения от центра.
Переход от логических координат (dx, dy) к пиксельным:
isoX = (dx - dy) * WX2 + centerX; isoY = (dx + dy) * HX2 + centerY;
(dx - dy) — смещает тайл по горизонтали.
(dx + dy) — смещает тайл по вертикали.
centerX, centerY — центр экрана, чтобы карта строилась относительно игрока.
Из обычной квадратной сетки (x, y) формируется ромбовидная карта, где видны и горизонтальные, и вертикальные соседние тайлы.
Центральная клетка (текущий игрок) — всегда по центру, а остальные располагаются вокруг.
Ну а дальше уже дело техники - придумали алгоритм перемещения в 8 направлениях: вверх, вниз, влево, вправо, плюс диагонали.
Подключили ранее обкатанный в чатботе расход энергии за каждый шаг, и разный расход за диагональные движения, в сравнении с линейным. Плюс небольшой рандом :)
Задали запреты на воду, скалы и занятую клетку, чтобы не было “читов”.
Чтобы пользователь не “прыгал” по чужим роверам и участкам, мы внедрили Telegram WebApp InitData (это такая строка с хешем, которую фронт передает нам в бэк, а мы - уже на сервере телеграм с токеном бота валидируем подпись. Если сошлась - то пользователь зашел к нам через телегу. Если нет - скорее всего он просто открыл веб-страницу как сайт, или что-то пытается поломать, подделать :)
Если кратко:
Telegram сам отдаёт токен с подписью.
Мы проверяем подпись на бэке по HMAC SHA256.
Получаем ID пользователя, сохраняем его в сессии.
Теперь всё честно: ровер – только твой, кристаллы – только твои.
Потом появились:
Кристаллы на клетках — можно собирать.
Подсветка клеток: белая рамка — твоя, красная — чужая.
Имена владельцев, чтобы было видно, кто что захватил.
В планах: Покупка участков за кристаллы. Это было в текстовом боте. И ползая по карте, даже видны купленные тобой (белым) и оппонентами (красным) участки.
Мы поняли, что каждая картинка может тормозить игру на слабом устройстве, и:
Добавили прелоадер, который подгружает PNG-шки перед игрой.
Сделали показ спиннера на любом действии (движение, загрузка).
Кэшируем тайлы и обновляем только при движении.
Игрок:
Заходит в Telegram Mini App.
Авторизуется за доли секунды.
Видит изометрическую карту с ровером, кристаллами, участками, рекламными баннерами.
Может двигаться по клеткам, собирать кристаллы (в будущем - бурить и находить ресурсы, торговать ими, покупать землю).
А мы — всё это рисуем прямо в DOM.
Никаких Canvas, WebGL, или тяжелых движков. Только HTML, CSS и немного магии на JS.
💬 Если интересно — покажу, как это выглядит вживую.
Тестить можно тут. А если зайдёт — добавим NFT, фермы и квесты на выживание 😄
Вообще интересует вопрос в какую сторону развиваться, читал что хвалят django и также django cms или Wagtail - но они требуют хостинга с Python и для потенциальных клиентов не так популярны как wordpress - который в свою очередь тоже вызывает вопросы
Я в феврале 2025 года работаю над проектом "Генерация HTML файлов с помощью табличного редактора". Напишите, пожалуйста, в комментариях ссылки на похожие проекты. Точнее, на файл табличного редактора для генерации HTML.
Вчера нечто не разумное под моим постом про обучающий opensrc проектик на питоне, пыталось меня учить жизни права юзерам ставить, что возмутило меня до глубины души. А еще это чудо сравнило кастомную разработку с поделкой на Wordpress. WP -это несуразное недоразумение, использование которого оправдывает только нехватка денег или времени на разработку своего проекта.
Из чата про WP
Это история о том, как движок, написанный для простенького бложика чудовищно кривыми руками какого-то безграмотного и бездарного школьника, вдруг как раковая опухоль захватил мир.
Даже на php во времена зарождения говнопресса можно было писать совершенно по-другому.
А вообще это относится ко всем универсальным якобы CMS.
Остальные не лучше. Причём на допиливание до нужного, приемлемого результата уходит времени порой больше, чем на кастом с нуля.
А потом упираешься в ограничения или невозможность реализовать задуманное и сносишь нахер эту ересь.
Но есть ещё и битрикс, где нужное тебе будут пилить 1.5 года за все бабло мира и получившийся монстр потребует весь ram и процы, какие только есть и все равно будет работать неспеша.
Из недавнего. Сайт - визитка завода. На битрикс.PageSpeedWeb показывает 40, поисковая оптимизация 80🤣
-Ну нам же делала серьёзная контора, как же так?
Но мне хлеб конечно, грех жаловаться.
Вообще о скорости загрузки и работы. Сайт должен грузится мгновенно, каждая доля секунды -это потеря потенциального клиента, каждое ожидание в интерфейсе - это негатив и не купленный товар.
Еще в 2006 году Amazon обнаружила, что каждые 100 мс дополнительного времени загрузки страницы стоят им 1% продаж. На тот год 1% для них это около 100 лямов баксов. Но да, вы продолжайте топить за бесплатные CMS или овердорогой битрикс, уговаривая себя, что вам это сэкономило кучу бабла.
Хоть я и не фанат PHP, но даже на нем с прямыми руками можно запилить отличный кастом.
Вообще сравнивать ширпотреб и кастомную разработку - это как сравнивать обувь на заказ с обувью с рынка. И то и то выполняет свои функции, но есть нюанс..
Но бабло и экономить народ хочет сейчас, а о том, что на дистанции теряет больше, не думает. А еще не думает о том, что долгая загрузка понижает в выдаче, так SEOшники утверждают.
А вообще, если есть у тебя сайтик, народ на него ходит, а ты не знаешь насколько он медленный и кривой. Ну загрузи ты его в https://pagespeed.web.dev/ или открой LightHouse в панели разработки хрома затести и подивись результатам.
А потом вынеси тяжелые js в фон, картинкам пропиши lazy и упакуй их наконец-то в webp или вообще на svg замени где разумно.
Но с svg тоже без фанатизма, тяжелые градиенты и прочие вензеля нагружают клиента и 100 svgшек могут наглухо повесить страницу на слабом телефоне.
Есть еще более продвинутые аудит сервисы к примеру https://www.webpagetest.org/ там тоже не плохо добиться хотя-бы средних результатов
А в бэке прибей нахрен joinЫ, да и вообще поменьше к базе обращайся. Есть же redis и другие inmemory решения, популярные мелкие таблицы сбрось туда или настрой кэш нормально на БД, индексы пропиши, в общем оптимизируй хорошенько систему. И вот совсем не надо рассчитывать в базе мега карту вселенной в цикле, если у тебя в таблицах меньше 1000 строк, все в коде делай. в конце концов добавь RAM, ограничь логи не экономь на оптимизации сервисов и комфорте посетителя. Это важно.
И да, установи себе наконец-то fail2ban и забань всех ботов, чтобы не нагружали систему. Если у тебя нет php то прямо пропиши регулярками банить за php запросы.
failregex = ^<HOST> - - \[.*\] "GET .*\.php.* HTTP\/.*" 404 .*$
Первый раз спросил - ошибся на 404, второй раз - в тюрьму. Повторил - рецидивист, отдохни месяц. Если у тебя есть админка по пути admin, переназови как-то по другому например godmode и всех кто в /admin без спросу лезет тоже в бан типо так:
^<HOST> - - \[.*\] "GET .*\/admin.* HTTP\/.*" 404 .*$
^<HOST> - - \[.*\] "POST .*\/administrator.* HTTP\/.*" 404 .*$
Вообще почитай логи своего веб сервера, посмотри сколько там ботов крутится. Ищут wp-admin, config,.env и прочее - Они нагружают твой ресурс и ищут дыры - они тебе не нужны.
И убери root доступ по ssh, тем более если ходишь не по серту, а по паролю. Эти же боты долбят shh подбирая пароли под root а вот какое имя рэндомного sudo user - vasiia_pupkin они искать не будут. Ну и ssh jail у fail2ban включи а лучше в sshd.conf пропиши только allow IP для себя.
Усе, выговорился. Пора за работу )
Ах да, конечно повелители тильды и боги wp меня сейчас покарают😆
