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
Ashwani Kumar Jha
Senior System Analyst
JSON serialization in API responses omits fields with undefined value to follow the JSON specification. According to the JSON standard, properties with undefined values are not allowed in JSON objects, these are the allowed JSON values: object, array, number, string, true, false, or null.

We need to be mindful while handling the missing data. On the backend, use null or defaults for missing data. On the frontend, ensure data is present before accessing it.
Published
Author
user-image
Ashwani Kumar Jha
Senior System Analyst
Image Sprites

• Technique to reduce server requests for loading multiple images.
• Combine several small images into a single, larger image called a sprite sheet.
• Instead of loading multiple individual images separately, we can load a single sprite sheet.
• We can refer to individual images within the sprite sheet using CSS background positioning.

Code

// let's say we want to show logos of our client

.logo {
  background-image: url('client-logos-sprite.png');
  background-repeat: no-repeat;
}

.client1 {
  background-position: 0 0;
}

.client2 {
  background-position: -100px 0;
}


Published
Author
user-image
Rishav Raj
System Analyst
How to fetch and test those API endpoints which is accessible after login into the applications.

1. Launch the browser navigate to the login page using playwright
2. Enter the login credentials and submit the form to login.
3. After successful login, use playwright API to access the API endpoints.
4. Make API requests and assert the response to validate the functionality
Example of fetching API after login :


JavaScript

// implementation of login test

const apiEndpointURL = "https://example.com/api/endpoint";
const apiResponse = await page.evaluate(async (url) => {
      const response = await fetch(url);
      return await response.json()
}, apiEndpointURL)

console.log(apiResponse)


Thanks
Published
Author
user-image
Sujay
Monkey patching in Ruby is dynamic modification of class. It means overwriting existing methods at runtime
eg:

Ruby

class String
  def reverse
    'Reverse op blocked'
  end
end

'Hello'.reverse
>> 'Reverse op blocked'

Published
Author
user-image
Rishav Raj
System Analyst
how to automate the OTP for cypress test

There is a package called gmail-tester which help use to retrieve mail from the gmail, its have lots of option like from, to, subject, mail_body etc

Package link :https://github.com/levz0r/gmail-tester

If you get the able to get the mail then you are good to go to extract OTP from the mail body after extracting otp from the mail you will able to automate the gmail OTP.

Thanks
Published
Author
user-image
Syed Sibtain
System Analyst
Error Monitoring in Bugsnag works similar to Sentry and the commonly used method is bugsnag.notify() . It also takes an error object and captures it as an event. And we can set it up for different environments by using ENV (similar to sentry) or manually configure it as well.
FYI: Sentry has a broader approval by developers.

EG:

JavaScript

try {
  // Some code here
} catch (error) {
 bugsnag.notify(
      new Error(`Error ${error} while sending Standup popup`)
    );
}


Published
Author
user-image
Syed Sibtain
System Analyst
In Sentry we have two methods available, captureException() and captureMessage().
1. captureException() method is used to explicitly report errors and exceptions. We can pass an Error object to captureException() to capture it as an event in Sentry.
2. captureMessage() method is used to capture a simple message for debugging purposes. Typically, messages captured with captureMessage() are not emitted as events. We can additionally add severity level to this. Available levels are "fatal", "error", "warning", "log", "info", and "debug".
Published
Author
user-image
Vaibhav Yadav
Senior System Analyst
Local storage does not work right off the bat when we render a web page within an App. App Dev will have to ensure that DOM storage is enable for it to work.
Published
Author
user-image
Syed Sibtain
System Analyst
Mocking useSWR directly in test cases is a little complicated and even not recommended at some places.
So the ideal way to do it is using a library Mock Service Worker. Here are the steps that helped me solve this.
1. Create a mock server using setupServer from msw/node:

JavaScript

const server = setupServer(
  rest.get(`/api/channels/C04UPJ9243E/members`, (req, res, ctx) => {
    return res(
      ctx.json({
        members: [{ name: "Sibtain", image: "abcd.jsp", id: 123 }],
      })
    );
  })
);


2. Start the server and after we run the test, close the server.

Code

beforeAll(() => server.listen());
afterAll(() => server.close());


3. To ensure clean and isolated tests, reset the request handlers.

Code

afterEach(() => server.resetHandlers());


Now our API connections are taken care of and we can render components and run the test cases.

Code

test('render stuff, () => {
}


Resources: https://mswjs.io/
Published
Author
user-image
Ashwani Kumar Jha
Senior System Analyst
While writing Cypress test we generally create a cypress.env.json file to store the environment variables.


Code

{
  "BASE_URL": "https://company.dev.com/",
  "USER_EMAIL": "ashwani@example.com",
  "USER_PASSWORD": "Test@12345",
}


To retrieve the value of our environment variable, we use the Cypress.env method in the test file.


Code

const baseUrl = Cypress.env('BASE_URL');


That's all we need to do locally to use the env vars in our Cypress test.

Now for CI, we can save these environment variables as Github action secrets.

To make these environment variables accessible from Github action secrets to our test, we need to keep a few things in mind.

• Add a value of empty string to the env vars and expose the cypress.env.json file.

Code

{
       "BASE_URL": "",
       "USER_EMAIL": "",
       "USER_PASSWORD": "",
  }


• We need to add CYPRESS_ prefix to the env vars in the yml file.

Code

env:
       CYPRESS_BASE_URL: ${{ secrets.BASE_URL }}
       CYPRESS_USER_EMAIL: ${{ secrets.USER_EMAIL }}
       CYPRESS_USER_PASSWORD: ${{ secrets.USER_PASSWORD }}


Happy testing!

Showing page 44 of 83

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 →