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