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.
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. 📌
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.
npm install gulp gulp-sass node-sass gulp-concat --save-dev
'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 ❌.
Here are the most important facts about the mysterious file 👽.
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!