Fullstack Founder

Рубрика: Uncategorized

  • Клиент забыл, какой хостинг у его сайта

    Клиент забыл, какой хостинг у его сайта

    Два раза за последние сутки разыскивали потерянные хостинги для клиентов.

    Порядок действий:
    0) Домен-то вы знаете? 😆
    1) Нужно посмотреть в DNS куда направлена A-запись этого домена.
    Для консольщиков:
    Команды nslookup (Windows) или host (macOS/Linux).

    $ host fullstackfounder.ru  
fullstackfounder.ru has address 46.173.18.24

    Для нормальных людей:
    Идём на сайт https://mxtoolbox.com/, выбираем режим DNS Lookup.
    Сразу видим IP-адрес и в чьём диапазоне он находится.

    2) Узнаём, за кем закреплён IP-адрес
    Идём на сайт https://ipinfo.io/ и вводим полученный IP-адрес.
    Тут написана компания, которая получила диапазон IP-адресов, а также email для жалоб. Из этого email очевидно, какой сайт у хостинга.

    Это может не сработать, если IP окажется в диапазоне Cloudflare или другого прокси. Тогда путь начинается с восстановления доступа к этому прокси — ищем в переписке по названию сервиса и пробуем попасть вначале туда. Там в панели будет DNS и настоящий IP-адрес.

    3) Пишем в поддержку найденного хостинга с просьбой восстановить доступ. В идеале — с официального ящика компании, указанного на сайте. Может понадобиться запрос на бланке организации или визит с паспортом в офис.

    Эта последовательность действий должна помочь выявить хостинг в большинстве случаев.

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

  • Выводы с прожарки КП

    Выводы с прожарки КП

    Сегодня в клубе Галера в прямом эфире я с коллегами-экспертами разбирал два десятка коммерческих предложений (КП) диджитал агентств.

    Рефлексирую полученный опыт в виде чеклиста:
    – На обложке КП нужно написать русским по белому какая именно услуга предлагается, название клиента и название агентства.
    – После обложки хорошо бы кратко представить агентство и вызвать доверие логотипами клиентов, рейтингами и значимыми цифрами.
    – Если показываете фотографию одного только основателя, агентство воспринимается как лавочка фрилансера. Покажите групповое фото или кружочки с командой.
    – Дизайн продаёт без слов. Возьмите на создание шаблона КП лучшего дизайнера, которого только сможете себе позволить — это быстро окупится.
    – КП нужно адаптировать под клиента и писать на языке клиента. Многие КП сделаны на языке агентства и клиенту не понятны.
    – Смету, медиаплан, десяток подробных кейсов, аудит и даже концепцию можно приложить дополнительными документами и дать ссылки.
    – Подрядчики на трафик любят делать разбор рынка клиента и его конкурентов. Выглядит, как будто агентство напрашивается на проверку домашки.
    – Агентства склонны сильно раздувать КП. Клиент не будет читать 40 слайдов, у него лежит целая пачка таких же КП. Нужно учиться зацепить клиента в 10 слайдов, включая обложку.
    – На последнем слайде — контактные данные менеджера по продажам и название агентства ещё раз. На этом слайде больше ничего не нужно.
    – Цена должна быть на одной из первых или последних страниц. Если она спрятана в середину КП, её будет очень сложно найти.
    – Не стесняйтесь писать цену большим шрифтом и заметно. Клиент ожидает, что вы назовёте цену, не нужно её прятать в таблицах.
    – Цена должна содержать полную стоимость для клиента: со стоимостью услуг агентства, рекламным бюджетом и НДС. Часто указывают только стоимость услуги, хотя клиент будет оплачивать всё вместе.
    – Окупаемость нужно считать исходя из полных затрат, включая услуги агентства, а не только из рекламного бюджета.
    – Указывайте на какой системе налогообложения вы работаете. Клиентам с НДС это важно.

    Вижу, что формат прожарки КП очень популярен в клубе. Так и просится собрать набор универсальных правил) Вместе с тем, я понимаю, что КП может успешно продавать своему покупателю и нарушать при этом все правила.

    Поэтому, универсальная рекомендация:
    – Сделать партизанскую разведку, чтобы отстроить КП от конкурентов.
    – Регулярно улучшать и изменять КП по результатам продаж.

  • Favicon для сайта

    Favicon для сайта

    Фавикон — иконка для избранного. То самое лого сайта с вкладки браузера.
    Раньше это была иконка 16х16px, но сейчас для корректной работы на всех устройствах можно сделать до 27 изображений разного размера и формата.

    В сети много сложных и местами противоречивых инструкций про favicon и его поддержку разными устройствами. Я перебрал несколько десятков и вот мои выводы.

    Favicon используется:
    – В заголовке или на вкладке браузера
    – В поиске Google и Яндекс — около названия сайта будет показана иконка
    – В разных программах, которые работают с сайтами.
    – В качестве иконки на мобильнике, если пользователь сохранит сайт на рабочий стол

    Для полной поддержки нужен векторный логотип компании, из которого мы будем делать полный набор:
    – SVG-иконку, которая автоматически включает темную или светлую версию под тему оформления пользователя (а что, так можно было?).
    – PNG 512х512 и 192х192 без полей под Android.
    – PNG 512х512 и 180х180 с отступами от края под iOS.
    – PNG 32х32 и 16х16, запакованные как favicon.ico для совместимости со старыми девайсами.
    – JSON-файл manifest.webmanifest в корень сайта со ссылками на файлы иконок для мобилок и PWA.
    Полный гид по техническим подробностям от Злых Марсиан (обновлено в 2025 году).
    Инструкции такого размера ради одной иконки меня удручают. Выглядит как подарочный ребус для досуга дизайнера.

    Лайфхак: У моего блога ещё нет логотипа. Поэтому я решил взять в качестве иконки обычную эмодзи. Пусть будет 🤖

    Найденный сайт позволил выбрать эмодзи и сразу получить набор иконок всех нужных размеров. Не хватает только SVG-версии. Её нахожу на другом сайте по запросу robot emoji svg download. Обойдусь без тёмной версии, её создание выглядит для меня трудозатратно.
    В обоих случаях это одна и та же иконка из бесплатного набора, который выпустил Twitter под open source лицензией MIT — можно использовать в качестве фавиконки ничего не нарушая.

    Ещё полезные ссылки:
    – Генератор иконок из вашей картинки
    – Упаковщик favicon.ico
    – Инструкция как сделать SVG-иконку с темной и светлой версией

  • Почему я выбираю VDS?

    Почему я выбираю VDS?

    Логично для блога выбрать минимальный тариф на обычном дешёвом хостинге — на так называемом Shared. На таких тарифах на одном сервере размещены сотни клиентских сайтов. Админ хостинга уже настроил все службы и программы, чтобы обычный пользователь мог про это не думать.
    Но я для блога беру минимальный виртуальный сервер примерно за те же деньги. Для меня это полная свобода действий.

    Вот что я смогу сделать на VDS и не смогу на обычном хостинге:
    – Разместить на одном сервере сколько угодно сайтов и привязать к ним любое количество доменов.
    – Динамически менять ресурсы на сервере.
    – Не переживать, что мой сайт перенесли на другой сервер, поэтому нужно поменять IP-адрес в DNS. На шаред хостингах это могут делать несколько раз в год, нужно следить за уведомлениями, чтобы сайт не перестал работать.
    – Настроить сервер под меня с помощью пары ansible-скриптов.
    – Поставить нужный мне веб-сервер Caddy или кастомную сборку NGINX. Избежать Apache2, который до сих пор часто работает на шаред хостингах.
    – Разместить публичную папку сайта в любой папке, а не только в предварительно за меня выбранной public_html. Для моей сборки WP или Laravel это важно.
    – Установить git, composer, WP-CLI нужных мне версий и обновлять их самому.
    – Поставить любую версию PHP с нужными расширениями и оптимизировать все настройки, включая OpCache.
    – Настроить все параметры для базы данных MySQL.
    – Добавить сборщики для фронта (npm, pnpm).
    – Добавить memcached для кэширования в оперативной памяти — пригодится для ускорения WordPress.
    – Управлять логами, менять их формат, включать дополнительные логи для медленных скриптов и запросов. Размещать логи в нужной мне папке.
    – Поставить CI-агента от GitLab, который будет автоматически обновлять сайты после внесения изменений в Git.
    – Отключить FTP-протокол, чтобы сайт не взломали через утечку FTP-паролей.

    Создал VDS у Beget за 290 рублей в месяц.
    Конфигурация: CPU 1 core, 2 GB RAM, 10 GB NVMe, Ubuntu 24.04.

    Посты по теме:
    – План запуска блога
    – Удобный SSH-доступ
    – Выбор хостинга для сайта

  • PNG наносит ответный удар

    PNG наносит ответный удар

    Прошло 20 лет с момента выхода графического формата PNG. Это был не очень понятный формат: JPG лучше сжимал фотографии, GIF можно было анимировать. Единственным явным преимуществом PNG была поддержка полупрозрачности. Помню, чтобы заставить его работать в Internet Explorer 6, приходилось добавлять на сайт дополнительный скрипт.

    На самом деле ценность PNG — в расширенной цветопередаче и компрессии без потери качества (в отличие от JPG).

    Этим летом Adobe, Apple, BBC, Comcast / NBCUniversal, Google, MovieLabs и консорциум W3C объединились и обновили спецификацию формата PNG.

    Что изменилось:
    – Добавлена поддержка HDR — расширенная цветопередача. Именно из-за этой фичи формат решили обновить, что интересно — в интересах субтитров для телетрансляций и кинофильмов.
    – Добавлена поддержка EXIF — метаданные в картинках.
    – Повсеместно внедрены анимированные PNG. Это предлагала Мозилла 20 лет назад, но их тогда не поддержали.
    – В целом, улучшили документацию стандарта.

    Обновленный формат уже поддерживается в Chrome, Safari, Firefox, iOS/macOS, Photoshop, DaVinci Resolve, Avid Media Composer.

    Ожидается скорый выход новых редакций формата, в которых обещают ещё улучшения по цветопередаче и сжатию.

    Спецификация PNG ver. 3
    Статья как работают цветовые пространства от одного из создателей формата

  • Пеликаны на велосипедах

    Пеликаны на велосипедах

    Вам тоже надоели сравнения нейросетей (LLM) между собой? Огромные таблицы с непонятными цифрами, которые понимают только специалисты. Есть более наглядный вариант для бенчмарка. Саймон Виллсон, бывший техдир Eventbrite и один из создателей фреймворка Django, уже несколько лет сравнивает способности LLM на одной задаче:
    Сгенерируй SVG-изображение пеликана, едущего на велосипеде

    Почему эта задача так хороша?
    – SVG — формат для векторной графики, но эта графика описана текстом в виде XML-кода. То есть, это и текст, и код, и изображение одновременно!
    – Нарисовать велосипед — не самая простая задача даже для взрослого человека. Многие не могут вспомнить, как выглядит рама или руль.
    – Пеликан в векторном виде будет мультяшным, его тоже не просто нарисовать.
    – Пеликаны не ездят на велосипедах! Велосипеды не приспособлены для них. Нужно проявить изобретательность, чтобы сделать такую картинку.

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

    Занимательные ссылки:
    – Свежие пеликаны на велосипедах
    – Самая ранняя подборка пеликанов на велосипедах
    – Подробный обзор LLM за последние полгода и много пеликанов

  • Выбор и регистрация домена

    Выбор и регистрация домена

    Иногда я покупаю домены и они лежат на полочке годами, ждут проект. Иногда я не могу придумать домен для проекта неделями.

    Самое главное, что облегчает выбор названия — чёткие критерии выбора.

    Мои критерии при выборе домена:
    – фонетически однозначен — легко правильно записать или запомнить.
    – не содержит дефис — это лишнее слово, если нужно произнести домен вслух.
    – в популярной доменной зоне (ru, com) или отраслевой (fm, agency, vc).
    – смотрю на стоимость продления — это гораздо важнее стоимости регистрации.
    – желательно меньше слов в названии.

    В первую очередь иду на Namecheap в режим поиска домена Beast Mode. Деньги из
    России этот сервис принимать не хочет. Зато здесь лучший поиск по новым и экзотическим доменным зонам. 1200 доменных зон — есть из чего выбрать и почерпнуть идеи.

    Обнаружил там доменные зоны blog, dev, tech, technology, expert. По названию блога начал накидывать слова: CTO, sensei, techdir, fullstack founder. Из всех очевидных сочетаний fullstackfounder.blog оказался свободен — и всего за $3! Длинновато, но полностью отражает суть.

    Дальше иду к российским регистраторам доменов, ведь я хотел бы продливать домен за рубли. Тут меня ждут сюрпризы. В скобках указана стоимость продления. Reg не указывает стоимость продления — это может оказаться ловушкой с иностранным доменом.

    Сравнение для домена fullstackfounder.ru
    namecheap — недоступно
    nic — 189 р. (590 р.)
    reg — 119 р. (?)
    beget — 179 р. (390 р.)

    Сравнение для домена fullstackfounder.blog
    namecheap — $3 ($24)
    nic — недоступно
    reg — 531 р. (?)
    beget — 2930 р. (4010 р.)

    Каждый раз нужно проверять стоимость регистрации у разных регистраторов. Как видите, цена может отличаться в несколько раз.

    По итогу сравнения беру ru домен у Reg. Отказываюсь от всех сопровождающих услуг при заказе — они не нужны, сервис навязывает лишние платежи. Также следую правилу держать домен отдельно от хостинга, поэтому хостинг возьму отдельно.

  • Как агентству зарабатывать дополнительные деньги

    Как агентству зарабатывать дополнительные деньги

    Агентство выбирает и подключает в проекты клиента множество сервисов:
    – Хостинг и домены
    – Эквайринг
    – CRM или складские системы
    – Телефонию
    – Колл-трекинг и сквозная аналитика
    – E-mail-рассылки
    – SMS-рассылки
    – Мониторинг сайта
    – Пополнение рекламных кабинетов

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

    Клиенту выгодно прислушаться к агентству:
    – именно с этим сервисом сотрудники агентства умеют работать, а значит будет меньше ошибок и быстрее работа
    – партнёрская программа зачастую даст выделенную техническую поддержку, а значит более внимательное отношение и решение проблем
    – возможно, что будут дополнительные бонусы, специальные предложения или особые тарифы
    – партнёрская комиссия уже заложена в бизнес-модели сервиса, а значит цена для клиента не изменится
    – агентство больше любит и ценит клиентов, подключающихся через него к сервисам

    Все станут богаче, если клиенты будут подключать все сервисы через агентство.

  • Как узнать размер рыночной зарплаты?

    Как узнать размер рыночной зарплаты?

    Специализированные сервисы или консультация HR не всегда доступны, а ответить на этот вопрос можно за 5 минут простым исследованием.

    На HH ищу нужную мне специальность Laravel по базе резюме, чтобы понять ожидания кандидатов. Я сравниваю удалёнку, поэтому удаляю из фильтов свой город. Ставлю Полный день в графике работы. В Специализации, выбираю нужную мне: Программист, разработчик.
    Скролю ниже до Уровня дохода и видим гистограмму — самую информативная часть исследования. Тут вижу моду — самое частое значение, самый высокий столбик.
    В моём случае найдено 2849 резюме, из них 2300 активно ищут работу. Самый популярный на гистограмме диапазон 95 000 р. — 185 000 р. с 894 резюме.

    Далее переключаюсь в вакансии, чтобы понять ситуацию со стороны работодателей.
    Также ввожу Laravel и проматываю колонку с фильтрами до Специализации, отмечаю Программист. Включаю тип занятости “Полная занятость”.
    Вижу, что найдено всего 607 вакансий и вот такое распределение по количеству, выполненное в виде неудобного перехлёста диапазонов. Чтобы его проанализировать, нужно перевести числы в проценты от общего числа вакансий.

    Зарплата — Количество вакансий
    ≥ 80,000 ₽ — 312 (51%)
    ≥ 155,000 ₽ — 213 (35%)
    ≥ 235,000 ₽ — 80 (13%)
    ≥ 310,000 ₽ — 27 (4%)
    ≥ 390,000 ₽ — 11 (2%)

    Мои выводы:
    – 607 вакансий на 2300 кандидатов, соотношение примерно 1:4. На одну вакансию 4 кандидата. Выглядит как рынок работодателя, чтобы ни говорили СМИ про состояние всего рынка труда.
    – Грубо, примерно половина вакансий предлагает ЗП выше 80 000 рублей, а половина — меньше.
    – Треть вакансий с ЗП выше 155 000 рублей.
    – Только 4% выше 300 000 рублей.
    – Вычитаю из количества вакансии дороже 80 тысяч вакансии дороже 155, получаю примерно 100 вакансий. Они частично попадают в самый популярный у соискателей диапазон зарплаты. На него же приходится 894 резюме… соотношение 1:9.

    Заключение:
    В зависимости от потребности, можно искать хорошего кандидата немного дешевле 150 000 рублей или нанимать топа не дороже 300 000 рублей. Моё мнение, что джун должен получать при такой конкуренции и ставках не больше половины медианной зарплаты. В данном случае, это немногим больше ­40 000 рублей.

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

  • Среда для приложения

    Среда для приложения

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

    Дев (dev, development, local, IDE) — тут сидит разработчик, приложение раскрыто и подключено к приборам, лампочки, мониторы, кишки наружу. Хирургическое отделение, идёт операция. По итогу работы приложение будет передано на следующую стадию разработки.

    Тест (test, QA) — тут его всячески проверяют. Заводятся выдуманные пользователи, которые выполняют заготовленные сценарии с синтетическими данными. В роли тестировщиков выступают и люди, и роботы. Их задача — найти ошибки и вернуть приложение разработчикам на исправление или отправить на следующую стадию.

    Демо (Demo, Review) — приём приложения у менеджеров. Смотрят продакт, проджект и аккаунт-менеджеры, представители клиента, стейкхолдеры.
    Часто демонстрацию проводят на стейдже или тесте, не создавая отдельное окружение.

    Стейдж (staging, stage) — тут разворачивают приложение на копии настоящих данных (иногда анонимизированных), проводят финальные тесты на совместимость, интеграцию с другими системами и делают проверки перед выходом в свет. Окружение максимально приближенное к проду.

    Продакшн (прод, prod) — тут с приложением случается релиз — его опубликовали и теперь с ним работают реальные пользователи. Это финальная стадия — эксплуатация. Акцент на надёжность, скорость работы и сохранность данных.

    Чем моложе, меньше и проще у вас приложение, тем меньше окружений будет задействовано в цикле его жизни. В самом начале разработки у вас будет только Дев. По мере усложнения процесса разработки будут появляться дополнительные окружения.