Contact us

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
Keshav Chakravarthy
we can pin specific docker image to use by tagging the commit SHA

Code

build:
  stage: build
  image: docker@sha256:the_sha
  services:
    - docker:dind@sha256:the_sha

Published
Author
user-image
Keshav Chakravarthy
To get help on gitlab CI the forum link is forum.gitlab.com
Published
Author
user-image
Syed Sibtain
System Analyst
Aliases in Graphql.
Let’s say we have a query that return us the cars Data. If we add both the queries, we will get an error.
Fields "cars" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.
UseCase Example:
👇This will throw error

Code

{  
  cars(filter: "name = Cars") {
    edges {
      node {
        name
        speed        
      }
    }
  }
  cars {
    edges{
      node{
        name
      }
    }
  }
}


👇This will work

Code

{  
  slowCars: cars(filter: "Cars") {
    edges {
      node {
        name        
      }
    }
  }
  fastCars: cars {
    edges{
      node{
        name
      }
    }
  }
}


It works because we are using aliases here. Aliases let us change the names of the data that is displayed in a query’s results. It is incredibly helpful when we need to fetch the same data using different filters.

Extra Resources: https://blog.logrocket.com/using-aliases-graphql/#:~:text=What%20are%20GraphQL%20aliases%3F,it%20according%20to%20your%20specifications.
Published
Author
user-image
Syed Sibtain
System Analyst
Aliases in Graphql.
Let’s say we have a query that return us the cars Data. If we add both the queries, we will get an error.
Fields "cars" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.
UseCase Example:
👇This will throw error

Code

{  
  cars(filter: "name = Cars") {
    edges {
      node {
        name
        speed        
      }
    }
  }
  cars {
    edges{
      node{
        name
      }
    }
  }
}


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.



Showing 48 to 50 of 82 results

Ready to Build Something Amazing?

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

Let's Talk