Using playwright during SPA/Angular development to mock your environment

Developing Single Page Applications (SPAs) can be complex, particularly when combining a SPA that communicates with one or more API's with complex data sets. It's often time-consuming to create a full range of testing projects that cover all the required scenarios in your testing environment due to complex dependencies or additional data structures necessary to make it work.

With the emergence of modern testing frameworks and libraries like Playwright, it is now possible to build SPAs without being dependent upon the entire environment and mock out parts to fit a given need. This allows developers to speed up the development process, be more fluent and agile, and ultimately deliver high-quality applications faster.

Customized pull request status policy using Azure Functions for semantic release PR titles (part 1)

In my previous blog post, I showed you how to automate releases using pull request titles for your NuGet packages.

When you use this process less often, or if you have new people onboarding your team, it is beneficial to give some additional help/ insights when they go through the process. This blog post will look at how to build an Azure Function to provide more information about the process during your regular pull request workflow.

Automate your release flow of NuGet packages using Azure DevOps and Node's semantic-release

In the NodeJS ecosystem, a great solution is available for automating the workflow of releasing packages, explicitly concerning the versioning of packages, named semantic-release.

All it takes for you to use this in your .NET project is a willingness to accept a little bit of JavaScript in your .NET deployment pipeline. A well worth exception you should be willing to take to improve your overall development experience.

In this blog post, I will take you through my setup for a project that builds & publishes a NuGet package using Azure DevOps to an Azure DevOps artifact feed.

Creating a typed version of Aurelia’s computedFrom decorator with Typescript

When using the computedFrom decorator in Aurelia, you currently need to specify the fields it depends upon using strings. Which is useful, because in Aurelia you could create a field/ property that is only defined in the view and not in the ViewModel.

Now if you are using TypeScript and are very used to things being typed, you might not like these strings, because they could contain typos.

In version 2.1 of TypeScript, the keyof index type query was introduced which allows us to force a string to equal one of the member names of an object. With this new feature, we can make the computedFrom decorated typed.

Using SVG in Aurelia with a inline SVG custom element

Maintaining a significant portion of inline SVG in your HTML pages isn't the most fun task and most of the times won't help you to understand your HTML code quickly.

Dwayne Charrington found a great solution for this problem by creating a custom element that replaces itself with external SVG (Inline SVG custom element for Aurelia). This is a very easy to use solution and works great! In my use case I also needed my SVG image to respond to changes in my application / modify it with bindings in Aurelia, which isn't possible (or I don't know how to do it :-)).

I've played around a bit and came up with the following modification to resolve this specific case. I extended his idea and made it possible to, for example, bind to the attributes of a given SVG object or repeat a given SVG object with a repeat.for.

Using tslib for TypeScript 2.1 with Aurelia to save bandwidth

The TypeScript release notes for version 2.1 contains an interesting section named ‘Support for external helpers library (tslib)’. This new feature allows you to use require.js to get the polyfills or helper functions that are normally generated by TypeScript in each file to support backward compatibility (using ESnext features supported by TypeScript, but not yet by all browsers).

Protractor e2e testing with Gherkin, CucumberJS, Typescript.

In the following blog post I will show you how to setup Protractor e2e testing using TypeScript and Gherkin syntax.