teleren/devto huggingface dataset:
How to Set Values in Reactive Forms
Tags: typescript, angular, webdev, javascript
Published: 2021-02-18 16:01:05

#Daily Angular Tips, Tricks, and Best Practices: Part 8

[![](https://cdn-images-1.medium.com/max/1941/1*35jC4Htvr0T1KIU5_DJKGQ.png)](https://medium.com/javascript-in-plain-english/how-to-set-values-in-reactive-forms-44ca830d36bf?source=rss-795bd33d705------2)



As a developer, there is no limit to learning. We always need to be up to date with technologies as well as the upcoming or current features which are trending in the market.

Recently, I was looking for the best techniques to write clean and optimize my angular code. I have gone through a lot of articles, and as we know, it is limitless. Then I thought of consolidating the checklist with different Basic Angular Topics which helped me and might help others too in the future.

These small articles not only help you to write a better and clean Angular Code but also clear the concepts of front-end technologies. This will help you to build your strong base and can help you in the upcoming frontend interviews.

**Let’s move towards our main discussion.**

One of the most basic topics in any programming is creating forms and validate them. In Reactive forms when data comes from the backend or we might need to set the form values, we can achieve this by following different approaches. Let’s see how we can set the value to forms?

We can use the following methods to update the value of a reactive form control.

1. Methods using setValue()

2. Methods using patchValue()

3. We can update multiple controls in the form group if required using the PatchValue

4. We can use the set value by mapping the exact same JSON as a form group

5. When we have form array to patch values


[To see practical example in details checkout here »](https://medium.com/javascript-in-plain-english/how-to-set-values-in-reactive-forms-44ca830d36bf?source=rss-795bd33d705------2)
Let's understand the CSS scale property 🤨
Tags: css, tutorial, todayilearned, codenewbie
Published: 2021-02-18 15:56:09

Hey coding people,

Hope you guys doing great,

This is post is a part of our 20-day transition property post.

{% link https://dev.to/atulcodex/20-days-of-css-animation-post-3g8d %}

In this post, we will learn and play with CSS transform's scale property. 

Lets first understand the meaning of scale, according to google scale means ruler, gauge, dimension, etc.

In words use of CSS, scale property is to scale up and scale down the size of an element. There are four variations in scale property which is like this.

* transform: scaleX(2); /* Targetting only X-axis */
* transform: scaleY(4); /* Targetting only Y-axis */
* transform: scaleX(0.5) scaleY(2);  /* Targetting X-axis and Y-axis both */
* 100% { transform: scale(0.5, 2); } /* Targetting X-axis and Y-axis both with shorthand property */


Now to memories your this concept play with these codepen project.

{% codepen https://codepen.io/atulcodex/pen/GRNmYJY %}

And if you guys interested in my free website templates please download them here 👉[AtulCodex Marketplace 🏪](https://www.instamojo.com/atulcodex/).
Get Paginated Data DynamoDB
Published: 2021-02-18 15:37:00

```
function getLogsNovedades() {

  const getAllData = async (params) => {
    const _getAllData = async (params, startKey) => {
      if (startKey) {
        params.ExclusiveStartKey = startKey
      }
      return dynamodb.query(params).promise();
    }
    let lastEvaluatedKey = null
    let rows = []
    do {
      const result = await _getAllData(params, lastEvaluatedKey)
      rows = rows.concat(result.Items)
      lastEvaluatedKey = result.LastEvaluatedKey
    } while (lastEvaluatedKey)
    return rows
  }

  var params = {
    TableName: tableName,
    ProjectionExpression: "Id, #Type, #Data, IDPV, #Name, #Timestamp",
    IndexName: 'Type-index',
    KeyConditionExpression: '#Type = :tp',
    ExpressionAttributeNames: {
      '#Type': 'Type',
      '#Data': 'Data',
      '#Name': 'Name',
      '#Timestamp': 'Timestamp'
    },
    ExpressionAttributeValues: {
      ':tp': 'NOVEDAD',
    },
    Limit: 100
  };

  return new Promise(async (resolve, reject) => {
    try {
      let Items = await getAllData(params);
      resolve(Items);
    } catch (err) {
      reject(err);
    }
  });
}
```
What are your favorite non-dev activities to do after a solid day of coding?
Tags: discuss
Published: 2021-02-18 15:32:05

---
title: What are your favorite non-dev activities to do after a solid day of coding?
published: true
tags: discuss
---

I _love_ coding but I like to also switch things up to keep my mind fresh and to relax. What do you like to do in your time off? Would you recommend it to the rest of us?

I love to:

1. read and write fiction
2. play games and make a podcast about it
3. take long baths with luxury bath bombs (those that have like flower petals or little crystals in them :D )
4. talk to my friends about my day on my Discord server's voicechat
Most powerfull application in Windows / Linux / Mac ?
Tags: windows, linux, mac, app
Published: 2021-02-18 15:20:06

In Windows, Notepad is undoubtedly most powerfull application created ever.
Just type your desired code, change extension in save as and run it. It do not need any add-ons.
If we talk about Powershell and CMD prompt, Powershell is too much buggy and CMD have extremely limited resources.

We will not talk about Mac because it based on BSD and BSD is based on Unix. And Linux is also based on Unix. So, we will directly discuss about Unix system.

In Unix systems, Terminal is the most powerfull application. Termial is source of unlimited possibilities in a computer system.
.NET 6 Preview - Major Blazor Performance Improvements
Tags: dotnet, blazor, webassembly, webdev
Published: 2021-02-18 15:14:05

.NET 6 Preview 1 bits were released yesterday (info below)...
https://devblogs.microsoft.com/dotnet/announcing-net-6-preview-1/
https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-1/ (ASP.NET) 

.NET 6 Preview 1 for Blazor WebAssembly (WASM) includes many performance enhancements planned. For example, in Preview 1 the interpreter has been improved greatly. This gives Blazor WASM a VERY nice performance bump in .NET 6 for "FREE" by just using the new .NET 6 runtime.

I ran some performance tests comparing .NET Core 3.x, .NET 5 and .NET 6 Preview 1...and you can see .NET 6 is 22%-32% faster across various compute devices/browsers.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi7badgzvukn7wkfrb06.png)

Run the performance tests yourselves and compare!
.NET 6  - https://statisticsandblazordotnet6.azureedge.net/
.NET 5 - https://statisticsandblazordotnet5.azureedge.net/
.NET 3 (Core) - https://statisticsandblazordotnetcore3.azureedge.net/

Source Code: https://github.com/bartczernicki/Test-Blazor-WebAssembly-StatisticsAndML-DotNet6
EuroPython 2021: Call for Volunteers
Tags: europython, calltoaction, volunteering, ep2021
Published: 2021-02-18 15:08:24

The EuroPython 2021 organization is starting and we're looking for more help with running the conference.

![Team-EP2019-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ugh6maa1df5lpwtgfl.jpg)
###### (Photo above) EuroPython 2019 Team 

For EP2021, we are using a slightly different approach compared to previous years:

* All new volunteers will first join the Plaza – our central get-together place for all team members – and only later enter the various work groups (WGs) we have for running the conference.
* Additionally, we will have on-boarding calls with everyone to get to know each other and give an overview to the structures, information and groups we have available, as well as the timeline.

If you are interested in helping, please write to volunteers@europython.eu. Our team will then answer any questions you may have and get you signed up for the next on-boarding call.

To get an idea of the various work fields, please have a look at [our workgroup overview](https://www.europython-society.org/workgroups).

Enjoy,
EuroPython 2021 Team
https://www.europython-society.org/

###### *Original post: https://blog.europython.eu/europytho-2021-volunteerng/*
Creating XDG custom url scheme handler
Tags: howto, fedora, centos, linux
Published: 2021-02-18 15:29:49

---
title: Creating XDG custom url scheme handler
published: true
date: 2021-02-18 14:49:00 UTC
tags: howto,fedora,centos,linux
canonical_url: https://blog.kagesenshi.org/2021/02/custom-url-scheme-handler.html
cover_image: https://blog.kagesenshi.org/assets/images/terminal-python.jpg
---

If you develop system tools or desktop software on Linux that also have an accompanying web application, you might want to have a way for the web application to launch the tool with some parameters specified through a web based link. For example, a link with [`dnf://inkscape`](dnf://inkscape) as url, might be used to launch Gnome Software, and display the description of Inkscape, so that user may choose to install it or not.

In Linux, registering a custom URL handler can be done using [XDG desktop file](https://specifications.freedesktop.org/desktop-entry-spec/latest/), of which it is configured to open `x-scheme-handler` MimeType.

To achieve this, you can simply create a `.desktop` in `~/.local/share/applications/`, or`/usr/local/share/applications`, and configure it with `MimeType=x-scheme-handler/<your-custom-proto>`.

For example, if you have a script `dnfurl` which takes `dnf://<package-name>` as its first parameter and launch Gnome Software with the package name, you can create a `.desktop`file with this content:

```ini
[Desktop Entry]
Version=1.0
Type=Application
Name=dnfurl
Exec=dnfurl %U
Terminal=false
NoDisplay=true
MimeType=x-scheme-handler/dnf
```

After installing the `.desktop` file, do run `update-desktop-database` to update the related indexes/cache. If you installed the `.desktop` file in `~/.local/share/applications/`, you will have to run `update-desktop-database ~/.local/share/applications`. If nothing went wrong with the setup, you should be able to open links with the custom url protocol afterwards.

If you interested with the example `dnfurl` program above, you can check it out at this git repository: [`github.com/kagesenshi/dnfurl`](https://github.com/kagesenshi/dnfurl). Or if you are in Fedora, you can install it [from copr](https://copr.fedorainfracloud.org/coprs/izhar/dnfurl/) by running:

```bash
dnf copr enable izhar/dnfurl
dnf install dnfurl
```

Have fun~.
Day 19: Vigenère cipher
Tags: 100daysofcode, python
Published: 2021-02-18 14:47:24

The [Vigenère cipher](https://pages.mtu.edu/~shene/NSF-4/Tutorial/VIG/Vig-Base.html) is a method of encrypting alphabetic text by using a series of interwoven [Caesar ciphers](http://practicalcryptography.com/ciphers/caesar-cipher/), based on the letters of a keyword. It employs a form of polyalphabetic substitution.

```python
import re
import string

alphabet = "abcdefghijklmnopqrstuvwxyz"
def encrypt(p, k):
    c = ""
    kpos = []
    for x in k:
        kpos.append(alphabet.find(x))
    i = 0
    for x in p:
      if i == len(kpos):
          i = 0
      pos = alphabet.find(x) + kpos[i] 
      print(pos)
      if pos > 25:
          pos = pos-26               
      c += alphabet[pos].capitalize()
      i +=1
    return c

def decrypt(c, k):
    p = ""
    kpos = []
    for x in k:
        kpos.append(alphabet.find(x))
    i = 0
    for x in c:
      if i == len(kpos):
          i = 0
      pos = alphabet.find(x.lower()) - kpos[i]
      if pos < 0:
          pos = pos + 26
      p += alphabet[pos].lower()
      i +=1
    return p
try:
    print("The message must contain only letters and the key should be a single word with no numbers. \n"
          "Press 1 to Enrypt a message \npress 2 to Decrypt a message")
    choose = input("Choice: ")
    if choose == '1':
       p = input("enter the plain text: ")
       p = p.replace(" ", "")
       if p.isalpha():
           k = input("Enter the key: ")
           k = k.strip()
           if k.isalpha():
              # print(k)
               c = encrypt(p, k)
               print("The cipher text is: ", c)

           else:
               print(k)
               print("Enter valid key.")
       else:
           print("only letters are allowed")

    elif choose == '2':
        c = input("enter the cipher text: ")
        c = c.replace(" ", "")
        if c.isalpha():
            k = input("Enter the key: ")
            if not k.isalpha():
                print("Enter valid key.")
            else:
                p = decrypt(c, k)
                print("The plain text is: ", p)
        else:
            print("only letters are allowed")

    else:
        print("Please enter a selection")
except Exception as e:
    print(e)
    exit("Enter a valid text")

```
Open Source Tool Deepfence SecretScanner to Detect Secrets and Reduce Attack Surface
Tags: security, cloud, serverless, docker
Published: 2021-02-18 14:39:16

We have released an open source tool [SecretScanner](https://github.com/deepfence/SecretScanner) to scan container images and hosts for finding any potential passwords and secrets automatically before deploying your cloud native workloads. 

In addition to Vulnerabilities, secrets form an important part of your attack surface. Leakage of secrets can put your organization into serious security risk. Our [SecretScanner](https://github.com/deepfence/SecretScanner) tool will help you to reduce your attack surface and protect your infrastucture. Check out our [blog](https://medium.com/deepfence-cloud-native-security/detecting-secrets-to-reduce-attack-surface-3405ee6329b5) more more details.
Software Engineering : CSS
Published: 2021-02-18 14:31:40

Using CSS is like hitting your thumbnail with a hammer. It's very painful and it lasts for a long time. Once the pain subsides, you say "I must learn to never do that again"

**CSS**
CSS is simple in concept, complex in 'getting things just right'. This is probably due to the fact that HTML was for hyper-TEXT-markup. Along came video, images, floating, colors, backgrounds, margins, paddings, clear, and the rest. There's so much to learn that a huge web site CSS-Tricks became it's own business.

Anytime we deal directly with CSS we are using a DSL (Domain System Language) DSLs are not real languages in the sense of JavaScript, Typescript or C#, just try to 'find all references' as proof. Had CSS been a 'real' language things would have been immediately better.

Along came SCSS/SASS, the intent being to put loose rules around specificity. Ahh nice, the first steps in getting to a 'real' language. Just the ability to have definitions early on was a major success. So much so that CSS later adopted their own way of doing it. 

Today, I only use SCSS and HTML Grid with an occasional Flexbox. This allows me to zero in on specificity and farm off layout issues to the grid or flexbox. 

Other styling frameworks couple nicely with the above, so there's no problem there. It's just a question of 'how much style do we need?' In the era of Mobile first, these style frameworks are perfect for that. Bootstrap is king, but there are others that are strong.

SCSS is still not a 'real' language but it's miles ahead of CSS. Lean SCSS, the grid and use flexbox sparingly. Then when you need a new website, start it off with other templated work. It's just too much effort to spin up a web concept without having tons of premade layouts to start from. 

JWP2021 CSS
Intro to Rendering in React 
Tags: react, javascript
Published: 2021-02-18 14:26:05

This past weekend I’ve decided on my next project and the technologies I plan to use to create it! React is one of them because of how much I’ve missed developing with it. I decided before I tackle a larger full stack project to start with something small to brush up on the fundamentals. When I ran “ create-react-app” in the terminal, I was greeted by a familiar boilerplate React app that I missed! When browsing through the App.js and Index.js files I noticed the render method and couldn’t help but google how rendering in React worked. Here's what I found!  

The Initial Render

Every React application has a root DOM node that identifies the portion of the DOM that will be controlled by React. Adding components (known as child components) to this node allows you to make your application look and behave the way you want it to!
Once React is called to initially render, it has to convert the JSX you’ve written into pure JavaScript first. It does this by utilizing Babel. Babel is primarily known for its transpiling capabilities, however it is also used to convert JSX into JavaScript. 

Rendering

When a change of state happens in a component, it triggers the rendering process for that component. Once triggered, React starts to collect all the components that triggered the re-render from the root of your App. However, even though the process's name is technically rendering, at this point, the DOM has not been modified.
Since we normally use JSX, the code will be transformed to React.createElement(...). The output of the createElement will describe how the application should look like in the next version of the render through the next stage called reconciliation.
In a short, reconciliation calculates the changes that need to be made in the application tree which makes the changes. Synchronously, React gets rid of past layout effects, runs the new layout effects. The browser then paints the DOM!

Thanks for stopping by, I hope you learned a bit. Talk to you next week!
Peppermint ( Ticket Management ) Alpha is here! 🍵
Tags: react, node, docker, showdev
Published: 2021-02-18 14:17:09

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2njrt4ipm090elss1j3m.png)
I'd just like to announce the alpha version of my ticket management solution called peppermint. Its a self hostable web app with plans to have native windows and mobile apps in the future.

This is early on and was made by myself so it isn't anywhere near complete yet.

There is a demo available - https://demo.pmint.dev/

Login - admin@admin.com

password - 1234

Features

- Clean modern UI

- To-do lists

- Newsletters / announcements for teams

- Notes creation & time logging

- Ticket creation with links to clients

- Admin dash board

You can see more info here - https://github.com/Peppermint-Lab/Peppermint

If you run into any issues please open a discord issue with any feature requests or bugs that you may face

Current known bugs

- New ticket modal takes two clicks to launch on initial load.

Stack
- Frontend: React & Ant Design
- Backend: Node alongside expressJS
- DB: MongoDB alongside mongoose
Reactive styles in React Native
Tags: reactnative, react, style, darktheme
Published: 2021-02-18 14:12:16

In the age of light / dark themes and white label applications, it’s always a good idea to think over the theming of mobile applications...

[Continue reading](https://medium.com/supercharges-mobile-product-guide/reactive-styles-in-react-native-79a41fbdc404)
Software Engineering : Testing
Published: 2021-02-18 14:09:54

The jest of this article is that today, the Web browser is king. There's just Cypress, Puppeteer and Selenium.  My bets are on Cypress.

**Details**

Test philosophy has changed over the last 25 years. Much of it being due to test tooling keeping up with current trends in software.

**From The Desktop**
There's only been two major players in the desktop testing space. UFT and CodedUI. 

The challenges were inter-process messaging. A very low level technique to inject behaviors in processes not owned by the injection agent.

These tools made it possible, but writing tests were tough to achieve 100% reliability. UFT never upgraded their legacy VBScript libraries. CodedUI provide a C# environment but required vendors to write Automation Peers. Not all did.

**To The Web**
HTML was a unifier, anyone could make a WebBrowser but each had to support HTML specifications. 

There were two ways testing tools could control a WebBrowser, low level messaging and using Middleware.  By Middleware we should thing about HTTP interception and alteration prior to hitting the browser. 

Selenium was the first interceptor agent. It was miraculous due to the security browsers had to prevent this type of behavior. Selenium did this the best for many years.

Along came Cypress. A new way of doing things using interception methodology but did not require a server running in the background.
Part of it's internals were exposed based on another feature it has. It can intercept and alter inbound or outbound HTTP requests. This was a Selenium disrupter. 

Today there are just two WebBrowser testing tools following this design Cypress and Puppeteer. 

Cypress does have some quirks, mostly being it's all JQuery based. But JQuery is mature and still the #1 web framework. 

> JQuery is just not needed any longer with the advent of native browser query selectors.  

**Karma, Jasmine et. al.**
Technical debt catches a lot of software flat-footed. The design of Karma running with Jasmine was to spin up it's own browser. This made cross-site scripting issues with just hitting our backends. Any outbound request to a backend was an immediate failure without lots of work trying to get it to work.  For this reason only, I reject these two because Cypress doesn't do that and Cypress is easier to learn!

**Goals**
- Test early and often
- Cypress is King
- Developers must write tests with each iteration
- Embedded QA Team members who program are awesome
- Embedded QA Team Members who run manual tests fill the gap of automation lag. They're awesome too because the tend to specialize in applications.  Many of them know the application better than the developer does!

John Peters Software Engineering: Testing
ESP32 在 Big Sur 無法編譯
Tags: esp32, bigsur, arduino
Published: 2021-02-18 14:09:48

如果你把 Mac 升級到 Big Sur, 會發現要使用 ESP32 Arduino core 1.0.4 版編譯 ESP32 專案會出錯：
![](https://i.imgur.com/oEyAIqV.png)
根據[這篇文章](https://github.com/espressif/arduino-esp32/issues/4408#issuecomment-726271514)的說法, 必須讓 ESP32 控制板套件改用 esptool.py 原始檔, 而不是原本的 esptool 執行檔。步驟如下：

1. 點選**偏好設定**中的 preferences.txt 連結, 開啟偏好設定所在的資料夾。
2. 進入 packages/esp32/hardware/esp32/1.x.x 資料夾中, 開啟 platform.txt 檔。
3. 將以下這行：
    ```
    tools.esptool_py.cmd=esptool
    ```
    修改成：
    ```
    tools.esptool_py.cmd=esptool.py
    ```
1. 接著複製 tools 資料夾下的 esptool.py, 貼到你的使用者資料夾下的 ArduinoLibraryFolder/packages/esp32/tools/esptool_py/2.x.x 路徑下。
2. 為 esptool.py 加上執行權限：
    ```bash
    chmod +x esptool.py
    ```
2. 幫系統內建的 Python2 安裝 pyserial。首先安裝 pip 工具：
    ```bash
    curl https://bootstrap.pypa.io/2.7/get-pip.py --output get-pip.py
    python get-pip.py
    ```
    再利用 pip 工具安裝 pyserial：
    ```bash
    python -m pip install pyserial
    ```
1. 重新開啟 Arduino 就可以正常編譯 ESP32 專案了。