teleren/devto huggingface dataset:
Today i found out : for async of
Tags: javascript, promises, loops, api
Published: 2022-07-25 20:21:37


[The code i was working on](https://github.com/tigawanna/gitpals)

[Live preview](https://tigawanna.github.io/gitpals/)

While using GitHub's rest API i found out that fetching the user's followers doesn't return if you follow the user and you have to make a separate request for that .

So far so good, so i added a forEach loop that awaits for the second request then inserts whether the user is following me 

```js
export const getUserWithFollowingDetails=async(token:string,url:string,username:string)=>{
 let followers:any=[]
const users = await getAuthedUserFollowers(token,url)
users.forEach((user)=>{
user.following_me = await getIsUserFollowingMe(token,username,user.login)
}).catch((e)=>{})
followers.push(user)
  })
  return followers
}
```
 The code worked , but it had weird outcomes. The code eventually looked the way i expected but it would be too late for react to notice it and re-render so the data being output was not matching the values being console logged , after some googling I came upon . for async.. of which is a way of looping over items and do await while async actions happen to the array objects.



```js
export const getUserWithFollowingDetails=async(token:string,url:string,username:string)=>{
        let followers:any=[]
         const users = await getAuthedUserFollowers(token,url)
         for await (const user of users){
         //@ts-ignore
user.following_me = await getIsUserFollowingMe(token,username,user.login)
         .catch((e)=>{})
         followers.push(user)
         }
         return followers
        }

```
 [good explanation](https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop)

[The code i was working on](https://github.com/tigawanna/gitpals)

[Live preview](https://tigawanna.github.io/gitpals/)
GSoC mid term report for Health
Published: 2022-07-25 20:13:29

It's been a while since I last updated my progress. I've made significant progress after the last update.
I started creating the User model in the last update. By now, I have migrated the whole User model to the Database from the GSettings and refactored the codebase accordingly.

Here is my major progress so far:
- **Creation of a new User model:**
The new user model comprises all the user details that were initially saved in the GSettings such as user_birthday, user_height, etc. This new model will help in associating each user with a single data structure.
```rust
pub struct User {
        pub user_id: i64,
        pub user_name: String,
        pub user_birthday: glib::DateTime,
        pub user_height: Length,
        pub user_weightgoal: Mass,
        pub user_stepgoal: i64,
        pub enabled_plugins: Vec<PluginName>,
        pub recent_activity_types: Vec<ActivityType>,
        pub did_initial_setup: bool,
    }

```
- **Migration to Database**
The current user data is being stored in the Database instead of GSettings for additional flexibility and to help in the support for multiple different users. Each user is assigned a user ID and the active user ID is saved in the GSettings for quick access to a particular user.


- **Associating Weights and Activities to a User**
The next part of my project dealt with associating weights and activities to a particular user, such that each data can be saved and extracted based on the user ID of a particular user.


- **Handling Database Migration**
Earlier the migration function to migrate Date to DateTime ran for every function and it resulted in a slower application start time. This has been fixed by adding a Version to the Database such that if the Database version is equal to the current version, we skip the migration otherwise, we run the migration and update the database. Furthermore, three additional migration functions are added such that an initial User will be created from the data in the GSettings file and associate each activity and weight to an initial user with user ID 1.


- **Adding a method to switch users**
The final part up to my mid-term evaluation dealt with adding a UI to switch multiple users. 


That's all for my project until now. Here's a link to my MR: https://gitlab.gnome.org/World/Health/-/merge_requests/174

**Next Steps:** 
Now, I would be working on:
- Adding a new sync model that would help in the support of multiple sync providers for different health categories for each user. 
- Pulling out actual activities from Google Fit, 
- Two way sync support
- Adding a UI to handle switching of multiple sync providers.

See you all after 3 weeks. Thanks for reading!
React Native App
Tags: reactnative, redux, mongodb, firebase
Published: 2022-07-25 20:11:00

**Hi everyone,
I am very excited to share a my first react native app**.
😊😊😊😊😊😊😊😊

**Expo Link: [exp://exp.host/@pino751/native_redux?release-channel=default](url)**

Technology Used: React native, Node.js, MongoDB, Express.jsFirebase Authentication, Heroku. 

Overview:  
• E-Commerce android app.
• The user can sell all products.
• The user can buy products and also cancel orders.
• Admin can add products and categories.
• Admin can also delete any products and categories also edit products and categories.
Impact 2022 keynote speakers, game and hiring tag
Tags: meteor, conference
Published: 2022-07-25 20:00:16

Time is an unstoppable force and Impact 2022 is slowly approaching. The schedule is half-filled already and there is a few things to share!

First things first, our two keynotes (for now).

First comes [Radosław Miernik](https://impact.meteor.com/people/GiFfca5T5R4P5L4Kb) from Vazco with his keynote about "Why all the fuss about fibers?", a very timely talk.

Second and another well known name in the Meteor community is [Alim Gafar](https://impact.meteor.com/people/7jBut46tMvKSJonTu), representing Meteor Software, with his keynote "Building the embassy" about the Meteor ambassadors program.

Check out the [agenda](https://impact.meteor.com/agenda) for all the other new talks!

New this year is a point [game](https://impact.meteor.com/game). The game is to encourage more participation and to guide people to see everything that Impact has to offer. There will be prizes for the top participants. What exactly will be announced later.

The last part to announce here is that there is a new tag by sponsors & vendors to indicate if they are hiring.

That is it for now! Make sure to [submit your talk](https://impact.meteor.com/host-a-talk), [sign-up](https://impact.meteor.com/sign-up), let me know if you want to become a [sponsor](https://impact.meteor.com/sponsor) or if you have any other ideas what we can do during the conference!

--------
If you like my work, please support me on [GitHub Sponsors ❤️](https://github.com/sponsors/StorytellerCZ).
React authentication with Context API and React Router v6 (Typescript)
Tags: javascript, typescript, react
Published: 2022-07-25 19:58:00

## Creating a new project
Firstly we'll create a new React project with [Vite](https://vitejs.dev/), but you can choose the best option for you.
To start a new project we'll use the command below:

```
#npm
npm create vite@latest my-auth-app --template react-ts

#yarn
yarn create vite my-auth-app --template react-ts
```

After this we need to install all dependencies generated by Vite.
To do this we'll run:
```
#npm
npm install

#yarn
yarn
```

Well, now we have started our project and have all dependencies installed right.
You will have a folder structure like this in your project:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3duu177wyabqsegcjnsg.png)
 
Before we start to code we'll delete some files from our project to make it cleaner like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c7tpbdwffypgu17d3cr.png)
 
>Do not forget to delete all lines of code that depended of this deleted files

Now, lets install **react-router-dom** to create our routes.
```
#npm
npm install react-router-dom
npm install @types/react-router-dom -D

#yarn
yarn add react-router-dom
yarn add @types/react-router-dom
```

Done! Now we can start coding our components and context.

## Creating our project pages
Basicly in this example we'll need a login page and a homepage that can only be accessed if you are loged in.

I'll start creating a simple homepage like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vp45fgkz5ugcy7krry9.png)
 
And my login page like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu3mktovfw3fgvuisbru.png)
 
 
## Creating our Routes
I started creating our **login** route like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xge7jjrbvfk9q67a9ky3.png)

Passing the **Routes** component inside our **App.tsx**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30g92ri1vw371r19t3ps.png)
 
If you run your app you will get this in **/login** route:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nct15iv4qxxjm9jc63o.png)
 

##Creating context
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vdsw6k0x9i3r7ogy7q4.png)
 
 
## Setting up our Private Routes
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y4jxl0rk9tpb7csb350.png)
 

##Using context inside **Login** page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqxs2bwb3s1i0qleohdw.png)

Done! Now when you click on the **Authenticate button** in Login page you will set up the authenticated state to true and will be redirected to **Homepage**.

This simple project can be find out in github:
https://github.com/GabrielDNeto/React-Authentication-ContextAPI---react-router-dom
ORM vs Core Database Driver
Tags: database, orm, mongodb, discuss
Published: 2022-07-25 19:57:00

Greetings, in this article we will briefly talk about the comparison of ORM and database drivers and which one you should perfer in which situation.

## ORM Pros and Cons

### Pros

- Schemas/Entites are clearly defined.
- Relatively easy to understand and develop
- You can write basic Queries with built-in query-builders
- You don't bother too much with database operations

### Cons

- Low performance
- As it is a pattern applied on top of the engine, it may restrict some advanced operations
- Extra dependencies and possible size growth for the project (the item may sound trivial but will be important when using docker and etc.)

## Database Driver Pros and Cons

### Pros

- High performance
- Takes up minimal space
- Trouble-free guarantee and full documentation as it was developed by the database company

### Cons

- May require expertiese with queries and databases
- Schemas are not clearly defined or have no effect on the database

When, Which?

If you are developing a simple demo, developing a blog, or if time and performance (included build time and performance) is not important to you; your choice should be ORM.

If time and performance (included build time and performance) is your thing, if you're a database expert; your choice should be Core Database Driver.

Here is [an article](https://blog.jscrambler.com/mongodb-native-driver-vs-mongoose-performance-benchmarks) measuring the differences between mongodb and mongoose, there is a really big performance difference.

If you're lazy, there's a table like this at the end of the article.

|READS|	Native|	Mongoose|
|-----|-------|---------|
|Throughput|	1200 #/sec|	583 #/sec|
|Avg Request|	0.83 ms|	1.71 ms|

|WRITES	|Native|	Mongoose|
|-------|------|----------------|
|Throughput|	1128 #/sec|	384 #/sec|
|Avg Request|	0.89 ms|	2.60 ms|

Whay do you think about this subject?
ES6 Magic
Published: 2022-07-25 19:55:39

**

## let num = [12, 11, -22, 111, 2, 1, -02]
**

**find just numbers**
const num2 = num.filter((x) => typeof (x) === 'number')
console.log(num2)//12, 11, -22, 111, 2, 1, 2


**reduce (sum)**
const sum = num2.reduce((a, b) => a + b)
console.log(`sum = ${sum}`) //113

**every**
const everyNum = num.every((a) => a > 2)
console.log(everyNum) //false ...all need true

**some**

const someNum = num.some((a) => a > 2)
console.log(someNum) //true...if any element true

**lowestNum**
const lowestNum = Math.min(...num2)
console.log(lowestNum) //-22

**highestNum**
const highest = Math.max(...num2)
console.log(highest) //111

**evenNum**
const evenNum = num2.filter((x) => x % 2 === 0)
console.log('even ' + evenNum) //12,-22,2,-2

**oddNum**
const oddNum = num2.filter((x) => x % 2 !== 0)
console.log('odd ' + oddNum) //11,111,1

**compare**
const compare = highest - lowestNum
console.log(compare) //133

**sort**

let numSort = [12, 11, -22, 111, 2, 1, -02]
const sort = numSort.sort((a, b) => a - b)
console.log(sort) //  -22,  -2,  1, 2,    11,  12, 'ss', 111

**sort **

let country = ['Bangladesh', 'India', 'Usa', 'Pakistan', 'Australia', 'Japan']
const sortCountry = country.sort()
console.log(sortCountry) //[ 'Australia', 'Bangladesh', 'India', 'Japan', 'Pakistan', 'Usa' ]

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u00g2j8uefd1r9rvshwq.png)
VIDEO: How to grow the skills of a dev team? Effective engineering management
Published: 2022-07-25 19:23:20

Ace helps you to manage and grow the skills of the tech team with insights and recommendations. Effective engineering management.

SIGN UP TO START THE GAME: https://www.getace.io/?utm_source=devto&utm_campaign=main_page

Help your team grow with Ace!

FREE ebooks for engineering management & tech leads: https://www.getace.io/ebooks?utm_source=devto&utm_campaign=ebook_promo
Ace's blog: https://blog.getace.io/
Grow This Grow That podcast: https://community.getace.io/
Instagram: https://cutt.ly/vectorly_inst
Twitter: https://twitter.com/VectorlyHQ
Programação x Alfabetização
Tags: beginners, codenewbie, motivation, devjournal
Published: 2022-07-25 18:38:56

Eu tomei gosto pela leitura ainda criança, graças principalmente ao incentivo da minha mãe que pacientemente me ajudou no frustrante processo de alfabetização, onde um "Igor" criança queria ler jornal, mas não conseguia entender como se formava a palavra a "Pera".🍐

Hoje aos 33 anos posso dizer que sou bom nesse negócio de ler, assim como você que está lendo isso provavelmente também é! 🙌

A reflexão que eu trago é que aprender a programar é como um processo de alfabetização em uma nova linguagem. Hoje você não e mais como sua versão mini aprendendo o "bê a bá" na escolinha e isso tem suas vantagens e suas desvantagens mas sem dúvida nenhuma, as dificuldades são as mesmas!

Você vai ver que e possível controlar satélites em Python, criar uma aplicação web complexa com JavaScript, controlar qualquer tipo de máquina computacional com Java, fazer jogos incríveis com C#!
Mas aí vai olhar pro seu _VSCode_ e ver que não sabe a diferença se "=" e "==". 🤦‍♀️

Calma! Isso é normal! Assim como você não sabia a diferença de "~" e "^" quando estava aprendendo a ler e escrever, a programação e um processo de aprendizagem constante e eu garanto que se você estudar bastante um dia você vai olhar seus códigos e falar: "É... eu sou boa nisso..." 😁

Boa semana, bons estudos e #vqv! 🚀
VIDEO: How to become tech lead? 8 top technical manager skills
Published: 2022-07-25 19:01:24

Are you planning to make a transition from a software developer to a tech lead or are you already there, but wondering what makes a good engineering manager? In this video, you'll find top 8 technical manager skills you need to succeed + educational materials to grow these skills. 

🔗USEFUL LINKS: 
🎯Tech lead skill matrix (and 60+ tech roles): https://cutt.ly/skillmatrix_free
📚Top 15 Engineering Management Books: https://cutt.ly/EM_books
✍🏻Online Platforms to Grow Software Skills: https://cutt.ly/online_cources
🤓12 Popular Mentorship Platforms: https://cutt.ly/mentorship_platforms

💥FREE EBOOK FOR TECH LEADS & ENGINEERING MANAGERS: https://www.getace.io/ebooks?utm_source=devto&utm_campaign=ebook_promo

🚀Try Ace's 14-day trial to mentor your team on autopilot with insights and recommendations - SIGN UP: https://www.getace.io/?utm_source=devto&utm_campaign=main_page

-------------------------------------------------

00:22 - 8 top tech lead skills
00:48 - People management skill group
01:02 - Technical skills group
01:13 - Communication skills group
01:30 - How to improve leadership skills - books, online courses, mentorship platforms
01:42 - Project management skill group
01:54 - Knowledge management skill group
02:04 - Company skill group
02:17 - Team management skill group
02:27 - Personal skills
02:37 - Free ebook for engineering managers and tech leads to improve your leadership skills

-------------------------------------------------

Help your team grow with Ace!

FREE ebooks for engineering management & tech leads: https://www.getace.io/ebooks?utm_source=devto&utm_campaign=ebook_promo
Ace's blog: https://blog.getace.io/
Grow This Grow That podcast: https://community.getace.io/
Instagram: https://cutt.ly/vectorly_inst
Twitter: https://twitter.com/VectorlyHQ
VIDEO: Emotional intelligence for programmers and tech leads
Published: 2022-07-25 18:48:00

In this video, you will find how to improve one of the key skills of a great leader - emotional intelligence. Get useful sources to upgrade emotional intelligence at workplace and a test to assess your level of EQ. Don't forget to subscribe to get our videos first!

🔗USEFUL SOURCES:
💡Tech lead skill matrix (FREE) https://cutt.ly/skillmatrix_free
📚Top books on EQ for managers: https://blog.getace.io/all-posts/emotional-intelligence?utm_source=devto&utm_campaign=blog_promo
🤓Best blogs on EQ: https://blog.getace.io/all-posts/emotional-intelligence?utm_source=devto&utm_campaign=blog_promo
✍🏻EQ test: https://bit.ly/2Lqdl5i

🚀Mentor your tech team on autopilot with insight and recommendations with  Ace SIGN IN for trial: https://www.getace.io/?utm_source=devto&utm_campaign=main_page

-------------------------------------------------

00:23 - 8 top skills of a manager and what's EQ has to do with it 
00:52 - What is emotional intelligence and why is it important for a manager?
01:23 - How to improve your emotional intelligence - books, blogs, test 
02:00 - Free ebook for engineering managers and tech leads to improve leadership skills 

-------------------------------------------------

Help your team grow with Ace!

FREE ebooks for engineering management & tech leads: https://www.getace.io/ebooks?utm_source=devto&utm_campaign=ebook_promo
Ace's blog: https://blog.getace.io/
Grow This Grow That podcast: https://community.getace.io/
Instagram: https://cutt.ly/vectorly_inst
Twitter: https://twitter.com/VectorlyHQ
HackerRank Birthday Cake Candles challenge
Tags: csharp
Published: 2022-07-25 18:35:48

HackerRank has a [challenge for calculating which birthday candles get blown out](https://www.hackerrank.com/challenges/birthday-cake-candles/problem).

My C# solution looked particularly elegant to me, so I thought I'd show it here:

```
public static int birthdayCakeCandles(List<int> candles)
{
        var maxHeight = candles.Max();
        var numOfCandles = candles.Count(c => c == maxHeight);
        return numOfCandles;
}

```
VIDEO: How to hold a review and develop the skills of a team
Published: 2022-07-25 18:33:42

To save employees from monotonous routine, stagnation and burnout, a manager should constantly develop them professionally, and hold skills review. SETTERS chose Ace to assess and motivate their team.

In this video, HR manager at SETTERS Liza will tell how they develop specialists inside the agency, growing juniors into middles and seniors. 

🚀START REVIEW WITH ACE: https://www.getace.io/?utm_source=devto&utm_campaign=main_page
💡FREE skill matrices for 65+ tech roles: https://cutt.ly/skillmatrix_frees

✍🏻Author of the original article: Liza Ryabko, SETTERS https://cutt.ly/SETTERScase

-------------------------------------------------

00:18 - SETTERS main goal is to develop employees inside the agency 
00:36 - 360-degree reviews to assess skills
00:55 - How to hold a review with Ace
02:06 - Review insights
02:20 - Creating growth plans for employees 
02:37 - Main steps to run a skills review 
02:40 - Benefits of using Ace to assess and develop employees


-------------------------------------------------

Help your team grow with Ace!

FREE ebooks for engineering management & tech leads: https://www.getace.io/ebooks?utm_source=devto&utm_campaign=ebook_promo
Ace's blog: https://blog.getace.io/
Grow This Grow That podcast: https://community.getace.io/
Instagram: https://cutt.ly/vectorly_inst
Twitter: https://twitter.com/VectorlyHQ
dropDesk - How I made Jira FRIENDLY!
Tags: webdev, react, rails, dropdesk
Published: 2022-07-25 18:32:00

Have you ever used Jira? I did for one job, and that is definitely one complicated application to use. In comes **dropDesk**.

dropDesk was the final project I built while enrolled in Flatiron School's Immersive Software Engineering bootcamp. My ultimate goal for my final project was to create some type of ticket system with Jira in mind. What sparked the final idea of dropDesk was when I thought about how much is going on in Jira, and how it can become overwhelming. My solution: make it simple and friendly. The tech stack for this project was a React frontend and a Ruby on Rails backend.

Let's take a look:

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

## DROP
dropDesk is named after the drag and drop functionality I added to it using the React-Beautiful-DnD library. This library allows you to drag and drop items on the webpage to different parts of the page, which is all configured manually. So, you can only drag and drop into a specific place on the page!

Create your ticket in the category of your choosing:

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

Then, drag the ticket between the categories to change it's current category! Simple enough!

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

## Scaling the app
The app is currently still being developed to be a full scale app. The next phase of development for this app is to allow users to create separate teams. What's great about this feature is that you could choose to create a team of your own and use it as a task tracker, or a company can create different teams for within the company which can be moderated by admin users. 

Please feel free to explore the application here: [https://dropdeskapp.herokuapp.com/](https://dropdeskapp.herokuapp.com/)

The source code can be found here: [https://github.com/bradbieselin/dropDesk](https://github.com/bradbieselin/dropDesk)

If anyone has any questions or suggestions, please comment below! The project is open source as well!
Acessibilidade na web
Tags: programming, webdev, html, css
Published: 2022-07-25 18:23:00

## Introdução....

Acessibilidade é um tema muitas vezes dito mas pouco discutido...
Vai além de incluir alt e title em tag de imagens.

---

<center>![Imagem de código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe0bl3yt9byu4js8xkn2.png)</center>