teleren/devto huggingface dataset:
How to create an Azure Static Web App
Tags: azure, staticwebapps, microsoft, beginners
Published: 2023-04-14 16:48:58

Azure static Web Apps is a service offered by Microsoft Azure that allows users build and deploy static websites quickly. With Azure Static Web Apps, you can build you web apps which just HTML, Css and JavaScript or use a front-end framework. 
Moreover, Azure Static Web integrates with GitHub which allows you to build and deploy your app whenever you push changes to your repository. You can use Azure DevOps or other source control systems. 

##Step-by-step process to create an Azure Static Web App with Github
**Step 1**: Sign in to the Azure portal and search for Static Web Apps in the search bar.
![1st step on Azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek85p9ea4mzq9lfb0ptc.png)
**Step 2**: Select the Static Web Apps option and click on 'Create'
![2nd step on Azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ebubicz7ym2rktkar8b.png)
**Step 3**: In the "Basics" tab, select subscription, resource group, then enter in the name of your Static Web App and select a hosting  plan as well the region closest to you. 
![Step 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofzoqvja7dqbvdiob84h.png)
**Step 4**: Under deployment details, select your source control system
![6 step](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q43u28jt7sxdwp3s8a50.png)
**Step 5**: Select your preferred source. In this guide, GitHub is used, so you have to sign into GitHub account if not already connected.
![5 step](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzhcmohl8wvway74m6af.png)
**Step 6**: Once you connect to your Github, select the organisation name, the repository you want to deploy to the cloud as well as the branch of the repository.
![Step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dr9ckky6tdwb7guqe4b.png)
**Step 7**: In the 'Build Details' section, enter in the build presets, as well as the app location. You can also enter in an api location and output location in this section. 
![Step 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbdg1e2k10ur1mz9yice.png)
**Step 8**: Fill in the tags in the 'Tags' tab.
![Step 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uc2ie785vieqe9rymy2e.png)
**Step 9**: Click on the Review and create tab and create if you are satisfied with all details entered. 
![step 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z39u6qz0b1ctv57p4ete.png)
**Step 10**: Wait a few seconds or minutes for your resource to be deployed and click on 'Go to resource' once deployment is complete.
![step 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3uy77v6jw0kap4fo0r5.png)
**Step 11**: The app is now deployed and you can click on 'Browse' to see it.
![step 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpajzx409xi227o9nh0b.png)
##How to delete Azure Static Web App
If the Static Web App is no longer needed it is best practice to always delete the resource.
To do this, go to your resources on the Azure portal and select that particular static web app, select 'Yes' to delete.
What are best practices for event tracking ?
Tags: analytics, productivity, webdev
Published: 2023-04-14 16:34:40


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


What do you usually track on your own project ?
My boss ask me to research and implement Google Analytics. 
The only idea I have is "tracking for the income/outcome when click on button or ads"
Convert XML to JSON with Talend
Tags: talend, xml, json, dataintegration
Published: 2023-04-14 15:59:16

The other day a client provided me with a Rest API to pass me data that I had to import into my database. 
However, we found that the API doesn’t work well when there’s too much data. The client then provided me with an XML file with the response of their service: a big XML file (50MB) with multiple loop elements!

The XML file contained thousands of elements, every element represented a different product: I needed to create a JSON file for each product.

Let’s see how to achieve this result with Talend Open Studio for Data Integration, without using external components from the marketplace.

**1. Java routine**
First of all I create a new routine, adding [json-org.jar](https://mavenlibs.com/jar/file/org.json/json) as external library:

![Talend create new routine and add external library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxrht7ojrzd65z94srd2.png)

Java code:


`package routines;
import org.json.JSONException;
import org.json.JSONObject;
import org.json.XML;
public class XmlToJSON {
`

	public static String xmlToJson(String xml){
		String json ="";
		try {
			JSONObject xmlJSONObj = XML.toJSONObject(xml);
			json = xmlJSONObj.toString();
		} catch (JSONException je) {
			System.out.println(je.toString());
		}
		return json;
	}
`}`


**2. Talend designer**
In the Talend designer I add 3 simple components:

![convert XML to JSON with Talend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igm8x5l7n78v7cxgd6qc.png)



**2a. tFileInputDelimited**
I start my subjob with a tFileInputDelimited:

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

**2b. tNormalize**
I use tNormalize to split my XML by `<PRODUCT> `

![tNormalize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e39mbp68ncgphmnuoqf.png)

![schema of tNormalize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6541j1b5wd6sjrmdldma.png)

**2c. tJavaRow**

in tJavaRow I clean a couple of tags (optional) and I call the Java routine mentioned before.

![tJavaRow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hpmetf1skw4czun3dfz.png)

`output_row.json = XmlToJSON.xmlToJson(xmlString);`

Schema of tJavaRow:
![schema of tJavaRow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78apoak5vbh1h4rnikzw.png)

**That's all!**

PS. I couldn't use the Talend wizard "Metadata->XML File" because that wizard causes crashes when you process a big XML file to retrieve its schema. But as you can see we did without that wizard ;)
FuzzingWeekly CW15: Another Expression DoS Vulnerability Found in Spring - CVE-2023-20863
Tags: security, testing, cybersecurity, fuzzing
Published: 2023-04-14 16:19:30

Another Expression DoS Vulnerability Found in Spring - CVE-2023-20863:
https://www.code-intelligence.com/blog/expression-dos-spring-part-2


Fuzzing Web Applications with Wfuzz | HackTheBox baby todo or not todo:
https://www.youtube.com/watch?v=008QxzctzqQ

CAN do attitude: How thieves steal cars using network bus:
https://www.theregister.com/2023/04/06/can_injection_attack_car_theft/

https://www.fuzztesting.io/fuzzing-weekly

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phtyi95kamanzftg76e2.png)
Run visual commands like htop in Common Lisp
Tags: lisp, commonlisp
Published: 2023-04-14 16:14:12

A little trick I just added to the Cookbook: https://lispcookbook.github.io/cl-cookbook/os.html

## Running visual commands (htop)

Use `uiop:run-program` and set both `:input` and `:output` to `:interactive`:

```lisp
(uiop:run-program "htop" :output :interactive :input :interactive)
```

This will spawn `htop` in full screen, as it should.

It works for more commands (`sudo`, `vim`…), however not for all interactive
programs, such as `less` or `fzf`. If you know how to do it, your contribution will be precious.

If you want more, you'd have to resort to `cmd` and set its `*visual-commands*` list with your visual program, to run the interactive command in a new terminal like xterm, or emacsserver (if you use Emacs' vterm you could have emacsserver open the interactive command inside another vterm… it's nearly transparent).

```lisp
(push "fzf" cmd:*visual-commands*)
(let ((cmd:*terminal* '("xterm" "-e")))
   …)
```
Creating a Docker Image for MySQL Server
Tags: database, docker, mysql, hackathon
Published: 2023-04-14 15:49:27

**Prerequisites**

- Docker must be installed on your machine.
- You should have a basic understanding of Docker and how it works.

**Steps**

1. Open a text editor and copy-paste the provided Dockerfile for MySQL server.

2.Save the file with a suitable name, for example, "Dockerfile-mysql".

3.Open the terminal or command prompt and navigate to the directory where the Dockerfile is saved.

4.Run the following command to build the Docker image:

`docker build -t mysql-server -f Dockerfile-mysql .`
_This command will create a Docker image named "mysql-server" from the Dockerfile._

5.Once the Docker image is built, you can run a container using the following command:

`docker run -d -p 3306:3306 --name mysql-container mysql-server
`
_This command will start a container named "mysql-container" from the "mysql-server" image and will map the container's port 3306 to the host's port 3306._

6.You can now connect to the MySQL server from your host machine using any MySQL client, such as MySQL Workbench or phpMyAdmin, by using the following credentials:

- Host: localhost or 127.0.0.1
- Port: 3306
- Username: youruser
- Password: yourpassword

**It's over now! You have at the moment a MySQL server Docker image that you can use for your applications.**

Don't forget to catch me up on [linkedin](https://www.linkedin.com/in/gaurav-kumar-68373a202/)
**It's over now! You have at the moment a MySQL server Docker image that you can use for your applications.

**
Enfim, férias !!!!
Tags: vacation
Published: 2023-04-14 15:21:15

Para muitos, férias significam tempo livre e descontração. No entanto, para alguns programadores, as férias podem ser uma fonte de ansiedade e estresse. Afinal, muitos de nós nos identificamos com nossos trabalhos e temos dificuldade em desligar completamente durante as férias. Se você está sentindo ansiedade em relação às suas próximas férias, aqui estão algumas dicas que podem ajudar.

### **Planeje suas férias com antecedência**
Se você está preocupado com as férias, pode ser útil planejá-las com antecedência. Comece a pensar sobre o que você gostaria de fazer nas suas férias e reserve hotéis, passagens ou atividades com antecedência. Isso pode ajudar a aliviar a ansiedade que você pode sentir ao pensar nas suas férias.

### **Desconecte-se completamente do trabalho**
Muitos programadores têm dificuldade em se desconectar completamente do trabalho. No entanto, é importante lembrar que as férias são um tempo para relaxar e recarregar as energias. Desconecte-se completamente do trabalho, desligue as notificações do celular e do computador e não verifique seus e-mails. Isso pode ajudar a reduzir a ansiedade que você pode sentir ao pensar em suas tarefas inacabadas.

### **Faça algo que você ama**
As férias são um tempo para fazer algo que você ama e que pode ajudá-lo a relaxar. Reserve um tempo para fazer algo que você gosta, como ler um livro, assistir a um filme, caminhar ou visitar amigos e familiares. Isso pode ajudar a reduzir a ansiedade que você pode sentir ao pensar em suas responsabilidades profissionais.

### **Pratique mindfulness**
A prática de mindfulness pode ajudar a reduzir a ansiedade e o estresse. Reserve um tempo para meditar ou praticar a atenção plena em suas atividades diárias. Isso pode ajudar a aliviar a ansiedade que você pode sentir ao pensar em suas férias ou em suas responsabilidades profissionais.

### **Fale com alguém**
Se você está se sentindo ansioso em relação às suas férias, pode ser útil conversar com alguém. Fale com amigos ou familiares sobre suas preocupações e procure aconselhamento de um profissional de saúde mental, se necessário. Conversar sobre suas preocupações pode ajudar a aliviar a ansiedade que você pode estar sentindo.

Em suma, as férias são uma oportunidade para desligar e desfrutar de algum tempo para si mesmo. Se você está se sentindo ansioso em relação às suas férias, tente planejá-las com antecedência, desconectar-se completamente do trabalho, fazer algo que você ama, praticar mindfulness e falar com alguém sobre suas preocupações. Lembre-se de que as férias são um tempo para relaxar e recarregar as energias, e que você merece esse tempo para si mesmo.
Introducing React Server: A New Way to Write Server-Side Code as TSX Components
Tags: javascript, webdev, opensource
Published: 2023-04-14 15:20:23

I'm excited to share a new open-source project I've been working on called React Server. It's a framework that allows you to write your server-side code/backend as TSX components and consume them on the frontend using GraphQL.

The main goal of React Server is to provide a unified interface in the form of React components, making it easier to create a component-driven, modular architecture on the backend. This bridges the gap between server and client, making reactive and real-time server authoritative applications much more straightforward to build.

Some key features of React Server include:

* Writing server-side code as TSX components
* Consuming backend components on the frontend via GraphQL
* React as unified interface for a component-driven architecture
* Simplified reactive and real-time server authoritative app development

The project is still in its early stages (pre-alpha), and we're actively seeking feedback, ideas, and contributors. We'd love for you to check it out and let us know what you think. Any input, questions, or suggestions are more than welcome!

You can find the GitHub repository here: [React Server GitHub Repo](https://github.com/state-less/react-server)

And the documentation can be found here: [React Server Docs](https://state-less.cloud/)

Thanks for taking the time to check out React Server, and I'm looking forward to hearing your thoughts and ideas. Happy coding!
Main Concepts of React Js !!
Tags: react, javascript, webdev, opensource
Published: 2023-04-14 15:15:31

React Js concepts

React.js is a popular open-source JavaScript library that is used to create user interfaces for web applications. Here are some key concepts and features of React:

1.  Components: React is based on a component-based architecture where UI is broken down into individual pieces, called components. Each component is a self-contained and reusable piece of code that has its own state, properties, and methods.
    
2.  JSX: JSX is a syntax extension that allows developers to write HTML-like code within their JavaScript code. This allows developers to easily define the structure of their UI components and helps to improve code readability.
    
3.  Virtual DOM: React uses a virtual DOM to manage changes to the UI. The virtual DOM is a lightweight copy of the actual DOM and updates to the UI are made on the virtual DOM first, then compared to the actual DOM and only the necessary changes are made. This helps to improve the performance of the application.
    
4.  Props: Props are short for properties, and they are used to pass data from a parent component to a child component. Props are read-only and cannot be modified by the child component.
    
5.  State: State is used to manage the data and behavior of a component. Unlike props, state can be modified by the component itself, and changes to the state will trigger a re-render of the component.
    
6.  Lifecycle methods: React provides a set of lifecycle methods that allow developers to hook into different stages of a component's lifecycle. These methods allow developers to control when a component is rendered, updated, or destroyed.
    
7.  React Router: React Router is a popular library for managing navigation in React applications. It allows developers to define routes and render different components based on the URL.
    
8.  Redux: Redux is a state management library for React that helps to manage the application state in a predictable way. It provides a centralized store for application data and allows for easier debugging and testing.
    
9.  React Hooks: React Hooks are a set of functions that allow developers to use state and other React features without writing class components. Hooks make it easier to reuse logic between components and simplify code.
    

These are some of the key concepts and features of React.js. By understanding these concepts, developers can create efficient, scalable, and reusable user interfaces for web applications.
Unpacking Collections in C#
Tags: beginners, programming, dotnet, learning
Published: 2023-04-14 14:57:18

The objective of this article is to provide practical examples of some of the most commonly used collection types in C#, and to examine their usage more closely. Our focus will be on effectively leveraging .NET collections to optimize the programming workflow.


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

## Demystifying ICollection<T> and ICollection
When we speak about ICollection<T> we can say is like a interface that helps you work with groups of things, like a box of toys. It can tell you how many toys are in the box, if a specific toy is in the box, and even give you a list of all the toys. If the box is not read-only, meaning you can add or take out toys, you can also use ICollection<T> to add new toys, remove old ones, or clear out the entire box. And, you can use it with the foreach statement.

```charp
public interface ICollection<T> : IEnumerable<T>, IEnumerable
{
      int Count { get; }
      bool Contains (T item);
      void CopyTo (T[] array, int arrayIndex);
      bool IsReadOnly { get; }
      void Add(T item);
      bool Remove (T item);
      void Clear();
}
```

In another hand the non generic ICollection is like a countable collection, but you can’t add or remove items from it, and you can’t check if a certain item is in the collection. It’s mostly just for counting the number of items in a collection.

```charp
public interface ICollection : IEnumerable
{
      int Count { get; }
      bool IsSynchronized { get; }
      object SyncRoot { get; }
      void CopyTo (Array array, int index);
}
```

## IList<T> vs IList: Exploring the Differences and Similarities in C# Collections

One of the most popular interface is IList<T>. This is another interface for collections, but...

[Read more](https://admirlive.medium.com/unpacking-collections-in-c-991edb3ea2b2)
Just a super easy flowchart
Tags: help, javascript, graphs
Published: 2023-04-14 14:33:01

I’ve on the hunt for a super simple flowchart solution that’s ONLY concerned with flowcharts and nothing else.

I don’t want to manually position the graph nodes or set it up, I already have my nodes and edge data so all I want to do is transfer my format into a JavaScript api and see a graph for debugging, no DSLs either

I guess I’m writing one with chat GPT but even that’s taking away from my core goal, please if you have one for me I’d be so grateful
7zip for mult files
Tags: zip, compress, multpart
Published: 2023-04-14 14:25:17

Compress a folder using 7zip to split into volumes of 1000m.

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




`7z  -tzip -v1000m a myFile.zip myDirectory/`

utils to split files in limited upload storage, One drive for example limits to 1024M.
What you learning about this weekend?
Tags: beginners, codenewbie, discuss, learning
Published: 2023-04-14 14:25:13

Heyo newbies!

I'm curious what y'all are learning about this weekend...

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.  

And hey, don't work too hard now... it's (nearly) the weekend! 🧘

![a sloth with a big smile on its face kicking back in a hanging chair](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcjbljx0jsyen3ot3fnt.gif)
Must do pattern questions :Part-2 [ Javascript]
Tags: javascript, dsa, programming, patterns
Published: 2023-04-14 14:15:49

After learning how to build some basic pattern in Javascript. I come with with **part-2** with more complex patterns.

If you directly come to this second blog , then please checkout my first blog of :   **[Must do Pattern Questions : Part 1 [Javascript]](https://dev.to/jagroop2000/must-do-pattern-questions-part-1-javascript-32oj)**

So today In this part I am sharing **5** patterns where we have to think a bit more than previous patterns that is available in Part-1 of the blog and we will solve this in JavaScript.


```
// 1
// 2 3
// 4 5 6
// 7 8 9 10
// 11 12 13 14 15

const pattern = (n) => {
  let patternCapturer = "";
  let counter = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j <= i; j++) {
      counter++;
      patternCapturer += `${counter} `;
    }
    patternCapturer += "\n";
  }
  console.log(patternCapturer);
};

pattern(5);
```

```
// A
// AB
// ABC
// ABCD
// ABCDE

const alphabetPattern = (n) => {
  let patternCapturer = "";
  for (let i = 1; i <= n; i++) {
    let alphabetIndex = 65;
    for (let j = 1; j <= i; j++) {
      patternCapturer += `${String.fromCharCode(alphabetIndex)}`;
      alphabetIndex++;
    }
    patternCapturer += "\n";
  }
  console.log(patternCapturer);
};
alphabetPattern(5);
```

```
// ABCDE
// ABCD
// ABC
// AB
// A

const alphabetPatternReverse = (n) => {
  let patternCapturer = "";
  for (let i = 1; i <= n; i++) {
    let alphabetIndex = 65;
    for (let j = n; j >= i; j--) {
      patternCapturer += `${String.fromCharCode(alphabetIndex)}`;
      alphabetIndex++;
    }
    patternCapturer += "\n";
  }
  console.log(patternCapturer);
};
alphabetPatternReverse(5);
```

```
// A
// BB
// CCC
// DDDD
// EEEEE

const alphabetPatternIdentical = (n) => {
  let patternCapturer = "";
  let alphabetIndex = 65;
  for (let i = 1; i <= n; i++) {
    for (let j = 1; j <= i; j++) {
      patternCapturer += `${String.fromCharCode(alphabetIndex)}`;
    }
    alphabetIndex++;
    patternCapturer += "\n";
  }
  console.log(patternCapturer);
};
alphabetPatternIdentical(5);

```

```
// *****
// *   *
// *   *
// *   *
// *****

const hollowSquarePattern = (n) => {
  let patternCapturer = "";
  for (let i = 1; i <= n; i++) {
    if (i == 1 || i == n) {
      for (let j = 1; j <= n; j++) {
        patternCapturer += "* ";
      }
    } else {
      for (let j = 1; j <= n; j++) {
        if (j == 1 || j == n) {
          patternCapturer += "* ";
        } else {
          patternCapturer += " ";
        }
      }
    }
    patternCapturer += "\n";
  }

  console.log(patternCapturer);
};

hollowSquarePattern(5);

```

**Github Link :**
https://github.com/Jagroop2000/DSA-One-Javascript/blob/master/patterns/patterns-part2.js