НОВОЕ ВИДЕО — КАК КОНВЕРТИРОВАТЬ 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

На канале уже более шести месяцев не выходило полноформатных видео.

Я рад сообщить о возвращении с новым и, как мне кажется, весьма интересным проектом — скриншот прилагается.

Это Shopify-приложение, точнее — расширение страницы оформления заказа (Checkout Extension).

Это будет первое видео на моём канале, посвящённое разработке Shopify-приложений. В нём я покажу, как создать такое расширение с нуля, разберу код и объясню, в каких случаях и зачем стоит использовать Checkout Extensions.

Было бы интересно посмотреть такой ролик?

Пока готовится видео о Shopify приложение, у меня для вас есть интересная новость

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

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

Ссылка на канал

Вы не поверите, но это произошло

На канале вышло новое видео. Но не радуйтесь, оно не про разработку Shopify приложений. Новое видео на канале должно было называться "Куда пропал moek?". Но вместо этого вышло "Куда пропала навигацию меню в Shopify?"

https://youtu.be/fpRtIr98GD4