If you are building GraphQL APIs with TypeScript and have a relational database, there are two main ORM libraries we can use: Prisma and TypeORM. Both of them are similar. They both use models to define database tables, have query APIs, handle db connection well, have good documentations and community …

There are many ways to handle authorisation with Apollo. Authorisation is the process to determine if the authenticated user has access rights for the particular resources while authentication is to confirm the user’s identity. In short, my recommendation is (5), by using graphql-shield. You can also check the code example …

If you want to look beyond authentication and authorisation to protect your GraphQL APIs, there are a few Node.js libraries you can have a look at. 1. Implementing Rate-Limiting Protection Rate-limiting will prevent too many requests coming in at once. For this, you can start with looking at graphql-rate-limit-directive. It …

Parcel is a relatively new JS bundler that promises zero configuration. I heard a lot of good things about this new bundler. So, I decided to give it a go. Here is the project that I created with Parcel, parcel-ts-react. In short, Parcel is great for small personal projects. However, …

Most of the design systems have custom fonts. Let’s see how we can bring them to Storybook. Once the font is in, we can start using it in canvas by adding CSS. My example storybook repo is here. First of all, we need to add a font folder and add …

When you download a font family from Google Fonts, it contains multiple files, each corresponding to a different style. It is common to just import a regular 400 with the font face declaration. The better practice is to use the method called style linking. In @font-face, we can use the …

If you are a React developer, you probably know the difference between mount and shallow when you are unit testing react components with jest. Mount renders full DOM. We use it when the component interacts with DOM Api or require a full lifecycle to fully test the component. On the …

When I created a lambda function with Typescript and GraphQL support with the apollo-server-lambda module (see the repo here), I got the error. It took me a while to figure out how to fix it, but finally I did by adding a module to webpack. The solution for this issue …

A web skimmer is a piece of malicious JS code embedded in web payment pages to skim customer’s payment information. There are a few tricks to embed malicious scripts. In this post, we’ll discuss how it can be done in CSS file and SVG file as well as what works …

If you are using TypeScript for Bootstrap, you need to extend the JQuery interface to add Bootstrap methods. For example, if you want to use the tab function from Bootstrap to programmatically trigger bootstrap tab click, the below code will have a type error. $(‘#mytarget’).tab(‘show’); With TypeScript, we can extend …