teleren/devto huggingface dataset:
Wikipedia API's and 'wikipedia-query' through fetch()
Tags: webdev, fetch, wikipediaquery, api
Published: 2022-01-31 04:52:43

## **fetch()**
- The tag `fetch()` will execute the API based on this link 
`(this.locationEndpoint + userIPData.ip)`. If the call is works, then it will return the data object as a json and it will have long, lat, city, and state properties which we assign to corresponding properties in our class `LocationFromIP`.

- When we render html, these properties will be used as values for input box, google maps link, and Wikipedia search parameters. 

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

## **API**

- This API https://freegeoip.app/json/ requires concatenating the link with IP address and fetching the returning data object. [Here](https://en.wikipedia.org/w/api.php) is where you can learn more about Wikipedia API. 

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

- For my project, the API doesn't work and returns nothing, so I had to hardcode the properties to show how the website would look if the API would work. This link https://freegeoip.app/ says you need to obtain API key, which needs to be added to the end of the API call. 

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

## **Wikipedia-query**

- Wikipedia-query is very simple. All that's needed to do is pass values for the search parameters. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgffq35mh7jq09yiuauq.png)

- Interestingly, passing State College as a parameter doesn't generate any return for just city, but adding the state helps.

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

## **My Work**
- [Here](https://github.com/NikitaL2022/ip-project) is where you can see my work and look more into the code.
Part 2. Sharing data between siblings components using Context in React with Hooks
Tags: react, context, javascript, hooks
Published: 2022-01-31 04:50:45

Once we've got a context provider defined and in place it's time to make the data available on any child component. For this we will use a hook called useContext. 

"useContext accepts a context object and returns the current context value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree". What this means is this hook will give us access to the prop passing the context defined by the context function and wrap in the provider. Let's see it in the component. 

```cassandraql

import React, { useContext } from "react";



function Profile()  {

    const pots = useContext(PostContext)
    const setPots = useContext(PostDispatchContext)


      
   return (
        <> 
   {posts.map(post => <h2>{post}</h2>)}
       </> 
       
      );
}
  
export { Profile }


```
First we import useContext from the react library. Then we define our props calling the hook and passing the context created for the prop. In this case for posts we created PostContext to query the context state and PostDispatchContext to mutate the context state. This will give us access to the props state set as an empty array at first. 

And finally we can return the data we need. It's important to notice that setPosts is a function as de-structured. When using it to update posts it expects an object that we can easily iterate as a list of posts.  

Context provides a way to pass data through the component tree from parent to child components, without having to pass props down manually at each level. It's specially useful to pass data deeply and great tool as a global state management.

While React Context is native and simple to set, it isn’t a dedicated state management tool like Redux, however it can be really useful for prop drilling. 

Thanks for reading..
Django Debug Toolbar
Tags: programming, opensource, django, python
Published: 2022-01-31 04:37:18

## [django-debug-toolbar](https://github.com/jazzband/django-debug-toolbar)
<span><strong><i class="fa fa-star">Star 6.8k</i> <i class="fa fa-eye">Watch 104</i> <i class="fa fa-code-fork">Fork 968</i></strong></span>

The Django Debug Toolbar is a configurable set of panels that display various debug information about the current request/response and when clicked, display more details about the panel's content.

Here's a screenshot of the toolbar in action:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6a64jqj0nlng33s1spn.png)

In addition to the built-in panels, a number of third-party panels are contributed by the community.

The current stable version of the Debug Toolbar is 3.2.4. It works on Django ≥ 3.2.

Documentation, including installation and configuration instructions, is available at https://django-debug-toolbar.readthedocs.io/.

The Django Debug Toolbar is released under the BSD license, like Django itself. If you like it, please consider contributing!

The Django Debug Toolbar was originally created by Rob Hudson <rob@cogit8.org> in August 2008 and was further developed by many [contributors](https://github.com/jazzband/django-debug-toolbar/graphs/contributors).
Front End Devs: Find IP Address/ Longitude and Latitude
Tags: javascript, webdev, tutorial, programming
Published: 2022-01-31 04:23:07

#IP Address / Location API Element 

**How the IP address was fed into the API of the GeoIP to detect the Longitude and Latitude Coordinates**

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

**Initial Thoughts**
`fetch` can be used to get information from the perspective API and provide that for the component in question. Use of `fetch` function which is already within the `update()` function. Below shows the instance that gets the information from the API that would be stored.

**Deep Dive**
`fetch` is drawing from the API and allowing the data to use in JSON data. ```.then(data => {
        this.ip = data.ip;
        this.country = `${data.country}`;
        this.city = `${data.city}`;
        this.location = `${data.city}, ${data.country}`;
        return data;
      });``` 
It shows how the data that was retrieved will be written. For example, here it shows it broken down by the IP, city, state, country, location. It is important to note how it is presented and formatted. It took a while to figure out the best way to call and then print the data that was recieved.

**Deeper Dive for Longitude and Latitude with the API**


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

**FreeGeoIP API**


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

Link: https://freegeoip.app/json/

This line of code above comes from the constructor as it is linking the GeoIP API to allow for access to work in harmony with one another. The FreeGeoIP API is used to get the longitude and latitude at a given location. Through this communication should result in a `render`. 

**More**
To learn more, visit the links below.
My Repository: https://github.com/Taylor-Bracone/API-Project/tree/master
Team Repository: https://github.com/Da-Penguins/API-Project

_Please stay tuned for more post on this topic!_
Self-Taught Developer Journal, Day 51: TOP Building Rock Paper Scissors UI cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-31 04:22:43

Today I worked on the JavaScript of my Rock Paper Scissors projects to work with the UI.

I commented out logic of what I'm planning to do, but this is my first time having to work with the DOM events and manipulation so not too sure if I'm doing this correctly.

![Commenting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/739jb8utb98ey38n0yr5.png)

I already added an event listener to the buttons. I understand that once the user selects the button, it should then display the user's choice and computer's choice. Then it will show who won, update score, update round, and clear the choices again in the UI. This process should repeat until the end of five rounds where a winner will be returned or when the user chooses to reset the game. I'm thinking resetting the game might be an add on for later. I plan to have it as a button on the UI. Lastly, the user will be prompted to play again after the five rounds is completed.

So, many things happen once the user selects the button. 

- User choice displays
- Computer choice displays
- Result of round shown
- Score updates
- Round number updates
 
A function should be passed into the addEventListener() for the button elements that will execute all the steps above. It generate a random selection for the computer and display the computer and user's choice. Then run the game to see who wins and displays the result for the round. If the round is not five then update score and the function should end. 

If the round reaches five, check the score, display a winner, and prompts the user to play again. If the user chooses to continue the game will reset. If the user cancels....nothing happens? I'm not too sure how that works yet.

Alright, next I will start implementing the function.

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
[Revisiting Rock Paper Scissors](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/revisiting-rock-paper-scissors)
Lab 3 -- Option 1
Published: 2022-01-31 04:10:13

## Wikipedia query tag
The tag is Wikipedia query tag. If you type `<wikipedia-query search="whatever you want to search"></wikipedia-query>`, it will post a Wikipedia article with the world you typed. After add the dependency by `npm i @lrnwebcomponents/wikipedia-query`, it will appear on the package.json. ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v12c9j1hotcultlsr8w9.png)

## GeoIP API
In `locationFromIP.js`, it fetched `this.locationEndpoint` (the [API](https://freegeoip.app/json/) is not working). It suppose to provide longitude and latitude. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoesm417djr3zk6xrser.png)

## IP Fast API
Similarly, in `UserIP.js`, the [API](https://ip-fast.com/api/ip/?format=json&location=True) is used to determine the city and country.
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmusu5kh1iqamukq4iev.png)
  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qb7kshe6j90rasv765f.png)
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2lfw0vt2ocbpcc73599.png)
 
## Together

After we successfully fetched the location endpoint and user IP, we then [read the data](https://developer.mozilla.org/en-US/docs/Web/API/Response/json) with `json()` and pull the information we need (longitude, latitude, city and state )
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eg4ysrcnpagu3yjy2qca.png)

## Display the code
I added a link that shows the map of my location and Wikipedia articles about my city and state. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68zg3bd6kxhv93btpezo.png)

## GitHub
This is a [link](https://github.com/smm7530/ip-project) to my GitHub. The file is under src --> LocationFromIP.js (GeoIP API) & UserIP.js (IP Fast API). Please feel free to leave command on both my GitHub and this blog as I'm totally new to these concepts and can be wrong!
Tip calculator using Vanilla JavaScript
Tags: javascript, webdev, css, design
Published: 2022-01-31 04:09:29

## **Introduction**
I've created this amazing tip calculator. It helps us to calculate tip to be given and to calculate equal distributions.

**Code for Tip Calculator : **

## HTML : 

```html
<div class="calculator">
        <h1>Tip Calculator</h1>
        <input type="number" id="totalBill" placeholder="Total Bill">
        <input type="number" id="numOfPerson" placeholder="Number of Person">
        <button type="button" class="calculateBtn" 
        onclick="calculateTip()">Calculate</button>
        <div class="result" id="result"></div>
</div>

```
## CSS : 

```css
@import url("https://fonts.googleapis.com/css2?family=Poppins");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator {
  margin-top: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calculator input {
  margin: 16px 0;
  height: 40px;
  width: 20rem;
  padding: 10px;
}

.calculateBtn {
  font-size: 16px;
  padding: 6px 25px;
  width: 100%;
  background: #22d3ee;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.result {
  width: 100%;
  min-height: 100px;
  border: 1px solid gainsboro;
  box-shadow: -3px 4px 11px 0px rgba(0, 0, 0, 0.41);
  margin-top: 20px;
  padding: 20px;
}

```
 



## JavaScript : 

```javascript
 <script>
        let result = document.getElementById("result");
        let resultInfo = `
        <h5 style="margin: 8px 0;">Tip : </h5>
        <h5 style="margin: 8px 0;">Total : </h5>
        <h5 style="margin: 8px 0;">Each Person Pay : </h5>
        `
        result.innerHTML = resultInfo

        function calculateTip() {
            let bill = Number(document.getElementById("totalBill").value);
            let numOfPerson = Number(document.getElementById("numOfPerson").value);

            let tip = bill * .15;
            let totalBill = bill + tip;
            let perPersonPay = totalBill / numOfPerson

            result.innerHTML = `
            <h5 style="margin: 8px 0;">Tip : ${tip}</h5>
            <h5 style="margin: 8px 0;">Total : ${totalBill}</h5>
            <h5 style="margin: 8px 0;">Each Person Pay : ${perPersonPay}</h5>
            `
        }
</script>
```
Step-by-Step Visual Studio Code IDE Installation on Ubuntu Linux [2022]
Tags: opensource, howto, linux, ubuntu
Published: 2022-02-23 05:03:40

---
title: Step-by-Step Visual Studio Code IDE Installation on Ubuntu Linux [2022]
published: true
date: 2022-01-31 04:06:00 UTC
tags: FOSS,HowTo,Linux,Ubuntu
canonical_url: https://fossnaija.com/vscode-installation-on-ubuntu-linux/?utm_source=rss&utm_medium=rss&utm_campaign=vscode-installation-on-ubuntu-linux
---

This video would teach you how to install a very popular IDE, Visual Studio Code (VSC), step by step. VSC is a source-code editor made by [Microsoft](https://fossnaija.com/open-source-powershell-microsoft-loves-linux/). It is cross-platform i.e. it is available for Windows, [Linux](https://fossnaija.com/?s=linux) and macOS. VSC features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Its users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality.

Now ENJOY!!!


{% youtube dTzoNHeR2gU %}

PLEASE LIKE, SHARE AND SUBSCRIBE.

**Happy Linux’NG!**

The post [Step-by-Step Visual Studio Code IDE Installation on Ubuntu Linux [2022]](https://fossnaija.com/vscode-installation-on-ubuntu-linux/) appeared first on [Foss Naija](https://fossnaija.com).
Creating a connection between IP addresses and their location
Published: 2022-01-31 04:02:42

**IP-Fast**

 

```
if (this.ip === null) {
      this.updateUserIP();
    }
```
**Above** is our part of the program that lets us know if there is no current ip information, if not then we will call for it to be updated. 
**Below** are the two parts of the code we use to assign the fetched ip values to this.ip, and this.location. The first thing we do is connect to the api using `fetch(this.ipLookUp)` to get the information we need. Next we assign it. In this case this.ip is getting assigned the IP address that ip-fetch collected, and this.location is being assigned the city and country that ip-fetch collected. (Think link was also useful in checking the data: https://ip-fast.com/api/ip/?format=json&location=True)
```
async updateUserIP() {
    return fetch(this.ipLookUp)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        this.ip = data.ip;
        this.location = `${data.city}, ${data.country}`;
        return data;
      });
```

**GEOIpData**
```
  async getGEOIPData() {
    const IPClass = new UserIP();
    const userIPData = await IPClass.updateUserIP();
    return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.long = data.longitude;
        this.lat = data.latitude;
        this.city = data.city;
        this.state = data.region_name;
        return data;
      });
  }
```
Above is a similar block to assign longitude, latitude, city, and state information. What's different though is this api uses the fetch-ip method along with the geoip api above in this line `const userIPData = await IPClass.updateUserIP();`. 
However I keep getting the error below and the map won't update.

```
Failed to load resource: Origin
http://localhost:8000 is not
allowed by Access-Control-Allow-
Origin.
```
Learn How API's Work
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-31 03:47:28

API's are confusing. I barely understand them myself, but they are so useful. Outsourcing code can make your life so much easier. API's are very helpful in communicating with other services. Today I'm gong to go through what happens when you request from the [Wikipedia API](https://en.wikipedia.org/w/api.php) with data from a locational API.

# The request
A fetch call is used to send a request to the locational API. This is so the API will help them retrieve data. In this example we fetch the location and IP address of of the user. The request code is shown below. You can see that the data is then saved as variables.
``` javascript
return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.lat = data.latitude;
        this.long = data.longitude;
        this.city = data.city;
        this.state = data.region_name;
        console.log(`${this.lat} ${this.long}`);
        return data;
      });
```

#Wikipedia API

The Wikipedia API has many functions but we are using the query function. In this function the action of querying sends us the information that we are looking for. In our code we stored the response from the location in variables. We can use these variables as the search when we call the Wikipedia API. 

``` javascript
<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
<wikipedia-query search="${this.city}"></wikipedia-query>
<wikipedia-query search="${this.state}"></wikipedia-query>
``` 

Once these are called in the page the response is displayed as a Wikipedia article if one exists. With the use of these two APIs and very little coding on our part we have a working program that displays an article specific to the user.
Shifting to a new career can be scary..
Tags: beginners, react, webdev, career
Published: 2022-01-31 03:36:29

Gain insights from these three inspiring career shifters who learned web development to start a new profession in the Tech Industry: https://blog.zuitt.co/career-shifters-3-inspiring-stories-from-zuitt-alumni/ 

Deen, from Physical Therapist to Web Developer.
John, from Customer Representative Specialist to Web Developer.
Mark, from Salesman to Website Engineer.

Shifting to a new career can be scary. But if you put your heart and mind to it, it will be as easy as taking two-month long classes. Visit https://zuitt.co/global/?referral=2112-mdp-cnb now to learn more about our Developer Career Program!
Periodum.com: An Interactive Periodic Table Open Source Project
Tags: node, mongodb, swift, opensource
Published: 2022-01-31 03:33:13

Hey,

Recently, I'm into this useful, educational, meaningful open source science project **[Periodum](https://periodum.com)**  in my free time, still there're a lot of things to be done, and we're short of technical people.

If you're interested in you may help us, or you may star the repos (for spreading purpose) or share with someone you know that can help.

The tech stack is:

- NodeJS with TypeScript, MongoDB for backend & API,
- Swift for iPad and macOS clients,
- VueJS for web frontend.

The project has became quite popular in Turkey because it was started in Turkish language in the first place, but it's evolved into an international science project now so, we're trying to convert everything into English and multi-language support for frontend clients.

Web frontend is currently tied to an internal API along with MySQL DB, but we're separating them for a better infrastructure.

Currently `periodum-api` project needs help where the stack is MongoDB & NodeJS with TypeScript. https://github.com/evrimagaci/periodum-api/issues

Organization: https://github.com/evrimagaci

You may contribute the project via GitHub discussion or right here in comments. Any help is appreciated.

Especially is there anyone who experienced [Prisma](https://www.prisma.io/) with MongoDB? Do you recommend it? Any problems that you have encountered during the implementation? 

Thank you,
Happy coding!