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.
build:
stage: build
image: docker@sha256:the_sha
services:
- docker:dind@sha256:the_sha
Fields "cars" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.{
cars(filter: "name = Cars") {
edges {
node {
name
speed
}
}
}
cars {
edges{
node{
name
}
}
}
}{
slowCars: cars(filter: "Cars") {
edges {
node {
name
}
}
}
fastCars: cars {
edges{
node{
name
}
}
}
}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.Fields "cars" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.{
cars(filter: "name = Cars") {
edges {
node {
name
speed
}
}
}
cars {
edges{
node{
name
}
}
}
}
Pick Omit Partial NonNullable React.ComponentProps React.MouseEventHandler and special one React.PropsWithChildrenPropsWithChildren enables components to take both props and child elements as input.const Track = ({ children }:PropsWithChildren) => {
return (
<div className="flex justify-center no-wrap -ml-30 space-x-60 for-debugging-track">
{children}
</div>
);
};classnames, further conditions can be added depending on whether the initial condition is true or false.{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>
);
})}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 falsecol-span-4 is added when the index is even, whereas the class col-span-3 is added when the index is odd.sx prop to add css to individual components without using styled or tailwind classes.npm install @mui/material @emotion/react @emotion/styledimport { Box, IconButton, Paper, Typography } from "@mui/material";sx prop. The sx prop allows us to use a superset of css classes making it very intuitive to use.<Paper
sx={{
width: "90%",
display: "flex",
justifyContent: "space-between",
pl: 1,
mb: 1.5,
boxShadow: "2px 2px 5px rgb(0 0 0 / 10%)",
}}
>
React.ChildrenReact.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.React.Children.count(children)children, equal to the number of times that a callback passed to map or forEach would be invokedReact.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])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.CLS:-
Index name 'index_external_reservation_airport_transfers_on_external_reservation_id' on table 'external_reservation_airport_transfers' is too long; the limit is 63 characterst.references :external_reservation, null: false, foreign_key: true, index: {:name => 'idx_external_reservation_airport_transfers_external_reservation'}PageQuery, however we cannot directly access the data. We will need to first destructure it first and then it can be passed as props.const IndexPage = (data) => {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 will inherit all the styles passed in Content componenttimestamp & timestamptz as types. and this works differently.Showing page 25 of 42
AI is everywhere but it's unclear which investments will actually move your metrics and which are expensive experiments.
Most AI projects fail at the data layer. Pipelines, quality, access all need work before LLMs can deliver value.
Your engineers are shipping product. They don't have capacity to also become AI specialists with production-grade experience.
Aging, undocumented codebases make AI integration slow, risky, and expensive. They need to move first.