teleren/devto huggingface dataset:
Making a Search Bar with React
Tags: webdev, javascript, react
Published: 2022-08-01 02:40:00

When using a computer, you want the computer to do exactly what you want when and how you need it. Finding a the right file or post quickly is essential to boosting productivity. Search engines are extremely useful in finding the data users need in a shorter amount of time. My objective for this post is to explain how I make simple search engines for sites in JavaScript and React.

**Grabbing the Data**
For this example we’re gonna grab data from a .json file using the fetch function. The data grabbed from the .json is stored in an array that we can use to display to our screen.

```
/* App.js */
import React, { useState, useEffect } from "react"
import Header from "./Header"
import SearchBar from "./SearchBar"
import DataContainer from "./DataContainer"

function App() {
const [data, setData] = useState([])

useEffect(() => {
 fetch(url)
  .then(resp => resp.json())
  .then(dataArray => setData(dataArray))
},[])

return (
    <>
      <Header />
      <SearchBar />
      <DataContainer data={data}/>
    </>
  )
}

export default App
```
**Create a useState**
useState is a react tool that can make your web app very dynamic. The useState variable updates everything that is using that variable anytime it is changed. We can use that to change the data whenever the input field is changed.

```
/* App.js */
const [searchString, setSearchString] = useState('')

```
Then we can create a function to change searchString whenever you change the text input.

```
/* App.js */
const handleSearch = (string) => {
 setSearchString(string)
}

...
  <SearchBar handleSearch={handleSearch} />
```

```
/* SearchBar.js */
function SearchBar({handleSearch}) {
  return (
    <div>
        <input
          onChange={handleSearch(e.target.value)}
          type="text"
        />
    </div>
  )
}

export default SearchBar
```
Every time the input is changed, handleSearch updates our useState to the same value. 

We can use data to create a separate array that changes every time you enter a new query. You can do this by using .filter() and use .includes() on the strings to filter them. Since we used a useState, the array will change after we change the input. 

```
/* App.js */
const searchArray = data.filter((item) => { 
 return item.name.toLowerCase().includes(searchString.toLowerCase())
})
```
Make sure to create the searchArray after the handleSearch or else the data will still be showing the previous input. 

```
/* App.js */
   <DataContainer data={searchArray}/>
```
Lastly we pass the data to our DataContainer component. Now all our data has been filtered and is ready to be used in DataContainer.
Fixing baseURL error in Nextjs-auth0
Tags: javascript, webdev, nextjs, auth0
Published: 2022-08-01 02:27:10



Contrary to the YouTube tutorial and auth0 documentation that I followed diligently while setting up my code of nextjs and auth0 authentication, still i encountered this error and it took awhile to find a solution to fix the error. *`Talk is cheap show me the code.`* 

👾 **Let’s dive right into fixing the error.**

**Error image.**


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

**If you’re getting this exact error then i have the exact fix for you in this article.**

**Prerequisite:**

In your _app.js you should import UserProvider and wrap it around the component.

```jsx
import "../styles/globals.css";
import { UserProvider } from "@auth0/nextjs-auth0";

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

export default MyApp;
```

**Step One:**

Make sure you have your .env.local file created in the root of your app.


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

**Step Two:**

The contents of you .env.local file should be arranged in this format.

`AUTH0_SECRET='random generated number'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN_AUTH0_DASHBOARD'
AUTH0_CLIENT_ID='CLIENT_ID_AUTH0_DASHBOARD'
AUTH0_CLIENT_SECRET='CLIENT_SECRET_AUTH0_DASHBOARD'`

**Step Three:**

In your pages/api/auth/[…auth0].js file.

```jsx
// pages/api/auth/[...auth0].js
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth({
    baseUrl: process.env.AUTH0_BASE_URL
});
```

This is the file where the error comes from.

Contrary to what is in the auth0 documentation for nextjs which is the snippet below.

```jsx
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();
```

This will definitely throw an error because the handleauth isn’t able to read the baseUrl from the env.local file.

**Step Four:**

The last step is to navigate to the authentication url in your browsers’ url.

Add the api/auth/login to your [localhost](http://localhost) url

[http://localhost:3000/](http://localhost:3000/)api/auth/login

If this helped solve the error you’ll get this in your browser’s http://localhost:3000/api/auth/login


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


😜 **Finally! Problem solved.**

If this helped follow my twitter handle @celebrity_dev
React with Valtio: geolocation API with Leaflet.js
Tags: react, valtio, leafletjs
Published: 2022-08-01 02:07:00



{% codesandbox reactleaflet-valtio-vv18i3 %}

Continuing to [discover Valtio](https://dev.to/ndrean/examples-of-using-react-with-the-state-manager-valtio-with-fetch-and-sse-bih), we use this library to simplify the code of a React component which renders a map centred on your current location (you need to enable geolocation for the snippet above to work). 

The geolocation API [describes how to get the current location](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API#getting_the_current_position). Since this is an async call, you would use `useEffect` with dependencies. It is a bit tricky to set up. The Valtio library makes it easy: just use `proxy`, `useSnapshot` and `derive` for async callbacks.


## The store and the async callback

We declare a store with two fields, "defaultPos" and "current", then `proxy` it, and then `derive` the "current" field from the geolocation API.

```js 
import { proxy } from 'valtio';
import { derive } from 'valtio/utils';

const defaultPos = { lat: 42.2808, lng: -83.743 };

export const gps = proxy({
  initPos: defaultPos,
  current: null,
});

derive({
  derPos: async (get) => {
    if (!navigator.geolocation) return (get(gps).initPos = defaultPos);

    navigator.geolocation.getCurrentPosition(success, fail);
    function fail(e) { return e }
    function success({ coords: { latitude, longitude } }) {
      get(gps).current = { lat: latitude, lng: longitude };
    }
  },
});
```

## The `<App />`component

In order for React to render when the position is obtained, we simply snap the desired field of the store with `useSnapshot`. We also need to suspend it since it's an async rendering.

```js
import Map from './map';
import React from 'react';
import { useSnapshot } from 'valtio';

import { gps } from './geolocate';

function App() {
  const { current } = useSnapshot(gps);

  return (
    <React.Suspense fallback={<h1>Loading</h1>}>
    <div>
      {current && <Map coord={current} />}
    </div>
    </React.Suspense>

  );
}

export default App;
```

## The `<Map />` component

We use the traditional React code as the Valtio library might not bring an obvious advantage, especially as we need to keep track of a DOM component with `useRef`.


```js
import React from "react";
import "./styles.css";
import { MapContainer, TileLayer } from "react-leaflet";
export function Map({ coord: { lat, lng } }) {
  return (
    <MapContainer center={[lat, lng]} zoom={4} class="leaflet-container">
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
}
```
How to change an image with Python
Tags: python, pip, beginners, pillow
Published: 2022-08-01 01:47:00

Today I would like to play a little bit with Python and Pillow library. I will test some possibilities of PIL.

I open PyCharm and I create in a directory PycharmProjects a project imagePython.
Normally PyCharm creates it automatically

I want to work with pictures so I install [pillow](https://pillow.readthedocs.io/en/latest/installation.html) for mac:

```
python3 -m pip install --upgrade pip
python3 -m pip install --upgrade Pillow
```

When I create a directory images and download a picture that I want to modify from [Pixabay](https://pixabay.com/fr/). It is better to chose a little image so it will take less time to transform it.

Now I change a main.py file:

```
from PIL import Image

tulips = Image.open("./images/tulips.jpeg")
tulips.show()
``` 
and I run this code and this is a result:
![tulips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbq0k3e672g5bgvx3tf3.png) 

That you see the image change a name and format.

Now I can rotate my image:

```
rotateImage = tulips.rotate(180)
rotateImage.show()
```
![tulips rotate 180°](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en55jas3txu3eaucqx4s.png)

I can also resize it:

```
little = tulips.resize((128, 128))
little.show()
```

![little tulips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkrucbsilx7xavime2y0.png)

Now I change colors to white and black:

```
# all is black and white
im = tulips.convert("L")
im.show()
```

![tulips white and black](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mox8la549v25irlqqn2v.png)

I can also change the colors of the image like this:

```
r, g, b = tulips.split()
r = r.point(lambda i: i * 2)
g = g.point(lambda i: i / 2)
b = b.point(lambda i: i + 50)
img = Image.merge("RGB", (r, g, b))
img.getextrema()
img.show()
```

![changing colors of tulips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtvrsc8771khydzfjcvc.png)

There is possible to use also some filters like blur or contour and much more than you can find in documentation:

```
from PIL import ImageFilter

im1 = tulips.filter(ImageFilter.BLUR)
im1.show()

im2 = tulips.filter(ImageFilter.CONTOUR)
im2.show()
```


![blur tulipes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xwndg6vbp8cvqpt3q33.png)


![contour tulipes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbbx35f5lqq4ok727o9t.png)

I can also regulate the contrast of my image:

```

from PIL import ImageEnhance

# contrast of 50%
contrastedImg = ImageEnhance.Contrast(tulips)
contrastedImg.enhance(1.5).show()

```

![contrasted img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx23ejm50gas4up8ayxa.png)

These are only some examples of Pillow possibilities so don't hesitate to test them and use them in your projects.
🍃windlight release
Tags: gamedev, opensource, showdev, godot
Published: 2022-07-31 23:47:09

# About windlight
## Introduction
Hello reader! This is my first ever post and I am ready to announce the release date for my first ever (published) indie game, 🍃windlight! Windlight is a topdown shooter arcade game with a posture system inspired by the likes of Sekiro and  Sifu. You can slash, dash, parry and shoot with the goal of attaining true and undeniable... **_style_** 
## The release date
Drum rolls please... about a week from now! In other words, August 8th 2022.
## Where can I play
You can download the game right now on itch.io [here](https://wyvernbw.itch.io/windlight). It is in a pre release state, but you can test out the flow of basic combat. Things are subject to change .
## Source Code
You can view the source code [here](https://github.com/wyvernbw/windlight)
Riparazione Cellulari, Tablet, Computer, Console, Watch Brescia
Tags: computer, console, smartwatch, tablet
Published: 2022-07-31 23:40:00

Riparazione e Assistenza [Smartphone](https://bresciapc.com/riparazione-smartphone), [Notebook](https://bresciapc.com/riparazione-notebook), [Computer](https://bresciapc.com/riparazione-computer), [Console](https://bresciapc.com/riparazione-console), [Tablet](https://bresciapc.com/riparazione-tablet), [Smartwatch](https://bresciapc.com/riparazione-smartwatch) & [Navigatori](https://bresciapc.com/riparazione-navigatori) fuori garanzia.
Il nostro laboratorio esegue interventi di riparazione in 1 ora su appuntamento utilizzando ricambi originali oppure compatibili di ottima qualità!
Tutte le nostre riparazioni sono garantite tre mesi.

Per maggiori informazioni consulta il nostro sito:
[BresciaPC.com](https://bresciapc.com/)
A Brief Overview of useState
Published: 2022-07-31 23:38:18

## What is useState()?

So useState() creates a javascript object which you can use to dynamically update your web page asynchronously (not relying on information from elsewhere). It is similar to props with one key difference: state is handled within the component it is passed to.

## How is it used?

When implementing state in your function it must first be imported from the react library.

`import {useState} from "react"`

Once it has been imported you can then use it by declaring it. The first item it returns will be the variable you are trying to set the state for, and the second item it returns will be a function for setting the value of that variable whatever it may be. Typically the naming convention for this function is the variable name you set preceded by the word "set" this helps to avoid confusion.

`const [variable, setVariable] = useState()`

Now, whatever is inside of the parentheses of useState will be the default value until it is "set" with the setter function that you named. You can make this an empty version of whatever value you expect your variable to be (i.e. [], {}, "") whether it's an array, an object, or a string.

## When should I use it?

React utilizes state fairly heavily, due to the fact that it is so versatile, you will probably find yourself using it a lot. However when is it appropriate to use props instead? You may be asking. Well basically you should use state until the complexity increases (i.e. passing props down to child components) to the point where props seem to be required.

This is a brief, high level, overview of state as a concept. For more detail on how state actually works, and what it can be used for I would recommend you refer to react's documentation: {% embed https://reactjs.org/docs/faq-state.html %} 

I hope this helps a bit with understanding the concept!
Day 113: Hello Flutter!
Published: 2022-07-31 21:44:18

Hi!
As promised today I got started with Flutter, the setup of Flutter development environment. I think it's not very straight forward as there is a lot to download including the flutter sdk itself android studio ide, visual studio (which is different from visual studio code) dart sdk they all take about 5 Gbs before you cna actually write any line of code in your local environment and I haven't written a line of code in my environment yet as I focused more on reading docs finding videos around and setting up my own development but I expect to do some tomorrow preparing for a Flutter demo coming up Tuesday. I looked up a little bit of Figma and Material Design, helped friends with their task watched a movie episode so I can say that overall I did something about everything I planned to do yesterday 

Tomorrow I will plan for the week I will be doing lot of flutter, figma, express, react and Firebase if I spare time I will write like a tutorial article but it's more likely that I will be caught up in a but I will see what I can do

Signing off ...
Fifth test
Published: 2022-07-31 21:26:15

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Fourth test security
Published: 2022-07-31 21:06:55

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Making a Website Application (Belafonte Food Hub) using the React Library
Published: 2022-07-31 20:59:39

Belafonte Food Hub Using React

 Author : Martin Chege 26th July 2022

Using a JSON server I came up with a list of meals that are available on a website: Belafonte Food Hub website that offers users a variety of meals  where one can scroll and learn how to cook the meal and add their own meal in the website.

Getting:
1.List of meals/dish.
2.Name of the meal.
3.Category: such as Soup or side dish.
4.Origin of the meal.
5.Add your meal
******

## SCREENSHOTS
![Screenshot from 2022-07-31 23-46-09](https://user-images.githubusercontent.com/24671358/182044780-3d6e25c0-03ef-4948-90f7-6a3508c5e567.png)
![Screenshot from 2022-07-31 23-46-17](https://user-images.githubusercontent.com/24671358/182044782-fabf9d9d-53b3-4fc1-86de-fecb6debde21.png)
![Screenshot from 2022-07-31 23-46-28](https://user-images.githubusercontent.com/24671358/182044784-2b816c76-e374-45e5-8127-1cea9a8b05d6.png)
![Screenshot from 2022-07-31 23-46-36](https://user-images.githubusercontent.com/24671358/182044786-48f6e3a0-98c5-4dc8-93fb-4cd13308239c.png)

Getting Files
* Fork the repo
- Create a new branch in your terminal (git checkout -b improve-feature)
- Install the prerequisites.
- Make appropriate changes in file(s)
- Run the server to see the changes
- Add the changes and commit them (git commit -am "Improve App")
- Push to the branch (git push origin improve-app)
- Create a Pull request
* Open the folder location on terminal and use the following command to run app:

How To Run It
start server and npm start 


## Technologies Used
1. HTML
2. CSS
3. JavaScript
4. React Library
Web App Tutorials (from front-end to back-end)
Tags: webdev, tutorial, f
Published: 2022-07-31 20:47:22

Hi all,

A few months ago, I went through the Free Code Camp tutorials, which were great! I then stumbled upon the MDN Learning Development Docs, which I have found to be great as well! I am almost done with all the MDN tutorials. 

Are there any tutorials out there that take you from start to finish (front-end to back-end) on building a full-fledged web application (like a twitter app, or instagram app, it could be anything really)?

Just asking so I can queue up tutorials and think thoughtfully about my learning path.

Let me know, thanks!

Johnson
Git vs GitHub
Tags: github, git, devops, codequality
Published: 2022-07-31 19:26:36



## What is Git?
Let's start with a straightforward definition of git that states that, GIT is a VERSION CONTROL SYSTEM that helps developers to manage, and keep track of their source code history.



## What is Github?

GITHUB is a cloud-based hosting service that helps you to manage git repositories. So, taken all together: Git vs. GitHub. what’s the difference? Simply put, Git is a version control system that lets you manage and keep track of your source code history. GitHub is a cloud-based hosting service that lets you manage Git repositories. If you have open-source projects that use Git, then GitHub is designed to help you better manage them.

## Difference between Git & Github.




### Git.

GIT is Version Control System, that manages your code history.
GIT is installed and maintained in your Local System.
GIT is Software.
GIT is a command-line tool.
It creates a local repository to track changes locally rather than storing a centralized server.
GIT can work without GITHUB as other web-based GIT repositories are also available.



### Github.

GITHUB is a cloud-based hosting service for managing your GIT repositories.
GITHUB is Cloud-Based.
GITHUB is a service.
GITHUB provides a graphical interface.
It is open-source which means code is stored in a centralized server and is accessible to everyone.
GITHUB is the most popular GIT server but there are other alternatives such as GitLab, BITBUCKET
Question about the Electron.js Framework
Tags: electronjs, javascript, tutorial
Published: 2022-07-31 20:44:58

Has anyone built and app or worked with the Electron.js framework? If so, I would love to connect.

I am in the early stages of building an web application, with a React front-end and a Node.js/Express framework. Want to learn more about Electron.js as I foresee a need for a desktop version of my app. So would love to learn more before diving in.

Please reach out if you have, thanks!

Johnson
Gradient Text
Tags: codepen, css3, frontend
Published: 2022-07-31 20:31:01

---
title: Gradient Text 
published: true
tags: codepen, CSS3, #frontend
---
Gives text a gradient color.

##HTML
```
<h1 class="gradient-text">Gradient text</h1>
```
##CSS
```
.gradient-text {
font-size: 100px;
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
```
Demo
{% codepen https://codepen.io/atif-riaz/pen/KKoZZep %}
Laravel 9 Full Tutorial For Beginners In Hindi 2022
Tags: laravel, webdev, beginners, tutorial
Published: 2022-07-31 20:15:00

**Laravel9** is one of the trending backend development frameworks in India. Laravel has boost up the usage of PHP in industry. There are a lot of jobs available for Laravel. 

If you are a beginner and want to start web development, then you can learn Laravel. 

## Laravel9 Full Tutorial In Hindi

{% embed https://www.youtube.com/watch?v=tm3zFfTG5XA %}

## Conclusion

Give me your feedback or should I create Laravel videos in episode wise.
How to fetch question from api and compare answer from input ?
Published: 2022-07-31 19:25:02

import React from "react";
import "./App.css"

export default function App(){

  const [questions, setQuestions] = React.useState([])

  const [txt , setTxt] = React.useState('')


  React.useEffect(function (){
    fetch("https://opentdb.com/api.php?amount=1")
    .then(res => res.json())
    .then(data => {
      setQuestions(data.results)
    })
     
  } , [])

  const uuu = questions.map(val => <p key={val.question}>{val.question}</p>)

  const gg = questions.map(val => <p key={val.question}>{val.correct_answer}</p>)

  console.log(gg)

  const handleSubmit = (event) =>{
    event.preventDefault();
    console.log({txt})
    if (txt === gg){alert("correct")}
    else{alert("incorrect")}
  }
  

  return (
    <div className="container">
        <h3>Question {uuu}</h3>
        <h3>{gg}</h3>
     
    <form onSubmit={handleSubmit}> 
 
  
      <label>Answer</label>
      <input type="string"
              name="txt"
              id="txt"
              value={txt}
              placeholder="type your answer"
              onChange={ event => setTxt(event.target.value)}
      />

      <button type="submit"
                >Submit</button>
    </form>
    </div>
  )
}