teleren/devto huggingface dataset:
Angular 11+ FormGroup Array ด้วย RxWeb
Tags: angular, javascript, typescript, forms
Published: 2021-11-11 10:06:25

ติดตั้ง @rxweb/reactive-form-validators
` $ npm install @rxweb/reactive-form-validators`

```typescript
/** app.module.ts */

import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    RxReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```


สร้าง job.model.ts
## สร้าง models เพื่อใช้การทำ validate forms
```typescript
/** models/job.model.ts*/

import { required } from "@rxweb/reactive-form-validators";

export class JobModel {
  @required()
  jobName: string;

  ...
}


```

สร้าง user.model.ts
## สร้าง models เพื่อใช้การทำ validate forms
```typescript
/** models/user.model.ts*/

import { required, requiredTrue } from "@rxweb/reactive-form-validators";

export class JobModel {
  @required()
  jobName: string;

  @requiredTrue()
  jobValue: boolean;
}


```

#### Config validationMessage & ผูก models
```typescript
/** app.component.ts */
import { ReactiveFormConfig } from '@rxweb/reactive-form-validators';
...

export class AppComponent implements OnInit {
  myForm!: FormGroup;
  constructor(private formBuilder: RxFormBuilder) { }
  ...

  ngOnInit(): void {

      ReactiveFormConfig.set({
      validationMessage: {
        required: "This field is required",
        minLength: "minimum length is {{1}}",
        requiredTrue: "allowed requiredTrue only"
      }
    });

    let user = new UserModel();

    let job1 = new JobModel();
    job1.jobName = 'Angular'
    job1.jobValue = true;
    
    let job2 = new JobModel();
    job2.jobName = 'Vue'
    job2.jobValue = false

    user.jobs = new Array<JobModel>();
    user.jobs.push(job1);
    user.jobs.push(job2);

    this.userForm = this.formBuilder.formGroup(user);
  }
}
```

#### แสดง errorMessage ที่ html template
```html
<!-- app.component.html -->

<form [formGroup]="myForm">
    <div>
    <h3>Jobs</h3>
    <div formArrayName="jobs" *ngFor="let item of userForm?.get('jobs')?.controls; let i = index;">
      <div [formGroupName]="i">
        <input type="checkbox" formControlName="jobValue">
        <label>
          {{ item.get('jobName').value }}
        </label>
      </div>
      <div style="color:red;">
        {{ item.get('jobValue')?.errorMessage }}
      </div>
    </div>
    jobs valid: {{ userForm.get('jobs').valid }}
  </div>
</form>

```

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


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

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

แค่นี้เราก็จะได้ formGroupArray แบบง่ายๆมาใช้แล้วครับ
Highcharts: Styled Candlestick vs Heikin Ashi
Tags: codepen, programming, javascript, css
Published: 2021-11-11 10:01:08

{% codepen https://codepen.io/chideraao/pen/mdMKdQP %}


Beautifully styled stock chart showing the differences between Candlesticks and Heikin Ashi(Average Bar) charts on Bitcoin over the past 14 days.
Mantenimiento del Sistema
Tags: mantenimientodelsitema, soporte, tiposdemantenimiento
Published: 2021-11-11 10:00:34

**¿Por qué resulta necesario realizar mantenimiento del software? ¿Qué le pasa usualmente a un software que no se mantiene?** 
Es necesario realizar mantenimiento del software para mejorar el rendimiento, para incorporar nuevas funcionalidades solicitadas por el cliente, agregar mayor seguirdad al sistema, adaptarse a la demanda de nuevos servicios, incluso para lograr una ventaja competitiva. Al software que no se le realiza mantenimiento adecuado suele presentar problemas de rendimiento, deja der útil para realizar nuevas operaciones que demanda el cliente, mayor brecha de seguirdad. Degradación de la calidad del producto.

**¿Cómo es posible clasificar los tipos de mantenimiento en función de sus objetivos?**
Los tipos de mantenimiento se clasifican de acuerdo a la demanda del cliente o segun su nivel de atención.
Planificable: Correctivo no urgente, Adaptativo, Perfectivo, Preventivo.
No Planificable: Correctivo urgente

**¿Qué problemas plantea el mantenimiento?**
* Degradación calidad del producto
* Auscencia de documentación
* Efectos domino y efecto iceberg
* Ausencia metodológica del cambio

**¿Qué necesidades conflictivas aparecen durante el mantenimiento?**
Realizar mantenimiento a software desarrollado con tecnologías y técnicas "anticuadas". Conseguir documentación adecuada. En ocasiones se le da poca importancia al mantenimiento, se asigna poco tiempo por considerarse que no aporta un incremento al cliente. Por otra parte se abre el debate si se debe realizar una reingeniería del artefacto o proceso completo o adaptar únicamente lo solicitado por el cliente.

**¿Qué hay que hacer para que los atributos de calidad del software no se degraden durante el mantenimiento?**
* Implementar herramientas para el control de calidad.
* Establecer procedimientos claramente definidos y estandarizados para el mantenimiento software. 
* Modificar el software para hacerlo mas fácil de entender y cambiar.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kveb3mv857bsmiovyvvo.png)
Deploy tu proyecto de React.JS en Github-Pages
Published: 2021-11-11 09:51:42

¡Ya está!, mi proyecto funciona en local y ya está subido y guardadito en un repositorio en github! ¡Quiero la magia de github pages!

> Github-pages: Servicio que me ofrece Github para poder almacenar en la nube mi proyecto y visualizarlo.

1. Abrimos la terminal de nuestro ID favorito donde tengamos ubicado nuestro proyecto e instalamos el paquete de Gh-pages

```
npm i -D gh-pages
```
(Con -D lo instamamos en el package.json como devDependencies)

2. En nuestro archivo package.json añadimos la siguiente linea, justo debajo de "name": "nombredetuproyecto", por ejemplo.
```
"homepage":"https://GITHUBUSER.github.io/REPONAME"
```
Introduce tu nombre de usuario y el nombre de tu repositorio de Github y agrégalo arriba.

3. En el mismo archivo, dentro de "scripts": {, añade:
```
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build"
```

4. ¡Volvemos a la terminal! Ahora ejecutamos:
```
npm run build
```

5. Y por último...
```
npm run deploy
```

¿Cómo sé que he tenido éxito?, algo así te tiene que mostrar:
![Deploy done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qorprtcuip645r4fy8n.png)
 
Además si actualizas tu repositorio en github verás que fue creada la rama de gh-pages. La url de acceso debería de verse así:
```
https://GITHUBUSER.github.io/REPONAME/
```

Si te fijas bien podrás ver actualizado en tu repo que github-pages está activo!
![enviroments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lhmqy84klv91e5xyay0.png)

¡Enjoy!
How to Make a Responsive Navbar Using HTML and CSS
Tags: coding, css, html
Published: 2022-02-04 19:24:19

---
title: How to Make a Responsive Navbar Using HTML and CSS
published: true
date: 2021-11-11 09:45:00 UTC
tags: coding,css,html
canonical_url: http://www.nabinbhatt.info.np/2021/11/how-to-make-responsive-navigation-menu.html
---

 ![how to make responsive navigation menu using html and css](https://blogger.googleusercontent.com/img/a/AVvXsEgCLtp1QpZ58NYXOFzQgRfhXrtd6RbGDomTcUnG-AOMJzIwVJGtL4lTJREutq52-ByExaDKFZ71qN3KP6H4902-03GnUpxJzhwey1HK122Cbl0W8NqOipveHMcBXLCU3fUrvbgsHS6b2uKeDauprBGkK53cQJHqjjZbpHy3P8UHxRcd7WpBW13_XUX6Qg=s16000)

* * *

Learn how to make responsive top navigation menu with plain HTML and CSS.

* * *

## Create A Responsive Top Nav

### Step 1) Add HTML:

See the Pen [Responsive Navbar Design](https://codepen.io/nabinbhatt/pen/gOxjjqp) by Nabin Bhatt ([@nabinbhatt](https://codepen.io/nabinbhatt)) on [CodePen](https://codepen.io).

<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
Create your own webpage with easy drag and drop
Tags: javascript, webdev, react, css
Published: 2021-11-11 09:40:19

**PS: I am the author of Vareniyam Tool**

You can create your website using Vareniyam in a drag and drop interface similar to how you do it in figma. 

It is currently in beta and is not ready for it is prime time. You may like to use it because you are a developer and you like to try different unique technologies. 

**How to do it** 
Simply visit https://vareniyam.vercel.app/ and start playing with the interface.

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

**Apologies**
Changes you will make will not be saved.
You cannot export the html content. Use chrome inspector if you would like to do so.
C# "fire and forget" method
Tags: csharp
Published: 2021-11-11 09:35:35

Option 1: async void
```
        static void Main(string[] args)
        {
            try
            {
                Console.WriteLine("Main starts at " + DateTime.Now.ToLongTimeString());
                TestTask();
                Console.WriteLine("Main ends at " + DateTime.Now.ToLongTimeString() + ", " + Thread.CurrentThread.ManagedThreadId);
            }
            catch (Exception ex)
            {
                Console.WriteLine("ex: " + ex.Message);
            }

            Console.Read();
        }

        static async void TestTask()
        {
            try
            {
                Thread.Sleep(3000);
                await Task.Delay(3000);
                throw new InvalidOperationException();
            }
            catch
            {
                Console.WriteLine("TestTask exception at " + DateTime.Now.ToLongTimeString() + ", " + Thread.CurrentThread.ManagedThreadId);
            }
        }
```
Run result:
```
Main starts at 21:12:02
Main ends at 21:12:05, 1
TestTask exception at 21:12:08, 7
```

Conclusions:
1. Starting sync code inside "async void" method will be executed on the same thread of the main thread. That's "Thread.Sleep(3000)" means.
2. Exception inside "async void" method cannot be catched if happend begins with the first async call because they are in different context. So if TestTask is without try/catch, then the application will be failed and no way to track.

Option 2: Task.Run
```
       static void Main(string[] args)
        {
            try
            {
                Console.WriteLine("Main starts at " + DateTime.Now.ToLongTimeString());
                Task.Run(TestTask);
                Console.WriteLine("Main ends at " + DateTime.Now.ToLongTimeString() + ", " + Thread.CurrentThread.ManagedThreadId);
            }
            catch (Exception ex)
            {
                Console.WriteLine("ex: " + ex.Message);
            }

            Console.Read();
        }

        static void TestTask()
        {
            try
            {
                Thread.Sleep(3000);
                Task.Delay(3000);
                throw new InvalidOperationException();
            }
            catch
            {
                Console.WriteLine("TestTask exception at " + DateTime.Now.ToLongTimeString() + ", " + Thread.CurrentThread.ManagedThreadId);
            }
        }
```
Run result:
```
Main starts at 22:14:17
Main ends at 22:14:17, 1
TestTask exception at 22:14:20, 4
```
Conclusions:
1. It's real "fire and forget" from the call.
2. Try/catch is also very important because the Main try/catch is impossible to catch the TestTask exception. But the TestTask failure does not affect the Main processing.

So always avoid Async Void and use Task.Run when you want "fire and forget". From its nature, take care of the exception handle and multiple threads scenario, please do not share any resources with the main thread.

FYI:
https://docs.microsoft.com/en-us/archive/msdn-magazine/2013/march/async-await-best-practices-in-asynchronous-programming
Completed Hacktoberfest'21
Tags: hacktoberfest
Published: 2021-11-11 09:20:05

With some knowledge in C, HTML, CSS, and Git, I started with my first ever Hacktoberfest. I worked with three different repositories and helped develop a responsive web page, design the UI/UX for a website, and made C language tutorials as part of my contribution. It gave me immense satisfaction to share my knowledge as a contribution to the Open-Source community. 
This event helped me level up my coding skills, made me more acquainted with Git, and helped me make some incredible connections. It has been a wonderful journey. Looking forward to adding more contributions to the Open-Source community.
CRYSTAL118
Tags: crystal118, crystal118official, trustedonlinecasino, onlinecasino
Published: 2021-11-11 09:12:34

CRYSTAL118 trusted company Malaysia

About CRYSTAL118
CRYSTAL118 is the trusted company in Malaysia since 2015. CRYSTAL118 has many games from all well-known providers in Malaysia ( 918kiss, Mega888, Pussy888, Evo888, XE88 and Suncity ).
Biometric authentication into YubiKey
Published: 2022-11-01 06:42:02

---
title: Biometric authentication into YubiKey
published: true
date: 2021-11-11 09:11:23 UTC
tags: 
canonical_url: https://mojoauth.com/blog/biometric-authentication-into-yubikey/
---

Security keys are easy to use, prevent phishing attacks, affordable, easy to use, and more secure than any other two-factor authentication. The biometric security key is a new generation of passwordless authentication. In this, we use a biometric authentication built right into a security key. Yubikey Bio Yubico has launched the YubiKey Bio, which supports biometric authentication for passwordless logins and multifactor authentication. In the Yubikey Bio, Once a fingerprint is enrolled on the device, the data is stored in a secure element.

[Read On](https://mojoauth.com/blog/biometric-authentication-into-yubikey/)
Leetcode 114. Flatten Binary Tree to Linked List
Tags: programming, java, algorithms, tutorial
Published: 2021-11-11 09:06:36

## Problem Statement

Given the root of a binary tree, flatten the tree into a "linked list":

The "linked list" should use the same TreeNode class where the right child pointer points to the next node in the list and the left child pointer is always null.
The "linked list" should be in the same order as a pre-order traversal of the binary tree.
 
## Test Cases

Example 1:


Input: root = [1,2,5,3,4,null,6]
Output: [1,null,2,null,3,null,4,null,5,null,6]
Example 2:

Input: root = []
Output: []
Example 3:

Input: root = [0]
Output: [0]
 

## Constraints:

The number of nodes in the tree is in the range [0, 2000].
-100 <= Node.val <= 100
 
## Algorithm :

1. Here we need to move all our left child nodes to right and append the already present right child node to the end.
2. So if we have left child node, first of all store the currently present right child to a variable and keep `root.right` as the left child. Then make the left child as null.
3. Then the stored right child is appended towards the end of the left child node that is recently attached.
![Moving left child to right and appending right child](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5cv9itcb8rvu9mv1do2.png)
4. Do recursion keeping the root node as root.right.
`recursion(root.right)`.

![Recursively proceeding with right child](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6eol5ei6s9dl2a3eh9f.png)


## Complexity : 

We are going through each of the node so time complexity O(n) and space will be O(H) as we use a recursion stack.

## Code : 

```java
/**
 * Definition for a binary tree node.
 * public class TreeNode {
 *     int val;
 *     TreeNode left;
 *     TreeNode right;
 *     TreeNode() {}
 *     TreeNode(int val) { this.val = val; }
 *     TreeNode(int val, TreeNode left, TreeNode right) {
 *         this.val = val;
 *         this.left = left;
 *         this.right = right;
 *     }
 * }
 */
class Solution {
    public void flatten(TreeNode root) {
        if (root == null) {
            return;
        }
        if (root.left != null) {
            TreeNode temp = root.right;
            root.right = root.left;
            root.left = null;
            TreeNode current = root.right;
            while (current.right != null) {
                current = current.right;
            }
            current.right = temp;
        }
        flatten(root.right);
    }
}
```

## Github : 

{%github Rohithv07/LeetCode %}
Bouncing Ball Animation using <li> tag
Tags: css, webdev, beginners, firstpost
Published: 2021-11-11 09:04:28

Hello, I'm new to this platform and this is my first post.
In this post I'll be sharing how we can create BOUNCING BALL animation using li tag.

• First of all create index.html
![HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynkw10w9b6j4o5v5euek.png)
That's it for html.

• Now move to CSS 
![CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b16babbnuk4wss5fgp2h.png)

Now add keyframes for animation
![CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ionboax9trd2c29kzryg.png)
*I used rem values so speed of bouncing vary as I change the window size. So feel free to change it. * 

• Final Result

YouTube: {% youtube ftf_2Khx_sg %}

IMPORTANT:-
As I mentioned that this my first post . So, please guide me how to write post on this platform and what mistakes I made in this post. 
I hope you enjoyed it ❤️.
Zooming and Panning Options with Blazor Charts
Tags: blazor, webdev, dotnet, csharp
Published: 2021-11-11 09:01:43

Learn how easily you can add zoom and pan effects to Syncfusion [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts). 

In this video, you will learn how to make Blazor Charts more interactive by adding zooming and panning features. You will see how to zoom a specific chart area using different zooming modes. Also, you will learn how to customize toolbar options and how to navigate zoomed areas using the panning option. 

Explore our tutorial videos: https://bit.ly/3CJL14w 

Download this example from GitHub: https://bit.ly/3CJm1KG

Get a free license: https://bit.ly/3jOTvQt

{% youtube -fqwvVMI9Ec %}
JavaScript : Bind Call & Apply Methods in Javascript
Tags: javascript, beginners, webdev, tutorial
Published: 2021-11-11 08:40:38

<b>JavaScript : Bind Call & Apply Methods in Javascript</b>
Have explained about most important methods that every Frontend developer /Fullstack developer must know.

Timeline :
----------------------------------------------------------------
00:00 What is in the Video
00:18 Bind() method
03:54 Pass Arguments using Bind method
04:41 Call() Method
06:30 Apply() Method

{%youtube IfbESOlDKuw%}
[SQL] Where vs Having?
Published: 2021-11-11 08:38:21

It is easy to be confused with these 2 clauses because A HAVING clause is like a WHERE clause.
⚠️WHERE clause applies to individual rows and HAVING clause applies only to groups as a whole.

A query can contain both a WHERE clause and a HAVING clause.

✔️The WHERE clause is applied first to the individual rows in the tables or table-valued objects in the Diagram pane. Only the rows that meet the conditions in the WHERE clause are grouped.

✔️The HAVING clause is then applied to the rows in the result set. Only the groups that meet the HAVING conditions appear in the query output. You can apply a HAVING clause only to columns that also appear in the GROUP BY clause or in an aggregate function.

📝As a rule of thumb, use WHERE before GROUP BY and HAVING after GROUP BY. It is a rather primitive rule, but it is useful in more than 90% of the cases.
Unit test for SSG
Tags: opensource
Published: 2021-11-11 08:17:53

Link: [PR](https://github.com/mkim219/kimchi-ssg/pull/22), [Repo](https://github.com/mkim219/kimchi-ssg)
For the task for open source development in this week is adding unit test for Static Site Generator(ssg). There are 3 testing framework options: [xUnit](https://xunit.net/), [NUnit](https://nunit.org/), and [MSTest](https://docs.microsoft.com/en-us/dotnet/core/testing/unit-testing-with-mstest). I have choose xUnit testing framework for unit testing because xUnit provides good documentation for creating unit test project and unit testing instruction.

Next step is setting up the environment. The first step of setting up environment creates unit testing project and include ssg project. The next step is most hardest part of the task because I have made ssg with static methods which is most testing frameworks do not support. The logic of Static method is assigned to the class itself not a instance of object. Therefore I have to find alternative way to test static methods. I found interesting [blog post](https://www.infoworld.com/article/3571962/how-to-unit-test-static-methods-in-csharp.html) that I can have unit test with static method! The author, Joydip Kanjilal recommends method called **"application – by using wrapper classes and dependency injection"** what it is wrap static methods call in instance methods and use dependency injection to inject instance to wrapper class to be tested. Now I can have unit test with static methods with mock framework called [moq](https://github.com/moq/moq). 

While I was writing the unit testing code, I found some interesting bug. When user choose empty text or markdown file for generating HTML, the application crushes. Therefore I have to handle the error if user input empty text or markdown file. Previous 2 months I have focused on ssg application. The application runs fine and I thought my application is bug free. However, I have found multiple bug during the unit testing. I definitely do unit testing for making better application.