teleren/devto huggingface dataset:
Simple exercise for Javascript Ajax
Tags: javascript, ajax, css, tutorial
Published: 2022-05-14 12:17:00

I have about 4 years of experience working as private tutor of programming. About five years ago I published a blog post in my website in Persian language about entitled "[Private Laravel Tutor](https://haamid.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AE%D8%B5%D9%88%D8%B5%DB%8C-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84/)" and people started to call me. I always love teaching people and it was a good opportunity. 
After a while the number of student raise up and today I have two sessions per day in average and most of my previous students are working around the world. 
Today I had a JS session about Working with AJAX. I post the content of the codes for beginner friends at this community. 

```
index.html
```
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning Ajax</title>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <button class="btn" id="load">Load Posts</button>
    <button class="btn" id="clear">Clear Posts</button>
    <div id="posts">

    </div>
    <script src="js/app.js"></script>
</body>
</html>
```

```
css/app.css
```
```
body {
    margin: 0;
}

#posts {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.post {
    width: 25%;
    margin: 20px;
    border: 3px solid rgb(36, 220, 91);
    padding: 10px;
}

.post:hover {
    border: 3px solid rgb(0, 0, 0);
}

.post h1 {
    font-family: cursive;
}

.btn {
    padding: 10px;
    margin: 10px;
    background-color: rgb(36, 220, 91);
    color: black;
}
```

```
js/app.js
```

```

document.getElementById("load").addEventListener("click", function () {
    url = "https://jsonplaceholder.typicode.com/posts";
    sendAjax(url);
});

function sendAjax(url) {
    let http = new XMLHttpRequest();
    http.onload = function () {
        let posts_element = document.getElementById("posts");
        let posts = JSON.parse(this.responseText);

        posts.forEach(function (post) {
            let div = document.createElement("div");
            div.className = "post";

            let h3 = document.createElement("h3");
            h3.textContent = post.title;
            div.appendChild(h3);

            let p = document.createElement("p");
            p.textContent = post.body;
            div.appendChild(p);

            posts_element.appendChild(div);
        });
    };
    http.open("GET", url);
    http.send();
}

document.getElementById("clear").addEventListener("click", function () {
    let posts_element = document.getElementById("posts");
    posts_element.textContent = ''
});
```
If you are looking for a tutor, feel free to contact me :)
JS: "CTR + Wheel" Event
Tags: javascript, tutorial, programming, productivity
Published: 2022-05-14 11:59:24

This short read is for those who are searching how to get event for `CTR + MOUSEWHEEL` event.

Here is a sample. Lets say we are trying to change to font size of our text if we `CTR + WHEEL`.

```js


/**
You can change the window to element you want this event to happen.
example: document.getElementById("view-chapter-verse").addEventListener()
*/
window.addEventListener("wheel", function (event) {
        event.preventDefault(); // this will prevent the scaling for browsers.
        if (event.ctrlKey) { // check if we are pressing the CTR key
            if (event.deltaY) {
                // Do what you want here. In this example
                // Im trying to change the Font Size of my article
                // event.deltaY is less than 0 it means we are scrolling up. If not scrolling down.
                fontSize = event.deltaY < 0 ? fontSize.value + 0.5 : fontSize.value - 0.5;
            }
        }
});

```
NFT Landing Page Template
Tags: javascript, web3, opensource, nextjs
Published: 2022-05-14 11:53:50


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

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7hx8a6tf8e49p2glh3n.png)
[Github Link](https://github.com/kumard3/dev-ui-templates/tree/main/template-12)
Appwrite Community Report #6
Published: 2022-05-14 11:07:10

Howdy people! 👋

Yet another community update from us! (If you've been reading this every week, you know our secret sauce, and it is - the support we receive from all of you) 👀

**TLDR;** Presenting before you some freshly baked videos from the Appwrite team, issues solved, work-in-progress and more Appwrite related stuff. Stay tuned till the end! 😉

---

## 📢  What’s new

- We announced our first Open Source Fund where we pledged $50,000 to support open-source maintainers! 😮
We’ve received applications from so many amazing projects and cannot wait to see more goodness coming our way! 🤩 If you’re a maintainer or know some amazing maintainers making an impact in Open Source, the OSS Fund is definitely worth checking out. 
{% embed https://appwrite.io/oss-fund %}

- The Appwrite x Dev hackathon was a huge success, with so many amazing developers coming together to build something! 🚀

- We've put out some content on YouTube to ease your learning with us, check out our first video on “How to Install Appwrite”
{% embed https://www.youtube.com/watch?v=aO4mw8smXkI %}

**P.S** - The dormant volcano is active now, press the bell icon to know when we drop something! 😉 

---

## ✅ Issues solved

We hear your feedback and try to implement them every week!  Here are the issues we’ve fixed this week:

- Improved Appwrite CLI with bug fixes in the appwrite deploy function
  🔗[Link to PR](https://github.com/appwrite/sdk-generator/pull/422)

- Fixed GIF preview
  🔗[Link to PR](https://github.com/utopia-php/image/pull/20)
- Refactored SSL generation
  🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3074)
- Added the ability to view user memberships in the users screen
  🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3211)

_Fun fact: We merged 65 PRs this month! 🤯_

---

## ⚒️ What we’re currently working on

- Introducing hostname string length to make validation more secure by default
- Checking OAuth email verification
- Adding Backblaze support
- Unifying S3 and S3 compatible storage adapter calls and minimizing the number of environment vars needed to configure them.

---

## 🗣 Discussions
 - Continued discussion about how Appwrite handles user permissions:
🔗[Join the discussion here](https://github.com/appwrite/appwrite/discussions/2689)

---

## 📘 Resources

- Appwrite overview video by Hitesh Choudhary {%embed https://www.youtube.com/watch?v=40vM21ZszT0 %}
- 30 days of Appwrite is now updated, have you [checked them out already](https://30days.appwrite.io/)?
- Built some cool solutions with Appwrite? Be sure to drop them [here](https://github.com/appwrite/awesome-appwrite).
What is Map object and its applications
Tags: javascript, webdev, discuss, todayilearned
Published: 2022-05-14 11:03:06

Let's learn about JavaScript Maps.

Maps are similar to objects. 
They store the elements in a key/value pair.

However, a map can contain objects, functions, and other data types as a key, unlike objects.
We can create a Map using the new Map() constructor.

To insert it into the map, we use the set() method. We can use objects and functions as keys as well.
```javascript
const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
console.log(map1)
//expected output: Map {"a": 1, "b": 2}
```

To access the elements, we use the get() method. We call the get method on the key and get the corresponding values. 
```javascript
const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
console.log(map1.get('a'));
// expected output: 1
```

To check if an element is present in the map, we get a function called has()
```javascript
const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
console.log(map1.has('c'))
//expected output: false
```

Then we have clear() and delete() methods which can enable us to remove data from the map
```javascript
const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.delete('b');
console.log(map1)
//expected output: Map {"a" : 1}
```

To get the length of the Map we have the property of _size_ which will give us the number of elements present on the map.
```javascript
const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
console.log(map1.size); 
// expected output: 3
```

To iterate over the map, we can use for loops or for-each loop. The elements are accessed in the order they have been inserted.
```javascript
const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);

for (let [key, value] of map1){
	console.log(key, "-", value)
}
// a - 1
​// b - 2
​// c - 3

map1.forEach(function(value, key){
	console.log(key + "-" + value)
})
// a-1
​// b-2
​// c-3
```
We can iterate over the keys and values individually as well.
```javascript
for(let values of map1.values()){
	console.log(values)
}
//1 2 3 

for(let values of map1.keys()){
	console.log(values)
}
//a b c
```

That was a quick overview of the Map object.
Let me know if you have used it in practical application and how did it perform!
Fix Postman Desktop Stuck on Loading in Windows 10
Tags: postman, debug, errors, bug
Published: 2022-05-14 11:02:42

> NOTE: There is a simpler solution on comment section below by change settings on Postman GUI.

I've been using Postman for almost a full year to do API testing, then I came across this problem. When I turned on the laptop and opened Postman, **the loading process never finished**.

![postman loading screen stuck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy6bgtz66eohrfxc0o56.png)

I immediately panicked because I had a need to work on a team project, where **there was a need to share Postman tests**, which resulted in everyone having to use postman as a tool to do API testing.

I feel weird because it's never been like this before, I think maybe because of internet problem. I tried **changing the internet connection** but the result is still the same. Then I tried **restarting the laptop**, but the result is still the same.

I tried to find various solutions on google. It turned out to be one of the **common topics among Postman users**. But in some discussions that I found not really discussing until it was able to solve the problem (and that made me even more panicked). Finally I found a way (sorry I forgot the source) and after I tried, it's worked.

The method is quite simple, namely by adding an environment variable with the name **POSTMAN_DISABLE_GPU** and giving it a value of **false**. After that restart postman, and it's done.

1. Press start (windows) then search for `Edit the system environment variables`
![windows search environment variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/woby1ucr6i95kpjedfha.png) 
2. Then click the `Environment Variables...` button on bottom.
3. In the `System variables` section, click `New...`.
4. Fill the `variable name` column with `POSTMAN_DISABLE_GPU`, and the `variable value` column with `false`.
![windows add system environment variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r95ekjgbltfmjv9suw6.png) 
5. Press `OK` on all windows.
6. Restart your Postman desktop client.
7. DONE.

After further investigation, it turns out that this problem can occur at any time unexpectedly. It's about **GPU compatibility**, but I'm not sure what the details are.

That's what I can share regarding my experience dealing with Postman stuck on the loading screen on Windows 10. Thank you for reading this article to the end. **Help others who have the same problem by share this article**.
Network Address Translation(NAT)
Published: 2022-05-14 10:49:17

NAT is the process of mapping an internet protocol(ip) address to another so that a router can access resources outside a private network.

### How Does NAT Work ?
NAT occurs between an internal IP and an external IP via a router.
A computer inside a network makes a request to a computer on the internet. Routers within that network recognise that the request is not for a resource inside the network so the routers act as agents between the public network and the private network, then sends the request to the firewall. The firewall sees the request from the computer within the internal IP, then makes same request to the internet using its own public IP address. The firewall then returns the response from the internet resource to the computer inside the private network.

### Ways By Which NAT Can Map IP Addresses

1. From a local IP address to one global IP address.
2. Hiding an entire IP address space comprised of Private IP 
   addresses behind a single IP address.
3. To a large private network using a single public IP 
   address.
4. From a local IP address to a pool of public IP addresses.
5. From a global IP address to a pool of local IP addresses.

### Types Of NAT

1. Static NAT: This maps a single unregistered IP Address with  
   a registered IP address.

2. Dynamic NAT: This translates an unregistered IP Address 
   into a registered IP address from a pool of public IP 
   addresses.

3. Reverse NAT: This allows users to connect to themselves 
   using the internet or public network.

4. Port Address Translation: It is also known as NAT Overload 
   or Port-level multiplexed NAT or Single Address NAT. In 
   this, many local(private) IP addresses can be translated to 
   a single registered IP address.

5. Overlapping NAT: This happens when two organisations whose 
   networks uses the same IP address merge or when a 
   registered IP address is assigned to multiple devices.

### References

1. _What is Network Address Translation?_.CGP Holdings, Inc.14 May, 2022. https://whatismyipaddress.com/nat.

2. Katie Terrell Hanna. _Network Address Translation (NAT) _.[online]. TechTarget. 14 May, 2022. https://www.techtarget.com/searchnetworking/definition/Network-Address-Translation-NAT.

3._Network Address Translation_. Avi Networks. 2022. 14 May, 2022. https://avinetworks.com/glossary/network-address-translation/#:~:text=Network%20Address%20Translation%20(NAT)%20is,private%20network%20a%20public%20address.

4.saurabhsharma56. _Network Address Translation (NAT)_. GeeksforGeeks. 13 Dec, 2021. 14 May, 2022. https://www.geeksforgeeks.org/network-address-translation-nat/
I made an open source chatroulette app
Tags: deeplearning, machinelearning, python, datascience
Published: 2022-05-14 10:33:11

You can download it [here](https://play.google.com/store/apps/details?id=pepper_client.pepper_client.pepper_client)
If you don't have android, you can compile it by yourself from the source code:
https://github.com/lorenzotinfena/pepper-client
Also the server source code is open source: https://github.com/lorenzotinfena/pepper-server
Open Source Adventures: Episode 58: PyScript: First Impressions
Tags: python, javascript
Published: 2022-05-14 10:24:38

An alpha version of [PyScript](https://pyscript.net/) just came out, with tagline "Run Python in Your HTML". Let's check it out.

Documentation is mostly all wrong, so there's a lot of steps to get it even running.

### Download

The download instructions are:

* Download PyScript now
* Unzip the downloaded file
* Copy the assets you want to use and add the following lines to your html file

There's just one problem, there are no asset files in that zip.

So instead we need to manually download https://pyscript.net/alpha/pyscript.css and https://pyscript.net/alpha/pyscript.js instead.

That however does not work, as it then crashes trying to get `pyscript.py`, so we need to get https://pyscript.net/alpha/pyscript.py as well.

### Local server

I tried just creating a Hello World HTML and opening it as a local file, but that got into instant CORS error.

It's unfortunately more and more common with anything that uses modern web technologies.

Fortunately Python comes with a builtin HTTP server, so we can run `python3 -m http.server 8080` and then open `http://localhost:8080/hello.html`

### Hello, World!

OK, with that out of the way, let's write the simplest possible Python script:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hello World</title>
  <link rel="stylesheet" href="./pyscript.css" />
  <script defer src="./pyscript.js"></script>
</head>
<body>
  <py-script>
    print("Hello World")
  </py-script>
</body>
</html>
```

If opened from local server, it at least no longer gets any errors in the network tab.

What happens then is that about 10% of time I get "Hello World" printed. And 90% of time there's an error in console like this:

```
JsException: SyntaxError: Failed to execute 'querySelector' on 'Document': '#-49bea52c-4893-412d-cba1-447d24c65f0a' is not a valid selector.
```

And only a pink bar in the document. I thought it might be some issues with some Chrome Extensions, so I tried it in an incognito window or in Safari, same thing.

It's very clearly some race condition.

### Should you use PyScript?

Obviously not yet.

### Coming next

[All the code is on GitHub](https://github.com/taw/open-source-adventures).

I want to come back to PyScript at some point, but in the next episode we'll actually take a look at Opal Ruby, which recently got 1.5 release.
Multi-Cloud Private Network Connectivity through OIC
Tags: multicloud, oraclecloud, aws, privatenetwork
Published: 2022-05-14 10:10:33

When you need to 𝙞𝙣𝙩𝙚𝙜𝙧𝙖𝙩𝙚 𝙨𝙚𝙧𝙫𝙞𝙘𝙚𝙨 or applications running on a private network—such as:
(1) ☁️ an Amazon Web Services (AWS) 𝙑𝙋𝘾,
(2) ☁️ Microsoft Azure 𝙑𝙉𝙀𝙏,
(3) ☁️ Google Cloud Computing 𝙑𝙋𝘾—or
(4) 🏢 an 𝙤𝙣-𝙥𝙧𝙚𝙢𝙞𝙨𝙚𝙨 𝙥𝙧𝙞𝙫𝙖𝙩𝙚 𝙣𝙚𝙩𝙬𝙤𝙧𝙠,
with SaaS or on-premises enterprise applications, you can use:
(1) ☁️ Oracle 𝙄𝙣𝙩𝙚𝙜𝙧𝙖𝙩𝙞𝙤𝙣 𝘾𝙡𝙤𝙪𝙙 𝙎𝙚𝙧𝙫𝙞𝙘𝙚 (𝙊𝙄𝘾) and
(2) 🔌 a 𝙘𝙤𝙣𝙣𝙚𝙘𝙩𝙞𝙫𝙞𝙩𝙮 𝙖𝙜𝙚𝙣𝙩 
to establish private endpoint connectivity.

This 𝙖𝙧𝙘𝙝𝙞𝙩𝙚𝙘𝙩𝙪𝙧𝙚 provides the necessary connectivity between:
(1) 🌐 𝙢𝙪𝙡𝙩𝙞-𝙘𝙡𝙤𝙪𝙙 𝙥𝙧𝙞𝙫𝙖𝙩𝙚 𝙣𝙚𝙩𝙬𝙤𝙧𝙠𝙨 and
(2) ☁️ Oracle's 𝙘𝙡𝙤𝙪𝙙 𝙨𝙚𝙧𝙫𝙞𝙘𝙚𝙨 or applications
𝙬𝙞𝙩𝙝𝙤𝙪𝙩 𝙙𝙞𝙧𝙚𝙘𝙩𝙞𝙣𝙜 𝙩𝙧𝙖𝙛𝙛𝙞𝙘 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙩𝙝𝙚 𝙥𝙪𝙗𝙡𝙞𝙘 𝙞𝙣𝙩𝙚𝙧𝙣𝙚𝙩 as part of its outbound integration from OIC Service.

𝙀𝙨𝙩𝙖𝙗𝙡𝙞𝙨𝙝 𝙖 𝙢𝙪𝙡𝙩𝙞-𝙘𝙡𝙤𝙪𝙙 𝙥𝙧𝙞𝙫𝙖𝙩𝙚 𝙣𝙚𝙩𝙬𝙤𝙧𝙠 𝙘𝙤𝙣𝙣𝙚𝙘𝙩𝙞𝙫𝙞𝙩𝙮 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙊𝙧𝙖𝙘𝙡𝙚 𝙄𝙣𝙩𝙚𝙜𝙧𝙖𝙩𝙞𝙤𝙣 𝘾𝙡𝙤𝙪𝙙
https://docs.oracle.com/en/solutions/multi-cloud-with-oic/index.html

𝙎𝙩𝙖𝙮 𝙩𝙪𝙣𝙚𝙙 𝙗𝙮 𝙛𝙤𝙡𝙡𝙤𝙬𝙞𝙣𝙜
https://www.linkedin.com/feed/hashtag/?keywords=did_you_know_that

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

https://www.linkedin.com/posts/mahmoudrabie2004_didabryouabrknowabrthat-cloud-cloudcomputing-activity-6931185994176081920-MsDR?utm_source=linkedin_share&utm_medium=member_desktop_web
How I learned the basics of Git/GitHub.
Published: 2022-05-14 09:59:49

I needed to know the basics of Git and GitHub so I decided to do a simple Python project. The project is a CLI hangman game that lets you pick from a range of themes.

I didn't want to do a really hard project to start off with because I knew it wouldn't help me learn Git and GitHub very well since I would get lost and wouldn't know what to do most of the time.

The project is here: https://github.com/DempseyNewton/Hangman-Python. I didn't use branches or anything like that because I wanted to save that for a project that has a variety of uses.

In conclusion, this project really helped me understand and use the absolute basics of Git and GitHub.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36ypliw857eftdan9yq6.png)
Tips to use "sed" command
Tags: todayilearned, linux
Published: 2022-05-14 09:50:44

When we used the sed command in our pipeline, we had some surprises and took a little bit of times to understand our issue.

So here is some tips that I learned from these searches.

---

## Change every occurrence in a file
As said in the title, the following command will change every occcurrence of "AAAA" by "BBBB" in the "file.json" file.

```
sed -i 's/AAAA/BBBB/g' file.json
```

---

## Change first occurrence of each line
Here is the biggest issue that we had. Without the "**g**" at the end of the replace option, the following command will only replace **the first occurrence of "AAAA" in each line**.

```
sed -i 's/AAAA/BBBB/' file.json
```

---

## Change first occurrence
The following command is to replace the first occurrence of "Apple" by "Banana". But this replacement will only occur between the index 0 and the first occurrence of Apple.

```
sed '0,/Apple/{s/Apple/Banana/}' input_filename
```
So you can easily customize it to replace the first occurrence of Apple after a particular index or specific words.

---

I hope it will help you! 🍺

---

<center><h3>You want to support me?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
.NET MAUI (Cross Platform framework)
Published: 2022-05-14 09:40:16

.NET MAUI stands for .NET Multi-platform App UI.

.NET MAUI is a first class cross-platform framework for creating native mobile and desktop apps with C# and XAML.

Using .NET MAUI We can develop apps that can run on Mobile (Android, iOS) and Desktop (macOS, Windows) from a single shared code-base.

.NET MAUI is open source and is the evolution of Xamarin.Forms.

.NET MAUI and Xamarin.Forms has many similarities. Xamarin.Forms need separate project for each platform. However, .NET MAUI can create multi platform apps using a single project. One of the key aim of .NET MAUI is to implement your app logic and UI layout in single code-base. Also .NET MAUI allow you to add platform-specific code and resources if necessary.


Creating a cross-platform app is not easy task due to deferent OS and device specs. .NET MAUI simplified it by abstracts them into a single shared project that can target Android, iOS, macOS, and Windows.


.NET MAUI single project provides the following features:

- A single shared project that can target Android, iOS, macOS, and Windows.
- A simplified debug target selection for running your .NET MAUI apps.
- Shared resource files within the single project.
- A single app manifest that specifies the app title, id, and version.
- Access to platform-specific APIs and tools when required.
- A single cross-platform app entry point.

**Conclusion**
I am very excited about .NET MAUI and all the productivity and performance it will bring. I look forward to build apps using .NET MAUI and share my learnings and experiences with you all.
 
Thanks for reading! 
Feedback is always welcome.