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: May 4, 2023
Author: Ayush

A modal is a popup that when appears on the screen we cannot interact with any other element on the webpage apart from the modal.
On other hand a dialog is a popup that when appears on the screen we can still interact with other element on the webpage

JavaScript

<dialog>
<!-- Dialog Content -->
</dialog>

By default a dialog element will be hidden unless you add the open attribute to your dialog

JavaScript

<dialog open>
  <span>You can see me</span>
</dialog>

It is not advised to use the open attribute directly, though, as that only allows you to open a non-modal dialog. Instead, you should use the show() and showModal() JavaScript methods.

JavaScript

const dialog = document.querySelector("dialog")
dialog.show() // Opens a non-modal dialog
dialog.showModal() // Opens a modal

To close a dialog element you just need to use the close() method.
Alternatively, if your dialog element is a modal you can use the Esc key to close it.

JavaScript

const dialog = document.querySelector("dialog")
dialog.close() // Closes the dialog

Published: May 4, 2023
Author: Rishav

today i learned
1. All the basics of typescript and i also implement for fetching the api
2. i learned tailwind css and also implement styles in the component using tailwind css.
so basically today i learn how typescript work, how to implement typescript, how it is useful in development and how to use and implement tailwind css.

Published: May 4, 2023
Author: Syed

When we have conflicts between main and production, we cannot open PR directly. We do the following:
1. git fetch and then go to production -> git checkout production
2. Create a new branch from production -> git checkout -b <branchname>
3. Pull latest changes from main -> git pull origin main or git merge main
4. Resolve conflicts
5. Push the changes and create a pull request with base branch as production
6. And chill 🙂

Published: May 3, 2023
Author: Rishav

Today I learned

1 Fetch data from Api.
2 How to use axios for Fetching Api.
3 How to use storybook.
4 Learned jest for writing test cases.

Published: May 3, 2023
Author: Ayush

Code

git reset --hard origin/master
says: throw away all my staged and unstaged changes, forget everything on my current local branch and make it exactly the same as origin/master.

You probably wanted to ask this before you ran the command. The destructive nature is hinted at by using the same words as in "hard reset".

Published: Apr 27, 2023
Author: Syed

So if we want to mock the useRouter hook in NextJs, we can use vi for it.
The "vi" library's function vi.mock allows us to simulate the behaviour of the useRouter hook. The mock function returns an object that mimics the Router object's properties and methods.

Code

vi.mock("next/router", () => ({
    useRouter: () => ({
      replace: vi.fn(),
    }),
  }));

replace: a mock function that simulates the behavior of the replace method of the Router object.
If we do not use it, the test might fail and we get the following error.
Error: NextRouter was not mounted.

Published: Apr 26, 2023
Author: Syed

userEvent is considered to be a more reliable and secure way of triggering events in the browser because user events are events that are triggered by a user's interaction with the webpage and reflect the actual user behavior on the page.
However, fireEvent is a means of programmatically activating an event (dispatching DOM events) in the browser, which can be less dependable.

Reference: https://testing-library.com/docs/user-event/intro/#difference-to-fireevent

Published: Apr 26, 2023
Author: Satya

userEvent is more reliable and easy to use rather than fireEvent.
userEvent provides wide range of browser events options and it is like interacting with events same as we interact in browser

Published: Mar 15, 2023
Author: Codemancers

We can easily browse s3 folder locally by using this https://github.com/awslabs/mountpoint-s3 tool

Published: Mar 13, 2023
Author: Vaibhav Yadav
Senior System Analyst

Postgres query uses || as string concatenation instead of +

Published: Mar 4, 2023
Author: Ashwani Kumar Jha
Senior System Analyst

We can type JSON into https://app.quicktype.io/ and it generates TypeScript type.

Can be helpful in defining types for api response (usually while integrating third party apis where large amounts of data is returned).

Published: Mar 2, 2023
Author: Codemancers

you can whitelist IPs and ranges in nginx. When we have separate virtual hosts these are saved in /etc/nginx/sites-enabled. The rules look like allow xx.xx.xx.xx/range(32); and deny all;. Further we can make sure nginx passes some headers to the app using the rules proxy_set_header Host $http_host;.

Published: Feb 27, 2023
Author: Vaibhav Yadav
Senior System Analyst

We can use the following where clause to filter users based on their age using a Postgres query
(CURRENT_DATE - INTERVAL '18 years')::date < TO_DATE(T3.DATE_OF_BIRTH, 'YYYY-MM-DD')

Published: Feb 26, 2023
Author: Ashwani Kumar Jha
Senior System Analyst

As a Next.js app can be executed on both the server and the client side. When the app is rendered on the server, there is no access to the browser-specific features like localStorage, as it is a feature of the client-side browser environment.

So let's say, if we try to use localStorage in a Next.js app, we may encounter issues when the app is being server-side rendered.

To avoid this problem, we can check if localStorage is available before using it in our Next.js app.

Code

if(typeoflocalStorage!== 'undefined') { 
// Use localStorage here
}

This way, our app will only use localStorage when it is available, and avoid errors when it is not.

Published: Feb 18, 2023
Author: Sujay

Bring the suspended server to foreground using fg command. Say the server is running and we want to install a package

Code

1. Ctrl+Z
2. yarn add jsonwebtoken
3. fg

And the server resumes

Published: Feb 13, 2023
Author: 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.

Published: Feb 13, 2023
Author: 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

Published: Feb 10, 2023
Author: 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

Published: Feb 9, 2023
Author: 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.

Published: Feb 8, 2023
Author: Vaibhav Yadav
Senior System Analyst

We can use git shortlog instead of git log to group commits by author using --group=author option.

Showing page 24 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 →

TILs - Fueling Curiosity, One Insight at a Time

JavaScript

JavaScript

JavaScript

JavaScript

Code

Code

Code

Code

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

Don't know where to start?

Your data isn't ready

Internal teams are stretched

Legacy systems block everything

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

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