teleren/devto huggingface dataset:
Fundamentals of useRef
Tags: react, beginners
Published: 2022-10-06 13:35:45

useRef hook is used to establish a  connection between native html inputs and our component's logic.

This connection gives us access to the input attributes, for example the input value.

In the following example we are using useRef in order to get the value and set the state.

```jsx
import React, { useState, useEffect, useReducer, useMemo, useRef } from "react";

const Cryptos = () => {
    const searchInput = useRef(null);
    const [search, setSearch] = useState("");

    const handleSearch = () => setSearch(searchInput.current.value);
    
    return (
        <div>
            <input
                ref={searchInput}            
                type="text" 
                value={search} 
                onChange={handleSearch} 
            />
        </div>
    );
};
export default Cryptos;

```
Fundamentals of useReducer
Tags: react, beginners
Published: 2022-10-06 13:34:37

This hook can be used to manage the state, is an alternative to useState hook. It is better to use useReducer when the state we want to manage is complex.

useReducer promotes inmutability and data will flow always in one direction.

To implement useReducer we need to follow these steps

### Creating reducers

```javascript
import _ from "lodash";

const initialState = {
    favorites: [],
};
const favoritesReducer = (state, action) => {
    switch (action.type) {
        case "ADD_TO_FAVS":
            return {
                ...state,
                favorites: [...state.favorites, action.payload],
            };
        case "REMOVE_FROM_FAVS":
            const newFavorites = _.pull(state.favorites, action.payload);
            return {
                ...state,
                favorites: newFavorites,
            };
        default:
            return state;
    }
};
```

### Calling useReducer inside the component

```javascript
const Cryptos = () => {
    const [state, dispatch] = useReducer(favoritesReducer, initialState);
    const addToFavs = (newFavorite) => {
        dispatch({ type: "ADD_TO_FAVS", payload: newFavorite });
    };
    const removeFromFavs = (favoriteToBeRemoved) => {
        dispatch({ type: "REMOVE_FROM_FAVS", payload: favoriteToBeRemoved });
    };
    const { favorites } = state
    // Returning component to be rendered
};
```
Escape Room!
Tags: codepen
Published: 2022-09-14 21:19:36

<p>Pass The Pen - Escape Room</p>

<p>Find and solve all the puzzles to escape from the room!</p>

<p>Best played at a minimum browser width of 1240px  &amp;  height of 798px. Tested only in Firefox and Chrome.</p>

<p>This Pen was a team effort! Many thanks to the following people for contributing Code and Ideas to the Escape Room!   </p>

<p>Cheryl Velez </p>

<p>Dominic Duffin</p>

<p>Paul Caoile</p>

<p>Anotine Guillien</p>

<p>Daniel Subat</p>

<p>Erick Mack</p>

<p>Linsey Reed</p>

<p>Ryan Saunders</p>

<p>Kristopher Van Sant</p>

<p>Jamie Coulter</p>

<p>BigMinionD</p>

<p>ZIM</p>

<p>Extra Extra Extra Special Thanks to Dominic Duffin and Paul Caoile for spending so much time on getting the Escape Room perfected and finished! And to Cheryl Velez for coming up with idea!! </p>

<p>Escape Room Chat Thread: </p>

<p><a href="https://spectrum.chat/codepen/pass-the-pen/escape-room~0e461c74-e13d-472c-ba50-ee87b6e098ea" target="_blank">https://spectrum.chat/codepen/pass-the-pen/escape-room~0e461c74-e13d-472c-ba50-ee87b6e098ea</a></p>

<p>SVG Illustrations are from the following artists via the Noun Project:</p>

<p>Nikita Kozin, Freeline, Caitlin Das, Anatolii Babii, Mike Zuidgeest, Leo, Myly, Guillermo Guso, Alfredo @ IconsAlfredo.com, Juan Pablo Bravo, Nicholas Menghini, Maria Kislitsina, OliM, Arthur Shlain, James Keuning, </p>

<p>Original Puzzles :</p>

<p><a href="https://codepen.io/onegrumpybunny/full/qgaMvq" target="_blank">https://codepen.io/onegrumpybunny/full/qgaMvq</a></p>

<p><a href="https://codepen.io/dominicduffin1/full/OqWbVY" target="_blank">https://codepen.io/dominicduffin1/full/OqWbVY</a></p>

<p><a href="https://codepen.io/KristopherVanSant/pen/yZxmrV" target="_blank">https://codepen.io/KristopherVanSant/pen/yZxmrV</a></p>

<p><a href="https://codepen.io/Paul2512C/pen/vbPLmL" target="_blank">https://codepen.io/Paul2512C/pen/vbPLmL</a></p>

<p><a href="https://codepen.io/Sladix/pen/bZZPar" target="_blank">https://codepen.io/Sladix/pen/bZZPar</a></p>

<p><a href="https://codepen.io/IDemixI/pen/XOBqPV" target="_blank">https://codepen.io/IDemixI/pen/XOBqPV</a></p>

{% codepen https://codepen.io/KristopherVanSant/pen/dEZZEN %}
Fundamentals of useMemo
Tags: react, beginners
Published: 2022-10-06 13:33:34

useMemo helps us to reduce the computing process in order to save memory. It applies memoization technique in order to speed the reply up by storing the result of a given function for given arguments.

We want to to be careful and ensure that the expected result of a function is going to be always the same for the same parameters.

If we want to use useMemo, the hook is very simple.

```javascript
const filteredCryptos = useMemo(
() => cryptos.filter(
    (crypto) => crypto.name.toLowerCase().includes(search.toLowerCase())), 
[cryptos, search]);
```

useMemo receives 2 parameters.

* A closure function that will be the objective of the memoization.
* an a array with 2 elements
  * the expected result of the function for the given parameter.
  * the parameter sent to the function for which we will sent the result without processing or executing the function.
Fundamentals of useEffect
Tags: react, beginners
Published: 2022-10-06 13:32:49

This hook allows us to call side functions, in other words, this can help us to execute functions or actions as a parallel process related to the component rendering.

Side effects may include calling APIs, changes in the context of the site, for example SEO by manipulating the document title or some meta attributes population, etc.

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

const Cryptos = ({ darkModeActive }) => {
    const [cryptos, setCryptos] = useState([]);

    //closure to be executed, this closure is on charge of performing http request.
    //second argument is a variable that is going to be.
    useEffect(() => {
        fetch("https://api.nomics.com/v1/currencies/ticker?key=123456789&per-page=50&page=1")
            .then((res) => res.json())
            .then((data) => setCryptos(data));
    }, []); // Only re-run the effect if second argument changes

  // return component to be rendered
};
export default Cryptos;
```

useEffect receives 2 parameters. First one is required, second one is optional.

First parameter is a closure that is going to be executed in order to perform the side effect, in this example the side effect is calling an API.

Second parameter is a "previous state", when  we set this parameter and the component is going to re-render React is going to compare the previous value with the new one, if they are equal React will not perform the side effect.
Fundamentals of useContext
Tags: react, beginners
Published: 2022-10-06 13:31:49

This hook enables the component \(function component\) to have access to the React Context, this helps to transfer props from parents to children without explicitly move the whole component tree.

To use this feature we need to follow these steps

### Creating a context

```javascript
import React from "react";

const toggleDarkModel = () => {};

const theme = {
	darkModeActive: false,
	toggleDarkModel,
};

const ThemeContext = React.createContext(theme);

export default ThemeContext;
```

toggleDarkModel is a function that later will be implemented and its purpose is manipulating the state by function components.

### Adding provider to the app

```jsx
import React, { useState } from "react";

import ThemeContext from "./context/ThemeContext";
// Other components

function App() {
	const [darkModeActive, setDarkModeActive] = useState(mode);
	const toggleDarkModel = () => {
		setDarkModeActive(!darkModeActive);
	};
	return (
		<ThemeContext.Provider value={{ toggleDarkModel, darkModeActive }}>
		//App goes here
		</ThemeContext.Provider>
	);
}

export default App;

```

As we can see, the function component has the implementation of toggleDarkModel

### Consuming our context wherever is needed

When we want to consume the context, we will need to import useContext

```jsx
import React, { useContext } from "react";
import ThemeContext from "../context/ThemeContext";

const Header = () => {
    const { toggleDarkModel, darkModeActive } = useContext(ThemeContext);
    return (
        <div className="Header container">
            <h1 className="title">Crypto Swag</h1>
            <button onClick={toggleDarkModel} className={`button is-small ${darkModeActive ? "is-white" : "is-dark"}`}>
                <span className="icon is-small">
                    <i className={`mdi ${darkModeActive ? "mdi-lightbulb-on" : "mdi-lightbulb-off"}`}></i>
                </span>
            </button>
        </div>
    );
};

export default Header;

```
How to close side panel on button click
Published: 2022-10-06 13:17:53

Hi, Have a svelte gallery project ([here's a replit with working code](https://replit.com/@DavidMyers6/collapsible-side-panel#src/App.svelte) ), with 2 buttons to select the image category, and a collapsible side panel that's populated with images from the category, when ">>" on left clicked.
When the category changes (button click - top center) I want the side panel to close and the first image in clicked category to appear in main area.
How can I do this.
Thanks for any help
Migrate RDS Cross-Account
Tags: aws, rds, crossaccount, dbmigration
Published: 2022-10-06 13:17:31

 This post gives a walkthrough on how to migrate an RDS DB across two AWS accounts.

### #1 Take Snapshot

- Take a snapshot of the target DB
```
Go to AWS --> RDS --> Snapshots --> Take snapshot
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgwz9e1cbyvava1unopy.jpeg)

### #2 Create a KMS key 

- Create a fresh KMS key and share it with the target account
```
AWS --> KMS --> Customer-managed keys --> create key
```
 - Before you go on creating the new key, don't skip the above step. Now proceed to enter the target account ID in the below field

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

- Create a snapshot (a second) _of_ the snapshot created in **#1**. The reasoning for this is that the KMS key created in **#2** which was shared with the target account, was done to allow the creation of the DB on the target account
```
select the snapshot --> action --> copy snapshot
```
- While the steps to copying are underway, select the freshly created KMS key (I named it "test") from the drop-down

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

### #3 Share the Snapshot
- Share the copied snapshot with the target account and enter the target account ID, once more
```
Select the snapshot --> Action --> share snapshot
```

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

> **_NOTE:_**  The below-proceeding steps should be executed on the target account

### #4 Create a New DB.

- The shared DB snapshot will show up in your target account
 ```
Go to AWS --> RDS --> Snapshot --> Shared with me
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppw2sjbhh7akswajusmx.jpeg)
- In the target account, create a new DB instance by restoring the DB snapshot
```
RDS --> Snapshot --> Shared with me --> select snapshot --> action -->  restore snapshot.
```
> **_NOTE:_**  When creating a DB from the snapshot, **DO NOT FORGET** to swap the "test" KMS key with the "default" on the target account key. Select "(default) aws/rds"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqz8lu3m5cjbeldkckpt.jpeg)
CMS for video
Tags: webdev, techtalks, react
Published: 2022-10-06 12:53:17

Hi,

Hope someone of you had some experience in this and would be able to help me out / give advice.

Have a project ahead of me that slowly choosing the stack for. In a nutshell project requires:

- CMS ( for the blogs, and video storing. no custom components etc. )
- User authentication
- FrontEnd ( next.js )

Have never worked that much with a video storing/streaming etc. So likely CMS choice is important, cause gonna need to limit access to videos depending of your user role.

any advice/suggestion ? Thanks in advance.
Classify image datasets with AutoML and Hugging Face AutoTrain
Tags: transformers, healthcare, computervision, deeplearning
Published: 2022-10-07 07:40:21

---
title: Classify image datasets with AutoML and Hugging Face AutoTrain
published: true
date: 2022-10-06 12:46:38 UTC
tags: transformers,healthcare,computervision,deeplearning
canonical_url: https://julsimon.medium.com/classify-image-datasets-with-automl-and-hugging-face-autotrain-5bb023d5615e
---

I show you how to train image classification models with AutoTrain, our AutoML service, and how to test them both on the model page and in a Jupyter notebook. Along the way, we look at different datasets available on Kaggle and on the [Hugging Face](http://huggingface.co) hub (chest x-ray, alzheimer, and food101).

{% youtube uFxtl7QuUvo %}
O que é dark data?
Tags: bigdata, braziliandevs, darkdata
Published: 2022-10-06 12:32:50

**Dark data** é o conceito que define uma grande quantidade de dados armazenados, mas intocáveis por organizações. **São dados que simplesmente não são utilizados.** Por exemplo.: Imagens da câmera que nunca mais são vistas ou dados de sensores de aparelhos conectados na Internet das Coisas. São dados que foram coletados por algum motivo, mas não servem para mais nenhum outro propósito. Como gravações armazenadas apenas para registro ou segurança.

Armazenar dark data aumenta consideravelmente os custos a longo prazo. Estes dados normalmente são **inacessíveis por banco de dados relacionais tradicionais, mas possuem um valor**, por isso continuam sendo armazenados mesmo não tendo um retorno financeiro previsto. Tipicamente isto acontece porque os dados são armazenados em um formato que não é acessível no momento e as **organizações preferem continuar armazenando na esperança de usá-los no futuro.**

Eu vejo que é muito interessante saber que existem dados que não são usados pelas organizações, **mas que ao mesmo tempo é um desperdício não usar esses dados para realizar análises que valorizem o negócio,** principalmente com o avanço da tecnologia. Sinto que é inevitável esses dados existirem. Mas que no futuro teremos recursos capazes de analisa-los.

Eu mesma tenho muitas imagens na câmera, e dados armazenados no google drive de anos anteriores que provavelmente eu nunca mais vá usá-los.

Fonte: https://developer.ibm.com/articles/ba-data-becomes-knowledge-3/
7 amazing free SVG background generators - codewithshripal
Tags: webdev, frontend, design
Published: 2022-10-06 11:07:22

####   Original Tweet From  [@codewithshripal](https://twitter.com/codewithshripal)
{% embed https://twitter.com/codewithshripal/status/1577615820343185408 %}
7 amazing free SVG background generators ✨ ![Twitter Image 0](https://pbs.twimg.com/media/FeTRNgGXEAI99qI.jpg) 

### 1️⃣ Haikei App

Create various kinds of awesome SVG backgrounds such as:
- wave, stacked waves, layered waves
- blurry gradient
- symbol/shape scatter
- blob scene
- layered/stacked peaks
and more

https://t.co/HmWvAGlgn2 

### 2️⃣ Pattern Monster

A collection of 248 repeating SVG patterns to use as background.

It also allows us to customize each pattern as per our needs.

https://t.co/7toIioDNLE ![Twitter Image 1](https://pbs.twimg.com/media/FeTRN9DWQAM-2tx.jpg) 

### 3️⃣ FFFuel

It contains a collection of various kinds of SVG generator tools such as:
- fluid gradient
- noise texture
- grainy gradient
- neon glowing shapes
- blurry background
and many more

https://t.co/JILjmmp2pM 

### 4️⃣ VISIWIG Patterns

Generate and customize various kinds of background patterns and copy them as SVG or CSS code.

https://t.co/DxRcihRyyG 

### 5️⃣ BG Jar

It contains tools to generate different kinds of SVG backgrounds such as:
- sprinkle
- meteor
- polygon luminary
- curve lines
and many more

It allows us to download SVG images or copy SVG/CSS code.

https://t.co/xby7R40q51 ![Twitter Image 2](https://pbs.twimg.com/media/FeTROMiWYAIeZ-N.jpg) 

### 6️⃣ Hero Patterns

A huge collection of repeating SVG patterns to use as background.

Allows us to directly copy CSS code containing the SVG background image or download the SVG image separately.

https://t.co/hCKU1SAtnt ![Twitter Image 3](https://pbs.twimg.com/media/FeTROdYXgAQxmb8.jpg) 

### 7️⃣ SVG Backgrounds:

Create beautiful SVG backgrounds with different patterns.

This website also gives controls to customize the backgrounds.

https://t.co/jRNzKP9Yxg 

Thanks for checking this out.

Follow [@codewithshripal](https://twitter.com/codewithshripal) for more such threads on web development.

Retweet/like the first tweet of the thread to help spread the word.

https://t.co/6sdzPsf8ZY 



###### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
Explaining Software Testing To My 5year Old
Tags: career, beginners, theqagirl, testing
Published: 2022-10-06 10:49:20

Imagine you’re cooking for a party/friends, you’ll want the food to come out nice and tasty. You would also want to taste the food at different points just to check if all the ingredients are properly mixed together and in the right proportion. This act of tasting is not because you are a poor cook, rather, you want your friends to have an enjoyable meal.

If you don’t taste your food and check that all the ingredients mix nicely and your friends find something wrong with the food, they'll not enjoy the food and they’ll think you’re a bad cook too

This is what software testing looks like and why it's important

Software testing is checking to find what is known or unknown in your software so that users wouldn’t find these things. 


Okay, DEV, you're not a 5year old but maybe an enthusiast, so let's cook.

Software is a piece of code/ program designed to do something specific 
Let's call it a type of food. (Insert your favorite food here)
For example, The app on your phone is software.

Now there are so many things that go into building a software/ product, depending on what you are trying to achieve (requirement)

Testing is checking to find something that is known or unknown. The way you taste and check that the meal is ready, good, and will be enjoyable when served.

Since we are talking about Software Testing, let's define it simply

Software Testing is all the activities involved in ensuring that a software product meets customers' expected results and is defect-free.

Let's explain some keywords

**Activities**: Activities in software testing involve, checking, verifying, validating, documenting, retesting, comparing, calculating, etc. 

**Expected Result**: These are expectations, but not just expectations, they are defined expectations (also called requirements) 

Just as you expect a bank application to allow you to transfer money and check your account balance. These expectations are usually defined even before building that bank application at all

**Defect**: is any abnormality or a deviation from the requirement

So technically speaking, (and since you're not 5)

Software Testing is a process that consists of all test life cycle activities like static(verification) and dynamic(validation)testing concerned with planning, preparation, and evaluation of software products to determine that the software products satisfy customers' requirements and are fit for customers' use. Software Testing is done to find software defects or failures before users find them.

(I Know that's a lot of grammar)

What I'm simply saying is whenever you're cooking, think of it like you're building a product, every time you taste it, that's you testing it.


You can read more on software testing here: [(https://www.ibm.com/topics/software-testing#:~:text=Software%20testing%20follows%20a%20common,be%20enough%20for%20small%20builds.)]
[(https://www.testim.io/blog/software-testing-basics/)]
[(https://www.guru99.com/software-testing-introduction-importance.html)]
The Duolingo Drag and Drop Quiz component.
Tags: react, nextjs, tailwindcss, javascript
Published: 2022-10-06 10:40:34

![website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvlho0p00gl4mv1b1d0t.gif)

I wanted to learn the react drag-and-drop library, so I made the drag and drop style quiz question that Duolingo uses. 

The website uses:
- react-dnd (implements drag and drop)
- tailwindcss (used for styling)

Find the hosted page here : [Website](https://illustrious-hummingbird-3843c3.netlify.app/)

Find the code here: [GitHub](https://github.com/ChinmayMhatre/Unolingo)
SEO Keyword Research Tools - adcrookes
Tags: webdev, seo, techtips
Published: 2022-10-06 10:26:05

####   Original Tweet From  [@adcrookes](https://twitter.com/adcrookes)
{% embed https://twitter.com/adcrookes/status/1577649333410873344 %}
📂 SEO Keyword Research Tools
      ∟📂 LowFruits
      ∟📂 Ahrefs
      ∟📂 Semrush
      ∟📂 Ubersuggest
      ∟📂 AnswerThePublic

Here's how to find long-tail keywords...
🧵(1/2) ![Twitter Image 0](https://pbs.twimg.com/media/FeTvbssX0AAzfV0.png) 

I've started using LowFruits to find new long-tail keywords for various niches. I'm really impressed with the SEO tool.

[https://lowfruits.io/?via=adam-crookes](https://lowfruits.io/?via=adam-crookes)

🧵(2/2) 



##### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
Asking for Feedback: Self-hosted open source tool for API Testing and Monitoring
Tags: showdev, api, help, programming
Published: 2022-10-06 10:22:19

Hi guys, this is Mish and Basti.
We are working on the fully automated creation of API tests.

- **URL:** [stepci.com](stepci.com)

- **Purpose:** We are currently building a tool that lets you test, monitor and secure APIs. It works programming-language independent and for different API paradigms (REST, GraphQL, XML). The Command Line Interface and test runner are open source: [https://github.com/stepci](https://github.com/stepci)
The next step is to completely take over the REST-API testing process by generating and running tests automatically from your Swagger Doc.

- **Technologies Used:** Typescript, Website: Nuxt 3, 
Hosting: Fly.io, GitHub Actions for Docker Images

- **Feedback Requested:** Please give us critical feedback about our respositories and our plan and project in general.

Is it ok to ask you guys to leave us a star in github if you like what we are working on? ⭐

Thanks in advance for your opinion!
What is a dispatch console?
Tags: market, researc
Published: 2022-10-06 10:18:09

Dispatch consoles provide a vital link between dispatchers and field personnel, helping to coordinate operations, monitor the safety of personnel and respond to emergencies.

To Know More :(https://www.grandviewresearch.com/industry-analysis/dispatch-console-market-report/request/rs1/?utm_source=dev&utm_medium=referral&utm_campaign=swapnil-s_ict_06-oct-22&utm_term=dispatch-console-market-report&utm_content=request_sample)