Webpack, Web Components and VS Code

Custom Webpack Setup (with React)

I am super happy to present to you a tutorial series to set up a custom JavaScript application with Webpack. If you want to go beyond create-react-app at some point, you might enjoy this series.

It starts with setting up a JavaScript project and bundling it with basic Webpack. Afterward, you will learn how to add Babel to use JavaScript features that are not known by your browsers yet. From there you can move on multiple ways:

1. Integrate React in your custom Webpack Setup

2. Add ESLint for your Code Style

3. Advance your Webpack Setup (in-depth tutorial)

A gentle introduction to Web Components

The client I am working for asked me about Web Components and how to use them in companies with more than one team to build a foundation of UI components. Since I have never used Web Components before, I took one week off to learn more about them. As a result, I wrote a long read introduction to Web Components.

Since my client asked me about using them as foundation for a UI library, I also documented how to use Web Components in React with a Web Components React Hook. It could go the same way for other frameworks such as Angular or Vue. This way, Web Components would always look and behave the same -- acting as your foundational UI library -- and still can be utilized in different frameworks for different teams in your company.

Prettier and ESLint in VS Code

These two tutorials should boost your developer experience. While Prettier gives you auto formatting for your source code, ESLint notifies you about code style violations. Both tools give you more time to focus on your actual code.

1. How to integrate and use Prettier

2. How to combine Prettier with ESLint

That's it from my side this month. I hope you enjoy the tutorials which I wrote to take you beyond React. Even though you are not using Webpack or Web Components, take the chance to make yourself familiar with them :-)

Best wishes, Robin

Monthly Recommendation

The last month I didn't have much time to read though, but watched an intensive yet educational mini series that I want to recommend to you: Chernobyl. I couldn't watch more than one episode a day because of its dramatic staging, but you should definitely check it out.