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

Describe the bug - Part 2

Read the part 1

To gather maximum information upfront, you can adhere to the following structure:

1. Description of the chain of events leading to the bug

2. Link to the page where the error occurred

3. Screenshots of the page and developer console for that page

4. Check if the API Server is functioning correctly (if not, provide screenshots).
   - Open developer tools in the browser.
   - Navigate to the Network tab.
   - Inspect all requests to API_DOMAIN/...
   - Check if the backend server returns correct data or if there are errors or an empty response body.

5. If possible, provide credentials for a test user (login/password)

Perhaps adding some steps could reveal that the error is not on the frontend side of the application, allowing redirection to another developer

What would you add to this list to make it more convenient?

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

Recently, it was October, which means the annual event - Hacktoberfest, took place in the Open Source world. This year marked its 10th anniversary!

I recently wrote an article on how to create plugins or configurations for ESLint and also created a repository on GitHub. I decided to engage other developers to make their first commit 🥇

I didn't expect much and simply opened various issues describing what needed to be done, adding tags like help wanted, hacktoberfest, good first issue. As a result, several contributors joined in; multilingual support appeared in the documentation, and the repository gained 10 stars ⭐️

Great 🙌 If you want to attract contributors to your repository, this is one of the first steps you can take

Feel free to use EsLint plugin in yours projects: eslint-plugin-nimbus-clean and give a star ⭐️

#FrontendBeer #opensource #eslint (c) Frontend Beer

Fridays octobeer fest on November! Let’s Paulaner☝️

#FrontendBeer #beerfriday (c) Frontend Beer

Did you know how to exclude plugins from Webpack build?

Let's take Storybook 6 with Webpack as the bundler as an example. If you have a large number of described stories in TypeScript under the hood, you might have encountered slow build times or hangs during the build phase (issue). In such situations, it might be necessary to exclude a specific plugin from the build process

You can find this plugin and its index in the array using the constructor's name: `plugin.constructor.name`
because the plugin under the hood is class. Then, you can remove the plugin by index, following the instructions here, or apply a filter and redefine the value in config.plugins


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

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

Not about frontend, but useful to know ⭐️

How to fix a project in IntelliJ IDEA if the ".idea" directory was added to Git and now you want to remove it?

1. Make sure that the "idea" folder is added to the .gitignore file

2. Clear the Git cache: git rm -r --cached .idea

3. Go to the "File" -> "Repair IDE" section. Follow the instructions on the IDE Repair panel

More details here: Repair IntelliJ

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

Happy New Year! 🎄

With the first post of this year, I want to share a list of weekly newsletters where you can discover new knowledge, tools, and trends from the world of Web development

1. https://frontendfoc.us/ - News, articles, and guides about interfaces, covering HTML, CSS, WebGL, Canvas, browsers, and more
2. https://javascriptweekly.com/ - Articles on JS, news, and useful projects
3. https://nodeweekly.com/ - News and articles from the world of Node.js
4. https://react.statuscode.com/ - Resources on React & React Native
5. https://webtoolsweekly.com/ - A variety of tools and libraries from the world of Web development

What news sources do you use? :)

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

What's the best way to display legal documents, manuals, brochures, and more on a website? Undoubtedly, PDF documents!

If you need to showcase a document to users just like a regular HTML page, there's a ready-made tool, especially for React: react-pdf-viewer

It seamlessly integrates into any interface. From the developer's perspective, all that's required is to embed the widget and provide a link to the document

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

What's up with CSS-in-JS styling? 🎨

I've been working with styled components for a long time, but with the advent of RSC, I started to lean towards CSS-modules (hello, performance boost and proper use of RCS)

CSS-modules are a fantastic solution, but the lack of quality "typing" for classes, CSS variables, etc., requires writing a substantial amount of infrastructure code, especially when building a design system

Recently, I stumbled upon Panda CSS & StyleX. These tools seem like an excellent blend of CSS-in-JS and CSS-modules. You harness the full power of JS/TS, and the result? Clean atomic CSS. Of course, dynamic styles raise some questions, but it's not a major issue

Have you given these tools a try? 🚀✨

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

Well, it's been a while since I have had posts here, so let's start small :)

Let's talk about the benefits of GUI in my favorite IDE

One cool feature is Changelists in IntelliJ IDEA. Why is it cool and convenient?

For example, you're making some significant changes to the code and suddenly, you have a brilliant idea to try something else, refactor or test a script that generates/alters files in the project

There's always a chance you might want to revert to the original state before those extreme edits. And that's where individual Changelists come to the rescue. You create a new one and don't worry about how to later untangle what to roll back and what not to :)

P.S.
Of course, you can commit or stash, but why should you make more effort?

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

Hey! 👋

New article “Vite, Nginx and environment variables for a static website at runtime” about injecting environmentvariables in statically built web applications with Vite and Nginx

In this article, I explore methods for injecting environment variables into statically built web applications using Vite and Nginx. You'll learn how to automate this process using a Docker container and the envsubst tool to replace variables at runtime.

Each step from project creation to container deployment is thoroughly explained and illustrated with code examples. I've also included a link to the repository with the complete source code.

Let’s read!

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