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.

Shared web hosting is still popular

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! 💪

Best of both worlds: React (frontend framework) and WordPress (CMS)

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.

Photo by David Clode on Unsplash

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 ❌.

Photo by Paul Esch-Laurent on Unsplash

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 …


In this tutorial, we’re going to create a simple web scraper. Our bot will be able to scrape valuable content on any website, even if there’s no public API provided. Later, the gathered articles can be filtered and automatically (re)posted on social media or your blog.

My example bot is searching for new shopping deals related to a specific keyword on MyDealz.de and later posts the deal links on a public Facebook page. I encourage you to be creative! Don’t just blindly follow my tutorial, but try to adapt it to your use cases, other websites and social media platforms!

Simplified architecture of the bot

J Hinter

Frontend Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store