Все потоки
Поиск
Написать публикацию
Обновить
56.85

Веб-дизайн *

Дизайн спасет мир

Сначала показывать
Порог рейтинга

Спустя 26 лет чуть не истёк срок действия домена half-life3.com. Домен был создан ещё в 1999 году и раньше перенаправлял на сайт The Orange Box. Однако 28 июня домен прекращал своё существование, из-за чего некоторые фанаты начали бить тревогу и даже связались со службой поддержки Valve, которая сообщила, что домен в безопасности — его продлили некоторое время назад.

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии1

Представлен сайт, где можно летать по миру на самолётике — благодаря Google Картам. Города полностью трёхмерные — для полётов доступны Париж, Токио, Рио, Брюссель и другие города.

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии1

Опубликована база по веб-разработке от Microsoft. В учебном курсе от компании представлено 24 урока, где разбирается всё от основ веба, работы браузеров, сетевых протоколов до HTML, CSS и JS. Всё обучение ориентировано на практику. После каждого раздела есть тесты и интерактивные кодинг-задачи. Также есть несколько пет-проектов, которые можно реализовать после обучения и положить себе в портфолио.

Теги:
Рейтинг0
Комментарии0

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

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

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

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

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

Теги:
Всего голосов 2: ↑1 и ↓1+1
Комментарии0

Часть 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 нашел по теме и одновременно не по теме)

Теги:
Всего голосов 4: ↑2 и ↓20
Комментарии0

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

Не использую 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.: почему-то нельзя опубликовать публикацию если хоть раз проставил галочку запланировать..

Теги:
Всего голосов 6: ↑0 и ↓6-6
Комментарии0

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

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

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

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

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

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

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

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

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

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

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии4

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

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

Теги:
Всего голосов 3: ↑1 и ↓2-1
Комментарии6

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

Вот почему:

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

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

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

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

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

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

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

Теги:
Всего голосов 9: ↑0 и ↓9-9
Комментарии2

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

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

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

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

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

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

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

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

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

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

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

Теги:
Всего голосов 10: ↑5 и ↓5+2
Комментарии4

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

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

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

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

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

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

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

Теги:
Всего голосов 2: ↑2 и ↓0+4
Комментарии8

Несмотря на кадровый голод в IT занято огромное количество лишних людей деятельность которых в общем-то бесполезна. А все что бесполезно как известно приносит только вред. Возьмем к примеру новомодную отрасль UI/UX которая по задумке должна улучшать пользовательский опыт - так называемый "экспириенс". На планете существует целый зоопарк разных форматов дат: 1 ноября 2000, 01.11.2000 и т.д и т.п. Это мелочь, но и в мелочах можно тот самый "экспириенс" взять да и улучшить. И он был повсеместно "улучшен" до формата "3 года назад". Как правило без какой либо возможности вернуть нормальную дату.

Теперь просто хочется простереть руки к небу и крикнуть за что это мне?

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

Теги:
Всего голосов 12: ↑8 и ↓4+5
Комментарии10

ИИ-агенты могут убить привычный нам Интернет, e-commerce и заодно порушить весь рекламный рынок

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

Но с приходом в нашу жизнь ИИ-агентов эта модель устаревает:

  • ИИ-агенты не реагируют на рекламу так, как люди. Они не подвержены эмоциям, не кликают на баннеры и не нуждаются в вдохновляющих слоганах.

  • Они совершают покупки рационально, сравнивая цены, характеристики и сроки доставки автоматически, без влияния брендинга и маркетинговых трюков.

  • Сайты становятся интерфейсом для ботов, а не для людей: ИИ-агенты требуют структурированных данных, а не красивых витрин и описаний.

И по мере того, как ИИ-агенты будут все чаще совершать покупки в интернете вместо нас, встает вопрос изменений не только привычной инфраструктуры E-commerce, но и в ценности диджитал рекламы в сети.

Руководители e-commerce-компаний уже называют массовое появление ИИ-агентов «экзистенциальной угрозой» для всей отрасли. Стартап New Gen предлагает решение, позволяющее адаптироваться к этой новой реальности, предоставляя разные интерфейсы для людей и агентов, что помогает брендам хоть на первых порах не потерять позиции на рынке электронной коммерции.

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

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

А еще в этом же видео профессор Эндрю Ын говорит о подходе "кубиков Лего", как о современном принципе построения сложных систем из множества готовых инструментов и модулей, о чем я буквально на днях писал на Хабре, правда в другом контексте, как о способе создавать и монетизировать свои микро-продукты.

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

Контент сайтов будет генерироваться ИИ в реальном времени под конкретного пользователя или агента. А интерфейсы станут «невидимыми», взаимодействие будет происходить через голос, а там глядишь и через нейроинтерфейсы.

Теги:
Всего голосов 9: ↑9 и ↓0+9
Комментарии7

Ближайшие события

Google выпустила свой бесплатный генератор сайтов и приложений Stitch:

  • генерит простые, но стильные дизайны; 

  • под капотом мощнейшая модель Gemini; 

  • экспорт в Figma буквально парой кликой 

  • есть специальная фича Copy to Figma; 

  • любой элемент можно отредактировать.

Теги:
Рейтинг0
Комментарии1

Хотим еще больше работ на конкурс маскота для RUNIT

Полным ходом идет конкурс на создание маскота для фестиваля IT и спорта RUNIT, и нам уже прислали около 20 супермилых персонажей, которых мы с удовольствием разглядываем всей командой. Но нам этого мало. Уверены, тема раскрыта еще не полностью и впереди много классных идей и героев. Подать работу можно до 26 мая включительно — так что присоединяйтесь.

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

В конкурсе будет три призера: за третье место дарим 20 тысяч рублей, за второе — 30 тысяч, за первое — 50 тысяч. Но самое важное — что вашего перса увидят тысячи участников RUNIT.

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

Теги:
Всего голосов 3: ↑1 и ↓2+1
Комментарии0

🗓 4.04 - World Webmasters Dаy [вехи_истории]

🗓 4.04 - World Webmasters Dаy [вехи_истории]
🗓 4.04 - World Webmasters Dаy [вехи_истории]

4 апреля отмечается День веб-мастера (World Webmasters Day) – праздник всех, кто разрабатывает, поддерживает и совершенствует сайты. Веб-мастера — это программисты, дизайнеры, SEO-специалисты, администраторы и многие другие профессионалы.

Выбор даты не случаен: 4.04 ассоциируется с известной ошибкой 404 «Страница не найдена». Это своеобразный символ работы веб-мастеров, ведь их задача — следить, чтобы сайты всегда работали гладко и без сбоев, но не всегда получается)

С момента появления первых веб-страниц интернет сильно изменился. Если раньше веб-разработчик отвечал за всё — от написания кода до оформления, то сегодня сфера веб-разработки включает UX/UI-дизайн, поисковую оптимизацию, маркетинг и кибербезопасность.

🩵 Поздравляю всех веб-разработчиков. Пусть ваши сайты падают реже)

YouTube | RuTube | Telegram | Pikabu

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии0

Представлена история дизайна машин «Формулы-1» и гоночных технологий с 1950 года по 2025 год. Это познавательный и информационный портал с исторической статистикой по пилотам. командам и данным по болидам.

Теги:
Всего голосов 3: ↑3 и ↓0+4
Комментарии2

После выхода Firefox 136 оказалось, что разработчики значительно испортили переработали стартовую страницу (about:newtab). В комментарии к новости о релизе я уже поделился своим решением, но по мере того, как подмечал новые детали, решил завести под это дело отдельный пост и время от времени допиливать его. Коротко о том, что мы исправляем: сетку с шорткатами сделали слишком узкой, слишком высокой, а при наведении курсора подпись «прыгает».

Прежде всего, для этой задачи не помогут аддоны типа Stylus, потому что по соображениям безопасности им запрещён доступ к стилизации внутренних страниц. Нам понадобится папка chrome в профиле FF. Под Windows это \AppData\Roaming\Mozilla\Firefox\Profiles\profile\chrome. Если вы хотите подправить что-то в интерфейсе (стилизовать тулбар, например), создайте там файл с именем userChrome.css. Например, так можно удалить недавно появившуюся кнопку для показа всех вкладок:

#alltabs-button
{
display: none !important;
}

Но нам нужно поменять содержимое стартовой страницы, поэтому создадим в той же папке файл userContent.css.

Сетка стала узкой и высокой, потому что кто-то из дизайнеров поменял местами промежуток по горизонтали (20px → 0) и вертикали (0 → 20px). Будем надеяться, что хоть сознательно.

Вернём всё как было (ну, или можете установить свои значения):

ul.top-sites-list
{
column-gap: 20px !important;
row-gap: 0 !important;
}

Длинные заголовки при наведении мыши прыгают потому, что включается (при наведении, да!) режим переноса по словам. Пожалуйста, никогда так не делайте в пользовательских интерфейсах. Я не страдаю эпилепсией, но даже меня затошнило. Что уж говорить о более сенситивных личностях.

Исправляем:

.top-sites-list .top-site-outer .title .title-label
{
white-space: nowrap !important;

-webkit-line-clamp: none !important;
}

Ну и, наконец, шорткат можно сделать чуть побольше. Размеры его элементов рассчитываются на основе переменной, которая имеет значение 32px. Если добавить 4 пикселя, шорткат будет выглядеть, КМК, поприятнее:

:root
{
--size-item-large: 36px !important;
}

P.S. Пользуясь случаем, хочу попросить рекомендаций: чем вы пользуетесь в качестве главной страницы? Чтобы там были шорткаты (с полноценными preview, которые зачем-то убрала Мозилла), погода, калькулятор и что-нибудь ещё? Думаю, не запилить ли свой аддон со всем этим блэкджеком.

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии2

Представлен проект Scroll Buddy — анимация на полосе прокрутки.

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

Теги:
Всего голосов 2: ↑2 и ↓0+3
Комментарии2

Иконки-кнопки и кнопки-иконки: как дизайнеру не совершить ошибку и не запутать окружающих

Хочу поделиться одним из хороших тонов в работе с нашими любимыми кнопками. Для кого‑то это может быть открытием, а для кого‑то устоявшейся базой. Общее здесь только одно — это успех данного подхода.

Иконки-кнопки

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

Почему иконки-кнопки — это не очень хорошо?

  1. Мы искажаем формулировку

    Когда мы говорим «кнопка», мы подразумеваем объект с чёткими паттернами и функциональными требованиями. Иконка же изначально — это графический элемент, а не кликабельный объект. С таким подходом один и тот же элемент может быть как кнопкой, так и просто графикой.

  2. Коммуникация

    В данном случае мы не разделяем сущности. Разделение же на «иконку» и «кнопку-иконку» упрощает общение с разработчиками. Иконка — это графика, а кнопка-иконка — кнопка с графическим элементом. Это помогает избежать путаницы, когда рядом находятся кликабельные иконки и просто графические элементы.

  3. Размер контейнера

    Тач-зона иконки-кнопки обычно ограничена размером самой иконки. Это делает её неудобной для использования, особенно если иконка маленькая. Можно увеличить тач-зону, но тогда есть риск наложения контейнеров, если иконки расположены близко друг к другу.

  4. Дисбаланс

    Иконки-кнопки плохо сочетаются с кнопками-иконками из-за разницы в размерах и визуальной иерархии. А также система может не поддерживать иконки одинаковых размеров в разных сущностях.

  5. Исключения

    Иконки Info — по ховеру или клику на которые появляется тултип с подсказкой. Для таких случаев можно заложить отдельную логику, согласованную с разработчиками. Обычно так поступают с логикой по ховеру, т.к. она отличается от логики ховера с кнопкой.

Кнопки-иконки

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

Почему кнопки-иконки — это мастхэв?

  1. Чёткость формулировок

    Нет путаницы: это кнопка с функцией действия, а не просто графический элемент (иконка)

  2. Упрощают коммуникацию

    На созвонах с разработчиками мы чётко понимаем, о чём идёт речь: о кнопке или о графическом элементе

  3. Системные размеры контейнеров

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

  4. Баланс

    Хорошо выстроенная система кнопок-иконок сбалансирована и не требует лишних усилий для выравнивания элементов

  5. Ghost кнопки

    Если нужно отобразить графический элемент без подложки, используйте ghost-кнопки. Они сохраняют функциональность кнопки, но выглядят как «голая» иконка.

Итого

Использование кнопок-иконок вместо иконок-кнопок предполагает:

— Упрощение коммуникации
— Соответствие логике сущностей
— Соответствие названий элементов интерфейса логике сущностей
— Понятные и простые тачзоны
— Нативная поддержка системно сбалансированных сущностей
— Есть исключение в виде icon info

А вы выносите в отдельные компоненты кнопки с иконками? Или поддерживаете кнопки с полным набором атрибутов: иконки, текст, каунтеры и другим?

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии0

Вклад авторов