Привет и добро пожаловать во “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