Linting rules are a powerful tool to establish common ground within a development team. The rules define guidelines on how to format and structure your code.

Using predefined rule sets, like Airbnb’s ESLint config with more than 2 million weekly downloads, is really popular nowadays. Some frontend frameworks even include them by default.

But the real power of ESLint lies in custom rules! Most grown projects have these fragile parts within an application that Junior developers are afraid to touch. …

A couple of months ago my company decided to get rid of their legacy Ember frontend in favor of React.

With limited team capacity, we wouldn't have been able to keep on implementing new customer features in Ember and in parallel rebuild the whole frontend in React. That’s why we decided to take a gradual approach: We’re implementing new features in React, before actually replacing our whole Ember app. By exporting these React widgets as Web Components, we can easily integrate and use them in our existing Ember frontend.

This approach allows our team to already gain experience in our…

Coming from Angular and Ember, one of the first things I missed in React was a code generator for quickly setting up new components.

Angular and Ember both offer this kind of tooling out-of-the-box (e. g. Angular CLI). You simply run a command that generates all the files you need for getting started when developing a new component (files for controller, markup, tests, and styles).

In this tutorial, we’re going to build a similar script to be used with React components 🚀(and components of any other library/ framework). You will set up your own Component Blueprint files. …

Shared Webspace Hacks #1: How to upload large frontend builds with hundreds of thousands of files to your shared webspace without wasting a lot of time? You only need my ready-to-use PHP and Gulp scripts and a hosting service running PHP.

Problem: No SSH access at Shared Hosters

If you have a cheap traditional shared webspace (like Apache, PHP, MySQL) for hosting your frontend assets like myself, you usually lack ssh access. That’s why we can’t just compress our build files, upload the zip, and extract it again on our server with help of the command line. …

In this article, I’m going to show you how to create a Web Component. Our widget will be based on React and can be seamlessly integrated into any website and CMS, like WordPress, with only two lines of code! 💪

Prerequisites: You should have some basic understanding of React with TypeScript and web development in general. To follow this tutorial, please check out my demo project bonus-calculator on GitHub. 📌

Why? React inside WordPress

I love using WordPress for what it’s made for: serving static websites and managing content. Special requirements can mostly be met using plugins and visual editors like Elementor. In some…

Recently, GitHub launched GitHub Actions Beta. With GitHub Actions, you not only can manage your repositories but also build and test your code directly on GitHub. You don’t have to use webhooks and switch to other build services anymore. Finally, we get everything under one roof! 😊

In this post, I’m going to show you how to build your React App using GitHub Actions. Later, we’re using the service to deploy our artifact to Google’s Firebase Hosting. Every time somebody pushes changes to our master branch on GitHub, our CD/CI pipeline will be triggered.

Disclaimer: GitHub Actions is free for…

Setting up a comfortable compilation pipeline for your SCSS files can be time-consuming and frustrating 😓. You find a lot of outdated tutorials online with too many details and bloated configurations.

I’m going to show you my simple pipeline. The whole setup will take you less than 5 minutes, I promise! 💪 After following my tutorial, you will be able to compile all your SCSS files to one single CSS file.

1. If you haven’t done already, initialize npm.

npm init

2. Now, install all these dev dependencies:

npm install gulp gulp-sass node-sass gulp-concat --save-dev

3. Create gulpfile.js and add this code snippet:

'use strict';var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');sass.compiler = require('node-sass');gulp.task('sass', …

My article covers the most fundamental aspects of Node Package Manager (NPM) and package.json. If you consider yourself well experienced in this topic already, please stop here ❌.

In the JavaScript world, you will find it in nearly every codebase: package.json. As a beginner, you probably already know that it’s an important file. But what’s its real purpose? How is it generated? And why do you even have to care about it?

Here are the most important facts about the mysterious file 👽.

1) It’s NOT a big deal!

Simple as that: package.json …