TILs - Fueling Curiosity, One Insight at a Time

Postgres query uses || as string concatenation instead of +

We can type JSON into https://app.quicktype.io/ and it generates TypeScript type.

Can be helpful in defining types for api response (usually while integrating third party apis where large amounts of data is returned).

you can whitelist IPs and ranges in nginx. When we have separate virtual hosts these are saved in /etc/nginx/sites-enabled. The rules look like allow xx.xx.xx.xx/range(32); and deny all;. Further we can make sure nginx passes some headers to the app using the rules proxy_set_header Host $http_host;.

We can use the following where clause to filter users based on their age using a Postgres query
(CURRENT_DATE - INTERVAL '18 years')::date < TO_DATE(T3.DATE_OF_BIRTH, 'YYYY-MM-DD')

As a Next.js app can be executed on both the server and the client side. When the app is rendered on the server, there is no access to the browser-specific features like localStorage, as it is a feature of the client-side browser environment.

So let's say, if we try to use localStorage in a Next.js app, we may encounter issues when the app is being server-side rendered.

To avoid this problem, we can check if localStorage is available before using it in our Next.js app.




This way, our app will only use localStorage when it is available, and avoid errors when it is not.

Bring the suspended server to foreground using fg command. Say the server is running and we want to install a package



And the server resumes

We handle navigation in Gatsby using the Link Component. So if we put both external and internal links in the Link element, we receive the following warning in the console:
External Link was detected in a link component. Use the link component only for internal links.

This is because the Link component is designed to interact with Gatsby's client-side navigation, which is better for single-page apps and uses the window.history API to update the URL without reloading the entire page.

So in case of external links, we should prefer a simple a tag and pass the href attribute.

Also gatsby prefetches the linked pages by starting a low priority request over a link, when we take the mouse on it onMouseOver, it makes the request high priority.

Difference between DOM element properties clientWidth clientHeight , offsetWidth offsetHeight , scrollWidth scrollHeight

• clientWidth /clientHeight is the visual portion of box content, borders and scrollbars not included, but padding is included
• offsetWidth/offsetHeight is the size of visual box including borders. Can be calculated by adding width/height and padding and borders.
• scrollWidth/scrollHeight is the size of the box content, including the parts that are hidden outside the scrolling area

Linked Lists

Linked list are a linear data structure like arrays. But unlike arrays they are not stored in a single place in memory. They are made up of connected nodes, where each node consists of data and address of the next node.

Why do we need Linked List?

• Arrays can store the similar data but they have an upper limit, we need to speculate the size of array in advance, and the allocated memory is generally equal to the speculated size of the array
• Inserting and deleting data in between of Array is tedious, but in case of Linked List if we have the head node we can traverse to any node through it and insert new node

Set log level carefully, because depending on the level some logs may never be passed to the backend and will be unavailable for future debugging.