DEV Community: Jaelyn Lee

How to make programming a habit in your life

Jaelyn Lee — Sun, 16 Jun 2024 09:21:45 +0000

Hi Devs,

As a graduate developer trying to get my foot in the door of the IT industry, making programming a habit is crucial.

You need to consistently make commits to your GitHub, work on new projects with the new tech stack you learn, update your portfolio and so on! But I always think, "Why did I end up scrolling on my phone all day? I've wasted my time again."

Why is it so hard to make programming a habit and how can we change our bad habit into a good one?

We first need to know what a habit is.

According to the Oxford Dictionary, a habit is a settled or regular tendency or practice, especially one that is hard to give up.

In his book, The Power of Habit, Charles Duhigg defines a habit as an unconscious action, such as brushing your teeth after a meal, grabbing a coffee before work, or biting your fingernails.

Habits consist of 3 elements:

1) Cue

First, habits are triggered when there is a cue that causes a person to act on a specific behaviour. A cue is an event that triggers a routine. It can be defined by time, an emotional state, a location, or an action. For instance, when boredom strikes, you might find yourself leaving your desk to look for someone to chat with.

2) Routine

Second, habits are formed by daily routines or actions that satisfy reactions to certain cues. For the example I explained above, the routine (a.k.a. action) is chatting with your colleagues.

3) Reward

Lastly, habits are followed by internal rewards that help people feel more at ease. The reward of having a chat with colleagues is feeling awake and more energized.

Here is a diagram to visually see how a habit works.

So, how can we change our habits into better ones?

Cue and Reward are more about internal feelings and reactions so by changing your routine to one that gives the same reward, you can easily switch the habits you hate into habits you are proud of.

For instance, instead of drinking coffee or eating snacks to stay awake, you can go for a walk or stretch your body. These will give you the same reward from the same cue and your brain will be satisfied as it is getting the same reward it expected. (Easy, aye?)

I get all of that. How can we apply this to make programming a habit?

First, establish a regular cue, something you do daily, such as waking up, before lunch, or before going to bed.
Next, create manageable routines, such as coding for 30 minutes, learning AWS for 30 minutes, or solving a Leetcode problem.
The most crucial part of forming a habit is the reward 🏆! For instance, after coding for 30 minutes, you could make yourself breakfast or have a chocolate bar. Your brain and body will associate these rewards with the routines, encouraging their completion.

Additional tips to make good things a habit

1) Plan your tasks in smaller pieces

If you have big tasks to complete, you will feel overwhelmed before even starting. Break them down as small as possible and cross them out as you finish them! You will feel a good sense of accomplishment.

2) Prioritize your work

Finish important & complex work in the morning, and complete creative work in the afternoon. People like Beethoven and Einstein, who have great achievements in history, tend to finish complex and time-consuming jobs in the morning and spend some time in the afternoon to recharge and do some creative jobs.

3) Work on something that makes you excited and interested

If things are what you truly enjoy and are interested in, it will become a habit very fast before you realise it. So find something that makes you excited and joyful.

Here's my summary of how to make programming a habit. I hope you found it helpful!

Maintaining a learning mindset during tough times can be challenging, but I believe consistent effort pays off.

Stay tuned for more valuable information soon.

What is Event Bubbling and how we can handle this?

Jaelyn Lee — Mon, 18 Dec 2023 20:46:25 +0000

Hi Devs,

Have you all heard about Event Bubbling? Recently, someone asked me if I knew about this concept, and I had no idea what it was! They were also asked about it in an interview and couldn't answer. So, I decided to research and summarize the definition, as well as how we can use it in real code.

Shall we start our deep dive into it?

What is Event Bubbling?

Event Bubbling is a concept in the DOM (Document Object Model). It occurs when an element receives an event, and that event bubbles up to its parent and ancestor elements in the DOM tree until it reaches the root element.

As you can see from this diagram, if button is clicked, all events will be propagated until it reaches the root element. Event bubbling is the default behavior for events but can be prevented in certain cases.

Let me give you some examples to help you understand better.

Of course, I am too lazy to write code, so I asked ChatGPT to generate it for me, and it did a great job, to be honest!

So, just like the diagram above, the elements are stacked on top of each other like a set of Russian dolls.

By clicking the Inner Button, the logs on innerButton, middleDiv, and outerDiv will be executed sequentially. And this is Event bubbling! A very straightforward concept, right?

Importance of understanding Event bubbling in Web development

Think of event bubbling like throwing a pebble into a pond. When you toss the pebble, ripples spread outward from where it landed. Event bubbling works similarly on web pages. When something happens, like a click on a button, that "event" ripples through the different parts of a webpage, starting from where it happened and moving up to the main part of the page.

Controlling how things flow: Just like you can predict where ripples go in a pond, understanding event bubbling lets developers decide how things react when you click or interact with something on a webpage.
Smart handling for many things at once: Imagine if you could clap once and have everyone in a room who heard it react in a certain way. Event bubbling lets developers set up reactions for many things (like buttons) all at once without having to do it for each one individually.
Building pieces that work everywhere: It's like creating LEGO pieces that fit together perfectly. With event bubbling, developers can make these parts (components) that know how to handle their own events. Then, they can use these pieces in different parts of a website without having to rebuild them each time.
Making websites fun to use: Event bubbling helps in creating web pages that respond when you do something, like clicking a button or dragging an item. It's what makes websites feel interactive and enjoyable to use.

In short, understanding event bubbling helps developers control how events move around a webpage, handle lots of things efficiently, make reusable parts, and create fun and interactive websites.

How can we handle this Event bubbling?

What if you want to stop this from happening?

There are several ways to handle Event bubbling, but I am going to explain 2 methods today.

stopPropagation()

The stopPropagation() method prevents further propagation of the current event. However, if an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute. In other words, event.stopPropagation() stops the upward movement, but all other handlers on the current element will still run.

preventDefault()

If you want to stop those behaviors, you should use the preventDefault() method.

The preventDefault() method is used to stop a specific action from happening when an event occurs. Normally, when you interact with something on a webpage (like clicking a link), the browser does something automatically (like navigating to a new page). But with preventDefault(), you can tell the browser not to do that automatic action. It's like saying "Hey browser, don't do the default thing, I want to do something else instead."

Just keep in mind that using preventDefault() should be done carefully and only when necessary because it can change how a webpage or application behaves.

Let’s have a look at a simple scenario to better understand.

There are 3 functions to explain event handling methods.

So what do you think will happen if the button is clicked?

As the button is stopping the propagation from going up to the parent elements, the alert message on the outer container will not be executed.

What about preventDefault()?

It will prevent us from navigating to the link and will execute the remaining action.

The difference between e.preventDefault() and e.stopPropagation() is that e.preventDefault() is used to stop a specific action from happening when an event occurs, such as preventing a link from navigating to a new page. On the other hand, e.stopPropagation() stops the propagation of the event to parent and ancestor elements, but other event handlers on the current element will still execute.

I hope this post was helpful for your coding. Happy coding, everyone!

How to use React Query and How to fix minor issues from that?

Jaelyn Lee — Mon, 07 Aug 2023 20:36:21 +0000

Hi Devs,

Today, I want to share my knowledge about an alternative way to fetch data and render it on pages using React Query. I used Redux before to manage states and fetch data but it requires too much code, which can be ridiculous. In contrast, React Query is an excellent alternative that I fell in love with immediately even though I am still learning it.

Let me explain why you should use React Query and how to fix minor issues with it.

Why use React Query?

Caching and retrying are easier!

When you use useEffect to fetch data, you declare error, loading, and data using useState. However, this is not reusable and makes your code too long. You may consider declaring it as a global state, but this approach seems a bit dubious and messy.

React Query can resolve all these issues, including handling cache and retrying.

What is caching, by the way?
In computing, a cache is a high-speed data storage layer that stores a subset of data, typically transient in nature. This allows future requests for that data to be served up faster than accessing the data's primary storage location. Caching enables you to efficiently reuse previously retrieved or computed data.

How can we cache data in React Query?
TanStack Query has excellent documentation that explains everything a newcomer needs to know. What a wonderful library!

Check this link out if you want to deep dive into it and I highly recommend you to read.

https://tanstack.com/query/v4/docs/react/guides/important-defaults

By default, React Query saves data as a stale status, requiring a fresh data check. However, by setting up a staleTime we can define how long it will contain data as a fresh status.

Let's check with actual code.

const {
    isLoading,
    error,
    data: products,
  } = useQuery(
    ['products', checked],
    async () => {
      console.log('...fetching products')
      return fetch(`data/${checked ? 'sale_' : ''}products.json`).then((res) =>
        res.json()
      )
    },
    {
      staleTime: 1000 * 60 * 5, //5 mins
    }
  )

In this code sample, the staleTime is set as a third parameter when fetching data, which saves the data as defined.

By installing the dev tool provided by React Query, you can check the data status and which data is updated. This makes it easy to manage bugs and debug errors, and prevents unnecessary network requests.

While I have briefly covered React Query today, I plan to explore it more in-depth and cover other related topics as well.

Thank you for taking the time to read this, and happy coding! 😎