Image for post
Image for post

This article summarizes a list of Angular interview questions which I would ask candidates and that I get often asked in interviews.

1. What is Angular? What is the difference between Angular and Vue.js / React?

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. Angular is built entirely in TypeScript and uses it as a primary language. As it is a framework it has many useful built-in features like routing, forms, HTTP client, Internationalization (i18n), animations, and many more.

Vue.js and React are no application frameworks but JavaScript libraries to build user interfaces.

2. What’s new in Angular?

Check the Angular blog for latest release notes, for example, the Angular 11 release. …


Image for post
Image for post

For me, it is important to see analytics about my portfolio website. This way, I can see which posts got the most views, which country my users are from, and which browser & operating system they are using. The simplest solution to add analytics to your site is Google Analytics as it is free and easy to set up. But as we all know, this service is only free as we pay it indirectly by providing data to it. What you need to know about Google Analytics and privacy.

In this blog post, I will show you how I replaced Google Analytics with Umami which is a simple, easy to use, self-hosted web analytics solution. …


Image for post
Image for post

It is important to monitor an application’s metrics and health which helps us to improve performance, manage the app in a better way, and notice unoptimized behavior. Monitoring each service is important to be able to maintain a system that consists of many microservices.

In this blog post, I will demonstrate how a Spring Boot web application can be monitored using Micrometer which exposes metrics from our application, Prometheus which stores the metric data, and Grafana to visualize the data in graphs.

Implementing these tools can be done quite easily by adding just a few configurations. …


Image for post
Image for post
Photo by Isis França from unsplash.com

Creating a changelog is a usual task if a new software version is going to be released. It contains all the changes which were made since the last release and is helpful to remember what has changed in the code and to be able to inform the users of our code.

In many projects, creating the changelog is a manual process that is often undesired, error-prone, and time-consuming. This article describes some tools that can help to automate the changelog creation based on the Git history.

Let’s start with some basics.

Semantic Versioning

Semantic Versioning (SemVer) is a de facto standard for code versioning. It specifies that a version number always contains these three…


Image for post
Image for post
GitHub profile README

On Hacker News I discovered the article Building a self-updating profile README for GitHub. I was very fascinated about this new GitHub feature and wanted to build something similar for my GitHub profile.

GitHub Profile README

GitHub profile READMEs are a new feature that allows users to have the content of a README markdown file rendered at the profile page.

To use this feature you just need to create a new repository that has the same name as your GitHub account. Mine is located at github.com/mokkapps/mokkapps.This repository needs to be public and initialized with a README:


Image for post
Image for post

In my current project my colleague Michael Seifert introduced property based testing in our Python codebase. It was the first time I heard about it and it sounded fascinating, so I wanted to also implement it in our frontend code based on Vue.js with Jest as testing framework and TypeScript as programming language.

In this article I want to give you an introduction to property based testing and show you how you can use it in the most used TypeScript-based testing frameworks like Jest, Karma, and Mocha.

Example Based Testing

TL;DR: A single concrete example of expected behavior of the system under test.

Let me first describe how most of us developers usually write their unit tests. …


Image for post
Image for post

If you are developing the backend and frontend part of an application you know that it can be tricky to keep the data models between the backend & frontend code in sync. Luckily, we can use generators that generate server stubs, models, configuration and more based on a OpenAPI specification.

In this article, I want to demonstrate how you can implement such an OpenAPI generator in a demo application with an Angular frontend and a Spring Boot backend.

The Demo Application

For this article, I have created a simple demo application that provides a backend REST endpoint based on Spring Boot that returns a list of gaming news. …


Image for post
Image for post

In my current, I had the opportunity to develop a new application based on Vue.js in the frontend and Spring Boot in the backend. The backend should send updates to the frontend via a WebSocket connection so that users do not need to refresh the website to see the latest information.

The view should show a list of transfers where the user can modify the results by using filters and pagination. As a requirement, each user should receive specific results based on his filters and pagination without broadcasting this to all other connected users. …


Image for post
Image for post
Cover image

Using the terminal is one of the biggest productivity boosts you can gain in your daily work as a developer. If you know your shortcuts, you will be way faster than using the mouse. In this article, I want to show you my terminal setup and how I use it on a daily basis. The cover image shows my current setup in action.

I am a macOS user so the article is mainly focused on this operating system but most of the software I demonstrate is also available for Windows and Linux users.

Install Homebrew

Homebrew is the missing package manager for macOS (or Linux) and makes installing packages super easy. …


In Angular enterprise applications, it is often a requirement to load a configuration from a server via HTTP request which contains a UI configuration. Based on this configuration data, multiple modules and/or components need to be lazy-loaded and its routes dynamically added to the application.

In this blog post, I want to demonstrate how modules and components can be lazy-loaded at runtime using Angular 9+.

The following StackBlitz demo includes the code described in the following chapters:

The source code of the demo is available on GitHub.

Lazy Load Module Using Router

Lazy Loading: Load it when you need it

Since Angular 8 we can use the browser’s built-in dynamic imports to load JavaScript modules asynchronous in Angular. …

About

Mokkapps (Michael Hoffmann)

Freelance software engineer from Germany with focus on Angular

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