Для кого разрабатываются дизайны сайтов? Или боль одного разработчика по имени Майкл. Часть 1

Как вы знаете, я разработчик. Создаю сайты, веб-приложения, интернет-магазины и очень часто работаю с разными дизайнерами. Но так получилось, что дизайнеры с которыми я работал (не все), создают дизайны на “скорую руку”. Это означает, что вместо названия секции “Hero”, в дизайне “Rectangle 3827”, вместо “Header”, снова “Rectangle 21398”. Я думаю вы поняли суть и продолжать дальше не нужно.

Почему я такое не люблю?
Всё просто — неудобно работать.

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

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

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

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

Я вернулся!

Две болезни подряд, а потом отпуск. Теперь с новыми силами врываюсь обратно к статьям, каналам, и прочему контенту который создаю.

Что планируется?
1. В миллионный раз пытаюсь снимать хотя бы по одному видео в неделю, пока не получается (уже 3 года);
2. Закончить локализацию на сайте devmoek.com;
3. Много работы, куда же без этого.

Я пока буду разгребать задачи и думать о новом видео. С вас хорошее настроение, грейтесь под теплым пледом, и пейте час с медом. Если чай с медом не любите, пейте что-нибудь другое, например, какао.

НОВОЕ ВИДЕО — КАК КОНВЕРТИРОВАТЬ HTML в Liquid код

https://youtu.be/UFmkXwZt_Zg?si=1doIQDwc5rBsxv5B

Смотрим, комментируем, делимся ❤️

Может пора заняться каналом серьёзно?

React 19 & Next.js 15 & Typescript & Framer Motion. Или кортко о том как я деплоил проект (почти в пятницу).

В новой версии React (19), Typescript начал жаловаться на типы в тэгах Framer Motion. Возможно, это было и до обновления на новые версии Реакта и Некста, но я заметил после обновления.

Что я сделал?
Создал отдельный компонент с объявлением Framer Motion тэгов для Typescript. Пока работает, вот как это выглядит:

import { motion, type MotionProps } from 'framer-motion'

type MotionDivProps = MotionProps & React.HTMLAttributes<HTMLDivElement>

export const MotionDiv = motion.div as React.FC<MotionDivProps>

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

Знаю, что канал читают не только технические специалисты. Поэтому, для тех кто ничего не понял — вышли новые версии технологий и то, что работало раньше перестало работать. Обычное дело в программировании. Пришлось придумать решение и заодно рассказать о нём. Вдруг кому-то будет полезно :)

Это мои слова когда-то давно. И пам-парам. Мой сайт devmoek.com теперь имеет два языка. Вроде бы я всё потестил и все пути работают корректно.

Поэтому теперь его ссылки devmoek.com/en и devmoek.com/ru. Сейчас надо ещё пошуршать с SEO, а то все пути до этого вели на devmoek.com и поисковые роботы сейчас вообще ни черта не поймут куда делся сайт и почему стало так много вложений. Но это исправимо :)

Наконец-то у меня появился Sidekick в Shopify.

Видео про него я выпускал больше года назад 🤯

Одно из лучших качеств фрилансера — общение

ℹ️ Многие думают, что самое главное в исполнителе это навыки. Безусловно, работая на коммерческих проектах нужно обладать хорошим пониманием, что вы делаете. Но важнейшую роль играет то, как вы общаетесь с клиентом.

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

❗️Важно не просто слушать, но и слышать. Покажите клиенту, что вы на одной волне, уточняйте, переспрашивайте, если что-то неясно. Это избавит от недоразумений в процессе работы и сэкономит время.

🧘 А еще не забывайте про тон общения. Будьте вежливы, уважительны и позитивны. Даже в сложных ситуациях старайтесь сохранять спокойствие и профессионализм. Ведь зачастую клиенты возвращаются не только из-за качества работы, но и из-за приятного взаимодействия. Если вы не успели сдать работу в срок, объясните клиенту ситуацию, только честно. С большой вероятностью он войдёт в положение.

💪 Навыки можно прокачать, но если вы не умеете общаться, то даже с крутым портфолио работать будет сложнее. Помните, что вы продаёте не только свои услуги, но и себя как надежного партнера.

Резюмируя вышесказанное:
1. Общайтесь вежливо и с позитивом;
2. Задавайте много вопросов, проявляйте заинтересованность к проекту;
3. Не обманывайте, если произошёл косяк — признавайте ошибку и двигайтесь дальше;
4. Фриланс это про выстраивание долгосрочных отношений с клиентом, а не про прибыль в моменте.

Данный пост вляется личным мнением автора, если вы не согласны, можете написать ваше мнение в комментариях

Фриланс без площадок: Полное руководство

Что вы думаете, когда слышите про фриланс? Переработки, отсутствие выходных и непостоянная занятость? А ещё площадки и где именно искать клиентов?

Фриланс — это не просто работа вне офиса, это стиль жизни. Многие начинающие фрилансеры выбирают специализированные платформы (Upwork, Fiverr, FL.ru и т.д.) для поиска клиентов. Но что, если отказаться от этих площадок?

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

Читать далее

С Новым Годом, ребята! 🥳

Итоги 2024 года

Куда же без итогов, хоть и немного опоздал.

Итоги прошлых лет:
Итоги 21 года
Итоги 22 года
В 23 без итогов 🙁

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

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

Ниже будет душно про машину и про любовь к металлическому объекту на 4 резиновых элементах ⬇️

У меня и появилась мысль завести собственную машину. В своей как-то спокойнее, знаешь когда менял масло, какие покрышки стоят (и что они все одинаковые). Так и случилось, появилась своя машина. Я думал, что буду сиять когда её куплю, а тут было ощущение пустоты. Как будто я каждый день покупаю машину, но это была моя первая подобная покупка.

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

Опыт покупки автомобиля тоже интересный. Я покупал с рук и никогда до этого не имел опыт общения с продавцами, только видел на видео, как покупают машину. А тут ещё другая страна и местный язык я знаю на уровне младенца. Но всё прошло гладко, я улыбался. Хоть ничего глобального не проверил перед покупкой, но какие-то теоретические знания у меня были. Я любитель посидеть на автомобильных форумах и почитать что люди пишут про тачки.

А теперь выжимка из моей блогерской, если так можно назвать, и не только деятельности ⬇️

✔️ Выпустил 9 горизонтальных видео и 12 коротких на канал “moek”.

✔️ 2 горизонтальных видео и 3 коротких на английский канал — тут хотелось бы увеличить частоту публикации 🙂

✔️ Написал 7 статей в devmoek.ru и 12 в blog.devmoek.com.

✔️ Познакомился с интересными людьми, как по работе, так и вне.

✔️ Поработал над кучей проектов, Shopify и не только.

✔️ Занимаюсь спортом, в 2024 году добавился велосипед, но ушёл бег.

✔️ На свет появился @usessnt (usessnt.com) — новости и магазин готовых Shopify секций и сниппетов.

✔️ Несколько проектов закрыл, ввиду своей неактуальности и отсутсвием времени на них.

✔️ Меня забанили на Fiverr

——

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

Портфолио обновилось

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

В общем, портфолио обновил, теперь можете посмотреть что я там сделал за последнее время. Там как обычно не всё, про какие-то работы я забыл (эх слышал бы я себя 4 года назад когда только начинал).

Ссылка на портфолио

ComeUp — Новый Убийца Fiverr и Upwork?

Если вы работаете на фрилансе как программист, дизайнер, монтажёр, и тд. и ищете новые платформы для поиска клиентов, то ComeUp может быть интересной альтернативой привычным Upwork, Fiverr, Toptal, Freelancehunt, и ещё миллион разных площадок. Про разные сайты для фриланса писал тут.

❓Что за платформа?
ComeUp — это маркетплейс услуг, где вы можете продавать фиксированные сервисы, как на Fiverr. Например, если вы разрабатываете Shopify-темы или кастомизируете Liquid-код, можно создать несколько предложений: «Настрою кастомный Shopify-фильтр» или «Добавлю кастомные метаполя в ваш Shopify-магазин». Услуги зависят от вашего опыта и желания разбираться с магазином клиента. В бесплатном тарифе можно добавить до 6 услуг (гиги если на-файверском). Подробнее про тарифы тут.

❗️В октябре 2022 года 5euros стала ComeUp.

👨‍💻Как устроена работа?
Для тех кто не знаком с Fiverr опишу этапы:
1. Создаёте предложение — фиксируете цену, сроки и чётко описываете, что входит в услугу.

2. Получаете заказы — заказчик оплачивает заказ заранее, и платформа удерживает деньги до завершения работы.

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

🆚 В чём отличие от других платформ?
Тут тоже очень сильно похоже на Fiverr. Но есть нюансы, о них расскажу, возможно, позже.

▫️Проще, чем Upwork — не нужно писать кастомные отклики на каждый проект, достаточно грамотно оформить своё предложение.

▫️Жёсткие рамки — здесь нет сложных кастомных проектов, только чётко описанные услуги с фиксированной ценой.

▫️Защита исполнителей — клиенты оплачивают заказ сразу, и платформа удерживает средства до завершения работы.

🤔 Стоит ли пробовать?
Если вы уже имеете стабильный поток клиентов, то ComeUp вряд ли заменит Upwork или личные заказы через соц. сети / личный сайт. Но если вы хотите протестировать новый канал привлечения клиентов и не против работать с небольшими заказами, то почему бы и нет?

🔗 Ссылка на Comeup

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

Выпал снег, мы решили, что надо ехать на велосипедах.

День начался сразу же достаточно странно, в поездку я не взял еды, хотя обычно я затариваюсь фруктами и снеками, а потом привожу их обратно :) Вот краткое описание этого дня:

Застрял в лифте. Пока был в лифте, у доставщика украли велосипед. Встретил друзей. Поехали за бесплатными грипсами, забрали за шоколадки.

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

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

Пока ехали бешеный БМВ-шник сигналил, подрезал и материл участников заезда. Доехав до кафе и не успев купить еду неподалёку загорелась грузовая машина. Вызвали пожарных.

Поехали за шавухой. Из-за налипшей грязи под брызговиком у меня тёрло колесо. Поели, отдохнули и попили.

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

Счастливые и уже на чистых велосипедах вернулись домой!

Снега теперь не выпадет, весна всё-таки, теплеет. Именно поэтому мы так торопились покататься по снегу :)

🇺🇸🇨🇦🇨🇳 Как политика отразится на вашем Shopify бизнесе?

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

🔗 Читать далее

Отображение метаполя заказа на странице информации о заказе в Shopify

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

В службе поддержки Shopify сказали: "Мы не знаем, сработает это или нет; это необходимо протестировать". Мне понравился ответ, я пошёл и начал тестировать.

И сработало — по крайней мере, для аккаунтов "старого типа", когда пользователям необходимо войти на сайт через форму.

Если вам нужно обновить кастомные данные о вашем заказе даже после того, как он был создан и выполнен — вы можете это сделать. По крайне мере обновлять метаполе можно, а ID заказа, стоимость уже не получится поменять

Тут в SS&T интересная тема, можно обсудить

Что такое Headless в Shopify и зачем он нужен?

Всё больше eCommerce-проектов переходят на Headless архитектуру, и Shopify не исключение.

❓Что такое Headless в Shopify?
Headless означает, что «голова» (frontend) отделена от «тела» (backend). В случае с Shopify это значит, что вы используете Shopify только как CMS и backend для продуктов, заказов, коллекций и так далее, а внешний вид сайта создаёте самостоятельно — например, на Next.js, Nuxt, Astro или даже React Native для мобильных приложений.

❓Зачем использовать Headless в Shopify
▫️Максимальная гибкость дизайна;
▫️ Молниеносная скорость загрузки;
▫️Бесшовная интеграция с внешними API;
▫️ Управление контентом через CMS (например, Sanity, Contentful);
▫️Оптимизация UX под любые устройства.

🛠 Что используется
1. Shopify Storefront API / GraphQL;
2. Клиентская сборка на React, Vue, Svelte и др.;
3. Vercel / Netlify / Cloudflare Pages для деплоя;
4. Доп. инструменты: Algolia, Stripe, Tailwind и т.д.

👨‍💻Когда можно подумать о Headless разработке?
Во-первых, если у вас нестандартный дизайн, который будет тяжело или невозможно реализовать через Liquid. Во-вторых, если нужна гибкая архитектура для дальнейшего масштабирования. В-третьих, нужна интеграция с внешними сервисами, а встроенной интеграции у сервисов нет.

Если какой-то один или все пункты совпали с вашим случаям — вам нужна Headless разработка.

За оценкой разработки Headless приложения вы можете написать в ЛС или оставить комментарий под этим постом.

@usessnt | Наш сайт

GSAP стала бесплатной, но есть нюансы

GSAP это мощная JavaScript-библиотека для создания плавных и производительных анимаций на веб-страницах. С её помощью можно анимировать CSS-свойства, SVG, канвас, скролл, и другие элементы. Она поддерживает таймлайны, кривые Безье, паузы, обратные воспроизведения и многое другое.

🚀 Пока везде распространяют новость о том, что GSAP стала абсолютно бесплатной. В Threads я прочитал, что использовать библиотеку можно только в Webflow и WordPress — тут я напрягся и решил изучить вопрос.

🤓 Небольшая предыстория. GSAP я использую достаточно давно и мне нравится ей пользоваться, хоть я и нашёл альтернативы, о которых расскажу ниже. Поэтому услышав о невозможности использования библиотеки мне стало крайне интересно.

Оказалось всё не так страшно, как я думал. Вот что я сделал чтобы проверить использование библиотеки:

1️⃣ Запустил пустой проект на Реакте;

2️⃣ Установил библиотеку написав две команды в консоль
npm install gsap и npm install @gsap/react;

3️⃣ Использовал стандартный вызов библиотеки

import { useRef } from 'react';

import gsap from 'gsap'; // <-- import GSAP
import { useGSAP } from '@gsap/react'; // <-- import the hook from our React package

gsap.registerPlugin(useGSAP);

export default function App() {
    const container = useRef();

    useGSAP(() => {
        // gsap code here...
        gsap.to('.box', { rotation: 180 }); // <-- automatically reverted
    },{ scope: container }); // <-- scope for selector text (optional)

    return (
        <div ref={container} className="app">
            <div className="box">Hello</div>
        </div>
    );
}

🎉 Всё работает как раньше.

❗️Позже я выяснил, что GSAP теперь нельзя использовать другим конструкторам сайтов. Код библиотеки можно использовать, как мы выяснили выше. Но встраивать его через визуальный редактор, чтобы пользователь мог визуально делать анимацию — нельзя, так может делать теперь только Webflow.

Альтернативы GSAP
◾️Animejs
◾️Motion