DEV Community: kreuzerk

Angular's standalone router APIs

kreuzerk — Tue, 18 Oct 2022 13:28:35 +0000

✅ Explore the new standalone APIs
✅ Learn how to migrate your app to the new standalone APIs
✅ Case study which explores how much of the router implementation can be tree shaken when using new standalone APIs

Read the full story here

Advanced Typescript

kreuzerk — Wed, 01 Sep 2021 13:42:11 +0000

Get familiar with some of Typescript's greatest advanced features.

Continue reading on Medium »

How to implement an address search with Angular and Google Maps

kreuzerk — Tue, 29 Jun 2021 06:20:49 +0000

With more than a billion monthly users, Google Maps is one of the most used/known applications. Since Angular version 9, it’s also…

Continue reading on Medium »

Angular structural directives - how to implement your own ngIf

kreuzerk — Wed, 23 Jun 2021 06:40:16 +0000

Watch on Youtube »

Angular interviews in 2021

kreuzerk — Thu, 17 Jun 2021 07:56:38 +0000

Here’s what you should know going into an interview

Continue reading on Medium »

Angular structural directives — implement your own *ngIf

kreuzerk — Wed, 02 Jun 2021 07:35:45 +0000

Continue reading on Medium »

How to build your own tree shakable SVG icons library in less than 30 minutes!

kreuzerk — Thu, 11 Feb 2021 08:52:05 +0000

How to create your own FontAwesome. Ship SVG icons optimized for tree shakers and splittable across multiple bundles.

Continue reading on Medium »

Angular & Nest, a match made in heaven

kreuzerk — Wed, 23 Dec 2020 20:10:21 +0000

How to generate a frontend and backend application with 5 commands

Continue reading on Medium »

How to marble test RxJS Subjects

kreuzerk — Thu, 03 Dec 2020 11:02:59 +0000

How to bridge the gap between the timing of function calls and Observables

Asynchronous code is hard! It’s hard to write and to test.

RxJs has changed the way we think about asynchrony. Instead of using Promises, we nowadays deal with streams in the form of Observables or Subjects. RxJs provides us with many out of the box operators to create, merge, or transform streams.

But we do not only get great tools for runtime code, but we also get amazing tools to test streams.

Marble diagrams are a great way of modeling streams. They are used throughout many tutorials and can now also be used in tests to assert streams.

In case you never heard of marble testing I recommend you to checkout the following article.

Marble testing with RxJS testing utils

Marble testing is great! Many people use it to test their Observables. But what about Subjects?

Find out more...

Make your Angular application accessible for everybody

kreuzerk — Tue, 07 Apr 2020 05:55:27 +0000

How to setup automated accessibility tests for your Angular application

Accessibility is an essential topic for every modern web application.

Accessibility means that everyone can use your web application. As devs, it’s easy to assume that all users can see or interact with a page as we do. But there is a range of people that do not belong to the “typical” user. People may have visual, physical, auditory, or cognitive problems.

Accessibility is not about including groups, it’s about not excluding groups.

Even though accessibility is crucial, it’s often overlooked. I was once in a project where we built a vast webshop and completely forgot about accessibility. With that, we excluded a range of persons from our business. Also, our shop was nominated for an award which we didn’t get because our shop wasn’t accessible at all. 😔

You can imagine what happened after that. Taskforce! Trust me, adding aria attributes and listen to JAWS screenreader for days is not fun!

Find out how to prevent such situations with automated accessibility tests

How to create a fully tree shakable icon library in Angular

kreuzerk — Mon, 23 Mar 2020 06:58:13 +0000

Nearly every SPA uses icons. Often, we use icons delivered by a component library, such as Material, or we take icons from a dedicated icon library like font-awesome. In some cases, however, the icons need to match our brand. Therefore, we need to provide a custom icon library.

If you create an icon library, performance is something to consider. You don’t want to deliver a set of 300 icons to the user if they only are going to display two icons. Right?

Find out more

How to create a memory leak in Angular

kreuzerk — Tue, 10 Mar 2020 21:41:38 +0000

explore the most common cause of memory leaks in Angular apps — learn how to fix them and to avoid them in the future

Performance is crucial to the success of a web application. As a developer, it’s essential to know how memory leaks are created and how to deal with them.

This knowledge is especially important once your application reaches a certain size. If you aren’t careful about memory leaks, then you may end up in a “memory-leak taskforce”. (Yes, I have also been part of one 😉).

Memory leaks can have multiple sources. However, we believe that in Angular, there’s a pattern to the most common cause of memory leaks. And, there’s also a way to avoid them. Find out more