teleren/devto huggingface dataset:
I have rest api to fetch and want to register it to my App.js, How can i achieve such in react?
Published: 2022-06-05 09:22:18

I have this logic when im trying to fetch rest api and want to display details from my App.js(Main-App) and have Post.js(fetch rest api data).

`// Post.js
import React, { useState, useEffect } from 'react'
export default function Posts() {
  const [post, getPosts] = useState([])
  const API = 'https://fe-assignment.vaimo.net/';
  const fetchPost = () => {
    fetch(API)
      .then((res) => res.json())
      .then((res) => {
        console.log(res)
        getPosts(res)
      })
  }
  useEffect(() => {
    fetchPost()
  }, [])
  return (
    <>
      <h2>React Fetch Data with REST API Example</h2>
      <ul>
        {post.map((item, i) => {
          return <li key={i}>{item.name}</li>
        })}
      </ul>
    </>
  )
}`

`// App.js
import React from "react";
import './App.css';
import './index.css';
import Posts from "./components/Posts";
class App extends React.Component {

// First load an image for Drone.
render() {
    return (
        
        <img alt="timer" src={require('./components/images/drone_image.png')} />
        
    )
// Need some logic here to pass one value from Rest api js here when this page is loaded currently its only showing image
   function App() {
       <div className="container">
           <h1>2021 hot selling GPS 5G quadcopter drone with camera remote control aircraft drone WiFi mini drone camera</h1>
       </div>
   }
    

    // position the shopping details at the right side bar.

   
}


}


export default App;`
What the heck is JSON.parse() and JSON.stringify()?
Tags: webdev, javascript, tutorial, computerscience
Published: 2022-06-05 10:06:32

## What is the JSON.parse method?
As simple as it is, the method parses a JSON string, constructing a Javascript value or object described by the string.
An optional function called reviver performs a transformation on the resulting object before being returned.

### Syntax:
```javascript
JSON.parse(text)
JSON.parse(text, reviver)
```

### What do the parameters mean?
:- text = >
It's the string to parse as JSON.

:- reviver (Optional) = >
The reviver function prescribes how the value produced originally by parsing gets transformed before being returned. 

### What do we get as return value? 
We get a JavaScript object representing the given JSON value

#### Example
```javascript
//1-
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]

//2- With reviver function
JSON.parse('{"p": 5}', (key, value) =>
  typeof value === 'number'
    ? value * 2 // return value * 2 for numbers
    : value     // return everything else unchanged
);

// { p: 10 }
```

## What is the JSON.stringify method?

The method converts a JavaScript object or value to a JSON string.
If I provide a replacer function in the optional parameters, then it will replace the specified options or include the properties. 

### Syntax:
```javascript
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)
```

###What do the parameters mean?
:- value = >
It's the value to convert to a JSON string.

:- replacer (Optional) = >
The replacer parameter can be either a function or an array.

As a function, it takes two parameters: the "key" and the "value" to be stringified. The object in which the key was found is provided as the replacer's "this" parameter.

If replacer is an array, the array's values indicate the names of the properties in the object that should be included in the resulting JSON string.

:-space (Optional) = >
The space argument may be used to control spacing in the final string.
Its mostly used for readability purposes.
 
### What do we get as return value? 
We get a JSON string representing the given value or undefined.

#### Example
```javascript
//1- 
JSON.stringify([1, 'false', false]);   // '[1,"false",false]'

//2- With replacer function
JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', only keep "week" and "month" properties
```

That's it! Now you know how to use both function.
If it was worth reading do drop a follow on my [Twitter](https://twitter.com/Neo_kaizerr) handle!
Nondesructive mutation (buzib bo'lmaydigan mutatsiya )
Tags: csharp, dotnet
Published: 2022-06-05 10:02:46

C# 10 dan boshlab, struct va recordda `new` kalit so'zini iwlatmasdan turib obyektyasash imkoniyati paydo bo'ldi. Bunda avval yasalgan obyektdan nusxa olib , agar xoxlasak uni property va fieldlarini o'zgartirib yangi obyekt yasashimiz mumkin. Buning uchun `with` ifodasidan foydalanishimiz kerak. Quyidagi misolda ko'rsatilganidek, qaysi a'zolarni o'zgartirish va ularning yangi qiymatlarini belgilash uchun ob'ektni ishga tushirish sintaksisidan foydalanamiz:

```
public record Point
{
    public string Name { get; init; }
    
    public int Age { get; init; }
    
    public Point(string name, int age)
    {
        Name = name;
        Age = age;   
    }
    
    public override string ToString() => $" {Name} , {Age}";
    
}
```
```


    public static void Main()
    { 
        var x1 = new Point("jeki", 22);
        Console.WriteLine(x1);

        var x2 = x1 with{Age = 12};
        Console.WriteLine(x2);

        var x3 = x2 with {Name = "ok",  Age = 33};
        Console.WriteLine(x3);
        
    }
```
django orm
Published: 2022-06-05 09:06:15

product - models.py
```py
class Product(models.Model):
    id = models.CharField(max_length=10, primary_key=True)
    title = models.CharField(max_length=225)
    slug = models.SlugField()
    description = models.TextField()
    # 9999.99
    unit_price = models.DecimalField(max_digits=6, decimal_places=2)
    inventory = models.ImageField()
    last_update = models.DateTimeField(auto_now=True)
    # then reference collection class here
    # PROTECT -> if accidentally delete Collection(Parent), PROTECT will protect our all Products (Child)
    collection = models.ForeignKey(Collection, on_delete=models.PROTECT)
    # we use plural because we have multiple promotions
    # many to many
    promotions = models.ManyToManyField(Promotion)
```
Check if All A's Appears Before All B's
Tags: leetcode, dsa, theabbie
Published: 2022-06-05 10:00:47

Given a string `s` consisting of **only** the characters `'a'` and `'b'`, return `true` _if **every**_ `'a'` _appears before **every**_ `'b'` _in the string_. Otherwise, return `false`.

**Example 1:**

**Input:** s = "aaabbb"
**Output:** true
**Explanation:**
The 'a's are at indices 0, 1, and 2, while the 'b's are at indices 3, 4, and 5.
Hence, every 'a' appears before every 'b' and we return true.

**Example 2:**

**Input:** s = "abab"
**Output:** false
**Explanation:**
There is an 'a' at index 2 and a 'b' at index 1.
Hence, not every 'a' appears before every 'b' and we return false.

**Example 3:**

**Input:** s = "bbb"
**Output:** true
**Explanation:**
There are no 'a's, hence, every 'a' appears before every 'b' and we return true.

**Constraints:**

*   `1 <= s.length <= 100`
*   `s[i]` is either `'a'` or `'b'`.

**SOLUTION:**

    class Solution:
        def checkString(self, s: str) -> bool:
            bseen = False
            for c in s:
                if c == 'b':
                    bseen = True
                if c == 'a':
                    if bseen:
                        return False
            return True
Pixel Manipulation in Canvas
Tags: showdev, canvas, graphics, html
Published: 2022-06-05 09:41:32

I've been frustrated for a while at the lack of easy pixel manipulation functionality in the `canvas` element, so I [built some](https://github.com/jonrandy/canvas-screen)!

It's pretty basic so far, but it does what I want it to - allows me to play around with pixel-based graphic effects. I used to do this kind of thing all the time - but annoyingly, 'modern' technology has made it increasingly difficult to make this stuff easily.

Here's a quick demo (old skool [demoscene](https://en.wikipedia.org/wiki/Demoscene) fans may recognise the effect!):
{% codepen https://codepen.io/jonrandy/pen/ExQpZMy %}
Java Android Studio Error
Tags: java, android, mobile
Published: 2022-06-05 09:37:46



## **_Error_**


> The minCompileSdk (31) specified in a dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties) is greater than this module's compileSdkVersion (android-30). Dependency: androidx.lifecycle:lifecycle-runtime:2.4.0. AAR metadata file: C:\Users\jaisw\.gradle\caches\transforms-3\55824bd6c9b41f557d64668e082ada18\transformed\lifecycle-runtime-2.4.0\META-INF\com\android\build\gradle\aar-metadata.properties.







The solution is in the error itself. There can be two solutions:

**Before**

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

 
Use Android SDK version 31 in your project. Find `compileSdkVersion 30 in your app\build.gradle` file, and change it to `compileSdkVersion 31.`
Force gradle to use an older version of the dependency androidx.lifecycle:lifecycle-process:2.4.0. If you are not directly using this dependency, force gradle to use an older version like this:

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

Thank You!
Pacific Atlantic Water Flow
Tags: leetcode, dsa, theabbie
Published: 2022-06-05 09:30:41

There is an `m x n` rectangular island that borders both the **Pacific Ocean** and **Atlantic Ocean**. The **Pacific Ocean** touches the island's left and top edges, and the **Atlantic Ocean** touches the island's right and bottom edges.

The island is partitioned into a grid of square cells. You are given an `m x n` integer matrix `heights` where `heights[r][c]` represents the **height above sea level** of the cell at coordinate `(r, c)`.

The island receives a lot of rain, and the rain water can flow to neighboring cells directly north, south, east, and west if the neighboring cell's height is **less than or equal to** the current cell's height. Water can flow from any cell adjacent to an ocean into the ocean.

Return _a **2D list** of grid coordinates_ `result` _where_ `result[i] = [ri, ci]` _denotes that rain water can flow from cell_ `(ri, ci)` _to **both** the Pacific and Atlantic oceans_.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/06/08/waterflow-grid.jpg)

**Input:** heights = \[\[1,2,2,3,5\],\[3,2,3,4,4\],\[2,4,5,3,1\],\[6,7,1,4,5\],\[5,1,1,2,4\]\]
**Output:** \[\[0,4\],\[1,3\],\[1,4\],\[2,2\],\[3,0\],\[3,1\],\[4,0\]\]

**Example 2:**

**Input:** heights = \[\[2,1\],\[1,2\]\]
**Output:** \[\[0,0\],\[0,1\],\[1,0\],\[1,1\]\]

**Constraints:**

*   `m == heights.length`
*   `n == heights[r].length`
*   `1 <= m, n <= 200`
*   `0 <= heights[r][c] <= 105`

**SOLUTION:**

    class Solution:
        def DFS(self, i, j, m, n, heights, visited):
            for di, dj in [(-1, 0), (0, 1), (1, 0), (0, -1)]:
                if 0 <= i + di < m and 0 <= j + dj < n:
                    if (i + di, j + dj) not in visited and heights[i + di][j + dj] <= heights[i][j]:
                        visited.add((i + di, j + dj))
                        self.DFS(i + di, j + dj, m, n, heights, visited)
        
        def pacificAtlantic(self, heights: List[List[int]]) -> List[List[int]]:
            m = len(heights)
            n = len(heights[0])
            pacific = set([(i, 0) for i in range(m)] + [(0, i) for i in range(n)])
            atlantic = set([(i, n - 1) for i in range(m)] + [(m - 1, i) for i in range(n)])
            op = []
            for i in range(m):
                for j in range(n):
                    visited = {(i, j)}
                    self.DFS(i, j, m, n, heights, visited)
                    if len(set.intersection(visited, pacific)) > 0 and len(set.intersection(visited, atlantic)) > 0:
                        op.append([i, j])
            return op
Sass Tutorial for Beginners CSS With Superpowers
Tags: webdev, beginners, programming, tutorial
Published: 2022-06-05 09:24:52

## Sass Tutorial for Beginners CSS With Superpowers

## Why did it take this tutorial?

I watched this tutorial at the same time I was taking a Udemy course by Jonas Schmedtmann called ["Advanced CSS and Sass: Flexbox, Grid, Animations and More!"](https://dev.to/maxrpark/advanced-css-and-sass-5eb6).

I like to see how other developers do and teach about the same topics because, as you know, when it comes to web development there is rarely only one way of doing things.

I found this course on the [freeCodeCamp.org]("https://www.youtube.com/watch?v=_a5j7KoflTs") youtube channel and It is given by Jesse Hall who is a Senior Developer Advocate and has a great youtube channel called [codeSTACKr]("https://www.youtube.com/codeSTACKr").

This course is just 2 hours long but it has everything you need to know to get started with SASS.

Even if 2 hours seems too short, SASS is in my opinion very easy to learn, especially if you have a good understanding of CSS you can pick up all the important things in a few hours and start improving from there while you build something cool.

## About the course

This tutorial is divided into two big sections, the first one where you learn about SASS and all the important bits, and the second one where you have the chance to code a Portfolio website with everything you had learned.

## What you will learn

- SASS
- Prerequisite
- HTML
- CSS

## My thought about this course

Awesome course to get started with SASS, Jesse Hall is a great teacher, and the way he delivers his content is great.

I believe SASS should be something every developer should know, it is very simple to learn and it can improve your code tremendously by making it more organized, avoiding code repetition, and especially preventing you to worry about name collisions.

Thank you for reading up to here.

I hope you enjoyed!
Serverless Functions with Netlify
Tags: javascript, webdev, programming, tutorial
Published: 2022-06-05 09:18:48

## Serverless Functions with Netlify

## Why did it take this course?

I really like to build projects and practices what I have been learning but also every time I am working on a new project I end up adding features that I don’t know how to implement first and that gives me the challenge to learn something new.

Normally all of my projects consume data from APIs, and since at some point it got difficult to find APIs providing exactly what I wanted, I thought it could be great if I can create my own.

After some time researching the best and simple way of creating an API I came across serverless functions and how useful they are.

I knew John had a course about serverless function using Netlify which I knew at some point I was going to take, but honestly, at that time I did even know what serverless functions were.

The course is simple and easy to learn, so it makes it a top 10 course and a knowledge every developer should have.

The best thing is that learning about serverless functions gives you a lot more options and tools as a developer than just building your API that is not a small thing either.

## About the course

The course is almost 8 hours long where you have the chance to use serverless functions in so many different ways.

In this course more than in anyone I had taken you to learn by doing, projects are short but go directly to the point and without even knowing you learn more things than you thought you needed.

And the end of this course, you will feel like a better and more prepared web developer.

## What you will learn

- Serverless functions with Netlify

## Prerequisite
- HTML
- CSS
- Javascript
- node installed

## Course content and Course Projects

This course is divided into 5 sections with a total of 71 lessons and duration of almost 8 hours.

### Projects:
- Basic “Hello World”
- Basic API (with local data)
- Complex API (with Airtable)
- Survey
- Open Weather API
- Newsletter
- Send Email / Submit Form
- Stripe Payment

To see all the course projects, click [here]("https://serverless-functions-course.netlify.app/").

Read more about the course [here]("https://www.udemy.com/course/serverless-functions-with-netlify/?referralCode=D20939E2CD569529F2AB")

## My thought about this course

Definitely, for me, this course was a game-changer, after this course, my project became something else.

I also have the chance to start learning about HTTP methods which later lead me to put my first foot on the backend world.

You can read more about the course clicking here.

Thank you for reading up to here.

I hope you enjoyed!
Integrating Cryptocurrency Prices in Salesforce using Lightning Web Component (LWC)
Tags: salesforce, lightningwebcomponents, apex, coding
Published: 2022-06-05 09:17:59

In this article I will integrate live cryptocurrency prices in Salesforce developer instance, so let’s get started !

I created a free account on [CoinMarketCap](https://pro.coinmarketcap.com/login) to get an API key.

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

Complete documentation on how to use this api is provided [here](https://coinmarketcap.com/api/documentation/v1/)

I am using the [latest listings api](https://coinmarketcap.com/api/documentation/v1/#operation/getV1CryptocurrencyListingsLatest) to get the prices.

URL
https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest

```
{
  "data": [{
     "name": "Bitcoin",
     "symbol": "BTC",
     "quote": {
        "USD": { 
           "price": 9283.92,
           "percent_change_24h": 0.518894
        }
     }
   }]
}
```

Create a [Free Salesforce Developer](https://developer.salesforce.com/signup) account.

Create new Remote Site Settings entry for CoinMarketCap site url.

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


[Code](https://github.com/baltejas/CryptocurrencyPricesLWC/blob/main/force-app/main/default/lwc/crypto/crypto.js) to create the lightning web component

- The html is used to show the table with cryptocurrency prices.
- The javascript file is used to call the Apex class and store the prices for the view.
- The Apex class calls the CoinMarketCap to get the latest prices.

{% embed https://gist.github.com/baltejas/2e89e6be87dfa4dab2cc1bd59bbbba64 %}

Deploy the code in your Salesforce Instance.

Please refer [Create a Hello World Lightning Web Component](https://medium.com/@tejas.bal/integrating-cryptocurrency-prices-in-salesforce-using-lightning-web-component-lwc-752deb0fe93d#:~:text=Create%20a%20Hello%20World%20Lightning%20Web%20Component) trailhead for more details on how to write code and deploy it to Salesforce instance.

Let’s add our LWC component to the Contact Page.

Go to an existing contact record and Click Edit Page on the top right.

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


Drag the custom component to the layout above Activity section.

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

Save and Activate.


And all set, we have the Crypto Currency Live Prices in Salesforce !

Refresh the contact record page to get updated prices.

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

The code can be optimized for better performance. [Github link ](https://github.com/baltejas/CryptocurrencyPricesLWC)to the repository in case you would like to reuse or contribute.

Thanks for reading !

Blog - https://tejasbal.in/
Medium - https://medium.com/@tejas.bal
Build Web Apps with Vue JS 3 & Firebase
Tags: vue, tutorial, programming, devops
Published: 2022-06-05 09:05:33

## Why did it take this course?
Basically, because I needed to learn Vue for my job, two weeks after I started learning React.js I got my first job interview that lead to my first job as a Web Developer.

At that time I just knew HTML&CSS and JavaScript, but the company I work for used Vue.js for most of their projects.
I never thought learning Vue, could be so easy. It is so simple to understand, so organized and the documentation is awesome.

On top of that, I took this course from Shaun and it has everything you need to know to become and Vue Ninja.

I did know about Shaun before I took this course, but after that, I became a huge fan of his courses in Udemy and also of all the content on his youtube channel [The Ninja Net]("https://www.youtube.com/c/TheNetNinja").

## About the course

With 4.8 out of 5 stars over more than 5,500 ratings, this is one most popular and well-rated Vue courses in Udemy.
The course is 31 hours long, but the last 13 hours of the course are archived Lessons.

Vue is easy to learn but Shaun makes it even easier, every lesson is clear and well organized, every subject is explained in an effective but simple way with great examples and use cases.

Since it's a beginner's course, the first section covers the very basics of the framework to be able to start building your first application. After that, the course covers the most important concept of the framework like data binding, routing, and of course the Composition API.

Throughout every section, you have the chance to use that knowledge in different projects.

But this course is not just about Vue, it is also about Firebase, so if you take this course you will be able to start creating full-stack applications using Vue and Firebase 9.

## What you will learn

- Vue 3
- Create a full frontend application using Vue.
- Firebase (database, authentication, service, and hosting)

## Prerequisite
- HTML
- CSS
- Javascript, preferably with ES6 knowledge

## Course content and Course Projects

This course is divided into 28 sections with a total of 314 lessons and a duration of almost 32 hours.

### Projects:
- Reaction timer
- Project Planner
- Blog project
- Live Chat Room
- Muso Ninjas

In the archive section, you can also find more projects.

## My thought about this course

I could not be happier with this course, from day one I started learning a lot.

Taking this course was definitely a great decision, the course is so well organized that it makes it so easy to re-watch some of the lessons when I forget how to do something.
If you want to learn Vue, this course is the way to go. Take a look here

Besides this course, Shawn has some amazing tutorials about Vue in his youtube challenge for example about Vuex, Vue animations, Vue with typescript, and more.

## What I had built after this course
These are some of the websites I build during and after this course.

[My Portfolio website]("https://my-portfolio-blog-website.netlify.app/")
And I had used Vue since then in my current job.

Thank you for reading up to here.

I hope you enjoyed!