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

А вы используете формат 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

Фриланс на Fiverr - американские горки

Если вы размещали гиги(услуги) на Файвер, то в самом начале возникает вопрос, а как получить первый заказ?
Когда вы уже какое-то время работаете на Файвер у вас возникает новый вопрос, а как удержать стабильный поток клиентов? Через какое-то время гиги начинают набирать меньше охватов и кликов, соответственно. Даже если у вас Top Rated профиль, такое может быть. Если у вас один источник дохода, это может быть сильным ударом.

Fiverr топ?
Файвер в принципе площадка довольно интересная. Я уже на ней 3 года и так и не понял, как работают алгоритмы. Скорее всего, они периодически меняются, но тогда их понять ещё сложнее.

Файвер упал, прощай фриланс?
Этот пост я хотел написать про своё падение на Fiverr. После несколько успешно выполненных проектов, гиги начали стремительно падать. Я на это обратил внимание и начал наблюдать, что будет дальше. Написал всем старым клиентам с кем работал, но они конечно же мне ответили :))) (нет).

Я люблю наблюдать за статистикой, сколько кликают, сколько пишут. Конечно, там очень много спаммеров(привет индусам и пакистанцам) и статистика получается не 100% правдивая, но всё же интересно как циферки то вверх, то вниз.

Но вчера когда я засыпал мне написали два клиента на Fiverr. А сегодня утром я заметил, что показатели начали расти. Это плюс и минус фриланса одновременно. Вы не имеете контроль над тем, когда вам напишут и сколько человек одновременно захотят совершить заказ. У меня была смешная история с этим.

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

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

Если вы не пробовали работать на Fiverr - вот ссылка (реферальная). Можете попробовать, вдруг понравится.

НОВОЕ ВИДЕО!!!

Как Добавить Несколько Товаров В Shopify Корзину?

https://youtu.be/DsnSrrkJVr0

Вчера у меня было техническое собеседование

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

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

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

На собесе попросили написать функцию которая берёт строку в качестве аргумента и проверяет закрыты ли скобки. Я написал её так:

function checkParenthesisSequence(s) {
 let stack = [];
  const matchedPairs = {
  ')' : '(',
  ']' : '[',
  '}' : '{',
  '{}' : '[]'
  }
  
  for (let char of s) {
  if (Object.values(matchedPairs).includes(char)) {
   stack.push(char)
  } else if (matchedPairs[char] && stack.pop() != matchedPairs[char]) {
   return false;
   }
  }
  return stack.length === 0;
  
}

console.log(checkParenthesisSequence('({})[](){({[{}]})}')) // true
console.log(checkParenthesisSequence('(({})[](){({[{}]})}')) // false
console.log(checkParenthesisSequence('((({{[[(({{}}))]]}})))')) //true
console.log(checkParenthesisSequence('({})[](){({[}{}]})}')) // false

Если не особо читабельно, то держите ссылку на jsfiddle.

Заключение
В целом мне понравилось, было интересно и весело. А вы проходите собеседования?