July 18, 2021
How I built my Next.js Portfolio Site
Next.js can be a great choice for static sites and being a freelance developer specialized in fast websites, it was an obvious choice for me. Let's see how and what I used to build this site.
June 28, 2021
Next.js 11 Image Component in Practice
In Next.js 11 the image tag is updated and gets additional features like the ability to import images and to use blur placeholders. Let's examine the effects of the image tag and how it helps us to improve performance.
June 16, 2021
Custom NetlifyCMS previews with Next.js
NetlifyCMS and Next.js make a really nice combination. More often than not, the admin view provided by the CMS is enough. However, sometimes we might need custom preview components. In this post we will see how to do this with NetlifyCMS and Next.js
June 3, 2021
Rendering GPX tracks in React
GPX files are used to track a variety of sports and activities. When we take a look under the hood, we see that they use a simple XML based schema. Such files can easily be rendered in a React application with the help of libraries like Leaflet.
May 21, 2021
The difference between Gatsby and Next.js
When it comes to server-side-rendering with React, there are two main frameworks to consider: Gatsby and Next.js, but what are their differences? Which one should you choose and when?
April 23, 2021
Core Web Vitals E-commerce
Starting in May 2021 Core Web Vitals will play a significant role in your website's and e-commerce store's SEO performance. Despite daunting acronyms like LCP, CLS and FID, these metrics are actually easy to understand and we will see how they improve the experience of a site's visitors.
April 15, 2021
E-commerce landing page optimization
Landing page optimization is a huge topic and best practices exist for various fields, but what should a landing page look like for an e-commerce Shopify store? Let's have a look at common landing page optimizations and how they apply to shops.
April 8, 2021
Is grocery e-commerce here to stay?
With a pandemic and lock-downs entering the scene, the e-commerce space experienced huge growth. However, one category benefits from this more than any other: e-commerce for grocery shopping and food products. Is this trend here to stay? Or will it ebb down, as our lives return back to normal?
March 28, 2021
Four Product List Patterns
To increase their sales successful ecommerce stores use common patterns to optimize their product listings. Let's have a deeper look at four of these: 1. Variant indicators 2. Familiar elements 3. Display an alternative picture on hover 4. Contrasting text on complex pages.
February 19, 2021
Austrian Website Lighthouse Issues
Which Google Lighthouse issues are causing the largest losses for the most visited Austrian websites? A look at the performance, accessibility, best practice and seo scores of 23 websites.
January 18, 2021
How to use pre 2.0 TailwindCSS container breakpoints
TailwindCSS 2.0 introduces an additional and wider breakpoint to the container class. To keep the old breakpoints in case of an upgrade, we need to adapt our tailwind.config.js file.
January 13, 2021
Building docker containers on small cloud instances can result in failing builds. Let's see how we can work around this issue.
January 2, 2021
Dynamic imports of Material UI Icons
What if we can't hardcode which icon to use in our react component and the icon to use is specified in a CMS or a JSON source?
December 31, 2020
Creating persistent sublayouts in Next.js
In next.js we use _app.js for layouts which should not be rerendered on page transitions. In this post we will see how we can extend this approach to persistent sublayouts on sections of our website.
November 23, 2020
Detect width and height changes in React.js
Sometimes we need to get access to a react component's width and height properties. In this post we will explore how to create a react hook, which dynamically returns these values on resizing.
November 10, 2020
Web Scraping and Next.js
Many sites depend on data scraped from external pages. Despite this task being so common, there is no standard way to approach it and depending on our approach we face different problems. In this post we'll see how Next.js and incremental static generation provide a great solution.
November 3, 2020
How to run your Next.js app in Docker
Running a Next.js application in Docker greatly simplifies maintenance and portability. Let us have a detailed look into how to create a production ready Dockerfile. We will start out by creating the simplest version possible and then add layer caching and a .dockerignore file.
October 15, 2020
Serve WebP images in Next.js with next-optimized-images
Image sizes and formats play a huge role in website performance. Sites containing unnecessary large images result in a large bandwith usage for our users and affect loading times of the overall site and SEO. Therefore, we want to take a look at an amazing way to create optimized images in our Next.js applications with the help of next-optimized-images.
October 13, 2020
Easy SEO for Next.js with next-seo
One of many reasons to use Next.js is improved SEO for your react application and an important part of this are the numerous SEO meta tags. While adding these tags is already supported by the framework, the process can be made even easier with using next-seo. In this post we will compare the approach with and without next-seo.
October 8, 2020
How to use Next.js Links with Material-UI Button and ListElement
Both Next.js and Google's Material UI as a component library are hugely popular in the react community. However, when used in conjunction there are some pitfalls with the Links inside the application are handled. Let us have a brief look at how to properly handle Button and ListElement components, acting as internal links in the application.
August 26, 2020
How to use absolute imports in react native with expo
This short post demonstrates how to use absolute imports of react components in a react native application created with expo.
July 1, 2020
Strapi authentication via Google Provider with React
This tutorial shows a small example how to allow users to log in and sign up with their google accounts in a strapi and react based application.
July 1, 2020
Step by step guide to create OAuth Credentials in the google developer console
This small guide walks you through the steps to create OAuth credentials in the Google Developer Console for use with a web application.
April 26, 2020
Microservice Bad Smells and Anti Patterns
The most common problems observed in microservice systems include 1. Wrong Cuts 2. Shared Persistency 3. Shared Libraries 4. Direct calls from Clients to Microservices 5. Too many standards.
August 31, 2019
API Gateway vs Backend For Frontend
A comparison of the API Gateway and the Backend For Frontend (BFF) pattern. The API Gateway is a single point of entry into the system for all clients, while a BFF is only responsible for a single type of client. To choose between those patterns we need to consider several factors...
Freelance Software Engineer