teleren/devto huggingface dataset:
Avoiding Code Chaos: The Broken Windows Principle in Software Development
Tags: software, programming, development, discuss
Published: 2024-04-14 18:39:01

In the world of software development, one principle that resonates deeply with programmers is the Broken Windows Theory. This theory was originally proposed by James Q. Wilson and George L. Kelling in the realm of urban sociology and suggests that visible signs of disorder in a community can lead to anti-social behavior. But how does this theory apply to software engineering?

The Broken Windows Theory has a compelling parallel in the world of code. Neglected code elements within a software project such as outdated comments, unused variables, or inconsistent formatting can be considered as "broken windows" of code. If left unaddressed, they can lead to larger issues down the line.

Just as a single broken window in a building can signal to vandals that no one cares about the property, a neglected codebase can communicate to developers that maintenance and cleanliness are not priorities. This can result in decreased developer morale, increased technical debt, and reduced overall productivity, which is a scenario all too familiar to software teams.

To avoid the Broken Windows Theory in their codebase, software engineers need to be proactive in maintaining a culture of cleanliness. Regular code reviews, refactoring sessions, and the use of automated tools for code quality assurance are essential strategies for keeping "digital streets" clean and orderly. Moreover, fostering a team culture that values accountability and takes pride in the quality of its code can go a long way in preventing the accumulation of "broken windows."

By recognizing the importance of maintaining order and cleanliness in code, developers can mitigate the risk of larger issues arising and ensure the long-term health and sustainability of their projects.

Do you have any tips or best practices to share on how to maintain a clean software environment in your projects? I'd love to hear your thoughts and experiences!

---

- [Broken Windows Theory, *Wikipedia*](https://en.wikipedia.org/wiki/Broken_windows_theory)
- [Cover Photo from Brett Jordan, *Unsplash*](https://unsplash.com/es/@brett_jordan)
Cloudflare AI Challenge
Tags: cloudflarechallenge, devchallenge, ai, workersa
Published: 2024-04-14 18:29:14

This is a submission for the 

**_> Cloudflare AI Challenge._**

Demo
⭐ Check it out here!
https://ai-client-check1.pages.dev/


**My Code
**💻 If you want to see my code, here it is:
[code](https://github.com/imvivekvermaa/workers)

**Multiple Models and/or Triple Task Types**

I used triple task types (see the tabel) and multiple models (text generation), here is the list:

**Models used-**
Text genration- @cf/meta/llama-2-7b-chat-fp16
text to Image- @cf/stabilityai/stable-diffusion-xl-base-1.0
Day 14/366
Tags: 1percentplusplus, 100daysofcode
Published: 2024-04-14 18:28:27

## Day 14/366 of #1PercentPlusPlus

🚀 **Today's Learning:**

🌟 DSA

- Height of Binary Tree
- Determine if two trees are identical

🌟 Dev

- Promises in JS

🔍 **Some Key Highlights:**

DSA

Height of Binary Tree:
To calculate the height of a binary tree, we begin traversal using DFS. At each node, the height is determined as 1 plus the maximum of the heights of its left and right subtrees. We recursively compute this for all nodes, maintaining a maxHeight variable to track the maximum height encountered.

Determine if two trees are identical:
We utilize a preorder traversal approach to determine if two trees are identical. Starting from the root, we compare corresponding nodes of both trees. If at any point the nodes differ, or if one tree has more nodes than the other, we conclude that the trees are not identical. Otherwise, we continue recursively checking the left and right subtrees until all nodes are compared. If the traversal completes without finding any differences, we affirm that the trees are identical.

DEV

Promises in JavaScript provide a way to handle asynchronous operations more effectively. Using promises follows a pattern similar to DFS traversal.

When working with promises, you initiate an asynchronous operation and get back a promise object. This object represents the eventual completion (or failure) of the operation. 

You can then attach callbacks to the promise using `then()` method. These callbacks will be invoked when the operation succeeds or fails.

The structure is akin to preorder traversal:
- You start by initiating the asynchronous operation.
- Then, you attach a callback to handle the successful completion (akin to processing the current node).
- Next, you may attach another callback to handle any errors that might occur during the operation (analogous to handling the left subtree).
- Finally, you continue with any further processing or chaining of promises (similar to handling the right subtree).

Through this approach, promises enable more structured and manageable handling of asynchronous code in JavaScript.

 #100daysofcode #1percentplusplus #coding #dsa
How to use Semantic commits properly
Tags: git, github, beginners, programming
Published: 2024-04-14 18:10:48

Semantic commit messages provide a structured and standardized way of communicating the nature of changes made in a commit. By adhering to a specific format, such as the Angular convention, developers can easily understand the purpose and impact of each commit within a project's version control history. Below are examples of semantic commit messages along with their descriptions:

## `feat`: Adding a new feature

```markdown
*Add user authentication*

Adds a new middleware to handle user authentication in the system.
```

## `fix`: Fixing bugs

```markdown
*Fix typo in login form*

Corrects a small typo issue in the HTML code of the login form.
```

## `chore`: Maintenance tasks

```markdown
*Update project dependencies*

Updates dependency versions to the latest stable releases.
```

## `docs`: Updating documentation

```markdown
*Update API documentation*

Includes additional examples and details on using the REST API in the README.
```

## `style`: Code style improvements

```markdown
*Apply consistent code formatting*

Standardizes code formatting using prettier to ensure consistency.
```

## `refactor`: Code refactoring

```markdown
*Refactor authentication logic*

Reorganizes code to improve readability and maintainability.
```

## `test`: Adding or modifying tests

```markdown
*Add unit test for user service*

Includes a new unit test to ensure the integrity of the user service.
```

## `build`: Changes affecting the build system or external dependencies

```markdown
*Update Node.js version to 14.0.0*

Updates the Node.js version to the latest available LTS version.
```

## `ci`: Changes related to configuration and continuous integration

```markdown
*Set up GitHub Actions for test execution*

Defines a workflow in GitHub Actions to automate project testing.
```

These examples demonstrate how semantic commit messages can provide clarity and context to the changes made in a project. While the specific keywords and formats may vary, maintaining consistency and informativeness in commit messages is essential for effective collaboration and project management.
How to implement an infinite canvas using React Konva?
Tags: react, canvas, npm, webdev
Published: 2024-04-14 17:51:23

I'm trying to create an infinite canvas using React and React Konva library to allow users to freely draw and scroll across a seemingly endless workspace. I've looked into various methods but haven't found a clear solution. 

Can someone provide a step-by-step guide or example code on how to implement an infinite canvas using React and Konva? I'd appreciate any help or direction to achieve this functionality.
What's Really Going on Behind the Scenes of Loading Bars? 🤔💡
Tags: tutorial, discuss, productivity, programming
Published: 2024-04-14 17:45:49

_We’ve all been there staring at a loading bar that seems to be stuck in place. But did you know that loading bars are secretly multitasking behind the scenes? Here's what's actually happening when they appear to be stuck._

### The Hidden Sub-processes 😲

When the bar is halted, your system is busy managing a vertical subprocess—a side quest your main program has embarked on. It could be fetching data, compressing files, or performing complex calculations, all while you wait. So, when a game or application seems to freeze up, it might be juggling tasks rather than taking a break.

A Twitter user(@ahieiei) delved into this mystery using a 3D analysis tool and discovered that when a loading bar stops moving, it's often handling an intense background task that requires a lot of computational power. This is why the pace can slow down dramatically during the second half of a video game or large application launch.


![explaining the working of loading bars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r4daf3jvgr9g0gqy2k4.png)

But, what if we could make this experience a little more engaging? Imagine multi-dimensional loading bars that not only tell you how much progress has been made but also reveal what kind of work is being done behind the scenes. You might see tasks such as data retrieval, file management, and more, all visually represented on screen.



![explaining the working of loading bars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ochnpe1qygm6wvlzs87a.jpg)


As technology evolves, this kind of feature could become a standard, offering a peek into the secret life of loading bars. So next time you’re waiting, take comfort in knowing your system is busy at work, doing the heavy lifting so your experience can be smooth and enjoyable. Let’s look forward to a future where waiting on a loading bar is not just a pause, but an interactive insight into the process!What are your thoughts on the potential for more informative loading bars? Share your insights in the comments!!!!
🍞Building Toast with React-Toastify and Troubleshooting
Tags: webdev, react, opensource
Published: 2024-04-14 17:25:00

## Requirements

Here are the requirements of the `<Toast/>` UI that I defined

- It should render regardless of routing. Some of them should render on button clicks while the others should render right after fetching.
- It should pop up for 3 seconds and disappear.
- It should be placed on top of everything. Nothing should override it.
- It should be placed inside the Box on the desktop devices.
- There should be different texts based on contexts, such as:
  - The upload has been canceled.
  - Contact has been saved successfully.
  - Your account has been deleted successfully.
  - You've signed out of Majorfolio successfully.
  - We'll send you a verification email.

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

## Restrictions
- It should be in the top-level component since it should render regardless of routing.
- It seems hard to place Toast in the right position. It gets worse since there can be multiple Toast Messages.

Therefore, I decided to look into some libraries, and React-Toastify caught my attention.

## What React-Toastify offers
React-Toasitify
- stacks notifications
- supports swipe to close
- pause toast when the window loses focus
- support nice and tidy default animations
- can display a react component inside the toast
- sets Toast with `role="alert"` for accessibility

## Positioning Problem

`<ToastContainer/>` was set with `position="bottom-center"` prop and it was positioned in the wrong position.

- to be continued
The GenAI / LLM Dragon eating its own tail
Tags: llm, genai, ai
Published: 2024-04-14 16:29:56


![The GenAI/LLM Dragon eating its own tail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6nyu87v09fhqdc9kkpn.jpg)

The global surge of data generated by Artificial Generative Intelligence (AGI) or GenAI is massive. We are already witnessing a paradigm shift in content generation, especially in text and image generation. However, this GenAI has its own consequences.

## Unnoticed Consequences of GenAI
This blog uncovers the most unnoticed consequences that a layman usually does not think of, specifically the originality or liveness of the generated content itself. We are currently in the first generation of GenAI, especially for LLM. Almost all the content generated by these systems is trained and learned from publicly available internet sources, which are the work of real humans and carry a human’s touch of creativity, innovation, or thought process.

As mentioned in the first paragraph, both GenAI-assisted and pure GenAI content is circulating back to the public internet at a faster rate due to shorter content creation time compared to content generated solely by humans. With the current pace of advancements and the cutoff of training data, the LLM will be trained on or is already training on content created by itself. This can lead to a normalization of uniqueness or liveliness of the content itself.

## The Effects of GenAI impacting itself

- **Generative Echo Chamber**: This refers to the situation where LLMs trained on data generated by themselves echo the same nature of output, potentially amplifying polarized data in further generations of LLMs.
- **Model Autophagy Disorder (MAD)**: This phenomenon reveals how unchecked AI risks become detached from human needs through recursive self-feeding.

## So What’s Next:
There are research papers emerging to mitigate this consequences, as the GenAI realm is new, so are the challenges are new and unique, but the adoption rate of GenAI can outpace the mitigations.

So what to expect is there is always a chance of bias or echoing the same context in the generated outputs. Those who aware of this gray area in GenAI, will still uphold the real value of a human curated content.

> In short, want to convey the effects of GenAI, which may not behave the way you think.
What is Pointer?
Published: 2024-04-14 16:23:10

A pointer is a variable that stores the memory address of another variable. In JavaScript, pointers are often abstracted away, but they are still used behind the scenes to manage memory and references to objects or arrays.

Here are some key points about pointers:

### Types of Pointers:

1. **Null Pointer:** A pointer that doesn't point to any memory location. In JavaScript, this is represented by `null` or `undefined`.
2. **Dangling Pointer:** A pointer that points to a memory location that has been deleted or freed.
3. **Void Pointer:** A pointer that has no associated data type.

### Common Usage:

1. **Memory Management:** Pointers are used to manage memory dynamically, allocating and deallocating memory as needed.
2. **Data Structures:** Pointers are essential in implementing data structures like linked lists, trees, and graphs.
3. **Function Pointers:** Pointers can store the address of functions, allowing for more flexible and dynamic programming.
4. **Array and String Handling:** In languages like C and C++, pointers are used to access and manipulate arrays and strings efficiently.
5. **Passing by Reference:** In languages that support pointers (like C and C++), pointers are used to pass variables by reference to functions, allowing the function to modify the original variable.

### Pointer Arithmetic:

In languages like C and C++, pointers support arithmetic operations such as addition, subtraction, and comparison. This allows for efficient traversal of arrays and linked structures.

### Pointer in JavaScript:

In JavaScript, pointers are less explicit compared to languages like C and C++. Variables in JavaScript hold references to objects or arrays rather than direct memory addresses. For example:

```javascript
let obj1 = { name: 'John' };
let obj2 = obj1;  // obj2 is a pointer/reference to obj1

obj2.name = 'Doe';
console.log(obj1.name);  // Outputs: Doe
```

In this example, `obj1` and `obj2` both point to the same memory location (the same object), so modifying `obj2` also affects `obj1`.

### Summary:

- A **pointer** is a variable that holds the memory address of another variable.
- Pointers are used for memory management, data structure implementation, and more.
- JavaScript uses references to objects and arrays, which are similar to pointers but are abstracted away and managed by the language.
- Understanding pointers is essential for efficient memory management and data manipulation in low-level languages like C and C++, while in higher-level languages like JavaScript, pointers are abstracted to make memory management easier and safer.

Disclaimer: This article was created with the help of AI.
Learning AWS Day by Day — Day 36 — AWS Services — At a Glance — Part 2
Tags: aws, cloud, cloudcomputing, beginners
Published: 2024-04-14 16:21:56

Exploring AWS !!

**Day 36:**

**AWS Services — At a Glance — Part 2**

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

**AWS IOT:**
Aws has developed IoT specific services that assist to gather and send data to cloud.
AWS Greengrass: helps to operate data caching, messaging and local compute for connected devices in a safe way.
AWS IoT Platform: is a managed cloud platform that allows connected devices interact with other devices and cloud applications securely and easily. AWS IoT can support many devices and messages.
AWS IoT Button: is a programmable button that is based on Amazon Dash Button hardware. The WiFi device is effortless to configure. AWS IoT Button is offered to developers to use Amazon SNS, Amazon DynamoDB, Lambda, IoT and etc without writing device-specific code.

**Application services in AWS:**
Step Function: offers a graphical console to set up and visualize the components of application as a series of step.
API Gateway: fully managed service, that allows developers to create, publish, maintain, monitor and secure APIs easily at any scale. REST API — GET, POST, PUT.
Elastic Transcoder: Media Transcoding in cloud, businesses and developer could transcode or convert media files from source format into versions that will playback on device such as PC, Tablet and smartphones.

**Mobile Services in AWS:**
Allows to easily build advanced cloud powered applications from mobile devices. You might want to run the application on your preferred.
Front-End and Mobile on AWS: fastest way to build web and mobile applications.
What is BackTracking?
Published: 2024-04-14 16:21:45

Backtracking is a general algorithmic technique that explores all possible solutions to a computational problem by constructing a partial solution incrementally and abandoning it whenever it determines that the partial solution cannot be completed to a valid solution.

Here are the main components and steps involved in backtracking:

### Components:

1. **Decision Space:** A set of all possible candidates for the next extension of the current partial solution.
2. **Constraints:** Rules that the solution must adhere to.
3. **Goal:** A condition that determines if the partial solution is a valid solution to the problem.

### Steps:

1. **Choose:** Pick the next candidate from the decision space.
2. **Constraint Check:** Verify if the chosen candidate satisfies all constraints.
    - If it does, proceed to the next step.
    - If it doesn't, backtrack (undo the choice and try another candidate).
3. **Goal Check:** Check if the current partial solution satisfies the goal condition.
    - If it does, store or use this solution.
    - If it doesn't, backtrack and try another candidate.

### Examples:

#### N-Queens Problem:

In the N-Queens problem, the decision space is the set of all possible positions where a queen can be placed on the chessboard. The constraints are that no two queens can attack each other (i.e., they can't be in the same row, column, or diagonal). The goal is to place `N` queens on the `N x N` chessboard without attacking each other.

#### Sudoku Solver:

In Sudoku solving, the decision space is the set of all possible numbers (1-9) that can be placed in an empty cell. The constraints are that no row, column, or 3x3 subgrid can contain duplicate numbers. The goal is to fill all empty cells with numbers from 1 to 9 such that the completed Sudoku grid is valid.

### Pseudocode for Backtracking:

```plaintext
function backtrack(candidate):
    if candidate is a valid solution:
        store candidate
        return
    
    for next_candidate in candidates:
        if next_candidate is valid:
            apply next_candidate to candidate
            backtrack(next_candidate)
            remove next_candidate from candidate
```

Backtracking is widely used in various problems like permutation generation, combination finding, subset generation, and more. It's a powerful technique but can be computationally expensive if not implemented carefully, especially when the decision space is large.

Disclaimer: This article was created with the help of AI.
📖Sometimes my mind plays tricks on me - Reading is getting harder
Tags: programming, productivity, learning, development
Published: 2024-04-14 16:08:13

## What happened
A few days ago, I struggled to finish reading [Understanding React Server Components](https://vercel.com/blog/understanding-react-server-components) written by the Next.js team to get why Server Components came out, and what kind of problems they can solve. However, it was so long that I couldn't absorb the whole information. It's not the first time that I felt like this. A week ago, I got caught up in image optimization, and even [Image Optimization Chapter 
](https://nextjs.org/docs/pages/building-your-application/optimizing/images) in Next.js docs. It turns out that it's not only me who has difficulty reading long texts. The other day I complained to my friend and he was having the same problem

## We all know the problem
We all know to be good at something, you should get used to it. If you want to read faster, you should read well-written paragraphs. Unfortunately, we trained our brains to get information from short-form Instagram reels, YouTube shorts, and Reddit. How can you be good at reading when you don't read any book every month? That's me!

## Fewer Videos, More Books
I know that I'm bad at reading fast. I'm such a slow reader, and usually, it's not a big deal since nobody is demanding fast responses. For example, all the assignments are given several days due, and projects don't require me to read something fast, but this time it took me a whole day to read an article, and it sounds different now. I should work on it.

## Plans
Here are the plans that I made to come to the rescue of myself

1. Read books when you're on trains, buses and subways
2. Quit reading community posts and look into Wikipedia instead of other websites

Don't you feel any problem as I do? How much do you feel uncomfortable with reading? I want to hear your stories. Leave a comment below!