teleren/devto huggingface dataset:
API Calls 
Tags: api, javascript, webdev, beginners
Published: 2021-08-07 18:18:56

#Javascript API Calls 
###XML HTTP Request
* All modern browsers support the XMLHttpRequest object to request data from a server.
* It works on the oldest browsers as well as on new ones.
* It was deprecated in ES6 but is still widely used.
```javascript
var request = new XMLHttpRequest();
request.open('GET','https://jsonplaceholder.typicode.com/users')
request.send();
request.onload =() =>{
console.log(JSON.parse(request.response));
}
```
###Fetch API
* The Fetch API provides an interface for fetching resources including across the network in an asynchronous.
* It returns a Promise.
* It is an object which contains a single value either a Response or an Error that occurred.
* .then() tells the program what to do once Promise is completed.
```javascript
fetch('https://jsonplaceholder.typicode.com/users')
.then(response=>{
return response.json();})
.then(data=>{
console.log(data);
})
```
###Axios
* It is an open-source library for making HTTP requests.
* It works on both Browsers and Node js.
* It can be included in an HTML file by using an external CDN.
* It also returns promises like fetch API
```javascript
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get('https://jsonplaceholder.typicode.com/users')
.then(response =>{
console.log(response.data)})
```
###JQuery AJAX
* It performs asynchronous HTTP requests.
* Uses $.ajax() method to make the requests.
* Ability to send GET and POST requests
* Ability to Load JSON, XML, HTML or Scripts
```javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(document).ready(function(){
$.ajax({
url:"https://jsonplaceholder.typicode.com/users",
type:"GET",success:function(result){
console.log(result);
}
   })
})
```

###[Rubico](https://rubico.land/)
* asynchronous code should be simple.
* functional style should not care about async.
* functional transformations should be composable, performant, and simple to express.
```javascript
const { pipe, map } = rubico

const toTodosUrl = id => `https://jsonplaceholder.typicode.com/todos/${id}`

const logTodoByID = pipe([ // fetch a Todo and log it
  toTodosUrl,
  fetch,
  response => response.json(),
  console.log,
])

const todoIDs = [1, 2, 3, 4, 5]

map(logTodoByID)(todoIDs) 
// fetch Todos per id of TodoIDs and log them
// { userId: 1, id: 4, title: 'et porro tempora', completed: true }
// { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
// { userId: 1, id: 3, title: 'fugiat veniam minus', completed: false }
// { userId: 1, id: 2, title: 'quis ut nam facilis...', completed: false }
// { userId: 1, id: 5, title: 'laboriosam mollitia...', completed: false }

// same as above but with limited concurrency
// map.pool(2, logTodoByID)(todoIDs)
```
Most demanding backend framework in Software industry.
Tags: django, career, resume, python
Published: 2021-08-07 17:58:53

Hello Devs, In this blog, I'll tell you something about the most trending and demanding backend framework in the software industry and obviously it's highly paid.
and that backend framework is Django Python Web Framework, yes Django is the most demanding and highly paid backend framework in the software industry and Django is used widely in Web Development and Django is the most lovable Backend framework. Django is the best framework.

## What is Python ?

As we know Python is the best programming language in 2021, Python ranks in Top 3 programming language according to TIOBE INDEX, Python is a high-level programming language, many big companies and tech giants use Python as their primary language and they uses Python framework as the primary framework because of their scalability, and that companies are Google, Instagram, Spotify, Quora, and Dropbox, Facebook.

## What is Django ?

Django is a high-level Python Web Framework, it follows MVT(Model, View, Template) architecture and it's highly scalable and secure, enables rapid development and great community, yeah but it's cost effective, I never suggest Django for smaller projects.
##### Here are the Top Companies who uses Django.

1. Disqus
2. YouTube
3. Instagram
4. Spotify
5. Bitbucket
6. DropBox
7. Mozilla
8. Pinterest
9. The Washington Post
10. Eventbrite

You can create many types of application in Django like Ecommerce, Social Network, Chat Applications, Food delivery projects, blogging applications etc.
It enables the rapid development and you can create a simple ecommerce website in just 3-4 hours, it's very fast, but Django is cost effective, it's hosting is very expensive and Most probably Django is used in highly scalable application like Youtube or Instagram.

# Django Developers Salary, Country Wise

The average Django developer salary in the USA is $100,000 per year or $51.28 per hour. Entry level positions start at $63,375 per year while most experienced workers make up to $140,000 per year.

For complete details 
```
https://www.talent.com/salary?job=django+developer
```


###### If you are a beginner and want to learn Django so you can check my this blog, I shared top youtube channels and their playlist.

```
https://pythondjangogeek.com/django/top-youtube-channels-to-learn-django-for-everyone/
```

###### for projects

```
https://github.com/ShivamRohilllaa/
```

Thank You | Shivam Rohilla
Social media apps as a Developer 
Tags: website, news, social, media
Published: 2021-08-07 17:18:03

It this article I have listed some best social media websites which I use as a developer and everyone should use .

##1.) [Reddit](https://www.reddit.com)
Reddit is a network of communities where people can dive into their interests, hobbies and passions. There's a community for whatever you're interested in.

##2.) [Slack](https://slack.com)
Slack is a messaging app for business that connects people to the information they need. By bringing people together to work as one unified team, Slack transforms the way organizations communicate.

##3.) [Twitch](www.twitch.tv)
Twitch is the world's leading live streaming platform for gamers and the things we love. Watch and chat now with millions of other fans from around the world. But it is also very useful if you are a developer as many communities conduct their workshops here.

##4.) [Discord](www.discord.com)
Discord is the easiest way to talk over voice, video, and text. Talk, chat, hang out, and stay close with your friends and  developer communities.

##5.) [Meetup] (www.meetup.com)
Find groups that host online or in person events and meet people in your local community who share your interests.
Many developer communities host their events on meetup.

##6.) [Gitter] (www.gitter.im)
Gitter is a chat and networking platform that helps to manage, grow and connect communities through messaging, content and discovery.

##7.) [Stack overflow] (www.stackoverflow.com)
As a Developer who don't know about stack overflow.
Stack Overflow is the largest, most trusted online community for developers to learn, share​ ​their programming ​knowledge, and build their careers.

##8.) [Twitter] (www.twitter.com)
As a developer it is the best platform to increase your networking and showcase your skills.

##9.) [Linkedin](www.linkedin.com)
LinkedIn is an online platform that connects the world's professionals. A complete LinkedIn profile will summarize your professional experience to your connections, current and future employers, and recruiters. Through your profile, you can showcase your professional life, milestones, skills and interests.

All these social websites are great to use as a developer as you get informed by new events and technologies regularly .

Some websites also send newsletters in a weekly basis.
Using Docker for a local HTTPS proxy
Tags: webdev, ssl, docker, proxy
Published: 2021-08-07 17:58:24

Sometimes when you're developing locally, you might need to use HTTPS, and might not have that tooling available in your framework of choice.

So I created this small Docker container which essentially creates a self-signed SSL certificate and uses nginx as a reverse proxy to pipe your request to whatever address you want to.

## To use:

- clone the repo (https://github.com/zenOSmosis/docker-dev-ssl-proxy)
```bash
$ git clone https://github.com/zenOSmosis/docker-dev-ssl-proxy
```

- enter the repo directory
```bash
$ cd docker-dev-ssl-proxy
```
- run the following (replacing "http://localhost:8080" with your desired proxy-to address)
```bash
$ docker run --net=host -e PROXY_ADDRESS="http://localhost:8080" docker-dev-ssl-proxy
```
- Then navigate to https://localhost in your browser

(The address you've defined in PROXY_ADDRESS will be proxied through to https://localhost.)

Note: For production usage, you might want to check out: https://github.com/linuxserver/docker-swag
Github Pages - Alojamiento gratuito
Tags: github, git, hosting, webdev
Published: 2021-08-07 17:32:11

#¿Sabes lo que es Github Pages?

Es un servicio que brinda GitHub y nos permite subir repositorios de nuestro código para almacenarlo y pueda servir 

## Configuración básica de Github
1. Primero que todo, instala Git en tu máquina. Este es el software del sistema de control de versiones subyacente en el que GitHub funciona.
2. Seguido, Regístrate para una cuenta de GitHub. Es simple y fácil.
3. Una vez te hayas registrado, inicia sesión en github.com con tu nombre de usuario y contraseña.

Aquí puedes encontrar un tutorial explicado a detalle:
[![Tutorial GitHub Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1dv20oof0c3uje77eea.jpg)](https://www.youtube.com/watch?v=Igbcg_rzIt4)
Day 165
Tags: 100daysofcode, programming
Published: 2021-08-07 17:21:14

Day 165/200 of  #100DaysOfCode 

- Solved three problems on Codewars.

1 -  Last Survivors Ep.2 (6 kyu)
2 -  Urban Dictionary (6 kyu)
3 -  Refactored Greeting (7 kyu)
Nginx + Private S3
Tags: nginx, aws, s3, cloudfront
Published: 2021-08-07 17:12:45

How can I view photos on private S3. Today I will show how we can do it with Nginx on AWS. We first need to set up something like below:
- VPC(10.0.0.0/16) with a public subnet and a private subnet
- VPC Endpoint for s3
- A static web on ECS Fargate with Nginx
- Private S3 Bucket which store images of application
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05us8i6mizmix2uuorzv.png)

We will have a static web like below with an image loaded from the internet.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/png7yocawiei3d2ix764.png)

I have an image which store on S3. So I want to own static web will view that image.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3ore320m60h17spwuhi.jpg)

Now I will go into setting specific sections.

(1) First we will need to update S3's bucket policy to only allow viewing of images from the vpc endpoint.
```
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "Access-to-specific-VPCE-only",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::demo-static-s3/*",
            "Condition": {
                "StringEquals": {
                    "aws:sourceVpce": "vpce-0d92e50f230bc8070"
                }
            }
        }
    ]
}
```

(2) Next we will configure Nginx to be able to view images from S3 as shown below.
```
location ~^/image/(.+)$ {
        resolver 10.0.0.2;
        proxy_pass http://s3-ap-southeast-1.amazonaws.com/demo-static-s3/image/$1; 
}
```

- **resolver**: IP address of the DNS server in your AWS VPC

I have VPC with CIDR range is 10.0.0.0/16. So IP address of the DNS server is 10.0.0.2 => Resolver is 10.0.0.2
  >10.0.0.0: Network address.
  >10.0.0.1: Reserved by AWS for the VPC router.
  >10.0.0.2: Reserved by AWS. The IP address of the DNS server is the base of the VPC network range plus two. For VPCs with multiple CIDR blocks, the IP address of the DNS server is located in the primary CIDR. We also reserve the base of each subnet range plus two for all CIDR blocks in the VPC. For more information, see Amazon DNS server.
 >10.0.0.3: Reserved by AWS for future use.
 >10.0.0.255: Network broadcast address. We do not support broadcast in a VPC, therefore we reserve this address.

Refer: https://docs.aws.amazon.com/vpc/latest/userguide/VPC_Subnets.html

- **proxy_pass**: s3 link

Format: http://s3-ap-southeast-1.amazonaws.com/[main_bucket]/[sub_bucket]/$1

(3) Next I will change the html to load an image from s3 instead of an online image.
```
<div class="container">
    <h1>Hey there</h1>
    <img src="https://cleandevs.com/image/668c1d479e27bb8750823655c83a6c9bd90263f9_hq.jpg"/>
  </div>
```

(4) Finally, I will deploy to ECS Fargate. The result you will see is as below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rlvx1c90sp62fqfbyr2.png)

It is able to solution to view images from S3 without using CloudFront.
#13) Explain Scope and Scope Chain in JS💥
Tags: javascript, webdev, beginners, career
Published: 2021-08-07 16:49:02

##🔰`Scope`
Scope determines the accessibility or visibility of a variables in your piece of code.

There are 3️⃣ types of Scopes in JavaScript👇

1️⃣ Global Scope
2️⃣ Local or Function Scope
3️⃣ Block Scope


##🔰`Global Scope`
✅Variables that are declared outside any function have _Global Scope_.
✅So, they are accessible from anywhere inside the code.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwyslcazdb5j37r4s8gl.png)

##🔰`Local or Function Scope`
✅Variables declared inside the function are considered as local scope.
✅Every function has it's own scope.
✅The variable is visible inside the function and cannot be accessed outside the function.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p9w4cd9j3h4fgwxyv4t.png)


##🔰`Block Scope`
✅Whenever you see {curly brackets}, it is a block. 
✅Block Scope is related to the variables declared using let and const, which means those variables exist only within the corresponding block.
✅Accessible inside that block and cannot be accessed outside of it.
✅A block scope is present in codes within if, switch conditions or for and while loops.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cags17ribqhy35m1vqz.png)


##🔰`Scope Chain`
✅The scope chain is simply the memory space of the function that was called, and the memory space of its outer environment.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyfjd8x42xs16u11tf63.png)
✔In the above example, the 1st console is for fruit2 i.e., `🥭`. 
It Does not find 🥭 inside newFavFruit, so it looks for variable inside favFruit, returns 🥭.

✔In the 2nd console, it is for fruit i.e., `🍌`.
It does not find 🍌 inside nestedFavFruit, so it looks for variable inside favFruit and does not find it, so looks for variable in global scope, finds it and result is 🍌.

⚠As you can see, if the JavaScript engine does not find the variable in local scope, it tries to check for the variable in the outer scope. If the variable does not exist in the outer scope, it tries to find the variable in the global scope
__________________________________________________________________
Opensource alternative to google analytics for your laravel projects !
Tags: php, laravel, privacy, analytics
Published: 2021-08-07 16:35:57

Are you looking for an opensource and privacy care alternative to Google Analytics for your laravel projects ? Evilanalytics is for you :D
No tracking data are redirected to external servers, you are the only master of your data!
Leave a if you appreciate the project, it will help me a lot !

https://github.com/Coroxx/EvilAnalytics
What advice would you give to High Schooler (Thinking of software developer career)?
Tags: programming, discuss, help, career
Published: 2021-08-07 16:18:44

{% user cleancodestudio %}

[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 

---

>
> _"If a junior in high school were asking for your advice, what_
> _would you tell them? What tips would you have for going into_
> _'computer science'?_"
>

(Please comment your tips - asking for real high school kid who stopped me to personally ask for advice)


---

_"Last night the next door neighbors kid stopped me in the drive way..."_


I was pulling into my parent's drive way - usually swing by my child hood home a couple times month. 

Last night when I pulled into the drive way I heard 

---

_"Hey!!! Is that Zak?"_

---


It was, I'm Zak, I'm a software engineer - and I have been for over half a decade. I never went to college and make a great living. My child hood neighbors kid who is about a decade younger than me knows this. 


He wanted advice about going into the computer science field. 


Before I had time to process what I was saying I spat out, "Well, I don't recommend college." 

Looking back to last night, I'm not confident that was the best initial piece of advice to go with - but hey, I wasn't prepared. 

I decided to take a pause, asked for his number and email, and told him that I'd think on it and get get him some solid tips by mid next week. 

---

If a junior in high school were asking for your advice, what would you tell them? What tips would you have?

This kid is smart and as far as I can tell has the makings and characteristics to be a software engineer...I just want to make sure I'm providing the best, most non-bias advice I'm able to.

With that, any tips and advice you can offer up - I'll make sure to pass along to Stevie.
Creating beautiful HTML visualizations with Flourish
Tags: html, design, codenewbie, flourish
Published: 2021-08-07 16:14:14

Creating beautiful HTML visualizations with Flourish is easy and simple. 

Some common reasons why you should create amazing HTML visualizations with Flourish are:

- A wide range of template varieties are available for the users.

- You can create outstanding visualizations.

- With Flourish, you can also generate maps and moving globes.

To know more about how you can create beautiful visualizations with Flourish, read the complete article here: https://tiiny.host/blog/creating-beautiful-html-visualizations-with-flourish-a-complete-guide/
How to sort the results of a MongoDB query
Tags: mongodb
Published: 2021-08-07 16:14:08

---
title: How to sort the results of a MongoDB query
published: true
date: 2021-08-07 16:00:38 UTC
tags: MongoDB
canonical_url: https://donaldfeury.xyz/how-to-sort-the-results-of-a-mongodb-query/
series: "Small Bytes of MongoDB"
---

For a full overview of MongoDB and all my posts on it, check out my [overview](https://donaldfeury.xyz/introduction-to-mongodb/).

After using the [find method to get retrieve some documents from MongoDB](https://donaldfeury.xyz/get-all-the-documents-out-of-a-collection-in-mongodb/) and further [trimming down that result using filters](https://donaldfeury.xyz/how-to-retrieve-specific-documents-from-mongodb-using-filters/), there may still be a lot of data. It may be easier to work with the data if is it sorted using the `sort` method.

Much like how a user can [modify the result of a query by chaining something like the limit method](https://donaldfeury.xyz/use-the-limit-method-to-retrieve-a-specific-number-of-documents-from-mongodb/), you can use chain the `sort` method to the result of another method that returns a result, such as `find` or `limit`, to get that data into a specific order.

With the following data set in a collection called `users`:

```
{
	"name": "John Doe",
	"email": "test@test.com",
	"admin": false,
	"dateJoined": ISODate("2021-02-01")
},
{
	"name": "Jane Doe",
	"email": "test2@test2.com",
	"admin": false,
	"dateJoined": ISODate("2021-03-01")
},
{
	"name": "Bob Doe",
	"email": "bob@bob.com",
	"admin": true,
	"dateJoined": ISODate("2021-01-01")
},
{
	"name": "Your Mom",
	"email": "koolkid@someplace.com",
	"admin": false,
	"dateJoined": ISODate("2020-12-01")
}

```

To pull all the documents out sorted by the date they joined in ascending order, we would do the following:

```
db.users.find().sort({dateJoined: 1})

```

Notice that `sort` takes an argument of an object describing how to sort the data. Each field in the object can have a value of 1 (ascending) or -1 (descending)

This will get us the following:

```
{
	"name": "Your Mom",
	"email": "koolkid@someplace.com",
	"admin": false,
	"dateJoined": ISODate("2020-12-01")
},
{
	"name": "Bob Doe",
	"email": "bob@bob.com",
	"admin": true,
	"dateJoined": ISODate("2021-01-01")
},
{
	"name": "John Doe",
	"email": "test@test.com",
	"admin": false,
	"dateJoined": ISODate("2021-02-01")
},
{
	"name": "Jane Doe",
	"email": "test2@test2.com",
	"admin": false,
	"dateJoined": ISODate("2021-03-01")
}

```

Sorting on multiple fields can be done as well

```
db.users.find().sort({admin: 1, name -1})

```

This will return the documents first sorted in ascending order by `admin`, then sorted in descending order by `name`

```
{
	"name": "Jane Doe",
	"email": "test2@test2.com",
	"admin": false,
	"dateJoined": ISODate("2021-03-01")
},
{
	"name": "John Doe",
	"email": "test@test.com",
	"admin": false,
	"dateJoined": ISODate("2021-02-01")
},
{
	"name": "Your Mom",
	"email": "koolkid@someplace.com",
	"admin": false,
	"dateJoined": ISODate("2020-12-01")
},
{
	"name": "Bob Doe",
	"email": "bob@bob.com",
	"admin": true,
	"dateJoined": ISODate("2021-01-01")
}

```
Responsive Text
Tags: css, html, webdev, devops
Published: 2021-08-07 15:50:02

The text size can be set with a "vw" unit, which means the "viewport width".

`1vw` is equal to one percent of the viewport width, meaning that if you set your font size using `vw`, it will always relate to the size of the viewport.

![responsive text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfd44r30c9in9mcdsgnm.png)

#### Output in `1366px`
![Laptop Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwrypfcy3iw7faktra3y.PNG)

#### Output in `768px`
![768px](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb4ipqjt6b2n7u5etjv9.PNG)

#### Output in `375px`
![375px](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz9rnc7oxbz1d7txnpq7.PNG)

[You can check out my Blog 😀](https://beginners-developer.blogspot.com)
When to use Object.assign(), spread operator for array state of React app.
Tags: javascript, react
Published: 2021-08-07 15:46:25

I have a functional react component which receives a random message object regularly. It displays the new added item properly. After I delete one item and received a new message, deleted item remains again. I solved by using Object.assign(), but not sure why spread operator is not working.

I think spread operator copies array. I have been using spread operator when adding new item to array state variable. When to use Object.assign(), when to use spread operator?

Here is my code.

```
const myComp = props => {
  const [messages, setMessages] = useState([]);
  const [api] = useState(new Api({
    messageCallback: (msg) => {
      handleCallback(msg);
    },
  }));

  useEffect(()=>{
    api.start();
  },[])

  const handleCallback = msg => {
    messages.push(msg);
    setMessages([...messages]);
  }

  const deleteItem = index => {
    messages.splice(index,1);
    setMessages([...messages]);
  }

  return (
    <div>
      {
        messages.map((item, index)=>(
          <p key={index} onClick={(e)=>deleteItem(index)}>{item.message}</p>
        ))
      }
    </div>
  )
}
```

This works not properly so I solved by using this.

```
const handleCallback = msg => {
  const temp = Object.assign(messages,[]);
  temp.push(msg);
  setMessages(temp)
}
```

In general, many developers are adding a new item by the DOM event. In my app, it is automatically added by the API without rendering the UI. That was the problem. https://thecodebarbarian.com/object-assign-vs-object-spread.html

Spread operator also copies the array but have different value though original value changes. When you use Object.assign, copied value has the same value when original value changes.

In my app, when I use spread operator, message variable remains the original empty value though it seems to change.