Skip to content

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.

  1. Syed
    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.
  2. Ayush
    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
  3. Ayush
    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
  4. Codemancers
    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.
  5. Vaibhav YadavSenior System Analyst
    We can use git shortlog instead of git log to group commits by author using --group=author option.
  6. Codemancers
    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

  7. Codemancers
    To get help on gitlab CI the forum link is forum.gitlab.com
  10. Syed
    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.
  11. Syed
    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
      }
    }
  }
}


  13. Syed
    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


    TypeScript

    const Track = ({ children }:PropsWithChildren) => {
  return (
    <div className="flex justify-center no-wrap -ml-30 space-x-60 for-debugging-track">
      {children}
    </div>
  );
};


    Additional Resources: https://www.chakshunyu.com/blog/7-typescript-utility-types-for-react-developers/
  14. Syed
    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 (
         <div
            key={index}
               className={cx(
                  "flex lg:ml-0 justify-start align-middle items-center",
                     {
                       "col-span-4": index % 2,   :point_left:
                       "col-span-3": !(index % 2),
                      }
                    )}>
                    {icon.icon}
                    <span className="items-center pl-5 text-12-22 text-gray-text tracking-2">
                      {icon.name}
                    </span>
                  </div>
                );
              })}


    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.
  15. Codemancers
    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.

    Code

    <Paper
      sx={{
        width: "90%",
        display: "flex",
        justifyContent: "space-between",
        pl: 1,
        mb: 1.5,
        boxShadow: "2px 2px 5px rgb(0 0 0 / 10%)",
      }}
    >


  16. Ayush
    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
  17. Codemancers
    Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components and adding styles using the sx prop.
  18. Syed
    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.
  19. Ayush
    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/
  20. Codemancers
    In order to take a database dump or restore it on fly.io, use flyctl proxy 5499:5432 -a <app-name>. Then one can do psql postgres://<username>:<password>@localhost:5499/<dbname> to connect to the remote db

Showing page 25 of 42

Your competitors are already using AI. The question is how fast you want to unlock the value.

  • Don't know where to start?

    AI is everywhere but it's unclear which investments will actually move your metrics and which are expensive experiments.

  • Your data isn't ready

    Most AI projects fail at the data layer. Pipelines, quality, access all need work before LLMs can deliver value.

  • Internal teams are stretched

    Your engineers are shipping product. They don't have capacity to also become AI specialists with production-grade experience.

  • Legacy systems block everything

    Aging, undocumented codebases make AI integration slow, risky, and expensive. They need to move first.

Don't worry. We've got you covered.

Start with the audit.

Book a free discovery call