teleren/devto huggingface dataset:
Introduction to Jotai. From React hooks to Jotai atoms
Published: 2022-09-03 18:32:33

Jotai is simple. There's one concept there: atom. You eat with it, you sleep with it, you fight with it.

You create an atom with `atom` function. You can use atom in your component just like React local state. Instead of `useState`, write `useAtom`.

```javascript
const textAtom = atom('hello')

const Input = () => {
  const [text, setText] = useAtom(textAtom)
  return <input value={text} onChange={(e) => setText(e.target.value)} />
}
```

This component works the same way as similar component with `useState`.

```javascript
const Input = () => {
  const [text, setText] = useState('hello')
  return <input value={text} onChange={(e) => setText(e.target.value)} />
}
```

Atoms are more flexible than the local state. They live outside components. Components refer to atoms but don't own them. Atoms can be composed together. Using composition you can create derived atoms. Derived atom holds data dependent on other atoms. When value of the source atom changes, value of the derived atom also changes.

```javascript
const textLengthAtom = atom((get) => get(textAtom).length)
```

Atom above is a derived atom. Its value is length of text from `textAtom`. You can use it in any component you want.

```javascript
const TextLength = () => {
  const [length] = useAtom(textLengthAtom)
  return <div>Length: {length}</div>
}
```

`Input` and `TextLength` components are not connected. Their state comes from atoms that live outside them. You can use them in your application in any place you want. State will be propagated properly.

```javascript
<Provider>
  <Container>
    <Input />
  </Container>
  <Container>
    <Column>
      <TextLength />
    </Column>
  </Container>
</Provider>
```

If you build React application with hooks, go on and try replacing your `useState` with `useAtom` from Jotai. You install Jotai with `npm i jotai`. It comes with TypeScript declarations. No need to look for additional typings.

Shown code is based on Jotai official examples. Check out [this code live](https://codesandbox.io/s/cocky-jang-54ym6h?file=/src/App.tsx).

Check out [Jotai website](https://jotai.org/) for docs and more examples of Jotai code.

_Check out [next part of Introduction to Jotai](https://dev.to/fricze/introduction-to-jotai-derived-atoms-data-validation-mdb)._
Self Motivation for Coding
Tags: motivation, beginners, productivity
Published: 2022-09-03 18:31:51

Well most of the individuals choose the STEM👩‍💻 route because it has drastic growth omnipresent🙂 and obviously which gives a decent Monet balance✅.

But apart from that what it gives is a different perspective of observing ,thinking , building ,etc. 
And while we are on this path we will come across various set backs , like sometimes going through same and same error😓, can't spot the bug 👽,or even sometime not passing the test cases , or even worst not remembering the syntax😵.
 
But all you have to do is take a deep breath remember why you have chosen this? why you are here ? why this is your goal ? 
have cup of coffee shot☕ and again hustle dude coz you know you are meant for this 🔥.

I hope this will help you guys!😀
AGTE - ANKARA GELİŞİM TARAMA ENVANTERİ - DGNTECH
Tags: agte, kisiselgelisim
Published: 2022-09-03 18:18:09


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzbz0alflb53flclyus0.png)
**Ankara Gelişim Tarama Envanteri'ni kullanarak çocuğunuzun gelişimindeki yönünü keşfedin!**
Ankara Gelişim Tarama Envanteri (AGTE), Türkçe bir gelişimsel tarama envanteridir. AGTE, 0–6 yaş arasındaki bireylerin gelişimsel durumlarının tanınmasına ve bu bireylerin gelişimsel ihtiyaçlarının karşılanmasına yardımcı olmak amacıyla hazırlanmıştır. AGTE, bireylerin gelişimsel potansiyellerinin keşfedilmesi, gelişim gecikmelerinin erken tanınması ve bu bireylerin eğitimsel/rehabilitasyonel ihtiyaçlarının karşılanması için kullanılabilir.
Ankara Gelişim Tarama Envanteri, kısaca AGTE, Türkiye'de gelişimsel bozuklukların tanı ve tedavisinde kullanılan bir araçtır. AGTE, ilk olarak Ankara Üniversitesi Psikiyatri Anabilim Dalı tarafından geliştirilmiştir ve Türk Psikiyatri Derneği tarafından onaylanmıştır. AGTE, kişinin gelişimini değerlendirmek için gelişimsel bozuklukların tanı kriterleri dikkate alınarak hazırlanmıştır. Bu araç, kişinin gelişiminde gözlemlenen bozuklukların tanısında kullanılabilir ve tedavisinde etkilidir.
AGTE, Türkçe ve İngilizce olmak üzere iki farklı dilde sunulmaktadır. Envanterin Türkçe versiyonu, Türkçe olarak konuşan ve/veya yazan kişiler için uygundur. İngilizce versiyonu ise, İngilizce olarak konuşan ve/veya yazan kişiler için uygundur. AGTE, karşılaştırmalı ve kategoriye ayrılmış bir envanterdir. Bu, kişilerin kendi kendilerini değerlendirmelerine olanak sağlar ve bireysel gelişim planlarının hazırlanmasına yardımcı olur. AGTE, kişilerin gelişim durumlarını ve yeteneklerini belirlemeye yöneliktir. AGTE, Türkiye'de yaygın olarak kullanılmaktadır ve birçok kişi tarafından pozitif şekilde değerlendirilmektedir.
Bilgi almak için: https://www.dgntech.co/i/agte-online
Games and Puzzles to Exercise Your Brain
Published: 2022-09-03 17:45:38

Keeping your mind sharp is important, especially now. 

Although the pandemic is (maybe, kinda, sorta) winding down, many of us still aren’t getting the daily stimulation we once got from populated offices, robust happy hours, and social events with friends and family.

To make sure you don’t fall into a “pandemic fog” experts recommend playing games at home to give your brain a regular workout.

## Why it matters to exercise your brain

According to Rebecca Marcus, LCSW, a licensed psychotherapist in New York who specializes in mindfulness, brain games are 
important for several reasons:

- They can help to increase focus, concentration, and memory.
- They can help us to be more present in day-to-day activities.
- While it doesn’t appear that brain games like games [2048 cupcakes](https://www.unmoored.nyc/2048-cupcakes/), can prevent age-related cognitive decline and dementia, growing research indicates that they may slow or delay them.

“We are more likely to feel scattered, have trouble focusing, or experience forgetfulness if we don’t do things to exercise and keep our mind sharp,” says Marcus.

“Just like we wouldn’t expect to go to the gym for 3 months and then forever have muscles and strength without continuing to exercise, the same applies to exercising our mind.”

It’s important to note that the game you choose needs to constantly increase in challenge and variety, according to Marcus. “If [you’re] only playing the same thing over and over again, the mind isn’t challenged anymore and begins to run on autopilot,” she says.

Besides brain games, she says another way to challenge your brain is simply by varying your regular routines or tasks. For example, if you take your dog for a walk on the same route every day, try going in a different direction one day. (See? Easy!)

The left brain is known to perform tasks related to logic, such as science and mathematics, whereas the right brain is more visual and intuitive. Games like Sudoku and puzzles are great for challenging the left side of the brain.

On the other hand, to strengthen the right side of your brain, you’ll want to “keep your emotional intelligence sharp by engaging in conversations where you evoke and attune to the emotions of others,” says Sarah Schewitz, PsyD, a licensed psychologist in Los Angeles.

## Takeaway

Games are an excellent vehicle to learn something new and stimulate your brain. These options are incredibly fun, pandemic friendly, accessible, and work to keep your mind sharp in the long term. You can read in the [games](https://www.unmoored.nyc/games/) category
Kotlin Springboot -- Part 6 Driver で Entity のデータクラスとインスタンスを作り Gateway で Domain に変換する
Tags: kotlin, ca
Published: 2022-09-03 17:39:41


## why

Driver で Domain を返すのをやめて、Entity を返すようにする。

いままでは Driver で Domain を返していたが
クリーンアーキテクチャ的には Driver が Domain にアクセスできててはいけないから。

---

## Entity とは？

データの実態。
DB から返ってくるもの。

Domain と同じ data class ではあるが

```kotlin
data class Persons(val list: List<Person>)
data class Person(val name: Name, val age: Age)
data class Name(val value: String)
data class Age(val value: Int)
```

オブジェクト指向な Domain で作られる詳細なものと違い
こんなに最小単位迄作らなくて良い。

```kotlin
  data class PersonEntity(val name: String , val age: Int)
```

これくらいまでで良いと解釈した。

---

## Driver

```kotlin
//  private val data:Persons = Persons(listOf(
//    (Person(Name("taro"), Age(12))),
//    (Person(Name("hanako"), Age(10))),
//  ))
```

このようにガッツリドメインつけて作っていた
インメモリのデータを

```kotlin
  data class PersonEntity(val name: String , val age: Int)

  val taro = PersonEntity("taro", 3)
  val hana = PersonEntity("hana", 5)
  val persons = listOf<PersonEntity>(taro,hana)
```

Entity を作って、そこからインスタンスでつくってまとめるようにした。

```kotlin
 fun findAll(): List<PersonEntity> {
    return persons
  }
```

そしてこれを Gateway に返す。

---

## Gateway

PersonsEntity で受け取ったものを
Domain の Persons のナカで展開して、Domain の Person をつけて返す。

これで Entity から Domain に変換できている。

```kotlin
class PersonsGateway(
  val personsDriver: PersonsDriver
) {
  fun getAllPersons():Persons {
    val persons = personsDriver.findAll()
    return Persons(persons.map { person ->
      Person(
        Name(person.name),
        Age(person.age)
      )
    })
  }
}
```

---

## まとめ

インメモリで CA をする場合は
Driver では Entity を data class でつくり
そのインスタンスを返す。

そして Gateway で Domain にして返す。
Setting Background Color of Body Dynamically in React
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-03 17:28:38

In a single page application, you only have one `body` element and although you can specify the background color of `body` in a global stylesheet, it's not easy to update the background color dynamically for different pages in your website.

I encountered this issue and immediately googled [some solutions](https://styled-components.com/docs/api#deprecated-injectglobal) but I wasn't satisfied with them.

So, I went on to code a hacky but working patch using CSS custom properties. I don't know if it's a recommended practice or not, but let's have a look at it.

## CSS Custom Property

Set a custom property in your `:root` or `html` element style which contains a default color value. Specify this styling in a global stylesheet, in your case it will probably be `index.css`.

```css
:root {
    --bodyColor: "#000000";
}
body {
    background-color: var(--bodyColor);
}
```

## Creating a Function

Create a file named `setBodyColor.js` in the `src` directory which contains a function ready to be exported. The function is shown below:

```js
export default function setBodyColor({color}) {
    document.documentElement.style.setProperty('--bodyColor', color)
}
```

In this way, you can modify the value of the css custom property `--bodyColor`.

## Using the function

Import the function in a component using,

```js
import setBodyColor from './setBodyColor'
```

Change the relative url `./setBodyColor` as per your folder structure.

Use it in your functional component,

```js
const HomePage = () => {

    setBodyColor({color: "#ffffff"})

    return (
        <main>
        ...
        </main>
    )
}

export default HomePage
```

You can use this function in multiple components and pass a color to modify the background color of the body.

> Note that you must call the function on every page or component to set the background color of the body. Otherwise, it will just take the value of the background color of the previous page.

This workaround isn't limited to `background-color` property. You can set as many custom properties as you want. But, as I said earlier, I don't know if this is a foolproof technique, so the best thing you can do for your case is do your own research.

Also, if you have any better solution, feel free to ping me on [twitter](https://twitter.com/murtuza_surti).

Signing off.
Creating Beautiful Pictures of Your Code! 🎨
Tags: javascript, webdev, programming, tutorial
Published: 2022-09-03 17:27:09

## **What is Carbon?**

[Carbon](https://carbon.now.sh/) as they say themselves, let's you "Create and share beautiful images of your source code."

You can turn your boring code into a beautiful image like this:
![Demonstration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcj1ii0hwr4jomo4vc5y.png)

## **Why would I use it?**

Let me ask **you**, which one of these looks better?

```js
const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)

const unfold = (f, seed) => {
  const go = (f, seed, acc) => {
    const res = f(seed)
    return res ? go(f, res[1], acc.concat([res[0]])) : acc
  }
  return go(f, seed, [])
}
```

**OR:**


![Demonstration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klgn6n1w8bdy064s5hgj.png)

If you picked **#2** then `Carbon` is perfect for you! And if you picked **#1**, suit yourself! 

## **How do I use it?**

It's pretty simple! Head over to the [Carbon](https://carbon.now.sh/) website and just paste your code into the box!

**Woah!** Not that fast... 👀

[Carbon](https://carbon.now.sh/) also has **a ton of themes** that let you customize your image! Personally, I use **"One Dark"** for my images. 

## **The End.**

> Thanks for reading my post, if you liked it, please leave a ❤️ or even a **Comment** 💬!

🔗 _[Carbon's Website](https://carbon.now.sh/)_
golang unit testing
Tags: go, unittest, tdd
Published: 2022-09-03 17:14:51

## Introduction
Test driven development also known as TDD is a good software development practice followed by all over the software industry. With unit tests we can test a small pieces of our software independently what makes it "unit".

### Problem
Let's assume you're making some changes to a function which was developed by someone else previously. with the developer test you might think, it is safe to deploy. But what will happen if you missed a specific test scenario? probably it will lead to a software crash if exceptions are not properly handled. panics in go's context.

### Solution
If we have already developed unit tests, then we can run it to test whether we broke the code or not. It will execute a list of specific scenarios of the software and shows if some flows are broken. if there is not unit test, I **highly recommend** you to implement it first, then do the changes to the function.

## Libraries we can use to write unit tests
I use [gomock](https://github.com/golang/mock) or [mockery](https://github.com/vektra/mockery) for mocking the interfaces and [testify](https://github.com/stretchr/testify) for evaluating tests

Let'a have a look how its implemented

Sms Provider
{% embed https://gist.github.com/lakshanwd/031f9bc97a6f357ef1b9aeb645548660.js %}

Email Provider
{% embed https://gist.github.com/lakshanwd/e529481cc0b927e3a9e1aec0a721927e.js %}

And suppose notification service, which validates phone numbers and email and calls sms provider and email provider to send actual email and test messages
{% embed https://gist.github.com/lakshanwd/e72357e38ef614b759e1cbbf6c0fa732.js %}

The unit tests of the notification service can be written as the following
{% embed https://gist.github.com/lakshanwd/16fc1f343581074d509815e7e3642e2e.js %}
Editing and Deleting with MongoDB (Discord.JS)
Tags: discord, node, mongodb, tutorial
Published: 2022-09-03 17:10:14

## Welcome 👋
> First of all, if you haven't seen **Part 1**, you should [read it](https://dev.to/w6/simple-mongodb-database-for-discordjs-replit-3i2k) or you may be confused. We're going to be using the same database that we created!

## Editing & Saving Data

So, you want to edit data and save it to your database. Well, this is how you do that.

We're going to be changing the server's **"key"** to a new one! This is just an example but, you can use this for your own bot's functionalities. 

Let's say that right now the server's "key" is `ExampleLol123` and we want to change it to `SuperSecretKey`, this is how!

Start off by finding the server's entry by using the "FindOne" function.

```js
Schema.findOne({ Guild: interaction.guild.id }, async (err, data) => {

});

```

Now that we've found the server's entry, let's change it's "key" to `SuperSecretKey`.

_In the code below, we'll check if there is any data for the server then if there is, we'll change it._

```js
if (data) {
  data["SpecialKey"] = "SuperSecretKey";
}
```

Finally, let's save it!

```js
data.save();
```

**Wasn't that easy?** ☝️ Let's move on to deleting data! 

## Deleting Data 🗑

Let's say you want to delete a server's data (eg, if the bot was kicked from the server and you don't want to use up space), this is how!

We'll be using the handy `findOneAndDelete ` function for this part of the tutorial. Basically, you'll find the entry and delete it all in **1** function! 😱

```js
Schema.findOneAndDelete({ Guild: interaction.guild.id }, async (err, data) => {
});
```

If there's an **error**, we'll log that in the console 👇

```js
if (err) {
   console.log(`❌Looks like there's an error: ${err}`);
}
```

Otherwise, if there isn't an error and everything is good, we'll make sure to log in the console that the operation was successful! ✅

```js
else {
  console.log(`🍃 That was quick. Data deleted successfully! ✅`);
}
```

## Learning More...

You've just learned how to 👀

- Edit Data
- Delete Data
- and.. save it!

But if you want to learn more, please leave a ❤️ or a Comment 💬 to motivate me to make more of these tutorials!

> **Thank you for reading!** 😃
redis-数据类型
Published: 2022-09-03 16:58:43

## string
```
redis 127.0.0.1:6379> SET key1 value1
redis 127.0.0.1:6379> GET key1
value1
redis 127.0.0.1:6379> DEL key1
# 设置key1过期时间（秒），可重复设置
redis 127.0.0.1:6379> expire key1 10
# 查询key1过期时间
redis 127.0.0.1:6379> ttl key1
```
## hash
```
redis 127.0.0.1:6379> HMSET hash1 field1 'v1' field2 'v2'
redis 127.0.0.1:6379> HGET hash1 field1
v1
redis 127.0.0.1:6379> HDEL hash1 field1
redis 127.0.0.1:6379> HEXISTS hash1 field1
```
## list
```
redis 127.0.0.1:6379> lpush list1 value1 value2
redis 127.0.0.1:6379> lrange list1 0 1
```
### set
set是string的无序集合
```
redis 127.0.0.1:6379> sadd set1 a
redis 127.0.0.1:6379> sadd set1 b
redis 127.0.0.1:6379> smembers set1
a
b
redis 127.0.0.1:6379> sdiff set1 set2 set3 *返回set的差集*
redis 127.0.0.1:6379>  sinter set1 set2 *返回set的交集*
redis 127.0.0.1:6379> 
```
## sorted set
stirng有序集合
```
redis 127.0.0.1:6379> zadd zset1 1 value1 
redis 127.0.0.1:6379> zadd zset1 2 value2
redis 127.0.0.1:6379> zadd zset1 3 value3
redis 127.0.0.1:6379> zrange zset1 1 3 withscores
1) "value1"
2) "value2"
3) "value3"

```
What are access modifiers in C++?
Tags: programming, beginners, tutorial, accessmodifiers
Published: 2022-09-03 16:43:39

One of the main features of object-oriented programming languages such as C++ is data hiding. Data hiding refers to restricting access to data members of a class. This is to prevent other functions and classes from tampering with the class data.

You use access modifiers to define accessibility for the class members. It defines how to access the members of the class outside the class scope.

There are three types of access modifiers:

- **Private**
- **Public**
- **Protected**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnkvew50f8zwy3h6ayk5.jpg)
Functions in Javascript
Published: 2022-09-03 16:39:41

A function is a block of code that performs a specific task.
In simple word function is a set of statements that perform some task on input which we provide and return an output.


**Benefits of Using a Function**

- Function makes the code reusable. You can declare it once and use it multiple times.
- Function makes the program easier as each small task is divided into a function. Dividing a complex problem into smaller chunks makes your program easy to understand and reusable.
- Function increases readability.

**Declaring a Function**
The syntax to declare a function is:

```
function functionName () {
    // function body   
}
```

A function is declared using the function keyword.
The basic rules of naming a function are similar to naming a variable. The body of function is written within {}.

Example-1

```
function welcome(userName) {
   console.log("Welcome",userName);
}

```

**Calling a Function**

In the above program, we have declared a function named welcome(). To use that function, we need to call it.

```
//calling function
welcome("Ashwini");

```
Here we are calling function by their name i.e. welcome

Example-2
A program to add two numbers and return the addition.
```
function add(a, b){
 return a + b;
}
```

```
//calling function
add(3,5);
```
In above program the add function is used to sum of two numbers.
The function is declared with two parameters a and b.
The function is called using its name and passing two arguments 3 and 5.
We can call a function as many times as we want. We can write one function and then call it multiple times with different arguments.

**Function Return**
The return statement can be used to return the value to a function call.

The return statement denotes that the function has ended. Any code after return is not executed.

If nothing is returned, the function returns an undefined value.

**Function Expressions**
Such a function can be anonymous; it does not have a name.


```
let sum = function(a, b){
 return a + b;
};
console.log(sum(3,5));
```
Function expressions in JavaScript are not hoisted, unlike function declarations. We can't use function expressions before We create them. When a function is created at the same time it is called. Function expressions are invoked to avoid polluting the global scope.


```
console.log(sum); // undefined
//  even though the variable name is hoisted, the definition isn't. so it's undefined.

sum(); // TypeError: sum is not a function

var sum = function () {
  console.log('bar');
};
```
AWS: The topics that you need to master as a beginner
Tags: aws, cloud, webdev, beginners
Published: 2022-09-03 16:33:22

## Preface:
As a beginner to cloud computing, there are a vast amount of topics that you need to master first before further advancing in your cloud computing career.

---


## Topics to master as a beginner to cloud computing:

---


- General IT concepts (basic networking)


- The AWS global infrastructure (Regions, Availability Zones, VPC's (subnets) and Edge Locations)


- How to create and setup an AWS account


- AWS Identity and Access Management (IAM)


- Amazon Elastic Compute Cloud (EC2) -> fundamental to understanding how the AWS cloud works


- The concept of scalability and high availability 


- Cloud storage services (S3, EBS and EFS)


- Databases


- Basic deployment on AWS


- DNS services and content delivery 


- The basic concept of containers and serverless computing


- The basic concept of cloud monitoring and integration


- The basic concept of security and encryption

---

## A final note...
For those that are interested in learning Cloud Computing from scratch, feel free to check out my latest course:

---

[Cloud Computing on AWS: Ultimate Beginners Course - 2022 ](https://www.udemy.com/course/cloud-computing-on-aws-ultimate-beginners-course-2022/?referralCode=A8F185F6471C6AB608BE)
What is the difference between C and C++?
Tags: programming, tutorial, beginners, career
Published: 2022-09-03 16:31:57

C and C++ are programming languages that are used for developing applications, games, database systems, operating systems, and more. While both C and C++ may sound similar, their features and usage are different. 

**C**

1. C is a procedure-oriented programming language
2. It follows a top-down approach
3. C doesn’t support function or operator overloading
4. C language doesn’t support virtual and friend function
5. C language has 32 keywords 

**C++**
1. C++ is a partially object-oriented programming language
2. It follows a bottom-up approach
3. C++ supports function as well as function overloading
4. C++ language supports both virtual and friend functions.
5. C++ language contains 52 keywords


**Read related articles:**
[C++ header](https://dev.to/jmrashed/bitsstdch-in-c-1p1l)