TILs - Fueling Curiosity, One Insight at a Time

React.Children

We can use the React.Children APIs to modify elements created by React before they’re rendered. It provides utilities for dealing with the this.props.children opaque data structure.

For example :-




Returns the total number of components in children, equal to the number of times that a callback passed to map or forEach would be invoked

Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components and adding styles using the sx prop.

I discovered that manipulating the elements is possible with React.cloneElement() function. This can be used when a parent component wants to add or change the props of its children.

React.cloneElement(element, [props], [...children])

The function mentioned above makes a clone of the first parameter which is element and returns an element with the desired changes. We can further pass props to it as well.

CLS i.e Cumulative Layout Shift a metric used to quantify the stability of the content on a website when it loads. Normally a layout Shift occurs whenever any element on the web page changes it position unexpectedly.

Major Reason that constitutes to CLS are :-
1. Images without dimensions
2. Dynamically Injected Content
3. Web Fonts (Fall back font getting replaced with the new font)
Steps to prevent CLS:-
1. Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes
2. Never insert content above existing content, except in response to a user interaction.
Resource I used to learn about this:-
• https://web.dev/cls/

In order to take a database dump or restore it on fly.io, use flyctl proxy 5499:5432 -a . Then one can do psql postgres://:@localhost:5499/ to connect to the remote db

Postgres index names are limited to maximum length of 63 characters.
If index name is longer than 63 characters while running rails migration it throws error



Fix is to explicitly specify the index name

If we want to query data for specific pages we can use PageQuery, however we cannot directly access the data. We will need to first destructure it first and then it can be passed as props.

Styled components : const Content = styled.div margin: 30px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 2rem; ;
lorem ipsum

lorem ipsum will inherit all the styles passed in Content component

cc: @iffyuva

is this getting recorded now. Take 5

found in very hardway that typeorm has timestamp & timestamptz as types. and this works differently.