teleren/devto huggingface dataset:
Mutable or Immutable: Understanding JavaScript's Yin and Yang
Tags: javascript, cleancode, webdev, tutorial
Published: 2023-05-01 16:21:16

As a JavaScript developer, understanding the concepts of mutability and immutability is crucial. These concepts refer to the ability of an object to be changed or not. Mutability means that an object can be altered, while immutability means that an object cannot be changed once it is created.

Let's explore these concepts further and see how they can affect our code.


##Mutability

In JavaScript, most objects are mutable by default. This means that you can change their properties, add new properties, or even delete properties. For example, consider the following code:


```javascript

let person = {
  name: "John",
  age: 30,
};

person.age = 31;
console.log(person);


```


In this example, we are changing the value of the age property of the person object. This is possible because objects in JavaScript are mutable.



While mutability can be useful in certain cases, it can also lead to unexpected behavior. Consider the following code:

```javascript
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);

console.log(arr1); // Output: [1, 2, 3, 4]

```

In this example, we are creating two arrays `arr1` and `arr2`. We then assign `arr1` to `arr2`, which means that they both refer to the same object. We then add a new element to `arr2`, which also modifies `arr1` because they are the same object. This can lead to unexpected bugs in our code.



##Immutability

Immutability, on the other hand, means that an object cannot be changed once it is created. In JavaScript, primitive types such as strings and numbers are immutable. This means that you cannot change their value once they are created.

For example, consider the following code:

```javascript
let str = "Hello";
str[0] = "h";
console.log(str); // Output: "Hello"

```

In this example, we are trying to change the first character of the `str` variable from "H" to "h". However, since strings are immutable in JavaScript, this has no effect on the value of `str`.

Immutability can be useful in certain cases because it can help prevent unexpected changes to our code. For example, consider the following code:

```javascript
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4];

console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3, 4]

```

In this example, we are creating a new array `arr2` by using the spread operator (...) to copy the elements of `arr1` and adding a new element to the end. This creates a new array and leaves the original `arr1` unchanged.


###Conclusion

Understanding the concepts of mutability and immutability is important for writing reliable and bug-free code in JavaScript. While mutability can be useful in certain cases, it can also lead to unexpected behavior and bugs. Immutability, on the other hand, can help prevent unexpected changes to our code and make it more reliable.
Exploring New Languages & Tools: What's on Your List?
Tags: discuss, beginners, codenewbie
Published: 2023-05-01 16:07:18


As a developer, there are always new programming languages and tools to explore. What are some languages or tools that you're curious about but haven't had the chance to use yet?

Let's share our programming wish lists and maybe inspire each other to try something new!

---

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

If you aren't exploring or posting over on the #codenewbie tag, find the tag here!

{% embed [https://dev.to/t/codenewbie](https://dev.to/t/codenewbie) %}

Image by <a href="https://www.freepik.com/free-photo/problem-solving-concept-with-tool-box_34200668.htm#query=new%20things&position=45&from_view=search&track=robertav1_2_sidr">Freepik</a>
AI-created music is here, now what?
Tags: discuss, music, ai
Published: 2023-05-01 16:06:22

About half a year ago I started up a discussion called _[How far off is AI created music?](https://dev.to/music-discussions/how-far-off-is-ai-created-music-54dp)_

{% embed https://dev.to/music-discussions/how-far-off-is-ai-created-music-54dp %}

Well, apparently it wasn't far off at all... arguably it was already happening, but now it's newsworthy.

Just look at the viral release of ["Heart on My Sleeve"](https://en.wikipedia.org/wiki/Heart_on_My_Sleeve_(ghostwriter977_song)), a track dropped by the anonymous ghostwriter977 that uses AI-generated vocals to mimic Drake and The Weekend, and the subsequent action by Drake and The Weekend's record label UMG to order the song taken down from platforms like TikTok, Spotify, YouTube, SoundCloud, and others. There's a good breakdown of the situation in @scofieldidehen's recent post _[AI in Music: The Future of Music](https://dev.to/scofieldidehen/ai-in-music-the-future-of-music-25j6)_.

{% embed https://dev.to/scofieldidehen/ai-in-music-the-future-of-music-25j6 %}

So, I'm curious what y'all think about all this... do you see AI-generated music that mimics an artist's voice, writing style, and instrumentation as morally wrong? Or, on the other hand, do you know of anybody out there who is using AI to generate original music rather than trying to closely mimic existing music? What other thoughts do you have on all this?
Avoid This Common React Hook Antipattern
Tags: react, typescript, javascript
Published: 2023-05-01 16:04:45


When displaying synchronous data in React components, `useState` and `useEffect` are antipatterns that should be avoided. Using `useState` and `useEffect` to compute synchronous values will lead to a sub-optimal user experience and subtle bugs that can be hard to debug.

## The Problem

Consider the following component:

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

interface Props {
  firstName: string;
  lastName: string;
}

function MyComponent(props: Props) {
  const { firstName, lastName } = props;
  const [fullName, setFullName] = useState('');

  useEffect(() => {
    setFullName(`${firstName} ${lastName}`);
  }, [firstName, lastName]);

  return (
    <span>{fullName}</span>
  );
}
```

In this example we are computing `fullName` from two props: `firstName` and `lastName`. Even though `firstName` and `lastName` are both available at render time, we are passing them both into a `useEffect` hook. Inside the `useEffect` hook, we are then concatenating the values and then calling `setFullName` with the concatenated value.

This is problematic for several reasons:
- `useEffect` runs _after_ the component renders and displays a value to the user. This means that the user will always see a stale value before the updated value is shown to the user.
- To see our computed value, we have to always render our component twice. On the first render, we display a stale value. When the `useEffect` runs, it calls `setFullName` which will trigger _another_ render.
- From a developer perspective, the logic is hard to read and hard to follow.


## The fix

The fix for this pattern is simple. Instead of computing the values in a `useEffect`, we can simply compute the values as part of the "natural" rendering process:

```tsx
import React from 'react';

interface Props {
  firstName: string;
  lastName: string;
}

function MyComponent(props: Props) {
  const { firstName, lastName } = props;
  const fullName = `${firstName} ${lastName}`;

  return (
    <span>{fullName}</span>
  );
}
```

Computing the value during render has the following advantages:
- Our component is _much_ simpler. We were able to completely eliminate any hook usage in our component.
- The user will never see a stale value. Everytime one of our props changes, it will be immediately reflected in the DOM.
- We've eliminated an extra render cycle.

## The takeaway

When you need to display computed value from synchronous data in React, it is almost always easier and safer to just compute the value in the component's body without `useEffect` or `useState`. This will lead to simpler components and a better user experience!

## More Reading

Interested to learn about Typescript? [Understanding Typescript’s Type Predicates](https://languageimperfect.com/2019/08/05/understanding-typescript-type-predicates.html)
Preparing for Code Challenges
Tags: productivity, react, beginners, javascript
Published: 2023-05-01 15:24:45

We all know learning how to code is not easy, it requires focus, patience, and consistency. Attending a 15 week coding bootcamp has helped me adapt new learning methods. In phase 2 of my bootcamp I figured out the best method that helped me prepare for my code challenge.

Let me begin by saying that preparing for a code challenge is **stressful!** I remember forking and cloning a practice code challenge and sitting there for 15 minutes staring at the screen unsure of where to begin.

---

I had to take a step back and figure out a method that works for me, hopefully this can help others that may be feeling the same way.

---


<u>**Here are a few tips that helped me get through phase 2 of learning React:**</u>


1. Watch the entire practice coding challenge video lecture without taking any notes 


2. Take a moment to watch the video lecture a second time and this time code along 

3. As you code along take screen shots of your code and write a short summary or bullet points of what you just learned
_(This helped me see what were some of the concepts I was struggling with)_

4. After you grasp the concepts attempt a different practice coding challenge

5. Time yourself when you are completing a practice code challenge

6. If possible complete a coding challenge with a team of 2-3 people (one person shares screen and collectively complete it)

7. If you are still struggling, narrow down what are some of the concepts you are struggling with

8. Having a solid foundation in Javascript basics will make it easier to understand React's syntax and programming concepts

<u>_Examples below:_</u>


![CC 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a40r7p9x5s13oxuhq5p.PNG)

![CC 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvxwpozc17kanek1matv.PNG)


---


<u>**Start small and build up:**</u>


When faced with a coding challenge, it can be tempting to dive straight in and try to solve the problem in one go. However, this can often lead to frustration and a lack of progress. Instead, start by breaking the challenge down into smaller parts and tackling each one individually. Build up your solution step by step. This approach will help you stay focused and motivated, and will also make it easier to identify and fix errors.



<u>**Break down the problem into components:**</u>
React is all about building reusable components and [understanding the flow of information](https://dev.to/cindyhernandez/information-flow-in-react-14c5). When faced with a coding challenge, try to think about the problem in terms of components. Break down the problem into smaller parts and build components for each one.
What are your Goals for the week of May 1st?
Tags: motivation
Published: 2023-05-01 15:17:58

## What are your goals for this week?
 
It's already May. It's still cool here I hope it stays that way a while longer.

- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week?
- Did you meet your goals last week?


I'll start with how I did last week.

### Last Week's Goals

- [:white_check_mark:] Continue Job Search.
  * Do great on interview get to next round. Waiting to hear back. 
  * Job Seminar
- [:white_check_mark:] Interview prep going to do some coding exercises and reading.
- [:x:] Finish portfolio refactor.
- [:x:] Blog
- [:x:] Events
  * Attend Virtual Coffee Thursday. Had a conflict.
  * Other VC events if I can. No lunch and learn last week.


### This Week's Goals

- Continue Job Search.
- Finish portfolio refactor.
- Blog
- Content updates on a couple sites.
- Events
  * Attend Virtual Coffee Thursday. 
  * Other VC events if I can.

### Your Goals for the week


You've read my goals so I'll throw that question back to you.

What are your goals for the week?

```
-$JarvisScript git push
Information Flow in React
Tags: react, beginners, javascript
Published: 2023-05-01 15:11:26

## What is information flow in React?

Information flow refers to the way data is passed around between components in a React application. In React data flows in one direction - _from the parent component to its child components_. This is known as <u>unidirectional data flow</u>.

---


Since data only flows in one direction, it's easier to track where it comes from and where it's going. This makes the application more predictable and easier to maintain over time.

---

## How does information flow work in React?

In React, data is passed from the parent component to its child components through props. Props are read-only and cannot be modified by the child component. This means that if a child component needs to modify the data, it needs to notify its parent component by passing a callback function


---
_<u>Example:</u>_

Here we have a parent component called _App_ and the child component below called _Header_.

App has a state variable called isDarkMode, which functions as a boolean (true or false).

The onToggleDarkMode function and isDarkMode state variable is then passed to the Header component as a prop.

---


![App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfebugx7pu6igfsms1g7.png)

When the button is clicked it calls the onClick function that we see in the header component that allows the user to toggle from light to dark mode.


---


![Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is7mhc3e7scalyscfdzl.png)


## Benefits of unidirectional data flow:

1. With data flow in one direction it makes it easier to debug and maintain overtime

2. Components can be reused in different parts of the application

3. Unidirectional data flow makes it easier helps make it easier to break the application into smaller and manageable components.


---

**Sources:**

1. React Information Flow, Flatiron Learning Module
😍 Front-end developer's gospel, the PDJ extension takes you on a journey through the world of npm packages!
Published: 2023-05-01 14:54:28

## Intro

PDJ is a browser extension that can help front-end developers easily view the complete dependency relationship of npm packages. It has the following advantages:

1. 🚀 Improved development efficiency: Quickly understand the complete dependency relationship of npm packages, eliminating the tedious manual search process and improving development efficiency.
2. 🌟 Display detailed information: Display basic information and dependency relationships of each dependency package, allowing you to have a clearer understanding of the entire dependency tree.
3. 💡 Provide convenient way: View the introduction of dependency packages directly in the browser, allowing you to obtain detailed information of npm packages without opening additional pages.
4. 💪 Simple and easy to use: Search and install PDJ in Chrome Web Store, just click the PDJ icon to open the page for finding npm packages. If you are browsing a GitHub page, PDJ will directly help you search for the corresponding npm package.

If you are a front-end developer, why not try PDJ? It will help you easily understand the dependency relationship of npm packages and improve your development efficiency. 😉

## How

PDJ will check whether the GitHub repository page contains a package.json file. If it does, you can directly click on the browser extension icon to open and view it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn75o92xjc5ttvavsb0g.png)

The PDJ panel displays the project's introduction, npm download count, GitHub star count, and its dependency packages. You can also click on the dependency package to view its detailed introduction.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go11julgsf057cekvalr.png)

You can also directly click on the extension icon on the package.json page to view it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmw2pfwcm46l3ojqi2h4.png)

In addition, you can open PDJ on any page and click on the search🔍icon to search for the npm package you want to view.
Test
Tags: swift
Published: 2023-05-01 14:50:42

Test

```
extension TaskListViewController {
  override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    taskList.count
  }
  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
    let task = taskList[indexPath.row]
    var content = cell.defaultContentConfiguration()
    content.text = task.title
    cell.contentConfiguration = content

    return cell
  }
```
83. Remove Duplicates from Sorted List leetcode solution in java
Tags: java, leetcode, algorithms, linkedlist
Published: 2023-05-01 14:47:58

```
/**
 * Definition for singly-linked list.
 * public class ListNode {
 *     int val;
 *     ListNode next;
 *     ListNode() {}
 *     ListNode(int val) { this.val = val; }
 *     ListNode(int val, ListNode next) { this.val = val; this.next = next; }
 * }
 */
class Solution {
    public ListNode deleteDuplicates(ListNode head) {
        ListNode temp = head;
        if(temp==null){
            return temp;
        }else if(temp.next==null){
            return temp;
        }
         ListNode prev = temp;
        temp = temp.next;
        while(temp!=null){
            if(temp.val == prev.val){
                prev.next = temp.next;
                temp = temp.next;
            }else{
                prev = temp;
                temp = temp.next;
            }
        }
        return head;
    }
}
```
What's This Tutorial Hell !
Tags: webdev, javascript, beginners, programming
Published: 2023-05-01 14:44:31

Are you stuck in a cycle of endlessly watching tutorial videos or reading articles, but still feel like you're not making any progress in your skills? If so, you might be in what's known as "tutorial hell". In this blog post, we'll explore what tutorial hell is, why it happens, and most importantly, how you can escape it.

What is Tutorial Hell?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvlv924a9y69feqftyub.png)
Tutorial hell is a term used to describe a common phenomenon that occurs when someone spends too much time watching tutorials or reading articles instead of practicing a skill. It's like getting stuck in a cycle of learning without doing. You may feel like you're making progress because you're consuming a lot of information, but in reality, you're not making much headway toward actually mastering the skill.

Why Does Tutorial Hell Happen?
Tutorial hell happens for a few reasons. Firstly, it's easy to fall into the trap of thinking that learning more information will automatically translate to skill mastery. Secondly, it's tempting to think that watching or reading more tutorials is progress in itself. Finally, it's often intimidating to start practicing a skill because it can be challenging and involve making mistakes.

How to Escape Tutorial Hell?
Set Clear Goals: The first step to escaping tutorial hell is to set clear goals for yourself. Decide what you want to achieve and create a plan to get there. Make your goals specific, measurable, achievable, relevant, and time-bound.

Focus on Application: The next step is to shift your focus from consuming information to applying it. Start with small, achievable tasks and gradually increase the difficulty as you progress. For example, if you're learning to code, start by creating a simple program and gradually move on to more complex projects.

Practice Consistently: Consistency is key to escaping tutorial hell. Practice regularly, even if it's just for a few minutes a day. It's better to practice a little bit each day than to binge on tutorials once a week.

Embrace Mistakes: Making mistakes is an essential part of the learning process. Don't be afraid to make mistakes; instead, embrace them as opportunities to learn and improve.

Seek Feedback: Finally, seek feedback from others. Feedback can help you identify areas where you need to improve and give you the motivation to keep going.

Conclusion
In conclusion, tutorial hell is a common trap that many people fall into when trying to learn a new skill. The good news is that you can escape it by setting clear goals, focusing on application, practicing consistently, embracing mistakes, and seeking feedback. Remember, learning is a journey, and the only way to truly master a skill is to practice it consistently over time.
From Mechanical Engineering to Software Engineering: Why I Transitioned into Tech
Tags: javascript, startup, devjournal, beginners
Published: 2023-05-01 14:44:00

As the world is rapidly transforming into a digital market, it's evident that information and communication technology (ICT) and digital tech are changing the way people interact with each other in all facets of life. Ever since I was young, I've always had a fascination for computers, which led me to prefer Computer Science over other subjects in school. Memories of spending time in the computer lab still bring me immense joy to this day.

However, when it came time for me to choose my undergraduate degree, I decided to go for Mechanical Engineering instead of Computer Science, which was a decision I regretted. I tried out various fields over the years, including content writing, SEO, freelancing, WordPress design, and blogging, but none of them seemed to satisfy my sense of purpose.

In 2020, I decided to download the SoloLearn app and learn Python on my own, completing it in just four months. However, I still couldn't figure out how to apply my newfound knowledge to practical solutions. I eventually stopped coding until I had a tech business idea that I couldn't bring to life due to my lack of technical skills.

That's when I finally embraced the idea of transitioning into tech. I taught myself basic HTML, CSS, and some parts of JavaScript using online resources like YouTube. While I know I still have a lot to learn, I appreciate the growth I've gained along my tech journey.

The turning point was attending the TxE Tech Summit in Enugu State, where the speakers reignited my passion for tech. After repairing my faulty laptop, I began coding with the little knowledge I had, and the rest is history.

My motivation for transitioning into tech was mainly due to the fact that my inadequate tech skills prevented me from bringing my business startup idea to life. However, the vast array of opportunities available in the tech space also motivated me. I'm confident that I can make a decent living as a tech practitioner while scaling my startup idea in the background. 

More importantly, I decided to dive into tech full time because computers are my passion, and building a career around ICT and computers will satisfy my insatiable sense of purpose. It's clear to me that tech is the future of civilization.