teleren/devto huggingface dataset:
Creating a Provider to share state between components in React
Tags: react, javascript, webdev, tutorial
Published: 2022-02-19 19:57:02

# Step 1: Create a new component to define your Provider and Consumer
In this step we are going to define a custom provider and consumer. We export two things here. 

First we export CustomProvider, we will use this to wrap our application at the root of our component stack. Within this component we define our state. Its important we pass both `customValue` and `setCustomValue` in the value attribute of our provider so we can both access the value AND set the value from within child components.

Secondly, we define the function `useCustom` which will provide a clean way to consume our state from child components.
```
import React, { useContext, useState } from 'react'

const CustomContext = React.createContext();

export function CustomProvider({ children }) {

	const [ customValue, setCustomValue ] = useState(false);

	return (
		<CustomContext.Provider
			value={{
				customValue, setCustomValue
			}}
		>
			{ children }	
		</AboutToggleStatusContext.Provider>
	)
}

export function useCustom() {
	return useContext(AboutToggleStatusContext)
}
```

# Step 2: Wrap the root of your component stack with our new CustomProvider component
```
...
import { CustomProvider } from './components/CustomContext'

ReactDOM.render(
	<CustomProvider>
		<App />
	</CustomProvider>,
	document.getElementById('root')
);
```

# Step 3: Consume our state from any child component of our provider
Now that we are wrapping the base of our application with our `CustomProvider` we can access the state we defined in `CustomContext` using the function we defined `useCustom`. 

```
import { useCustom } from '../components/CustomContext'

export default function App() {
	const { customValue, setCustomValue } = useCustom();
	
	return (<>		
		Custom Value = { customValue ? 'True' : 'False' }
		<br/>
		<button onClick={() => setCustomValue(!customValue)}>
			Toggle Custom Value
		</button>
	</>)
}
```

Thats it we're done! We can now access and update the value we defined `customValue` from within any child component of our provider and the state will be updated accross the rest of our app.
NumberFormatter - PHP
Tags: php, laravel, webdev, programming
Published: 2022-02-19 19:50:29

Today we will talk about an old feature of php that appeared in version 5.3.0 in converting numbers into different languages ​​​​depending on the country and is coordinated with commas and periods. I found this wonderful information in the source https://www.youtube.com/watch?v=O9Bk4mNjXZg

```php
<?php

function getFormattedNumber(
    $value,
    $locale = 'ar_EG',
    $style = NumberFormatter::DECIMAL,
    $precision = 2,
    $groupingUsed = true,
    $currencyCode = 'EGP',
) {
    $formatter = new NumberFormatter($locale, $style);
    $formatter->setAttribute(NumberFormatter::FRACTION_DIGITS, $precision);
    $formatter->setAttribute(NumberFormatter::GROUPING_USED, $groupingUsed);
    if ($style == NumberFormatter::CURRENCY) {
        $formatter->setTextAttribute(NumberFormatter::CURRENCY_CODE, $currencyCode);
    }

    return $formatter->format($value);
}

echo getFormattedNumber(12345678.9); //١٢٬٣٤٥٬٦٧٨٫٩٠

echo getFormattedNumber(
    value: 12345678.9,
    locale: 'pt_BR'
); //12.345.678,90

echo getFormattedNumber(
    value: 12345678.9,
    locale: 'fr_FR'
); //12 345 678,90

echo getFormattedNumber(
    value: 12345678.90,
    precision: 1
); //١٢٬٣٤٥٬٦٧٨٫٩

echo getFormattedNumber(
    value: 12345678.90,
    groupingUsed: false
); //١٢٣٤٥٦٧٨٫٩٠

echo getFormattedNumber(
    value: 12345678.90,
    locale: 'fr_FR',
    style: NumberFormatter::CURRENCY,
    currencyCode: 'EUR',
); //12 345 678,90 €

echo getFormattedNumber(
    value: 12345678,
    style: NumberFormatter::PADDING_POSITION,
    precision: 3
); //١٢٫٣٤٦ مليون

echo getFormattedNumber(
    value: 12345678,
    style: NumberFormatter::SPELLOUT
); //إثنا عشر مليون و ثلاثة مائة و خمسة و أربعون ألف و ستة مائة و ثمانية و سبعون

echo getFormattedNumber(
    value: 0.123,
    style: NumberFormatter::PERCENT,
    precision: 1
); //١٢٫٣٪

```


If you want to dig deeper and enjoy the code, please visit these resources https://www.php.net/manual/en/class.numberformatter.php
https://www.xe.com/iso4217.php
https://gist.github.com/PovilasKorop/e099159e1d513cfdf39d13c24e22992b
https://stackoverflow.com/questions/30554177/fatal-error-class-numberformatter-not-found
I Failed...
Tags: javascript, beginners, programming, codenewbie
Published: 2022-02-19 19:12:00

Today I learned in one of my most recent Project submissions I have done for my Bootcamp for Javascript I was awarded a fail.

2 marks away from a pass...
SO.. What does this mean for me?

Should I give up? Should I pack it in and try and go back to what I know doing customer service or doing IT support??

No.. I don't want to do that. I still want to be a developer, I still want to push myself and try to reach new heights.. I still want to be able to improve myself in this industry and be able to build products and services that can be of use to people. And let's be real I still want to change careers so I can afford a better life for myself and my family.

I thought I would be crushed my grade for failing in the project I submitted.. Hell.. I believe I even failed my most recent project I submitted because of the time constraints put on me to learn all the material within one month and start a project within one week to finish. But you know what... It's all good. EVEN if I do fail, I will just have to pick myself up and try submitting the project again.

The only thing I can do is improve on what I failed on and try and go further! In the end these projects Im doing for the boot camp are all for my benefit and no-one elses. SO I have to keep believing in myself and keep trying to finish this journey that I pushed myself to start. I have to finish this story I started because I owe it to myself to be able to change my life and go for what I want and need!

I hope for everyone feeling down out there about not getting that job, not getting that pass grade, not getting that call back from a potential client that this Post can inspire them to not give up and keep pushing!

You deserve it and you got this! 👊🏿

Follow me on Twitter: @CodezMikazuki

Thanks for reading,
Malcz/Mika
My first-week experience in TaskForce 5.0
Tags: codeofafrica, awesomitylab, taskforce
Published: 2022-02-19 19:03:51

I have learned and experienced so many new things in such a short period, and time has gone by so quickly.

The depth and detail of what we are learning are far beyond any other experience I’ve ever had. 16 personalities section was interesting because it’s a time dedicated to learning your personality by answering a few questions. I was surprised by how accurate the results were and I was shocked because it was like a person was looking inside my mind and telling me what they saw. I was also introduced to codewars challenges which were challenging but helpful to sharpening my problem-solving skills.


![User Stories](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytb8djq3ju7u29ub8cs0.png)
This week was mostly concerned with working with user stories and this was my favorite section because my project management skill has improved significantly. The agile process helped me understand a project not only from a technical perspective but also in business value and its impact on the community. I can understand and write good user stories and allocate them with their acceptance criteria. I learned how the agile process is of benefit to higher product quality, greater client satisfaction, risk reduction, and better project control.

![Remote working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sarxj3vitc4ekwas7i8x.png)
My remote working and presentation skills have improved during this week. I’ve learned the best practices of a virtual meeting and how to prepare and deliver a good presentation. I was also introduced to a new collaborative tool called miro, which is an online whiteboard that helps distributed teams to work effectively.

To round off this week, we had our first presentation and we got to meet with Awesomity lab’s team. We proceed with having fun where we played football and ping pong. it was an amazing experience and made me realize how good it is CoA and Awesomity lab’s culture.

Time has been flying by and it’s hard to believe that we have been on boot camp for a week already. Life at boot camp is a great experience that I plan to make the most out of.

My experience so far is not limited to the above mentioned, they are many. I can only describe my experience so far as impressive.
NightSwitcher
Tags: dotnet, wpf, opensource, xaml
Published: 2022-02-19 18:56:04

Hi all, NightSwitcher is the result of my free time in the week. Basically, I was lacking the functionality to quickly change themes in applications, so after doing some research, I decided to write a system tray application that could extend Windows functionality.

It's a simple app where you can toggle the current app theme with some extras like auto-turn on.

Key functionalities:

- Double click the icon to change the theme
- Manually change the light / dark mode of the application with a simple switch
- Auto-turn - adjust the time when dark mode is to turn on and when to turn off
- Run on startup

Give it a try and feel free to contribute!

Here you can find it: https://github.com/oscyp/NightSwitcher

_Note: Apart from the fact that the application is written in .NET 6, it only works on Windows._
Day 26/100 Java
Tags: 100daysofcode
Published: 2022-02-19 18:49:01

Making sure I'm moving forward.

Day 26/100

**Language:**
JAVA

**Time Period Spent:**
2 hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Today's Learning:**
- Linked List
- Recapping on Polymorphism
- Recapping on Inheritance
- Recapping on Composition
- Recapping on Encapsulation

**Additional Notes:**
Today was spent recapping on some of the prior topics, making sure that I can comfortably move along and remember all learnt prior. This has helped as I felt somewhat rusty getting into it but quickly got into the groove of it. Tomorrow I will continue with Linked Lists. It's quite intriguing on how these work within Java, and evermore excited to learn more on the topic.
#36 - Sum of Multiples CodeWars Kata (8 kyu)
Published: 2022-02-19 18:46:15

##Instructions
**Your Job**
Find the sum of all multiples of n below m

**Keep in Mind**
n and m are natural numbers (positive integers)
m is excluded from the multiples

**Examples**

> sumMul(2, 9)   ==> 2 + 4 + 6 + 8 = 20
> sumMul(3, 13)  ==> 3 + 6 + 9 + 12 = 30
> sumMul(4, 123) ==> 4 + 8 + 12 + ... = 1860
> sumMul(4, -7)  ==> "INVALID"

---

##My solution:

```javascript
function sumMul(n,m){
  let r = 0;
  for(let i = 1; i*n<m; i++){
    r+=i*n
  }
  return r > 0 ? r : 'INVALID'
}
```

---

##Explanation
I made an r variable, in which I'll store the sum result.

> let r = 0;

Then I used a for loop that will iterate until the result of i*n is smaller than "m".
Inside of this loop I'll change the value of "r" to the sum of "r" plus i*n

> for(let i = 1; i*n<m; i++){
>     r+=i*n
> }

At the end if "r" is more than 0, I'll return r, else I'll return 'INVALID'
> return r > 0 ? r : 'INVALID'



---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/57241e0f440cd279b5000829)
Air: Live reload on Golang applications
Tags: go, beginners
Published: 2022-02-19 18:43:46

Go is a programming language with advanced features and clean syntax. It has a robust and well-documented common library, and has focus on good software engineering and principles.

Although Go is a great language, there's one downside: it needs to be recompiled every time after a single line change.

So, to make our lives easier in this post we're gonna learn how to use Air as our live reload.


---

## App

Init with Go mod

`go mod init helloworld`

Creating App Go file

```
package main

import (
    "fmt"
    "net/http"
)

func main() {
    port := 3000
    fmt.Println("Starting Server on port", port)

    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        w.Write([]byte("Hello, World"))
    })
    http.ListenAndServe(":3000", nil)
}
```


## Air:

Installing Air.

`go get -u github.com/cosmtrek/air`

Air configuration file

`air init`

Starting Air.

`air`

You'll have the following result:

![Air running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuw93ob8jfntfdnuj146.png)

Now after any file change Air will reload your app automatically.

![Air reloading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cdzbee5kmal3hy0uuts.png)

---

## Air and Docker

First we need to create a Dockerfile

```
# Dockerfile

FROM cosmtrek/air

RUN mkdir -p /app/dist
COPY ./ /app/
WORKDIR /app/

RUN go get -d -v ./...
RUN go install -v ./...

CMD ["air"]
```

Now we need to create a docker-compose to make our life easier

```
# docker-compose.yml

version: '3.7'
services:
  app:
    build: .
    ports:
      - '3000:3000'
    volumes:
      - ./:/app/
```

Now you just need to run `docker-compose up`

And you'll have the following result:


![Air in docker container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajycxdq1fjn40l9p5a5w.png)


References:

- Air: https://github.com/cosmtrek/air
- Golang-book: https://www.golang-book.com/books/intro/1
Rust Project for Beginner: Natural Language Detector
Tags: rust, beginners, tutorial, programming
Published: 2022-02-19 18:38:06

Rust is a lovely language, the more you learn it the more you love it. In this tutorial we are going to build a simple application that have the capacity to detect over 80 languages.
This tutorial showcase the following concept in rust:

- Using external crate in our project
- Creating functions in rust
- Using of macros
- Calling functions in rust

To get starter open your terminal and run the command:`cargo init langdector` If you don't have rust installed on your system, please head over to the official [documentation](https://www.rust-lang.org/).

Open the generated project in your vscode or your favourite IDE. Edit the cargo.toml file by adding this dependency:`whatlang = "0.13.0`.


After adding the external create, we can proceed to our main.rs and begin applying the logic.

We are going to create a function called `what_language`. With the following codes: 

```
//calling the external crate
use whatlang::{detect, Lang, Script};

//creating a function
fn what_language(mut x: String) {
    let text = &x;
//using .unwrap() for exception handling
    let info = detect(text).unwrap();
//println! is one of the major macros used in rust
    println!("Language type {}", info.lang());
    println!("Language Script {}", info.script());
    println!("System confidence {}", info.confidence());
    println!("System reliability {}", info.is_reliable());
    
}

fn main() {
//creating string alice
    let alice = String::from(
        "Ĉu vi ne volas eklerni Esperanton? Bonvolu! Estas unu de la plej bonaj aferoj!",
    );
//calling the function
    what_language(alice);
}

```
The output : 

```
Language type Esperanto
Language Script Latin
System confidence 1
System reliability true
```
The comments explained each logic._ &x_ obeys the concept of ownership and borrowing.

You can try to run the code :)

Head over to [github](https://github.com/Michaelin007/Rust-Projects) for the code.
You can follow me of [twitter](https://www.twitter.com/michaelin007) for collaboration.
BC30420 'Sub Main' was not found error in a Windows Form app: Quick Fix.
Published: 2022-02-19 17:57:20

It's safe to say that Visual Basic has become one of the hardest languages to find content about online ever since Microsoft announced that there won't be any more features added to it in .NET CORE/ .NET 5.

> “ Going forward, we do not plan to evolve Visual Basic as a language ” </br>
[.NET Team](https://devblogs.microsoft.com/vbteam/visual-basic-support-planned-for-net-5-0/) 

That explained a lot when I tried to troubleshoot an error I'd gotten and the whole of the internet was almost blank, for an error I'd call trivial and noob level. I've recreated the above error so as to show you how to solve it. Save you time.


![Screenshot (46).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645270019932/_hgc0uASD.png)

Every time I tried the compile and run the project, i got and error that the `Sub Main()`

was not found.
The solution to this is to check that the startup form isn't referencing to an old method. You can find that in your project properties.
1. All you have to do is right-click on your main project in the top-right area of the visual basic working area.

![Screenshot (47).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645270427882/eOSU85D13.png)

2. Scroll to the bottom and click on properties.

![Screenshot (48).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645270525726/8kFgBc-6_.png)

On the new window right at the Startup Project section is where you're going to change from 
Sub Main
 
to the name of your Form.
![Screenshot (49).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645270705624/sM383pFF2.png)
Once you're done, you can exit that tab and re-run your project.

![Screenshot (51).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645270970816/DaOjr644B.png)

 Everything should be working fine and you can notice that the error is gone.

### Conclusion
Every day is a coding challenge. If you feel that the content was inadequate please comment about it or contact me. Keep coding. </br> **Cheers !!**
Code your own charts for your GitHub README.md
Tags: github, markdown, mermaid
Published: 2022-02-19 17:56:17

Have you ever felt like your GitHub README.md missed like a little something?
Felt like your charts made with any other mind map software wasn't accessible enough, hard to edit or heavier to store in your GitHub README.md?

Well, GitHub just added support for [Mermaid](https://mermaid-js.github.io/), and it is going to change your life: basically, it allows you to create charts as simply as that:

```
graph TD
A --> B
A' --> B
B --> C
B --> D
```

Simply nest that code in a code block flavoured in `mermaid` (sorry dev.to editor can't handle nested backticks), and this will result in a graph looking like that, directly in GitHub:
![Simple example chart made with mermaid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuutopjrxreb02geknxe.png)

At [Treezor](https://www.treezor.com/), we use Mermaid in our main front-end monorepo to show the architecture of the project:
![Treezor monorepo architecture, screenshot from GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z55vinmb7i6h3lp29yoq.png)
 
But you can easily chart your [database architecture](https://mermaid-js.github.io/mermaid/#/classDiagram), make a [Gantt Diagram](https://mermaid-js.github.io/mermaid/#/gantt) to show the overall progress of your project, the possibilities are (almost) endless!
Note that I presented that in the context of GitHub markdown, but it also works in GitLab, or even in HTML.

If you liked this article (or not), if you have any question, let me know by leaving a comment or a like, and I'll gladly answer 😉

## About me 🦄

I'm a French front-end and blockchain developer, code lecturer, and entrepreneur. Right now, I'm working at Treezor where I help building a React Native library to help start-ups build a FinTech mobile app in minutes. I am also teaching an introduction class to blockchain at EPITA, one of the top Software Engineering School in France.
Eyes on the prize
Tags: womenintech, softwaredev, prep
Published: 2022-02-19 17:54:58

Growth mindset : Belief that intelligence and talents can be developed. It gives you the freedom to learn, accept criticism, build strengths and abilities. 
Fixed mindset : Belief that intelligence and talents cannot be changed.It gives you a limit onto the person you can grow to be,you lose perseverance and are not open to criticism. 

Have an open mind.
rest parameter in javascript
Tags: javascript, webdev, beginners
Published: 2022-02-19 17:29:16

The rest parameter is introduced in ES6. It allows a function to accept an indefinite number of arguments as an array that is we can call a function with as many arguments as we want and the rest parameter will gather all these arguments into an array.

See the below example to understand how:

Example 1:
```javascript
function testing(...numbers){
       console.log(numbers)
       console.log(numbers[0])
       console.log(numbers[2])
}

testing(2, 16, 7, 4)

//Result 1: [2, 16, 7, 4]
//Result 2: 2
//Result 3: 7
```
The syntax of the rest parameter is just 3 dots followed by the array name. In the above ☝️ example, we do not have to know how many arguments are there in order to define parameters. Rather, we can simply use the rest parameter. Using the rest parameter we can tackle an infinite number of arguments. 

Let's see some more examples:<br/>
Example 2:
```javascript
function testing(a, ...numbers){
       console.log(a)
       console.log(numbers)
}

testing(2, 16, 7, 4)

//Result 1: 2 
//Result 2: [16, 7, 4]
```
In the above example, we can see that the parameter "a" is assigned with 2, and the rest of the arguments are stored in the numbers array.

**NOTE: The rest parameter must always be the last parameter.** The below code will result in an error.
Example 3:
```javascript
function testing(a, ...numbers, b){
       console.log(a)
       console.log(numbers)
       console.log(b)
}

testing(2, 16, 7, 4)

//Error: Uncaught SyntaxError: Rest parameter must be last formal parameter
```
Example 4: Write a function to sum all the arguments provided? Number of arguments are not known.
```javascript
function sumAll(...args) {
  let sum = 0;

  for (let arg of args){
		sum += arg;
	}

  return sum;
}

console.log( sumAll(1) ); 
console.log( sumAll(1, 2) ); 
console.log( sumAll(1, 2, 3) ); 

//Result 1: 1
//Result 2: 3
//Result 3: 6
```
That's all folks. I'll teach spread syntax and destructuring tomorrow.

**If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.**

**I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same..**

**If you love the article follow me on Twitter:** @therajatg

**If you are the Linkedin type, let's connect**: https://www.linkedin.com/in/therajatg/

**Have an awesome day ahead 😀!**
how about verify the data source in a cryptographic way?
Tags: web3, flutter, dfinity, crypto
Published: 2022-02-19 17:12:16

Want to be a web3 dev? 🤔

First think different - how about verify the data source in a cryptographic way...

But why? how? 

🚀Join Astrox Network on Dfinity's IC: https://discord.gg/PavTGqs3rV#flutterdev

😉welcome any dev talk!