My collection of React articles and video that I read and enjoyed.
"Working Experience" category
Slick has been my top choice when it comes to implementing feature-rich sliders on the web
When hovering into a div, we usually want to show that this div is highlighted, usually with different border.
We need to override two custom classes for Material Dialog component always to have it stick to the top.
How to fix this kind of issue - Property 'onerror' does not exist on type 'EventTarget'
My implementation for Stack using TypeScript
My implementation for Queue using TypeScript
My implementation for singly linked list using TypeScript
Have you seen this question before?
If you are a react developer, there is a good chance that you faced this warning at least once.
Using a few lines of code could make the application feel much better!
Follow @angularsg for the upcoming events :)
An example of real-world monorepo codebase using Nx Workspace
This structure has been serving us really really well by enforcing consistency, promoting SCAM, prevent circular dependencies, and minimize mental overhead of "where to put what"
Because # in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #, that is the value of escaped # character.
The main difference between unknown and any is that unknown is much less permissive than any: we have to do some form of checking before performing most operations on values of type unknown, whereas we don't have to do any checks before performing operations on values of type any.
You'll need those tips one day if you get used to RxJS 🤣
I'll show you how to migrate from TSLint to ESLint and using husky to run lint every time you try to make a commit
A simple walk through how to use the browser MediaDevices for capturing picture from a webcam in Angular
Do you know you can use Observable for Angular Output?
Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.
The holiday session is coming. Let add a simple snow effect to your Angular application ❄️❄️❄️
We will write a custom directive to disable a reactive form control by passing a boolean flag on the template
Have you ever do console.log an object and wondering how can copy the object over?
This post gives you a glance at TailwindCSS and how to use it with Angular. If you're reading this and you don't know what TailwindCSS is, where have you been?
Repost my killer answer on StackOverflow with more than 600 votes
Still use Github for most of the work, but Gitlab for my blog
In short, a closure is not the function that is returned in another function. A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function
If you have multiple concrete classes that inherit from the same base class, or implement the same interface. You should consider using visitor pattern. It will save you from dozens of if-else block or switch/case and typecasting
Once you go black you never go back :)
Understand and prevent the most common memory leaks in Angular application - Subscription unsubscribe
Remember to clean up your Rx subscriptions. In my experience, this is by far the most common cause of memory leaks in Angular applications
The different when using value and ngValue on Angular form
The goal of the game is to have as short-lived branches as possible (i.e. integrate often) while keeping the common branches (dev/patch) as stable as possible
You could use an extension for VSCode for converting C# class to TypeScript class in a few seconds 🥰
I like the Redux concept. But not NgRx :)
Write a custom async validator to validate an input field with a backend API in Angular reactive form
Pluralization is a problem in its sphere. We need to always correctly define grammar in our apps based on the singular/plural value
Export data to Excel is very useful on the data list for nearly every web application. The export feature helps to download the data list in a table as a file format for offline use
Hoư to limit the number of simultaneous requests to 100, and queue up the rest
I prefer to use FormGroup to populate the list of checkbox. For checking at least one checkbox was selected, write a custom validator.
null and undefined are the root of all evil. It often leads to runtime errors. It is easy to write code that will throw Error at runtime.
To define the function callback type. You could declare an interface that has a call signature. Or define a new type
In the use case of search, we don't want to hit the server endpoint every time user presses a key, it should flood them with a storm of HTTP requests. Basically, we only want to hit it once the user has stopped typing after sometimes (for instance 300ms) instead of with every keystroke.
Not all the time we need to cast from JSON object to a class, but sometimes it is really helpful. Use class-transformer to transform JSON object to class instance
Freeze screen in Chrome debugger / DevTools panel for inspect element that will disappear on hover/click
Run the setTimeout to trigger debugger before the element disappearing 🤓
How to use ng-template to render view recursive in Angular
Another interesting tree traverse problem that could land you a job 🤓
Use npm outdated to check and upgrade package accordingly
Vertically center in CSS has never been an easy problem
Using momentjs parseZone functionality for that purpose
I found that source-map-explorer tool shows an easy-to-understand-and-explore visualization to help you debug where all the code is coming from.
Debounce and throttle are two techniques to control how many times we allow a function to be executed over time
I will summarize the steps needed to integrate Angular 2 and Webpack build process in an MVC 5 application
There are only two hard things in Computer Science: cache invalidation and naming things
In this tutorial, I will show you how to create an animated fixed navigation that will resize on scroll and when you scroll down the page a bit, the header resizes smaller, and gets back bigger when you scroll back to the top with just simple CSS3 animation and jQuery