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

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

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

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

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

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

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

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

❤️ Жми на сердечко, если интересно
⚡️ Жми на молнию, если полезно
🧑‍💻 Жми на ботана, если программист

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

Специализированные сервисы или консультация 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 рублей.

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

❤️ Жми сердечко, если интересно
⚡️ Жми молнию, если полезно
🏆 Жми на кубок, если нанимаешь сотрудников

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

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

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

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

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

❤️ Жми сердечко, если интересно
⚡️ Жми на молнию, если полезно
🏆 Жми на кубок, если уже зарабатываешь на партнёрках

План запуска блога

Когда сталкиваешься со сложной задачей, начинаешь в первую очередь делать то, что уже умеешь. Я столкнулся с задачей по набору читателей в канал и не могу успокоиться, пока не попробую решить этот вопрос как умею — сделаю сайт! Решил, что хочу себе олдскульный блог.

У блога по сравнению с каналом куча преимуществ:
- Посетители смогут найти эти статьи в обычном поиске.
- Этим же посетителям я предложу подписаться на социальные сети.
- Можно будет публиковать статьи на сайт и автоматически кросс-постить в разные каналы: Телеграм, ВК, Дзен, E-mail-рассылку.
- Если какую-то социальную сеть забанят или удалят мой аккаунт, контент останется у меня.
- Нейросети будут обучаться на моих статьях, внесу вклад в общие знания.
- На сайте можно будет размещать рекламу.

Чтобы зафиксировать достижение, поставлю себе измеримую цель:
- через 1 месяц — запустить блог и начать кросс-постинг
- через 12 месяцев — получать больше 10 000 читателей на сайте ежемесячно

Для этого буду использовать самый популярный движок для блога WordPress. В серии постов я пройду весь путь от идеи до первых посетителей. Буду ставить себе задачи в трекере и учитывать время по таймеру. Расскажу про все возникающие препятствия. Хочу сделать из этого сайта самый технологически навороченный WordPress на сегодняшний день.
Буду писать про это несколько раз в неделю. Покажу и техническую изнанку, и маркетинговую составляющую, и контентную кухню. Все цифры раскрою.

❤️ Жми на сердечко, если это интересно
🏆 Жми на кубок, если будешь наблюдать за забегом
🧑‍💻 Жми на ботана, если тоже делаешь сайты

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

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

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

Мои критерии при выборе домена:
- фонетически однозначен — легко правильно записать или запомнить.
- не содержит дефис — это лишнее слово, если нужно произнести домен вслух.
- в популярной доменной зоне (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. Отказываюсь от всех сопровождающих услуг при заказе — они не нужны, сервис навязывает лишние платежи. Также следую правилу держать домен отдельно от хостинга, поэтому хостинг возьму отдельно.

❤️ Жми на сердечко, если интересно
⚡️ Жми на молнию, если полезно
🧑‍💻 Жми на ботана, если владеешь доменами

NFT-коллекция аватаров PostHuman

Как отдыхает программист? Пишет код для удовольствия!

На днях произошёл запуск NFT-коллекции, в работе над которой я принял участие в качестве разработчика. В проекте работает команда: менеджмент, дизайнеры, коммьюнити-менеджеры и партнёры.

Наши пиксельные аватары сделаны по принципу знаменитых Крипто Панков. Слои с головой, одеждой, причёсками и глазами комбинируются случайным образом. У других авторов аватары заранее генерируются, отбираются куратором и лучшие публикуются на блокчейне как коллекция. У нас всё получилось гораздо мощнее — фабрикатор постоянно онлайн и у коллекции нет модератора. Автомат генерирует случайные комбинации из 13 видов слоёв, от заднего фона до цвета глаз. Выпадет одна из 615,000,000,000,000,000 комбинаций!

Как работает механика:
- Валидатор Posthuman и Omniflix.TV распространяют NFT-сферы своим пользователям. Многие получат сферу бесплатно или за какие-то активности. Также сферы можно купить на маркете.
- Сферы работают как билеты или жетончики. Их можно отправить в автомат, который сгенерирует новый NFT-аватар.
- Аватар можно использовать в приложениях экосистемы или продать на маркете.
- Аватар будет случайный, поэтому может не понравится пользователю.
- Аватар можно за небольшую плату сдать в регенератор и получить взамен новую сферу.
- Это вызывает цикл обменов и генераций, пока не выпадет подходящий аватар.
- Аватары бывают трёх рас: Человеки (разного пола и цвета кожи), Роботы и Пришельцы.
- Аватары и сферы бывают разной редкости: Обычные, Бронзовые, Серебряные, Золотые, Платиновые, Бриллиантовые.
- У частей картинки разная вероятность выпадания. Робот в шапке-ушанке более редкий, чем просто робот. Костюм космонавта более редкий, чем рубашка.

Как заработать на NFT-аватарах? Я не знаю — я программист :]
Можно генерировать редкие классные аватарки и продавать на маркетплейсе. Сейчас это дополнительное развлечение для участников блокчейн-экосистемы. Мы запустились пару дней назад, а уже создано 1200 аватаров.

Промо-лендинг коллекции https://avatars.posthuman.digital/
Сгенерированные аватары на маркете: https://omniflix.market/c/collectNow/onftdenomf3c4a963c49747039217eba1dc10282e
Посмотреть, какие аватары выпадают прямо сейчас https://t.iss.one/posthuman_avatars
Автомат по генерации аватаров https://mint-posthuman-avatar.omniflix.market/

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
Статья как работают цветовые пространства от одного из создателей формата

❤️ Жми на сердечко, если интересно
🏆 Жми на кубок, если применял PNG
🧑‍💻 Жми на ботана, если читаешь спецификации

Почему я выбираю 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-доступ
- Выбор хостинга для сайта

❤️ Жми на сердечко, если интересно
⚡️ Жми на молнию, если узнал новое
🧑‍💻 Жми на ботана, если тоже настраиваешь серверы под себя

Попробовал модный веб-сервер Caddy вместо Nginx.

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

NGINX (Engine X) — самый популярный веб-сервер (33% рынка), написанный на C. Изначально был написан 20 лет назад программистом из Rambler.
Раньше Nginx многие использовали как обратный прокси для Apache2, чтобы его ускорить. Nginx занимался статичными файлами (картинки, CSS), а Apache2 запускал PHP-скрипты. Постепенно Apache2 стали убирать и всю работу переносить на Nginx, потому что он быстрее и лучше держит большие нагрузки. Есть большая экосистема дополнений, отличная документация и множество примеров использования. Стабильный продукт, с которым я работаю на всех проектах.

А тут в инфополе стал мелькать Caddy. Чем же он покоряет разработчиков?
- Более лёгкая конфигурация SSL-сертификатов. Точнее, её нет, Caddy делает всё сам — пользователю больше не нужно настраивать стандартные сертификаты Let's Encrypt.
- Поддержка HTTP/2 и HTTP/3 из коробки.
- Поддержка компрессии gzip и zstd из коробки.
- Простой синтаксис конфигурационных файлов. Очень похож на Nginx, но проще и яснее. Конфиги сокращаются в размере, вероятность ошибки ниже.
- Caddy — это всего один исполняемый файл без зависимостей. Его легко устанавливать и обновлять.
- Новый плагин можно подключить к Caddy без перезагрузки и простоя в работе.
- После установки Caddy показал симпатичную страницу по-умолчанию с небольшой инструкцией.

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

Мои впечатления — мне понравилось с ним работать. Действительно легкая установка и конфигурация. Видно, что авторы много работали с другими веб-серверами и свой продукт сделали удобным и современным.

На моём сайте пока что висит статическая заглушка, вот весь конфиг:

fullstackfounder.ru {  
       root * /var/www/fullstackfounder.ru/public  
       file_server  
       encode zstd gzip  
}  
  
www.fullstackfounder.ru {  
       redir https://fullstackfounder.ru{uri} permanent  
}

Аналогичный конфиг у Nginx выглядел бы вот так:

server {
    listen 80;
    server_name fullstackfounder.ru www.fullstackfounder.ru;

    # Redirect all HTTP to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name fullstackfounder.ru;

    ssl_certificate     /etc/letsencrypt/live/fullstackfounder.ru/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/fullstackfounder.ru/privkey.pem;
    include             /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam         /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/fullstackfounder.ru/public;
    index index.html index.htm;

    # Enable gzip
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # Canonical redirect: www → non-www
    if ($host = 'www.fullstackfounder.ru') {
        return 301 https://fullstackfounder.ru$request_uri;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

Очевидно, что при работе с Caddy будет проще всё настроить. Мой вывод: дружелюбный сервер для разработки, DevOps, небольших проектов и соло-разработчиков. Сомневаюсь, что он завоюет высокие нагрузки, но свой вклад в улучшение веб-серверов он уже внёс.

Буду запускать на нём WordPress, посмотрим, что из этого выйдет.

❤️ Жми на сердечко, если интересно
⚡️ Жми на молнию, если узнал новое
🧑‍💻 Жми на ботана, если используешь веб-серверы

Продажи в чатах для агентств

Юные предприниматели и фрилансеры думают, что в телеграм чатах нет клиентов. А те, кто пытается продавать, сливают продажи.

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

Как это было устроено:
- Завели роль Лидоруб — сотрудник, который первый сталкивается с лидами или ловит их в интернете. Его задача — быстро реагировать. Не нужно быть классным продажником, достаточно уметь общаться.
- Завели тг-аккаунт, в котором постоянно сидел наш Лидоруб.
- Аккаунт был подписан на несколько сотен чатов с предпринимателями, диджитал-специалистами, агентствами, обучающими курсами. Всё, что смогли найти.
- Чаты отсортированы по папкам. Самые качественные вынесены в отдельные папки, чтобы быстрее реагировать.
- Лидоруб половину рабочего дня просматривал чаты на предмет запросов на услуги.
- Если видел сообщение с запросом "а подскажите хорошего директолога", то публично отвечал "могу порекомендовать Никиту" и давал контакт нашего продажника.
- Другой вариант — лидоруб сам откликался на запрос и проводил первичный диалог, выявлял потребность (что именно нужно) и квалифицировал клиента (а скиньте ссылку на ваш сайт).
- Продажник ждал лиды, поэтому оперативно реагировал. Писал клиенту сам, подхватывал диалоги, назначал встречи.
- Мы откликались на любые запросы, в том числе мелкие. Задача была наладить коммуникацию и завоевать доверие. Целевому клиенту можно было сделать самую маленькую задачу, а потом продавать комплекс услуг или долгий проект.

Мой личный рекорд продажи из чатов в тот период — сделка на 1.3 млн рублей.

Этой схемы хватало, чтобы создать в небольшом агентстве постоянный приток новых клиентов. Без каких-либо автоматических сервисов и спама. В чатах разнородные клиенты, разные ниши, очень разные чеки. Клиенты в чатах точно есть и они хотят покупать!

Посты по теме:
- Виды лидгена в агентство
- Лидген на отраслевых выставках
- Подборка материалов для агентств

❤️ Жми на сердечко, если интересно
⚡️ Жми на молнию, если словил инсайт
🏆 Жми на кубок, если продаёшь

Лингва франка для программистов

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

В популярных языках программирования сочетаются символы (скобки, операторы, знаки пунктуации) и ключевые слова на английском (if, then, function), а код пишется слева направо. Для многих это является существенным ограничением: нужно изучить английский алфавит, приспособиться к восприятию системы письма слева направо, научиться вводить символы латинского алфавита на клавиатуре и изучить значение английских слов.

Программист пишет код программы и запускает компилятор. Компилятор переводит код на язык компьютера — в машинный байт-код из единиц и нулей. То есть, компьютер не является носителем английского языка, его процессор вообще не знает никакой язык.

Значит, что язык программирования можно было бы перевести на ваш родной язык. Это сразу бы сделало освоение программирования доступным для миллиардов человек. Подкованный читатель наверняка сразу вспомнит 1С с его русскоязычным синтаксисом. Также есть десятки языков программирования на арабском, китайском, японском, фарси и санскрите. Посмотрите на этот список.

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

Думаю, что глобально проблема так и не будет решена. LLM уже сейчас позволяют писать программы, описывая логику на родном языке. ИИ всё равно переведёт запрос пользователя в программный код на английском, а компилятор превратит его в байт-код.

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

Как думаете, что произойдёт быстрее: исчезнет профессия программиста или потребность изучать английский?

❤️ Жми на сердечко, если понравилось
🧑‍💻 Жми на ботана, если знаешь язык программирования
🏆 Жми на кубок, если ты полиглот

Фуллстек парадокс

В начале 2000-х в веб-разработке не было фронтэндов или бэкэндов.
Была профессия вебмастер. Этот человек мог сделать сайт целиком. Он умел общаться с полиграфическим дизайнером про внешний вид сайта, верстать HTML таблицами, оптимизировать графику, писать java script. Стек был небольшой и было мало слоёв абстракции.
Если было нужно что-то покруче, звали программиста и он писал CGI-скрипты на Perl, PHP или C.

Прошло 25 лет. В этом году искал для клиента fullstack-разработчика. Вакансии такие на рынке есть. Например, одновременно с моей вакансией продвигали объявление от Теремка на такой же стек. На такую вакансию массово откликаются фронтэнд-разработчики. Почему так?

В момент, когда фронт научился писать запросы к базе данных и создавать API-методы, он достиг своей полноты. В его мировоззрении всё жизненное пространство в этот момент освоено. Всё так, но для бэкэнд разработчика уровень фронтов на его территории — Intern или Junior.

Современный бэкенд разработчик часто знает HTML, CSS и Java Script. Может так случиться, что был у него опыт разработки на React, но он не будет считать это значительным достижением. Хорошо, если в резюме укажет. Его территория упирается с одной стороны в серверное администрирование и облака, с другой находится уровень железа: производительность процессора, работа с памятью, операции чтения и записи на жесткий диск. Пляж фронтэндов находится на периферии его владений и занимает небольшой участок с выходом в море.

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

Количество абстракций в процессе разработки выросло. У пирога было три слоя, а в современном рецепте их пятнадцать. Изобретают новые фреймворки, меняются библиотеки и подходы. Рынок делает веб-программирование всё более абстрактным и сложным.

Практические выводы:
- Если вам нужен в команду разработчик с полным спектром знаний — ищите сеньора бэкендера, у которого был опыт работы на фронте. Вакансии Веб-разработчик, Программист или Backend-developer. Но делать фронт его руками очень дорого.
- В команду нужно брать и фронтов и бэков. Бэки будут ворчать и не хотеть делать задачи фронтов, фронты не владеют всей картиной происходящего на бэке.
- LLM уже сейчас помогает бэкендерам делать сносный фронтэнд. Скоро всё перемешается снова.

❤️ Жми на сердечко, если интересно
⚡️ Жми на молнию, если не согласен
🧑‍💻 Жми на ботана, если разработчик

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-иконку с темной и светлой версией

❤️ Жми на сердечко, если интересно
⚡️ Жми на молнию, если полезно
🏆 Жми на кубок, если рисуешь иконки