Несколько недель назад, я искал простой инструмент для создания 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

Всем привет 👋 И с наступающим Новым Годом 🎄⭐️

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

И небольшой подарок под новый год, дроп первого эпизода подкаста, который мы записали с Антоном @anton9408 из солнечного Таиланда & Альбертом @vault_developer из заснеженной Германии🎄

Послушать первый эпизод подкаста можно тут 👉
#1 - Про жизнь в Германии, Кипре и Таиланде

#FrontendBeer #подкаст #7круговфронтенда (c) Frontend Beer

С Новым Годом! 🎄

Первым постом в этом году хочу поделиться списком еженедельных рассылок, откуда можно почерпнуть новые знания, инструменты и веяния из мира Web разработки

1. https://frontendfoc.us/ - новости, статьи и руководства по интерфейсу. HTML, CSS, WebGL, Canvas, браузеры и пр.
2. https://javascriptweekly.com/ - статьи по JS, новости и полезные проекты
3. https://nodeweekly.com/ - новости и статьи из мира Node.js
4. https://react.statuscode.com/ - React & React Native
5. https://webtoolsweekly.com/ - всякая всячина из мира Web инструментов и библиотек

А на каких ресурсах узнаете новости вы? :)

Read in English 👀

#FrontendBeer #weeklynews #web #weekly (c) Frontend Beer

Что лучше всего подойдет для отображения юридических документов, инструкций, буклетов и пр. на сайте? Конечно же PDF документы!

Если для пользователя нужно отображать документ как обычную HTML страницу, есть готовый инструмент, например под React: react-pdf-viewer

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

Read in English 👀

#FrontendBeer #weeklynews #pdfviewer #pdf #weekly (c) Frontend Beer

Что там с CSS-in-JS стилизацией? 🎨

Долгое время я работал со styled components, но с появлением RSC я начал посматривать в сторону CSS-modules (привет, повышение производительности и корректное использование RCS). CSS-модули – замечательное решение, но отсутствие качественной "типизации" для классов, CSS переменных и т.д. требует написания большого объема инфраструктурного кода, особенно при создании дизайн-системы

Недавно я открыл для себя Panda CSS & StyleX. Инструменты выглядят как отличное сочетание между CSS-in-JS и CSS-модулями. Вы получаете всю мощь JS/TS, и на выходе чистый атомарный CSS. Конечно, динамичные стили вызывают некоторые вопросы, но это не является большой проблемой

А вы уже пробовали эти инструменты? 🚀✨

Read in English 👀

#FrontendBeer #stylex #pandacss #cssmodules #cssinjs #styled (c) Frontend Beer

Что же, давно тут не было постов, поэтому начнем с маленького :)

Поговорим о пользе GUI в любимой IDE

Классная фича с Changelist'ами в IntelliJ IDEA. Чем классная и удобная?

Например, делаешь какие-то большие изменения в коде и в голову пришла гениальная идея попробовать по другому, зарефакторить или протестировать скрипт генерирующий / меняющий файлы в проекте

Всегда есть вероятность, что захочется вернуться в исходное состояние до крайних правок. И вот тут как раз отдельные чип и дейл changelist'ы спешат на помощь. Создаешь новый и не переживаешь о том, как потом разобрать, что откатывать, а что нет :)

P.S.
Конечно можно коммитить или стешить, но зачем платить больше?

Read in English 👀

#FrontendBeer #intellij #idea #changelist (c) Frontend Beer

Hey! 👋

Новая статья “Vite, Nginx and environment variables for a static website at runtime” о внедрении переменных окружения в статические веб-приложения с помощью Vite и Nginx.

В этой статье я расскажу о методе внедрения переменных окружения в статические веб-приложения с использованием Vite и Nginx. Вы узнаете, как автоматизировать этот процесс с помощью контейнера Docker и инструмента envsubst для замены переменных во время выполнения

Каждый шаг от создания проекта до развертывания контейнера подробно описан и проиллюстрирован примерами кода и ссылкой на репозиторий 🔗

Бегом читать 🙂

Read in English 👀

#FrontendBeer #vite #nginx #environmentvariables (c) Frontend Beer

REST API меняется, а форма ломается? Не беда

Вы сделали форму, всё работает, а потом… обновилось API и начался хаос:
❌ надо разобраться, что поменяли на бэке и руками обновляете типы
❌ если не было общей обвязки типами, найти все места в коде, которые требуют обновления

✅ Есть способ проще
Генерировать типы прямо из OpenAPI, использовать их в запросах и React Hook Form и валидировать с Yup. Без боли, надежно и быстро 💯

Как это настроить - читать «Fully typed forms based on API schema with react-hook-form, openapi-typescript and yup validation»

#FrontendBeer #reacthookform #yup #typescript #openapi #codegen (c) Frontend Beer

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

https://heyapi.dev - пока в бете, активно разрабатывается и выглядит многообещающе. Финальная генерация кода лаконичная. В целом, понятная документация и конфигурация 👍

https://orval.dev &
https://kubb.deve чем-то похожие инструменты - последний генерирует более чистый и не многословный код. Но много вещей скрыто под капотом. Документация на мой взгляд не интуитивно понятная и конфигурация требует экспериментов, чтобы получить желаемое 🤔

Я пока предпочитаю https://openapi-ts.dev/, да приходится писать хэндлеры в ручную, но зато просто, гибко и понятно в конфигурации ✅

#FrontendBeer #typescript #openapi #codegen #tanstackquery #fetch #axios (c) Frontend Beer