teleren/devto huggingface dataset:
Navigation between pages
Tags: a11y, html
Published: 2022-10-30 18:32:13

_Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers._

## Best practices

In this article I will provide several tips on how to work with navigation between pages.

### Semantic HTML and Role
When creating a navigation menu, the **semantic HTML tag `<nav>`** or its equivalent **role `role="navigation"`** should be used.

Also make sure to **keep the number and order of the links in the navigation menu consistent** throughout all pages.

### Landmarks
It's possible to have **several navigation menus** on a site. That's when **landmarks** come in handy. Mark the main navigation as such, or a side navigation menu. This makes it possible for screen reader users to find the menus within the list of landmarks.

Refrain from making all set of links on a page a navigation landmark, only the most important ones.

### Visibility
To make it easier for the user to know, no matter if visible or via screen reader, which page the **current/active page** is, you could add a special styling for that specific link  or add ARIA (like, `aria-label`, `aria-labelledby`, or `aria-describedby`).

**Future:** The [aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current) attribute hopefully is official soon.

#### Example

```html
<a href="#hello" aria-label="Current page: Hello, World!">
    Hello, World!
</a>
```

When assigning `aria-label` to a focusable element, like the `<a>`tag here, the screen reader will announce the text in the aria-label instead of the link text (which is still visible for user not using a screen reader).

---

### Follow me for more accessibility content on:
Website - [accessibilityfirst.xyz](https://www.accessibilityfirst.xyz/)
Instagram - [accessibilityfirst](https://www.instagram.com/accessibilityfirst/)
LinkedIn - [accessibilityfirst](https://www.linkedin.com/company/accessibilityfirst/)
Beautiful card with blur background - Glass effect - A step-by-step tutorial
Tags: css, html, webdev, tutorial
Published: 2022-10-30 18:07:23

**Tutorial on how to create a beautiful card with blur background.**

## <u>HTML</u>
For HTML, we need a div element with a "card" class.

Inside of the card element, we need two divs, one with "profile" and the other with "info" class.

Inside info element, we'll place a name in b tag, and a job title in span tag.

And that's it for the HTML code.

```html
<div class="card">
    <div class="profile"></div>
    <div class="info">
        <b>Jane Doe</b>
        <span>Photographer</span>
    </div>
</div>
```

## <u>CSS</u>
For CSS, first we'll style the card element.

We'll set light transparent yellow background color fit blur filter set to 5 pixels. This will create a nice glass effect.
Now we'll add some paddings, border radius and display items in column, aligned in center with 30px gap.

Lastly, we'll set position to relative, overflow to hidden and add a little box shadow.

```css
.card {
    background-color: rgba(255, 170, 0, 0.4);
    backdrop-filter: blur(5px);
    padding: 30px 80px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px #000;
}
```

Now, using before pseudo class, we'll create the brown transparent shape that is placed on top of the card.

To achieve that, we'll set content, background to transparent brown, position to absolute with top set to -30px, left to -10px, right to -20px and height to 150px.

Using transform rotate, we'll rotate the element by 8 degrees, and add a little box shadow.

```css
.card:before {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    top: -30px;
    left: -10px;
    right: -20px;
    height: 150px;
    transform: rotate(8deg);
    box-shadow: 0 0 20px #000;
}
```

Now we'll style the profile element (the picture).

We'll set background to url of the image, size to cover and position to center.

We'll set width and height to 160x160 pixels and border-radius to 50%, with 3px solid goldish border.

Lastly, we'll set z-index to 1, otherwise, the brown shape will be positioned on top of our image.

```css
.card .profile {
    background-image: url('https://fixthephoto.com/blog/UserFiles/double-exposure-self-portrait-photography-actions-before.jpg');
    height: 160px;
    width: 160px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 3px solid rgb(255, 180, 29);
    z-index: 1;
}
```

Now we'll style the info section.

Using flexbox, we'll align items in column with 5px gap, aligned in center.

```css
.card .info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
```
  
Lastly, we'll increase the text with name by setting font size to 24 pixels.

```css
.card .info b {
    font-size: 24px;
}
```

And that's it.

You can find video tutorial and full code [here](https://designyff.com/code/glass_effect_card).

Thanks for reading. ❤️
React API Mapping help
Published: 2022-10-30 17:23:29

i have this code that fetches information from two apis, this information gets put on a table the issue i have is that the information from the first api works perfectly fine, but the information from the second api only the #1 rank and #1 highscore gets posted on the table and repeat it over and over. how can i fix this issue? 

Picture of how it looks: 
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1grn1nssiyibyxy9uua.jpg)

MY CODE

```
import axios from "axios";
import React, { useState, useEffect } from "react";

const Ranking = () => {
  const [playerName, setPlayerName] = useState([]);
  const [playerRank, setPlayerRank] = useState([]);
  const [player, setPlayer] = useState([]);

  const fetchData = () => {
    const playerAPI = 'http://localhost:3008/api/players';
    const playerRank = 'http://localhost:3008/api/highscore/players';

    const getINFOPlayer = axios.get(playerAPI)
    const getPlayerRank = axios.get(playerRank)
    axios.all([getINFOPlayer, getPlayerRank]).then(
      axios.spread((...allData) => {
        const allDataPlayer = allData[0].data.players
        const getINFOPlayerRank = allData[1].data.players
        const newPlayer = allDataPlayer.map(name => {
          const pr = getINFOPlayerRank.find(rank => name.id === rank.id)

        
          return {
            id: name.id,
            name: name.name,
            status: name.status,
            position: pr.position,
            score: pr.score
          }
        
          // or simply do the following if the keys doesn't matter: return {...name, ...pr}
        })

        setPlayerName(allDataPlayer)
        setPlayerRank(getINFOPlayerRank)
        
        console.log(newPlayer)
        setPlayer(newPlayer)
      })
    )
  }
  useEffect(() => {
    fetchData()
  }, [])
  
  return (
    <table class="table table-bordered">
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Points</th>
      </tr>
        <tbody>
        {player?.map((name) => {
  return (
      <tr key={name}>
         <td>{name.name}</td>
         <td>{name.id}</td>
         <td>{name.status}</td>
         <td>{name.position}</td>
         <td>{name.score}</td>
      </tr>
    )
})}
        </tbody>
    </table>
  )
}

export default Ranking
```
Point of {html} selector?
Published: 2022-10-30 17:21:38

The html{} selector:
1) Selects the html element itself - which has no properties apart from a possible reference to an old-styled XHTML document*.
2) Passes on certain properties to be inherited by children/every single element**.

The *{} selector:
1) Passes on all of it's properties onto every single element.

*In this post, I'm assuming this property would never be used.

**Technically, every single element inside the <html> tag, but no-one would put an element outside their <html> tag. We are assuming there aren't ever any stray elements.

-----------------------------------------------------------------

Therefore, the only reason to use the html{} selector would be if only compatible elements have the (certain) properties in this selector writen into them AND properties in the *{} selector would be brute-forced onto all elements, regardless of compatibility.

This way, resources are saved by skipping out those unnecessary rewrites for the elements that wouldn't have any changes after the rewrite/aren't compatible with the property.

Could someone confirm this?

_(If this isn't the case, there would be no fucking point in using html{} over *{} - the only differences would be that *{} allows for every single property to be potentially used on elements, whereas only certain properties can be used on elements, with the html{} tag)_
Python Syntax vs JavaScript Syntax - Basic Level
Tags: javascript, python, synta, beginners
Published: 2022-10-30 16:49:30

When you work on multiple languages there arises some **syntax** confusion. This article will help you understand more or can be your go to reference also

Have prepared them as slides than a blog so we can understand as a flow

You can find the link @ [Lets Learn Together](https://slides.com/shijoshaji/code)

Hope you liked it, feel free to share with your friends. Looking for a valuable comments so I can improve this ppt content more

Thanks :)
Everything You Need to Know about Open-Source Predictive Analytics Platform MindsDB
Tags: ai, mindsdb, opensource, hacktoberfest
Published: 2022-10-30 16:40:34

Looking for an open-source predictive analytics platform to create forecasts? Try MindsDB. What’s MindsDB? This article takes you through what MindsDB is, how it works, and which benefits you get using MindsDB. Read along.

## What’s MindsDB?
The data in your database is vital. [MindsDB](https://mindsdb.com/) is an open-source tool that allows you to make use of your data and make predictions based on them. It speeds up your ML development process by adding machine learning to your database. Using MindsDB, you can simply build, optimize, deploy and train, and your ML models. And you don’t need to rely on any other platforms for this purpose. For the forecasts, query ML models and your data.

## How MindsDB Works
MindsDB allows you to make forecasts using tables in your database. Then it displays them via your BI tool using SQL. You are able to perform data pre-processing within your database and use ordinary SQL to enter the data into an ML model. 

You can create beautiful representations of your forecasts using MindsDB. It provides a predictive data-driven experience that helps you achieve your goals faster. MindsDB is able to handle a vast range of complicated problems.

## Benefits of Using MindsDB
There are several benefits of using MindsDB. MindsDB simplifies your project and makes the model creation process faster. MindsDB keeps your models flexible through powerful automation. 

MindsDB can handle problems like Multivariate Time-Series that were impossible to solve earlier. Using the same technologies you are on, you can encourage others to apply predictive analytics. By including forecasts in your dashboard, you can access new levels of information. Apart from that, you can either make comparisons between projections with your current tables or, you can create a new table with the latest forecasts and your pre-existing data.

## Conclusion
And that’s about MindsDB. I hope you find this write-up useful.
India lost to Africa in the World Cup after 13 years: Miller-Markram's half-century; Fielders threw water on Surya's hard work
Published: 2022-10-30 16:25:23

South Africa defeated Team India by 5 wickets in the [crucial match](https://documenter.getpostman.com/view/24140564/2s8YKFE2HD) of Group-2 of the T20 World Cup. In this match played on Sunday, Rohit Sharma won the toss and decided to bat first. Our batters couldn't do much. India scored 133 runs in 20 overs for the loss of 9 wickets. Suryakumar Yadav played an innings of 68 runs.

In reply, South Africa achieved the target in 19.4 overs for the loss of 5 wickets. Adam Markram and David Miller hit half-centuries. This is the first time since 2009 that South Africa has defeated Team India in the T20 World Cup.


Poor fielding is also the reason for defeat

The African team had lost 3 wickets for 24 runs at one time. Taking advantage of India's poor fielding from here, Markram and Miller took over the team. Indian fielders missed 3 run out chances. Apart from this, Virat Kohli also dropped an easy catch of Markram.

David Miller played a match winning innings for South Africa. He made 59 off 46 balls. Markram played an innings of 52 runs off 41 balls. Suryakumar Yadav scored 68 runs in 40 balls for Team India. However, his innings proved to be insufficient in helping Team India win.

[Lungi Ngidi](https://zencastr.com/LEAK-Zip-A-Boogie-wit-da-Hoodie-Me-vs-Myself-Full-Album-Download-Link), who took 4 wickets for 29 runs, was adjudged the player of the match.
How to SSH into linux (virtual machine)
Published: 2022-10-30 15:57:36

- Basically you set up your vm the same way you did when you 
  rdp into your vm, but this time around you will ssh into 
  your vm by connecting to it. 
   
- step images in creating a vm

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


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


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

- N.B we would be using the password authentication to ssh into the vm 

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

- Validation passed then you head to create!

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


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

- Deployment in progress 

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

- Fully deployed then back to resource 

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

 Step 1 : we would connect vm using ssh 

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

Step 2 : copy the command  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4bqjo6tpxa654syy4vw.png)

step 3 : open your terminal and paste the command copied in step 2 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qcvfyrr466196boq6so.png) 
enter yes! to run the command 

Step 4 : enter your azure user password 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voesv0lwhbb5673jqswc.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6s7wmvzwuxu9t0c7k4p.png)
 
 Step 5 : use the command sudo su 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8geg8yp2ge1zh2r4036.png)
A Very Short intro to NPM Versioning.
Tags: node, npm
Published: 2022-10-30 15:23:25

### NPM package versions
NPM packages have a version number which looks like 0.0.0 for example.

- The first digit specifies the major version.
- The second digit specifies the minor version.
- The third digit specifies the patch version.

A *major version* update may not be backward compatible and can have breaking changes that may break your codebase if its using the previous major version.
A *minor version* update is backward compatible and generally consists of additional functionalities or features.
A *patch version* is a bugfix version and is backward compatible.

### Updating NPM packages
NPM packages can be updated using the  ```npm update```  command.

To update a specific package, use for example - ```npm update packagename```

To update a package to a specific version, use for example - ```npm update packagename@1.0.2```

To update all packages in the codebase use - ``npm update``

^ is used to specify that we should only accept minor and patch version updates.
```packagename: ^1.0.0```

~ is used to specify that we should only accept patch version updates.
```packagename: ~1.0.0```

``*`` is used to specify that we should accept all version updates.
```packagename: *1.0.0```

Note - _Using ``*`` and accepting all version updates is **not recommended** and can cause breaking changes._

Also, without specifying any of the ``^ ~ or *``  symbols, the packages will not get updated to newer versions.
All you need to know for writing a reserve protocol collateral plugins quick start
Published: 2022-10-30 15:21:34

core plugin depends on two plugin types:

- Assets / Collateral (contracts/plugins/assets)
- Trading (contract/plugins/trading) not discussed here

### Collateral is erc20 token + below:

- if ERC20 back ?
- refresh()
- status() SOUND/IFFY/DISABLED
- rate exchange

### Monetary units

- Unit of Account
- Target unit
  RToken maintaining stability or appreciation against its target unit
- Reference unit

### e.g. of 3 different tokens

- Collateral : cUSDC
- Refence : USDC
- Target : USD

### Units definition

- {UoA} unit of account recommand USD here
- {tok} whole token
- {ref} whole reference token
- {target} whole target unit
- {ref/tok} refPerTok()
- {target/ref} targetPerRef()
- {UoA/target} pricePerTarget()

### Basket definition

- Prime basket
  this is set by governance , on changes through successful governance proposals. it consists of an array of triples
  <collateral token,target unit,tartget amount>
  e.g. : <cUSDC,USD,0.1>
- Reference basket
  <collateral token,reference unit,reference amount>
  e.g. : <aDAI,DAI,0.33>
- Collateral bascket
  <collateral token,token amount>
  e.g.: <cUSDC,0.29>

### IAsset interface


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

### Accounting units

before we create a collateral plugin we have to choose 3 accounting units

### Collateral unit

its just erc20 token

### Reference unit

to be ask , what's a unit that this collateral token will always be worth the same value or more of .

### Target unit

target unit has to do with a concept called the target basket. what's prime basket ?
A example of linear combination of target units:

- 1 USD
- 0.5 USD + 0.55 EURO
- 0.5 USD + 0.35 EURO + 0.00001BTC

### Unit of account

we can assume UoA == USD , because for now USD price are king.

### Important properties for collateral plugins

**Collateral plugins should be permisionless and should be able to used by any number if RTokens**
**Token balance can't be rebasing**

### refresh() should never be revert

refresh is been called before any transactions , it return exchange rates.
if occur an important error , refresh should change the state to **DISABLED**

### strictPrice() price(bool) status()

### the IFFY status should be temporary

### Collateral must default if refPerTok() falls

### Defaulted Collateral must stay defaulted

if status() ever returns disabled , then it must always return disabled in the nearly future

### Token rewards should be claimable

- rewardERC20()
- getClaimCalldata()

### Smaller Constraints

The value of the following methods should never change:

- isColleteral()
- targetName()
- erc20()
- rewardERC20()
- erc20Deciamls()

### Function-by-function walkthrough

- strictPrice() {UoA/tok}
- price(bool) {UoA/tok}
  if revert depends on the bool value true or false
- refPerTok() {ref/tok}
- targetPerRef() {target/ref}
- pricePerTarget(){UoA/tartget}
Debugging Python with a virtual environment in VSCode
Tags: vscode, python, debug
Published: 2022-10-30 15:09:19


My current job is mainly Python, so there was a steep learning curve. I have done some Python previously, but mainly for writing [Sublime](https://github.com/benmatselby/sublime-phpcs) [Text](https://github.com/benmatselby/sublime-jenkins-dashboard) [plugins](https://github.com/benmatselby/sublime-phpdocumentor) [back in the day](https://github.com/benmatselby/sublime-pman).

Over the last few months, I’ve set up my VSCode environment on my work machine. Last night I was wanting to do something on a different machine. I could not remember how to debug Python code inside a virtual environment within VSCode!

I kept getting this error

```python
Exception has occurred: ModuleNotFoundError
No module named 'django'
```

The error could have been a different module, but for me, it was `django`.

I sync all my VSCode settings via my [dotfiles](https://github.com/benmatselby/dotfiles), so I could not understand why it worked on my work machine and not my personal one. I did know it was a virtual environment issue though.

After some digging, I found out you have to pick your default interpreter. In VS Code open the Command Palette (⇧ ⌘ P). Then select “**Python: Select Interpreter**".

![Python: Select Interpreter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ud5ksk1xysgstmhu44ic.png)

This will produce a list of Python installations that you can pick from.

![Python: Interpreter List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hux9qf5133ombcd0nyi.jpg)

Pick your local virtual environment Python interpreter. For me, this is the one that has a star next to it.

This then allows you to use your debug configuration. For completeness, mine was:

```json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Shell plus",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["shell_plus"],
      "env": {
        "DOMAIN": "localhost:8888",
        "CLIENT_DOMAIN": "localhost:8080",
        "DYLD_FALLBACK_LIBRARY_PATH": "/opt/homebrew/lib/",
      },
      "django": true,
      "justMyCode": true
    }
  ]
}
```

That's it. Hopefully, I will remember this next time, or at least know I've written it up here.

---

Photo by <a href="https://unsplash.com/@supergios?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jonny Gios</a> on <a href="https://unsplash.com/s/photos/lake-district?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>