teleren/devto huggingface dataset:
How should I go about making multiple concurrent api calls from FastAPI ?
Tags: python, fastapi, asynchronous, api
Published: 2020-12-04 04:58:08

I am currently supporting an API that generates a report for my team using the python framework FastAPI. One of my endpoints makes a call to function called generate which in turn makes 4 calls to the same service to get different pieces of data for the report being built. The extract function is synchronous and takes about 10 - 15 seconds per call to get data.

For now, I would like to keep my '/report' endpoint synchronous but I would like to concurrently make those 4 calls in the generate function below to speed up response times. How should I got about achieving this in FastAPI. Should I spawn threads? Should I use something within the framework to achieve this ?

```
@app.route('/report')
def fetch_report():
    return report.generate()
 

 def generate():
  #would like to call these at the same time essentially
  data1 = reporting_datasource.extract(r1)
  data2 = reporting_datasource.extract(r2)
  data3 = reporting_datasource.extract(r3)
  data4 = reporting_datasource.extract(r4)
  
  return { 
    'part1' : data1,
    'part2' : data2,
    'part3' : data3,
    'part4' : data4
  }
```
JavaScript loop querySelectorAll results
Tags: javascript
Published: 2020-12-04 04:48:01

Let's talk about NodeLists, the magical results of a `querySelectorAll()` query.

It's not an array, but it looks and behaves like one.
It can be tricky looping over these elements, and there are multiple ways of looping them.

How the selector looks like:

```js
const items = document.querySelectorAll('li');
console.log(items);
```

The result:

![JavaScript NodeList](https://cdn.hashnode.com/res/hashnode/image/upload/v1606630706569/25bsXupBM.png)

## 1. Basic for loop

This is by far the best supported method, if support as many browsers as possible this is the way to go.

```js
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    console.log(`Text = ${items[i].innerText}`);
  });
}
```

It's just not the most modern or visible appealing method.

## 2. for...of loop

We can also use the `for...of` loop.

```js
for (const item of items) {
  item.addEventListener('click', () => {
    console.log(`2: Text = ${item.innerText}`);
  });
}
```

This is supported by all modern browsers and work pretty well.

## 3. forEach loop

My all-time favourite too loop NodeList elements is the forEach loop.

It's the most easy method, but will only work in modern browsers.

```js
items.forEach(item => {
  item.addEventListener('click', () => {
    console.log(`3: Text = ${item.innerText}`);
  });
});
```

This method can be extended by converting it to an array before.

```js
[].forEach.call(items, function(item) {
  item.addEventListener('click', function() {
    console.log(`3.1: Text = ${item.innerText}`);
  });
});
```

Or, we can use the spread operator to convert it into an array:

```js
[...items].forEach(item => {
  item.addEventListener('click', () => {
    console.log(`3.2: Text = ${item.innerText}`);
  });
});
```

There you go, three ways (+ iterations) on how to loop over nodeList elements.

You can also have a play around with this Codepen.

{% codepen https://codepen.io/rebelchris/pen/qBaEVyQ %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Array methods: find
Tags: javascript, node, tutorial, programming
Published: 2020-12-04 04:35:03

The **find** method receives a callback function that is used as a testing function and, optionally, an object to use as _this_ inside. This returns the value of the first element in the provided array that satisfies the testing. Otherwise, the **find** method returns _undefined_.

```
const array = [
 {name: 'Emilia', age: 4},
 {name: 'Freddy', age: 10}
];

const preschooler = array.find(kid => kid.age < 5);

console.log(preschooler);
// { name: 'Emilia', age: 4 }
```

### Parameters

1. **callback**
Testing function to execute on each value in the array, taking 3 arguments:
> **element**
The current element in the array.
 **index** (Optional)
The index (position) of the current element in the array.
 **array** (Optional)
The array that _find_ was called on.

2. **thisArg** (Optional)
Object to use as this inside callback.

**find** is a method very useful in order to encounter a specific element into an array, providing a function that will be invoked on each element until finding the value that satisfies the testing. Therefore, be careful, the usage of this method in some cases can be inefficient.
Build Your first React app
Tags: react, reactnative, tutorial, npm
Published: 2020-12-04 04:33:29


React is a opensource  & a one  of most popular javascript front-end frameworks for building web application  & for create dynamic apps in 2020. It is created by faceboook.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

###  System Setup
Before really starting with React we first need to make sure that the basic system setup is available.

* The first prerequisite which needs to be installed on the development system is Node.js and NPM (Node.js Package Manager). NPM comes bundled with Node.js, so you only need to make sure that you have Node.js installed. <br>
* Use Vscode editor for React development , it will  help  to make work easier, 
* You can quickly check if an up-to-date version of Node.js is already installed on your system by executing the following command: <br>
* To check Node  version use  terminal

>	``` node --version``` 

* To check NPM version use terminal 

>	``` npm --version ``` 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ry5xl7ua58ck10s3c89q.jpg)
### Getting started with react

For getting started with react just need to  setting up for new react project is to use the create react app script ,to execute this script we need to use npx , by this command which make it possible to execute the script without prior downloading the package :  

* Write this command in terminal 

> ``` npx create-react-app my-react-app ``` 	
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wuljkf9cfbtj5um6dw4i.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zkeozx7tv4lapj6wdc1s.png)
Here a my-react-app is project name , you can use any name as project name .

* If you didn't have install npm you can install by following command :

> ``` npm install -g create-react-app ``` 	

 Check version of npm 

> ``` create-react-app --version ```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ywhfg7q5mhko9qtvsr7.jpg)
Looking for art? Here are the awesome designs 
Tags: uiweekly, flutter, design
Published: 2020-12-04 04:32:10

Hello guys,
During this lockdown, I tried out new UI designs using Flutter which turned out really awesome📱. 
You can find these designs on my GitHub: 
https://github.com/Chromicle/awesome-flutter-ui
please give a star⭐️ if you like them, any feedback is welcome

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0r52kiachg6zp7u5boqs.png)
100 Days of Code: Day 2
Tags: swift, ios, codenewbie, beginners
Published: 2020-12-04 04:28:48

I'm almost done for today, but I wanted to make sure I got this down I shut down. 

Today I learned the prime differences between `class` and `struct`. In general, it's recommended to default to a `struct` because they create new instances of an object rather than point to the same object in the way that classes do.

Example: If I have `struct` of my fat cat, Thor. He can be initialized and create a whole new Thor. Any changes to your Thor, like actually getting him to lose weight and not be such an asshole, would only apply to that particular instance of a Thor. My Thor would continue to yell at me any time I go into the kitchen because he hasn't gotten a treat for... I'm not sure why he thinks he deserves them.

But with a `class`, any instance of a Thor points back to the same foul tempered chunk. I don't hate Thor. Far from it, we're at that point in our relationship where we can we can look each other in the eye and call each other scum, but know we mean the opposite.

Maybe this will help explain what I mean.

`struct Thor {
   var weight: Int
   var attitude: String
}`

You could initialize and clone that Thor all you wanted
`var thor1 = Thor(weight: 100, attitude: "shit")
 var thor2 = thor1
And so on. Any changes to thor1, would be completely independent of any changes to thor2.

You could `thor1.weight = 13` and `thor2.weight` would remain unchanged at 15. Still just as fat as ever.

If you tried to do the same thing with a `class`, it's a different story...

`class Thor {
   var weight: Int
   var attitude: String`

  `init(weight: Int, attitude: String) {
      self.weight = weight
      self.attitude = attitude
   }
}`

First thing you'll notice is the memberwise initializer inside the class. Had there been a default value for `weight` and `attitude`, we could have skipped it like we did with structs. Those values will still have to be passed when the object instance in created, but it's not necessary. Without default values and only types, they are necessary. Xcode will remind you before you even get to that line.

Now let's make some cats.

`var thor3 = Thor(weight: 15, attitude: "hungry")
 var thor4 = thor3`

If you did a `thor3.weight = 13`, then `thor4` would also have the weight property value of 13. That's because unlike a `struct` that constantly creates new instances of itself when there's changes and re-inits, a `class` points back to the same initial instance. Like a cat thinking that every time I go to the kitchen, it's to feed them. 

There's more to difference that just this. You can `sub-class` a `class`, but you can `sub-struct` a `struct`. That's another conversation, but I really feel that this is the main thing for me to take away from today.

That and I love this little guy:
![Thor](https://dev-to-uploads.s3.amazonaws.com/i/09y5hl81nnoduz1zkis2.jpg)
Team 14 Recap
Tags: earlycareerdevelopers, collablab, juniordevelopers, react
Published: 2020-12-04 03:35:27

The Collab Lab's 14th team wrapped up last week! This one has been really special to me as it's the first one (but not the last one!) that happened **completely in Spanish**!
For me, it felt like a dream came true. If I had told myself one year ago that I'd be mentoring people from Latin America fully in Spanish, I would had laughed at myself!

![](https://cdn.zappy.app/aae8e30f61d06fbc3436211cba509bc8.png)

## The Participants
- [Lizeth Bañol](https://www.linkedin.com/in/lizeth-b-230ab2112/)
- [Andrés Espejo](https://www.linkedin.com/in/jefferson-andr%C3%A9s-espejo-goez-591b201ba/)
- [Manuela Jiménez](https://www.linkedin.com/in/manuela-jimenez-code/)
- [Yesika Castillo](https://www.linkedin.com/in/yesika-castillo/)

## The Mentors
- [Dani Gomez](https://www.linkedin.com/in/danigomezdev/)
- [Tito Agudelo](https://www.linkedin.com/in/titoagudelo/)
- [Alejandro Ñáñez (me!)](https://www.linkedin.com/in/alejandronanez/)
- [Stacie Taylor](https://www.linkedin.com/in/therealstacie/)

## The Project
They got together as a team, and built a web application using **React.js and Firebase** that's deployed to **Netify** during 8 weeks.
They went from a really basic looking application, to this beautiful piece
![](https://cdn.zappy.app/5e3547d30f2340101d2c83ef25d55ea9.png)

They, like the real software development team the are, had some trouble meeting some deadlines in the last couple of weeks, but they put it together and managed to complete everything they had in mind before the end of the 8th week. I have to say that I'm really proud of them and what they accomplished.

👏👏👏👏👏
December 3rd, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-12-04 03:34:57

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![A picture it a dog waving their paw with the caption “Learning, cool at school or at home”](https://media.giphy.com/media/1xpm1nTQiRL96Di3Q6/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% https://dev.to/devteam/what-was-your-win-this-week-2e3d %}

<center>

![Drama from Entourage screaming “Victory!”](https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif)
</center>
What is Docker?
Published: 2020-12-04 03:32:05

You keep hearing about it, but you don't really know what it is and why we use it.

Let's explain

Let's say that you have a big house that you bought, and you want to rent this out to multiple tenants.

The house has no walls in it and all the tenants are therefore living in one big room.  

This house represents the server.

![Image-House](https://davidtruxall.com/wp-content/uploads/2020/06/House-01-1-1536x1187.png)

Obviously, each tenant has their own taste for furniture. 

Tenant 1 might want classical furniture. Tenant 2 might want modern furniture. 

If they were all in one big room, tenants are going to clash. That looks awful and they would get into arguments!

So what do you do?

Exactly! You build separate rooms for each tenant. 

![Image-Containers](https://davidtruxall.com/wp-content/uploads/2020/06/ApartmentBuilding-01-1-1536x1187.png)

They will all have their own isolated environment which they can fully furnish however they want, without having to worry about other tenants. 

Happy tenants and happy house!

**Docker is a tool designed to make it easier to create, deploy, and run applications by using containers.**


Containers are isolated from one another and bundle their own software, libraries, and configuration files.

These containers represent the rooms in our analogy.


Docker allows you to host completely different applications (tenants) in separate containers (rooms) on one server (house).

![Finalize](https://davidtruxall.com/wp-content/uploads/2020/06/ApartmentComplex-01-1-1536x1187.png)

Awesome right!

*~ Siddhant Khare*
Paginas Estaticas vs Paginas Dinamicas
Published: 2020-12-04 03:29:31

Paginas estáticas: 

Son aquellas que tienes poca o nula interacción con el usuario, generalmente informativas, un ejemplo de estas puede ser alguna "Landing page". La información en este tipo de paginas no cambia, si se genera un cambio, este es sutil y en periodos extensos de tiempo.
Estas paginas no están conectadas a una base de datos ya que los cambios se generan del lado del servidor, no del cliente.


Paginas Dinámicas:

Este tipos de paginas pueden denominarse web apps ya que tienen funciones avanzadas que le permiten interactuar con el usuario.
Estas paginas están conectadas a una base de datos que hacen posible la interacción con el usuario, asico como el almacenamiento de información, por ejemplo la información de un formulario de login.
AuthN vs AuthZ
Tags: security
Published: 2020-10-23 10:44:56

When you do some "login stuff" nowadays you may stumbled upon the  terms *AuthN* and *AuthZ*. Maybe you wondered what these "N" and "Z" means? Short answer:

- *AuthN*  stands for *Authentication*, and
- *AuthZ* stands for *Authorization*.

That's easy right? We're done for this blog post 🙃

## Authentication vs. Authorization

But what is the difference of these two terms? Is it not the same? Short answer: No, it isn't!

### Authentication

*Authentication* is all about who you are. In the most simple form when you type a username and password somewhere. In a more complex scenario – eg. when you buy a TLS certificate – when you go to a notary showing your identity card.

So *authentication* is the process of verify that you are the person you are pretending to be.

### Authorization

*Authorization* is all about what you are allowed to do. In the most simple form you are allowed to clone a Git repository and push into it, but you are not *authorized* to delete branches in that repository. *Authorization* must be granted by an entity which have more rights (is privileged) than you. Eg. when you want to buy a new laptop you request this to your boss and she authorizes this by granting or declining it.

So *authorization* is the process of verify what you are allowed to do.

## Last Words

*Authentication* can be used without *authorization* but vice versa is not possible. To *authorize* someone or something – not only natural persons may be *authenticated* or *authorized*, but also entities like computers, servers, APIs, etc. – it is required to *authenticate* first to know who you grant or decline access (*authorize*). Eg. when you walk around in a large factory there may be *restricted areas* with a security guard protecting it. You must show him your corporate identity card for *authentication*. Then the guard looks up in his system if you are allowed to access that ares (*authorization*) and grants or declines that you go on.

First posted at https://blog.weltraumschaf.de/blog/AuthN-vs-AuthZ/
Botty. A basic conversational bot using socket.io and nodeJS (open source).
Tags: node, javascript, showdev, webdev
Published: 2020-12-04 03:24:39

![logo](https://dev-to-uploads.s3.amazonaws.com/i/znad12gzvp0cqjnlq2d3.jpg)


Whilst working on my latest [React coding challenge](https://github.com/alexgurr/react-coding-challenges), a  messaging client with sockets, I ran into the need for a simple backend to facilitate a bot conversation.
 
I've been spending quite some time lately scouring the internet for a free, easy-to-use conversational bot without much success. I tried to set up a bot service through Microsoft Azure, but it's definitely **not** an easy process and didn't get anywhere. There aren't really any API offerings either, certainly not any free ones.

**[Botty](https://github.com/alexgurr/botty)** is a nodeJS based, socket server that provides basic automated conversations. There's no AI, no smarts or anything complex. You provide a dataset of request/responses and it uses string pattern matching to work out the most accurate response it can find. It's highly customisable and comes with a bunch of *natural* behaviours out the box, such as typing events and pauses. I've sourced a pretty good dataset with a bunch of basic responses to get started.

You can check Botty out on GitHub [here](https://github.com/alexgurr/botty) or use the hosted version at [https://botty-beep-boop.herokuapp.com](https://botty-beep-boop.herokuapp.com). There's nothing like Botty available at the moment, and everything's open source.
Animating Text Content with Redash and Reanimated 2
Tags: debugwithme, indiejournal, uncategorized
Published: 2021-02-04 17:03:45

---
title: Animating Text Content with Redash and Reanimated 2
published: true
date: 2020-12-04 03:18:53 UTC
tags: DebugwithMe,IndieJournal,Uncategorized
canonical_url: https://mrmurphy.dev/animating-text-content-with-redash-and-reanimated-2/
---

On Cyber Monday I sprang for [William Candillon's course on animation with React Native](https://start-react-native.dev). I love his style. And I like how beautiful his examples are. However, it took me a few minutes to understand that he's basing all his work on two libraries, [Redash](https://github.com/wcandillon/react-native-redash), and [Reanimated](https://docs.swmansion.com/react-native-reanimated/). These tools are super powerful, and I'm off to a strong start building lovely app animations, but I ran into a couple of problems while getting started.

1. `TypeError: global.__reanimatedWorkletInit is not a function`

I got this error the first time I tried to use Redash. I had installed both it and reanimated, imported a hook, and tried to use it. But the app immediately crashed. I resolved it by importing reanimated at the top of the file:

```
import "react-native-reanimated";
import ...
```

1. Animated string values would cause a rerender in the UI.

With `useDerivedValue` I transitioned a string into existence by animating its length. However, when I passed the `Animation.SharedValue<string>` to a `Retext` component and tested it out in my app, there was no animation.

Thanks to [an answer this github issue](https://github.com/wcandillon/react-native-redash/issues/399) I fixed that problem by whitelisting text as an animatable prop:

```
Animated.addWhitelistedNativeProps({ text: true });
```

After adding that line to the top of the file, my views updated without a problem as the text animated.
Code Smell 42 - Warnings/Strict Mode Off
Tags: oop, codenewbie, webdev, tutorial
Published: 2020-12-04 03:14:44

*Compilers and warnings lights are there for help. Don't ignore them.*

# Problems

- Missed Errors

- Ripple Effect

- Fail Fast

# Solutions

1. Enable all warnings

2. Enable preconditions and assertions in production.

3. [Fail fast](https://dev.to/mcsee/fail-fast-48dm)

4. [Design by contract](https://en.wikipedia.org/wiki/Design_by_contract)

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/d4f19089543214fbc677a846967cb501)
```javascript
array = [];
console.log(array['1'])
//undefined but keep going on

hiddenGlobal = "I am a global"

console.log(hiddenGlobal)
//  I'm a global
``` 

## Right

[Gist Url]: # (https://gist.github.com/mcsee/4523879f8fd11134654d4683b5c68ceb)
```javascript
array = [];
console.log(array['1'])
//Index Error

noGlobal = "I am not a global"

console.log(noGlobal)
// ReferenceError

var noGlobal = "I am not a global"

console.log(noGlobal)
// I am not a global
``` 

# Detection

Most languages have warning levels. We should turn most of them *ON*.

We should run linters to statically analyze our code for potential problems.

 # Tags

- Fail Fast

# Conclusion

If we ignore warnings and code moves on sooner or later it will fail.

If the software fails *later* it will be very difficult for us to find root cause. 

Defect will likely be near first warning and far away from the crash.

If we follow the *Broken Windows Theory*, we should not tolerate any warnings, so a new issue will not pass unnoticed on a sea of *tolerated* warnings.

# Relations

{% post https://dev.to/mcsee/code-smell-19-optional-arguments-48gc %}

{% post https://dev.to/mcsee/code-smell-12-null-la4 %} 

# More info

{% post https://dev.to/mcsee/fail-fast-48dm %} 

- [Use strict in javascript](https://blog.rahulism.co/use-strict-in-javascript)

# Credits

Photo by <a href="https://unsplash.com/@electronicsocks">Noah Dominic Silvio</a> on <a href="https://unsplash.com/s/photos/traffic-light">Unsplash</a>

* * *

> One man's crappy software is another man's full time job.     

_Jessica Gaston_
 
* * *
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}