Веб-разработка *

Британское правительство потратило более £500 тысяч на обновление логотипа сайта gov.uk, ограничившееся сменой цвета и перемещением точки. Новое оформление, разработанное агентством M&C Saatchi, вызвало насмешки чиновников и критику со стороны общественных организаций.

👁 9 день как пилю свой проект для замены Google Forms.

- Добавил картинку в заголовок формы
- Иконку
- Настройки верстки
- Красивое отображение элементов в редакторе и в просмотре

JavaScript, дизайн-системы и рок-н-ролл — что такое фронтенд в 2025 году? 

Что происходит, когда в одном месте собираются JS-еры, UX-дизайнеры и исследователи? Получается Frontend&UX Talks!

Без сложных интерфейсов в фронтенде сегодня никуда: продукты становятся все масштабнее, а требования – все выше. Для всего этого нужны свежие и эффективные решения, которые ускорят разработку, и помогут провести релевантные UX-исследования.

Чтобы обсудить эти темы, мы в МойОфис пригласили ребят из разных компаний: Alfa Research Center, Лаборатория Касперского и Контур.

Всего на митапе будет 7 докладов, где расскажем:

• как реактивное программирование и RxJS меняет разработку – и какие у него есть нюансы;

• какие свежие css-спецификации могут упростить ежедневный кодинг;

• как «редизайнить» сложные интерфейсы: рассказ на личном опыте переосмысления визуала настольных редакторов практически с нуля;

• что за методы UX-исследований использует финтех сегодня – и какие из них можете перенять и вы :)

и многое другое, что поможет в работе со сложными интерфейсами!

Если тебе близки эти темы — приходи 26 июня в 15:00. Регистрация и подробности по ссылке.

Крутая история инди-хакера.

Денис работал программистом, а в свободное время запустил браузерное расширение, которое затем продал за $100k.

https://youtu.be/zbsXZ_xRMOM?si=EmwBb7umAytf4IRk

Очень вдохновляет, не могу не поделиться

Обновил сайт знакомств для айтишников

Наконец-то!
Уже 13 лет бесплатно ищет половинки. И без рекламы.

Ушел с jquery и bootstrap - перешел на alpine и tailwindcss.
Поменял дизайн на более современный и удобный, как мне кажется.

Знакомства для айтишников - просто наберите в поисковике (он всегда первый), ссылку не буду давать.

Как было раньше можно посмотреть в архиве интернета, с 2012 года.

Часть 2: итоги недели разработки вайбкодинга с агентами

Прошлый пост тут

1️⃣ Текущий прогресс по xsoulspace.dev привел к тому, что обнаружил что есть закономерность какие именно модели хороши для использования в проектировании layout страницы (спойлер - не записал какие 🤦‍♂️ кажется использовал Claude 4.0 thinking + Gemini 2.5 Pro).

Что попробовал сделать : нарисовал простой wireframe image -> сконвертировал в ACSII art, и затем скормил LLM для более корректного восприятия layout.

Оказалось что так проще, но относительно (за счет убирания лишних элементов проще понять что где расположено), но с другой стороны LLM все так же тяжело воспринимать layout (если он чересчур кастомный).

2️⃣обновил все flutter библиотеки, last answer, word by word, budget app до flutter 3.8 - пользовался агентами в окошках. В некоторых случаях правил руками, но в большей части работал по принципу PDSA (Plan Do Study Act), где я разрабатывал план, а агент по нему шел, потому изучал результаты и т.д.
Вывод - нужно сильнее нарабатывать промпты.

3️⃣внезапно получил спам-рассылку-письмо с возможностью потестить on device API для того чтобы запускать модели. Чтобы потетстить решил запилить новое приложение для работы с промптами - действовал по принципу:

1. Идея и этические принципы

2. Палитра и дизайн система на основе идеи и принципов

3. План работы

4. Имплементация через агентов + доп ресерчи чтобы агенты понимали какую информацию брать.

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

Опыт: понял как создавать и работать с ролями (опишу в следующем посте про MVP), разобрался как запускать LLM на устройстве.
Недостатки: нужно более точно прописывать тех стак, особенно ключевые места, такие как - синхронизация данных, тип хранилища и т.д. И хорошо если изначально можно давать wireframes, или подгенеривать на основании дизайн системы.

Хотелось сделать нечто среднее между игрой и обычным интерфейсом, но пока не получилось.

4️⃣Создал детальный план и начал прорабатывать новую систему сохранения данных. Для меня это оказалось большой проблемой - потому что Hive, Isar на flutter перестали поддерживаться, а другие библиотеки неудобно использовать (где-то перешел на Sembast).

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

Поэтому решил объединить все идеи и написать одну библиотеку которая будет из коробки давать синхронизацию с гитом, github и папками. Так надеюсь удастся побороть проблему долговечности и надежности хранения данных.
Пока агенты имплементировали 4 этапа из 5 (основную логику провайдеров данных), и как итог - собрал отдельное тестовое приложение (todo), чтобы протестировать работу (отдельный скриншот), понять недостатки и как можно быстрее завершить библиотеку чтобы начать интеграцию во все проекты. Это важно, потому что при одновременной интеграции сразу будет понятно что работает, а что нет, и таким образом будет проще получать feedback и развивать библиотеку качественно.

Спасибо за ваше время и хорошего дня!

p.s.:

Бумаги которые claude нашел по теме и одновременно не по теме)

• Towards Aligned Layout Generation via Diffusion Model with Aesthetic Constraints https://arxiv.org/abs/2402.04754

• CreatiLayout: Siamese Multimodal Diffusion Transformer for Creative Layout-to-Image Generation https://arxiv.org/abs/2412.03859

• Future of edge and on-device AI in gaming https://inworld.ai/blog/ml-advancements-that-will-make-on-device-ai-possible

• MobileExperts: A Dynamic Tool-Enabled Agent Team in Mobile Devices https://arxiv.org/abs/2407.03913

• From Cloud to Edge: Rethinking Generative AI for Low-Resource Design Challenges https://arxiv.org/html/2402.12702v1

• Generative Artificial Intelligence-Enabled Facility Layout Design Paradigm https://www.mdpi.com/2076-3417/15/10/5697

Эксперты по компьютерным наукам скажите свое мнение:

разработчики через 2 года будут не нужны?

80% разработчиков убьет ИИ ?

Быстрая замена mypy на Rust'е: pyrefly

Еще одно видео про еще один новый тайпчекер для питона на расте! Много их нынче стало.

В видео:

• Обсуждаем первую версию: pyre-check, обсудили taint analysis

• Сравниваем pyrefly с ty и mypy

• Смотрим на внутреннее устройство

• Применяем на реальном проекте

Ключевые ссылки из выпуска:

• Доклад о pyrefly на PyCon: https://youtu.be/ZTSZ1OCUaeQ?si=s_DPOOzsdeTk5Uqo

• pyrefly vs ty: https://blog.edward-li.com/tech/comparing-pyrefly-vs-ty (сильно советую!)

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

Попробую публиковать серию постов про мои новые эксперименты с вайбкодингом.

Не использую v0, bolt - так как они совсем почти no-code + генерят react приложения, а мне интересно сейчас проработать поработать с Dart проектами.

Начал с крафта нового сайта для xsoulspace.dev (мой основной сайт по проектам, давным давно писал на flutter и очень давно не обновлял).

Основная идея в том, чтобы:

1. Как можно больше проработать паттернов вайбкодинга

2. Как можно качественнее научиться работать с дизайнерской точки зрения

3. Научиться учить агента новой информации (новый пишу на jaspr - а на нем крайне мало информации - и скорее всего не обучалась ни одна модель, поэтому вайбкодить на нем тяжело - если агенту дать задачу без правил и промптов - он не сможет завершить задачу и закопается в ошибках).

Пока что удалось сделать немного - восстановил навыки промптинга (которые прокачивал в прошлом году)

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

Частично удалось распараллелить работу (используя окна и табы агентов в cursor) и научиться давать относительно автономные задачи (по принципу PDSA (Plan Do Study Act))..

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

Пока что было две идеи:

1. Сделать в виде интерактивной игры (получились вырвиглазные кнопки

2. Каким-то образом придумать бенто..

Спасибо за ваше время и хорошего дня!

P.s.: почему-то на хабре нельзя загрузить больше одной картинки в пост:(

P.p.s.: почему-то нельзя опубликовать публикацию если хоть раз проставил галочку запланировать..

Свои типы полей в Joomla.

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

Интерфейс Joomla по большей части описан в XML-файлах. У каждого из них свои параметры. Некоторые не описаны в документации (manual.joomla.org), поэтому самым любопытным будет полезно заглянуть в собственно файлы фреймворка по пути libraries/src/Form/FormField.php, а так же в libraries/src/Form/Fields. У каждого класса поля перечислены его специфические свойства, которые можно описывать в XML. А в своём типе поля вы можете устанавливать эти значения программно.

В моём модуле WT Quick links под капотом происходят изменения. Теперь для работы (в админке) ему нужен вспомогательный плагин. А в самом модуле нам бы проверить, а не выключен ли он?

В Joomla есть тип поля Note - заметка. Его можно использовать для вывода примечаний.

<field type="note"
     name="your_note_for_user"
     label="Заголовок примечания"
     title="Альтернативный способ для заголовка"
     description="Текст примечания"
     class="col-12 alert alert-info"
     heading="h1"
     close="true"
/>

heading- указывать уровень заголовка. close - позволяет закрыть это примечание.

В классе поля libraries/src/Form/Field/NoteField.php описана логика вывода. И в принципе оно нам подходит для нашей задачи. Но оно будет выводить сообщение всегда, а нам нужно только тогда, когда плагин отключён.

Поэтому берём и создаём свой класс поля, который мы унаследуем от NoteField. Это значит, что у нас в руках будет весь инструментарий стандартного поля Note + то, что мы сами добавим.

В XML-манифест добавляем наше поле:

<field type="systempluginstatus" 
     name="systempluginstatus"
     addfieldprefix="Joomla\Module\Wtquicklinks\Site\Fields"/>

• type - имя файла и класса,

• addfieldprefix - указываем namespace к нашему классу, может быть любой нам нужный

• name - нельзя полю без имени...

Это означает, что Joomla будет использовать класс поля из файла modules/mod_wt_quick_links/src/Fields/SystempluginstatusField.php. А в классе поля будет написано следующее:

<?php
// namespace для атрибута addfieldprefix
namespace Joomla\Module\Wtquicklinks\Site\Fields;
// нельзя напрямую обращаться к этому файлу
defined('_JEXEC') or die;
// подключаем родительский класс для переопределения
use Joomla\CMS\Form\Field\NoteField;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Plugin\PluginHelper;

// имя класса и имя файла точь-в-точь
class SystempluginstatusField extends NoteField
{
     protected $type = 'Systempluginstatus'; // тип поля без "Field" в конце

     protected function getLabel()
          {
               // если плагин не включён
               if(PluginHelper::isEnabled('system','wtquicklinks')) {
                    // меняем свойства родительского класса поля
                    $this->class = 'alert alert-danger w-100';
                    $this->element['label'] = '⚠️ А-а-а-а!';
                    $this->element['description'] = 'Плагин не включён!!';
                    // и просто рендерим его с нашими свойствами
                    return parent::getLabel();
               }
          // А иначе всё хорошо, скрываем поле из виду.
          $this->parentclass = 'd-none';
          return '';
     }
}

Просто и удобно. И людям приятно, что о них позаботились и рассказали почему что-то не работает.

Почему мы решили делать именно Конструктор форм?

Т.к. мы пилим продукты и нам важна Обратная связь от пользователей - мы ее собираем в Google Forms, они оч крутые, но есть пара нюансов:

1) Обработка персональных данных по закону должна быть в РФ. Штраф до 500к рублей! И т.к. мы хотим делать бизнес на РФ - нам нужно использовать оператора из РФ. 

2)  Мы сейчас собрали таблицу куда приходят все “Данные” от наших иностранных пользователей. 

У нас сейчас 6 таблиц, только с 3 расширений, дальше будет больше. 

Ходить по страницам не так удобно как у всех топовых сервисов по созданию форм. 

Мы хотим видеть одну таблицу с сортировкой по последним и фильтрами по всем ответам/заявкам.

3) Уведомления в телеграм.

4) Встроить оплату и другие виджеты.

5) Кастомные домены.

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

Давайте создадим свое бесплатное комьюнити для всех 👇👇👇

Нужно было объяснить зачем нужна роль для LLM и как ей пользоваться)

Можно представить что роль - это персонаж, у которого есть свои особые характеристики и свойства. То как мы пропишем персонажа влияет на то, как агент или llm будет себя вести (стиль ответа, его поведение, "характер"). В чатах обычно можно использовать с "act as [ROLE]"

Простое объяснение: https://www.youtube.com/shorts/rVlmbhwn0RM

Сложное объяснение: https://huggingface.co/learn/llm-course/chapter1/1

🖼 🚀 Я почти всегда выбираю ISR в Next.js для контентных сайтов.

Вот почему:

SSR:
- Каждый запрос = генерация страницы

SSG:
- Обновить контент = пересобрать весь проект
- При 1000+ страниц билдится часами

ISR - лучший вариант:
- Не генерит страницы сразу. Только по запросу.
- Ключевой параметр: revalidate - определяет, как часто Next.js должен перегенерировать страницы.

Например revalidate: 60 - страница обновляется раз в 60 сек, а между этим - юзер видит кэш из памяти.
Для некоторых контентных сайтов норма обновления данных 8-24 часа. Данные будут в оперативной памяти все это время.

💡 Фишка для SEO:
После деплоя (CI/CD) - страницы прогреваются скриптом, чтобы не ждать первого захода.
Это нужно чтобы поисковые боты видели всегда лучшую версию сайта, а не ждали прогрузки кеша.

📌 Вывод:
Если тебе не нужен real-time обновления сайта - ISR закрывает почти все потребности.

А чем пользуешся ты? Пиши 👇

Задача о новой фиче, которую никто не видит

Задача будет полезна разработчикам веб-приложений и сервисов.

Текст подготовил Артём Шумейко — внештатный райтер, амбассадор Selectel и автор YouTube-канала о разработке.

Условие

В компании «ГигаПост» выпустили долгожданное обновление: на сайте появилась новая кнопка «Подписаться на тему». Интерфейс готов, API поддерживает, проверено на стенде — все работает как часы.

Но после релиза начались странности. Некоторые пользователи видят кнопку, а некоторые — нет. Кто-то говорит, что она появилась через сутки. Кто-то — что только после нажатия Ctrl+F5.

Команда фронтенда уверена — код задеплоен. Бэкенд-эндпоинт отвечает корректно. На тестовом стенде все видно. Даже сам разработчик открывает сайт на своем ноутбуке — кнопка есть.

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

И вот тогда кто-то предложил простую мысль: а пользователи вообще видят свежую версию сайта?

Задача

Почему часть пользователей не видит новую кнопку, хотя код задеплоили? В чем может быть причина? Где в цепочке доставки может остаться старая версия?

Предлагайте свое решение в комментариях. А правильный ответ можно подсмотреть в Академии Selectel.

Новые тарифы Kubernetes

Апгрейднули тарифы и добавили пояснение к каждому. Давайте знакомиться:

• 👉Тариф Dev. Подходит для тестирования функционала нашего Managed Kubernetes — 200 ₽/мес

Пример использования: небольшие пет-проекты

• 👉Тариф Base. Для кластеров со средней нагрузкой, где отказоустойчивость не критична — 2000 ₽/мес

Пример использования: корпоративные веб-сервисы или ML inference-сервисы

• 👉Тариф Custom. Для гибкой настройки — от 2520 ₽/мес

Пример использования: highload-платформы и BigData/ML пайплайны

Пара слов о тарифе Custom. В нем можно выбрать количество ядер, объем оперативы и диска, а также установку с одной мастер-нодой или с тремя для настройки отказоустойчивости.

Найти свой идеальный тариф →

Джентельменский набор расширений Joomla, которые стоят на каждом моём сайте

Сел немного формализовать свои процессы. Получился вот такой список:

• Blank page - компонент пустой страницы. Обычно используем для главной.

• Revars (GitHub) - плагин шорт-кодов для контактов, реквизитов и т.д.

• WT Revars insert (GitHub) - плагин кнопки редактора для вставки шорт-кодов

• RadicalForm (GitHub) - плагин формы обратной связи. Подробная инструкция на сайте. Статья Разработка форм обратной связи для магазинов на Joomla на Хабре как создать форму + примеры кода. Есть интеграции с Б24 и Amo.

• WT Quick links (GitHub) - модуль-конструктор повторяемых элементов

• WT SEO Meta templates - комплект плагинов для автоматического заполнения <title> и meta-description по формуле.

• JL Sitemap (GitHub) - компонент XML-карты сайта

• View logs (GitHub) - просмотр логов Joomla в админке

• WT Eternal admin - плагин автоматического продления сессии в панели администратора.

• Reset Media Version (GitHub) - для верстальщиков: гарантированная загрузка новых версий css и js файлов, а не из кэша браузера.

Установка остальных расширений уже зависят от конкретного проекта.

И так же welcome в чат русского Joomla-сообщества.

Мега Bolt или как неройнка заменяет кучу разрабов

Разработка или Vibe Coding продолжается 3 день. Я все ещё использую Bolt и смог сделать вполне рабочий сервис. Вручную программисту потребовалось бы около 1-2 недель на такой функционал.

• Авторизация

• Редактор форм

• Просмотр ответов форм с фильтрами

• Выгрузка ответов в csv

• Шаблоны форм

• Загрузка файлов в хранилище

• Публикация формы для клиента

Все уже работает и связано с БД

Остальные скрины и ДЕМО версию пришлось опубликовать в телеге т.к. тут лимит на 1 картинку.

Я попробовал Bolt. Мои первые шаги в Вайб-кодинге.

На связи Антон 👨‍💻

Мы выбрали идею нового продукта - Form builder. Простой и минималистичный конструктор форм на замену Google Forms.

Для разработки я пробую сервис Bolt.new. Я пишу в промтах ТЗ, нейросеть генерит код за меня.

За 5 запросов я получил функционал, который писал бы пару дней. Конечно с кучей багов и недоработок. Они и в ручной разработке тоже бывают.

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

А у вас какой опыт с вайб-кодингом? Писать про наш опыт с нейросетями в разработке?

MongoDB + WARP + Xray = 💥 BSONError

У меня MongoDB начала выдавать ошибки:

BSONError: Invalid UTF-8 string in BSON document  

BSONError: bad embedded document length in bson

Документы в базе нормальные. Ошибки появлялись только при включённом Xray с WARP (через встроенный WireGuard). Когда VPN отключён — всё читается корректно.

Поначалу думал, что что-то с кодировкой или драйвером, но оказалось, что проблема в том, что Mongo работала через Cloudflare WARP.

Когда запросов было мало — срабатывало нормально.

Когда запускался алгоритм и начинались частые обращения к базе — Mongo валился с ошибками BSON.

Причина — искажение бинарного трафика при передаче через WARP.

Mongo использует бинарный протокол BSON, и даже один сбитый байт ломает парсинг.

Пофиксил так:

добавил в routing.rules Xray правило, чтобы трафик к Mongo шёл мимо WARP:

{

  "type": "field",

  "ip": ["<IP MongoDB>"],

  "outboundTag": "direct"

}