teleren/devto huggingface dataset:
Angular 14 en 3 features
Tags: angular, javascript, frontend, french
Published: 2022-06-07 21:50:29

Depuis le 2 juin 2022, la core team Angular a released la version 14 d'Angular.

Voici le top 3 de ce que j'ai retenu :

- 𝐒𝐭𝐚𝐧𝐝𝐚𝐥𝐨𝐧𝐞 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭

Les composants autonomes font leur apparition en 𝘥𝘦𝘷𝘦𝘭𝘰𝘱𝘱𝘦𝘳 𝘱𝘳𝘦𝘷𝘪𝘦𝘸.
Plus besoin de créer un NgModule pour pouvoir importer/utiliser votre composant.

Disponible également pour les directives et les pipes.

https://angular.io/guide/standalone-components
https://blog.ninja-squad.com/2022/05/12/a-guide-to-standalone-components-in-angular/

- 𝐂𝐨𝐦𝐩𝐢𝐥𝐞𝐫 𝐚𝐧𝐝 𝐩𝐫𝐨𝐭𝐞𝐜𝐭𝐞𝐝 𝐦𝐞𝐦𝐛𝐞𝐫𝐬

Vous le savez déjà mais jusqu'à Angular 14, on ne pouvait mettre que des 𝘢𝘵𝘵𝘳𝘪𝘣𝘶𝘵𝘴 de classe public dans les 𝘵𝘦𝘮𝘱𝘭𝘢𝘵𝘦𝘴.
On peut désormais ajouter des attributs 𝐩𝐫𝐨𝐭𝐞𝐜𝐭𝐞𝐝 !

- 𝐓𝐲𝐩𝐞𝐝 𝐀𝐧𝐠𝐮𝐥𝐚𝐫 𝐅𝐨𝐫𝐦𝐬

Le typage strict des 𝘙𝘦𝘢𝘤𝘵𝘪𝘷𝘦 𝘍𝘰𝘳𝘮𝘴 arrive enfin !

https://angular.io/guide/typed-forms

- 𝐁𝐨𝐧𝐮𝐬 : 𝐂𝐡𝐚𝐧𝐠𝐞 𝐝𝐞𝐭𝐞𝐜𝐭𝐢𝐨𝐧 𝐛𝐲 Minko Gechev

En bonus, Minko vous propose de revoir les optimisations que l'on peut faire avec le changement détection et l'optimisation du runtime.

By the way, Thanks Minko Gechev for your video !
{% embed https://www.youtube.com/watch?v=f8sA-i6gkGQ %}




Vous voulez creuser un peu plus sur les nouveautés ?
C'est par ici :

https://blog.angular.io/angular-v14-is-now-available-391a6db736af
https://blog.ninja-squad.com/2022/06/02/what-is-new-angular-14.0/
(Merci la Ninja Squad)

______

Merci d'avoir lu cet article ! 
Il a été posté initialement sur mon [site](https://necraidan.com) : https://necraidan.com/blog/angular-14-3-features

J'anime également un podcast sur le front-end :
https://anchor.fm/front-end-chronicles

ou directement sur *spotify* pour le dernier épisode : {% embed https://open.spotify.com/episode/4dgdQSPeo5SZbN71qikxcQ %}
Using boxicons in Vue app, installing with npm
Tags: boxicons, vue, npm, icon
Published: 2022-06-07 21:40:05

1. install the boxicons using npm
`npm install boxicons --save`

2. if you want to use it as a font, you need to import it in your `main.js` file, thanks to this [github issue](https://github.com/lusaxweb/vuesax-next/issues/110#issuecomment-734065844)

use it as a font `import "boxicons/css/boxicons.min.css";`
use it as a web-component `import "boxicons/dist/boxicons.js";`

for usage, checkout the documentation [https://boxicons.com/usage](https://boxicons.com/usage)

if you have another way to use it, feel free to discuss

thanks for reading
Letter Combinations of a Phone Number
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 21:30:37

Given a string containing digits from `2-9` inclusive, return all possible letter combinations that the number could represent. Return the answer in **any order**.

A mapping of digit to letters (just like on the telephone buttons) is given below. Note that 1 does not map to any letters.

![](https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Telephone-keypad2.svg/200px-Telephone-keypad2.svg.png)

**Example 1:**

**Input:** digits = "23"
**Output:** \["ad","ae","af","bd","be","bf","cd","ce","cf"\]

**Example 2:**

**Input:** digits = ""
**Output:** \[\]

**Example 3:**

**Input:** digits = "2"
**Output:** \["a","b","c"\]

**Constraints:**

*   `0 <= digits.length <= 4`
*   `digits[i]` is a digit in the range `['2', '9']`.

**SOLUTION:**

    class Solution:
        def letterCombinations(self, digits: str) -> List[str]:
            comb = {
                '2': ['a', 'b', 'c'],
                '3': ['d', 'e', 'f'],
                '4': ['g', 'h', 'i'],
                '5': ['j', 'k', 'l'],
                '6': ['m', 'n', 'o'],
                '7': ['p', 'q', 'r', 's'],
                '8': ['t', 'u', 'v'],
                '9': ['w', 'x', 'y', 'z']
            }
            if len(digits) == 0:
                return []
            words = [c for c in comb[digits[0]]]
            i = 0
            while i < len(words):
                curr = words[i]
                if len(words[i]) == len(digits):
                    break
                if len(curr) < len(digits):
                    for c in comb[digits[len(curr)]]:
                        words.append(curr + c)
                i += 1
            return words[i:]
I created a simple Morse Code Converter that can generate equivalent sounds
Tags: morsecode, javascript, handlebars, bootstrap
Published: 2022-06-07 21:21:59

---
title: I created a simple Morse Code Converter that can generate equivalent sounds
published: true
description: 
tags: #morsecode #javascript #handlebars #bootstrap
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzyarhzk6nf1yby47kqf.png
# Use a ratio of 100:42 for best results.
---

> **Morse code** is a method used in telecommunication to encode text characters as standardized sequences of two different signal durations, called dots and dashes, or *dits and dahs*.

I create a simple Morse Code Converter that converts typed-text to Morse Code (vice-versa), both visually and in audio format.

![Desktop View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kybwzt4dk7469nmwavcp.png)

The converter fields could accept either Text (English) or Morse Code and could convert them to one another. The both scenarios the audio played will be of the Morse Code.

![Mobile View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i49ewqqfd6bw93lry631.png)

Here in this project, Morse Code is represented visually using _periods **(.)**_ and _hyphens **(-)**_. The input fields aren't case sensitive. But while converting Morse Code back to text, it displays result as in Uppercase.

---

#### 🌟 Buttons
> - `CONVERT` - Convert Text to Morse Code
> - `RESET` - Clear the input fields
> - `COPY TO CLIPBOARD` - Copy the Morse Code result to clipboard
> - `PLAY AUDIO` - Replay the Audio result of Morse Code

---

#### 🌟 Dev Stack
> - Handlebars (HTML, CSS *(Bootstrap)*)
> - JavaScript
> - Web Audio API

---

#### :rocket: [Demo Link](https://verbose-reflective-recorder.glitch.me/)
#### :detective: [GitHub Repo](https://github.com/decoded-cipher/morsecode-converter)
📏 Resize Observer API
Tags: resize, observer, api, resizeobserver
Published: 2022-06-07 21:12:39

Resize Observer interface reports changes to the dimensions of an HTML *elements* .

### How to use

It is very simple to use and in some special cases, can be used as an *javascript* alternative to *CSS @media query.*

You need to create a new ResizeObserver instance

	const observer = new ResizeObserver(entries =>{
	    // console.log(entries[0]);
	    ...
	});

then you need to **observe ** the HTML element, in this case the main *container*

	observer.observe(container);

Now whenever the container size changes, the observer returns an object with the new *width* and *hight* values, 
values that can be used to manipulate elements within the page.

In this video you can see a simple example

have a good day 👋

{% embed https://youtu.be/hDPR8VNn6vU %}
Functions. Learning Go - part 3.
Tags: go, beginners, programming
Published: 2022-06-07 20:34:20

My today’s subject is functions. 
Functions are the core of programming in Go. 

1. We can declare our own functions and call them in every place in the package.

2. Usually, the name of the function starts in lower case but the function which name starts in a capital letter can be used outside the package. 

3. Each function can take zero or more arguments.
If our function takes arguments we have to declare their types. We write the name of a parameter and its type in parenthesis just after the function name. If we want to pass more than one argument we need to separate each declaration with a coma. 

 ```go
 func sum(a int, b int) {
	fmt.Println(a + b)
 }
 ```

 If the arguments are the same type, we can add the type to 
 the last one only. `func sum(a, b int)` it means that both 
 parameters’ type is the same.

 

4.
 Now, we can call our function inside the main() function. 
 We can’t forget about passing the arguments (of course, if 
 the function requires any). 

 ```go
 package main 
	import “fmt” 
	
 func main() {
	sum(5, 7)
 }

 func sum(a int, b int) {
	fmt.Println(a + b)
 }
 ```
 5. If we want to be able to use the output of our function, we need to return something.
A function that only prints the results doesn’t “last long”. In the example above, the function only prints the sum of two numbers but then, the result is removed.
Our sum function could be very helpful if we would like to build a simple calculator but only when we add a return statement. 
One more thing. We already declared the types of arguments that our function takes, now we also have to declare the type of the value the function returns. We are adding it after the brackets with parameters. 
Let’s add those two elements to our sum function:

 ```go
 func sum (a, b int) int {
	return a + b 
 }
 ```
 6. Functions can return more than one value, so we have to declare all those values. Then we put them all into another pair of brackets.
Let’s look at the divide function. Working on our calculator we should remember that it’s not possible to divide by zero. We have to handle such a case. 

 ```go
 func divide(a, b float64) (float64, error) {
    if b == 0.0 {
        return 0, errors.New(“You can’t divide by  zero”) //1
    }
 return a / b, nil //2
 }
 ```

Now, as we declared that our function will return two values, we have to have those two values in every return statement. That’s why in the first if block (1) we have two elements one of them can be zero and the other will be the information about the error. 
If argument b is not equal to zero, the next block (2) will be executed. Here we also need to return 2 values: the result of the division and nil. Nil informs us that there are no mistakes in our function.

I think those are the very basics of functions in Go. 

_(If you can see that numbers of li elements are weird - like a bunch of 1 - I don't know how to fix it here)_
Paracetamol.js💊| #135: Explica este código JavaScript
Tags: javascript, programming, spanish, webdev
Published: 2022-06-07 20:54:00

## **<center>Explica el siguiente código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
const f = (arr) => {
  return arr.map((item) => {
    return {
      nombre: item.nombre.toUpperCase()
    }
  })
}
console.log(f([
  {
    id: 1,
    nombre: "Luis",
    edad: 20
  },
  {
    id:2,
    nombre:"Carlos",
    edad:26
  }
]))
```

A. `["LUIS", "CARLOS"]`
B. 
```js
[
  {
    nombre: "luis",
  },
  {
    nombre:"carlos",
  }
]
```
C.
```js
[
  {
    nombre: "LUIS",
  },
  {
    nombre:"CARLOS",
  }
]
```
D. Ninguno de los anteriores. 

Respuesta en el primer comentario.

---
Configure Makefile to run command inside a container
Tags: makefile, php, composer, docker
Published: 2022-06-07 20:53:26

---
title: Configure Makefile to run command inside a container
published: true
description: run a command inside the container as if you were in your own host
tags: makefile, php, composer, docker
series: makefile
---

Forgetting a command is extremely easy for me, ... that's why Makefiles have been my friends for a long time. And then ... There is nothing more frustrating than having to go back and forth from your host to the container and vice versa. What if there was an easy way to run commands inside the container but always staying in your machine?

In the following post I want to share an interesting way to use Makefile to run commands inside a container. Current example show how to run composer from the host. I'll show you three simple configurations of:

 - docker-compose.yml
 - Dockerfile
 - Makefile

The focus here is the configuration of the Makefile so don't pay too much attention to the `docker-compose.yml` file or the `Dockerfile` file. They could be improved, ... but the main focus here is just the Makefile.

## docker-compose.yaml

This example is trivial and just define the context of the service where we will find our Dockerfile. To keep alive the container I'll use an entrypoint. The purpose here is just to create a service that simply stay alive.

```yaml
version: '3.7'

services:
    php-dev-to:
        restart: always
        build:
            context: . 
        entrypoint: ["tail", "-f", "/dev/null"]
```

## Dockerfile

Here we have the Dockerfile. As you can se, ... we have just the alpine image ad the composer. Composer is installed from another image. A nice trick that I simply love.

```Dockerfile
FROM php:8.1-alpine
COPY --from=composer:latest /usr/bin/composer /usr/local/bin/composer
```

## Makefile

Last but not least the `Makefile`. This file contains few variables. Targets up and build are self explanatory. The target that convinced me to share this Makefile usages is the composer target:

```Makefile
composer:
	$(docker_exec) $(php_container) composer $(args)
.PHONY: composer
```

Whenever we type `make composer <something>`, the content of `<something>` is sent to the container via `$(args)` that is a varialbe defined via `$(filter-out $@,$(MAKECMDGOALS))`. For example is possibile to install phpunit inside the container usging `make composer require phpunit/phpunit`.

Here the complete Makefile.

```Makefile
php_container := php-dev-to
docker := docker-compose
compose	:= $(docker) --file docker-compose.yml
docker_exec := $(compose) exec
args = $(filter-out $@,$(MAKECMDGOALS))

build:
	$(docker) up --build -d
.PHONY: build

up:
	$(docker) up -d
.PHONY: up

composer:
	$(docker_exec) $(php_container) composer $(args)
.PHONY: composer
```

## Follow me

If you like this post please leave a comment below and/or start to follow me to see next articles.
GitHub Copilot explaining code and translating it from one language to another
Tags: github, githubcopilot, machinelearning
Published: 2022-06-07 20:53:12

---
title: GitHub Copilot explaining code and translating it from one language to another
published: true
description: The GitHub Copilot labs extension teases even more features, like explaining code to the user or translating from one programming language to another.
tags: github, copilot, machinelearning
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

[GitHub Copilot](https://copilot.github.com/) is already the dog's bollocks, but I just installed the [GitHub Labs extension](https://githubnext.com/projects/copilot-labs/) and my jaw is still open.

## Code explanation

This one allows you to highlight a piece of code and get explanations of what it does:

![Screencast showing the explanation feature in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7r95q9p57n5qnh4evk3.gif)

For example:

```javascript
async function downloadZipFile(downloadUrl) {
  await fs.remove('out/edge');

  const file = fs.createWriteStream('edge.zip');
  https.get(downloadUrl, function(response) {
    response.pipe(file);
    response.on('end', async ()=>{
      await fs.createReadStream('edge.zip').pipe(unzipper.Extract({path: 'out/edge/'}));
      await fs.unlink('edge.zip', () => {} );
      const outdir = path.join(__dirname, 'out', 'edge');
      console.log(`Edge files extracted to: ${outdir}`);
    });
  });
}
```

Turns into:

1. We first delete the 'out/edge' folder.
1. We downoad the Edge.zip file from the GitHub release page.
1. We unzip the Edge zip file to the 'out/edge' folder.
1. We print a message to the console. 

## Code translation 

You can also highlight a piece of code and it gets translated to another language. For example, JavaScript to PHP.

![Screencast of GitHub Copilot translating JavaScript to PHP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e4oxfraxypc94h5zr5h.gif)

I am so looking forward to where this is all going!
Minimum Deletions to Make String Balanced
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 20:30:42

You are given a string `s` consisting only of characters `'a'` and `'b'`​​​​.

You can delete any number of characters in `s` to make `s` **balanced**. `s` is **balanced** if there is no pair of indices `(i,j)` such that `i < j` and `s[i] = 'b'` and `s[j]= 'a'`.

Return _the **minimum** number of deletions needed to make_ `s` _**balanced**_.

**Example 1:**

**Input:** s = "aababbab"
**Output:** 2
**Explanation:** You can either:
Delete the characters at 0-indexed positions 2 and 6 ("aababbab" -> "aaabbb"), or
Delete the characters at 0-indexed positions 3 and 6 ("aababbab" -> "aabbbb").

**Example 2:**

**Input:** s = "bbaaaaabb"
**Output:** 2
**Explanation:** The only solution is to delete the first two characters.

**Constraints:**

*   `1 <= s.length <= 105`
*   `s[i]` is `'a'` or `'b'`​​.

**SOLUTION:**

    class Solution:
        def minimumDeletions(self, s: str) -> int:
            n = len(s)
            minDel = float('inf')
            curr = 0
            for i in range(n + 1):
                minDel = min(minDel, i - 2 * curr)
                if i < n and s[i] == 'a':
                    curr += 1
            minDel += curr
            return minDel
Unit testing your AWS infrastructure
Tags: aws, dotnet, iac, cdk
Published: 2022-06-07 20:19:59

Everyone loves infrastructure as code because it gives you consistency across environments as no manual steps will be forgotten and it makes it easier to handle infrastructure. Writing software defined infrastructure inside AWS started with CloudFormation which is a low level interaction (YAML/JSON templates). 

AWS CDK offers a higher level of abstraction, by compiling your code into CloudFormation YAML templates, which are then used to provision AWS resources. The fact that AWS CDK offers you the ability to write IaC in our own language of choice (JavaScript, TypeScript, Python, Java, C# and Go), makes it very attractive as you can use programming idioms and your infrastructure output can be used as input for your runtime code. 

Since you can write infrastructure as code, let's see how you can write unit tests. We will be creating the following AWS resources using CDK and will write unit tests for them using C#.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrkwfyruc9gua1jp441u.PNG)
# AWS Infrastructure
1. IAM Role which has permissions to create and write logs into CloudWatch and has custom DynamoDB API permissions for a particular table and all its indexes. 
{% gist https://gist.github.com/murariuroger/5c2108b6b2ca4145e6c13fe1bfcb2491 %}

2. Api Gateway - Rest API which will proxy all GET/PUT/POST/DELETE requests to a Lambda function.
{% gist https://gist.github.com/murariuroger/dd6c818fdc0263ec55369326913baf11 %}

3. In our construct we define an IAM Role for the lambda, an API Gateway (both described above) and a Lambda. 

{% gist https://gist.github.com/murariuroger/038c3b08c95bffa2974b1d112dc89fc1 %}

## Writing unit tests
Once we have our construct, writing unit tests is fairly easy. You can use [CDK assertions](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.assertions-readme.html) for fine grained assertions👇.
{% gist https://gist.github.com/murariuroger/9a10b6eaf874e28acd6e72e3887aa709 %}

I think AWS CDK is a great framework because it brings the infrastructure inside your IDE alongside with your runtime code, makes your environments consistent and easier to manage and you can create reusable bits of infrastructure. Having infrastructure unit tests setup in your CI pipeline is a best practice that you should follow and will make you more confident to go to prod on Fridays😱.

HAPPY CODING!💻🚀☁️
Is the Airbnb ESLint config still a thing for React?
Tags: eslint, webdev, react, discuss
Published: 2022-06-07 20:15:03

Hi fellow React developers!
When I started using React in a project back in 2016 I worked with some developers who said the Airbnb ESLint config is the thing you need to write good code in React.
Honestly I never questioned this good old configuration and used it in almost every project so far.
Meanwhile I'm using the eslint-config-airbnb-typescript-prettier package, so I got Prettier and TypeScript covered.

Some weeks ago I talked to a developer who frowned and said there are far better configurations.

So what do you guys think? Which configurations do you use? Or do you have your own?
Web3 Solidity + JavaScript 32 hour course recap #10
Published: 2022-06-07 20:02:00

timestamps: 3:30:30 - 3:57:00

This is a recap of me making my way through the 32 hour course by Patrick Collins posted on [FreeCodeCamp](https://www.youtube.com/watch?v=gyMwXuJrbJQ).

The first few minutes went over what had been learned in the previous lesson. Which is always a convenient place to stop.

Let's take a moment to emphasize that in order to override a function from a child contract, the parent function has to have the keyword `virtual`, and the child function has to have `override`.

I also spent some time trying to figure out a good way to export the desktop remix workspace to my local machine. The best bet is to either export it into a gist, and/or create a new workspace as soon as you start a new project.

Patrick Collins explained really well how chainlink and things like that work to allow decentralized apps have access to real-world information in a decentralized way. It involved pretty graphs, and I recommend that you watch that part if you're interested in the specifics.

tl;dr use Chainlink.

In order to make a function payable, you have to add the keyword... payable.

`function fund() public payable {}`

It also has the added benefit of making the button in the deploy section of remix **red**.

The value of the etherium (or whatever currency) is at the top level of the request, so the value can be accessed through `msg.value`

When you have a function that has a revert function (payable), put the stuff that has the option to fail at the top of the function to help the user save on gas fees if the transaction is cancelled.

I also went on a bit of a tangent to get the revert message to show a concatenated message that was descriptive with the proper amount that was expected:

`function uint2str(uint _i) internal pure returns (string memory _uintAsString) {
        if (_i == 0) {
            return "0";
        }
        uint j = _i;
        uint len;
        while (j != 0) {
            len++;
            j /= 10;
        }
        bytes memory bstr = new bytes(len);
        uint k = len;
        while (_i != 0) {
            k = k-1;
            uint8 temp = (48 + uint8(_i - _i / 10 * 10));
            bytes1 b1 = bytes1(temp);
            bstr[k] = b1;
            _i /= 10;
        }
        return string(bstr);
    }`


`string public insufficientFundsMessage = string.concat("A minimum of $", uint2str(minimumUsd), " is required");`