We aim to find the maximum sum of a subarray whose length is divisible by k. Instead of examining all possible subarrays, which would be inefficient, we employ a snake-like sliding trick. This involves moving forward one step at a time, keeping track of the “weak front” numbers that might limit our sum, and extending the subarray only if the new number increases the total. Imagine it like a snake: the head moves forward, the tail (weak numbers) is dropped when necessary, and the sum grows as we progress.

Approach

1. Maintain a minPrefix array of size k to store the smallest running sums for each remainder modulo k.

   • Initialize with [0, ∞, ∞, …] (length k). The initial 0 represents an empty subarray with sum 0, while ∞ indicates that no valid subarray exists yet for other remainders.

2. Iterate through nums:

   • Update the running total.

   • Evaluate the current sum by subtracting the smallest prefix for the same remainder (total - minPrefix[length % k]). If this exceeds maxSum, update maxSum.

   • Update minPrefix for length % k with the smaller of itself or the running total, preserving the “weak front” numbers as candidates for future subarrays.

3. This method naturally handles subarrays of lengths k, 2k, 3k… without additional loops.

Example: nums = [-5,1,2,-3,4], k = 2

• Start: minPrefix = [0, ∞]

• Index 0 (-5) → only 1 item → invalid → shift → minPrefix = [0, -5]

• Index 1 (1) → running sum = -4 → better than -5 → update → minPrefix = [-4, -5]

  • We retain only the weakest numbers at the front; update index 0 from 0 → -4.

• Index 2 (2) → use minPrefix[1] = -5 → sum = 3 → maxSum updated

• Index 4 (4) → use minPrefix[0] = -4 → sum = 4 → maxSum updated

If the array is extended later (e.g., 10 at the end), we replace one of the weak numbers in minPrefix based on index % k and continue. The snake keeps moving forward, only discarding weak numbers that hinder the sum.

I watched NeetCode's approach on YouTube but wanted to explain it in my own terms here. You should definitely watch his video too! Watch NeetCode's Video

Complexity

• Time complexity: O(n) — we traverse the array once.

• Space complexity: O(k) — minPrefix array of size k.

Code

var maxSubarraySum = function(nums, k) {
    var minPrefix = new Array(k).fill(Infinity);
    minPrefix[0] = 0;

    var total = 0;      // running sum
    var maxSum = -Infinity;

    for (let i = 0; i < nums.length; i++) {
        total += nums[i];
        let length = i + 1;
        let mod = length % k;

        // check if current subarray ending here gives a bigger sum
        let addSum = total - minPrefix[mod];
        if (addSum > maxSum) {
            maxSum = addSum;
        }

        // update the “weak front” for this modulo
        minPrefix[mod] = Math.min(minPrefix[mod], total);
    }

    return maxSum;
};

With prisma ( an ORM tool for JS/TS ), you would make the request like so:

const results = await prisma.items.findMany({
  skip: 3,
  take: 3,
})

BUT… what if we want to get data from two completely different tables? And they only have a date in common, and you want them to be sorted? Can we just pick 10 from one and 10 from the other? NO!

Lets think in dates: Imagine getting 3 entries from July only ( first table ) and then 3 entries from July and September mixed! ( second table ). Then we load the next page and get more from July on the first dataset, but already September data on the second dataset. This will result in a date mismatch, with nothing truly sorted. 😭

And dont start with “we can sort in the frontend afterwards”. Imagine having a lot of data and then sorting the whole thing after each fetch… not ideal, right?

So, should we just paginate by passing a date frame instead of a page? Then we might fetch from August to September initially, but what if there's no data in that time frame? To trigger a fetch with infinite scroll, we need to get to the end of the list / screen. And just calling the endpoint until you finally get the desired data does not sound very elegant. Then we might get jagged loading indicators. Meh. 😭

So, what solution would consider all edge cases and work in all scenarios?

Cursor-based pagination! ✨

I hit this exact wall. And i want to help you so you don’t need to undergo the same hell! In this post, I’ll break down offset vs. cursor pagination. When each works, when it breaks, and how cursors quietly fixed my Timeline. Bonus: NestJS + Prisma code you can paste in. Let’s dig in!

1. Introduction: Why this topic matters

This might sound basic to some, but for me it was a total “ohhh, so that’s how it should work” moment. Figured I’d share, so you can skip the headaches I went through. ✍️

You might be thinking: “Why would we even merge two tables with different schemas and creation dates into one endpoint? Who does that?” Well… sometimes you can’t just cram everything into one neat schema. Sure, an audit log with title, message, and date sounds clean. But when the customer wants extra info on certain entries, and you don’t want to dump JSON blobs into a message field, you need a different plan.

JSON columns? Yeah, nah. They’re messy, fragile, and a pain to migrate when schemas change. Keeping separate tables for detailed data and merging them only when needed is usually cleaner.

You might think “But you could just make two different endpoints, and then merge it in the frontend” Well that kills lazy loading and proper pagination.

See, i thought the exact way, but trust me, cursor-based pagination is not that tricky, and soooo easy to implement. Let me show you how!

2. What is Offset Pagination?

With offset pagination, you can define the page you want to load, and how many items that page should contain. In Prisma you would use skip and take, like shown below.

Example with NestJS + Prisma:

async getItems(page: number, limit: number) {
  const skip = (page - 1) * limit;
  return this.prisma.item.findMany({
    skip,
    take: limit,
    orderBy: { createdAt: 'desc' },
  });
}

Pros:

• Easy to understand and implement

• Fine for small, static datasets

• You can jump to any page immediately.

• You can paginate in any sort order. For example sorting by first name etc.

Cons:

• Performance drops with high skip values

• Offset pagination does not scale at database level.If you skip 300,000 records, the database STILL needs to traverse the first 300,000 records before returning your desired 10 items. This is bad for performance

Use Case:

• Shallow pagination of a small result set. For example blog posts.

3. What is Cursor-Based Pagination?

Cursor-based pagination uses cursor and take to return a limited set of results before or after a given cursor. The cursor can be a ID or a timestamp.

const myCursor = lastId; // Example: 52 
const secondQueryResults = await prisma.post.findMany({
  take: 4,
  skip: 1,
  cursor: {
    id: myCursor,
  },
})

// Example: 1, 3, 4, 52, 10, 7, 100, 89, 62
// With cursor based pagination we would return: 10, 7, 100, 89
// ( since we skipped 52 itself )

• Instead of OFFSET, use a unique field like createdAt or id

• Remembers the "last seen item" (cursor) and continues from there

Pros:

• Infinite scroll with merged datasets

• It scales and is better for performance

Cons:

• Sorting is only possible by cursor, which has to be unique.

• You cannot jump to a specific page, you will need to get all data in order.

Use Case:

• Infinite Scroll!

• Paging through an result set in batches.

4. Time-Range Pagination

I thought: “Why not just paginate by day or week?” But what if there’s no data in that range? Right: empty page. Terrible UX. Cursor-based pagination skips empty ranges and shows the next real items instead. Super neat, right?

So don’t do time-ranged pagination, its super weird to test and creates bugs.

5. Real-World Example: Merged timeline from multiple tables

Let’s think about one example: Audit logs for social media. You want to see chronologically when a post got created and when comments got in. They are not grouped. You just see a list of: ok there was a post, then 10 comments on that post, then another post, 2 comments on the older post again, 4 on the new one and so on. So → we have two tables. Both tables contain a creationDate.

We want to merge posts and comments in one feed, sorted chronologically. Problem:

• OFFSET grabs 10 posts + 10 comments → what if the first 10 comments we load where created after the first 30 posts? Weird example, BUT it can happen. Then we have a chronological problem. Just like the simple example i showed at the start of this blog!

Cursor solves this:

• Fetch e.g. 10 items per table before a timestamp cursor ( first one is now )

• Merge → sort by date → trim to 10 → save new cursor → repeat

This is a neat example: ( fetching 3 items, and trimming at 3 )

6. Code: Cursor Pagination with Prisma & NestJS

This is how the logic could look like for our problem with merging two databases.

Its a special case, but it works!

async getTimeline(cursor?: string, limit = 10) {
  const where = cursor ? { createdAt: { lt: new Date(cursor) } } : {};

  const [posts, comments] = await Promise.all([
    this.prisma.post.findMany({ where, take: limit, orderBy: { createdAt: 'desc' } }),
    this.prisma.comment.findMany({ where, take: limit, orderBy: { createdAt: 'desc' } }),
  ]);

  const merged = [...posts.map(p => ({ ...p, type: 'post' })), ...comments.map(c => ({ ...c, type: 'comment' }))];
  const sorted = merged.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
  const items = sorted.slice(0, limit);
  const nextCursor = items.at(-1)?.createdAt.toISOString() ?? null;

  return { items, nextCursor };
}

7. Conclusion

Offset isn’t “wrong” — but often not the right tool. If your use case is more complex than “show me the next 10 items,” cursor-based pagination is worth considering. It’s more robust, more performant, and… a real UX lifesaver. Also, usual infinite scroll with no sorting logic will love this pagination method!

And hey — now you know that pagination is more than just LIMIT and OFFSET. 😉

Write your thoughts in the comments below!

Have a nice day!

Ever felt like your passion for coding slowly turned into a daily battle? Picture this: drowning in multiple projects, losing the joy you once found in your work. I've been there. Join me on a journey where the weight of responsibility almost crushed my enthusiasm, but a colleague's advice sparked a change. Let me share how I rediscovered balance and mental peace in a coding chaos.

Slowly burning down

As developers, we often find ourselves entangled in the web of multitasking, juggling various projects simultaneously. The weight of responsibilities can gradually burgeon, transforming our passion for coding into a burden. I recently traversed this challenging terrain, feeling the weight of increasing pressure overshadow the joy I once found in my work.

Balancing multiple projects soon became an overwhelming endeavor, and the mounting responsibility took a toll on my mental well-being. The internal disruption became a daily struggle, gradually chipping away at my enthusiasm. The tipping point arrived when I found myself returning home devoid of joy, emotions bottled up until they couldn't be contained any longer.

Revelation and Turning Point

Acknowledging the damaging impact on my mental health became a pivotal moment. Feeling weighed down by my struggles, I reached out to a colleague who'd been through similar situations. Their experience offered me priceless advice and support.

“Don't let the projects consume you!” my colleague advised.

“While it's commendable to invest yourself in your work, maintaining a healthy emotional distance is vital. Your heart can be in the project, but remember, it's still work. When you return home, create that space for yourself, allowing room to rest and recharge.”

8 Essential Advices

1. Setting Realistic Goals: Embrace the essence of setting achievable goals. Instead of aiming for the impossible, break down tasks into smaller, manageable components. Realistic targets not only boost productivity but also alleviate the mental strain. Celebrate small victories along the way.

2. Take Breaks and Disconnect: In a world connected by technology, it's easy to be consistently plugged into work. Don't forget the importance of breaks. Step away from the screen, go for a walk, exercise, or engage in hobbies. These pauses rejuvenate the mind and allow fresh perspectives.

3. Establish Boundaries: Define work hours and respect them. Setting boundaries ensures a healthy work-life balance. Let colleagues and clients know your availability, fostering a culture of respect for personal time. Leaving early doesn't make you a jerk; it's about self-care, and that means better project outcomes for the company in the long run!

   Self-imposed expectations often lead us down a path of self-destruction. The belief that we must conquer every task at the cost of our mental well-being is flawed. When something isn’t feasible, you should communicate it promptly. Working through the night may seem like a solution, but it typically worsens the problem.

4. Continuous Learning and Growth: Keep learning, not just in your coding niche, but also about stress management and mental health. Explore mindfulness, meditation, or other practices that help in maintaining emotional equilibrium.

5. Seek Support Networks: Build a support network within the development community or beyond. Engage with like-minded individuals, share experiences, and learn from others' coping strategies. Don't hesitate to seek professional help if the stress becomes overwhelming.

   I used to believe that everyone operated as flawless machines, effortlessly managing immense pressure while radiating happiness. It's only recently that I've come to understand how many conceal their pain and struggles to present a polished facade. However, it's vital to embrace our humanity and imperfections rather than striving for an unattainable perfection. This is a lesson I learned while having deep conversations with my colleagues.

6. Reflect and Adapt: Regularly reflect on your work habits and stress triggers. Adapt and evolve strategies to manage stress effectively. Not all solutions work for everyone, so be open to trying different methods until you find what suits you best.

7. Cultivate Positivity: Fostering a positive outlook can significantly impact mental well-being. Embrace gratitude, celebrate achievements, and acknowledge progress made, no matter how small.

8. Normalize Open Conversations: Cultivate a work culture that normalizes discussions on mental health. Encourage open conversations and support amongst team members. Collective support goes a long way in alleviating stress and fostering a healthy work environment.

Remember, prioritizing mental health is a journey, not a destination. By incorporating these practices into your routine, you can steadily enhance your well-being and find a healthier balance between work and life.

The key to reducing pressure is communication.

One crucial lesson resonated profoundly: communication is crucial. Hiding our struggles may seem a sign of strength, but reaching out is where true strength lies. My colleague emphasized the importance of voicing our struggles, be it to a Project Manager or someone in a position of authority. They, too, are human and may not be able to tell what's going on inside us unless we say it.

“Say no when needed” my colleague emphasized. “Don't succumb to the pressure of saying yes to everything. It's okay to communicate delays or when a workload becomes unmanageable. There's no need to bear the weight alone.”

Conclusion: Striking a Balance

The journey toward balance and mental well-being is ongoing. As developers, we are driven by a passion for our craft. But learning to separate, communicate, and accept personal boundaries is important for our overall health and longevity in the industry.

Let's strive for a balance that nurtures our passion without compromising our mental health. Remember, taking care of oneself is not a sign of weakness, but a testament to strength and resilience!

Hope you enjoyed reading my blog post!

Feel free to share any additional mental health management tips or strategies in the comments below! Your insights and experiences could greatly help others navigating similar challenges.

Today, I had an extremely challenging day wrestling with a perplexing error message. It threw me off balance and consumed my entire day. Let me walk you through the roller-coaster of emotions and problem-solving that I went through.

The day started with an error message that left me scratching my head:

The error says, that it needs the parserOptions value set in the .eslintrc.json which needs the path to your tsconfig.json file. Ok! Let’s add it…

I diligently added the required line to the .eslintrc.json file, hoping it would resolve the issue. Alas, when I ran ESLint again, to my dismay, I was greeted by the same stubborn error. Frustration crept in.

I had a similar problem like this before and only had to add the lines from above inside the .eslintrc.json files inside the respective packages (folders), and not in the root file itself. But since I already have it that way, it cannot be the problem this time …

Let give Google a shot.

Panic Mode: Trying Everything

After scrolling through the search results, I gained a bit of panic. No one has my issue!? How can this be?!

I tried narrowing down the issue, and it looked like I was not able to resolve typed problems by @typescript-eslint/parser, but why are the other ones working!? I tried following the ESLint installation site. Changing paths. Nothing helped.

The thing was, it was already working on another (but older) project. Are the dependencies the issue? I tried following this hint and used the exact ones as the old project does, but it was still not working.

Panic is rising.

I created a new clean project generated by nx. Another one just like mine. Same thing, doesn’t work.

I created a new, clean standalone project for react.js. This time it worked? I am completely confused. I tried running the linting command in the terminal and this works apparently? I was thinking… if it works in the terminal, then the project itself is correctly configured. I am not seeing the error in VS Code… so it’s the ESLint plug-in?

A Glimpse of Hope: Checking the Extension

I’ve googled about the ESLint plug-in, and found something very interesting. There is a settings file in which I can set the working directories. I was very hopeful and tried that out. There is a new update which allows u to use “auto”. I typed that in and saved.

Nothing happened. My anger grew. I wanted to flip tables. What was going on?!

One LAST brain cell kept holding onto hope and said to me, “try reloading the extension”. I did. And to my upper surprise, it worked!

Conclusion

My emotions were mixed—relieved to have found a solution, yet annoyed that it was a single word and a reload away all along. I felt both elated and exhausted.

As I couldn't find a single solution to this peculiar problem on the internet, I realized I must share my experience and newfound solution to help others save their precious time and sanity.

I'm still uncertain why the extension worked flawlessly before in different projects, but not this time. Perhaps the new project structure played a role, but I'm as perplexed as ever. I will keep a watchful eye on this and update you in a future post if I make any new discoveries. For now, I've learned to approach extensions with a healthy dose of skepticism 🫠

Hope you enjoyed reading my blog post!

Are you a React Developer looking to ace your next interview? Then you need to know about the problem with using index as a key in a React.js map function. In this blog post, I'll explain why using unique keys is important, how it can improve performance, and how it can make you a better developer. Don't miss out on this crucial topic!

The Problem with Using Index as the Key

When you use the map() function in React to render a list of items, it's essential to assign a unique key to each element. The key is used by React to identify which elements have changed, which can help improve the performance of your application.

However, a common mistake is to use the index of the element as the key. While this may seem like a reasonable solution, it can cause issues when the order of the list is changed. When the order of the list changes, React may not be able to correctly identify which elements have changed, resulting in unnecessary DOM updates and potentially slowing down your application.

An Example of the Problem

Let's say we have a list of items that we want to render in our React application. We fetch the data from an API and display it using the map() function:

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function MyList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
  );
}

At this point, everything works as expected, and the list renders correctly:

• Item 1

• Item 2

• Item 3

However, let's say we decide to reorder the list by swapping the positions of Item 2 and Item 3:

const items = [
  { id: 1, name: 'Item 1' },
  { id: 3, name: 'Item 3' },
  { id: 2, name: 'Item 2' },
];

If we rerender the list using the same map() function, React will not be able to correctly identify which elements have changed, since we're still using the index as the key. As a result, React will needlessly update all of the list items, even though only the positions of Item 2 and Item 3 have changed. This can lead to performance issues in larger applications with many elements.

The Solution

Using a Unique Identifier as the Key To solve this problem, we can use a unique identifier as the key instead of the index. In our previous example, we could use the id property of each item as the key:

function MyList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

By using the id property as the key, React can more efficiently identify which elements have changed and which ones can be reused from the previous render. This can help improve the performance of your application, especially in larger lists.

Conclusion

In this blog post, we've discussed the importance of using a unique identifier as the key in React's map() function. In summary, using the index of an array as the key prop in React's map() function can cause issues when the list items can be added, removed, or reordered. To avoid these problems, you should always use a unique identifier as the key prop instead. This will help React more efficiently identify the elements in the list that need to be updated, resulting in better performance and fewer potential bugs.

Thank you for reading! I hope you found this blog post helpful. If you have any questions or comments, please feel free to share them in the comments section below.

Welcome to my new developer blog! My name is Anja and I want to introduce myself! As a creative full-stack developer for almost 6 years, I have always been interested in finding new and innovative ways to solve problems and build software. In this blog, I plan to share my experiences, insights, and tips for other developers who are looking to tap into their creativity and become more well-rounded professionals.

Over the years, I have had the opportunity to work with a wide range of technologies, including languages such as C#, Python, and JavaScript, as well as frameworks like React, React Native, Angular, Express.js, and Node.js. Each of these technologies has its own unique strengths and capabilities, and I have enjoyed the challenge of learning and mastering them.

Background

As a full-stack developer, I have the unique opportunity to work on both the front-end and back-end of web and software applications. This requires a diverse set of skills, including proficiency in programming languages as well as a strong understanding of database design and server-side technologies.

However, being a full-stack developer is about more than just technical expertise. It also requires creativity, adaptability, and the ability to think outside the box. In my experience, incorporating a creative mindset into my work as a developer has helped me to come up with unique solutions to challenging problems and to continuously learn and grow as a professional.

In addition to my full-time job, I also work on my own software company side hustle. As a developer, I always want to learn new things and be on the cutting edge of technology. Since I also like to draw in my free time besides developing, I am a very creative person who has a sense for good and appealing application designs.

Main points

In this blog, I plan to cover a variety of topics related to being a creative full-stack developer. This will include:

• Tips for staying up to date with the latest technologies and best practices

• Strategies for incorporating creativity into your work as a developer

• Become a productive developer using effective time management techniques

• Personal case studies of projects where I have used my creativity to solve problems or build something new

• Advice for other developers looking to improve their skills and become more well-rounded professionals

Conclusion

I hope you will join me on this journey as I share my experiences and insights as a creative full-stack developer. Whether you are just starting in your career or are an experienced professional looking to expand your skills, I believe there is always something new to learn and ways to grow as a developer.

Questions for discussion

As I will continue to publish content on this blog, I want to make sure that I am covering topics that are of interest to you! With that in mind, I would love to hear from you about the topics you would like to see me write about. Please share your ideas and suggestions in the comments below!