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 🧐

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

#FrontendBeer #intro #en (c) Frontend Beer

A few weeks ago, I was in search of a simple tool for creating email templates with no fuss for one of my pet projects

I needed a solution that would enable me to easily craft templates directly in the browser and export them in HTML format for use with an API that sends out emails.

My design requirements for these templates are quite humble: basic text emails and a logo - that's all I need 🙌

I found a couple of such tools on GitHub:
- react-email-editor
— See more on: https://youtu.be/MIWhX-NF3j8
- easy-email

The first tool offered a straightforward demo page without requiring registration, and that's the one I went with. It suits my needs perfectly. 🙂

The only thing you'll need to do after exporting to HTML is replace the provided image URLs with your own

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

Next.js 14 is out 🚀

I started working with this framework back in 2017 and I remember setting up projects as early as version 3. Since then, Next.js has come a long way and it's inspiring to see its progress.

I recall the excitement when the development team secured investments and it is move the tool forward in great strides. I also remember the collaborations with React developers and Google Chrome's team.

It's always invigorating to witness the technologies you work with evolving and improving!

Next.js 14 brings us the following:
⚪️ 53% faster local server startup and 94% faster code updates with Fast Refresh
⚪️ Stable Server Actions
⚪️ Preview version of Partial Prerendering – a mechanism that delivers dynamically generated content more swiftly
⚪️ A new learning course covering the App router, Authentication, Postgres, and more.

#FrontendBeer #instruments #nextjs (c) Frontend Beer

Today is Friday and I promised to share a photo of some craft beer :)

I want to introduce you a Cherry CHOUFFE 🍒

It's a fruity Belgian beer a real cherry paradise for cherry beer lovers!

In its taste and aroma you can find rich notes of cherry, strawberry, almonds, spices, with a sweet and sour touch. This beverage has a brown-red shade and a generous creamy foam in the glass

This beer is crafted at the Brasserie d’Achouffe brewery following Belgian quality standards

The creation story tells that Cherry CHOUFFE was born by accident when cherries fell into a beer barrel and the brewers decided to preserve this experimental masterpiece

On platforms like Untappd this beer receives quite high ratings. In 2019, it was awarded a bronze medal at the World Beer Awards in the category of "World’s Best Flavored Fruit & Vegetable". That speaks for itself.

And that's not all! Cherry CHOUFFE pairs excellently with a variety of dishes. See more on official site!

Cheers!

#FrontendBeer #beerfriday (c) Frontend Beer

Today I want to share information about the Schema First approach which is a part of the API First strategy. This approach plays a crucial role in frontend application development, especially when the API is being developed in parallel with the interface

In simple terms, the Schema First approach involves creating a contract (schema) between frontend and backend developers. This contract defines the data structure and endpoints that will be available on the server

From my experience, in 90% of cases, this contract remains stable and doesn't require significant changes in the future. This allows frontend developers to work on the interface, even if the API is not fully implemented yet

If you are using TypeScript in your project, tools like openapi-typescript can help you generate types automatically based on the provided contract. This ensures not only type safety but also quick detection of changes in the schema if the contract ever changes. TypeScript will guide you on where to adjust your code when checking types

Following the Schema First approach is possible if you strictly version your API or aim to avoid breaking changes. This method simplifies communication between teams and contributes to a more efficient and faster development of frontend applications

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

This week, I wanted to write a few more posts. However, it didn't work out.

I've started a new job and I'm actively going through the onboarding process.

My former colleagues gave me a very valuable gift, which you can see in the photo - craft beer that you can find in Cyprus at RabbitHop 😎🙌

Cheers!

#FrontendBeer #beerfriday (c) Frontend Beer

Styling generated content in applications - Part 1

Today, I want to talk about styling generated content in applications

It often happens that content with HTML markup comes from the server, such as translation texts or the content of articles. Sometimes we have functions that generate text depending on various conditions, for example, text with prices and discounts in the shopping cart

And in our work, there are situations where we need to style certain parts of this content. How can we do that?

Let's consider an example when we need to change the text color of numbers. To do this with minimal code changes, we can add wrappers with data attributes to the generated strings:

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

Read the second part

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

Styling generated content in applications - Part 2

Read the previous part

Then, for example in React, we can render this text using dangerouslySetInnerHTML in an HTML tag. However, since we don't always know what content will come to us, we need to be cautious about possible XSS attacks. To prevent such attacks, we can use specialized utilities, such as the xss library

Here's an example of how to use this tool:


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




And you can style it like this in CSS:


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




Of course, you can configure more complex things than just data attributes, but I wanted to demonstrate how to quickly add styles to specific parts of the text without resorting to complex solutions with components.

As an alternative, you can also consider using the DOMPurify library

You can find an example of using the XSS library in React here

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

Describe the bug - Part 1

Today, let's discuss bugs, or more precisely, their description as tasks in the tracker

It often happens that the frontend developer is on the front line when dealing with a bug. A common scenario is receiving a bug report with just a screenshot and no additional information

In larger projects, recalling the specific page, user context, etc., can become a time-consuming task. Alternatively, one might need to ask clarifying questions to the person who reported the bug

While this is not a major issue, much time can be saved by agreeing on a bug description format

Read the part 2

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