teleren/devto huggingface dataset:
Nested Object Iteration using Multiple for...in Loops in JavaScript
Tags: object, iteration, nested
Published: 2023-11-10 00:57:21


When working with complex data structures in JavaScript, you'll often encounter nested objects, which are objects that contain other objects as properties. Iterating through these nested objects can be a bit challenging, but using multiple `for...in` loops can help you navigate through them effectively.

In this article, we'll explore how to iterate through nested objects using multiple `for...in` loops in JavaScript, providing you with a clear understanding and practical examples.

## Understanding Nested Objects

Before we dive into iteration techniques, let's first understand what nested objects are. A nested object is an object that contains one or more properties, where each property's value can be another object.

For example, consider the following nested object:

```javascript
let person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
};
```

In this example, the `person` object has three properties: `name`, `age`, and `address`. The `address` property itself is another object with its own properties: `street`, `city`, and `state`.

## Iterating through Nested Objects

To iterate through nested objects, you'll need to use multiple `for...in` loops. Each loop will be responsible for iterating through a specific level of nesting.

Let's go through an example to demonstrate this:

```javascript
let person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
};

for (let key in person) {
  if (typeof person[key] === "object") {
    for (let nestedKey in person[key]) {
      console.log(`${nestedKey}: ${person[key][nestedKey]}`);
    }
  } else {
    console.log(`${key}: ${person[key]}`);
  }
}
```

In this example, we first loop through the properties of the `person` object using `for...in`. Inside this loop, we check if the value of the current property is an object using `typeof`. If it is, we then loop through the properties of the nested object.

The output of this code will be:

```
name: John Doe
age: 30
street: 123 Main St
city: Anytown
state: CA
```

As you can see, we effectively iterated through both the top-level properties (`name` and `age`) and the nested properties (`street`, `city`, and `state`).

## Dealing with Deeper Nesting

If you have objects with multiple levels of nesting, you can continue using additional `for...in` loops to iterate through each level. Just make sure to add the necessary checks to handle objects at each level of nesting.

## Conclusion

Iterating through nested objects in JavaScript can be achieved using multiple `for...in` loops. This technique allows you to effectively navigate through complex data structures and access the properties at various levels of nesting.

By understanding how to use these loops in combination with conditional checks, you'll be well-equipped to handle any nested objects you encounter in your JavaScript projects.
I created a Markdown note-taking app called ideaNote
Tags: markdown
Published: 2023-11-10 00:43:34

> Note: This is a translated [article from Zenn](https://zenn.dev/korange/articles/1f7f4a0c9f2e95).

## Introduction
I have used many note-taking applications for PC such as Obsidian, Typora, Simplenote, etc., but none of them suited my taste, so I decided to make my own.

## What I made
{% embed https://ideanote.korange.work/en/ %}

## What kind of apps?
At this time, it is a software that can make **3 types**+plain text notes ✨.
You can also create folders 📂.

### Memo types.
 - **📄 Markdown**.
   You all know Markdown memo.
  
 - **📜 Scrap**
   This is a memo where you can pile things up in order.
   It is based on Zenn's Scrap.

 - **✅ ToDo**.
   Literally, it is a to-do list. You can create checkboxes.

### Actual screen
But you need to see the actual screen to understand it well.
 - Markdown
![](https://storage.googleapis.com/zenn-user-upload/11034aeef0cf-20231109.png)
   
 - Scrap
 ![](https://storage.googleapis.com/zenn-user-upload/ca3870c701c6-20231109.png)

 - ToDo 
![](https://storage.googleapis.com/zenn-user-upload/f1c5e8e7a5a7-20231109.png)

### Reason for release
Actually, this app was unfinished in my mind.
The reason is that the finished app is different from the ideal I had initially envisioned.
Originally, this app was designed to be the "best" memo app that can save "anything" such as PDF files, images, and videos, but that was more difficult than I imagined.

Still, the reason we released it was because we wanted to release it and hear users' opinions first.
We thought that if we updated the app as users thought it should be updated, we would eventually have the "best" memo app. (This also relates to ↓)

## What we tried to create
To make it easy for users to send their opinions, we placed a "Send Opinion" button in the lower left corner of the screen.
To make it as easy as possible for users to send their opinions, we made it so that you do not need an email address, etc., but only need to enter your opinion.

![](https://storage.googleapis.com/zenn-user-upload/af5d2e68cdcc-20231109.png)

## Finally
Thank you for reading this article to the end!
Now, please take care of ideaNote, although it is still in its infancy!

{% embed https://ideanote.korange.work/en/ %}

(If you are interested, please download it!)
Hacktoberfest 2023 Contributor
Tags: hack23contributor
Published: 2023-11-10 00:33:08

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a contributor. Is this your first Hacktoberfest, or have you contributed to others? Feel free to embed your GitHub account by using [% embed LINK %] -->
Hello DEVs, My name is D'yara and this is my 3rd year participating in the Hacktoberfest event. 

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->
My light-bulb moment this month was to be easy on my self. Everyone doesn't have it all figured out it's a marathon not a race. I say this because I felt overwhelmed this year.

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your learning or career goals changed since working on these new projects? -->
My skillset before Hacktoberfest 2023 was MERN stack. I improved because I had no experience in working with the implementation of dark mode. This month I challenged myself to understand how it works.
Can Anyone Do Anything?
Tags: discuss, codenewbie, beginner
Published: 2023-11-10 00:00:00

---
published_at : 2023-11-10 00:00 +0000
---
Is the belief that 'anyone can do anything' helpful or irresponsible, and how does it affect individuals pursuing their goals, including those dealing with imposter syndrome?


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

*{% embed* https://dev.to/codenewbieteam *%}*
How to Stash Everything git commit Wouldn't Commit
Tags: nablopomo, git, programming
Published: 2023-11-20 01:00:38

---
title: How to Stash Everything git commit Wouldn't Commit
published: true
date: 2023-11-10 00:00:00 UTC
tags: nablopomo,git,programming
canonical_url: http://calebhearth.com/stash-what-git-wouldnt-commit
---

Sometimes I want to take some changes that I’ve made but haven’t yet committed yet and put the into the git stash, which I probably use a lot more than I should. When will you learn to just `git commit -mwip`, Caleb?

 

Either way, Git has my back. `git stash --keep-index --include-untracked` is almost the opposite of the above. It creates a stash commit for only files that wouldn’t otherwise be committed: unstaged changes and untracked files.

 
- `--keep-index` leaves all changes already added to the index (i.e., staged) intact
- `--include-untracked` stashes files in the working tree that have not yet been tracked by Git, and then runs `git clean` to remove untracked files
 

The above command is really useful in cases when you want to make a commit of a subset of your working tree. Say you’ve set up the perfect commit and want to run your tests to be sure that it works or you’re about to switch branches but want to take some changes with you.

 

It occurs to me that this would be a good alias. Maybe I...

[Read more](http://calebhearth.com/dt/stash-what-git-wouldnt-commit)
Can the First 5 Minutes of Your Day Set the Tone?
Tags: discuss
Published: 2023-11-10 00:00:00

---
published_at : 2023-11-10 00:00 +0000
---
Many successful individuals emphasize the importance of a productive morning routine. What are your top activities in the first 5 minutes of your day, and how do they help set a positive tone for your work?

Follow the DEVteam for more discussions and online camaraderie! 

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
DevX Status Update
Tags: community, puppet
Published: 2023-11-11 22:14:18

---
title: DevX Status Update
published: true
date: 2023-11-10 00:00:00 UTC
tags: community, puppet
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2023-11-10-devx-status-update/
---

## Wooooo Friday!

Happy Friday! Thats’s another week well and truly done and dusted here for the DevX team in Belfast.. Now that the halloween season is officially over, we can take some time to reflect on [Gavin’s](https://github.com/GSPatton) words of wisdom from last year…

To quote [Gavin](https://github.com/GSPatton):

![](https://puppetlabs.github.io/content-and-tooling-team/images/gavin_slack_quote.png)

### Planning, planning and more planning

This week the team got together and began setting our goals for Q1 of 2024. We have alot of exciting work scheduled to improve our tooling suite, in the hope that we enhance your puppet development experience.

###  Peace out

There is plenty cooking in the background, and we will have plenty of exciting announcememts to make in the coming weeks, so stay tuned!
On staying motivated.
Tags: discuss, beginners
Published: 2018-11-05 02:40:12

---
title: On staying motivated. 
published: true
description: How to keep doing the thing. 
tags: discuss, beginners
series: November Daily
---

So 4 days into this writing every day challenge I don't want to write. And funny enough earlier today I had a student ask me how she could better motivate herself to code. Well, here I am taking the same advice I gave her which is:

Just do it. 

Nike I will take my millions by pay pal... pal.

But for real, I told her every day she needs to at least *sit down and open her text editor*

That is it, she doesn't have to do anything more. But she has to do at least *that*.

That is all I ever do, I told myself I don't have to write this post today, I can call it quits and stop this challenge **today** but I can't do so without sitting down at some point, opening dev.to, clicking new post, and that's it. After I do that I can quit. 

Here is the dirty little trick. You are hacking your brain a bit, because after you  go through the motions of starting inertia takes over. Its easier for you to keep doing what you are already doing then to come up with something new. You have tipped the domino, and chances are the rest will fall. 

This is not always the case, sometime the third domino says "fuck the police" and falls sideways. However in my experience, 99% of the time I end up doing it. So long answer short.

Just start it.
Singleton classes with Typescript
Tags: typescript, designpatterns, javascript
Published: 2023-11-09 23:49:58

In this post, we will learn how to create a singleton class using Typescript.

## Singleton pattern

The Singleton design pattern is a very well-known pattern used in software engineering that ensures we only have one instance, or a single instance, of a class in our application and also provides an easy way to get access to that object.

## Implementation

In order to implement a Singleton class we basically need to follow these two steps:

1. Make the class constructor private, preventing from using the `new` operator to create objects of that class.
2. Create a static method to instantiate our single instance and make it accessible through the application.

Here's a Lonely class which implements the singleton pattern:

```typescript
class Lonely {
  private static instance: Lonely;

  private constructor() {}

  static getInstance() {
    if (this.instance) {
      return this.instance;
    }
    this.instance = new Lonely();
    return this.instance;
  }
}
```

### Breaking down the code:

First, we define an `instance` property:

```typescript
private static instance: Lonely;
```

This property holds the single instance of our Lonely class. It's private and static since it shouldn't be accessible from its objects (or from its only object in our singleton case).

Then, we have the constructor:

```typescript
private constructor() {}
```
This is one of the key pieces where we make the constructor private, so if we try to instantiate new object of Lonely with `const newInstance = new Lonely()` we get an error: `Constructor of class 'Lonely' is private and only accessible within the class declaration.`

And finally, we have the getInstance method.

```typescript
  static getInstance() {
    if (this.instance) {
      return this.instance;
    }
    this.instance = new Lonely();
    return this.instance;
  }
```
We don't need to name it getInstance but it's a good practice following the naming convention so it helps our code to be widely understandable. 

What we _must_ do is make it static and public, since it will be the point of access to creating _the_ single instance of our class.

The logic is pretty simple: if we already have an instance of our class we just return it; if it's the first instantiation then we create our object calling the private constructor `new Lonely()` and return it.

We could also use the `Lonely` class name instead of the `this` keyword:

```typescript
  static getInstance() {
    if (Lonely.instance) {
      return Lonely.instance;
    }
    Lonely.instance = new Lonely();
    return Lonely.instance;
  }
```

### Accessing our single instance

To access the only object of our Lonely class we just need to call its getInstance method:

```typescript
const l1 = Lonely.getInstance();
const l2 = Lonely.getInstance();

console.log(l1 === l2); // return true
```
Exploring the Pros and Cons of Standalone Components in Angular
Tags: angular, frontend, webdev, javascript
Published: 2023-11-09 23:41:26

Web development has made incredible progress over the years. I still recall the days when I development on JQuery and things often felt chaotic. With the advent of reactive programming and new development paradigms, it has become significantly more straightforward for developers to craft code that is not only cleaner but also more sustainable and scalable.
Angular, with its comprehensive toolkit, empowers developers to build dynamic and scalable web applications. Among its arsenal of features, standalone components stand out as a versatile tool for code organization. In this article, we'll dissect the advantages and disadvantages of integrating standalone components into your Angular projects.

## Advantages:

### 1. Reusability and Modularity:

Standalone components encapsulate specific functionalities, promoting reusability. This modularity allows developers to integrate components seamlessly across various parts of the application or even across distinct projects.

### 2. Easy Maintenance:

Isolating functionality within standalone components simplifies maintenance and updates. Changes or bug fixes in one component do not affect others, reducing the risk of unintended consequences.

### 3. Clear Separation of Concerns:

Standalone components adhere to the Single Responsibility Principle (SRP), focusing on specific tasks or features. This promotes a clear separation of concerns, making code more organized and easier to understand.

## Disadvantages:

### 1. Potential Overhead:

In smaller applications, the use of standalone components might introduce unnecessary complexity. The overhead of creating and managing numerous components can outweigh the benefits.

### 2. Communication Overhead:

While standalone components promote isolation, they may require additional effort to communicate with other parts of the application. This can lead to increased complexity in managing state and passing data between components.

---------------------------------------------------------------

Standalone components in Angular are a powerful tool for building modular and maintainable applications. By understanding their benefits and potential drawbacks, developers can leverage them effectively to create robust and scalable projects. Remember, the key lies in striking a balance and applying them judiciously according to the specific needs of your application.
Have you had the chance to dive into Standalone components? What are your thoughts on this approach?
State Of The Art (SOTA) — The Very Best Gender Classifier — 1 Click Install & Run
Tags: gender, classifier, ai, script
Published: 2023-11-09 22:33:36

If you are looking for State of The Art (SOTA) — The Very Best gender classifier Model just released the scripts on the Patreon

The script uses Retina Face and a fine tuned gender-classification model from Hugging Face

Generates a new VENV and run on it. 1 Click to use.

Download link : https://www.patreon.com/posts/92607385


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsc6hm0wil4nnn3s0fig.png)
Unlocking the Potential of Vue.js: A Modern Framework for Progressive Web Applications
Tags: vue, javascript, programming, webdev
Published: 2023-11-09 22:15:24

Introduction
In the dynamic world of web development, Vue.js emerges as a front-runner, offering a progressive JavaScript framework designed for crafting user interfaces and single-page applications. Vue.js stands out with its gentle learning curve and its capacity to empower developers to build high-performing applications.

Core Benefits of Vue.js Over Other Frameworks
Simplicity and Flexibility:
Vue.js is remarkably easy to get started with. Whether you are building simple project prototypes or complex applications, Vue.js provides an approachable syntax and integrates seamlessly with other libraries or existing projects.

Reactive Two-Way Data Binding:
Vue’s two-way data binding feature ensures that changes to your UI are instantly reflected in your data model, and vice versa. This reactivity is a cornerstone of Vue’s efficiency, allowing for a more intuitive and manageable state management.

Component-Based Architecture:
Vue encourages a component-based architecture, promoting code reuse, and making it easier to manage and scale projects. This modular approach streamlines collaboration and maintenance.

Performance and Speed:
Vue.js is famed for its minimalistic footprint and optimal performance. It employs a virtual DOM to make updates faster and more efficient, resulting in a snappier user experience.

Robust Tooling Ecosystem:
Vue.js boasts a rich ecosystem of supporting tools like Vue CLI, VueX for state management, and Vue Router for navigation, simplifying the development process.

Innovative Uses of Vue.js
Single-Page Applications (SPAs):
Vue.js excels in building SPAs due to its fast rendering and easy-to-use API. It ensures a fluid, app-like experience, reducing load times and enhancing user engagement.

Interactive Web Interfaces:
Vue.js’s reactivity and component structure make it ideal for creating interactive web elements and dashboards, providing users with instant feedback and a seamless interaction.

Progressive Web Apps (PWAs):
Leveraging modern web capabilities to deliver app-like experiences, Vue.js aids in creating PWAs that are reliable, fast, and engaging.

Enterprise Applications:
With scalability and maintainability in mind, Vue.js is suitable for large-scale applications, with giants like Alibaba and Xiaomi using it for their interfaces.

Conclusion
Vue.js is a testament to the evolution of web frameworks, prioritizing ease of use without compromising on power and flexibility. Its gentle learning curve, combined with robust features, positions it as a strong candidate for any web development project, from simple websites to complex enterprise applications. Embracing Vue.js can be a game-changer in your development arsenal, allowing for the creation of innovative, efficient, and user-centric web applications.
Building a Node.js TypeScript Docker MongoDB Project
Tags: node, mongodb, typescript, docker
Published: 2023-11-09 21:51:02


**Introduction**
Welcome to this blog post where we'll walk you through the process of building a Node.js TypeScript project integrated with MongoDB and Docker. This project aims to help you get started with modern web development using these powerful technologies.

We'll cover the essentials, prerequisites, and the step-by-step process to set up and run your project. So, let's dive in!

**Prerequisites**

Before we begin, you need to ensure that you have the following dependencies installed on your system:

- [Docker](https://www.docker.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/)
- [TypeScript](https://www.typescriptlang.org/)

**Getting Started**
Let's kick things off by setting up the project on your local machine. Follow these steps:

1. Clone the repository: 

```
$ git clone --depth=1 https://github.com/rebazomar121/node-typescript-mongodb-starter your-project-name
```
2. Navigate to the project directory:

```
$ cd your-project-name
```
3. Install project dependencies:

```
$ npm install
```
4. Configuration:

```
$ cp .env.example .env
```
5. Run the project In Development:

```
$ npm run dev
```
6. Run the project In Production:

```
$ npm run build && npm start
```
7. Running with Docker:

```
$ docker build -t your-image-name .
```
8. Run the container:

```
$ docker run -p 8080:8080 -d your-image-name
```
9. Running with Docker Compose:

```
$ docker-compose up
```
Note: You can change the configurations in the _.env_ file.