Антон One Way | Разработка для онлайн-школ | GetCourse PRO

🛌 Верстальщики могут спать спокойно и не бояться конкуренции от нейросетей, пока на создание дизайн-макетов нанимают дизайнеров без опыта веб-дизайна 🤵 Верстка в вебе — это процесс воссоздания на реальной веб-странице того, что изобразил в макете дизайнер. Процесс это рутинный и кропотливый, поскольку каждый элемент нужно прокликать и посмотреть его свойства, чтобы написать эти свойства в виде кода разметки CSS 👨‍🎨 Figma этот процесс в свое время упростила. Платформа сама ведет учет расстояний, позиций, цветов и других свойств, чтобы разработчик мог копировать свойства, а не подбирать на глаз, как это было с макетами в фотошопе, к примеру 😒 Для автоматизации верстки нейросетями к Figma прикрутили возможность передавать структуру элементов и свойства в нейросеть, чтобы ей не приходилось верстать на глаз. Казалось бы, вот она автоматизация? 🤭"Как бы не так!" — скажет дизайнер, у которого кнопка отрисована как отдельно текст, отдельно иконка, фон состоит из отдельного прямоугольника и наложенными слоями картинок размерами 1920х1024 при размере самой кнопки 300х55. Текст при этом не вписан в границы кнопки, а расположен независимо от фона. Поменяли текст или размер шрифта — кнопка потеряла пропорции. 🦜 Эффекты наложения, которых не существует в вебе? Сюдааа. В идеале сделать несколько слоев таких эффектов, чтобы для воссоздания вида на глаз нужно было оркестровать сразу всеми. Красота требует жертв, и нет ничего красивее, чем разработчик в мыле и с выдранными волосами 😭 Элементы, которые могут меняться в размере в зависимости от контента (кнопки, формы, карточки) такой дизайнер сделает строго по размеру "рыбы". Притом выставляя размеры, он будет мышкой или тачпадом тянуть за край элемента, после чего отступы в каждом таком элементе будут разные и не кратные ничему. Почему отступы по четырем сторонам 23px 39px 18px 40px? "Я дизайнер, я так вижу" — будет ответ 🐸 Когда с такими макетами работает разработчик, зачастую проще исправить макет и сделать, чем объяснить заказчику или дизайнеру. Дизайнер будет утверждать, что "раньше никто не жаловался", "я не программист", а заказчику терки смежных специалистов тем паче не интересны. Хотя казалось бы, разве нужно быть программистом чтобы думать о том, что текст кнопки могут переименовать, из-за чего кнопка должна красиво адаптироваться под разный размер текста? 🐈 Когда с такими макетами работает нейросеть, она делает 1в1 как в макете. Кнопка сделана как 4 независимых элемента, а не единый компонент? Тогда так и будет. Что вебом не поддерживается, будет выглядеть как баг 🤔 Мораль сей басни такова: если вам придется верстать макеты с Figma с помощью MCP TalkToFigma силами нейросети — не всё, что по итогу выглядит криво, является галлюцинациями нейросети. Иногда галлюцинации имели место быть еще раньше, когда дизайнеру карточек товаров для Авито или рекламных макетов показалось, что он веб-дизайнер

Одно из моих оформлений попало в список финалистов 😎 Буду благодарен за голос, хотя больше все-таки отдавайте предпочтение тому, за что искренне хотелось бы проголосовать 💪 https://t.me/getcourse_official/3689

Второе оформление, которое я показал на конкурсе - клубное, я делал его для фитнес-клуба FitSpo. Тут задача была совсем другая. В клубе нет потоков в привычном смысле. Ученики приходят в любой момент и двигаются по своему флоу, а оформление должно само подстраиваться под разные сегменты учеников Логику расписания я построил так, чтобы она собиралась автоматически. · Если у ученика демо-доступ, его неделя формируется из заранее заданного пула уроков. · Если доступ основной, расписание берётся из каталога по времени старта уроков и раскладывается по неделям, которые можно листать вперёд и назад. К каждой тренировке ещё подтягивается информация с отдельного сервера (длительность в минутах, тренер, оборудование, тип тренировки, сложность и теги). Этот внешний сервер также расположен на GetCourse, просто дополнительные данные грузятся отдельным потоком (уроков, как-никак, сотни) Каталог тренировок — основной самый используемый раздел. Сверху блок-слайдер с подборкой тренировок и мини-курсами, а дальше фильтры по разделу, тегам, типам, тренерам, чтобы человек быстро собрал под себя именно то, что ему сейчас нужно. Понравившийся урок можно лайкнуть, и он тут же уходит в избранное. По такому же принципу работают разделы питания и базы знаний: всё тегируется, всё лайкается, а разделение на вкладки идёт по стандартной геткурсовской логике подтренингов, так что администратору это не добавляет никакой лишней возни. Он привычно редактирует состав подтренингов, а для новых нестандартных свойств редактирует их в нативной админке там же на геткурсе Сам пост на конкурсе в чате GetCourse

без подписи

без подписи

без подписи

Пускай мои оформления и не выигрывают голосований, однако теперь админки в них будут вообще всегда и максимально нативные Параллельно с текущими проектами пилю свой редактор для конструктора тренингов и для блоков страниц и уроков. IDE или API не требует, а реализовать можно абсолютно любой как хочешь гибко настраиваемый кастомный блок (хоть зеро-блок как в тильде). Ограничения из-за стандартных блоков — давайте до свиданья ☕️

Какой проект вам понравился больше всего? 🔥

без подписи

без подписи

Оформление для Школы органического земледелия на платформе GetCourse. Так как я уже много лет работаю с ШОЗ, помимо соответствия макету мне сказали "сделай как можно более автоматизированным". Я постарался убрать из работы техспецов всю рутину, которая обычно съедает время между потоками и может привести к ошибкам из-за "замыленного глаза". Картинки для тренингов теперь можно загружать прямо из общего списка, не проваливаясь в настройки каждого урока по отдельности. Длительность видео в уроке считается автоматически. Для части уроков настраивается автоматический дедлайн и число дней на дедлайн. После пропуска дедлайна ответы учеников принимаются автоматически заранее настроенной отбивкой, экономя время кураторов Отдельно я собрал бонусную механику, которой в школе особенно не хватало. Ученик набирает баллы по шкале, переходит на витрину, и бонусные рубли начисляются автоматически, с сохранением истории начислений, чтобы не было ни задвоений, ни лишнего. Никаких процессов порционных пересчетов баллов шкалы в бонусы, а вся настройка состоит в выборе шкалы на копированной странице витрины Корзину я чутка переопределил под диз по структуре и перекрасил, а промокоды и карточки со скидками можно быстро переносить из потока в поток кастомным экспортом и импортом блоков. Сам пост на конкурсе в чате GetCourse Не стал писать в конкурсном посте слишком подробно про используемые технолоджии, скажу лишь что для кастомных блоков я во многих местах теперь отхожу от использования IDE и использую способы, которые доступны в 100% аккаунтов GetCourse, за счет которой компоненты грузятся быстрее 😉 Теперь все чаще буду применять именно этот способ для создании кастомов для гк

GetCourse проводит конкурс на лучший дизайн на платформе 👇 Показываю две свои работы

без подписи

без подписи

И еще одно оформление :з

Вайбкодинг и платформы Вчера завершил миграцию проектов клиента с платформы для вайбкодинга, о которой я не раз писал в канале, на обычный хостинг Почему было принято такое решение? ❓ 1. Независимая инфраструктура. Пока я работал с платформой, я буквально в каждом проекте упирался в ограничения. На своем хостинге это всегда решаемая задача, на чужой платформе нужно ждать, пока другие люди (со своими приоритетами в задачах) создадут возможности для решения, после чего ты за купленные токены будешь протаптывать дорожку там, где нет документации. Тогда как сама суть вайбкодинга — сделать своё там, где нет удобных конструкторов (ведь платить недорогую подписку всяко проще, чем проходить весь цикл разработки даже с нейросетями) 2. Цены на подписки. Виртуальный хостинг стоит в пределах одной тысячи рублей, выделенный сервер вполне можно взять за 3 тысячи рублей. Подписка на нейросеть на месяц — меньше 2 тысяч рублей. Большинство разработок, которые по итогу вайбкодят люди, легко можно расположить на самом дешевом варианте. Нейросети без проблем могут накидать на нем сайт, при этом непосредственно на итерации разработок вы деньги уже не потратите 3. Простая миграция. Мигрировать с платформы без разработчика невозможно, да и с разработчиком это та еще задача со звездочкой — в лучшем случае многое придется переписывать. Если же проект изначально вайбкодили без платформ — вы можете заменить "запчасти" проекта в любой момент. Оператор серверных мощностей, хранилища, видеохостинг или платежная система перестали устраивать вас по условиям? Замените ее одним днем. Независимость от чьей-то конкретной инфраструктуры защищает вас от изменений условий обслуживания 4. Новейшие технологии. Нейросети развиваются семимильными шагами (как минимум пока они в тренде). Новые "скиллы", MCP и прочие возможности нейросетей всегда будут появляться раньше у самих нейросетей, а к платформам они будут разве что адаптироваться. Не завися от платформы можно выбрать различные программы управления нейросетями. Какие-то лучше откатывают неудачные итерации, какие-то лучше и прозрачнее рассуждают, с платформами же оператор может добавить только те функции, которые можно добавить в рамках его инфраструктуры 5. Конфиденциальность разработок. Когда ваш проект не расположен целиком на одной платформе, операторы "запчастей" вашего проекта знать не знают, что вы там разрабатываете. К вашим разработкам не будут иметь прямого доступа сотрудники операторов данных, обладателем ваших "средств производства" остаетесь только вы Теперь если ко мне будут обращаться за разработками чего-либо с нуля, то я всегда буду рекомендовать работу без конструкторов и платформ 😉