Feb 3Member-onlyReact — Why you should start integrating non-React libraries with React contextReact context is a tool to pass data through the component tree without having to pass props down manually at every level. It is a relatively unpopular and optional feature. It is totally possible to build a stunning application without using React context. Some React developers may not even have…React4 min readReact4 min read
Dec 9, 2022Member-onlyAngular — Three alternatives for unsubscribing observables at ngOnDestroyRxJS is a common library in the world of Angular. If you have been using RxJS for some time, you may have already faced the unsubscription issue. Simply put, after making a subscription, you will always need to unsubscribe at a certain point to avoid memory leaks. We want it…JavaScript4 min readJavaScript4 min read
Feb 26, 2022Member-onlyJS/CSS — Transition effect for looping background videoUsing videos as the background is a common practice nowadays for creative web design. However, most videos are not self-looped. There is a flicking of frames when those videos are repeated, which is simply — ugly. This issue can be solved by simply adding a transition effect at the end…Web Development2 min readWeb Development2 min read
Apr 25, 2021Member-onlyAngular — Four practical use cases of NgTemplateOutletNgTemplateOutlet is one of the most overlooked features in Angular. In fact, it is designed to cater some very specific scenario that alternative is hardly found. It can highly improve the code quality when used correctly. Here I have summarized four practical use cases of NgTemplateOutlet that can fit in…JavaScript5 min readJavaScript5 min read
Apr 20, 2021Member-onlyAngular — An extremely simple and easy implementation of drag and drop list reordering without libraryDrag and drop list reordering is a very common feature of webpages with lists of data, such as Trello, Jira, etc. It is also a frequently asked question during frontend developer interviews. It was once one of the most difficult features to implement due to huge amount of DOM manipulations…Angular4 min readAngular4 min read
Mar 26, 2021Member-onlyJS — A life changing coding trick with anonymous functionAnonymous function is one of the most overlooked features in the world of JavaScript. Yet, when used correctly, it can highly improve readability and reduce line of codes. Here I would like to introduce a trick that use anonymous function for assignment, which I find extremely useful. The Problem Modern coding practices…JavaScript3 min readJavaScript3 min read
Feb 4, 2021Member-onlyAngular — Four old fashioned practices that you should NOT carry forward to AngularBefore the invention of modern JS frameworks, most websites were built with static HTML plus classic JS libraries, such as jQuery. Many practices have been formulated based on this stack, but some of them may no longer applicable with modern frameworks nowadays. …Angular5 min readAngular5 min read
Jan 20, 2021Member-onlyAngular — Using service as a single source of truth for highly coupled page componentsPages refer to the outermost components that combine multiple smaller components to form the views for users. They are usually the least generic component among the whole code base. In order to suit the very specific UI/UX requirements, it is very common for pages to have clumsy logic across multiple…Angular5 min readAngular5 min read
Nov 12, 2020Member-onlyAngular — Utilizing custom pure pipe to improve performancePipe is a powerful feature in Angular to achieve data transformation in templates. @Pipe({name: 'trim'}) export class TrimPipe implements PipeTransform { transform(value: string): string { return value.trim(); } } @Component({ template: `{{ value | trim }}`, ... }) export class AppComponent {...} However, not many Angular developers like working with…Angular4 min readAngular4 min read
Oct 27, 2020Member-onlyAngular — Why you should (and how to) avoid Function.prototype.bind in templateFunction.prototype.bind is a built-in function, which creates a new function with the context bound to the context given from the parameter. The major use case for this function in Angular template is the property binding (@Input) of function. <app-test-component [testFunction]="printValue.bind(this)"></app-test-component> This helps to maintain the context scope when the function…Angular3 min readAngular3 min read
