teleren/devto huggingface dataset:
STRAPI - Fetching data belongs to a model through another relationship (Graph database)
Tags: strapi, database, javascript, discuss
Published: 2022-03-14 07:35:22

Suppose we have the following in schema:
- country
- homepage
- topics
- sources
- sections
- articles

And this is how they are related

![ER diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzo4g5liicnwpiw0j7t4.png)
- homepage `has one` country.
- homepage `has many` topics.
- homepage `has many` sources.
- topics `belongs to many` sections.
- sources `belongs to many` sections.
- sections `belongs to many` articles.

***Requirement:***
Get top 10 the articles for homepage having country id as `countryId` sorted by `attribute_name`.

My Approach:

```javascript
async function findTopArticleByCountryId({ countryId, sortBy = 'likeCount' }) {
  try {
    const response = await strapi.connections.default.raw(
      `SELECT * FROM articles WHERE section IN (
        SELECT id FROM sections WHERE 
        topic IN (
          SELECT id FROM topics WHERE homepage IN (
            SELECT id FROM homepage WHERE country = ${countryId}
          )
        )
        OR service IN (
          SELECT id FROM sources WHERE homepage IN (
            SELECT id FROM homepage WHERE country = ${countryId}
          )
        )
      ) ORDER BY ${sortBy} DESC LIMIT 10;`
    );
    const [articles] = response;
//sanitize articles entity
    return articles;
  } catch (e) {
    console.log(e);
    return false;
  }
}
```
Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.
Understanding Docker in a visual way (in 🎥 video): part 12 – Pass environment variables
Tags: docker, devops, containers, beginners
Published: 2022-03-14 07:06:59

---
title: Understanding Docker in a visual way (in 🎥 video): part 12 – Pass environment variables
published: true
description: Serie of videos about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, containers, beginners
series: Understanding Docker in a visual way - in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gpuglnydvglimdmqvi2.jpg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Docker (and others technologies).

The 12th episode is talking about how to pass environment variables?

{% youtube WXn72mNlRU0 %}

The video is in French BUT I done the subtitles in english (and french too).

And the bonus of this article, here you can find all the sketchnotes and illustrations of the video:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9j0dhfffsiuwojpdiasd.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is3deemkkw8xp1q2s39m.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7it7cqnllh5kpopdasje.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1cs717ou8t2q5sav9ux.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75p9o7iaclf0hz262f6z.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkj7wf041lltz9e0crso.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugm5ma08mwb1fjgt3phz.jpg)

You can find all the commands you can see in this video and sketchnotes in the following GitHub repository:

[![scraly GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijdpc19o3w30eo6x3j1k.png)](https://github.com/scraly/understanding-docker-in-a-visual-way)

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/c/AurelieVache), if you want to ❤️).

I can also give you, in an article, the full english transcript and sketchnotes in high quality, about this video, if you are interested.

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 120 pages: ["Understanding Docker in a visual way"](https://aurelievache.gumroad.com/l/understanding-docker-visual-way).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
A new way to implement modern auth
Tags: oidc, saml, oauth, nocode
Published: 2022-03-14 06:16:10


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nnxfiiqjgmdu5j6qzok.png)
https://twitter.com/datawiza_com/status/1503164472893984768?s=20&t=EbFLiKUMQ4zaV6HZp17ypQ
P1 - Play Real Steel Boxing with your voice 🔊🔊 - Atom (The People's Champion)
Tags: hackwithdg, beginners, python, tutorial
Published: 2022-03-14 06:06:15

### Overview of My Submission
Have you ever wondered how the voice recognition in the **Noisy Boy** from **Real Steel movie** works. For people who are new to Real Steel and haven't watched that movie yet. Watch at least the trainer and continue here.
I was wondering if I could do the same with Deepgram's real-time speech to text api. The result of two day hustle and surprise!! surprise!! It just worked.
### It really really works 🐱‍🏍
I initially with the impression it won't since there is a considerable latency between the time you say something, it has to process it, send it back and the action will take place after __100 ms__ or so. But this was instantaneous or too close __less than 3 ms__. Seems like you can take on any league games on World Robot Boxing.

#### You're in for a treat 🍬🎮

### Submission Category: Gram Gamers and Wacky Wildcards

-

### Latency Log from Python Standard Logging module
#### My Laptop Specs - Tested
- HP Omen 15 (2018)
- 16 GB RAM DDR4
- Intel Core i7-8750H @2.20 GHz
- GTX 1060 - 6 GB GDDR5

![Latency log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gabhjdgp7fs4l24qwuwt.jpg)

## Game on fellows!!
![Bring it on!!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8m8zk1yfctrofjptqni.gif)

### 📌What's next? 
- Live Demo on YouTube
- Make GitHub repo public (needs more finetuning work)

## Catch you all in the 2nd series of this project


{% embed https://dev.to/sandy_codes_py %}

## Let's connect
#### [LinkedIn](https://linkedin.com/in/santhosh-kumard)

#### [Instagram](https://www.instagram.com/santhoshgoku)

#### [Twitter](https://twitter.com/sandy_codes_py)
Create a CICD Pipeline using AWS CodeCommit, CodeBuild | Part-1
Published: 2022-03-14 05:58:57

## Pre-requisites:

- You should have an AWS account created and you should sign in as IAM-User and not the root user.

- Git installed in your machine

The pipeline created during this tutorial will start execution when changes are made in code repository and search for the word “Congratulations” in the sample.html present in code repository if the word is not present the pipeline will result in **Failed** status.

## Step 1:
 
Get the Git credentials to clone the codecommit repository in the local machine.

## Step 2: 
Create a CodeCommit Repository

## Step 3: 
Clone the codecommit repository in the local machine.

## Step 4: 
Create any sample file and push it to the codecommit repository.

## Step 5: 
Create a **CodeBuild Project**

- A codebuild project is created wherein, while executing the pipeline in build stage, linux command to search for word “Congratulations” in the **sample.html** file will be mentioned in the **buildspec.yml** file.

- Add the **buildspec.yml** file at the root of CodeCommit repository. 

## Step 6: 
Create a pipeline, using AWS CodePipeline

- Choose **AWS CodeCommit** as SourceProvider and select the Repository Name and Branch Name.

- For pipeline to get triggered when there is a change in the code repository, we will **AWS CloudWatch Events** in **Change Detection Options**

- Choose the **Build Project** created, in the Build Stage.


Pipeline in execution when changes made in CodeCommit.

## Execution

- Pipeline failed since “Congratulations” word is not present in sample.html

- Now we will make change in sample.html and add “Congratulations” word and pipeline will be successfully executed.


{% youtube 5zHO-TZ3npc %}
Implementing "groupBy" function on array of object
Tags: javascript, typescript
Published: 2022-03-14 05:56:08

## **Moltivation**

 There is a an array method called `groupBy`, i checked the description of the method and saw it as a handy method for grouping array of object base on a key that exist on an object of the array.
- [MDN - groupBy reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/groupBy)

As of the time of this writing, i tried it out on my browser but OOPS!! no luck because it is not supported by any browser, i tried using it with typescript but no luck either, ran it with node(v16.14.0) REPL no luck either,i decided to implement it myself since i have read the description, thus the moltivation !!!!


## **Problem**

Let's say we have have some group of data as array of object

```ts
  const inventory = [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
    { name: 'bananas',  type: 'fruit', quantity: 0 },
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'cherries', type: 'fruit', quantity: 5 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ];
```

using typescript we would define an interface over `inventory` as 
```ts
 interface Inventory {
    name: string;
    type: string;
    quantity: number;
  }
```
Now we want to be able to group `inventory` base on a key that exist on inventory. `typescript` will let us do that with ease such that the result looks like this when we decide to group by `type` on inventory

```ts
{
  vegetables: [ 
    { name: 'asparagus', type: 'vegetables', quantity: 5 } ],
  
  fruit: [
    { name: 'bananas', type: 'fruit', quantity: 0 },
    { name: 'cherries', type: 'fruit', quantity: 5 }
  ],

  meat: [
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ]
}

```

## **My groupBy function**

my solution function now looks like this

```ts
function groupBy<T>(collection:T[],key: keyof T){
   const groupedResult =  collection.reduce((previous,current)=>{

   if(!previous[current[key]]){
     previous[current[key]] = [] as T[];
    }

   previous[current[key]].push(current);
          return previous;
   },{} as any); // tried to figure this out, help!!!!!
     return groupedResult
 }
```
now we can call the inventory in this manner 
```ts
  console.log(groupBy<Inventory>(inventory,"name"));
  console.log(groupBy<Inventory>(inventory,"quantity"));
  console.log(groupBy<Inventory>(inventory,"type"));
```

**Notice** the explicit indication of the generic type `Inventory` on the `groupBy` function at function call is for emphasis and not neccessarily needed since typescript will `infer` the generic type.

## **Conclusion**
This is my implementation of the `groupBy` function and i have been using it for sometime now and i decided to share, let me know if there is more efficient way of doing this or if there is something i might do to improve the code. This approach is subject to change. Thanks.
Getting Started with the Blazor Heatmap Chart
Tags: webdev, blazor, csharp, dotnet
Published: 2022-03-14 05:46:45

This video will get you started with the Syncfusion [Heatmap chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in a Blazor WebAssembly application. You will learn how to plot data points, create a bubble heat map chart, and customize the axis, palette, dimensions, and tooltip. 

Download an example from GitHub: https://github.com/SyncfusionExamples

Refer to the following documentation to learn about the Blazor Heatmap chart component: https://blazor.syncfusion.com/documentation/heatmap-chart/getting-started

Check out this online example of the Blazor Heatmap chart component: https://blazor.syncfusion.com/demos/heatmap-chart/default-functionalities

{% youtube 0SAf_S4HFS4 %}
How to Use PhenQ Supplement?
Published: 2022-03-14 05:23:50

The effect will be even greater if it is focused on [PhenQ](https://ipsnews.net/business/2022/03/10/phenq-2022-fat-burner-work-or-waste-of-money-and-time-shocking-21-days-results-and-complaints/). How do hordes receive exemplary Weight Loss Supplements assets? It does matter which you pick. 



[https://ipsnews.net/business/2022/03/10/phenq-2022-fat-burner-work-or-waste-of-money-and-time-shocking-21-days-results-and-complaints/](https://ipsnews.net/business/2022/03/10/phenq-2022-fat-burner-work-or-waste-of-money-and-time-shocking-21-days-results-and-complaints/)
[https://www.youtube.com/watch?v=Yi6Iw8N43yI
](https://www.youtube.com/watch?v=Yi6Iw8N43yI
)https://phenqoffer.blogspot.com/2022/03/phenqbuy.html
[https://www.facebook.com/Health-And-Fitness-105019168641509
](https://www.facebook.com/Health-And-Fitness-105019168641509
)
[https://www.linkedin.com/events/6908995456698064897/](https://www.linkedin.com/events/6908995456698064897/)
[https://twitter.com/healthandfits01](https://twitter.com/healthandfits01)
[https://www.pinterest.com/pin/996984436231768097/](https://www.pinterest.com/pin/996984436231768097/)
[https://vimeo.com/687802743](https://vimeo.com/687802743)
[https://www.youtube.com/watch?v=bUN5Dl0RpFM](https://www.youtube.com/watch?v=bUN5Dl0RpFM)
[https://linktr.ee/phenqgetnow](https://linktr.ee/phenqgetnow)
[https://lexcliq.com/what-are-the-benefits-of-phenq-pills/](https://lexcliq.com/what-are-the-benefits-of-phenq-pills/)
[https://phenqbuy.tumblr.com/](https://phenqbuy.tumblr.com/)
[https://sites.google.com/view/phenqoffer/](https://sites.google.com/view/phenqoffer/)
[https://groups.google.com/g/phenq/c/Hn8z0Q01O4g](https://groups.google.com/g/phenq/c/Hn8z0Q01O4g)
[https://kit.co/phenqbuy](https://kit.co/phenqbuy)
Result Macau Live Hari Ini Tercepat– Keluaran Macau Pools
Tags: resultmacau, totomacau, keluaranmacau
Published: 2022-03-14 05:03:20

Result Macau Live Hari Ini Tercepat– Keluaran Macau Pools

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24u0euii88y8zgtdq075.jpg)
Result **[Keluaran Macau](https://glueclothingexchange.com)** Live ialah suatu web yang sediakan data sekeliling No Togel Macau yang pergi hari ini serta pastinya hendak senantiasa pembaharuan cocok agenda keluaran pasaran itu, untuk para pembaca sekaligus yang lagi mencari Hasil Keluaran Macau hingga dikala ini kamu terletak di web yang pas sebab web ini ialah salah satu web fasilitator data Result Togel Macau yang terupdate serta tercepat dan dapat di yakin seluruhnya.

Pastinya seluruh No Togel Macau mlm ini didapat langsung dari web sah mereka ialah Totomacaupools. com serta hanya data bonus buat para pemeran pendatang baru, kalau Pasaran Toto Macau terdapat tiap tiap hari serta Nomor Result Macau hendak diupdate pada jam 13: 00 Wib, 16: 00 Wib, 19: 00 Wib, 22: 00 Wib.

Lumayan hingga disini saja ulasan kita hal Toto Macau Live yang dapat kita sampaikan serta diharapkan dengan terdapatnya postingan ini dapat berguna untuk para pembaca sekaligus, tidak kurang ingat kita ucapkan terimakasih banyak sebab telah bertamu ke web ini sebab telah mau mengosongkan durasi buat tiba ke laman ini.
Estamos vivendo uma era estranha...
Tags: reflexao, ti
Published: 2022-03-14 04:42:56

Estamos vivendo uma era estranha…
=================================

![](https://miro.medium.com/max/1400/1*yOqM0r31Nn-C3zxJxu8rzg.jpeg)

Este é o mantra de 2020, tudo é estranho nesse ano, o frio já não é o mesmo frio, o calor tambêm não, as relações estão esfriando cada vez mais. Aumenta o número de plataformas de Streaming, aumenta o número de pessoas nas redes sociais, proporcionalmente as pessoas estão cada vez mais distantes e para uma raça acostumada a viver em sociedade, surge um novo pesadelo: O distanciamento social.

Esse novo conceito que rapidamente entrou em nossas vidas, surgiu para aumentar ainda mais a estranheza dessa nova era, sim não à como dizer que não é (uma nova era), seria inocência demais não perceber que tudo mudou e nunca mais voltará a ser como era antes.

Os abraços serão suspeitos; _“Será que ele incuba algum novo virús?”_ Poderemos pensar… Uma simples volta no parque terá aquele gosto amargo que as pessoas decentes sentem quando acham que estão fazendo algo errado. O tom de voz, terá de se virar para se impor ou ser gentil em uma reunião de negócios, já que a boa e velha linguagem corporal, (ainda) não é tão bem capturada pelas milhões de câmeras que transmitem, ainda que em qualidade razoável, o interior da casa de milhares de trabalhadores ao redor do mundo.

É uma nova era, nunca se falou tanto de dados, nunca se valorizou tanto uma informação, nunca se soube tanto sobre tudo e ao mesmo tempo não sabemos o suficiente para confiar; Seja no governo, na ciência, na pessoa que dorme ao nosso lado, seja no nosso próprio celular.

É uma nova era, uma estranha nova era…
Working with Vercel
Published: 2022-03-14 04:03:48

Vercel is a platform for frontend frameworks and static sites and it is used to integrate content, commerce, and database. It takes care of difficult things such as deploying, scaling, and serving personalized content.

## Getting started with ist-vercel-demo

- First, you will need to connect your Github account to your Vercel account because this allows Vercel to access your repositories from Github and import them. 

- Then, I had to do `git clone ` this [repo](https://github.com/btopro/ist-vercel-demo) and add a `.env` file.
- After, I ran `npm install` and `vercel dev`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vdlgqplh1m9gukoi1it.png)
- One thing I was having trouble with was in the Project Settings of the certain project, the output directory was incorrect. Vercel couldn't find the output directory. I was able to figure out that is uses dist, so I changed it to that.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks35p0gdpxr6ryj6g2fp.png)
- Check [here](http://localhost:3001/) for my project.

I was having some trouble deploying the 11ty site, so I was unable to show an final product. Once I fix it, I will show my work.

## Developer Experience

- With what worked, I can see the Vercel is much easier and simpler to use compared to Github.
Firefox 98, Polypane 8.1, Node v17.7.0, React 18 Release Candidate, and more | Front End News #055
Tags: news, newsletter, frontendnews
Published: 2022-03-14 03:58:00

> **NOTE:** This is issue #055 of my newsletter, which went live on Monday, March 14th. If you find this information useful and interesting and you want to receive future issues as they are published, ahead of everyone else, I invite you to join the subscriber list at [frontendnexus.com](https://frontendnexus.com/).

***

It has been another quiet week in the web industry, with the only significant news coming from the browser section. Firefox is rolling out version 98 to users. Polypane has been updated to version 8.1. And the software updates include Node v17.7.0, React 18 Release Candidate and more.

***

## Browser news

### Firefox

Firefox 98 started rolling out on March 8. The main feature of this update is a refactoring of the download flow. There are also changes in the list of search engines, as some licensing deals have not been renewed.

Developers will receive support for the `dialog` HTML element and form-associated custom elements. There is a new panel for compatibility in the DevTools, as well as a few more updates.

- [Firefox 98](https://www.mozilla.org/en-US/firefox/98.0/releasenotes/)

### Polypane

Polypane 8.1 brings two features requested often: a resizable tree view in the elements panel and the option to quickly disable JavaScript. Chromium has been updated to version 98, and there are multiple design updates and smaller feature changes across the entire app.

- [Polypane 8.1: Resizable element tree, disable JS feature, new debug tools and more](https://polypane.app/blog/polypane-8-1-resizable-element-tree-disable-js-feature-new-debug-tools-and-more/)


***

## Software updates and releases

- **[Ava v4.1.0](https://github.com/avajs/ava/releases/tag/v4.1.0)** - Node.js test runner
- **[Node v17.7.0](https://nodejs.org/en/blog/release/v17.7.0/)** / [Node v17.7.1](https://nodejs.org/en/blog/release/v17.7.1/)
- **[React 18 Release Candidate](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html)**
- **[reveal.js v4.3.0](https://github.com/hakimel/reveal.js/releases/tag/4.3.0)** - the HTML presentation framework
- **[Rollup.js 2.70.0](https://github.com/rollup/rollup/releases/tag/v2.70.0)** - ES module bundler

***

## Wrapping things up

Ukraine is still suffering under the Russian invasion - if you are looking for ways to help, please check Smashing Magazine's article [We All Are Ukraine 🇺🇦](https://www.smashingmagazine.com/2022/02/we-all-are-ukraine/) or get in touch with your trusted charity.

That's about all I have for this issue. If you enjoyed this newsletter, there are a couple of ways to support it. You can share the [link to this issue](https://frontendnexus.com/news/055/) on social media, and follow this newsletter on [Twitter](https://twitter.com/frontendnexus). Each one of these helps me out, and I would appreciate your consideration.

Have a great and productive week, keep yourselves safe, spend as much time as possible with your loved ones, and I will see you again next time!
Getting started with Vercel
Published: 2022-03-14 03:53:32


Writeup coming tomorrow, site is up and running though
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r49d6ik5tvux6igr1np8.png)

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

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

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