Angular E2E Protractor Introduction

This is an introduction to Angular E2E tests with two examples using Angular 10. The first example is the default test generated by the Angular 10 CLI and the second test does the following:

1. Logs in
2. Creates an item
3. Modifies the item
4. Deletes the item
5. Logs out

Angular uses Protractor to do the e2e tests. If you generate a project with the Angular CLI it's very simple to run your e2e tests by simply running ng e2e.

Source code can be found at https://github.com/saaratrix/angular-e2e-example

Using threejs with angular

I used Angular 7 with three.js to make a 3D viewer. The goal was to write a generic Angular component loading three.js that can easily be used by any project and then apply the application logic afterwards.

The project's source code can be found here: github.com/saaratrix/generic-3Dproduct-viewer
The generic Angular component can be found here: github.com/saaratrix/generic-3Dproduct-viewer/tree/master/src/app/viewer-threejs
The application can be demoed here: saaratrix.github.io/generic-3Dproduct-viewer/build/

Learning Angular 5

I wrote an app using Angular 5 that does many of the basic features in Angular. The backend uses Node.js, Express and MySQL.

Localized routing using ASP.NET Core MVC 2

This is one implementation of localized routes using ASP.NET Core 2 MVC. [Attributes] are used to control the localized route data for the controllers and actions for simplicity.
Source code: https://github.com/saaratrix/asp.net-core-mvc-localized-routing

Table of content:

Abstract

A localized routing solution using ASP.NET Core 2.1 MVC. The implementation uses attributes on the controllers and actions to determine the localization for each culture. A convention is added in Startup.cs to iterate over all the controllers and actions to set their cultural routes based on the [LocalizationRoute] attributes.

Location Based Saturation in Unreal Engine 4

During the Epic MegaJam 2017 I made one implementation of a Location Based Saturation that over time transitions from being desaturated to fully saturated. This is the technical implementation of that feature. The effect is demonstrated in this clip.

GLSL to Babylon.js ShadersStore code

This is about writing a .NET Core application to automatically convert GLSL into Babylon.js ShaderStore code. The project is available on github here.

Learning Angular 2

I've been wanting to try out angular2 for a while and decided to add angular2 to an existing node.js express project that I used to learn express. The project code can be found here: github.com/saaratrix/glossarytraining/tree/angular2
There is also a demo here where I removed the backend part so it works for gh-pages: saaratrix.github.io/glossarytraining/dist/
The finished project covers the basics of angular2 with input & output variables for components and services.

Localized routing ASP.NET MVC Core 1.0

This is one implementation of having localized routing in ASP.NET Core MVC 1.0 (asp.net 5 mvc 6 RC 1)
Source code: github.com/saaratrix/asp.net-core-mvc-localized-routing

NOTE: A reader notified me of some breaking changes in newer ASP.NET Core versions so there is an updated blog post here for version: ASP.NET Core 2.1 MVC

Abstract

A working localized routing example for ASP.NET Core MVC 1.0 release candidate 1. The solution uses attributes on the controllers & actions to determine the localized routing for each different culture. A convention is added to the MvcOptions in startup.cs to iterate over all the controllers & actions to set their routes based on the localized attributes.

Making of a table of contents script

I wanted to use an automatic table of content script to generate a TOC if necessary for this blog. I picked a script written by Ates Goral on stackoverflow: stackoverflow.com/a/187946.

When I was writing the Localization Routes post I noticed that some of the table content links weren't working properly. The error was that some headings were called ____________Id____________. So instead of trying to understand why the table of content script wasn't working I decided to write my own for fun.

I made the automatic table of content generation using typescript and the code is in the snippet below. What the code does is look for a #toc and #content element. Then it finds all the h1 to h6 elements inside the #content element. The cool part is that querySelectorAll() returns them in order of appearance so there's no need to sort them. So it's just a matter of iterating over each heading element and increase/decrease the level of the ToC.
The code can be found on github or in the snippet below: here.