Стилизация генерируемого контента - Часть 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

TypeScript переписан

на Go! Обещают 10 кратное увеличение производительности 🚀 Читай подробнее в официальном блоге 🔗

Осталось только дождаться 7 версии

#FrontendBeer #typescript (c) Frontend Beer

В параллель с этим развивается нативная поддержка TS в Node.js

На мой взгляд это хороший двигатель прогресса, на фоне Deno

Интересно понаблюдать, как когда-то за гонкой менеджеров пакетов

#FrontendBeer #typescript #deno (c) Frontend Beer

Кстати, попробовать новую версию TS можно используя этот репозиторий

#FrontendBeer #typescript (c) Frontend Beer

EOL / EOS: что это и почему важно?

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

📌 EOL (End of Life) — момент, когда продукт перестает получать какие-либо обновления от разработчиков
📌 EOS (End of Support) — момент, когда прекращается не только разработка, но и техническая поддержка (включая исправление уязвимостей)

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

В недавней email рассылке касательно Node.js, натолкнулся на интересный инструмент endoflife.date.
Он позволяет следить за жизненным циклом используемых инструментов в разработке и поддержке ПО.
Можно просто иногда обращаться к текстовой версии, на самом сайте. А если хотите сделать свой дэшборд - можно воспользоваться API.
Нет нужного инструмента в списке? Всегда можно законтрибьютить 📝

#FrontendBeer #eol #eos #endoflife #date (c) Frontend Beer