Frontend

Code: Download file from backend in an AJAX manner (Typescript)

User story: The backend sends back a file for you to download, using headers such as “Content-Disposition” and “Content-Type: application/pdf” Upon request, the browser will download the file for me in an AJAX manner, so I can show a progress bar If backend sends an error in JSON format, I want to see the error …

Code: Download file from backend in an AJAX manner (Typescript) Read More »

Some thoughts about reusable component design in react

Consider passing in some properties as children,  instead of props . This will make the code looks cleaner: The consumer doesn’t have to build a big “props” object to pass in You will divide a single component into several ones. Each one will a take small props object, which is highly inherent For example, instead …

Some thoughts about reusable component design in react Read More »

Opinion: Don’t use class for data structure in typescript (2019). Use interface only

Always use interfaces instead Problems of class: Lots of frameworks such as Redux don’t support class instances. They only support plain objects. There are tools that can convert plain objects to class instances, but the point below makes it awkward. Given a variable “someType: SomeType” in the code, you don’t know if it is a …

Opinion: Don’t use class for data structure in typescript (2019). Use interface only Read More »

IOS Safari showing a blank page when coming back to a React Component

Problem When you go to a react component, then go to another, and finally come back, the react component is showing blank, or half-blank. Investigation If you inspect the page with the mobile safari inspector , you can see the elements are there, but safari just refuse to show the data on the screen. In …

IOS Safari showing a blank page when coming back to a React Component Read More »