TILs - Fueling Curiosity, One Insight at a Time

At Codemancers, we believe every day is an opportunity to grow. This section is where our team shares bite-sized discoveries, technical breakthroughs and fascinating nuggets of wisdom we've stumbled upon in our work.

Published
Author
user-image
Mainak
test revalidate NEXT
Published
Author
user-image
Syed Sibtain
System Analyst
We have 7 different TypeScript utility types, like Pick Omit Partial NonNullable React.ComponentProps React.MouseEventHandler and special one React.PropsWithChildren

React's utility type PropsWithChildren enables components to take both props and child elements as input.

It is used in the definition of the component to identify the types of properties it can receive, including the children prop, which contains any elements contained within the component's JSX. In addition to children, it allows for the use of various props.

UseCase Example


Code

const Track = ({ children }:PropsWithChildren) => {
  return (
    
      {children}
    
  );
};


Additional Resources: https://www.chakshunyu.com/blog/7-typescript-utility-types-for-react-developers/
Published
Author
user-image
Syed Sibtain
System Analyst
When using dynamic classnames, further conditions can be added depending on whether the initial condition is true or false.

Example:

Code

{icons &&
   icons.map((icon: any, index: number) => {
      return (
         
                    {icon.icon}
                    
                      {icon.name}
                    
                  
                );
              })}


If the expression index % 2 (modulus) evaluates to true, the class name col-span-4 will be added. The second className which is col-span-3 and it is added if the expression !(index % 2) evaluates to true. However the ! mark changes the Boolean to false

So class col-span-4 is added when the index is even, whereas the class col-span-3 is added when the index is odd.
Published
Author
user-image
Vinaysripath
Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components. Using the sx prop to add css to individual components without using styled or tailwind classes.
install MUI:

Code

npm install @mui/material @emotion/react @emotion/styled


import the suitable components:

Code

import { Box, IconButton, Paper, Typography } from "@mui/material";


simply use them like normal tags and add inline styles using the sx prop. The sx prop allows us to use a superset of css classes making it very intuitive to use.



Published
Author
user-image
Ayush Srivastava
System Analyst
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 :-


Code

React.Children.count(children)


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
Published
Author
user-image
Vinaysripath
Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components and adding styles using the sx prop.
Published
Author
user-image
Syed Sibtain
System Analyst
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.
Published
Author
user-image
Ayush Srivastava
System Analyst
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/
Published
Author
user-image
Iffyuva
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
Published
Author
user-image
Sujay
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

Code

Index name 'index_external_reservation_airport_transfers_on_external_reservation_id' on table 'external_reservation_airport_transfers' is too long; the limit is 63 characters


Fix is to explicitly specify the index name

Code

t.references :external_reservation, null: false, foreign_key: true, index: {:name => 'idx_external_reservation_airport_transfers_external_reservation'}

Showing 49 to 51 of 82 results

Ready to Build Something Amazing?

Codemancers can bring your vision to life and help you achieve your goals

Let's Talk