Привет и добро пожаловать во “Frontend beer” 👋

🧑‍💻 Меня зовут Дима и я люблю Frontend

🚀 Звучит банально, но я наконец-то добрался до создания своего канала 😉

📝 Пара слов обо мне :)
- Опыт в веб разработке более 8 лет.
- Работал и продолжаю работать со сферами: FinTech, SaaS, EdTech, eCommers, IoT, Entertainment и пр.
- Последние 4 года занимаюсь Дизайн системами / Design Systems
- Основной фокус:
📘 TypeScript
⚛️ React
💛 JavaScript
🟢 Node.js
⚫ Next.js

Зачем мне канал?
Постараюсь разбирать повседневные фронтовые (и не только) задачи, используя простые и понятные слова. Буду делиться инструментами, которые помогают мне решать их.

Зачем вам подписываться на «очередной» канал?
Может быть какие-то практические вещи решат и вашу проблему, поэтому подписывайтесь - будет интересно 🧐

Формат
Помимо того, чтобы просто делиться разными фишками каждый пост будет представлен на двух языках: русском и английском (в отдельном канале). Просто потому что хочу прокачать второй 🪄

P.S.
По пятницам постараюсь делиться фоточкой крафта 🍺

#FrontendBeer #intro #ru (c) Frontend Beer

Hello and welcome to "Frontend beer"! 👋

🧑‍💻 My name is Dmitrii and I'm passionate about Frontend development

🚀 It might sound cliché, but I've finally taken the plunge and created my own channel 😉

📝 A few words about me
- I have over 8 years of experience in web development.
- I've worked and continue to work in various fields: FinTech, SaaS, EdTech, eCommerce, IoT, Entertainment, and more.
- For the last 4 years, I've been diving into Design Systems.
- My primary focus:
📘 TypeScript
⚛️ React
💛 JavaScript
🟢 Node.js
⚫ Next.js

Why this channel, you might ask?
I'll do my best to break down everyday frontend (and not only) tasks using simple and understandable language. I'll also share the tools that help me tackle them.

Why should you subscribe to "just another" channel?
Perhaps some practical insights will solve your problem, so subscribe – it will be interesting 🧐

Format
In addition to sharing various tips, each post will be presented in two languages: Russian and English (on other channel). Simply because I want to improve my second language 🪄

P.S.
On Fridays, I'll try to share a photo of some craft beer 🍺

#FrontendBeer #intro #en (c) Frontend Beer

Несколько недель назад, я искал простой инструмент для создания email-шаблонов без “регистрации и sms” для одного из моих пет-проектов

Мне нужно было решение, которое позволило бы легко создавать шаблоны прямо в браузере и экспортировать их в формате HTML для использования в API, которое отправляет письма

Мой запрос к дизайну этих шаблонов довольно скромен: простые текстовые email'ы и логотип - вот всё, что мне нужно 🙌

Пару таких инструментов я нашел на GitHub:
- react-email-editor
— краткий обзор на https://youtu.be/MIWhX-NF3j8
- easy-email

Первый инструмент предоставлял простую demo страницу без необходимости регистрации и именно его я выбрал. Для моей задачи подходит более чем 🙂

Единственное, что вам понадобится сделать после экспорта в HTML, это заменить предлагаемые URL для изображений на свои собственные

Читать пост на английском 👀

#FrontendBeer #instruments #emailtemplates #email (c) Frontend Beer

Вышел Next.js 14 🚀

Я начал работать с этим фреймворком еще в 2017 году и помню, как поднимал проект еще на 3 версии. С тех пор Next.js прошел долгий путь и я рад видеть как он развивается.

Помню, как было здорово, когда команда разработчиков получила инвестиции и развитие инструмента пошло вперед огромными шагами. Помню как появились коллаборации с разработчиками React и браузера Google Chrome!

Всегда вдохновляет видеть, как технологии, с которыми ты работаешь, развиваются и совершенствуются.

Next.js 14 приносит нам следующие вещи:
⚪️ На 53% быстрее запуск локального сервера и на 94% более быстрые обновления кода с Fast Refresh
⚪️ Стабильные Server Actions
⚪️ Preview версия Partial Prerendering - механизма который позволяет получать динамически формируемый контент быстрее
⚪️ Новый обучающий курс касающийся App router, Authentication, Postgres и пр.

Читать пост на английском 👀

#FrontendBeer #instruments #nextjs (c) Frontend Beer

Сегодня пятница и я обещал поделиться фоточкой с крафтом :)

Хочу представить вам Cherry CHOUFFE 🍒

Фруктовое бельгийское пиво и если можно так выразиться, настоящий вишневый рай для любителей вишневого пива!

Во вкусе и аромате можно найти насыщенные нотки вишни, клубники, миндаля и специй с кисло-сладким оттенком. Этот напиток имеет коричнево-красный оттенок и обильную кремовую пену

Производится на пивоварне Brasserie d’Achouffe по бельгийским стандартам качества

История создания гласит, что Cherry CHOUFFE родилось случайно - вишни упали в бочку с пивом и пивовары решили сохранить этот экспериментальный шедевр

На площадках типа Untappd это пиво имеет довольно высокие оценки. В 2019 году ему была присуждена бронзовая медаль на World Beer Awards в категории "World’s Best Flavoured Fruit & Vegetable"

И это не всё! Cherry CHOUFFE отлично сочетается с множеством блюд. Узнать больше можно на официальном сайте

Cheers!

Читать пост на английском 👀

#FrontendBeer #beerfriday (c) Frontend Beer

Сегодня хочу поделиться с вами информацией о Schema First подходе, который является частью API First. Этот подход играет ключевую роль в разработке Frontend приложений, особенно тогда, когда API разрабатывается параллельно с интерфейсом

В несложных терминах, Schema First подход предполагает создание контракта (схемы) между Frontend и Backend разработчиками. Этот контракт описывает структуру данных и эндпойнты которые будут доступны на сервере

Из моего опыта, в 90% случаев этот контракт остается стабильным и не требует значительных изменений в будущем. Это позволяет Frontend разработчикам работать над интерфейсом, даже если API еще не полностью реализован

Если вы используете TypeScript в своем проекте, инструменты, такие как openapi-typescript, могут помочь вам генерировать типы автоматически, основываясь на предоставленном контракте. Это обеспечивает не только типобезопасность, но и быстрое обнаружение изменений в схеме, если контракт когда-либо изменится. И соответсвенно при проверки типов TypeScript подскажет где нужно поправить код

Следование Schema First подходу возможно, если вы строго версионируете ваше API или стараетесь избегать ломающих изменений. Этот метод упрощает коммуникацию между командами и способствует более эффективной и быстрой разработке Frontend приложений

Read in English 👀

#FrontendBeer #openapitypescript #schemafirst #apifirst (c) Frontend Beer

На этой неделе я хотел написать чуть больше постов. Однако это не получилось

Я перешел на новую работу и активно прохожу процесс онбординга :)

Коллеги с моей предыдущей работы подарили мне очень ценный подарок, который вы можете видеть на фото - крафтовое пиво, которое можно найти на Кипре в RabbitHop 😎🙌

Cheers!

Read in English 👀

#FrontendBeer #beerfriday (c) Frontend Beer

Стилизация генерируемого контента - Часть 1

Сегодня хочу рассказать о стилизации генерируемого контента в приложениях

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

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

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

const lHours = `<span data-color="fiery-orange">${hours}</span>`

Читать 2 часть

Read in English 👀

#FrontendBeer #xss #dompurify #react (c) Frontend Beer

Стилизация генерируемого контента - Часть 2

Читать 1 часть

Затем, например в React, мы можем отрендерить этот текст с использованием dangerouslySetInnerHTML в HTML-теге. Однако, так как мы не всегда знаем, какой контент к нам придет, мы должны быть осторожными с XSS атаками. Для избежания таких атак, мы можем использовать специализированные утилиты, например библиотека xss

Вот пример использования этого инструмента:



<h1 className="text-wrapper" dangerouslySetInnerHTML={{ __html: xss(getText(2, 35, 35), xssOptions) }} />

А стилизовать можно вот так:

.text-wrapper {
  & [data-color="fiery-orange"] {
    color: var(--color-fiery-orange);
  }
}

Конечно, вы можете настроить и более сложные вещи, чем просто data-атрибуты, но я хотел продемонстрировать, как можно быстро добавить стили к определенным частям текста, не прибегая к сложным решениям с компонентами

В качестве альтернативы, вы также можете рассмотреть библиотеку DOMPurify

Пример с использованием библиотеки XSS в React можно найти здесь


Read in English 👀

#FrontendBeer #xss #dompurify #react (c) Frontend Beer

Описание бага - Часть 1

Сегодня хочется поговорить про баги, а точнее про их описание, как задачи, в трекере

Часто оказывается так, что frontend разработчик находится на первой линии кто разбирает баг. И часто встречающаяся ситуация: баг прилетает скриншотом и больше ничего нет

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

В этом нет ничего страшного, но можно сэкономить много времени договорившись о формате описания бага

Читать часть 2
Read in English 👀

#FrontendBeer #bug #describebug #qa(c) Frontend Beer

Описание бага - Часть 2

Читать часть 1

Чтобы получить максимум информации на входе, можно придерживаться следующей структуры:

 1. Описание цепочки, которая привела к багу

 2. Ссылка на страницу, на которой произошла ошибка

 3. Скриншот страницы и консоли разработчика для этой страницы

 4. Проверить, корректно ли отрабатывает API Server (если нет, то приложить скриншоты)
 - Необходимо открыть инструменты разработчика в браузере
 - Перейти на вкладку Networks
 - Исследовать все  запросы к API_DOMAIN/…
 - Возвращаются ли корректные данные с бекенд сервера или в теле ответа запроса есть ошибки или пустое тело ответа

5. Если можно, то приложить аккаунт тестового пользователя (логин/пароль)

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

А что бы вы добавили в этот список, чтобы стало удобнее?

Read in English 👀

#FrontendBeer #bug #describebug #qa(c) Frontend Beer

Недавно был октябрь, а значит в мире Open Source проходил ежегодный евент - Hacktober fest. И в этом году это был 10й юбилейный!

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

Я ничего не ожидал и просто завел различные issues с описанием того, что нужно сделать и добавил теги: help wanted, hacktoberfest, good first issue. И в итоге пришло несколько контрибьюторов, в документации появилась мультиязычность, а репозиторий заработал 10 звезд ⭐️

Здорово 🙌 Если захотите привлечь контрибьюторов в ваш репозиторий - это один из первых шагов с которых можно начать

Попробуйте использовать EsLint plugin в вашем проекте: eslint-plugin-nimbus-clean и не стесняйтесь поставить ⭐️

Read in English 👀

#FrontendBeer #opensourse #eslint (c) Frontend Beer

Пятничный октоберфест в ноябре! Let’s Paulaner☝️

Read in English 👀

#FrontendBeer #beerfriday (c) Frontend Beer

А вы знали как исключить из сборки Webpack плагины?

В качестве примера возьмем Storybook 6 с Webpack в качестве сборщика. Если у вас под капотом большое количество описанных сторей на TypeScript возможно вы сталкивались с медленной сборкой или зависаниями на этапе билда (issue). В таких ситуациях может потребоваться исключить определенный плагин из процесса сборки

Найти этот плагин и его индекс в массиве можно используя имя конструктора: plugin.constructor.name, так как плагин под капотом это класс. Затем вы можете удалить плагин по его индексу, следуя инструкциям, или применить фильтр и переопределить значение в config.plugins


config.plugins = config.plugins.filter(plugin => !(plugin.constructor.name === 'ForkTsCheckerWebpackPlugin'))

Read in English 👀

#FrontendBeer #webpack #storybook #plugins (c) Frontend Beer

Не про фронтенд, но полезно знать ⭐️

Как исправить проект в IntelliJ Idea, если директория ".idea" была добавлена в гит и теперь вы хотите ее удалить?

1. Убедитесь, что папка ".idea" добавлена в .gitignore

2. Очистите кэш Git: git rm -r --cached .idea

3. Зайдите в раздел "File" -> "Repair IDE". И следуйте инструкциям на плашке IDE Repair

Подробнее тут: Repair IntelliJ IDEA

Read in English 👀

#FrontendBeer #intellijidea #intellij #idea #project #repair (c) Frontend Beer