Notes about Refactoring, at very beginning

https://refactoring.guru/refactoring/what-is-refactoring

Why Refactoring ?
Fight technical debt, clean code

And because you are not Chuck Norris

Angular errors that kick in my nuts - ExpressionChangedAfterItHasBeenCheckedError

Take notes of some angular errors which kicked good in my nuts

ExpressionChangedAfterItHasBeenCheckedError: "Expression has changed after it was checked"

Notes about Domain-Driven Design

Ubiquitous Language

Consistent nouns, verbs, statements within the team. Your team member should know what you're saying immediately in the first sentence.

From Promise to async/await in Typescript Part II

In part I we went through a simple example, simple enough to illustrate what async/await look like and how to use them. This time we can discuss why we want to embrace async/await, instead of our old friend Promise.

From Promise to async/awiat in Typescript Part I

Diving in the asynchronous programming environment for a long while, at least 3 or 4 years I think, from Promise to Rx Observables. Until recently I finally found that they actually put this pattern support explicitly into ES6(ECMAScript 2015) implementation.

Design an Angular 2+ shopping module PART 3

Follow up from PART 2 we now need to fill the blank of payment implementation which is mostly handled by 3rd party payment services, but we still need an adapter or api or something to communicate with these external services.

Design an Angular 2+ shopping module PART 2

Now I'll need an user story to figure out what services and functionalities I need.

The user story...

1. When I see an item, whatever is for sale, it's a Product. I can add it to my shopping cart.
2. I can quick link to my shopping cart wherever in the APP.
3. I can change the quantity of purchased product
4. It'll require my contact information to complete the order.
5. I have to choose a payment method to complete the order.
6. I have to follow the instruction of payment method to complete payment.
7. When payment confirmed, I need to be noticed that the order is confirmed paid.
8. I can review the order detail anytime.
9. I can check a list of all my orders.

Design an Angular 2+ shopping module PART 1

I should have done this way before my code of this module being tangled like a hell.

A shopping module...

What the fudge is it ?

It's an Angular 2+ shopping module, which is meant to be integrated into any Angular 2+ APP and enabling users to purchase items in the APP, to create an order, and to pay for that order.

RxJs mergeMap, switchMap, concatMap, exhaustMap in exmples PART 2

PART 1

Quick review of part 1, our purpose is to clarify differences between RxJs mergeMap, switchMap, concatMap, exhaustMap, and we made a scenario as bellow to do this:

• There are 5 tasks which I have to do on almost every morning
• The 5 tasks start in a specific order, which won't change at all.
• But how long each task takes to finish it, that will change.
• Our mappers wait for a task finish and emit message to info the finish.

RxJs mergeMap, switchMap, concatMap, exhaustMap in exmples PART 1

We once talked about how mergeMap(flatMap), switchMap, concatMap work and what's those differences between them, in words, without examples. And we missed the youngest kid in the Map family, exhaustMap. It's time to use some example codes to clarify them once for all.

Write a compound number range picker in Angular 6

The reason of this component is that I need a custom input for users to decide their budget, include minimum and maximum, 2 numbers. And lately I found that this input could be reusable in many cases, while itself defined in features as below:

Write a general purpose Angular 2+ comments

As long as there is something in your website to show to users, there must be urgent of your users to comment on that something. This is always true for any content-providing website. After all, what's the good of a website if you can't dump any of your garbage opinions on its garbage content.

Why sanitize html context ?

Image this situation when you write a blogger, or a forum, or an online editor for 3 GODDAMN 研究紀錄簿s every month like this one, whatever.
If your editor supports only pure text that will be so lame, right? So basically what you need is an editor which enables users to input their colourful HTML encoded content.

Write Angular 2+ Custom Form Control

We use form to collect data from user and save it as an object, a record, or a document into backend data-storage.
In simple case like User profile, all we got are name, email, phone number, age, birthday ...etc., nothing more than a string, number, or date, there are already built-in html5 inputs to handle data of these certain types, and Angular 2+ also integrated them naturally, but how about data field of some more complicated type? or when the ordinary flat inputs can not satisfy my desire for a more splendid UI ?

flatMap, mergeMap, switchMap, concatMap, which one !?

To concatenate(or chain) asynchronous tasks we can just use then method of Promise, as example from javascript document

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback)

What the Hell is ErrorStateMatcher

Why ain’t my mat-error pop up ?


Last day I was trying to build a custom validator for my Reactive Form, with a Angular Material Form field.
As a usual milk drinker I was totally copying the way of error handling depicted on Angular Material’s document, here it is


It looks like this
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>


A *ngIf to check the form control’s valid state, that’s simple obviously, but I just couldn’t get it to show up no matter how many balls I crammed into the damn form-field, ...got only two, actually.

I made a little test code on StackBlitz

See in the screenshot I just use a boolean variable to control the visibility of mat-error, and a button to set that variable.


Even in this simplest case, the mat-error never wake up to live.

I was going to punch this…


...Until this obssesive programmer guy with his blog saved my day.





https://obsessiveprogrammer.com/validating-confirmation-fields-in-angular-reactive-forms-with-angular-material/



What ErrorStateMatcher? no one said nothing about it…





Quote this paragraph in the blog:





“The errorStateMatcher directive is built in to Angular Material, and provides the ability to use a custom method to determine the validity of a <mat-form-field> form control, and allows access to the validity status of the parent to do so.”





What !? If you take a look back at Angular Material’s Form field overview, there is nothing mentioned about ErrorStateMatcher, even the word itself never shows up in the page.





It’s just an overview I know… I am a milk drinker.

Thanks to the obsessive programmer dude I implemented my LeastRequireErrorMatcher class which inherits ErrorStateMatcher.


It accepts an array of field names for its constructor, and check if at least one of these field controls has value, if not, return error object.

With binding the instance of LeastRequireErrorMatcher to mat-input, the expected error message finally emerged, HURRAH~!

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

TL;DR

Your test/spec, a single it block, spends a too damn long time to finish.

Increase the value of jasmineNodeOpts.defaultTimeoutInterval in protractor.conf.js

Or give it an additional arguments to specifically set timeout.

Request cancel by client

I've spent entire morning to find out which part of my server's code cause the console message below

POST /api/channels - - ms - -

This message indicates that this request has been cancelled at some point in its life cycle, since there is no elapsed time recorded.

It turns out I've been thinking in the wrong way, it's the client, not server, stupid... stupid...

Notes about using Promises

Record some pitfalls when using Promises

When it comes across circular-dependency

Refer to Circular Dependency in constructors and Dependency Injection

I have to quote this:

To find out which one it is, list all of the methods in your class B used by class A, and all the methods in your class B used by class A. The shorter of the two lists is your hidden Class C.