Forem: Kerschbaumer Stefan

Angular 20.1 Simple Animate On Scroll POC Implementation

Kerschbaumer Stefan — Sat, 26 Jul 2025 11:12:45 +0000

Did you ever think about creating your own Animate on scroll - for short AOS - library in Angular?
I did a few times, so i gave it a try and made a simple AOS library which supports only one animation type but can be extended pretty easy.

First of all, what is AOS?
AOS - Animate on scroll is some kind of UI feature where divs, images, ... - you name it - will get visible if with a beautiful animation when entering the viewport and hide again with the same - or another - animation when leaving the view port.

What do we need to archive this wanted behavior?
We basically only need a scrolling container where the animated elements are within and a little bit of angular magic.

Let's start by installing the latest angular cli globally, create a project and add tailwind since we will use it for easier animating!

So in your Favorite terminal, execute the following commands:

This will create a project in your desired directory and install its dependencies.
After that we need to setup tailwind.
We can do this easily by executing
npm install tailwindcss @tailwindcss/postcss postcss --force

Adding a file called .postcssrc.json with the following content:

and adding @import "tailwindcss"; to our angular project styles.scss.
Let's also add some simple primary & secondary colors for our testing environment in styles.scss.

Your styles.scss with custom colors and darkmode support could look like this for example:

Perfect! Our base is setup completly fine.
Now we should create some basic buttons or something which we can later animate on scroll.
For that i made a simple button which gets repeated four times within our future scrolling container.
This looks like this in the code:

And like this in the browser. (Note that you can only see one item since each button is wrapped in a full screen height div and you would need to scroll to see the others.)

Now comes the fun part!

We need a few things to make this work:

A Service which get's initialized when the app gets initalized so we can listen to scroll events on needed containers.
A directive which marks needed containers so we know we need to listen for scroll events on this container.
A directive which marks an element which should be animated on scroll with the needed meta, such as threshold, animation name, and so on.
A environment provider which will initialize our service on startup and gives us the possibility to customize everything.

**Let's start with the Service.

What do we need here?**

The first thing We need is an array with HTMLElements for which we should listen to scroll events, and a function to push to this array and add listeners to those elements.
We will push this elements from directives including a onDestroyRef, so we can stop listening to its events when the component attachted to the directive we are calling the service from gets destroyed.

So let's do that.

Create a simple service by executing ng g s aos-service in your favorite terminal. ( Make sure to remove the {providedIn: 'root'} part since we will later register it as a library.

After adding a function to save elements, and listen to scroll events your service should look like this:

Perfect!
Since we got this, we can add our aosWatch directive to register scroll containers.

This is actually pretty easy. All we need here is a SSR check to prevent logic from running in SSR context if you are using SSR, the elementRef to the element we are appending it to and the AosService injected.

If you are done it should look like this:

If you now add the xsipAosWatch directive to the main div and scroll in the Browser, you should se many SCROLLING!! logs.

Perfect, we are halfway done!

Let's implement our aosElement directive
What do we need for that?
This is actually a pretty simple directive. It will set a attribute using setAttribute and some tailwind classes to smooth out animations.
You could for sure improve this with more input params, but for now we will only add one for the animation style which we will later bind to a tailwind class using a object.

Our aos directive which identifies elements which should be animated on scroll could look like this:

If we import this directive to our app-component and append it to the third element - in this case the div with the title Button 3 we will see in the browser that it got a few more classes and a new attribute now.
That's exactly what we wanted to archive!

Let's re-visit our aos-service and add a function to identify if elements are in view or hidden, as well as a custom naming to tailwind class mapping ( for example fadeIn will result in opacity-0 ) and a type for that to make our aos-directive input typesafe!

After doing all this changes our aos-service should be finished and look like this:

And our aos-directive like this:

We are done! Congratulations, you did your first AOS implementation.
For sure, this is a POC, but can be refactored into something really cool!

If you visit https://aos.kerschbaumer.dev/ and scroll through the page, you will see that button 3 fades in as you scroll it into view, and out as it leaves the view.

Also here is the github repo for the POC :
https://github.com/xsip/ng-20-aos

I hope you learned something.
Happy coding :)

How to Prevent Darkmode Flickering in angular@20.1.0 SSR using Tailwind

Kerschbaumer Stefan — Mon, 21 Jul 2025 22:38:41 +0000

Lately i am Diving deeply into Angular SSR.
When it comes to DarkMode and SSR/ Hydration I faced the following issue:

The site is Flickering when hydrating the angular app in cases where i am using dark mode. This happens because the Website not beeing served in DarkMode when initialy loading the Site and the darkmode gets restored from the browser later on.

Why is this happening?
In most cases you save your ìsDarkModeEnabled in the cookies as well as in the localStorage. That's perfect, but Frontend logic for example appending classes to document elements can't run in the SSR Context.

To solve this i found a simple solution.

What you need to do, is check your cookies if dark mode is set, and append the class by manipulating the response body if needed.

This should look like this:

After that when i load my page with JS Disabled it get's served perfectly fine in darkmode.

Hope this helped you in some way!
Have a nice day and feel free to leave Feedback :)

How to Use NestJS as SSR Server for Angular v20 | POC

Kerschbaumer Stefan — Sat, 19 Jul 2025 11:47:40 +0000

Did you ever think about using nestjs as your SSR Server for angular v20 ?
It's actually pretty easy to set this up as a POC.

First of all we need to install a few dependencies to our angular application.

Those are:
`

"@nestjs/serve-static": "^5.0.3",
"@nestjs/cli": "^11.0.7",
"@nestjs/common": "^11.1.5",
"@nestjs/core": "^11.1.5",
"@nestjs/platform-express": "^11.1.5",
"@nestjs/schematics": "^11.0.5",
"@types/node": "^20.19.8",
"reflect-metadata": "^0.2.2",

After that we need to define a middleware to use the AngularNodeAppEngine within our NestJS server.

After that we need to create our AppModule where we register the Middleware and import the ServerStaticModule for static content serving.

This will look like this:

That's basically all we need.
Our server.ts within the Angular App will look like this:

Now if you run npm run start and have SSR enabled you will see that the NestJS server starts up perfectly fine.

Please note that this is just a simple POC and needs some tweaking as for example sometimes when the app is reloading the server is not shutting down completly or npm run build doesn't work at this time.

But i will try to improve my POC github repo to fix this issues.

You can find the minimal POC repo here:
https://github.com/xsip/ng-nest-ssr

Hopefully this helped you in some way.
Have a nice day :)

Unity Game Hacking - Calling FindObjectsOfType in C++

Kerschbaumer Stefan — Wed, 20 Nov 2024 16:32:12 +0000

Since i had struggles finding Objects while reversing Unity games i am going to share you how to find Objects by classname.
First of all: This will only work for mono games.
Games using IL2CPP need another approach.

So first of all, What are Objects in the Unity Game Engine?
Objects are instances of a classes for example Objects which gets rendered, the local player instance, ....
Sometimes classes hold static properties which provides a list of instances.
But if that's not the case we need to obtain them in another way.
That's where "FindObjectsOfType" comes in hand.

First of all we need to initialize mono to get access to all game internal stuff when injecting a dll.

So "mono.dll" exports a few symbols which we can use in our DLL.
You can get the C++ SDK from here: Mono SDK On Github

So lets add a file called "mono-loader.h" which will get our mono symbols so we can call them from out of C++.
This file will look like the following:

So no we are not ready yet to call our mono functions.
We can fix that by calling "LoadMonoFunctions" and executing "mono_thread_attach_func" with "mono_get_root_domain_func" at the beginning of our main thread.

This will look like the following:

Lets Implement our "FindObjectsOfType" function.

To do that we need to have a look in DnSPy to see where it is defined at.
If you look at "UnityEngine.CoreModule", you will see a class Called "Object".

This object class has a static function called "FindObjectsOfType" which takes a class instance of "Type" as argument.

To resolve the type by providing a String which Contains Module, Namespace and Class name we need to have a look at "mscorlib::system::type" within DnSpy. There we will find a static function "GetType".

So what do we need to do?
First of all we need to create a string used by the UnityEngine to get our type.
We can do that by defining a new function within our "MonoLoader" namespace called "MonoString".

This will create a Unity Engine / Mono string instance within our memory.

After that we can resolve our Type which we then need to provide to "FindObjectsOfType" by declaring a few helper functions.

First of all we need a function to resolve a Class.
After that a function to retrieve a mono module.
After that we need a function to get a class method, and a function to compile a function after obtaining the class method.

This are the needed Implementations:

So lets create our helper functions so that we can later on implement "GetObjectsOfType".

First of all we need to be able to retrieve our needed classes.
We can do that with the following implementations:

After that we can implement "GetObjectsOfType" pretty easily.
Have look:

This function will return a pointer to a c# array which we can read with the following functions:

To find out why i am using this offsets, please have a look at Cheat Engine using the dissect mono feature!

So lets imagine we want to create an aimbot and retrieve all enemies in a game.
In the game i am trying to hack there is a class called "Enemy" which has no namspace and is declared in the "Assembly-CSharp" module.

So that we can retrieve our enemy array and walk through it we can simply do the following:

To better explaing "FindObjectsByType" function:
The first argument is the Object name str which is constructed out of
"<classname>, <module-name>". If there is a namespace it would look like
"<classname>, <module-name>, <namespace>".

Well. From there on you are ready to hack!

Happy Hacking!

Prerender routes in Angular 18

Kerschbaumer Stefan — Tue, 06 Aug 2024 07:52:20 +0000

So lets expect you wanna create a blog website using angular 18 and need to prerender your blog urls for SEO.

This is actually pretty easy.
To get started we need to generate a list of our URLs to prerender.
For that i wrote a simple script.
This script will connect to our backend and get a list of all Blog entry names and writes it to a file called "routes.txt".
We will later on use this file for prerendering

First of all create a backend returning all names of your blog entries. I did this by using NestJS and wont get into detail here.
The server returns as said before a string array.

To create a "routes.txt" file for all your blog entries use the following script:

The output will look like this:

Now edit your package.json build script to the following:
"build": "node routes-generator.js && ng build",

After that we need to configure our "angular.json" to use this file for pre-rendering and replace our enviroment file to connect to the server instead of using our proxy.conf.json while building.
This will look like this:

My environment files look like the following:

Now when running npm run build our sites will be pre-rendered and when serving without JS enabled in chrome everything should be rendered fine.

Lets have a look at our "dist" folder.

This looks pretty good!

Now lets serve our app.
First run npm i -g http-server, then navigate to dist/blog/server and run node server.mjs.

When we navigate to our route and disable Javascript everything is rendered perfectly fine.

I hope you learned something from this article and feel free to leave feedback.

Happy Coding!

Remove Angular SSR code when serving to the client

Kerschbaumer Stefan — Wed, 24 Jul 2024 07:43:55 +0000

Did you ever notice that when you are using Angular SSR the server side code also gets served to the client?

To prevent that i made a small library called ngx-ssr-code-remover which removes SSR code post building by analysing the bundle files.

As you can see, without using my library the code served will contain my "secrets".

After adding two lines of code on the server side, and a decorator within the component everything gets removed.

Currently this lib is only tested with angular 18.1 using esbuild.
Also i didn't change any production build configs.
Lazy loading works fine and supporting providers is planned in the feature.
Feel free to checkout my repo, and/or give me feedback.

https://github.com/xsip/ngx-ssr-code-remover

Enjoy your day and happy coding!

Observe Typescript Classes

Kerschbaumer Stefan — Thu, 30 Mar 2023 12:39:01 +0000

Observe JS/TS/Node classes and get notified when functions get executed or properties changed
Check out my github repo:

Github XSIP/Observed

Async Constructors in TS

Kerschbaumer Stefan — Thu, 30 Mar 2023 07:20:37 +0000

Async Constructors in Typescript/NodeJS/Javascript are a thing!
Checkout my GitHub repo:
Github XSIP/ACON

Windows Game Hack with Javascript | Part 1

Kerschbaumer Stefan — Mon, 27 Jan 2020 09:24:10 +0000

What did i use?

nodeJs for reading processes memory and data processing

electron, javascript, html and css for overlaying the game window

How does the result look like?

Why did i do that using Web technology?

Since i started my life as a software developer by writing game hacks - or copy and pasting them at first - but lately moved further away from this topic i decided to start writing game hacks again by using the technology i am using nowadays.
So here we are, me, javascript, nodejs and electron doing something different.

What do i need other then developing skills to get started?

If you wanna recreate something like this you should have some knowledge about the game engine you are targeting and also know something about reverse engineering.

I want to say at this point that i have been developing cheats for the source engine over years but not gonna cover the topic on how to reverse memory addresses within the engine since this hacks target is CS:GO, and the CS:GO community decided to release all needed memory locations which are containing useful data open sourced and share them at a github repo when they change after game updates

You can find them here for example:

https://github.com/frk1/hazedumper/blob/master/csgo.json

Please notice that those memory pointers could belong to some module.

So you can't just read from the processes executable handle and the offset since that would be the wrong memory region.

You still need to obtain the base adresses of a belonging module ( memory location of a module within the processes memory ) and add it to the offset to get the right address.

I am anyway not going to cover that in this topic either.

If you wanna do some research have a look at www.unknowncheats.me - which is a great resource on gamehacking information - and its CS:GO section and you will find out about the games internals.

Let's get started

To start writing our first game hack using typescript and nodejs you need to create a new nodejs project by creating a folder and using npm init.

After that i installed the following modules:

typescript, ws - for the overlay communication, tslint, and memoryjs.

Now we should have everything ready to go and can create our src folder and its index.ts file for the hacks backend.

Main Data - Process Wrapper Class

Since memoryJs the class we are using to read process memory from a executable which is written by ROB-- needs to have a process handle provided on each read/writeprocessmemory we are going to wrap those methods by a custom written "Process" class to avoid that.

This looks as the following and can be found on my hacks github repo linked in the end.

as you can see we initialize the process class by passing a executable name and from then on we can use readMemory or writeMemory i.e of the new class instance instead of passing the handle of the executable on each memory request.

Main Data - Global Process "Shortcuts"

To make the ussage even easier i will create global variables called rpm, wpm and mT.

Those will be ReadProcessMemory, WriteProcessMemory, and MemoryTypes.

I expose them as in the following example:

Main Data - Playerdata creating a class for it

In CS:GO there is something called "EntityList" which can contain a maximum of 32 "Entitys" -which are actually players - and this list which can be retrieved on different ways, will be the base of our radarhack.

At the current version of CS:GO this list containing playerdata is located at "client_panorama.dll" + 0x4D3D5DC.

So to retrive all the player information we need to read "client_panorama.dll" + the offset from above and from there on we can retrieve data for each player connected to the game by adding the size of each player in memory * the players id to the pointer from before..

So to retrieve entity number 2 for example:

pointer = "client_panorama.dll" + 0x4D3D5DC.

pointer + (0x10 ( = the size ) * 2) skips the first player and gives you the
pointer to the data of the second player.

From there on we can retrive data using offsets of so called "netvars".

Se that we don't need to add a function called "getHealth", one called "getTeam, another one called "getOrigin" i.e i wrote a resolver which makes use of a predefined offset list and generates read and write memory function for each memory offset.

The create resolver function looks like this:

createResolver

As you can see the createResolver function is also pretty forwarded.
At this point please understand that not all of those offsets inside our offset list are actually offsets belonging to Entitys but because of lazyness i didn't create an extra class for offsets which belong to Entitys only which means that our entity resolver will contain read/ write functions which are basically pointing to some invalid memory.

I just took the dumped offsets as they are from the hazeDumper repository on github - which i linked in the beginning. - without making any customization

Topics of the next posts

In the next episods will cover the following topics

The entity class to read player data,
The websocket server to be able to communicate data to the overlay
The calculations to transform 3D World Data to 2D Radar data
The electron frontend to create a overlay which will render the radar over the games screen

So, if you are interested in reading more, stay tuned :-)

github repo to the finished proof of concept:
https://github.com/xsip/external-csgo-typescript

Automated Sourcemap SourceContent Extraction by URL

Kerschbaumer Stefan — Sun, 26 Jan 2020 12:56:14 +0000

Today I wrote a nodeJs script called "pack-scraper".

What it does is walking through all script tags within the HTML body fetched from a provided url by the parameter "page" to check if there is any sourceMapUrl provided within any of the loaded Javascript files.

If pack-scraper finds any sourceMapUrls within the javascript files it will clone them to a local folder described by the parameter "outDir" and afterwards extracts the source files from this sourcemap files if available.

so, i.e we could serve a local angular app and execute:
"npm run cli outDir=example page=http://localhost:4200" to basically get the same sourcecode like the project contains if sourcemaps are enabled and the "sourceContent" array isn't empty.

Please note that this is a tool developed for analyzing.

You may wondering what happens with lazy loaded javascript files in Angular applications for example?

Those files are currently not automatically added to extraction, so if you wanna unpack them also you need to click through all routes in a i.e Angular page and finally provide the obtained script list to "additionalScripts" parameter seperated by a comma.

Since this scraper should basically be focused on Angular applications I am anyway planing on implementing a Class to analyze the mainbundle and finally its subbundles so it can extract paths and automate this process.

To get a list of available commands execute "npm run cli help" after cloning and running "npm i"
The sourcecode can be found here: https://github.com/xsip/pack-scraper

Disabling Prod Mode in already Built Angular App in Chrome

Kerschbaumer Stefan — Wed, 22 Jan 2020 06:07:58 +0000

In this small post i am talking about chromes "Override" tab.

Maybe this is well known and widely used but I just found out about it today and wanted to push it for beginners or people which are not using this cool feature of the Chrome DevTools for debugging.

Since chrome version 65 - any yeah I know that this version has been released back in the beginning of 2018 - there is a tab called "Overrides" within its DevTools Sources section which can be used to replace files which are normaly requested from the server belonging to the frontend with local files.

For this to work you just need to open your DevTools and go to Sources, from there you click on "Overrides" and select a folder for overrides.

After that you can go back to sources and right mouse click on a file to save it for overrides.

Chrome will then create a folder within your selected override folder named like the page you saved the file from containing all files you saving for this domain.

From here on you can make changes using the DevTools itself or any editor you'd like to use.

I.e we can take any main Js file generated after angulars build process and search for "enableProdMod" to in the end remove that line of code and get "ng.probe" again even after reloads.

happy debugging.