teleren/devto huggingface dataset:
useRef vs useState in React
Tags: react, javascript, webdev, beginners
Published: 2022-06-30 20:28:57

When it comes to React, there are two ways that you can manage state in your applications: with the `useState` hook, or with the `useRef` hook. Both have their own advantages and disadvantages, and knowing when to use each one is important for writing well-organized and maintainable React code.

The `useState` hook is a function that takes a single argument, which is the initial state. It returns a pair of values: the current state, and a function that updates the state. The function that updates the state takes a new value, and returns the updated state.

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

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

The `useRef` hook is a function that takes a single argument, which is the initial value. It returns a mutable object with a `.current` property. The `.current` property is initialized to the initial value, and can be updated with the `.current.set()` method.

```jsx
import React, { useRef } from 'react';

function App() {
  const countRef = useRef(0);

  return (
    <div>
      <p>{countRef.current}</p>
      <button onClick={() => countRef.current.set(countRef.current + 1)}>
        Increment
      </button>
    </div>
  );
}
```

There are a few key differences between the `useState` and `useRef` hooks that are important to understand.

The first difference is that the `useState` hook always returns the current state, even if it hasn't changed. This is because the `setState` function creates a new state object, and React uses reference equality to determine if the component should re-render.

On the other hand, the useRef hook only updates the `.current` property of the mutable object that it returns. This means that if the `.current` property hasn't changed, React won't re-render the component.

The second difference is that the `useState` hook is a function, while the `useRef` hook is an object. This means that you can't pass arguments to the `useState` function to update the state. Instead, you must call the function that is returned by `useState`.

The third difference is that the `useState` hook is designed to be used with functional components, while the `useRef` hook can be used with either functional or class-based components.

The fourth difference is that the useState hook is initialized when the component is rendered, while the `useRef` hook is initialized when the component is created. This means that if you need to access the state outside of the render function, you need to use the `useRef` hook.

So, which one should you use? It depends on your needs. If you need to access the state outside of the render function, or you're using a class-based component, use the `useRef` hook. Otherwise, use the `useState` hook.
Remember to rest. There's more to life than code.
Tags: productivity, career
Published: 2022-06-30 20:24:20

I experienced my first major case of burnout this week. All the signs were there but I didn't notice until my supervisor asked me if I'm doing OK. I tend to think I am a rather productive person in general. My schedule of late has been split between piano lessons, work, and learning new things on the side. The only problem was that aside from work, nothing else was fit into a rigid time schedule. 

I would typically wake up, make a pot of coffee and get to work. I choose not to eat lunch because my productivity dips so hard after a meal(red flag #1), so normally I would take a break for lunch, but I would spend it on YouTube or Netflix or something else behind a screen(red flag #2). 

Once I'm done with work it would be a toss up between learning a new technology or piano practice.(red flag #3, lack of a rigid schedule.) and then once I finish whichever task I choose, then I'd make supper, watch  something and sleep.

My supervisor pointed out that my code quality has been going down of late and for me that was weird, because I thought I was doing a good job, but in hindsight, I started to realize that small bugs would really get to me. I'd make small errors and get really frustrated which led to more errors and just spiral out of control. This made work to become more of a chore than the enjoyable job I  know it to be. I should have seen the signs, but it's easy not to when you're in it. 

So I took a couple days off and started trying to figure out where it all went wrong. Spoiler alert, I had no schedule. I had a gray mix of things I tend to do, but no specific format. However, I now work on a very rigid schedule, and it has honestly helped me. I schedule my sleep, my gaming time, work hours, piano lessons etc etc. I also make sure to eat more regularly(We joke about being powered by coffee, but coffee is not food.). Doesn't have to be a full blown meal, but at least have a salad or something. Similarly, less screen time is important. Taking time away from being behind a screen is why I decided to pick up piano. As a gamer and a programmer, there are days I spend >12 hours behind a screen and the migraines that follow are not fun. Repetition may seem dull, but it helps the mind adjust accordingly. Predictability in my schedule is what I am after for now. Plus, I added in a run every morning to see the sun and at least grab some fresh air. I feel way better this week than I did last week, and my quality of work is back up to par.
Alpine data methods and binding `this` keyword
Published: 2022-06-30 20:05:07

Alpine docs says that you can access magic properties with the this keyword. But how do you access the this keyword from a external nested method/function.

The solution: Use Arrow syntax

check out this simple demo for plupload 

{% embed https://codesandbox.io/embed/black-cache-sytlzk?fontsize=14&hidenavigation=1&theme=dark %}
100 Days of Coding Challenge.
Tags: 100daysofcode
Published: 2022-06-30 19:57:40

End semesters are over now and The placement season are going on, so now is the time to stay consistent towards coding, learning and revising data-structures and algorithmic concepts and applying those concepts to grab some good opportunities.
Goal is to get placed in some good tech companies.
So...
Hello I'm Jyoti an enthusiastic coder & developer. I've decided to code for the next 100 days. So yes, I am accepting the 100 days of coding challenge and I am announcing it publicly so that I'll not break my consistency.

**Things which I'll be sharing on daily basis:**

- Day-wise TUF-SDE [Sheet](https://takeuforward.org/interviews/strivers-sde-sheet-top-coding-interview-problems/) update.

- Live and Virtual contests experience update.

- Apart from DSA I'll be sharing my development learnings and projects too over here.

- Overall I'll be trying to share my whole coding journey on daily basis for the next 100days.
 
👩‍💻 Now I am very excited to update my daily progress here.📈

Also I'll be sharing my daily progress on GitHub too

- Here is my GitHub account: [GitHub_Link](https://github.com/JyotiKumari2)

- Here is my CrackYourPlacement Repo [Link](https://github.com/JyotiKumari2/Crack-Your-Placement)

**Connect with me:**
If you also want to join me in Crack-Your-Placement journey for next 100 days then feel free to connect with me.
[LinkedIn](https://www.linkedin.com/in/jyoti-kumari-34a4a01ab/)
[Instagram](https://www.instagram.com/jyotikm1801/)

Hoping at the end of this 100 days of coding challenge I'll be having some good opportunities in my hand and with this I'm publishing this post. 

**Happy Coding! :)**
Utility bill payment and airtime topup with Golang
Tags: go, tutorial, programming, opensource
Published: 2022-06-30 19:20:00

Hello **devs**, this article is for developers who wishes to have these features in their projects:

- Airtime topup
- Buy data
- Utility bills payment
- Convert airtime to cash

With this package you can integrate these features into your project with some easy steps.

I know how difficult it can be to get API's to achieve these which is why I have taken time to create a Go library that handles all these. The library utilizes a 3rd party API provided by [bingpay](https://bingpay.ng/)
Bingpay is a one app for everything platform which allow for Cheap Airtime & Data Topup, Send & Recieve Cash, Pay Utility Bills, Purchase Giftcards, Trade Airtime, Paypal & Giftcards and International Topup. All these features are available from within [bingpay](https://bingpay.ng/) although the API which is made public have only some features available.

Now lets get right into the interesting stuffs. 
### Buy Airtime
Use this to perform airtime purchase.
You get 2% discount on every airtime purchase instantly.

```go
package main

import (
	"fmt"
	bingpay "github.com/iqquee/bingpay-go"
	"github.com/iqquee/bingpay-go/airtime"
)

func main() {
	bingpay.Token = "your bingpay api secret key" // to add your secret key for the api requests 

	phone := "08000000000" // Phone number to recharge.
	amount := 100 // Amount to recharge. e.g 100 for 100 naria topup
	network_id := 0 // Network (As seen in the all-networks endpoint).
	response, status, err := airtime.BuyAirtime(phone,amount,network_id)
	if err != nil {
		fmt.Println(err)
	}
	
	fmt.Println(status)
	fmt.Println(response)
}
```

A lot of other methods are available in [github.com/iqquee/bingpay-go](https://github.com/iqquee/bingpay-go). You can visit [github.com/iqquee/bingpay-go](https://github.com/iqquee/bingpay-go) for more example code for each methods. This package have been properly documented to allow for easy use of it and as such every methods in this package have an example code to it.
Liman - Postgresql Connection Hatası Çözümü
Tags: postgres, liman, connection
Published: 2022-06-30 19:18:54

![Liman go servisinde bir sorun oluştu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91gpwjb91yovc9fl9l3b.png)

Eğer yukarıdaki hatayı alıyorsanız Liman postgresql db'ye erişemiyor olabilir.

Bunun çözümü için aşağıdaki komut ile liman'nın environment dosyası düzenlenir:
```
sudo nano /liman/server/.env
```

Dosya içerisinde aşağıdaki kısımlar doğru girilmelidir:
```
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=liman
DB_USERNAME=liman
DB_PASSWORD=
```

- **DB_CONNECTION** Kısmına pgsql yazılmalıdır.
- **DB_HOST** Kısmına postgresql'in bulunduğu ip adresi yazılmalıdır.
- **DB_PORT** Kısmına postgresql'in dinleme yaptığı port numarası (default olarak 5432'dir) verilmelidir.
- **DB_DATABASE** Kısmına postgresql üzerindeki veritabanı ismi verilmelidir. (Liman kurulurken arkaplanda postgresql içerisinde "liman" isimli bir veritabanı oluşturulur.)
- **DB_USERNAME** Kısmına postgresql'e bağlantı atılırken kullanılacak kullanıcı (ve aynı zamanda bir önceki seçenekte belirtilen veritabanının owner'lığına sahip olan kullanıcı) belirtilir.
- **DB_PASSWORD** Kısmına tanımlanan postgresql kullanıcısının parolası verilir.

# DİKKAT EDİLMESİ GEREKEN HUSUS 
Burada dikkat edilmesi gerekilen kısım ".env" dosyası içerisinde "#" işareti ile başlayan bir satır (yani yorum satırı) bulundurmamaktır. Aksi taktirde .env dosyası çalışmaz hale gelebilir bu da liman'nın düzgün çalışmayacağı anlamına gelmektedir.
Scan and detect your leaky APIs
Published: 2022-06-30 19:11:37

The purpose of this article is to show AppSec/developers how to get started with API security scanning tool EthicalCheck and detect your leaking APIs.
Why API leaks are a common problem. Most web and mobile are security tested at some point but APIs hardly get any attention. This means you may have leaking APIs that are live and in production.
Detecting your leaking API endpoints is very simple if you’re using the free tool. All you need is your API OpenAPI Specification/Swagger URL and get instant report.

EthicalCheck - Visit the GitHub page to run your free scan: https://apisec-inc.github.io/pentest/
Dry Bar Cocktails
Tags: javascript, css, programming, webdev
Published: 2022-06-30 19:03:24

#About Dry Bar
Dry Bar Cocktails is an apllication that allows you to select/customize the cocktail of your choice at the joint and be served immediately The application allows you to select from a variate of cocktails that we serve.
[Live link](https://mbolonzi-design.github.io/phase-1-project/)

###How to contribute
To fix a bug or enhance an existing module, follow these steps:

Fork the repository
Create a new branch (git checkout -b improve-feature)
Make the appropriate changes in the files
Add changes to reflect the changes made
Commit your changes (git commit -am 'Improve feature')
Push to the branch (git push origin improve-feature)
Create a Pull Request

###Fetch function
```
  function getData() {
    const options = {
        method: 'GET',
        headers: {
            'X-RapidAPI-Host': 'the-cocktail-db.p.rapidapi.com',
            'X-RapidAPI-Key': 'fedf1dd524msh1cf534605192167p136515jsn5200bf26f1a5'
        }
    };

    const response= fetch('https://the-cocktail-db.p.rapidapi.com/popular.php', options)
        .then(response => response.json())
        .then(response => response)
        .catch(err => console.error(err));
    return response
}
```
Developer Day 2022: Registrations Open!
Tags: programming, showdev, security, api
Published: 2022-06-30 19:01:01

### Learn why the login box alone just won't cut it – and how to move beyond it – as life and development continue to evolve.

### <br>

Join us for Developer Days 2022 and discover life beyond passwords. Registrations are open for our Seattle, Sydney, London, and Berlin. Save your seat today!


<table>
  <tr>
   <td><img src="https://images.ctfassets.net/23aumh6u8s0i/1nkZ0XesAUpHE0oIKVIgIB/fc02efba5f1a93f97e33ad24b2ebd91c/01.png" width="" alt="alt_text" title="image_tooltip"></td>
   <td><img src="https://images.ctfassets.net/23aumh6u8s0i/5LivuzVqbtafwH02otDCH3/40282613c247bc618ecf51a6ad5cd971/02.png" width="" alt="alt_text" title="image_tooltip"></td>
   <td><img src="https://images.ctfassets.net/23aumh6u8s0i/3JJNwJHTMr3ls6scSAlZRW/1028eb4a16d72a9bbce6b31bc075e8bb/04.png" width="" alt="alt_text" title="image_tooltip"></td>
   <td><img src="https://images.ctfassets.net/23aumh6u8s0i/3as5x6Y9szXH7RtUlpbwlq/474ef5b1162728a31885314052951cd8/03.png" width="" alt="alt_text" title="image_tooltip"></td> 
  </tr>
  <tr>
   <td><b>Seattle</b><br>Wednesday<br>August 24, 2022<br><a href="http://regionalevents.okta.com/DeveloperDaySeattle2022">Register now for Seattle</a></td>
   <td><b>Sydney</b><br>Tuesday<br>September 6, 2022<br><a href="http://regionalevents.okta.com/DeveloperDaySydney2022">Register now for Sydney</a></td>
   <td><b>London</b><br>Thursday<br>September 29, 2022<br><a href="http://regionalevents.okta.com/DeveloperDayLondon2022">Register now for London</a></td>
   <td><b>Berlin</b><br>Wednesday<br>October 5, 2022<br><a href="https://regionalevents.okta.com/DeveloperDayBerlin2022">Register now for Berlin </a></td>
  </tr>
</table>


<br>

As technology evolves, life and development have more complex demands than a simple login box can meet. Learn modern techniques for building more secure apps from industry and community leaders, and try them out in our hands-on interactive labs. Auth0 technical experts will be on-site to support one-on-one architecture reviews and offer opportunities to make new connections between sessions.


![Developer Day 2022](https://images.ctfassets.net/23aumh6u8s0i/tJ507YxFgmC38a6GBVtsI/875f64920ba57e637afc6ee9a966ea48/dd2022.jpg)

For further information, visit our [Developer Day site](https://regionalevents.okta.com/DeveloperDays2022).
Does my number look big in this?
Tags: programming, python, codewars
Published: 2022-06-30 18:47:25

A Narcissistic Number is a positive number which is the sum of its own digits, each raised to the power of the number of digits in a given base. In this Kata, we will restrict ourselves to decimal (base 10).

For example, take 153 (3 digits), which is narcisstic:

    1^3 + 5^3 + 3^3 = 1 + 125 + 27 = 153
and 1652 (4 digits), which isn't:

    1^4 + 6^4 + 5^4 + 2^4 = 1 + 1296 + 625 + 16 = 1938
The Challenge:

Your code must return true or false (not 'true' and 'false') depending upon whether the given number is a Narcissistic number in base 10. This may be True and False in your language, e.g. PHP.

Error checking for text strings or other invalid inputs is not required, only valid positive non-zero integers will be passed into the function.

Solution- ###Python   

```
def narcissistic( value ):
    return value == sum([int(n) ** len(str(value)) for n in str(value)])
```
An app to compute the coefficients of a function development in a spherical harmonics convergent series
Tags: cpp, programming
Published: 2022-06-30 18:40:44

Hello everybody,

I want to share with you a small app / program I developed some time ago (and which I am maintaining) which can be used to compute the coefficients of a function development in a spherical harmonics convergent series . Spherical harmonics are a set of functions used to find a solution of the Schroedinger equation for the hydrogen atom for example, in quantum physics. The coefficients computed to find a function development (which function depends on polar and azimuthal angle in spherical coordinates) are used in many field of physics.

I decided for fun to develope a program to compute them. Tell me what do you think and of course any hint is more than welcome!

You are free to send a pull request or open issues if you want, I'll feature you in the main README file, directly in the contributor list.

If you like the repo, don't forget to leave a star! Thanks.

Repository link: https://github.com/JustWhit3/SAFD-algorithm
Normalization
Published: 2022-06-30 18:40:12

Normalization is a common data pre-processing technique that is applied to scale or transform the data to make sure there's an equal learning contribution from each feature. For example, each pixel in the grayscale images have a value between 0 and 255, which are features. If one pixel value is 17 and another pixel is 197. There will be an uneven distribution of the pixel importance, because the higher pixel volumes will deviate the learning. Normalization changes the range of your data, without distorting its distintion among out feature. This pre-processing is to avoid:

-  A reduction of the prediction accuracy
-  Difficulty for the model to learn
-  Unfavorable distribution of the feature data ranges
Typescript Numeric Literal Types How To X * Y (Multiplication)
Tags: webdev, tutorial, programming, typescript
Published: 2022-06-30 18:32:38

---
series: Typescript Basic Arithmetic with Numeric Literal Types
---

We have seen how [subtraction](https://dev.to/tylim88/typescript-two-numeric-literal-types-subtraction-1771) works

now can we do multiplication?

yes we can, and this is how you do it, method 1:

```ts
type CreateArrayWithLengthX<
    LENGTH extends number,
    ACC extends unknown[] = [],
> = ACC['length'] extends LENGTH
    ? ACC
    : CreateArrayWithLengthX<LENGTH, [...ACC,1]>

type Multiplication<X extends number, Y extends number, Z extends number[] = []> = 
    [...CreateArrayWithLengthX<Y>]['length'] extends Z['length']
    ?[]
    :[...CreateArrayWithLengthX<X>, ...Multiplication<X,Y,[1,...Z]>]

type A = Multiplication<526,19>['length'] // 9994
type B = Multiplication<1,48>['length'] // error if 2nd interger exceed 47
```

[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAwgThAhsCBBOdEgOoEtgAWAMhAHYDmhAGgDwBQUjURAogHIDiAKgBJQQAPFKQAmAZyikArgFsARhDgAaBk1QwY-IWXFQppANakA9gHdSAbQC6UALxRrKgHx2o6mBYDkAGzKUCnjaCwrqsnLyqjAD8bhqRUABcsAjIaBhYeIQkFNQ0Ydw8Sg4AdKXuSgCMVk50dKCQUACyUt7AuGDeuADGyLjGpDRUWiES0vKKRQCawzqjsgrKUABaM6Jz43DWrtYu9vEWpcXwSCjomDj4xH65k05WXr45AUHaa8sP18-xUdbxCQelY6pM4ZS7Zfy0KhOIqHZqtdqdHptfqDJSTJQWCpKQ5LapWWr1aCoVxwtodbq9FEAVgATAA2SoATicHyegSgAHoOVBGbyACx1cDQABCJJaZMRlIGWL5AA4WT5PuyufwMMY4FBcAAzKA00Sa0goODkRRaLoQCAiKB8gDstSAA)

method 2:

```ts
type CreateArrayWithLengthX<
    LENGTH extends number,
    ACC extends unknown[] = [],
> = ACC['length'] extends LENGTH
    ? ACC
    : CreateArrayWithLengthX<LENGTH, [...ACC,1]>

type Multiplication<X extends number, Y extends number, Z extends number[] = [], V extends unknown[] = []> = 
    [...CreateArrayWithLengthX<Y>]['length'] extends Z['length']
    ? V['length']
    : Multiplication<X,Y,[1,...Z],[...CreateArrayWithLengthX<X>,...V]>

type A= Multiplication<19,526> // 9994
type B= Multiplication<526,19> // 9994
```
limitation: the product cannot exceed 9999 because the max tuple size is 9999

[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAwgThAhsCBBOdEgOoEtgAWAMhAHYDmhAGgDwBQUjURAogHIDiAKgBJQQAPFKQAmAZyikArgFsARhDgAaBk1QwY-IWXFQppANakA9gHdSAbQC6UALxRrKgHx2o6mBYDkAGzKUCnjaCwrqsnLyqjAD8bhqRUABcsAjIaBhYeIQkFNQ0Ydw8Sg4AdKXuSgCMVk50dKCQUACyUt7AuGDeuADGyLjGpDRUWiES0vKKRQCawzqjsgrKUABaM6Jz43DWro5QAGqruvpGZpY29tYu9vEWpcXwSCjomDj4xH65k05WXr45AUHaNbLH7vf7xGK7EF-QLxJLNVrtTo9Nr9QZKSZKCwVJS3JZWTG3e6pJ4ZV7Zfy0KhOHGlXbVWr1aCoezwtodbq9VEVACcSgArAAmABsLgA9KKoNypQAWOrgaAAIRZLTZSM5A0FQsq3LFEql3NlQA)

2nd method is better because the 1st method 2nd integer cannot be larger than 47 (method 1 Multiplication is not [tail recursion](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#tail-recursion-elimination-on-conditional-types), but still I was expecting it to error at 50, not 48, hmm...)
Automating job application
Published: 2022-06-30 18:20:35

Hi,

I've been applying to lot of jobs lately in the specific geography but failing to so because of lots of manual work. I'm hardly able to apply to 3-4 jobs daily. 

Is there a tool to automate this? Any open-source initiatives? 

It would be great if you help me in the same I've tried loopcv but doesn't seems of much help.