teleren/devto huggingface dataset:
The Heart of all Vue.js Applications: Vue Instance
Tags: webdev, vue, javascript, beginners
Published: 2023-05-07 03:12:29

Let's talk about the heart of all Vue.js applications. The motherboard. The part that is absolutely essential to running these applications: Vue Instance. What is it? How do we use it? In this article, I will help break down what this fundamental topic is and how they are used in Vue applications.

## Prerequisites 📝

1. A working knowledge of javascript
2. A code editor (I recommend Visual Studio Code)
3. A working knowledge of Vue.js (V2)

## Let's Get Started ✨

**Please note:** This is in Vue.js V2. You will see in V3, the initialization is a bit different. You can read more about it [here](https://vueschool.io/articles/vuejs-tutorials/the-benefits-of-the-vue-3-app-initialization-code/). Back to our scheduled programming 👇,

To put it simply, the Vue Instance is the root of every Vue application. It is used to connect the data, properties, and lifestyle hooks. Let's take a look at an example and go from there, 

```javascript
new Vue({
  el: '#app',
  data: {
    books: Seed.books
  },
  created: function () {
    console.log('hello world')
  }
});
```

When a Vue instance is created, an `options` object is passed in. In the example above, this object contains the `el` and `data` property. `el` represents a specific part of the DOM that the Vue instance will be mounted to, which in this case, is the `#app`. Typically, you will see that `#app` is the root of application. 

The second property is `data`. This property passes in an object that contains reactive data. Any changes to that data will cause a rerender of its corresponding view in the DOM. This happens because of vue's reactivity system which consists of two-way databinding. 

In the example above, you will see that `books` was passed in. This could be an array of objects holding data about books. If this app was a library system and a librarian added a book to the system, this array would be updated which would cause the `#app` view to rerender. This creates a seamless user experience. 

The Vue instance also provides a set of lifestyle hooks. These hooks help with tasks like initialization and clean-up. Common hooks are `created`, `mounted`, `updated`, and `destroyed`. The above example shows the `created` hook. This means that its function will get called when the Vue instance is created which in this case, `hello world` will get printed out in the console. 

## Next Steps ✨

So there you have it, the heart of all Vue applications. Do not forget to add this instance to your Vue app (I have! It will cause errors hehe) and you will see how it essential it is for building your app. Take a look at Vue projects or build your own to see it in action.
Conquering the Undo Functionality Challenge: Day 96 of #100DaysOfCode
Tags: javascript, programming, tutorial, react
Published: 2023-05-07 02:55:12

On Day 96 of #100DaysOfCode, I conquered the undo functionality challenge! After hours of debugging, I successfully removed liked clients from the database, updated the user, and filtered the client cards. Buttons are now in the ClientDashboard component. Exciting progress!
Adding fields to existing types in Vendure
Tags: typescript, webdev, vendure, tutorial
Published: 2023-05-07 02:45:00

Custom fields allow you to add your own custom data properties to many of the Vendure entities. The entities which may have custom fields defined are listed in the [CustomFields documentation](https://www.vendure.io/docs/typescript-api/custom-fields/). While this approach is flexible it becomes quite cumbersome when dealing with a huge number of fields, for example, ingredients for food products. Rather than adding each ingredient as a custom field on the product, we can create an `Ingredient` entity and have `ProductVariant` extend it.

```ts
import { DeepPartial, ProductVariant, VendureEntity } from '@vendure/core';
import { Entity, Column, ManyToMany, JoinTable } from 'typeorm';

@Entity()
export class Ingredient extends VendureEntity {
    constructor(input?: DeepPartial<Ingredient>) {
        super(input);
    }

    @Column({ nullable: false })
    name!: string;

    @ManyToMany(type => ProductVariant, { nullable: false })
    @JoinTable()
    productVariants!: ProductVariant[];
}
```

Add the entity, types and resolver to `VendureConfig`

```ts
@VendurePlugin({
    imports: [PluginCommonModule],
    entities: [Ingredient],
    adminApiExtensions: {
        schema: gql`
            type Ingredient implements Node {
                id: ID!
                name: String!
                productVariants: [ProductVariant!]!
            }

            extend type ProductVariant {
                ingredients: [Ingredient!]
            }
        `,
        resolvers: [ProductVariantEntityResolver],
    },
})
```

Add the field resolver for the ingredients field in `ProductVariant` entity

```ts
import { Parent, ResolveField, Resolver } from '@nestjs/graphql';
import { Ctx, RequestContext, ProductVariant, TransactionalConnection } from '@vendure/core';
import { Ingredient } from '../entity/ingredient.entity';

@Resolver('ProductVariant')
export class ProductVariantEntityResolver {
    constructor(private connection: TransactionalConnection) {}

    @ResolveField()
    ingredients(@Ctx() ctx: RequestContext, @Parent() variant: ProductVariant) {
        return this.connection
            .getRepository(ctx, Ingredient)
            .createQueryBuilder('ing')
            .leftJoin('ing.productVariants', 'variant')
            .where('variant.id = :id', { id: variant.id })
            .getMany();
    }
}
```

Since `Ingredient` entity owns the relation, `ProductVariant` entity does not know about it directly so we are using the above field resolver. Finally, you can query `productVariants` with `ingredients` sub-selection.

Vendure v2.0 is coming out soon! come share the excitement on [slack](https://vendure.io/slack).
Demystifying Nx's "dependsOn" configuration
Tags: nx, cicd
Published: 2023-05-07 02:07:18

We're using Nx in our multirepos to build our Node/Nest apps, as well as Angular. It was a long story how we migrated from Angular Workspace repo for web apps, and single repos for NodeJS/Nest, but in this article I'd like to focus on "dependsOn" property of `project.json` and how we treat it.

Nx documentation contains a good portion of "dependsOn" description - https://nx.dev/reference/project-configuration#dependson but as for me it still not clear how does "dependsOn" inside "targetDefaults" interact with project-level "dependsOn".

In our project we're utilizing some shared libraries which can be used for Angular apps and for NodeJS/Nest apps as well, i.e. some models definitions and so on. Thus, it is important that those libraries should be built before other apps. That's why we included libraries definitions into "targetDefaults". From other hand we have got some script which need to be run before build, so we create a separate task inside `project.json` to describe it.
```
 "injectBuildVersion": {
   "executor": "nx/run-script",
   "options": {
     "script": "inject-build-version some-app"
   }
 }
 "targetDefaults": {
   "build": {
     "dependsOn": "some-lib"
   }
 },
 "dependsOn": ["injectBuildVersion"]
```
as a result the application was failing to build, because library wasn't built yet. But we noticed that "injectBuildVersion" was executing correctly.

The reason of such behavior is that project-level "dependsOn" overrides "targetDefaults". Moreover, this behavior already described somewhere in Nx issues :-) To make it work, we have to include a special dependency "^build" into project-level "dependsOn" property, like this:
```
 "injectBuildVersion": {
   "executor": "nx/run-script",
   "options": {
     "script": "inject-build-version some-app"
   }
 }
 "targetDefaults": {
   "build": {
     "dependsOn": "some-lib"
   }
 },
 "dependsOn": ["injectBuildVersion", "^build"]
```
Now, everything works as expected, build version value (which comes from Jenkins) injects into `environment.ts` file, and then Nx performs the build with all necessary dependencies. Good job, Nx!
{#3}const, let and var in JavaScript | JavaScript
Published: 2023-05-07 01:53:28

console.log("JavaScript tutorial 3: var, let and const")
// var a = 45;
// var a = "p"
let b = "Sage";
const author = "Sage"
author = 5 // Throws an error because constant cannot be changed
b = 4
const Sage = 0;
let c = null
let d = undefined
{
  let b = 'this'
  console.log(b)
}
console.log(b) [](https://replit.com/@SkSage)
Single Responsibility Principle: #1
Published: 2023-05-07 00:36:28

The first principle of SOLID is the Single Responsibility Principle (SRP). This principle states that each class should have only one specific responsibility, that is, a single task to perform.

SRP is considered fundamental in SOLID, as it provides significant benefits in terms of code maintenance and readability. I agree that the other SOLID principles are based on this first principle. Therefore, it is essential to respect and strictly apply the SRP, as this allows for the proper implementation of the other principles.

<br />

________________________[next page >>](https://dev.to/israellopes/openclosed-principle-2-jno)_______________________

[![Texto alternativo da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4alkts3uxq0dsco0nv.png)](https://www.linkedin.com/in/israel-lopes-419a32189)
Faster⚡OS - Web Operating System
Tags: githubhack23, webdev, hackathon, hacking
Published: 2023-05-07 01:00:49

## What I built 
A web operating system fast for daily tasks and learn. 
### Category Submission: 
Wacky Wildcards
### App Link
https://fasteros.vercel.app
### Screenshots 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mg0979ergbzru642376.png)[First]
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvj1swcqywjs0ddltljj.png)[The Menu]
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87n3bvcrt48s9t4fo784.png)[Music and Video Player]
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el573ao3gn6udqbjlkmf.png)[VirtualX86 for run some OS, IRC,Some Softwares for Download]
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3qvd1kmfubzb2x8z152.png)[DevTools and Monaco Editor for coding]
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dusjyjjid6omkxk48y4.png)[Browser with cool favs]

### Description 
FasterOS is a web operating system created for help users in daily tasks and for help security enthusiasts and students. 
🖥️ Run linux systems
⤴️ Upload files
📥 Download files
🌐 Browse in built-in browser
🖼️ Convert images: bmp,gif,png,jpeg,jpg,psd,svg,tiff
🎵 Convert Audio: aac,mp3,ogg,wav
💼 Convert Sheets: xlsx,csv,numbers,ods,xls
🗜️ Compress and extract files
🧠 Learn about: Linux, Windows, Hacking, Data Security and Forensics
💀 The system has a list of tutorials and hacking tools
🔎 Malware list for analysis
🎮 Games and Emulators
🛡️ Security:
👉 You can turn off your cell phone so that your settings remain saved in the app
🔒 Privacy:
👉 All data is cleared on clicking shutdown
GOALS:
🧭 Study assistant
⏱️ Speed up the production process
🏆 Help the community
🇧🇷 Official Language
### Link to Source Code 
https://github.com/cristiancmoises/faster-os
### Permissive License 
MIT
## Background (What made you decide to build this particular app? What inspired you?) 
There are many inequalities in my country and many people don't have money to buy a computer or software. I want to help the community with a light and efficient system for daily tasks, in addition to promoting some tutorials so that they can also learn with the system.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 
Yes. I like to use Codespaces too it's amazing for fast coding. 
And i try the 'GitHub Codespaces secrets'.

### Additional Resources/Info
Created with ❤️ and using free tools. I am grateful for the entire team of developers who collaborate on open source projects.
KoreanCoding 101: Programmers.co.kr Account registration
Tags: beginners, javascript, tutorial, programming
Published: 2023-05-07 00:56:22

Are you trying to improve your technical Korean skills and looking to get started with some challenges in Korean? If yes, then you've come to the right place! In this post, we'll go through the process of registering on [programmers.co.kr](http://programmers.co.kr), a website that offers a variety of coding challenges and exercises.

## How to register?

To start, head over to [programmers.co.kr](http://programmers.co.kr) and click on the 회원가입 (membership registration) button, located in the upper right corner of the website.

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

From there, you can sign up using your name (이름), email (이메일), and password (비밀번호) or choose to connect your Google, Kakao, Github, or Facebook account.

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

Once you've created an account, you'll be prompted to accept the website's terms of use (이용약관), allow the collection and use of your personal information (프로그래머스 개인정보 수집 및 이용 동의), and confirm that you're 14 years or older (만 14세 이상입니다). You'll also have the option to agree to receive marketing emails (마케팅 활용 동의 및 광고 수신 동의).

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

After completing the initial registration, you'll be asked to provide additional information, such as your desired job (희망직무) and main technology (주요기술). For your desired job, choose your area of interest, and for your main technology, select the programming language you use the most.

Once you've provided all the necessary information, you're almost ready to start exploring the website. But first, you'll need to verify your account by clicking on the link sent to your email.

## What now?

Now that you're registered and verified, it's time to start exploring the website. I recommend filling out your profile with relevant information and trying out some coding challenges. You can find the coding challenges under [코딩테스트 연습](https://school.programmers.co.kr/learn/challenges) (coding test practice) in the website's navbar. If you're new to coding challenges, I suggest starting with the beginner-friendly challenge, [두 수의 합](https://school.programmers.co.kr/learn/courses/30/lessons/120802) (no translation this time, try to figure out what to do by just looking at input and output!).

If you have any questions or need assistance, feel free to leave a comment. I'm always happy to help! In the next post, we'll tackle our first challenge together, so stay tuned.

Thanks for reading!
KoreanCoding 101: Introduction
Tags: beginners, challenge, javascript, tutorial
Published: 2023-05-07 00:51:14

Hi everyone, my name is Anna and I'm excited to share my new blog series, *"KoreanCoding 101: Technical Korean for Non-Korean Speakers"*, with you. As a non-native Korean speaker living in South Korea and trying to find a job as a Frontend Developer in a Korean company, I've realized how important it is to have a strong grasp of Technical Korean for coding challenges.

I've been studying Korean for a while now and even hold a TOPIK level 4, but I found that my technical Korean wasn't quite up to par for the coding challenges and tests required during job interviews. So, I started practicing on [programmers.co.kr](http://programmers.co.kr), a popular platform used by many Korean tech companies.

As I worked through these challenges, I realized that it would be helpful to have a resource that explains the technical Korean terms commonly used in coding challenges. That's why I decided to start this blog series, where I'll walk you through each challenge step-by-step, breaking down the technical terms and explaining my thought process along the way. While I'll be using JavaScript to tackle these challenges, the principles and concepts we'll cover can be applied to any programming language. So even if you prefer working with Python or C, you can still follow along and apply these techniques to your language of choice.

My hope is that this series will be helpful to other non-Korean speakers who are interested in joining the Korean tech industry but may be struggling with the language barrier in coding challenges. Join me as we explore Technical Korean and work towards becoming more confident and proficient in our coding skills!

---

**Edit:**

Someone kindly pointed out that it would be great if I shared a bit more about my background and explained my interest in seeking employment with Korean companies.

Let me give you some context: I've been living in South Korea since 2021, but my ties with this country actually started back in 2016. I have family here, and I plan on continuing to call Korea my home for many years to come. So, it only made sense to explore job opportunities in Korea.

But my reasons for seeking employment here go beyond just familial ties. For one, there are so many exciting startups and companies in Korea that I can see myself being a part of. I'm drawn to the innovation and creativity that I've seen in the Korean business scene. Plus, I prefer working face-to-face with colleagues. As a freelancer, I often work remotely and don't get much social interaction. So, the idea of being a part of a team in person is really appealing to me.

Lastly, I should mention that I genuinely love my life here in Korea. I appreciate the culture, the food, and the people. It's a beautiful country with so much to offer, and I feel fortunate to have the opportunity to be here.

So, that's a bit about me and my reasons for seeking employment with Korean companies. I hope this explanation helps to clarify my background and motivations.
Dicas práticas para estudar programação
Tags: javascript, programming, beginners, computerscience
Published: 2023-05-07 00:32:06

1. Comece com os fundamentos: Antes de começar a aprender uma linguagem de programação específica, certifique-se de ter uma boa compreensão dos fundamentos da programação, como lógica de programação, variáveis, estruturas de controle, funções e orientação a objetos.

2. Pratique, pratique, pratique: A prática é essencial para se tornar um bom programador. Tente criar pequenos projetos e experimente diferentes soluções para os problemas que você enfrenta.

3. Escolha uma linguagem e ferramenta: Comece escolhendo uma linguagem de programação e ferramenta que lhe interesse. Você pode começar com linguagens como Python, Java, ou JavaScript e utilizar ferramentas como o Visual Studio Code, PyCharm, ou Eclipse.

4. Leia documentação e fóruns: Leia a documentação e fóruns de discussão da sua linguagem de programação para encontrar soluções para problemas comuns. Você também pode aprender muito lendo o código de outros programadores em plataformas como o [Github](https://github.com/).

5. Participe de projetos de código aberto: Junte-se a projetos de código aberto para ganhar experiência trabalhando em projetos em equipe. Você também pode contribuir para a comunidade e aprender com outros desenvolvedores. Você pode encontrar projetos de código aberto no [Github](https://github.com/), se ainda não tem conta aproveita e cria.

6. Esteja atualizado: Esteja sempre atualizado com as novas tecnologias e tendências na indústria de programação. Aprenda novas linguagens, frameworks e bibliotecas para expandir seu conhecimento.

7. Divirta-se: Por último, mas não menos importante, divirta-se! A programação pode ser desafiadora, mas também pode ser muito divertida. Encontre projetos que você goste e divirta-se criando soluções criativas para os problemas que você encontra.
Meu Sistema Operacional Web
Tags: android, development, webdev, productivity
Published: 2023-05-06 23:57:57

Olá pessoal... estou de volta!
Agora com meu novo projeto. FasterOS é um sistema operacional web para tarefas diárias e para ajudar entusiastas e estudantes de segurança.
Fiz o sistema:
[https://fasteros.vercel.app](TESTE AGORA!)
e o aplicativo:
[https://play.google.com/store/apps/details?id=com.faster.os](DOWLOAD!)

🖥️ Execute sistemas Linux
⤴️ Carregar arquivos
📥Baixar arquivos
🌐 Navegue no navegador embutido
🖼️ Converter imagens: bmp,gif,png,jpeg,jpg,psd,svg,tiff
🎵 Converter áudio: aac, mp3, ogg, wav
💼 Folhas de conversão: xlsx,csv,numbers,ods,xls
🗜️ Comprimir arquivos
🧠 Aprenda sobre: ​​Linux, Windows, Hacking, Segurança de Dados e Forense
💀 O sistema possui uma lista de tutoriais e ferramentas de hacking
🔎 Lista de malware para análise
🎮 Jogos e Emuladores
🛡️ Segurança:
👉 Você pode desligar o celular para que suas configurações fiquem salvas no app
🔒Privacidade:
👉 Todos os dados são apagados ao clicar em desligar
METAS:
🧭 Auxiliar de estudo
⏱️ Acelerar o processo de produção
🔝Ajude a comunidade
🏆Transformação Social

> Este projeto é 100% gratuito e o desenvolvimento continua com a ajuda de doações. Você gostou? Espalhe a palavra! Compartilhe!
My Web Operating System!
Tags: opensource, webdev, development, android
Published: 2023-05-06 23:54:04

Hello guys... i'm back!
Now with my new project. FasterOS is a web operating system for daily tasks and for help security enthusiasts and students.
I made the website: 
[TRY NOW!](https://fasteros.vercel.app)
and the app:
[DONWLOAD NOW!](https://play.google.com/store/apps/details?id=com.faster.os)

🖥️ Run linux systems
⤴️ Upload files
📥 Download files
🌐 Browse in built-in browser
🖼️ Convert images: bmp,gif,png,jpeg,jpg,psd,svg,tiff
🎵 Convert Audio: aac,mp3,ogg,wav
💼 Convert Sheets: xlsx,csv,numbers,ods,xls
🗜️ Compress files
🧠 Learn about: Linux, Windows, Hacking, Data Security and Forensics
💀 The system has a list of tutorials and hacking tools
🔎 Malware list for analysis
🎮 Games and Emulators
🛡️ Security:
👉 You can turn off your cell phone so that your settings remain saved in the app
🔒 Privacy:
👉 All data is cleared on clicking shutdown
GOALS:
🧭 Study assistant
⏱️ Speed up the production process
🔝 Help the community
🏆 Social Transformation

> This project are 100% free and the development keep running with donations. Do you like it? Spread the word! Share it!
a/synchronous code.
Published: 2023-05-06 23:24:09

Couldn't think of a clever title for this one. Instead I'll just share what I'm doing for the next 2 hours for bootcamp and #100DaysOfCode.

SD Phase 1 - Full Stack - Asynchronous JavaScript  | Post - Patch and Delete Requests.      

Mimo web-development  training - CSS intermediate

Synchronous Code:
is executed sequentially, line by line, in the order it appears in the code. Each task must complete before the next one begins, and the code waits for each task to finish before moving on to the next. This can lead to blocking or freezing the user interface

```
console.log('Start');
console.log('Fetching data...');

// Fetch data synchronously
const data = fetchDataSync(); // This fetch operation blocks the code execution

console.log('Data fetched:', data);
console.log('End');

```
Asynchronous Code: 
allows multiple tasks to be executed concurrently without blocking the execution of other tasks. This helps to keep the application responsive and prevents it from freezing while time-consuming tasks, such as data fetching, are being performed

```
console.log('Start');
console.log('Fetching data...');

// Fetch data asynchronously with a callback
fetchDataAsync((error, data) => {
  if (error) {
    console.error('Error fetching data:', error);
  } else {
    console.log('Data fetched:', data);
  }
});

console.log('End');
```
5/100
Birth of The C Language
Tags: c
Published: 2023-05-06 22:31:18

C was born in 1972.

![MULTICS and UNIX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wv9fw6i8dce0jmc3lkd.png)

![Birth of the C](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj9mpfz7hbxm55tlge4v.png)