moek
167 subscribers
150 photos
11 videos
2 files
194 links
Пишу про веб-разработку, Shopify, YouTube, и мою жизнь.

Instagram: @devmoek

Канал про Shopify - @usessnt

По вопросам и предложениям @themoek
Download Telegram
moek pinned «НОВОЕ ВИДЕО НА КАНАЛЕ!! Поддержите лайком и комментарием, а то алгоритмы ютуба обиделись на мой канал :)) https://www.youtube.com/watch?v=71ERwjyouNY&t=12s&ab_channel=moek»
Screenshot 2023-07-23 at 2.54.53 PM.png
3.7 KB
Количество репозиториев в моем Гитхабе. Люблю это число кстати
😁2
Пока изучаю связку Next.js + Shopify, подумал, что можно сделать стартовый шаблон, так как я последнее время много проектов делаю на Реакте. Поэтому встречайте, стартовый шаблон Next.js + Tailwind - ссылка

P.S. Скорее всего кто-то уже делал, я просто не искал :))
👨‍💻2
Tailwind UI не поддерживает Svelte

Пишу проект на SvelteKit и думаю, а зайду-ка я и воспользуюсь какими-нибудь секциями из библиотеки Tailwind, а вот фиг.
Но есть выход:
1. Flowbite. Есть как бесплатные, так и платные блоки;
2. Skeleton UI. Новая для меня библиотека, на первый взгляд понравилась, как-нибудь сделаю проект полностью на ней чтобы протестировать её в деле;
3. Daisy UI. Заявляют, что самая популярная библиотека компонентов для Tailwind CSS, но я ещё не пробовал её. Ознакомившись с информацией на главной странице, я впечатлён. Однозначно попробую в одном из проектов и расскажу вам своё мнение.

А вы предпочитаете использовать готовую UI библиотеку или писать свою?

UPD: Можно поставить перключать в HTML и тогда Tailwind UI блоки можно подтягивать и в Svelte. Так что всё отлично!
Shopify Editions Summer 2023

Шопифай каждые полгода выпускает подобные обновления, а точнее 100+ обновлений, про самые основные я сниму ролик, а пока можете ознакомиться с полным списком по ссылке выше
🔥6
Fiverr Neo
Фриланс площадка Fiverr аннонсировала Neo, это исскуственный интеллект который помогает покупателям найти нужных фрилансеров в зависимости от их запроса.

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

Как вам идея?
🔥4👨‍💻1
Next.js Commerce 2.0

Next.js выпустили Commerce 2.0, обновленную версию шаблона для интернет-магазина, в обновление шаблон стал совместим с App раутингом, а ещё упростили архитектуру, улучшили скорость загрузки, и конечно же, Шопифай как CMS, обработка платежа и прочие прелести использования Шопифай в качестве бэкенда.

Ссылка на статью
👍3
Сегодня заметил что Ютуб обновился. А вы заметили изменения?
👍3🎉1
This media is not supported in your browser
VIEW IN TELEGRAM
Как сделать Реакт приложение быстрее?

Установите million 🔥
🔥2
Сегодня на Fiverr я получил свой первый 4-х звездночный отзыв от клиента. С почином меня 🙂

*тут должен был быть скрин, но у него плохое качество и он вообще маленький, а загружать большой и фотошопить все ники и суммы клиентов не хочется*
🎉5👍1
Мне снова не нравится мой текущий сайт. Буду переписывать :)))
😁2
А вы используете формат webp в работе?

Вот одна и та же картинка, но в webp занимает меньше места 🤓

А меньше места больше скорость, как говорится

UPD: AVIF лучше, используем его!
👍4
Тестирую новую услугу на фрилансе

Опубликовал новый гиг на Fiverr - оптимизация конверсии Шопифай магазина. Прежде чем её опубликовать я изучил:
1. Что такое конверсия;
2. Почему конверсия важна;
3. Как измерить текущую конверсию магазина;
4. Как её улучшить без плагинов (я не любитель устанавливать плагин на каждый пук).

Например, есть проблема: 40 пользователей добавляют товар в корзину, но заказ размещают только 5 человек, почему?
Для меня это вопрос как догма. На него нельзя сходу ответить, что причина в …
Нужно смотреть, что за сайт, как он сделан, какой продукт продается, быстро ли грузятся страницы и тд. Только после этого можно сделать какой-то вывод. И опять же, улучшение конверсии это не моментальный результат, нужно время прежде чем будет виден какой-то результат.

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

Хороших выходных!
👍3🔥2
Solana Pay интегрирует плагин с Shopify для платежей в USDC

Solana Pay - децентрализованный платежный протокол от Solana Labs, интегрировал свой плагин с Shopify, что позволяет миллионам предприятий на его платформе использовать его для платежей.

Источник
👍4
Шопифай как всегда лучший. Что добавили в последнем крупном обновление? В новом видео я рассказал об основных обновлениях в Shopify Edition Summer 2023. Идём смотреть!

P.S. Да, я немного опоздал(на месяц), знаю

https://youtu.be/MlkQ4aIqefQ
🔥2🤩1
Открыл 🚴🏼 сезон.

Пока врачи говорят не заниматься спорта, я так не могу, ломка у меня
🔥4
Tailwind + Shopify

Как-то я выучил Tailwind¹ и решил попробовать его в Shopify². Нужно было сверстать страницу пароля, это та самая страница куда вы попадаете если магазин находится под паролем. Получилось довольно неплохо и быстро, а я как раз использовал его из-за скорости, ну и навыки хотелось применить, конечно же, потому-что лучшее обучение это практика (хотя я и писал несколько пет-проектов³ на нём).

Почему я решил его выучить?
Всё чаще я стал замечать шаблоны, курсы, твиты на/про Tailwind и мне стало интересно, что же это такое и почему он такой популярный?

Как использовать Tailwind в Shopify?
Через CDN⁴. Всё точно также как если бы работали над вёрсткой сайта. Команда для подключения Tailwind в проект:

<script src="https://cdn.tailwindcss.com"></script>

Конфиг
Если хотите добавить чего-то кастомного, тогда понадобится конфиг⁵. Его можно добавить вот таким образом:


<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>


Кастомные стили
А если хотите добавить кастомные стили и использовать классы в связке с sm, md, lg, xl, то тогда нужно добавить следующее:

<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>


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

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

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

Все команды взяты с официальной документации.

—————————
Пояснительная база, я не знаю нужна ли она, но мне кажется прикольно.

Tailwind CSS¹ — это утилитарный CSS-фреймворк для построения пользовательских интерфейсов. В отличие от других CSS-фреймворков, таких как Bootstrap или Foundation, которые предоставляют предварительно стилизованные компоненты, Tailwind предоставляет набор низкоуровневых утилитарных классов, которые позволяют создавать пользовательские дизайны без написания CSS.

Shopify² (не путать с Spotify) - это платформа для электронной коммерции, которая позволяет индивидуальным предпринимателям и компаниям создавать свои онлайн-магазины. Основанная в 2006 году, эта платформа стала одной из ведущих в индустрии благодаря своей простоте использования и множеству функций.

Пет-проект³ (от англ. "pet project") — это личный проект, который разработчик или группа разработчиков создают в свое свободное время, не связанное с их основной работой или обязанностями. Обычно такие проекты начинаются из-за личного интереса, страсти или желания научиться чему-то новому.

CDN⁴ (Content Delivery Network, или сеть доставки контента) — это распределенная система серверов, размещенных в различных географических точках мира, предназначенная для быстрой и надежной доставки веб-контента (например, изображений, стилей, JavaScript, видео и других ресурсов) конечным пользователям.


Конфиг⁵ — это сокращение от слова "конфигурация". В контексте информационных технологий и программирования конфигурация часто относится к настройкам, которые определяют, как будет работать определенное программное обеспечение, приложение или система.
🔥2👏1
Ждёте презентацию Apple?
👨‍💻4
Shopify наконец-то добавили кнопку удаления

Теперь не нужно выбирать секцию / блок и нажимать “Remove section / block” чтобы удалить.
👏2😁2🔥1