Working on a credit card eligibility microservice recently taught me a lot about Spring’s bean system. I had to make design choices that ensured thread-safety, clean state management, and efficient memory use — especially when dealing with stateful evaluations per user.

In this post, I’ll walk through:

• What Spring beans are

• Their lifecycle

• Different scopes

• Lazy injection and why it’s a lifesaver

• Real examples from a credit card eligibility context

☕ What is a Spring Bean?

A bean in Spring is simply an object that is managed by the Spring container. When you annotate a class with @Component, @Service, or define it using @Bean, Spring takes care of:

• Instantiating it

• Injecting its dependencies

• Managing its lifecycle

Example:

@Component
public class CreditScoreService {
    public int getScore(String userId) {
        // Dummy logic
        return 720;
    }
}

Spring creates and manages a CreditScoreService bean.

🔄 Bean Lifecycle (Simplified)

1. Instantiation – Spring creates the object.

2. Dependency Injection – Injects all required fields/constructors.

3. PostConstruct – Runs any method annotated with @PostConstruct.

4. Bean is ready to use.

5. PreDestroy – If it's a singleton and being destroyed, @PreDestroy methods are called.

@Component
public class EligibilityLogger {

    @PostConstruct
    public void init() {
        System.out.println("Logger initialized");
    }

    @PreDestroy
    public void destroy() {
        System.out.println("Cleaning up logger");
    }
}

📦 Bean Scopes — Singleton vs Prototype

🔹 Singleton (default)

• Only one instance is created per Spring context.

• Shared across the entire application.

Example:

@Service
public class EligibilityService {
    // Singleton by default
}

✅ Good for stateless services, utilities, or shared components.

🔹 Prototype

• A new instance is created every time the bean is requested.

• Ideal when the bean holds request-specific data or state.

🧪 Example from Credit Card Eligibility

Let’s say we have a service that evaluates whether a user is eligible for a credit card based on credit score and income.

✅ Step 1: Define a stateful bean

@Component
@Scope("prototype")
public class EligibilityEvaluationContext {
    private boolean eligible;
    private String rejectionReason;
    private Map<String, Object> debugInfo = new HashMap<>();

    // Getters & Setters
}

Why prototype? Because this context is specific to each request and shouldn't be shared.

✅ Step 2: Inject it using ObjectFactory (Lazy Injection)

@Service
public class EligibilityService {

    @Autowired
    private CreditScoreService scoreService;

    @Autowired
    private ObjectFactory<EligibilityEvaluationContext> contextFactory;

    public EligibilityEvaluationContext evaluate(String userId) {
        int score = scoreService.getScore(userId);
        EligibilityEvaluationContext context = contextFactory.getObject();

        if (score < 650) {
            context.setEligible(false);
            context.setRejectionReason("Low credit score");
            context.getDebugInfo().put("score", score);
        } else {
            context.setEligible(true);
        }

        return context;
    }
}

👉 ObjectFactory.getObject() ensures we get a fresh EligibilityEvaluationContext every time — this avoids bugs due to shared state and keeps our service thread-safe.

⚠️ Why Not Inject Prototype Directly?

@Autowired
private EligibilityEvaluationContext context;

This would only create one instance — during startup — and reuse it everywhere. Totally defeats the point of @Scope("prototype").

🧊 Bonus: Lazy Initialization with @Lazy

If a bean is expensive to create and might not be used right away, you can delay its creation:

@Autowired
@Lazy
private ExternalScoringClient scoringClient;

Now, scoringClient will only be created when it's first accessed — not during app startup.

🧠 Key Takeaways

• Use Singleton for stateless services and utilities.

• Use Prototype for stateful, request-specific objects.

• Use ObjectFactory or Provider to inject prototype beans into singleton services safely.

• Use @Lazy to defer expensive bean creation until needed.

📌 Conclusion

Understanding how Spring manages beans is crucial for designing clean, safe microservices — especially in user-facing financial applications like credit card approvals.

If you're ever storing per-user evaluation data or debugging context, don’t rely on singletons. Prototype + lazy injection is your friend.

The Problem

The issue seemed simple on the surface: compress uploaded images on the client before sending them to the server. This would help optimize upload speeds and reduce bandwidth usage, especially useful for high-res climbing photos.

The Approach

After some research and community discussion, I chose to use compressorjs — a lightweight library that does exactly what I needed with minimal fuss.

I created a utility function that:

• Took a file input from the user

• Compressed it based on the desired size/quality

• Returned the new compressed file to be used in the upload workflow

The initial code looked like this:

import Compressor from 'compressorjs';

export const compressImage = (file: File): Promise<File> => {
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: 0.6,
      maxWidth: 2000,
      success(result) {
        resolve(result as File);
      },
      error(err) {
        reject(err);
      }
    });
  });
};

Then I integrated this logic into the photo upload flow so that every image would be compressed automatically before upload.

Reviewer Feedback and Revisions

When I raised the PR, the maintainers appreciated the effort, but also had constructive feedback. Here are a few things they asked me to revise:

1. Error Handling Edge Cases

The reviewer reminded that compression must cover an important edge case — like images larger than 30 MB must not be compressed, instead throw an error.

✅ I added specific file size validation logic before initiating compression.

2. Improving File Type Checks

I was initially compressing any file that came through. The reviewer asked me to limit compression to image file types only.

✅ I updated the logic to skip non-image files using simple MIME type checks.

3. Linting & Formatting

My pre-commit hook failed due to some ESLint rules. I also had to align with the project’s usage of ts-standard.

✅ I fixed all lint issues and even contributed to the .lintstagedrc setup discussion.

The Final PR

After addressing the feedback and thoroughly testing the changes, a reviewer suggested optimised code, which not only reduced the number of lines in the code but also made so much sense regarding how clean the code must look. I pushed the updates and waited. A few hours later... 🎉

My pull request was merged!

This small win meant a lot. Not only did I contribute meaningful code, but I also learned:

• How to accept and implement technical feedback

• How to use image compression libraries

• How to work with linting tools and pre-commit hooks

• How to write cleaner and optimised code

Key Takeaways

• I learned how to write clean, optimised, and better code that avoids side effects.

• Open source is a collaborative process — reviewers are there to help us improve.

• Contributing to real-world projects teaches you what tutorials can't.

If you're thinking about contributing to open source — do it. You’ll learn more than you expect, and your confidence as a developer will grow with every line of code you contribute.

Happy coding! 💻✨

This happened in an interview recently, where a project head from Optum took the behavioural round to evaluate my skills. While I answered most of the questions honestly, I also found myself repeating that I am an optimistic person who believes any bug can be fixed. Errors are not as bad as they seem to be, but only give us another opportunity to learn a new thing that day. I was expecting to have some technical questions and was least prepared for this kind of question. It was obvious that anyone would share positive experiences in such an interview, and my mind only kept on track to give honest answers from my experience.

In this post, I will share a few questions that came my way. For every question, I will share how I answered it and how it could be answered differently.

1. How does your day look like, starting from getting your story assigned? I answered that we discuss in the team who picks what and work accordingly. We then have a daily Scrum call for all projects of the POD and a separate call for the project team to discuss progress and blockers. He further asked if we had grooming sessions for the stories.

2. Any challenge that you faced and are proud of solving it?

3. Any examples of having a hard time with lead?

4. Any examples of bad code that you found from juniors?

5. Any examples of suggestions that you made implemented? I answered that we have strict guidelines in the current organization. Instead, I should have mentioned that the CI/CD implementation that I suggested in the previous organization was accepted and approved.

Jan and Feb went by office work e-champs project POC, all by myself. For error handling, I proposed to use the postMessage API of the browser. This required support from a legacy application that we were integrating into the current application using iframe. Unfortunately, my lead was unaware of this work and dismissed it due to various limitations. Eventually leading to the dismissal of the project I guess. Working and managing my home were taking 100% of my time. Any leisure time went into practising dance form for my first-ever performance in a temple. I wanted to dedicate my devotion in the form of dance for my beloved lord Shiva. Honestly, it wasn’t a good experience and I got clarity on many things about myself.

I focused on work and tried to reflect and revise my plans for the year. I realised Terraform or Cloud is not my thing yet. Instead, I started feeling comfortable with Java. I need to keep working using Java to push into my secondary memory. I watched related videos sometimes and mostly focused on work.

We had planned for a month-long stay in Goa this year. I had this fantasy of slow living in Goa, which most people could only dream of. I read a few articles on how people moved to Goa for a year or worked from there for so many reasons like, the affordability it offers, its cuisine, and most importantly living with nature alongside city life. The idea was to make the most of Rihu’s holidays and be close to nature. And a road trip it was. I could write an entire article just describing the road trip experience. We started at the end of April and returned by the last week of May. The Airbnb we booked surprised us with its view and the community space was amazingly peaceful. The Cola beach was just 400mtrs from the place. And besides all this, the Airbnb was inside a gated community with security and a wonderful swimming pool. What more could I have asked? A perfect summer vacation for my child and a lovely experience for us.

I had a perfect plan of how I was going to make it a perfect budget-friendly trip. 1BHK in Airbnb and cooking all the weekdays. We executed as planned. We could manage Rihu with some free games in the daytime, swimming twice a day, and some screen time during our work calls. What a wonderful trip it was. Ah, we made many memories. Met new people, and hung out with some. Explored plenty of restaurants. Amazing trip. However, it wasn’t all roses. We were comfortable and it was going all good for the first two weeks. As I managed to cook as much as possible none of us got sick too. The following weeks got a little dry as we were just three and were missing friends. I tried my best to adapt to slow living. We made sure to visit beaches over weekends. Didn’t miss sunsets. It was for sure a beautiful experience. But if you ask me if I will do it again, I would say not any sooner, maybe after a few years in a different place.

At the beginning of the year, I set a goal to acquire a new skill in either arts or psychology. Rihu had a few more weeks before he returned to school. I did some research and found an online art class that we could join together. It is a great way to develop a strong bond with your child, by learning a hobby together. We had two classes every week. We learned sketching and painting. The best takeaway was perspective. Although Rihu just enjoyed painting classes, he wasn’t much interested in theory or sketching. So we stopped as soon as school reopened to make it less hectic.

I came across a parenting workshop and soon enrolled on it. August and September went to attend these classes. This was much needed for my parenting journey. I became a better person to become a better parent. I must say, it changed me for good and I see my child much happier than ever before. I couldn’t have asked anything more. I started cherishing my child and the time we spent together. The institute certified me as a parent coach. Initially, I was sure that I would be using this knowledge for my benefit. However, I see there is a lot of unawareness in the world. There is this one part of the world struggling to get pregnant and have a child, and there is another part of the world that has kids but is not sure what to do with them and ends up frustrated and unknowingly unintentionally doing a lot of harm for their child and their bond with their child. As I have a full-time job and a family to take care of, I decided not to go with one-to-one coaching. After giving it a lot of thought, I started a new blog and a social media channel to post my thoughts and knowledge. I believe that practising as a coach would keep me updated.

Back in May, I applied for a CFP at pyConf India. The topic I chose was non-technical. I proposed a topic in lifestyle - Integrating a hobby for better work-life balance. In August I got a confirmation that my talk got shortlisted and I would need to do a couple of rehearsals and can buy a speaker ticket. Unfortunately, due to some personal reasons, I have decided to withdraw my proposal. Soon in October I gave a couple of webinars and did a workshop for teachers at a school, only to realise coding and solving technical problems is much easier than solving real personal issues for people. My strengths were in technology and not people. I have around 60 plus posts in that IG account. And I have been posting whenever possible.

In November, I revised my goals again and got back to revising Java Spring, DSA, and Open Source. I got an issue from open-tacos, however, it was already assigned to someone else. I couldn’t stop myself and tried to reproduce the issue on my machine. I also solved the issue and raised a PR, that got merged by the end of the month. It was simple but is my first ever PR that got approved. I have written a detailed article on this, you can check here.

This felt like encouragement and I picked up another issue, which I am hoping to close soon. I was busy with family in Dec and the first two weeks of Jan. Hoping to resume work as soon as possible.

Thanks for reading so far. Happy Learning!

I came across this project OpenBeta. I liked the project and the fact that they are building on top of open-street maps, which we tried to use in our projects back in the logistics company I worked with. It is an open-source project and I got lost in the code for quite some time. Later I looked for issues and felt overwhelmed. As a first-time contributor, I wanted to take a safe bet and pick a ‘good first issue’ usually meant for first-timers.

I managed to get a small setting issue assigned to me, where I had to update an API key.

In order to set up the project, I forked the repo (only develop branch) and then cloned it on the local machine as I wanted to start with the front end of the project.

Installed yarn and tried to install dependencies. That's when it kept saying that the node version was incompatible.

I tried to solve it for some time and then thought, maybe I must go with docker to avoid such incompatibilities.

Installed Docker.

Opened the project in VS Code. Launched a terminal in the IDE and then ran below code to start the container

docker compose up

This got stuck at step 5 for quite some time. Although I could see the container on the docker desktop, it still didn't work. So I terminated it and used the below command.

docker compose up --build

This time it successfully ran and showed a message that the application is running at localhost:3000

I raised a PR. I was hoping to get it approved until the next morning when I found that it had a migration of data involved and needed backend work. This blocked my PR and the author closed my PR.

PRESENT

I have not been that busy during the last two months of the year since the pandemic. I got back to check if I could contribute to the open-source. I found a new issue and this time, I didn’t think before working on it. I resolved the issue on my local machine and then commented on the issue about raising the PR.

I explored the project code a little deeper this time and I found it really interesting. Although I don’t climb, I like how they work to help the community. It made me feel happy that I could do something outside my regular work, (which actually doesn’t make a great impact, I will talk about it in detail some other time).

I raised a PR and it got approved within hours. It is a simple change, where the base URL had an extra ‘/’ in the path. This was causing the URL to have double slash in the copied URL link.

It is a minor contribution, but it gave me confidence and motivation to do more for the community. I have got another issue assigned to me yesterday. Looking forward to share about that too very soon.

Thank you for reading so far. Happy coding!

I have been performing classical dance once a year at my dad's office for their annual day function. We had this routine every summer, where we would rehearse with other kids of officers/employees from the same office as Dad's. This happened until I graduated my Intermediate(Plus 2), approximately 11 years. And then boom, I never looked back at my interest in pursuing dance as a skill. As part of taking care of myself being one of my goals for 2023, I decided to take up a course. I pitched it as a physical fitness goal to my partner and got full support to proceed. Although I knew most people around me wouldn't approve of it, I took it as a challenge. Unfortunately, people think that being in their 30s is not the right time to take up such a hobby. When I shared my interest with one of my friends, she claimed that I could not do it with my schedule and my health(she referred to my knee pains), and asked me to drop my thought. Huh! Not surprised, I dropped hanging out with her instead. It was exactly one year that I took the course, and I chose not to give up no matter what. Although I had ups and downs during this journey, I am quite a favorite student for my teacher.

I am forever grateful for my teacher. I was a bit lazy in the beginning but felt like a blessing to be able to wake up and do something I like, both personally and professionally. Just about 10 days into the year, my little one - Rihu had a viral attack, and around 10 days went in coping from fever, cold, and stuff. During this time I thought of going to a temple in the city. So as he recovered we visited Naga Devatha temple and offered "thulabaram" - it is a Hindu practice to weigh the kid opposite Rice and some staples, or Jaggery, at the temple by the end of the month.

Feb went quite fast as we planned a trip. Did a lot of shopping for Rihu for the staycation. Meanwhile, I had a bad time catching up with the Java cohort I took up in Dec. I wasn't finding the instructor relevant. I realized that the course was more for people who already practiced the backend in Java. I put it aside for some time and prepared myself to dive into some nature in March.

The 15-day trip to Goa was memorable. Took off for a few days and worked for a few more from the beautiful villa, that I cannot get over. 10 Adults and 10 kids together for half a month in a house, which was quite memorable. Time wasn't that blissful all the time, but being an introvert, I never thought I could get along with so many people. I found myself capable of learning on the go. My partner has helped in my low times. So I managed. The only thing I missed on the trip was to work from a shack. Will try next time for sure.

It was always clear that I can not do multi-tasking. So, I decided that I would focus on spending as much time as possible with my little one in his holidays. This was the time when I realised that life is too short to give up on anything but taking a break for a fresh start isn't a bad idea. One of the reasons to go easy with the break was that I did not like Java at all after attending the classes from the GFG instructor. It felt hard to believe that I could ever crack it. So, took it slow for two months. I think it is okay after all it is a break and not the end of the world, as it seemed from my Twitter feed :)

Do you have a favorite month as such? Like, usually it is your birthday month or of your loved ones. I am sure for most moms, it is June. As the schools here in India resume in this amazing time of the year, which allows us to finally get some air. We opted to go with the school bus this year, after going through a series of episodes where we returned home with the kid from school even before he stepped in. Like literally, I wake up to prep his lunch, and breakfast and get him ready, only to find out that he doesn't want to go. The poor kid had a tough time going to school, and so did we. But in contrast, this year was so good to see him make friends, and comfortable to start his day. Grateful for the new school, which makes it interesting for the kids to look forward to the next day. Every kid deserves such a school.

I struck off my side-project list to come up with a problem-solving approach instead, after speaking to my mentor. He had a point. Started my DSA journey instead, with the Colt Steele course, and was able to progress smoothly.

The next couple of months went into tackling my work at the office and Rihu's assignments. His first research paper on germs and kinds of germs was exciting for me. Found entry requests for a tech talk on functional programming for 'jsfoo - hasgeek.com'. Thought I could try it once and submitted a talk. Didn't get through. However, got my first tattoo. In the middle of all this chaos, I found out that I was pregnant. It was extremely hard until 2nd week of August. I never imagined to undergo an abortion. I cannot explain in words how painful the process was. I had no clue about it and felt terrible experiencing it. Every day passed by painfully, so I decided that I would take as much rest as possible and avoid learning as well to be sane and recover peacefully. This alone could be a post in itself. There was so much that I couldn't do, but I had to take this unexpected second break in the year.

As I started to recover and feel better, I made some achievable todo list for myself. Tried to tweet more often. And in the process of getting addicted to this social media platform, something interesting popped up in my feed. I have registered for pyconf Hyderabad, for the 30th and 1st Oct. I was so excited. Meanwhile, booked a session with Aman(an SDE2 from Microsoft) to get some feedback and learning path for my DSA course and progress. It turned out well and got some good feedback. I understood where I was lacking and picked up pace.

And then the day came. I was happy to be at Pycon India. Great meeting community volunteers from across the world. Tried to get Pyladies hyd handles, but found out that the owners did not want to give up, as I seemed new and thought I could not handle it. Could not convince Vandana enough. Meanwhile, attended another coffee morning at Rihu's school, where the central idea was 'conservation of water, water pollution, and preventive measures'. Applied to many remote jobs and got rejection emails. Progressed well on node js, express js, typescript, mono repo for frontend, and Postgres SQL. Posted an article on the pyconf experience. And did not get any update from pyladies, on the talk I submitted. I have had 10 more days this month, where I wanted to focus on office work and also learn production-level coding for the backend.

I couldn't make it to the speaker list of pyLadies. Applied for the React conference in Mumbai. Tried to solve a bug for open-tacos an open-source project, but couldn't get my PR merge as it had other dependencies. Started backend project for reward-your-child. Going good with middleware, error handling, and security using session tokens. Started spring course alongside DSA. Colt's course made it sound easy and now I have confidence that I can pull it off. Later got to know that didn't get through the ReactMumbai speaker list either. I have got my increment at work. Pretty happy with the hike and now I feel financially sorted and hope to get a good project to work on. November ended good with this news. Took up peer learning with Phani on the Spring framework.

Sometimes it is good to be spontaneous to have fun. So, we took a short trip to a resort with friends so that Rihansh(LO) could have fun. It paid off as a good weekend for the little one. No regrets! The next 3 days went into spending the monthly subscription to rest alongside planning the big day for the little one. Also completed Spring Core from the Udemy course that I took up last month. Peer learning kind of worked well in coping with the course.

There are some things that I thought would be nice to pick up but after brainstorming with my partner regarding my priorities and how I should be spending my time and energy to be sane, I decided to let go few deals. Masters in USA being one of the projects I wanted to pick up, I had got this offer from my previous employer to be part of his next startup. My previous employer is one of the founders of a logistics business. The products that they need to build for their business, were fascinating to me as they need some good machine learning and data engineering work. I thought I would be working on the products on the side, while my focus would still be on my work and upskilling I believe that my god Vinayaka(Ganesh ji) always shows me the right path in my career and learning. Henceforth I believe in my husband who helps me sort things in life.

During this time we had to travel 1000km up and down for my partner's uncle's funeral. That is when I decided to slow down and not continue with joining the startup idea. Phani has been very patient with me and so helped me catch up with the Spring course. I finally finished SpringBoot fundamentals and Hibernate (JPA).

This is the section where I set some goals for the next year 2024. I am happy and extremely grateful for the year 2023 has been. With that, I carry some of the ongoing courses that I started in the year 2023. So, I will continue with the Spring course, and anticipate getting some work on it by the middle of the year. As my employer insists on taking some real certification from a board on a skill that I like, I will explore a couple of new technologies(thinking of Terraform and AWS) and learn the one that seems feasible to fit into my work and schedule. Learning Java(backend) and getting work on it being the priority for the next year, I would try to do some side projects on it. In regards to personal growth, I would continue to learn Kuchipudi, and hopefully give my first performance with this academy. Also, planning to pick up a new skill to learn. I will be choosing from Art and Child Psychology. Whatever fits best with me and my little one. After all, the world revolves around our loved ones.

Looking forward!

Thanks for reading so far! Wish you the best!

I am a person who continuously craves new challenges through which I can learn and grow. I get a dopamine hit when I solve problems. I find immense joy in even the smallest victories, such as fixing the tiniest bug or making a static web application come to life. Integrating APIs and manipulating data to achieve specific outcomes, exploring and applying new tools and libraries to tackle fresh challenges – all these experiences bring me great satisfaction. My love for programming languages and the tools that allow me to create magic is indescribable.

Let's explore different methods of learning:

1. Mentorship: Finding a mentor who can guide you in your career journey is invaluable. Platforms like Twitter can provide spaces to connect with potential mentors.

2. Full-time courses: Pursuing a master's degree allows for ample time to experiment and conduct research in your chosen field. However, this may not align with my personal life at the moment.

3. Project-based learning: Engaging in projects that solve interesting problems using technology exposes you to new challenges regularly. Sometimes, it can be challenging for me to identify unique problems in the tech world. However, I'm eager to tackle more stimulating challenges than mere alignment issues on a website.

4. Brainstorming sessions: Regularly conversing with fellow engineers in the community is a great way to share knowledge and insights. An application like coffeemug.ai facilitates such collaborative experiences.

5. Workshops: Participating in hackathons or similar workshops allows for rapid learning by exploring different tech stacks to solve problems. However, such events may not currently align with my personal life.

6. Open-source contributions: Getting involved in an interesting open-source project and contributing to its development is an excellent way to learn and apply skills effectively.

I am an aspiring engineer eager to learn and grow. I am looking for opportunities that can impact large-scale users.

(Edit- Dec 2024) In this journey, I have also found a couple of applications codingame.com that throw coding challenges in a gamified way which has been helpful.

Thanks for reading so far.

Happy coding!

useLayoutEffect is a React Hook that is similar to the useEffect Hook, but it runs synchronously immediately after all DOM mutations before the browser has a chance to paint those changes on the screen. This is useful for performing actions that depend on the layout or dimensions of the DOM elements, such as animating transitions or calculating measurements.

The signature useLayoutEffect is the same as useEffect: it takes two arguments, a function and an optional array of dependencies. The function argument will be executed after the initial render and after every update to the component, while the dependency array determines whether or not the effect should be re-run based on changes to its dependencies.

Here is an example of using useLayoutEffect to perform a simple animation:

import { useState, useLayoutEffect } from 'react';

function App() {
  const [show, setShow] = useState(false);

  useLayoutEffect(() => {
    const el = document.getElementById('box');
    el.style.opacity = '1';
    el.style.transform = 'translateX(0)';
  }, [show]);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle Box</button>
      {show && <div id="box" style={{ opacity: 0, transform: 'translateX(-50px)' }}>This is a box.</div>}
    </div>
  );
}

In this example, we are using useLayoutEffect to update the styles of the #box element when the show state changes. The useLayoutEffect hook runs synchronously after every update, so the DOM changes will be immediately reflected in the browser, allowing for smooth animations without flickering or delays.

It is important to note that because useLayoutEffect runs synchronously, it can potentially cause performance issues or jank if the effect takes too long to execute. In these cases, it may be better to use the useEffect Hook instead, which runs asynchronously after the browser has painted the changes on the screen. However, for certain use cases such as animations or layout-dependent effects, useLayoutEffect can be a useful tool for achieving a smooth and responsive user experience.

1. Updating CSS Styles

import { useState, useEffect, useLayoutEffect } from 'react';

function App() {
  const [color, setColor] = useState('red');

  useEffect(() => {
    const el = document.getElementById('box');
    el.style.backgroundColor = color;
  }, [color]);

  useLayoutEffect(() => {
    const el = document.getElementById('box');
    el.style.borderColor = color;
  }, [color]);

  return (
    <div id="box" style={{ width: '100px', height: '100px', border: '5px solid black' }}>
      This is a box.
    </div>
  );
}

In this example, we are using useEffect to update the background colour of the #box element whenever the colour state changes, and we are using useLayoutEffect to update the border colour of the same element. Because useLayoutEffect runs synchronously before the browser has a chance to paint the changes, the border colour will be updated before the background colour, resulting in a brief flicker where the border colour is visible before the background colour is updated.

1. Measuring Element Dimensions

import { useState, useEffect, useLayoutEffect } from 'react';

function App() {
  const [width, setWidth] = useState(null);

  useEffect(() => {
    const el = document.getElementById('box');
    setWidth(el.clientWidth);
  }, []);

  useLayoutEffect(() => {
    const el = document.getElementById('box');
    setWidth(el.clientWidth);
  }, []);

  return (
    <div id="box" style={{ width: '50%' }}>
      This is a box. Its width is {width}px.
    </div>
  );
}

In this example, we are using both useEffect and useLayoutEffect to measure the width of the #box element and update the width state accordingly. Because useEffect runs asynchronously after the browser has painted the changes, it may not always reflect the most up-to-date measurements of the element. In contrast, useLayoutEffect runs synchronously before the browser paints the changes, ensuring that the width state is always up-to-date with the latest measurements.

Overall, the choice between useEffect and useLayoutEffect depends on the specific use case and the desired behavior of the effect. If the effect relies on the layout or dimensions of DOM elements or needs to perform synchronous updates to the DOM, useLayoutEffect may be more appropriate. Otherwise, useEffect is generally a safer and more performant choice.

The Day:

I made breakfast and lunch for little one and my husband and took a cab to JNTU, where the conference was held. I had mixed thoughts, and so I recited to myself in my head, "It is okay", "they can manage and so I will not think about them", "I will grab a chair and stay there for the rest of the day", "I hope someone comes and talk to me and that way I'll have a company", "its okay either way", "Maybe I'll return after lunch". And with these flooded thoughts, I forgot to wish my mom for her birthday.

As I reached the venue, the helpdesk directed me to attend the keynote. I was a bit overwhelmed looking at the crowd, took a deep breath, and then I stepped to find a chair that was empty on either side and sat. I made myself comfortable and listened to Jessica's keynote. She was amazing and made open source sound simple. Her journey from a volunteer to leading Pyladies Berlin and being a board member has inspired me in many ways. Her talk made me rethink why I should contribute to open source and community. She had repeatedly emphasized on code-of-conduct which ensured me that I was in a safe space. It felt like a great start, up until they gave a refreshment break.

Made friends:

Everyone started moving and I felt a little confused. I observed there were a few women in the hall who were alone too and thought to meet them. As I got close to a woman, her friends came and I turned and walked to the cafeteria. I picked up some tea and looked around. Then found some young girls talking and I could sense that they were introducing themselves to each other. I immediately pitched in and asked if I could join them. Being an introvert is hard until this point. Here on they asked and I had to just answer. Navya, Prachi, Pooja and Bhavna. These girls are way ahead of me. They were kind to talk to me. Navya and Bhavna were from Delhi, in their 2nd year of college. Navya had been sponsored to speak on 3rd track the next day, while Bhavya accompanied her. Prachi is a game developer and has come to network with people. Pooja is an R developer in Deloitte working as a Research Analyst and has been part of the RSE Pune chapter.

After the break, Pooja and Prachi left to attend talks on different tracks in other auditoriums, while I accompanied Navya and Bhavna for a talk on Scratch using ChatGpt. Oh, it was so much fun watching the speaker (sorry I forgot the name of the speaker) build a pyramid in Scratch using solutions suggested by ChatGpt. He had set settings in ChatGpt to add funny comments while sharing code for the pyramid. That made the talk funny and interactive. Post this session, we looked for more such talks in the brochure. As we stepped out of the auditorium, we found Jessica talking to some girls. I remembered that she mentioned in the keynote that she was looking for volunteers from Pune to organize the Pyladies event, as one of her board members Anvesha was leading it by her pocket. Navya and Prachi encouraged me to talk to her, as I said that I was interested in organizing such meetups in Hyderabad. As I shared my interest in mentoring juniors and young girls, and how we can achieve it by starting to motivate girls from school to code in the most fun way possible, Jessica acknowledged and said that we could do that by finding the leads of Pyladies Hyderabad chapter who could help me in this initiative.

Lunch and Open Space Conversations:

Our conversations continued and then we moved to pyladies open space. Where everyone shared their journey and experience with Python. This is where I could hear from Abirami Sukumaran, Vandana, Vaibhavi Singh, and Bowrna Prabhakaran. Each had a wonderful journey and interestingly some of to the community. It is inspiring.

We cut the cake, had lunch, shared some thoughts, and dispersed.

At stalls

I wanted to head back home but Pooja said that we could just check the stalls once. So I got to know that these stalls have some interesting games curated for the attendees. I started with a wordle puzzle and won a keychain. An AI question that I lost. Answered a couple of cloud questions and won Google Cloud hats. Met Swetha at Certa stall and applied for the job. Answered an AI question correctly this time. Won a water bottle, and now my son takes it to school.

Day well spent!

Returned home with a joyful heart. ❤️

Here is the backend

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'your_database_url_here'
db = SQLAlchemy(app)

class MilkProcurer(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    address = db.Column(db.String(200), nullable=False)
    contact = db.Column(db.String(15), nullable=False)
    # Add more fields as needed

@app.route('/create_doodh_waala', methods=['POST'])
def create_doodh_waala():
    data = request.get_json()
    name = data.get('name')
    address = data.get('address')
    contact = data.get('contact')
    # Validate and save the milk-procurer data
    milk_procurer = MilkProcurer(name=name, address=address, contact=contact)
    db.session.add(milk_procurer)
    db.session.commit()
    return jsonify({'message': 'Milk-procurer created successfully'}), 201

@app.route('/get_doodh_waala', methods=['GET'])
def get_doodh_waala():
    milk_procurers = MilkProcurer.query.all()
    result = []
    for milk_procurer in milk_procurers:
        result.append({
            'name': milk_procurer.name,
            'address': milk_procurer.address,
            'contact': milk_procurer.contact,
            # Include more fields here
        })
    return jsonify(result)

React component for listing doodh-waala

import React, { useEffect, useState } from 'react';

function MilkProcuringPlaces() {
    const [places, setPlaces] = useState([]);

    useEffect(() => {
        // Fetch milk-procuring places from the backend and update the 'places' state.
        // You may use the Fetch API or a library like Axios for this.
    }, []);

    return (
        <div>
            <h2>Milk Procuring Places</h2>
            <ul>
                {places.map((place) => (
                    <li key={place.id}>
                        <h3>{place.name}</h3>
                        <p>Address: {place.address}</p>
                        <p>Contact: {place.contact}</p>
                        {/* Add more fields as needed */}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default MilkProcuringPlaces;

To allow users to add a milk-procuring place (Doodhwaala) along with uploading photos and providing a rating, you can create a React component as follows:

import React, { useState } from 'react';

function AddDoodhwaala({ onAddDoodhwaala }) {
    const [name, setName] = useState('');
    const [address, setAddress] = useState('');
    const [contact, setContact] = useState('');
    const [rating, setRating] = useState(0);
    const [photos, setPhotos] = useState([]);
    const [photoUrls, setPhotoUrls] = useState([]);

    const handleNameChange = (e) => {
        setName(e.target.value);
    };

    const handleAddressChange = (e) => {
        setAddress(e.target.value);
    };

    const handleContactChange = (e) => {
        setContact(e.target.value);
    };

    const handleRatingChange = (e) => {
        setRating(e.target.value);
    };

    const handlePhotoUpload = (e) => {
        const selectedPhotos = Array.from(e.target.files);

        // Display selected photo names to the user
        const selectedPhotoUrls = selectedPhotos.map((photo) => URL.createObjectURL(photo));

        setPhotos([...photos, ...selectedPhotos]);
        setPhotoUrls([...photoUrls, ...selectedPhotoUrls]);
    };

    const handleSubmit = () => {
        // Prepare the data to send to the parent component
        const doodhwaalaData = {
            name,
            address,
            contact,
            rating,
            photos,
        };

        // Pass the data to the parent component for further processing
        onAddDoodhwaala(doodhwaalaData);

        // Clear the form fields after submission
        setName('');
        setAddress('');
        setContact('');
        setRating(0);
        setPhotos([]);
        setPhotoUrls([]);
    };

    return (
        <div>
            <h2>Add Doodhwaala</h2>
            <form onSubmit={handleSubmit}>
                <label htmlFor="name">Name:</label>
                <input type="text" id="name" value={name} onChange={handleNameChange} required />

                <label htmlFor="address">Address:</label>
                <input type="text" id="address" value={address} onChange={handleAddressChange} required />

                <label htmlFor="contact">Contact:</label>
                <input type="text" id="contact" value={contact} onChange={handleContactChange} required />

                <label htmlFor="rating">Rating:</label>
                <input type="number" id="rating" min="0" max="5" value={rating} onChange={handleRatingChange} required />

                <label htmlFor="photos">Upload Photos:</label>
                <input type="file" id="photos" accept="image/*" multiple onChange={handlePhotoUpload} />

                <div>
                    {photoUrls.map((url, index) => (
                        <img key={index} src={url} alt={`Photo ${index}`} style={{ maxWidth: '100px', maxHeight: '100px' }} />
                    ))}
                </div>

                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default AddDoodhwaala;

I will soon make this up and running and then share the git repo here.

Thanks for reading this far. Happy learning!!

1. FreeCodeCamp (GitHub Repository: https://github.com/freeCodeCamp/freeCodeCamp): This project is focused on helping people learn to code for free. It includes challenges, certifications, and a large community. Contributions could involve fixing bugs, improving documentation, or adding new coding challenges.

2. Node.js (GitHub Repository: https://github.com/nodejs/node): If you're interested in server-side JavaScript, Node.js is a popular runtime. You can contribute by improving documentation, fixing bugs, or even working on small features.

3. Hoodie (GitHub Repository: https://github.com/hoodiehq/hoodie): Hoodie is a framework for building offline-first applications. It's designed to be beginner-friendly and encourages contributions from newcomers.

4. JavaScript30 (GitHub Repository: https://github.com/wesbos/JavaScript30): This project offers 30 small JavaScript projects that help you practice and improve your skills. Contributions could involve adding new projects, improving existing ones, or fixing issues.

5. React (GitHub Repository: https://github.com/facebook/react): React is a widely used JavaScript library for building user interfaces. Contributing to its documentation, working on issues labeled as "beginner-friendly," or helping with tests could be a good start.

6. Atom (GitHub Repository: https://github.com/atom/atom): Atom is a popular text editor developed by GitHub. You can contribute by fixing bugs, improving the user interface, or developing new features.

7. Ghost (GitHub Repository: https://github.com/TryGhost/Ghost): Ghost is a professional publishing platform. You could contribute by fixing bugs, improving themes, or enhancing the core platform.

8. Vue.js (GitHub Repository: https://github.com/vuejs/vue): Vue.js is another popular JavaScript framework for building user interfaces. Contributing could involve improving documentation, fixing bugs, or adding new features.

9. P5.js (GitHub Repository: https://github.com/processing/p5.js): P5.js is a creative coding library that makes coding visuals and animations easier. You could contribute by improving examples, fixing bugs, or helping with documentation.

10. TensorFlow.js (GitHub Repository: https://github.com/tensorflow/tfjs): If you're interested in machine learning, TensorFlow.js brings machine learning and deep learning to JavaScript. Contributions could involve improving examples, documentation, or fixing issues.

Remember that contributing to open-source projects involves more than just coding. You can contribute by improving documentation, creating tutorials, testing software, designing user interfaces, and more. Before you start contributing, make sure to read the project's contribution guidelines and code of conduct. It's also a good idea to engage with the community through forums, chat rooms, or mailing lists to get a sense of ongoing discussions and priorities.

Here are some less popular javascript open-source projects:

1. Choo (GitHub Repository: https://github.com/choojs/choo): Choo is a small and focused framework for building user interfaces. It's designed to be simple and could be a great place to contribute if you're interested in front-end development.

2. Feathers (GitHub Repository: https://github.com/feathersjs/feathers): Feathers is a web framework for building real-time applications. Contributions might involve improving documentation, fixing bugs, or working on plugins.

3. Preact (GitHub Repository: https://github.com/preactjs/preact): Preact is a fast 3kB alternative to React with the same modern API. You could contribute by improving performance, fixing issues, or enhancing the library.

4. Rambda (GitHub Repository: https://github.com/ramda/ramda): Rambda is a functional programming library for JavaScript. Contributions could involve adding new functions, improving existing ones, or writing tests.

5. Gatsby Themes (GitHub Repository: https://github.com/gatsbyjs/themes): Gatsby Themes allow you to package up reusable functionality, like a sidebar or analytics integration, as a theme. Contributing might involve creating or enhancing themes, improving the documentation, or fixing bugs.

6. Smoothie Charts (GitHub Repository: https://github.com/joewalnes/smoothie): Smoothie Charts is a JavaScript charting library for streaming data. You could contribute by improving chart types, adding new features, or enhancing performance.

7. Vuido (GitHub Repository: https://github.com/mimecorg/vuido): Vuido allows you to create native desktop applications using Vue.js. Contributions might involve improving cross-platform compatibility, adding new features, or optimizing performance.

8. Greenlet (GitHub Repository: https://github.com/developit/greenlet): Greenlet is a small utility library for moving an async function into its own thread. You could contribute by improving documentation, optimizing the library, or fixing issues.

9. ECharts (GitHub Repository: https://github.com/apache/echarts): ECharts is a powerful charting and visualization library. Contributions could involve improving documentation, adding new chart types, or enhancing existing features.

10. Mithril (GitHub Repository: https://github.com/MithrilJS/mithril.js): Mithril is a lightweight JavaScript framework for building single-page applications. You could contribute by working on performance improvements, fixing bugs, or enhancing the documentation.

Remember that the popularity of a project doesn't necessarily reflect its value or the impact of your contributions. Less popular projects often have smaller, more tight-knit communities where your efforts can have a significant impact. Before you start contributing, make sure to explore the project's repository, issues, and contribution guidelines to get a sense of how you can best contribute.

1. Pythonic Simplicity:

One of the standout features of Streamlit is its Pythonic simplicity. The clean and intuitive API allows us to create impressive web apps with just a few lines of code. This eliminates the need to know web development languages like HTML, CSS, or JavaScript; instead, we can focus solely on crafting compelling data visualizations and applications. Let me share how you could get started by importing streamlit in your project:

import streamlit as st

# Simple Streamlit app to display a title and plot a chart
st.title("Hello, Streamlit!")
st.write("Let's create a basic line chart.")
chart_data = {'x': [1, 2, 3, 4, 5], 'y': [10, 5, 7, 8, 12]}
st.line_chart(chart_data)

2. Rapid Prototyping and Real-time Iteration:

Time is of the essence in any data project, and Streamlit helps us make the most of it. Rapid prototyping is where Streamlit truly shines, as we can transform our ideas into functional web apps within minutes. The real-time feedback loop facilitates quick iterations, allowing us to fine-tune our apps on the fly and present our results with the latest updates. This seamless workflow enhances productivity and reduces development time significantly.

3. Widgets for Interactivity:

Interactivity is a crucial aspect of data communication, and Streamlit's wide array of widgets makes it a breeze to create interactive elements in our web apps. Whether it's sliders, buttons, text inputs, or date pickers, Streamlit provides a simple interface to add these widgets, making our apps engaging and user-friendly. This level of interactivity enhances the user experience and encourages exploration of the underlying data. Here is a code snippet to use a slider:

import streamlit as st

# Simple Streamlit app to demonstrate interactivity with sliders
age = st.slider("Select your age:", min_value=0, max_value=100, value=25)
st.write("The square of", number, "is", result, ".")
#we could also write the same as below
st.write("The square of {} is {}.".format(number, result))

4. Seamless Library Integration:

In the realm of data science, we rely heavily on various libraries for data manipulation, analysis, and visualization. Streamlit plays well with the popular libraries in the Python ecosystem, including Pandas, Matplotlib, Plotly, and more. This seamless integration allows us to leverage our existing codebase and ensures that we can smoothly transition our data projects into interactive web apps. Let's see how:

import streamlit as st
import pandas as pd
import plotly.express as px

# Simple Streamlit app to load data and create a scatter plot
data = pd.read_csv("data.csv")
st.write(data)
#which is st.write(pd.read_csv("data.csv"))

fig = px.scatter(data, x='x', y='y', color='category')
st.plotly_chart(fig)

5. Sharing and Collaboration:

Streamlit is not just about personal productivity; it's about collaboration and sharing as well. The ease of sharing our web apps with colleagues, stakeholders, or the broader community cannot be overstated. Whether deploying on Streamlit Sharing or cloud platforms like Heroku, we can quickly showcase our work to the world, fostering knowledge exchange and collaboration. It is as simple as shown below:

streamlit share -- -app your_streamlit_app.py

Streamlit is a game-changer for data scientists looking to elevate their projects beyond static visualizations. If you're a data scientist looking to amplify your impact and communicate your findings effectively, Streamlit is undoubtedly a tool worth exploring. Embrace the power of Python-powered web apps and unlock a new dimension in your data storytelling journey.

I hope this was helpful. Thank you! Happy learning.

Understanding the Sliding Window Technique: The sliding window technique involves maintaining a "window" of elements within a data structure and iteratively sliding the window to solve a specific problem efficiently. By optimizing the way we process data, we can often achieve better time complexity compared to brute-force approaches.

Efficiency Benefits:

1. Reduced Computation: The sliding window technique avoids unnecessary recomputations by reusing previously computed results within the window. This leads to improved time complexity and faster execution.

2. Linear Complexity: In many cases, the sliding window technique allows us to solve problems with linear time complexity (O(n)), which is far more efficient than quadratic or exponential complexity.

Use Case 1: Banking Application: Consider a banking application that needs to identify the longest consecutive sequence of transactions above a certain threshold amount. The sliding window technique is a perfect fit for this scenario. By maintaining a window of transaction amounts and sliding it through the data, we can efficiently identify the longest sequence without checking every possible subarray.

Let's look at a JavaScript implementation of the sliding window technique for this use case:

function findLongestSequence(transactions, threshold) {
  let maxLength = 0;
  let currentLength = 0;

  for (let i = 0; i < transactions.length; i++) {
    if (transactions[i] > threshold) {
      currentLength++;
    } else {
      maxLength = Math.max(maxLength, currentLength);
      currentLength = 0;
    }
  }

  return Math.max(maxLength, currentLength);
}

// Example usage:
const transactions = [120, 140, 200, 80, 100, 250, 300, 320, 200, 180];
const threshold = 150;
const longestSequence = findLongestSequence(transactions, threshold);
console.log(`Longest sequence above ${threshold}: ${longestSequence}`);

In this example, we define the findLongestSequence function that takes an array of transactions and a threshold amount. The function iterates over the transactions, maintaining the current length of consecutive amounts above the threshold. When a transaction falls below the threshold, the current length is compared with the maximum length encountered so far. Finally, the function returns the longest sequence length.

Use Case 2: Fraud Detection - Anomaly Detection Detecting anomalies and potential fraud in banking transactions is critical. The sliding window technique can be used to identify unusual patterns in transaction amounts.

function detectAnomalies(transactions, windowSize, threshold) {
  const anomalies = [];

  for (let i = 0; i < transactions.length; i++) {
    if (i >= windowSize) {
      const window = transactions.slice(i - windowSize, i);
      const average = window.reduce((sum, amount) => sum + amount, 0) / windowSize;

      if (transactions[i] > threshold * average) {
        anomalies.push({ transaction: transactions[i], index: i });
      }
    }
  }

  return anomalies;
}

// Example usage:
const transactionAmounts = [100, 150, 200, 120, 180, 900, 120, 250, 300, 80];
const windowSize = 5;
const anomalyThreshold = 2;
const detectedAnomalies = detectAnomalies(transactionAmounts, windowSize, anomalyThreshold);
console.log('Detected Anomalies:', detectedAnomalies);

In this example, we detect anomalies in transaction amounts by comparing each transaction to the average of the previous window. If a transaction exceeds a certain threshold (e.g., twice the average), it is flagged as an anomaly. By using a sliding window, we can efficiently analyze transaction patterns and identify potential fraud.

Another example with strings: Longest Substring with K Distinct Characters Given a string, you can use the sliding window technique to find the length of the longest substring that contains at most K distinct characters.

function findLongestSubstringWithKDistinct(str, k) {
  let longestLength = 0;
  let start = 0;
  const charMap = new Map();

  for (let end = 0; end < str.length; end++) {
    const currentChar = str[end];
    charMap.set(currentChar, (charMap.get(currentChar) || 0) + 1);

    while (charMap.size > k) {
      const leftChar = str[start];
      charMap.set(leftChar, charMap.get(leftChar) - 1);
      if (charMap.get(leftChar) === 0) {
        charMap.delete(leftChar);
      }
      start++;
    }

    longestLength = Math.max(longestLength, end - start + 1);
  }

  return longestLength;
}

// Example usage:
const inputString = 'aabacbebebe';
const k = 3;
const longestLength = findLongestSubstringWithKDistinct(inputString, k);
console.log(`Length of the longest substring with ${k} distinct characters: ${longestLength}`);

Thanks for reading so far. Happy Learning !!

1. useState :

   The useState hook is used for managing the state within a functional component. Here's an example of how to use it to display a simple form:

import { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={handleInputChange} />
      <input type="email" name="email" value={formData.email} onChange={handleInputChange} />
      <textarea name="message" value={formData.message} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, useState is used to manage the state of a form. The formData object contains the current values of the form inputs and is updated via the handleInputChange function. The handleSubmit function logs the form data to the console when the form is submitted.

1. useEffect :

   The useEffect hook is used for performing side effects within a component, such as fetching data from an API. Here's an example of how to use it to fetch data from a fake API:

import { useState, useEffect } from 'react';

function Data() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json))
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

1. useContext :

   The useContext hook is used for accessing context within a component. Here's an example of how to use it to change the theme of an app:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function Theme() {
  const theme = useContext(ThemeContext);

  return (
    <div className={`theme-${theme}`}>
      <p>Current theme: {theme}</p>
    </div>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Theme />
    </ThemeContext.Provider>
  );
}

1. useRef :

   The useRef hook is used for creating a reference to a component or element within a component. Here's an example of how to use it to focus on an input element:

import { useRef } from 'react';

function Input() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

1. useCallback :

   The useCallback hook is used for memoizing a function within a component. Here's an example of how to use it to memorize a handler function:

import { useCallback, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

In this example, useCallback is used to memoize the handleIncrement function. Since handleIncrement does not depend on any variables outside of its scope, it is only created once when the component is mounted, rather than being recreated on every render. This can help improve performance, particularly for expensive calculations or when passing functions down as props to child components.

I hope this was helpful. Thank you! Happy learning.

1. Minimize the Number of Components

One of the most important ways to improve the performance of your React app is to minimize the number of components. Every component in your app requires memory and processing power to render, so reducing the number of components can have a significant impact on performance. Consider the following code:

const MyComponent = ({ data }) => {
  return (
    <div>
      {data.map(item => (
        <MyChildComponent key={item.id} item={item} />
      ))}
    </div>
  );
};

In this code, we have a parent component MyComponent that renders a list of MyChildComponent components. To reduce the number of components, we can replace MyChildComponent with a functional component and use React.memo to memorize it:

const MyChildComponent = React.memo(({ item }) => {
  return <div>{item.value}</div>;
});

const MyComponent = ({ data }) => {
  return (
    <div>
      {data.map(item => (
        <MyChildComponent key={item.id} item={item} />
      ))}
    </div>
  );
};

With this optimization, MyChildComponent will only re-render when its props change, which can significantly reduce the number of times it needs to be rendered.

2. Use Lazy Loading: Lazy loading is another important technique for optimizing the performance of your React app. With lazy loading, you can load components only when they're needed, instead of loading everything at once. This can significantly improve the initial loading time of your app. Small example of how to use lazy loading in React:

const MyComponent = React.lazy(() => import('./MyComponent'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
};

In this code, MyComponent is loaded using the React.lazy function. The Suspense Component is used to display a loading message while MyComponent is being loaded.

3. Use Pure Components: Pure components are components that only re-render when the props they receive change. Use pure components instead of regular components to avoid unnecessary re-rendering, which can significantly improve the performance of your app. Let us create a pure component in React:

const MyPureComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

const App = () => {
  const [data, setData] = React.useState('Initial data');

  return (
    <div>
 <MyPureComponent data={data} />
      <button onClick={() => setData('Updated data')}>Update Data</button>
    </div>
  );
};

With this code, MyPureComponent will only re-render when the data prop changes, which can significantly improve the performance of your app.

4. Use the Right Data Structures: Using the right data structures can also have a significant impact on the performance of your app(developed using any framework). For example, if you need to display a large list of items, using an array of objects can be slow compared to using a more optimized data structure like a hash table. I tried the below to implement a hash table in react application.

const hashTable = {};
const data = [{ id: 1, value: 'Item 1' }, { id: 2, value: 'Item 2' }];

data.forEach(item => {
  hashTable[item.id] = item;
});

const MyComponent = ({ data }) => {
  return (
    <div>
      {Object.values(hashTable).map(item => (
        <div key={item.id}>{item.value}</div>
      ))}
    </div>
  );
};

By following these best practices, you can significantly improve the performance of your React app. Remember to regularly monitor the performance of your app and make optimizations as needed to ensure that it runs smoothly and provides a great user experience.

I hope this was helpful. Thank you! Happy learning.

Solution: Redux provides a centralized store to manage the state of your application. The state is updated using actions and reducers, and the updated state is available to all components that need it. This eliminates the need to pass props through multiple components and eliminates complex state updates.

In this post let us explore how we can use it in a react application. The app will be a simple expense-tracking application where users can add expenses and view a list of all the expenses they've added. The user will be able to add the name and amount of the expense, and the date it was incurred. Let's take a look at how we can use Redux in our expense tracking app.

First, we need to install the redux library.

npm install redux

Next, we need to set up the Redux store. The store is the central repository of all the state in our application.

import { createStore } from 'redux';

const initialState = {
  expenses: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_EXPENSE':
      return { ...state, expenses: [...state.expenses, action.payload] };
    default:
      return state;
  }
};

const store = createStore(reducer);

Next, we'll create a component for the form where the user can add expenses. This component will dispatch an action to add an expense to the Redux store when the form is submitted.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

const AddExpenseForm = () => {
  const [name, setName] = useState('');
  const [amount, setAmount] = useState('');
  const [date, setDate] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = e => {
    e.preventDefault();
    dispatch({
      type: 'ADD_EXPENSE',
      payload: { name, amount, date }
    });
    setName('');
    setAmount('');
    setDate('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <input
        type="text"
        placeholder="Amount"
        value={amount}
        onChange={e => setAmount(e.target.value)}
      />
      <input
        type="text"
        placeholder="Date"
        value={date}
        onChange={e => setDate(e.target.value)}
      />
      <button type="submit">Add Expense</button>
    </form>
  );
};

export default AddExpenseForm;

Finally, we'll create a component to display the list of expenses. This component will be connected to the Redux store and will receive the expenses from the store as props.

import React from 'react';
import { connect } from 'react-redux';

const ExpenseList = ({ expenses }) => {
  return(
    <div className="container">
      <ul>
        {expenses.map((expense, index) => (
          <li key={index} className="listContainer">
            <span className="expenseText">{expense.text}</span>
            <span className="expenseAmount">${expense.amount}</span>
          </li>
        ))}
      </ul>
    </div>
)};

const mapStateToProps = (state) => ({
  expenses: state.expenses
});

export default connect(mapStateToProps)(ExpenseList);

.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.listContainer {
  display: flex;
  flex-direction: row;
  padding: 10px;
  border-bottom: 1px solid #cccccc;
  align-items: center;
}

.expenseText {
  font-size: 18px;
  margin-left: 10px;
  color: #444444;
}

.expenseAmount {
  font-size: 18px;
  margin-left: auto;
  color: #444444;
}

Benefits:

Let me summarise the benefits of using the Redux library so that you can opt to use it in your next react application.

• Centralized state management

• Predictable state updates

• Easy debugging

• Reusable code

• Improved performance

In conclusion, Redux is a must-have tool for any React app that needs to manage complex state updates. It makes our app more scalable, maintainable, and predictable.

I hope this was helpful. Thank you! Happy learning.

Background:

My husband is a musician and uses plenty of software to produce his tracks. These applications are quite expensive and sometimes he needs only a few features of them to make his work better. Never too late, it occurred to me to explore and see if I can build them for him. So, this is my first step to trying out the instruments first. And the plan is to build an app around instruments. I will keep sharing the developed parts in this series.

Prerequisites of the project:

Let us get started with this mini-app. In order to get started, we need all the key sounds. We could either use sound files or generate them using a synthesizer. In this project, I am using downloaded sound files from the internet and you can download them from my git-repo. I am sure you can find better files, please do your research if you don't like the sounds here.

Folder structure:

We start by creating three files in the root directory - index.html, index.js, and styles.css. Open index.html and type the exclamation mark and hit enter to get the boilerplate code for html file. We can then add the link tag for styles.css file and the script tag for index.js file. We could hold all the sound files in a folder in the root directory, as shown in the below screenshot.

UI of the Keyboard:

We would need a container and then 7 white keys with 5 black keys(representing the flat keys) in between. You can find the code below. We would use data attributes to link to respective sound files. In order to access sound files, we shall use the audio tags and each of those would hold the id attribute the same as data-note of the respective keys.

  <div class="keys">        
        <div data-note="C" class="key white"></div>
        <div data-note="Db" class="key black"></div>
        <div data-note="D" class="key white"></div>
        <div data-note="Eb" class="key black"></div>
        <div data-note="E" class="key white"></div>
        <div data-note="F" class="key white"></div>
        <div data-note="Gb" class="key black"></div>
        <div data-note="G" class="key white"></div>
        <div data-note="Ab" class="key black"></div>
        <div data-note="A" class="key white"></div>
        <div data-note="Bb" class="key black"></div>
        <div data-note="B" class="key white"></div>
   </div>

      <audio id="C" src="sounds/C.mp3"></audio>
      <audio id="Db" src="sounds/Db.mp3"></audio>
      <audio id="D" src="sounds/D.mp3"></audio>
      <audio id="Eb" src="sounds/Eb.mp3"></audio>
      <audio id="E" src="sounds/E.mp3"></audio>
      <audio id="F" src="sounds/F.mp3"></audio>
      <audio id="Gb" src="sounds/Gb.mp3"></audio>
      <audio id="G" src="sounds/G.mp3"></audio>
      <audio id="Ab" src="sounds/Ab.mp3"></audio>
      <audio id="A" src="sounds/A.mp3"></audio>
      <audio id="Bb" src="sounds/Bb.mp3"></audio>
      <audio id="B" src="sounds/B.mp3"></audio>

Styling:

We can start with setting the border-box for the entire layout. Width of the key is different for white keys and black ones, so we use a variable for width and calculate it for the key. In order to get the black keys on top of the white ones, we set the margin-left and margin-right of the black keys to a negative value. This would let the black keys on top of one white key, and to get them on top of both white keys on either of their sides, set the z-index to 2.

*, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    background-color: #d3ebe6fc;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .keys {
    display: flex;
  }

  .key {
    height: calc(var(--width) * 4);
    width: var(--width);
  }

  .white {
    --width: 100px;
    background-color: white;
    border: 1px solid #333;
  }

  .white.active {
    background-color: #CCC;
  }

  .black {
    --width: 60px;
    background-color: black;
    margin-left: calc(var(--width) / -2);
    margin-right: calc(var(--width) / -2);
    z-index: 2;
  }

  .black.active {
    background-color: #333;
  }

Here's the final output:

Fun part - javascript:

Here is where all the magic is created. In order to get started, we shall get all the keys as DOM elements. And for each of these keys add an event listener to play the respective sound. Find the function playNoteSound from below code snippet.

const allkeys = document.querySelectorAll('.key');

allkeys.forEach(key => {
  //adding event listener for click event  
  key.addEventListener('click', () => playNoteSound(key)); 
});

//function to play the sound of key
function playNoteSound(key) {
  const noteAudio = document.getElementById(key.dataset.note)
  noteAudio.currentTime = 0;
  noteAudio.play();
  key.classList.add('active');
  noteAudio.addEventListener('ended', () => {
    key.classList.remove('active');
  })
}

This would get you going with clicking the keys. However, it is ideal to have the keys from keyboard mapped to the piano keys. Hence, we can add another event listener for 'keydown' and play the respective sounds. We need to define the keys for the white keys and black keys of the piano, as shown in the below snippet.

const WHITE_KEYS = ['z', 'x', 'c', 'v', 'b', 'n', 'm'];
const BLACK_KEYS = ['s', 'd', 'g', 'h', 'j'];

const whiteKeys = document.querySelectorAll('.key.white');
const blackKeys = document.querySelectorAll('.key.black');

//adding event listener for key down from keyboard
document.addEventListener('keydown', e => {
    if (e.repeat) return;
    const key = e.key;
    const whiteKeyIndex = WHITE_KEYS.indexOf(key);
    const blackKeyIndex = BLACK_KEYS.indexOf(key);

    if (whiteKeyIndex > -1) playNoteSound(whiteKeys[whiteKeyIndex]);
    if (blackKeyIndex > -1) playNoteSound(blackKeys[blackKeyIndex]);
  })

Try it for yourself and have fun. I hope this was helpful. Thank you! Happy learning.

Creating a Date object.

We could create a date object using the new keyword as shown below.

const todayDate = new Date();
console.log("Today's date is ", todayDate);

So, from the above code snippet, when the Date() constructor is called, it returns a Date object.

Some of the popular instance methods.

It totally depends on the requirement of which method to use. Whichever method makes your life easy :)

1. getDate() - returns the day of the month, of the date passed.
2. getFullYear() - returns the date year in YYYY format, of the date passed
3. getMonth() - returns the month of the date passed, in numeric format.
4. getHours() - returns the number of hours of the date passed, according to universal time.
5. getMinutes() - returns the minutes of the date passed, according to universal time.
6. getSeconds() - returns the seconds of the date passed, according to universal time.
7. getMilliSeconds() - returns the milliseconds of the date passed, according to universal time.

There are many more instance methods that you can check here.

There are some set methods that could be used to set the date in different formats based on requirements. These set methods are based on local time and the one it was initially created. Let me list a few popular set methods below.

1. setDate()
2. setUTCDate()
3. setUTCMilliseconds()

Also, I have shared a few methods below, that I have used often in my development journey.

1. toLocaleString() - returns a string with locality-sensitive (reads from system clock) representation of the date. This method accepts some interesting attributes too.
2. toDateString() - returns the date portion of the date in string format.
3. toTimeString() - returns the time portion of the date as a string.
4. toUTCString() - returns the date in string format based on UTC timezone.

You might be wondering why we need so many methods to convert date objects into strings of different formats. Well, it makes it easy for us to retrieve human-understandable strings and for developers, it is easy to play/manipulate the strings.

Real-time usecase:

Yesterday, someone reached out to me asking if I could help them solve a date issue in javascript that needs to be passed in Bhoomi. He said that the script would receive the in-time of a student in the class and the duration he has attended the class. The expected output is the out time of the student. This is pretty straight forward right? Well yes, and I gave the below script.

const getOutTime = (inTime, duration) => {
    const inTimeMS = new Date(inTime).getTime();
    const durationMS = parseInt(duration) * 60 * 60 * 1000;
    const outTime = new Date(inTimeMS + durationMS); //this is in MS(milli seconds)
    return new Date(outTime).toLocaleString(); 
}

const output = getOutTime('9/26/2022 7:20', 2.5);
console.log(output);

Run this on your browser console and pass different arguments to getOutTime() to check the output. I have a couple of other assignments for you for the above function.

1. You could slice the seconds from the output date-time string, and get the format - 'DD/MM/YYYY HH:MM'
2. Try to set the time of the in-time of students in a specific time-zone with and without using the timeZone attribute of the toLocaleString method.

I hope this was helpful. Thank you! Happy learning.

How does it work?

Eslint is a linter for ECMAScript. It parses raw code into Abstract Syntax Tree. And this is used for forming the lint rules. Having said that, it is flexible and configurable. You can either install it as a node package in your project or as an extension on your IDE.

How can we configure Eslint for our project?

There are multiple ways in configuring the Eslint for our project. Using YAML files, JSON files, or js files. In my case, I found this configuration in a work project and then explored the same to understand it better. Install eslint using npm or yarn, any package manager, and define a configuration file. Create an eslintrc.js or eslintrc.json or eslintrc.yaml file to write your rules. A basic JSON configuration file looks something like the one below.

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        // enable additional rules
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],

    }
}

Example Use Case :

For react projects that use react above v17, eslint is added as a dependency. Hence it yells at us saying that the 'React' must be in scope when using JSX . This message has led me to learn more about eslint. I wasn't writing my Browser Router in JSX in first place and it took about 15 minutes for me to understand that this was optional and that I could avoid this bug by simply switching off some rules in eslint. In order to do that, navigate to node-modules in your IDE(V S Code in my case). Find the 'eslint-config-react-app' module and open its index.js file. Here you would find some rules with respect to how it is configured for the current react project. Switch off the below rules to avoid the above-highlighted error.

I found this interesting article about creating your own custom eslint config package here.

Refer to the official documentation to learn more and explore options to experiment in your project.

I hope this was helpful. Thank you. Happy Learning!