teleren/devto huggingface dataset:
Iniciando mi camino con Python
Tags: python, beginners, 100daysofcode
Published: 2021-01-27 20:58:30

Mi nombre es Wilson, de 40 años que para muchos es muy viejo pero yo todavía no siento esa edad. Estoy finalizando en la universidad la carrera de ingeniería de software. La verdad son muchas cosas básicas que enseñan pero poco que quede como conocimiento consciente. 

Hace muchos años he querido hacer parte del gremio de desarrolladores, no importa que lenguaje y siempre me he quejado por que para empezar piden al menos dos años de experiencia y ninguna empresa brinda la oportunidad de empezar desde cero a menos que alguien te ayude. Sin embargo, eso cambió desde hace unos meses, ¿Qué ha cambiado? mi forma de pensar. Llegué a la conclusión que nunca tuve asesoría de nadie, ni un profesor, ni un amigo, ni un extraño. 

Si alguien me lo hubiera dicho en ese entonces estoy seguro que hace rato estaría metido en ese mundo. Dicen que si no programas a diario no te gusta la programación y en eso difiero, simplemente no ha sido consciente de como funcionan las cosas. 

No, todavía no he ingresado pero estoy dispuesto a seguir esos consejos que he escuchado durante los últimos meses que dicen que si no tienes experiencia en una empresa entonces hay que comenzar a crearla uno mismo con proyectos propios y por eso estoy aquí.

Hace ya algunas semanas he comenzado a estudiar desde cero la programación con Python, ya había tenido algo de experiencia académica con Java e hice un proyecto sencillo en php hace un par de años y debo decir que la experiencia con Python ha sido agradable. 

Dentro de la búsqueda de cursos encontré uno que tiene como objetivo realizar código durante 100 días y me ha gustado mucho por que diariamente estoy intentando crear algo que, aunque muy básico, me ha logrado retar varias veces mentalmente.

Con los próximos blogs empezaré a publicar los ejercicios básicos que he realizado. No voy a empezar con los primeros pero voy a dejar más abajo el repositorio donde se encuentra alojado por si alguien se anima a brindarme ideas de como mejorar alguno de ellos.

Para finalizar, resumo que mi objetivo con estos blogs es ir publicando ejercicios que voy realizando y subiendo a mi repositorio github y los explicaré según como los entiendo de la mejor manera para ayudarme a reforzar los temas vistos. Espero que salgan más cosas buenas de esto y si alguien ha leído esto hasta el final muchas gracias por la paciencia. 

[Repositorio 100 días de Código](https://github.com/WilsonGLan/Reto_100_dias.git)
Using React 17 in the angular 11 gives the error React is not defined when makes prod build but working fine in dev build.
Published: 2021-01-28 07:02:27

Hi I am following this URL to integrate React in angular https://medium.com/@zacky_14189/embedding-react-components-in-angular-the-easy-way-60f796b68aef

But when I make production build then in the browser console I got the error 
main.597a58e09c20f4baf37b.js:1 ERROR ReferenceError: React is not defined
    at e.render (14.30350cdd70a75b908595.js:1)
    at e.ngAfterViewInit (14.30350cdd70a75b908595.js:1)
    at Jt (main.597a58e09c20f4baf37b.js:1)
    at $t (main.597a58e09c20f4baf37b.js:1)
    at Zt (main.597a58e09c20f4baf37b.js:1)
    at on (main.597a58e09c20f4baf37b.js:1)
    at main.597a58e09c20f4baf37b.js:1
    at on (main.597a58e09c20f4baf37b.js:1)
    at Rn (main.597a58e09c20f4baf37b.js:1)
    at main.597a58e09c20f4baf37b.js:1
Difference between 'extends' and 'implements' in TypeScript
Tags: typescript, oop
Published: 2021-01-28 15:45:09

Today, a friend ask about the difference between `extends` and `implements`.

```typescript
class Media {
  format: string;
}
class Video extends Media {}
class Image implements Media {}
```

The short answer for him was:

extends: The class get all these methods and properties from the parent, so you don't have to implement.

implements: The class has to implement methods and properties. 

I hope this is can help someone with the same question.
AWS CloudFormation Templates: Getting Started. Available Now
Published: 2021-01-28 17:23:44

I'm excited to announce a new course is available now in the Pluralsight library,  

The AWS CloudFormation Templates: Getting Started course shows you step by step how you can use CloudFormation Templates to codify your infrastructure, providing you with a single source of truth and allowing you to automate the deployment of your infrastructure.  You will explore how to create resources, discover how to use parameters and outputs and how to define mappings. When you’re finished with this course, you’ll have the skills and knowledge of CloudFormation templates needed to create templates for your own infrastructure.

Find it now only on [Link](https://pluralsight.com)Pluralsight.
Working with Docker and other unix-things on Windows like on macOS or Linux
Tags: windows, wsl, docker, jetbrains
Published: 2021-01-29 04:14:38

1. [Install WSL 2](https://docs.microsoft.com/en-us/windows/wsl/install-win10)
1. [Install Ubuntu (or other distro) into WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10#step-6---install-your-linux-distribution-of-choice)
1. Place your project files in Linux inside WSL using path like `\\wsl$\Ubuntu\home\username\Work`. You can access them from using Explorer since it's network location for Windows. Just Enter `\\wsl$\` into location bar and you will see available WSL locations.
  ![Windows Explorer location autocomplete hints for available WSL locations](https://dev-to-uploads.s3.amazonaws.com/i/ju0dml5w0ablmza0kw5w.png)
1. Open it in JetBrains IDE
  ![JejtBrains IDE Open dialog recognizing Linux filed installed in WSL](https://dev-to-uploads.s3.amazonaws.com/i/82brbmsbo0ziizo3fikn.png)
1. Install [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop)
1. Enable WSL 2 support in Docker Dashboard Settings
  ![Docker Dashboard Settings - Resources - WSL Integration](https://dev-to-uploads.s3.amazonaws.com/i/xc1f9awd4bwuq0mfnxj3.png)
1. Open WSL Command Line, go to project folder and initialize Docker configuration. For example: `docker-compose up -d`.
1. Now you can see Docker Desktop give you access to containers you just build.
  ![Docker Dashboard recognizing containers built in Linux installed in WSL](https://dev-to-uploads.s3.amazonaws.com/i/xlbsf1df8x872xmwolfs.png)
1. Now you can work with containers into JetBrains IDE Services pane, connecting to Docker daemon using "Docker for Windows" option.
  ![JetBrains IDE - connecting to Docker daemon using "Docker for Windows" option](https://dev-to-uploads.s3.amazonaws.com/i/4ms07iq7g53m89zf96nw.png)
  ![Access to WSL Docker from JetBrains IDE Services pane](https://dev-to-uploads.s3.amazonaws.com/i/c6gwb8j62jgd0k8arvzg.png)

TIP after installing Docker Desktop, you can notice you can open Docker frontend in browser, but not frontend from WSL (like `npm run start`). To fix that, create [`.wslconfig` file](https://docs.microsoft.com/en-us/windows/wsl/wsl-config#configure-global-options-with-wslconfig) in your home folder (`C:\Users\username`) and fill it:

```
[wsl2]
memory=4GB
swap=0
localhostForwarding=true
```

The key you want to change is `localhostForwarding`.

Found it [here](https://github.com/microsoft/WSL/discussions/2471#discussioncomment-113621).
Container v0.1 Released - with Attributes Injection
Tags: php
Published: 2021-01-29 11:35:43


https://github.com/apexpl/container/

A lightweight, straight forward dependency injection container that simply works, and works well.  Supports config file and all standard injection methods -- constructor, setter, annotation, plus also attributes.  Also includes a `Di` wrapper class that allows container methods to be accessed statically for greater simplicity and efficiency.
The must listen Podcast If you are a CEO 
Tags: podcast, leadership, watercooler
Published: 2021-01-29 14:35:37

Business wars is amazing podcast series. In which the host David Brown discusses the business strategies and competition between the biggest business in the world.

The best series so far for me was Netflix vs Blockbuster. Blockbuster's was the pioneer in movie rental business. In 2000 Netflix offered Blockbuster a partnership which Blockbuster turned down and rest is the history.

Do check out this 8 episode series on Spotify.
{% spotify spotify:episode:1it9SpNQQ4VmbwWipKj52o %}

Some amazing series from Business Wars:

* **Nike vs Adidas**
* **eBay vs PayPal**
* **Marvel vs DC**
* **Red bull vs Monster**
* **Coke vs Pepsi**
* **McDonalds vs Burger King**
* **Ferrari vs Lamborghini**

Have you heard any of this series. If yes, do let me know which one is your favourite in comments section
Azure Calling Functions
Published: 2021-02-09 22:31:57

Your frontend is able to call an Azure Function using any type of HTTP Request. 

Simply ensure that the function name is preceded with the segment /api/ as shown here:

```json
https://xyz.azurewebsites.net/
  api/Function1'
```
However to get this to work, the Function application's CORS configuration must include the Origin found in the request header.  

From there it's functions all the way.

JWP2021 Azure Function CORS
Go to ~base install in ubuntu
Tags: ubuntu
Published: 2021-02-04 09:17:20

I relalized that there is no free space in my root parition. I installed a lot of stuff with a lot of libraries but there are became unnecessary now.
What you can do with it ?
I tried to remove all packages what was installed after the first booting.
You can start with the ubuntu manifest file which one is contains the all packages what is necessary for a working system.
Create a packages list from your's computer.
<code>sudo apt list --installed</code>
Download the ubuntu's manifest file from here: https://releases.ubuntu.com/20.04/ubuntu-20.04.1-desktop-amd64.manifest
Make a diff: 
diff original.pkgs current.pkgs
Prepare this file with you favorite editor and remove the unnecessary packages. The result should be like this "sudo apt remove --purge ...".
It is not perfect because I have ~4Gb more then the first install was. But it is enough to reach ~10Gb free space in my root partition.
If you have a working script or and other way what you used to use, please let me know :)
Reactive Forms And Form Validation In Angular With Example
Tags: angular, node
Published: 2021-02-13 03:55:26

This tutorial we are learn how to create Reactive Forms And Form Validation In Angular With Example very simply form see below:
provides a model-driven approach to handling form inputs value change over time. In this form reactive form, we need to import "ReactiveFormsModule" from the angular forms library. We will use FormControl, FormGroup, FormArray, Validation class with Reactive forms in angular.

**[Reactive Forms And Form Validation In Angular With Example](https://www.phpcodingstuff.com/blog/reactive-forms-and-form-validation-in-angular-with-example.html)**

**src/app/app.component.html**
```
<h1>Reactive Forms And Form Validation In Angular With Example - phpcodingstuff.com</h1>
  
<form [formGroup]="form" (ngSubmit)="submit()">
      
    <div class="form-group">
        <label for="name">Name</label>
        <input formControlName="name" id="name" type="text" class="form-control">
        <span *ngIf="form.name.touched && form.name.invalid" class="text-danger">Name is required.</span>
    </div>
   
    <div class="form-group">
        <label for="email">Email</label>
        <input formControlName="email" id="email" type="text"  class="form-control">
        <span *ngIf="form.email.touched && form.email.invalid" class="text-danger">Email is required.</span>
    </div>
   
    <div class="form-group">
        <label for="body">Body</label>
        <textarea formControlName="body" id="body" type="text" class="form-control">  </textarea>
          <span *ngIf="form.body.touched && form.body.invalid" class="text-danger">Body is required.</span>
    </div>
  
    <button class="btn btn-primary" type="submit">Submit</button>
</form>
```
**src/app/app.component.ts**

```
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';     // <----------------- This code---------------
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor() { }

  ngOnInit(): void {

  }

  form = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', Validators.required),
    body: new FormControl('', Validators.required)
  });
 
  
  submit(){
    console.log(this.form.value);
  }
  
}
```

Original source : *[https://www.phpcodingstuff.com/blog/reactive-forms-and-form-validation-in-angular-with-example.html](https://www.phpcodingstuff.com/blog/reactive-forms-and-form-validation-in-angular-with-example.html "https://www.phpcodingstuff.com/blog/reactive-forms-and-form-validation-in-angular-with-example.html")*
My javascript / tech / web development newsletter for 13-02-2021 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-02-13 13:37:50

---
title: My javascript / tech / web development newsletter for 13-02-2021 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Governments, DevOps CI/CD, GameStop, SSH Tunnels, Jobs’ keynotes, OSS, audioOnUnix, Jack Dorsey, blogging, NFTs, CAPEX, Apple, Disney, Jamstack, websockets, k8s, Kafka, Lambda, Tesla, cool podcasts...

https://markjgsmith.substack.com/p/mark-smiths-newsletter-13-02-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Create self signed certificates for Kubernetes using cert-manager
Tags: kubernetes
Published: 2021-02-13 21:37:22

## Install Cert manager in Kubernetes

Read this for up-to-date instructions: https://cert-manager.io/docs/installation/kubernetes/

```bash
# Kubernetes 1.16+
$ kubectl apply —validate=false -f https://github.com/jetstack/cert-manager/releases/download/v1.0.2/cert-manager.yaml
```

## Create a keypair secret

In this step create a new k8s secret that contains the TLS CA cert and key that is used by cert manager to issue new certificates. As a prerequisite, we need a CA certificate and associated key encoded in base64.

```yaml
apiVersion: v1
kind: Secret
metadata:
  name: ca-key-pair
  namespace: default
data:
  tls.crt: <tls-key-base64-encoded>
  tls.key: <tls-key-base64-encoded>
```

## Create an issuer

Issuers are used by Cert manager to issue new certificates

```yaml
apiVersion: cert-manager.io/v1
kind: Issuer
metadata:
  name: ca-issuer
  namespace: default
spec:
  ca:
    secretName: ca-key-pair
```

## Create certificates

This creates new certificate using the issuer and CA key pair created earlier. In the following example, the certificate is stored as k8s secret `k8s-xps-lan` in default namespace.

```yaml
apiVersion: cert-manager.io/v1alpha2
kind: Certificate
metadata:
  name: k8s-xps-lan
  namespace: default
spec:
  secretName: k8s-xps-lan
  issuerRef:
    name: ca-issuer
    # We can reference ClusterIssuers by changing the kind here.
    # The default value is Issuer (i.e. a locally namespaced Issuer)
    kind: Issuer
  commonName: k8s.xps.lan
  organization:
  - XPS.LAN
  dnsNames:
  - gitlab.xps.lan
  - minio.xps.lan
  - registry.xps.lan
  - k8s.xps.lan
  - kibana.xps.lan
  - elastic.xps.lan
```

In a separate post, we will see how this certificate can be used by ingress-nginx and other applications.
Animated Sonar Screen - CSS Only
Tags: codepen, css, animation, frontend
Published: 2021-02-13 22:26:55

<p>Old ship styled sonar screen built with CSS only. Animated rotary effect which hides and reveals ships is built with conic-gradient() function so it only works in Chrome/Firefox. </p>

{% codepen https://codepen.io/nikolab/pen/poNEgKW %}

<p>Feel free to comment, fork, upgrade and use for any purpose.</p>





If you liked this article, consider buying me a <a href="https://www.buymeacoffee.com/nikolab">coffee</a>.
What are CSS Variables?
Tags: webdev, css, programming, codenewbie
Published: 2021-02-14 04:27:38

CSS Variables is a big win for Front-end Developers. It brings the power of variable to CSS, which results in less repetition, better readability and more flexibility. 

---

 In this example below, it's much better to create a variable for the `#ff6f69` colour then repeating it. 

```css
 /*THE OLD WAY */

#title {
    color: #ff6f69; 
 }
 .quote {
    color: #ff6f69;
 }
```

 THE NEW WAY

```css
 :root {
    --red: #ff6f69;    /* <--- Declaring Variabke */
 }
 /*USING THE VARIABLE*/

#title {
    color: var(--red);
 }
 .quote{
    color: var(--red); 
 }
```

 More flexibility in case you want to change colour. 

---

### Benefits

- Reduces repetition in your stylesheet
- They don't require any transpilling to work
- They live in the DOM, which opens up a ton of benefits

---

### Declaring a Local Variable

 You can also create local variables, which are accessible only to the element it's declared at and to its children. This makes no sense to do if you know that variable only will be used in a specific part of your app. 

```css
 .alert {
    --alert-color: #ff6f69; /*This variable can now be used by its children*/
 }

 .alert p {
    color: var(--alert-color);
    border: 1px solid var(--alert-color);
 }
```

 If you tried to use the `alert-color` variable somewhere else in your application, it simply wouldn't work. The browser would just ignore that line of CSS. 

---

### Easier responsiveness with Variables

 You can, for example, change the variables based upon the width of the screen: 

```css
 :root {
    --main-font-size: 16px;
 }
 media all and (max-width:600px) {
    :root {
        --main-font-size: 12px;
    }
 }
```

 And with those simple four lines of code, you have updated the main font-size across your entire app when viewed on small screens. 

---

### How to access variables with JavaScript

 Grabbing a CSS variable in JavaScript takes three lines of code. 

```javascript
 var root = document.querySelector(':root'); 
 var rootStyles = getComputedStyle(root); 
 var mainColor = 
    rootStyles.getPropertyValue('--main-color'); 
 console.log(mainColor); 
--> '#ff6f69'
```

 To update CSS variables: 

```javascript
 root.style.setProperty('--main-color','#88d8b0')
```

---

 > Currently, 77% of global website traffic supports CSS Variables. 

 ⌚Thanks For Reading | Happy Coding ☕



Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
linux command tips
Published: 2021-12-10 17:38:32

---
title: linux command tips
published: true
description: liste of linux commande i user thid week
tags: 
//cover_image: https://direct_url_to_image.jpg
---
Hi all, my second post on dev not an original post but i will describe here what's linux command i have used last week.

 
## CTRL+r command 

This command help me a lot. With this command i can search in my past command. very usfull when you always make the same command again and again.

## !! command
I used this command to Replay the last command. Exemple : nano /var/log/syslog (error because non sudo)
Juste type sudo !! and the command open directly the syslog file.

## |Echo$? command
 With that i can see the return of the program

## Cpu burn 
If you want to test a program with full cpu 

dd if=/dev/zero of=/dev/null

fullcpu() { dd if=/dev/zero of=/dev/null | dd if=/dev/zero of=/dev/null | dd if=/dev/zero of=/dev/null | dd if=/dev/zero of=/dev/null & }; fullcpu; read; killall dd

## Number of open ssh connection 

sudo netstat -tulpn | grep LISTEN
Validation using schematron in java by example
Published: 2021-03-01 04:44:17

---
title: Validation using schematron in java by example
published: true
description: We write a simple example in java to run a validation using Schematron. The framework Schematron is a way to do easy validation of XML documents and create output that is easily readable by someone working with these documents.
tags:
cover_image: https://i.ytimg.com/vi/0OCULBADZr4/maxresdefault.jpg
---

{% youtube 0OCULBADZr4 %}

We write a simple example in java to run a validation using Schematron. The framework Schematron is a way to do easy validation of XML documents and create output that is easily readable by someone working with these documents.
Perl programmers are Mandalorians
Tags: perl, mandalorians
Published: 2021-02-16 17:53:44

![Mando and baby Yoda](https://dev-to-uploads.s3.amazonaws.com/i/29ivqa7a5jg5o7uqz47n.jpeg)

***The Perl programmers were a clan-based cultural group that was composed of members from multiple species all bound by a common culture, creed, and code. They originated on the planet Unix in the Outer Rim Territories and had a particularly important role in Internet history as legendary hackers/gurus.***

Experienced Perl programmers are powerful and respected, but sometimes suffer from being rejected by other cultures that do not embrace Perl qualities.

***Perl masters were some of the most feared warriors in the galaxy.***

They are now spread all over the universe, sometimes exiled. They often prefer to stay discrete.
![Hide](https://dev-to-uploads.s3.amazonaws.com/i/imley79qf9cfjdw9lpv2.jpeg)

***Perl programmers respect the creed:***
***- sharing - portability - stability -***
![Creed](https://dev-to-uploads.s3.amazonaws.com/i/ac501qni64swgoukw64a.jpeg)

When people meet a Perl programmer, they have a strange reaction then look at him and say "so you're one of them?"
![Never met real Mandalorian](https://dev-to-uploads.s3.amazonaws.com/i/i3a2x62x9kibgj7m41qy.png)

Perl programmers are **Mandalorians**
![Perl users are Mandalorians](https://dev-to-uploads.s3.amazonaws.com/i/f2t0zisq4rqvobxq7evi.jpeg)
JavaScript Interview Question #38: Can you add multiple arrays in JavaScript?
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-05-06 11:40:55

![js-test-38](https://learn.coderslang.com/js-test-38.png)

Can you add multiple arrays in JavaScript? What’s the output?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

The function `add(x, y, z)` applies the `+` operator to the provided arguments. Or, simply put, adds them up.

In line 5 we provide it with 3 arrays.

Whenever you try to add arrays in JavaScript, they will be first converted to strings. Every element is separated from the next one by a comma and a single space. In our case:

- `1, 2`
- `3, 4`
- `5, 6`

Then these strings are concatenated, or “glued” together to make a result.

---

**ANSWER**: a string `1, 23, 45, 6` will be printed to the console.

[Learn Full-Stack JavaScript](https://js.coderslang.com)
Get JSON Data from API Call and pass it to component as a parameter
Tags: fetch, apicall, jsondata, passingparametertocomponent
Published: 2021-02-16 15:46:06

I have a URL that I am returning Json data, that is need to pass as a parameter to react component, that component is: https://rsuitejs.com/components/multi-cascader

and here is my code:

fetch('http://ABCServer/LabMag/Home/GetCategories')
    .then(response => response.json())
    .then(json => console.log(json));





ReactDOM.render(<div>
    <p>Cascade: </p>
    <MultiCascader data={json} style={{ width: 424 }} uncheckableItemValues={b}/>
    <hr />
    <p>Not cascaded:</p>
    <MultiCascader cascade={false} data={data} style={{ width: 224 }} />
      </div>, document.getElementById('root'));