Как сделать Реакт приложение быстрее?

Установите million 🔥

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

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

Мне снова не нравится мой текущий сайт. Буду переписывать :)))

А вы используете формат webp в работе?

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

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

UPD: AVIF лучше, используем его!

Тестирую новую услугу на фрилансе

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

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

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

Хороших выходных!

Solana Pay интегрирует плагин с Shopify для платежей в USDC

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

Источник

Для тех кто досмотрел видео до момента, где я упоменял B2B

https://telegra.ph/Shopify-Summer-23---Novovvedenie-v-B2B-08-25

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

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

https://youtu.be/MlkQ4aIqefQ

Открыл 🚴🏼 сезон.

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

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, видео и других ресурсов) конечным пользователям.

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

Ждёте презентацию Apple?

Shopify наконец-то добавили кнопку удаления

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

Обновил свой русский сайт

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

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

Что-то на техническом
До этого я использовал обычный React (потому-что не знал Next.js). Изучив Next я подумал, а почему бы и не обновиться? Так и получился этот сайт.

Это не самопис с нуля, я взял за основу шаблон блога и добавил немного новых фишек.

Результат
Пока что мне он нравится (это редкость). В будущем, возможно, я его еще допилю. Есть идея добавить портфолио, но по сути это те же статьи.

А как вы проводите свои выходные?

Анонс новых функций Liquid для повышения производительности

Разработчикам Shopify тем теперь доступны новые функции Liquid, которые дают больше контроля над загрузкой элементов на странице и помогают повысить производительность.

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

Ссылка на статью

Как я добавлял несколько товаров в Shopify корзину

Телеграм наругался и сказал, что я написал длинный пост, поэтому ссылка 👆

Сегодня ровно год как я уехал. А куда уехал — рассказывал на канале.
Это не конечный мой путь, я всё ещё в поисках своего места.

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

Но как говорится нужно снять 50 плохих видео чтобы получилось 1 хорошее

Начало чего-то великого или как обычно пет-проект который я начну и заброшу 🤔

Надеюсь, что не заброшу. Я не ставлю большие надежды на этот проект, но почему бы не попробовать

Мой сайт на английском обновился

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

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

Технология на которой написан этот сайт — Astro, может быть слышали о ней. Это не супер популярный фреймворк как React, но вашего внимания однозначно стоит, если вы разработчик. Если нет, возможно, тоже. Но мне кажется будет неинтересно и непонятно.
Astro использует отличный от других фреймворков подход в построение сайтов, что делает его очень быстрым. Как минимум, по стандарту он не загружает JavaScript в браузер, а это же просто идеально для скорости. Ведь чем меньше JavaScript’а попадает в браузер, тем выше скорость загрузки.

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

Svelte, кстати говоря, тоже похожую идеологию использует. Я как-то делал на нём проект и он показался мне довольно интересным. Плюс ко всему вокруг него растёт неплохое коммьюнити. Но это уже тема другого поста.

Начал изучать разработку Shopify плагинов

Заголовок, конечно, громко сказан, но ничего. Я как-то уже начинал делать плагин, но в Summer Edition 2023 Шопифай представили новый шаблон для создания плагинов и как раз его я ещё не пробовал.

Хочу посмотреть упростили ли создание плагинов, потому-что в коммьюнити говорят, что стало тяжелее. Как минимум из за того, что не все разработчики знают технологию Remix