teleren/devto huggingface dataset:
I want to setup VSCode on linux fedora core 36
Tags: webdev, javascript, beginners, programming
Published: 2022-05-28 18:18:44


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5gl1foo65rpwunqgiwr.png)I am installing nodejs and NPM, but i have an issue ussing the node and NPM commands on the terminal sh inside vscode.
How to change key automatically in Azure Key Vault ?
Tags: azure, keyvault, rotationpolicy, keyrotation
Published: 2022-05-28 17:44:16

## Introduction

Key vault has an `automated key rotation feature` that will automatically generate a new key version. `Rotation policy` can be used to set rotation for individual keys. It is recommended that the encryption keys be changed at least `every two years`.

This feature allows `end-to-end zero-touch rotation` for the customer-managed key in the azure key vault. There is an additional cost for each scheduled key rotation.


Key management permission is required for the Key Vault key rotation feature. You can assign a role to manage rotation policy and on-demand rotation.

## Key rotation policy


Users can use the key rotation policy to set rotation and event grid notifications.

## 1. Expiry time

It's used to set an expired date on a new key. It doesn't affect the current key.

## 2. Enabled/disabled

There is a flag that can be enabled or disabled for the key. 

## 3. Rotation types

- You can automatically renew at a given time after creation.
- You can automatically renew at a given time before expiry.

## 4. Rotation time

The minimum value is seven days from creation and seven days from the end of the rotation. 

## 5. Notification time

The key is near the end of the event interval. 


![rotating policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fk0xy2fqa33itldo8n5.JPG)

Key rotation policy should be configured `during key creation`.


![key creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at7eeou7cllihneknjzz.JPG)

The rotation policy should be configured on the existing keys.


![existing keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sptaljnkcj10kgcgyem4.JPG)


Key rotation can be invoked manually. To invoke rotation, click `Rotate Now`.


![Rotate now](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4o6ob1mbt4nnb94h5rb.JPG)


The event grid key has a configuration of expiry notification. Notification can be configured with days, months and years before the event.


![event grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxlxuhwxvcxxlsuwaxq6.JPG)

Key rotation can be configured with the [ARM template](https://github.com/MakendranG/Keyvault-Keyrotation/blob/main/ARM%20template). Key rotation policy can be configured using templates.


Thanks for reading my article till end. I hope you learned something special today. If you enjoyed this article then please share to your friends and if you have suggestions or thoughts to share with me then please write in the comment box.
What's the difference between CSS `s1 s2 {}` and `s1 > s2 {}`, and how do they cascade?
Tags: css, webdev, help
Published: 2022-05-28 17:29:34

So, I tried both `.no-markers ::marker` and `.no-markers > ::marker` and did:
```html
<ul class="no-markers">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
```
And they both removed the markers from the list.
So, my first question is "*Do any nested elements, so long as somewhere down the line they are in a `.selector` mean that that element gets that style?*".
And, I thought `s1 > s2` styled elements directly under `s1`, so, logically, my second question is "*What's the difference between `s1 s2` and `s1 > s2`?*".


<center><h1><b>Thanks!<br/>Cheers!</b></h1></center>
How to Customize Zsh Command Prompt Text
Tags: beginners, zsh, tutorial, tooling
Published: 2022-05-28 17:06:42

In this video you will learn how to customize the Z Shell(Zsh) command prompt text.  

We will understand how the text is formatted using special characters. We will add color to the command prompt. This will include colors using words and 3 digit codes. We will explore what PS1 and Prompt environment variables are. Additionally we will add prompt text to the right side of the screen using RPROMPT.  Lastly we will hide the "last login text" when you open a new command prompt using a special file called .hushlogin

All the changes we do here will be reflected for VSCode if zsh is your default command prompt in VSCode.

Indirectly from this fun tutorial you will learn the following commands / concepts
- cd - change directory
- ls - list directories
- touch - make a file if does not exist
- rm - remove file
- pwd - current location
- environment variables
- reload zshrc file

{% embed https://youtu.be/p4h-5B8k2NY %}

### This is the default command prompt format:

PS1="%n@%m %1~ %# "

### The final Prompt and RPrompt values:

PROMPT="%F{magenta}Adam%f %U%F{yellow}%1~%f%u %F{blue}$%f "
RPROMPT="%F{241}%T%f"
Podman Support Multi Arch
Tags: beginners, container
Published: 2022-06-05 10:07:26

---
title: Podman Support Multi Arch
published: true
date: 2022-05-28 17:00:01 UTC
tags: Beginner,container
series: "Sunday Snippet"
canonical_url: https://clavinjune.dev/en/blogs/podman-support-multi-arch/
---

 ![Sunday Snippet #19 podman support multi arch](https://clavinjune.dev/img/sunday-snippet/image.png "Sunday Snippet #19 podman support multi arch")


```shell
$ podman machine ssh
# inside podman machine
$ sudo rpm-ostree install qemu-user-static
$ sudo systemctl reboot
# outside podman machine, wait for podman machine done restarting
$ podman run -it --rm --arch=amd64 alpine:3.14 uname -m
x86_64
$ podman run -it --rm --arch=arm64 alpine:3.14 uname -m
aarch64
```
yarn start with firefox or chrome
Published: 2022-05-28 16:59:56

in mac os
package.json
`
  "scripts": {
    "start": "BROWSER=firefox react-scripts start",
    "chrome": "BROWSER='google chrome' react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
`
0 to Advance of DevOps: (Part 1) What is DevOps? Is it worth it to become a DevOps Engineer
Tags: devops
Published: 2022-05-28 16:49:10

**_What is this DevOps role?_**

Basically in a software team, there is a **programming team**, **testing team**, **Operation team** .

So, **Programming team** codes and add codes or deduct them. Then they hand it over to the testers.

The **testing team** tests the code by creating a new code etc. Once it passes the tests. It is passed to the Operations team.

The **operation team** maintains the servers and ensures no downtime of the service. Also, they handle huge traffic.

So, you see that some people **Develops** the software and **Operations team** manages other stuffs. If Developer team & Operation team have any issue of communication, things won't work.

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

And, that is why **DevOps role** came which solved this issue. This role had something of both  in it .

<img src="https://c.tenor.com/Tvd3VKwtse0AAAAC/cat-cute.gif">
Laravel 9 QR Code Generate Tutorial
Tags: php, laravel, webdev, tutorial
Published: 2022-05-28 16:42:54

Today,I will learn you how engender QR Code in laravel 8 we will show QR Code engenderer example in laravel 8.I will engenderer QR Code useing simplesoftwareio/simple-qrcode package in laravel 8. laravel 8 QR Code engenderer example. in this tutorial, i would relish to show you how to engender or engender QR Code in laravel 8 utilizing simplesoftwareio/simple-qrcode package.



https://laratuto.blogspot.com/2022/05/laravel-9-qr-code-generate-tutorial.html
UI/UX Developer Portfolio
Tags: javascript, webdev, nextjs, react
Published: 2022-05-28 16:42:48

Hey guys I have just added new UI/UX Portfolio Template to [DEV.UI](https://dev-ui.vercel.app/)
Check out this [UI/UX Portfolio Template](https://dev-ui.vercel.app/templates/portfolio)

[Github Link](https://github.com/kumard3/dev-ui-templates/tree/main/template-13)
[Deployed Link](https://designer-portfolio.pages.dev/)
Laravel 9 Create Custom Helper Functions Tutorial
Tags: php, laravel, tutorial, webdev
Published: 2022-05-28 16:41:19

Today, In this tutorial i would like to share you how to create custom helper example in laravel you can easily utilize add helper functions in laravel 8 application.

https://laratuto.blogspot.com/2022/05/laravel-9-create-custom-helper.html
A11Y 101: Hiding content
Tags: a11y, beginners, webdev
Published: 2022-05-28 16:32:20

We developers tend to hide elements by using `display: none` or `visibility: hidden`.

And this works perfectly fine actually to hide elements from the screen.
However, be aware this does precisely what we tell it. It hides things from the screen, which includes screen readers!

## Hiding from screens, but not screen readers

Let's see what it takes to hide elements from the screen, but not screen readers.

An example of this is: [hiding the label for the search field](https://daily-dev-tips.com/posts/a11y-101-missing-form-labels/).

We have to be careful about which CSS we want to use to achieve this behavior.

I love to use the CSS provided by [the A11Y project](https://www.a11yproject.com/posts/how-to-hide-content/) as it's super complete and up to date.

```css
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
```

If you add this class to any element, It will be removed from the screen but announced by screen readers.

## Conclusion

We have to be careful when we hide elements from the screen. Screen readers might not be able to read the information anymore if we entirely hide the element.

Using the provided CSS code, we can achieve the effect we want.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Loops in ES6 Javascripts
Tags: filter
Published: 2022-05-11 16:16:58

---
title: Loops in ES6 Javascripts
published: true
description: 
tags: filter
//cover_image: https://direct_url_to_image.jpg
---

```javascript

let data =
  [
    { name: 'a', content: true },
    { name: 'b', content: false },
    { name: 'c', content: true }
  ]

  const result = data.filter((item) => {
    return item.name === "a"
  })

  console.log(result);
 // [{"name":"a","content":true}]
```

```javascript
let data = [{ "name": "Rajasekar", "country": "India" }, 
{ "name": "Prakash", "country": "India" }, 
{ "name": "Bala", "country": "UK" }, 
{ "name": "TR", "country": "Saudi Arab" }]


for (const key in data) {
    console.log(data[key]);
}

for(const item of data) {
    console.log(item);
}

data.forEach(element => {
   console.log(element)        
});
```


```javascript
let val = {
    "name": "Rajkasekar",
    "title" :"rasdas"
}

for (let [key, value] of Object.entries(val)) {
    console.log(key) // name, title
    console.log(value); //Rajasekar, rasdas
}


for (const key in val) {
    console.log(val[key]); //Rajasekar, rasdas
}



```

### Grouping the array based on the key

```javascript
const array = [{ name: "cat", value: 17, group: "animal" }, { name: "dog", value: 6, group: "animal" }, { name: "snak", value: 2, group: "animal" }, { name: "tesla", value: 11, group: "car" }, { name: "bmw", value: 23, group: "car" }];

let result = array.reduce((r, { group: name, ...object }) => {
        var temp = r.find(o => o.name === name);
        if (!temp) r.push(temp = { name, children: [] });
        temp.children.push(object);
        return r;
 }, []);

console.log(result);

[{"name":"animal","children":[{"name":"cat","value":17},{"name":"dog","value":6},{"name":"snak","value":2}]},{"name":"car","children":[{"name":"tesla","value":11},{"name":"bmw","value":23}]}]

```

```javascript
var user = {
  "first_name":"taylor",
  "last_name":"hawkes",
  "full_name": "taylor hawkes"
};

var userCleaned = _.pickBy(user, function(value, key) {
  return (key === "first_name" || key === "last_name");
});

//userCleaned is now:
//{
//   "first_name": "taylor",
//   "last_name": "hawkes"
//}

```

ref - https://dev.to/misterkevin_js/11-ways-to-iterate-an-array-javascript-3mjg?force_isolation=true
https://youmightnotneed.com/lodash
https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore
Today 's Learning:
Tags: css, html, webdev, beginners
Published: 2022-05-28 16:15:02

✅Today I am done with:
✅Revision of Web-Design Lectures.
✅ Take a 
frontendmentor
  challenge and complete it in  8 to 9 hours.
LiveProject:https://vermillion-cajeta-60c4d6.netlify.app (Share your all suggestions)
SourceCode:https://github.com/lovishduggal/Frontend-Mentor-Challenge-7.git
Thankyou🙂
PayPal Payment Gateway Integration in Laravel 9 New Update
Tags: webdev, laravel, programming, tutorial
Published: 2022-05-28 15:13:06

Today what you are going to learn:
Recently I published an article laravel 9 updated. One of our readers asked about integrating the PayPal payment gateway in Laravel. Though Laravel is built using PHP, they have its own standards and flow. You have to adjust your core PHP code as per Laravel standards. In this article, I show you how to accept payment using PayPal on your Laravel application.

PayPal is one of the most trusted brands to accept online payment. PayPal provides different ways to integrate its payment system in web applications. One of the services is PayPal Rest API which we will use for this tutorial. For getting started, you first need to grab your client id and client secret.

Head over to your PayPal developer account and login into it. In the developer dashboard, click on the ‘My Apps & Credentials’ menu. Then click on the ‘Create App’ button under the REST API apps section.

Follow the steps as prompted and you will get your sandbox and live credentials. For now, copy the client id and client secret of sandbox mode. We should first test payments in sandbox mode and if it works then switch to live mode.
for follow
https://www.freecoder.co/post/paypal-payment-gateway-integration-in-laravel-9-new-update
【Unity】How to refer to a gameobject sets DontDestroyOnLoad and inactive?
Tags: unity3d
Published: 2022-05-28 09:26:20

## Intro
Unity has any kind of ways to refer arbitrary gameobject.

For instance, `SerializeFieled`,`GameObject.Find("name")`.

But, if you need to refer arbitrary gameobject that sets DontDestroyOnLoad and inactive, you can not use `GameObject.Find("name")`.

Or, there is the situation to not be able to use `SerializeFieled`.


## Sample Code

```cs
private GameObject _empty;

void Start()
{
    //Create gameobject as DontDestroyOnLoadGameObject
    if (_empty == null)
    {
        _empty = new GameObject(string.Empty);
        DontDestroyOnLoad(_empty);
    }

    var dontDestroyOnLoadGameObjectList = new List<GameObject>();

    //Besause DontDestroyOnLoad is included Scene, it gets from GameObject.scene.
    var dontDestroyOnLoadGameObjectRootList = _empty.scene.GetRootGameObjects().ToList();
    foreach (var root in dontDestroyOnLoadGameObjectRootList)
    {
        dontDestroyOnLoadGameObjectList.AddRange(GetAll(root));
    }

    dontDestroyOnLoadGameObjectList.Any(go => go.TryGetComponent(out MyComponent component));

    //Some kind of processing
}


/// <summary>
/// Return all object of tree.
/// </summary>
private List<GameObject> GetAll(GameObject root)
{
    var allChildren = new List<GameObject>();
    GetChildren(root, ref allChildren);
    return allChildren;
}

/// <summary>
/// Add child to list from parent.
/// </summary>
private void GetChildren(GameObject obj, ref List<GameObject> allChildren)
{
    var children = obj.GetComponentInChildren<Transform>();
    if (children.childCount == 0)
    {
        return;
    }

    foreach (Transform ob in children)
    {
        allChildren.Add(ob.gameObject);
        GetChildren(ob.gameObject, ref allChildren);
    }
}

private void OnDisable()
{
    DestroyImmediate(_empty);
}
```

## Tips

Because DontDestroyOnLoad is included Scene, it gets from GameObject.scene.

At first, create temporary gameobject and set DontDestroyOnLoad.
Second,search all of gameobject that has specific Component.
You can search in the scene that exist temporary gameobject.

It means to be able to search a gameobject in DontDestroyOnLoad.

## Other Resources
[DontDestroyOnLoadのGameObjectを列挙する](https://qiita.com/nekomimi-daimao/items/2029ef9ab0e2bd30eaaf)
[全ての子要素を取得する(子要素の子要素の子要素の‥)](https://kazuooooo.hatenablog.com/entry/2015/08/07/010938)
[Help] Reduce size of bundle
Tags: nextjs
Published: 2022-05-28 14:34:24


Hello 👋  To reduce the size of the bundle, I use dynamic imports on my layouts.
But I don't know if it's a good practice. Layouts are normally displayed on first render.
(I am a french developer) 😉

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

Thanks
What is the use of Node Pool snapshot in AKS ?.
Tags: azure, aks, snapshot, nodepool
Published: 2022-05-28 14:31:22

Every new cluster, new pool, or upgrade cluster will always receive the latest image from AKS, which can make it hard to maintain your environments consistent and to have repeatable environments.

You can take a configuration snapshot of your pool and then create new pools or clusters based on that snapshot as long as the configuration is supported. 

The snapshot is a resource that contains the configuration information from the source pool. You can use the snapshot resource and the values of the configuration to create a new pool or cluster.


## Before you start

This article assumes that you have an existing AKS cluster. 


## Limitations

- You cannot create a new N-Series pool based on a snapshot captured from a D-Series pool because the images in those cases are not the same as the virtual machine family.
- Snapshots can be used in the same region as the source pool.

## Take a snapshot of the node pool. 

To take a snapshot from a node pool, you need the resource ID, which you can get from the command below.

```
NODEPOOL_ID=$(az aks nodepool show --name nodepool1 --cluster-name kcdCluster --resource-group kcdrg --query id -o tsv)
```

You can use the `az aks snapshot` cli command to take a snapshot from the previous pool.


```
az aks snapshot create --name kcdSnapshot --resource-group kcdrg --nodepool-id $NODEPOOL_ID --location centralus
```



To get the resource ID from the snapshot that was previously created, you need to use the command below.


```
SNAPSHOT_ID=$(az aks snapshot show --name kcdSnapshot --resource-group kcdrg --query id -o tsv)
```

The command below can be used to `add a new pool` based on this snapshot.

```
az aks nodepool add --name np2 --cluster-name kcdCluster --resource-group kcdrg --snapshot-id $SNAPSHOT_ID
```


If the snapshots version and image version are more recent than the versions in the current pool, you can upgrade it to a snapshot configuration.

To get the resource ID from the snapshot that was previously created, you need to use the command below.

```
SNAPSHOT_ID=$(az aks snapshot show --name kcdSnapshot --resource-group kcdrg --query id -o tsv)
```


We can use this `command to upgrade` this pool.

```
az aks nodepool upgrade --name nodepool1 --cluster-name kcdCluster --resource-group kcdrg --snapshot-id $SNAPSHOT_ID
```


A snapshot can be used to create a cluster. The original system pool will be created when you `create a cluster from a snapshot`.

To get the resource ID from the snapshot that was previously created, you need to use the command below.

```
SNAPSHOT_ID=$(az aks snapshot show --name kcdSnapshot --resource-group kcdrg --query id -o tsv)
```


This command can be used to `create this cluster of the snapshot configuration`.


```
az aks create --name kcdCluster2 --resource-group kcdrg --snapshot-id $SNAPSHOT_ID
```



Thanks for reading my article till end. I hope you learned something special today. If you enjoyed this article then please share to your friends and if you have suggestions or thoughts to share with me then please write in the comment box.
Cut a few braids: new NPM package
Tags: typescript, npm, webdev, javascript
Published: 2022-05-28 14:04:24

Hi all. I'm currently working on a new _NPM package_ that is supposed to be an abstraction layer for API endpoints. It would be awesome if one or the other could take a look at it and give feedback if this is a useful package or rather going in a wrong direction.

[web3nao http-configs](https://www.npmjs.com/package/@web3nao/http-configs) is a zero-dependency library that provides http configs for a number of web3 (and web2) APIs in a simple way. The whole library is fully typed and gives easy access to the included APIs.

Motivated to implement for a simple reason: less dependencies in your own projects. What I have done so far:

1. I want to use a service.
2. I'm looking for a corresponding SDK or a suitable package that simplifies the integration with.
3. Profit

What I haven't done: examine each package for their deployed dependencies. The effect is that my own application gets unnecessarily many dependencies, and strictly speaking I can't be completely sure what happens inside the library. Of course, this also opens up some attack vectors.

**With web3nao you don't get any additional dependency.** It just contains an easy to use and typed API to use services. It is ultimately up to the user which http client to use (`got`, `axios`, `fetch`, ...). The config is mapped to the config of the http client and done.

A significant advantage in my opinion are the provided interfaces. If I connect a new API, or connect an API that I already know but haven't used for a while, I always have to invest time to find out how to use the API: Authorization, headers, payload, paths, ... The types in web3nao make the integration much more effective and efficient, because less mistakes happen and you get the expected result faster.

[![web3nao in action](https://img.youtube.com/vi/icKIxm2hwPI/0.jpg)](https://www.youtube.com/watch?v=icKIxm2hwPI '@web3nao/http-configs')

I appreciate your feedback!
How to work with Django forms.
Tags: python, django, javascript, developer
Published: 2022-05-28 12:48:43

Hello guys, today we'll learn how to work with django forms, as we know that we use django forms to save data in the models, django forms generate the HTML Forms to save the data, django provides the Form class that is used to generate html form.

```
Source code:- https://github.com/ShivamRohilllaa/django-form
```

So, now we are creating a django form, in forms.py

```
from django import forms

class TaskForm(forms.Form):
    Title = forms.CharField(max_length = 200)
    description = forms.TextField(max_length = 500)   

```

now write a view for saving the data.


```
from django.shortcuts import render, redirect
from .forms import TaskForm
from .models import Task
# Create your views here.

def index(request):
    tform = TaskForm()
    if request.method == 'POST':
        form = TaskForm(request.POST)
        if form.is_valid():
            title = form.cleaned_data['title']
            description = form.cleaned_data['description']
            data = Task.objects.create(title=title, description=description)     
    context = {'form':tform}              
    return render(request, 'index.html', context)


```
 then render this form in index.html

```
    <form method='POST'>
    {% csrf_token %}    
    {{form}}
    <button class="btn" type="submit" value="submit"> Save </button>
    </form>

```
See the output below and fill the data in form and then press save button after that check the django admin if data is saved or not.


# Output

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

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


```
For More and contact:- https://webdevcodes.com/django/how-to-work-with-django-forms/ 
  
```
Thank You
Shivam Rohilla | Python Developer