teleren/devto huggingface dataset:
Redux Toolkit, managing states in React
Published: 2022-09-18 14:03:31

React States. How do you manage them? When your application is quite small, it is okay (but not recomendable) to prop drill states. But when you have at least 5 different components or "grandson - grandfather" relationships, you need to have a solid management or your system will succumb.

# What are my options?
If you are dealing with small aplications, there is no shame on utilizing *useContext*. It is actually quite interesting the fact that you can write your own hooks. The greatest thing about useContext is it simplicity. Write down a provider, a consumer and your hook, and you are all set. The only reason that I quit utilizing useContext was the Provider declaration. You need to wrap  your main div with a provider component and that really sucks when you have 4 or more hook necessities. What leads to our next option:

*Redux Toolkit*
![Redux flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kljxcamfaaal5bx4e3wn.jpg)
Firt things first, dont be scaried. Altought redux is a frightening word, it use is fairly simple. You need only:

- A store component
- A provider 
- A slice
- A selector and a dispatcher

## Store Component

The Redux store is the main component that makes all your *slices* available for other components. Unlike useContext, you just need to wrap your main component with a single Provider. Think as a "switch".

## Provider 

It is a component that you will wrap the main component or your application. It is only required once. That is the way that you are going to utilize the Store Component

## Slice

Probaly you are wondering "what the heck is a slice?". A slice is your command center for managing a state. In simple backends you have a controller. A slice is nothing more than a Slice. In this component you are able to receive requests, alter states, fetch results from state and mutate then, both sync and async. For that, you'll need reducers, that are analogue to Controller methods. Sou you can have a "create reducer", a "update", and so, untill you have a CRUD. 

## selector and a dispatcher

Okay, you did set up your application, but how you fetch and mutate data in your components? Trough selectors and dispatchers. Selector is the way you are going to fetch data (both the whole state or destructure some props) and Dispatcher is the mutators of the data, the way you are going to utilize the CRUD reducers, for instance. 

# Conclusion
Redux Toolkit is the way to go for your applications, since you dont want to be stuck with multi-providing or prop drilling issues. So, dont be afraid, take a read on https://redux-toolkit.js.org/introduction/getting-started and fire on this trouble!
Learning React - Day 1
Tags: react, codenewbie
Published: 2022-09-18 14:01:42

I started to learn React by following a tutorial on YouTube and reading the documentation.

I got to know what is react and what is used for and other things.

As a total newbie there are two things I would highlight.

"Surprising" new concept for me in React is that the UI/template and logic is not separated from each other. I have always separated html, css and js files during my projects. React is going to allow me to make templates and JS function within the same component. I also like the fact that React is updating only the necessary DOM element even though in the JSX describes all the template.

Other interesting aspect is that every small or big reusable template should be its own component. Like a navbar, a blog entry or a comment. For example inside the comment components the author, the comment itself should be again a separate component. It makes sense and make the code cleaner. But right now it feels a little bit unnatural for me. I mean I might be just afraid that I dont know until how small fragments should I go down later?!
Linux üzerinde JetBrains ToolBox kurulumu
Tags: linux, python, devtools, pardus
Published: 2022-09-18 14:01:18

   Bu yazıda Java, Kotlin, Python gibi diller için popüler geliştirme ortamlarının üreticisi olan JetBrains'e ait ToolBox aracının kurulumunu anlatacağım.

   ToolBox üzerinden Android Studio, IntelliJ IDEA, PyCharm gibi geliştirme ortamlarının hem topluluk sürümlerini hem de profesyonel sürümlerini kur/kaldır/güncelle yapabilirsiniz.

https://www.jetbrains.com/toolbox-app/

adresi üzerinden uygulamanın son sürümünü tar.gz olarak edinelim.


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

   Sonrasında inen dosyayı opt dizininin içerisine çıkaralım. Bu işlemi terminal üzerinden tek satırla yapabilirsiz. Dosyamızın bulunduğu dizinde  terminali açıp

`sudo tar -xzf jetbrains-toolbox-1.25.12999.tar.gz -C /opt`

komutunu uygulayabiliriz.

   Burada dikkat edilmesi gereken komutta belirtilen dosya isminin indirdiğiniz dosya ismiyle aynı olmasıdır. İndirilen dosya adı tarih ve uygulama sürümüne göre değişiklik gösterebilir.


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


   Yukarıdaki komut ile çalıştırılabilir dosyamız /opt dizinine çıkarıldı. Bir kereliğine /opt dizininden uygulamayı tıklayarak çalıştırmamızın ardından uygulama menümüze de eklenecektir. Bundan sonrası tercih ettiğiniz geliştirme ortamını ToolBox üzerinden edinmek üzere size kalmış. İyi geliştirmeler...


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lhlpdmr7fi33xxf8l92.png)
Machine learning container environment should be easy
Tags: machinelearning, deeplearning, docker, python
Published: 2022-09-18 13:43:11

As a machine learning engineer that works on different deep learning models, unexpected environmental issues always bother me.

![ds_blame](https://user-images.githubusercontent.com/52693877/191025031-b3b1822f-7c54-4641-90a8-986fadff606f.png)

Do these scenarios look familiar to you? What happens to the machine learning development environment?

1. Even though you can `pip install torch`, it doesn't mean you don't need to deal with the low-level code dependencies.
2. Container is necessary for a consistent environment. Especially for the GPU part.
3. Dockerfile is hard to reuse conveniently.

Dealing with the environment is just the first step of your work. It should be made easy but it's never easy. Although we need to admit that it's much easier than the day we had to search how to install NumPy.

Meanwhile, from the machine learning infra engineers' perspective:

![infra_blame](https://user-images.githubusercontent.com/52693877/191036993-922c27cb-36d3-4db3-a6eb-03f8b16207c9.png)

Infra engineers are never the enemies of machine learning engineers. A better tool can make everyone happy.

Let's sum up our requirements:
Machine learning engineers should submit container images instead of raw code. Because they know better about the model dependencies.
Infra engineer should maintain a better utility to help machine learning engineers to build the container images following the best practice.
Meanwhile, machine learning engineers don't want to sacrifice the development experience. They should be able to use Jupyter Notebook and VSCode as usual.

So far, everything looks good. Obviously, it's not something impossible.

---

Let's introduce the new tool: [envd](https://github.com/tensorchord/envd).

It provides the following features:

Writing Python-like function instead of the Dockerfile and share them across your team
Based on bulidkit with better cache and parallel building
Integrated with Jupyter Notebook and VSCode

The syntax looks like this:

```python
def build():
    base(os="ubuntu20.04", language="python")
    install.cuda(version="11.6", cudnn="8")
    install.python_packages(name=[
        "torch"
    ])
```

Run the command `envd up`, then you are in a isolated container environment.

To reuse the function written by your teammates, you can import them like:

```python
lib = include("https://github.com/tensorchord/envdlib")
lib.jupyter_lab(host_port=8888)
```

It's also much faster. See the benchmark below:


![benchmark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15q3ur0jyqdilpn6ct0u.png)



More features are coming! Feel free to open a issue or join the [discord](https://discord.gg/KqswhpVgdU) community to discuss with us.
🏄‍♂️ DNS record : A, MX, CNAME, TXT
Published: 2022-09-18 13:11:50

I always forget about it, so I'm gonna write it down to cheat quickly someday 😝

## 💎 A record

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

record which replaces from domain to IP address.
most basic record
```
kaziu.jp. IN A 192.534.0.3
www.kaziu.jp. IN A 192.534.0.3
```

## 💎 MX record


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

record host name of **mail server**
```
kaziu.jp. IN MX 10 mail.kaziu.jp.
```
↑ it means **mail.kaziu.jp** handles mail address **~~~@kaziu.jp**  

> 🤔 What is this 10 ??

it means priority, at first 10, and 20, 30, 40 ...

## 💎 CNAME record

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

replace domain to other domain

```
kaziu.jp. IN A 192.534.0.3
www.kaziu.jp. IN CNAME kaziu.jp.
```
↑ if you change **kaziu.jp**, you would modify only one part

## 💎 TXT record

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4a70stoy51soo583znta.png)
this is just text information of this domain
```
kaziu.jp. IN TXT "some info, I'm drank man"
```
What is a blockchain fork?
Tags: blockchain, fork
Published: 2022-09-18 10:47:21

Blockchain fork is a very common term in the industry.Today, let's discuss what blockchain fork is.

In short, a fork is a change or upgrade of the blockchain protocol to make up for deficiencies in the system;

Any modern software /APP will undergo periodic upgrade iteration, including the Android and IOS systems we use, but they are all centralized upgrades decided by the development team independently;

The blockchain itself is decentralized.When the system needs to be upgraded, the participants must reach a consensus.Once there is disagreement, the system will be divided into two new systems, and the blockchain fork will occur, which is also the characteristics of decentralized upgrade.

Now, let's take a look at the definition of bifurcation, bifurcation can be unintentional and intentional;

Unintentional bifurcate, that this is a moment in the chain of appeared two blocks that meet the conditions, for miners are legal, some men will choose to continue to dig after A1 block, also some miners are will choose continue to dig after A2 blocks, as time changes, long a chain eventually survive, short that is discarded;

The intentional fork can be divided into hard fork and soft fork.
The hard fork will take sides when dealing with the new fork and the old fork.Only by choosing to keep updating can it run, but if the old fork is selected, two currencies may be formed.

Soft forks are compatible with both old and new forks to produce blocks.

ETH has completed the fork, do you think it is good or bad?
Solve 5 problems Based on Hoisting
Tags: javascript, webdev, beginners
Published: 2022-09-18 13:08:43

**Before We encounter problems and solve them let's recap what Javascript hoisting really is.**

Hosting in javascript is a behavior where the **variable and function** declaration is **moved to the top of the scope.**

The scope can be local, or global.

```jsx
x = 20 ;
console.log(x);  // 20  
var x ;
```

X will be hoisted to the top of the scope ( Global ) thus consoling the x will result in 20.

### How does hoisting behave with let, const?

Let and const get **HOISTED**  but for time being we cannot access them until they are initialized

This generally refers to a term called **Temporal Dead Zone**

```jsx
console.log(b);

let b = 100;

// Cannot access 'b' before initialization"
```

**Recap done let's encounter these 5 problems!**

**Q1: Predict the output.**

```jsx
(function random(){
    x++;
    console.log(x);
    var x = 21;
  })();
```

Output : NaN

```jsx
// if we try to do hoisting here in the function scope

(function random(){
var x; // hoisted to the Top
x++; // here x is undefined
console.log(x) // NaN
x = 21; 
})();
```

**Q2: Guess the output?**

```jsx
doSomething();
function doSomething(){
  x = 33;
  console.log(x);
  var x;
}
```

Output: 33

As var x gets hoisted and initialized with 33.

**Q 3:  Output of this Problem?**

```jsx
var b = 1;
console.log(c);
var c = 2;
a = 1;
console.log(a);

```

Output :  undefined, 1

As c was undefined due to hoisting and a new variable created a = 1 so it result into 1

**Q4: Predict the output**.

```jsx
makeStringReverse();
var reverse = "*/" ;
function makeStringReverse(){
console.log(reverse);
reverse = "/*" ;
}
console.log(reverse);
```

Output 

 undefined

“ */ “

Explanation

```jsx
// actual execution flow 
var reverse; // reverse is undefined atm
function makeStringReverse(){ 
console.log(reverse); // undefined
reverse = "/*" ; // initialized
}
makeStringReverse(); // called before reverse been initialized with "*/"
reverse = "*/" ;
console.log(reverse); // will console "*/" because it reverse was reassigned again.
```

**Q5:**

```jsx
function callName() {   
var name = "John";
} 
callName();
console.log(name);
```

Output

Reference Error: name not defined

Explanation :

The simple reason for reference error is the scope in which the variable was hoisted.

It hoisted in the callName function scope but not in the global scope hence the error occurred.

That was it folks!
Hope this might helped you clearify hoisting in javasxript :)

Bbye!!
Public APIs are not really public anymore
Tags: opensource, api, github, webdev
Published: 2022-09-18 12:48:30

[Public APIs](https://github.com/public-apis/public-apis) repository is a good source to find free and useful APIs to use in development. I personally created a few fun projects with the APIs I found in this repository.

But the [situation of the project](https://github.com/public-apis/public-apis/issues/3104) is not good now. The project was initially created by [Todd Motto](https://github.com/toddmotto), but he transferred the ownership of the project to other people later. The project is now owned by a business called APILayer.

This project is now slowly moving towards promoting their business instead of listing the public APIs.

One of the project maintainers has written about the situation in [his article](https://dev.to/yannbertrand/public-apis-situation-4101):

> It's now clear APILayer don't care about the project nor Open Source, their only goal is to take advantage of the large number of pageviews the project gets to redirect to their own company.

> The team is still discussing what we should do to keep the project going. **Please be careful with the project content now because we cannot ensure it's safe**.

Fortunately, there is a [new fork](https://github.com/public-apis-dev/public-apis) of the repository now. Hopefully, the maintainers of the fork would care about the open source and list the real public APIs. :crossed_fingers:

---

References:

- [State of public-apis](https://github.com/public-apis/public-apis/issues/1268#issuecomment-793154290)
- [Public APIs Situation](https://github.com/public-apis/public-apis/issues/3104)
What do we mean by UTXOs?
Tags: blockchain, cryptocurrency, bitcoin
Published: 2022-09-18 12:42:37

Anyone learning Blockchain Technology will be puzzled by the concept of UTXOs and how they enable blockchain protocols (specifically Bitcoin protocol) to make transactions.

I will be talking about Bitcoin, which uses the UTXO model to keep track of transactions and detect double-spending. Ethereum uses the Account/Balance Model for keeping track of the balance of a particular account. UTXO stands for Unspent Transaction Output. UTXO is of two types:
- Input UTXO
- Output UTXO

In bitcoin, the funds in a transaction are treated as a single unit, and to spend the funds received from a transaction, you have to spend the entire fund referenced in that input transaction. If you only want to spend only a fraction of the bitcoin in that referenced by that input transaction, then you need to create two transactions, one to the potential receiver’s account and another to your account.

Input UTXOs are basically the transactions whose funds have not been spent, i.e. not yet referenced as an input to any other transaction.

Output UTXO are the transactions which are generated after a transaction becomes successful.

## Understanding Transactions in UTXO model

![Transactions in my account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trk579trp2jkpegaevxw.png)

1. Consider these bitcoin transactions, which result in transferring a sum of 0.61 BTC to my account.
2. Now I want to buy a truck that costs 0.55 BTC.
3. Now, to spend 0.55 BTC, I have to reference one or more transactions called input transactions whose cumulative sum is equal to or more than 0.55 BTC.
4. If I have an option to choose from those transactions shown above (let’s suppose all other transactions referencing my account are either output transactions — where I am sender), then I have only one option for a set of input transactions, i.e. first and second transactions.
5. But hey, these transactions result in 0.6 BTC, then where is the remaining 0.05 BTC going after I pay for 0.55 BTC?
These remaining amounts can be used in these three ways: -

- Send the remaining amount back to your account.
- Use the remaining amount as the transaction fee. Every transaction on the blockchain has associated transaction fees.
- Send the remaining amount to someone else.
![Input and Output UTXOs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyhen00soe5cxah1nkwu.png)

6.. After the transaction is confirmed, the transactions in my account will look like this:
![Finally transactions in my account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqr7ncbno97aa0xby3s4.png)

7.. The first two transactions that have now been spent can’t be referenced as input UTXOs to any other transactions.

8.. The transaction in purple is the outgoing transaction (BTC is sent and not received), so it also can’t be used as input UTXO in any transaction.

9.. The 3rd and the 5th transaction shown in green are the transactions which are unspent and can be used as input UTXO to other transactions.

That’s about it for now.

Adios 👋
Setup virtual host MacOs nginx
Tags: virtualhost, nginx, macos
Published: 2022-09-18 12:41:53

note : 
 
1. Set up local server separately using homebrew
2. maybe the location of the file is different



## First, create the conf file at 
```
\opt\homebrew\etc\nginx\servers
```
and then fill the content, ex: 
``` 
# Upstream to abstract backend connection(s) for php

server {
        ## Your website name goes here.
        server_name project.local;
        ## Your only path reference.
        root /opt/homebrew/var/www/project;
        ## This should be in your http block and if it is, it's not needed here.
        index index.php;
        location = /favicon.ico {
                log_not_found off;
                access_log off;
        }
        location = /robots.txt {
                allow all;
                log_not_found off;
                access_log off;
        }
        location / {
                # This is cool because no php is touched for static content.
                # include the "?$args" part so non-default permalinks doesn't break when using query string
                try_files $uri $uri/ /index.php?$args;
        }
        location ~ \.php$ {
                #NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
                include fastcgi.conf;
                fastcgi_intercept_errors on;
                fastcgi_pass php;
        }
        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                log_not_found off;
        }
}
```

## Second, add the hostname to 

```
\private\etc\hosts
```

```
127.0.0.1	localhost
127.0.1.1	dicky54putra

127.0.0.1	project.local

# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1	kubernetes.docker.internal
# End of section

```

## Restart the nginx

```
sudo nginx -s reload
```

### Finally, the virtual host can be use and finished
Check you are on which page from LWC
Published: 2022-09-18 12:19:49

To check if the Lightning component is in Lightning Community Page or in Salesforce Lightning CRM page, we can make use of Site Class‘s method – getSiteType().

this return these values

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


Create an @AuraEnabled method in Apex Controller:

```
@AuraEnabled
public static String getSiteType() {
    return Site.getSiteType();
```
controller to fetch 
```
var communityPageKeys = ['ChatterNetwork', 'ChatterNetworkPicasso'];
var action = component.get("c.getSiteType");
 
action.setCallback(this, function (response) {
    if (response.getState() === "SUCCESS") {
        if (communityPageKeys.indexOf(response.getReturnValue()) < 0) {
            // This is not a community page
        } else {
            // This is a community page
        }
    }
});
 
$A.enqueueAction(action);

```

Reference [https://vijayasankarn.wordpress.com/2018/02/12/lightning-component-is-it-in-community-or-in-lightning-page/]
Software Developer Jobs in India 2022
Tags: programming, job
Published: 2022-09-18 12:13:45


here many platform to apply for a job in Software industries 


Website lists 

---

1. - http://linkedin.com/
2. - https://hirist.com
3. - https://angel.co/jobs
4. - http://indeed.com/
5. - http://freshersworld.com
6. - http://hackerearth.com/
7. - http://hackerank.com/
8. - http://monster.com/
9. - http://naukri.com
10. - https://www.glassdoor.co.in/index.htm


Mobile Apps 

-

1. - Hirect 
2. -  LinkedIn 
3. -  Naukari
4. -  Glassdoor
5. -  Internshala
6. -  monster 
7. -  indeed
Top Technology should learn in 2022
Tags: javascript, webdev, beginners, programming
Published: 2022-09-18 11:57:57

as a Software engineer Freshers want a job in short time to learn this technologies to got a early job

## Javascript 

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.



## React
This is a Front-end Web Applications Developent Frameworks Library
React is Developed By Facebook 

React is not a framework this is a JavaScript Library 



## React native
React native is free.

this is a cross platform technology for build and iOS and android mobile tablet applications

this is developed by Facebook Meta

React native is similar to React Js for Programming.

also this is used to Faster build a Applications

React native is supported NPM Library 

React native is a Developer Friendly
this is provided a Reusable Components 

if u want to develop a small products or business products like required frequently changes required and small time to developed this is very useful 


## Java
Java is Open source and free  Platform 
Java is most popular language and also many large projects are build in java 
java has many powerful frameworks 




##UI/UX designing Tools 

-  Adobe photoshop 
-  Adobe illustrator 
-  unity for game developer
-  Figma 
-  Adobe After Effect


## Java Frameworks

- hibernate 

- Spring

- Spring Boot

- Spring Boot with Micro services 


## Angular Js
This is a Front-end Web Applications Developent Frameworks Library
Angular is Developed By Google 

Angular is a framework


## mobile App Develpements

1. Android Java xml
2. kotlin
3. React natives 
4. Flutter
5. Ionic 
6. iOS 


## Cloud Technology 
-  AWS
-  Google Cloud
-   Firebasae
-  Microsoft Azure