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.

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

Фронтенд умер?
Для тех кто не хочет долго читать - пока что фронтенд жив, но есть нюанс.

В чем нюанс?
Недавно Next.js обновился на 14 версию. Самое основное, что добавили - Server Actions. Если простым языком, это когда в одном файле, да даже в одной функции может быть фронтенд и бэкенд код.

Пример:

export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ...
  }
}

Server Actions появились в версие Next.js 13.4, но тогда они были как эспериментальная функция. Я её кстати успел попробовать на одном из своих пет-проектов. Ещё в этой версие добавили App Router, что было довольно непривычно первое время, но это уже другая тема.

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

Серверный рендеринг
Тендеция перехода на серверные компонтенты довольно чиста и понятна. Это как минимум быстро.

Забавно то, что PHP использует серверный рендеринг с самого зарождения языка, а если грубо говорить, то это 1994 год. Конечно, в самом 1994 году были немного другие задачи, чем сейчас, но подход тот же.

А вот тут в клиентском компоненте имопртируется серверный компонент:

'use client'
 
import { myAction } from './actions'
 
export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

Что будет с фронтендом?
Рынок фронтенда плавно двигается к фуллстэк, то есть фронтендерам нужно будет знать бэкенд, как минимум как писать SQL запросы к базе данных, какие бывают базы данных, и как шифровать данные.

Заключение
Как-будто сам фронтенд стал легче, но чтобы быть конкурентным на рынке к нему добавился ещё и бэкенд. Для новичков это может стать небольшой проблемой, ведь часто люди задаются вопросом: “А что учить, фронтенд или бэкенд?”. Сейчас всё двигается к тому, что фронтендеры сами по себе вымирают. А если вы фулл-стек, то нечего переживать.

Ресурсы
Подробнее про Next.js 14;
Первое появление Server Actions в Next.js;
На случай если вам интересно, что за пет-проект я делал.

Это сообщение в виде статьи

Давно я тут не появлялся, у меня последнее время происходит много всего в жизни. А именно:
1. Работа (фриланс). Моё любимое программирование и создание сайтов. Как раз то, что забирает больше всего времени и сил. Но кстати сил забирает меньше, чем работа в компании на полный рабочий день. А ещё я до сих пор не выгорел, а как-будто наоборот вгорел.

Фриланс тоже ничего, пока не надоел. Начинал снимать видео про фриланс, но пока подзабросил. Хочется много всего про программирование и Шопифай рассказать, а фриланс видео перевалило за 12 минут (и то рассказал не всё что хотел). Но как-нибудь я до него точно доберусь!

2. Компьютер. Не так давно ко мне приехал компьютер и как обычно с ним что-то случилось (перевёз свой старый ПК). Как оказалось, у меня сломался жёсткий диск и были некоторые ошибки в Windows. Это всё починили, теперь работает как часы, пока непонятно какие часы, но работает.

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

3. Изучение нового. Не так давно начал писать новый проект на Astro и уже опубликовал его сырую версию. Но пока что не могу её показать.

4. Возвращение к старому. Захотелось вернуться к PHP. Первое моё знакомство с этим языком программирования было в 2019 году, после этого я написал два небольших проекта на нём и забросил. Сейчас появилось желание снова пописать PHP код. Но писать свою CMS желания нет (обычно у PHP разработчиков оно появляется). Может я пока не дорос 🙂

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

Периодически катаюсь и выкладываю истории в Инсте. Если не подписаны, то вот мой ник - @devmoek. Но я не особо активный человек в инстаграм, если любите смотреть по 100500 историй у одного человека, то это не ко мне.

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

Вчера обновил свой сайт на русском языке, в этот раз он уже написан на Svelte. Сейчас занимаюсь его индексацией, но покликать-полазить уже можно 🙂

Strapi Headless CMS

Когда я учил React, я написал приложение, которое позволяет писать отзывы об играх. Приложение использует React 18 и Strapi. Возможно, для вас это просто набор каких-то слов, ниже я поясню что это всё значит.

Предисловие
Проект использует Strapi CMS в качестве бэкенда, то есть вся информация в приложение хранится там, а именно:
1. Название игр;
2. Категории;
3. Рейтинг;
4. Отзыв об конкретной игре.

Когда я написал проект я не понял, как его задеплоить. Спустя время я разобрался. Оказывается, есть несколько вариантов как можно выложить в сеть Strapi приложение.

Strapi Cloud
Strapi Cloud — это платформа управляемого контента, созданная на базе Strapi, ведущей Headless CMS с открытым исходным кодом. Это полностью управляемая хостинговая платформа, которая позволяет вам развертывать приложения Strapi за считанные минуты.

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

На самом деле билд приложение занял достаточно не долго (1-2 минуты). Учитывая, что я использую обычный реакт и вебпак это достаточно неплохо. А ещё, нужно и сервер запустить. В общем отлично!

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

Но есть нюанс. Облако Страпи стоит денег, конечно же. Тарифы у них не детские, начинаются от 99 долларов. И это стоимость за один проект. То есть мне, чтобы этот пет-проект, а скорее даже просто проект который я делал чтобы изучить связку React + Strapi, запустить, нужно платить 99 долларов? Сейчас я взял 14 дневную триал версию и пока что пишет, что следующий платёж 55 долларов.

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

"Билд" (от английского "build") в сфере разработки программного обеспечения обозначает процесс создания версии программы или приложения из исходного кода. Это может быть конечная версия продукта или промежуточная версия, готовая к тестированию или развертыванию.

"нода" в контексте JavaScript и серверных технологий, обозначает окружение, в котором выполняется JavaScript код. Node.js, например, является платформой для выполнения JavaScript-кода на сервере, позволяющей создавать веб-приложения.

Тестирую новый сетап.

UPD: Видео пока что скрыл, буду перезаливать

https://youtu.be/k3xGrayYof0

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

https://youtu.be/U5MO7-LdKdI

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

Вчера я начал работать над преобразованием своего самого первого сайта в Svelte. Я считаю, что лучшее обучение – это практика. Для меня сейчас Svelte выглядит довольно солидно, но сообщество не такое большое, как у React, что, конечно, вполне понятно.

Я по-прежнему считаю, что для новичков React может быть лучшим выбором из-за того, как реализован и структурирован путь обучения. Svelte похож на ванильный JS, хотя изучить его после JS может быть проще. Как вы знаете, у React есть свой способ делать разные вещи и переучиваться может быть сложно :)

Фриланс – это форма трудоустройства, при которой человек работает на самостоятельной основе, обычно не будучи штатным сотрудником какой-либо компании. Фрилансеры предоставляют свои услуги различным клиентам, часто работая над несколькими проектами одновременно для разных заказчиков. Они могут работать удаленно или в офисе клиента, в зависимости от требований проекта.

На каких биржах работать фрилансеру? В новом посте я рассказал о 10 биржах для фриланса. Читайте подробнее по ссылке 👇

https://www.devmoek.ru/top-10-freelance-platforms