A day in the life of...

If you need something like JavaScript's setTimeout in Blazor, you can achieve the same thing with a System.Threading.Timer: The time sponsored by Accurist is @Time private string Time { get; set; } protected override void OnInit() {  var timer = new System.Threading.Timer((_) => {   Time = DateTime.UtcNow.ToString();   InvokeAsync(StateHasChanged);  }, null, 0, 1000);  base.OnInit(); }

I was really pleased to see my Blazor library "Fluxor" mentioned in this Visual Studio Magazine article!!!

I saw a post on Twitter from a guy named David McCarter  promoting his new book.  Rock Your Code: Defensive Programming for Microsoft .NET . I thought the title looked interesting so I bought it. This book (if approximately 50 pages of A5 can count as a book) was packed with bad advice. It is going to be more effort to explain why than the book deserves, but I will do it. TL;DR Source code doesn't compile. When it does, it doesn't do what the author says it does. The author promotes practices long established as poor. Chapter 1: OOP This chapter explains the three pillars of OOP are Encapsulation, Inheritance, and Polymorphism. The author has a tiny 1 or 2 sentence explanation of each. He then goes on to show an example of some poor source code "from a real in production project" (I hope he has permission from the copyright holder). The source code is a single class with lots of public attributes. That's the end of the chapter. Honestly, th...

If you have an Observable<x> in your component you might find yourself doing something like this {{ ( source$ | async)?.property1 }} {{ ( source$ | async)?.property2 }} This will subscribe to the source$ observable more than once. A commonly used technique to avoid this is to assign the result of the async into a view variable, like so: <ng-container ngif="source$ | async as source">   {{ source?.property1 }}   {{ source?.property2 }} </ng-container> But if you have other UI elements within that ng-container that you want to be displayed whether or not source$ has emitted a value then you might not like the fact that a portion of your UI is excluded until the observable emits a value or when the observable emits a falsey value. If that is the cast, you can try this little trick. <ng-container ngif="(source$ | async) || {} as source">   {{ source.property1 }}   {{ source.property2 }} </ng-container> We utilise *ngIf ...

Here is a simple routine that implements what is known as the Elvis Operator in TypeScript. In C# you can write code like this Nullable<int> age = person?.BestFriend?.Mother?.CurrentHusband?.Age); If any of the values along the way it will return a null rather than throwing a NullReferenceException. Using the class in my previous blog  Get a Lambda expression as a string  it is possible to achieve the same in TypeScript using the following format const age = elvisOperator(person, x => x.bestFriend.mother.currentHusband.age; It doesn't currently support anything more than simple property access, so you can't access elements in an array for example. import { Expression } from './expression'; export function isUndefinedOrNull(value: any): boolean { return _.isNull(value) || _.isUndefined(value); } export function elvisOperator (instance: TSource, member: (v: TSource) => TResult): any { let path = Expression.pathAsArray(member); let result...

If, like myself, you prefer as many of your coding mistakes to be identified at compile time as possible then you might like the following example. The FormBuilder in Angular expects us to identify our FormControls with a string name. If ever the API of your server changes then of course the names of those controls will also need to change. So, rather than using magic strings when building a FormGroup I wrote this small utility class for building them against a strongly typed class by using lambda expressions. This routine uses a routine I blogged about recently  ( Get lambda expression as a string) Take the following interface as an example of something we wish to edit in a ReactiveForm. interface Address { line1: string; line2: string; city: string; } The code to build the form would look like this this.form = this.expressionFormBuilder .createFormGroup<Address>() .addFormControl(x => x.line1) .addFormControl(x => x.line2) .addFormContro...

If when you run your tests you see an error similar to this Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/xxxxxxComponent_Host.ngfactory.js It means something in your component is throwing an exception and the test framework is returning a wrapped exception. To see the actual exception run ng test with -sm=false as a parameter ng test -sm=false This will not only stop your browser from freezing on that test, but will also give you the original error including line number.