teleren/devto huggingface dataset:
Let's build YouTube clone with Deepgram🤖 using React-JS 🐱‍💻🔥
Tags: hackwithdg, javascript, react, deepgram
Published: 2022-04-06 06:14:28

## YouTube Clone with Deepgram AI🤗
---

### Overview of My Submission: 👀

 {% youtube https://youtu.be/SlYDWTLyJLU %}

Let me tell you simply about this :)

- It is built on React-JS using **YouTube API** and **Deepgram**.

- It has voice search and video subtitles option.

- Also it will provide videos accordingly depending on your location. 
`(For this you need to disable ad blocker. Default location IN)`

---

### Submission Category: 🎊

Accessibility Advocates

---

### Technologies Used:🛠

- React JS
- Axios
- luxon
- Redux
- Deepgram API
- YouTube Data API v3
- react-youtube

---
### GitHub: 👨‍💻

{% github https://github.com/jacksonkasi0/youtube-clone %}


### LIVE DEMO: ✨

[click me 😸](https://youtupe.netlify.app)

web link: https://youtupe.netlify.app/
The simplest way to disable console.log for Production build in Angular?
Tags: angular
Published: 2022-04-06 06:02:34

I work with different developers, and most of them rely on console.log () or other console methods for development. They use the console to print various values to debug while doing the development. I call this approach console-driven development. Cool name, right? 

These console functions become overwhelming in production as users can see many things printed in the browser console, which they may or may not understand. Sometimes a junior developer can leave something significant on the console that may cause a potential security risk. 

So, we must not have the console in the productions. There are various ways you can disable console in the production, such as: 

1. By using libraries such as logger 
2. Creating a linting rule that if code contains any console function, the build fails 
3. Or you are writing a simple service to perform this task for you.


In this post, let us see how we can create service to disable the console in the production step-by-step.

Add service to the project. I am calling it as ConsoleToogleService. In the service, we make all the console functions void. So service should look like the below: 

```
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ConsoleToggleService {

  constructor() { 

  }

  disableConsoleInProduction(): void {
    if(environment.production){
      console.warn(`🚨 Console output is disabled on production!`);
      console.log = function():void{}; 
      console.debug = function():void{};
      console.warn = function():void{};
      console.info = function():void{};
    }
  }
}

```


In the service, you can see a function called disableConsoleInProduction(). Inside this function, we are making all the console functions void. It is as simple as this. 

Now in the AppComponent, inject this service and call the function in the constructor as shown below: 

```
  constructor(private consoleToggleService : ConsoleToggleService){

    this.consoleToggleService.disableConsoleInProduction();
    
  }

```
When you build an application for production, you won’t have any console. However, the development console will work as usual. 
I hope you find this post helpful. Thanks for reading.
Android — Drag and Drop views with Jetpack compose
Tags: android, programming, jetpackcompose, javascript
Published: 2022-04-06 05:48:51

We’ll create a food order book, that shows list of food items with list of persons. Users can select food items and drop them to the person paying for all dropped food items. 

You can read full article here [https://blog.canopas.com/android-drag-and-drop-ui-element-in-jetpack-compose-14922073b3f1](https://blog.canopas.com/android-drag-and-drop-ui-element-in-jetpack-compose-14922073b3f1)
Getting Started with the React List View Component
Tags: react, webdev, reactnative
Published: 2022-04-06 05:41:23

Learn how easily you can create and configure the [React ListView ](https://www.syncfusion.com/react-ui-components/react-listview)component of Syncfusion using the create-react-app command. This video also explains how to configure a few of the control’s basic features like binding data, grouping list items, adding check boxes to a list, and adding nested list items. 

**Product Overview**: https://www.syncfusion.com/react-ui-components/react-listview

**Download an example from GitHub**: https://github.com/SyncfusionExamples/getting-started-with-the-react-list-view-component

**Refer to the following documentation for the React ListView**: https://ej2.syncfusion.com/react/documentation/listview/getting-started/

**Check out this online example of the React ListView**: https://ej2.syncfusion.com/react/demos/#/bootstrap5/listview/default

{% youtube 7Pu3e55j1nU %}
#40 - Credit Card Mask Kata (7 kyu)
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-04-06 05:34:10

##Instructions
**Task**
Usually when you buy something, you're asked whether your credit card number, phone number or answer to your most secret question is still correct. However, since someone could look over your shoulder, you don't want that shown on your screen. Instead, we mask it.

Your task is to write a function maskify, which changes all but the last four characters into '#'.

**Examples**

```
"4556364607935616" --> "############5616"
     "64607935616" -->      "#######5616"
               "1" -->                "1"
                "" -->                 ""

// "What was the name of your first pet?"

"Skippy" --> "##ippy"

"Nananananananananananananananana Batman!"
-->
"####################################man!"
```


---

##My solution:


```javascript
function maskify(cc) {
    return cc.split("").map((x,i) => (i<cc.length-4)?x="#":x).join("");
}
```


---

##Explanation
First I splitted into an array the string, then I mapped it and in every iteration I checked if the index of the element being iterated isn't smaller than the length of the string minus 4, if it isn't small it means that it hasn't reach the last 4 characters, so I change the number for a "#", but if it has reached the last 4 characters I just leave them as they are, and at the end I just join the array.

---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/5412509bd436bd33920011bc)
[Desafio] - Medir Percentil
Published: 2022-04-06 04:18:38

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1511556941599838209)

---

Dev, topa um desafio?!

É mais fácil que gambiarra!

Você só precisa de um excel, google sheets, open office, etc. Um browser e 7,23 minutos. É super rápido, confia.

Vc vai sair ninja em PER-CEN-TIL!!!! E vai poder ser a pessoa MAIS DESCOLADA DA FESTA!!!

cc @sseraphini
 
🧵

![img](https://pbs.twimg.com/media/FPohBvOUYAI9OUF?format=png&name=360x360)

---

Esse desafio tá relacionado com a essa Thread.

[https://twitter.com/zanfranceschi/status/1511548083783409667](https://twitter.com/zanfranceschi/status/1511548083783409667)

---

Desafio:

- Abra seu browser em qq site e coloque-o em modo desenvolvedor (geralmente F12).

- Siga os passos da imagem:
1. Aba network
2. Filtre por doc
3. Veja o tempo de carregamento de alguma coisa

![img](https://pbs.twimg.com/media/FPohCOSVQAMXIH2?format=jpg&name=large)

---

Agora, atualize a página (use CMD/CTRL+R) por 10 vezes e vá anotando no excel.

Depois, ordene de forma crescente e adicione o rank do lado como na segunda imagem – só colocar 1, 2, 3... 10 mesmo.

![img](https://pbs.twimg.com/media/FPohCpUVUAM7aSf?format=png&name=small)

![img](https://pbs.twimg.com/media/FPohC0HVIAE7Jcb?format=png&name=small)

---

Tá quase lá, guenta aí:

Vamos fazer p80, ok? 80º percentil. 

Faça a seguinte fórmula para achar o rank de p80:

```
r = número de itens * (percentil / 100)
r = 10 * (80 / 100)
r = 8
```

(se usar outro percentil, arredonde para que seja um número inteiro, ok?)

---

O p80 do nosso conjunto de dados é 8. Isso significa que o nosso p80 é 305 (no meu caso). Se quiséssemos ser mais agressivos, poderíamos usar um percentil maior.

Para medir um tempo de resposta de um sistema crítico por exemplo, é comum usar p98, p99.

![img](https://pbs.twimg.com/media/FPohDVoVgAATIIj?format=png&name=small)

---

Fácil demais, né? Claro que não é exatamente assim que sistemas de verdade são medidos. Existe coleta de amostragem, percentil baseados em histograma, etc.

Mas se vc souber o que é e como funciona mais ou menos a questão de percentil, já é muito bom!

---

Valeu demais pela moral! ❤️
Setup Netgear EX8000 Extender | Mywifiext.net
Tags: technology, wifi, route
Published: 2022-04-06 05:10:48

This article is about [Setup Netgear Ex800 extender](https://mywifiext-net-setup.com/setup-netgear-ex8000-extender/). Netgear Ex800 Wi-Fi Range Extender with patented FastLane3 technology helps to boost your Wi-Fi to the utmost with speeds up to 3Gbps. Also helps in abolishing the dead zone from your garage to the backyard, and extend the Wi-Fi range to dead zone areas of your home. Setup Netgear EX8000 is an advanced tri-band Wi-Fi extender that covers the assigned 5GHz band with up to 1.7Gbps for increasing internet speeds to your devices. The app makes setup with your existing Wi-Fi router effortless. Use the app to get more out of your Wi-Fi. This Mesh extender uses your existing Wi-Fi to create a powerful whole-home Wi-Fi network.

`https://vimeo.com/695981295`
Netgear EX2700 setup using 192.168.1.250
Tags: programming, technology
Published: 2022-04-06 05:07:54

[Netgear Ex2700 setup via 192.168.1.250
](https://mywifiext-net-setup.com/netgear-ex2700-setup/)
Follow the beneath steps to setup:

Firstly make sure to plug in your extender near to the router and hold on till the power LED turns amber.
Now take your device, go to wifi list and connect with Netgear extender’s default wifi called Netgear_Ext.
Then from your connected device open any web browser and enter 192.168.1.250 or mywifiext.net in the address bar.
Further, you will see the New Extender Setup page, here create your new extender account.
After that, it will automatically scan your available wifi list among the wifi names select your main wifi network, and enter the password.
Now if your router supports the 5GHz band then do repeat the process.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh4cgek1pmpjocuuu6vt.jpg)
how to show custom results in ngx-pagination and ngx-datatable pages
Tags: angular, typescript
Published: 2022-04-06 04:32:54

i'm having a problem at hand like this. I have records up to 10 in my JSON output but the client wants to show 32 records like 10 in each page. until, the fourth page and wants the 4th page to show just two records to make up a total record of 32 from the original 10 from the JSON output. Is there a way to do this in Angular ngx-pagination and ngx-datatable.

https://stackblitz.com/edit/angular-ntstzc?file=src%2Fapp%2Fapp.component.html
The benefits of using a NoCode solution to enable SSO auth
Tags: security, webdev, programming, cybersecurity
Published: 2022-04-06 04:08:34

1. You don’t need to learn complex OIDC/OAuth or SAML protocol
2. You don’t need to manage refresh token, access token & ID token
3. You don’t need to manage user sessions
4. You don’t need to use SDKs, call APIs and write code
5. Reduce weeks of engineering work to hours even minutes
6. Avoid security vulnerabilities by using a No-Code product developed by security experts

That's why we are building No-Code platform [Datawiza](https://www.datawiza.com/platform/) for developers.


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

Other No-Code solutions in this category:
* Azure Easy Auth (https://lnkd.in/gheBhint)
* Google IAP (https://lnkd.in/gM9g8xZz)
* Amazon load balancer auth (https://lnkd.in/g8VZUH7g)
Estructura de datos: Pila
Tags: data, go, tutorial
Published: 2022-04-06 03:17:32

Hola! Soy yo de nuevo

En esta ocasión venimos a escribir sobre la estructura de datos pila. 

La pila o "stack" del ingles, es la contra parte de la [cola](https://dev.to/4geeksacademy/estructura-de-datos-cola-2879)(te recomiendo que leas el articulo anterior), se describe así: **El primer dato que entra es el último en salir o el último dato que ingresa es el primero en salir.**

Lo podemos ver de esta forma. Cuando tenemos una pila de platos sucios, los apilamos, en espera de ser lavados. Cuando colocamos solamente uno, se vería de la siguiente forma:

`1 - Plato sucio -`

Como no hemos estado atentos a la pileta, de repente ingresan 2 platos sucios a la vez ¡Y no hemos procesado ni uno!

`3 - Plato sucio -
2 - Plato sucio -
1 - Plato sucio -`

Deberíamos de ponernos a ello y empezar a limpiarlos, en esta ocasión siguiendo el algoritmo de pila, el cuál nos dice que **el último plato sucio que haya sido ingresado es el primero que debo de lavar**. ¡Pues a trabajar!

 \- / - _Sonidos de limpieza_ - / -

Listo, hemos lavado uno ¿Cómo se ve nuestra pila ahora?

`2 - Plato sucio -
1 - Plato sucio -`

Lavemos otro!

 \- / - _Sonidos de limpieza_ - / -

¡Ufff, qué trabajo más arduo! Debería de solamente quedarnos un plato sucio pendiente, y según el algoritmo de pila, **debería de quedarnos el primer plato que ingresó**.

`1 - Plato sucio -`

Efectivamente, **el plato pendiente es el primero que ingresó a la pila**. Bueno, será momento de lavarlo, nadie lo hará por nosotros.

 \- / - _Sonidos de limpieza_ - / -

¡Te felicito de haber llegado aquí! Has sido capaz de lavar toda la pila, vaya logro.

Por acá te dejo el vídeo tutorial de la implementación en Golang: https://www.youtube.com/watch?v=IDNc_qb5110 

Además te dejo el repositorio: https://github.com/juanmiguelar/Stack-golang 

Y por si fuera poco, te dejo mis redes:
https://linkr.bio/juanmiguelar

Gracias por leer
Pasa bonita vida
What are the most useful conferences for developers?
Tags: conferences, todayisearched, discuss
Published: 2022-04-06 03:09:25

From the [AWS Global Summits](https://aws.amazon.com/events/summits/), which are free events, [PyCon US](https://us.pycon.org/2022/), [Big Data LDN](https://bigdataldn.com/) and [Microsoft 365 Conference](https://m365conf.com/#!/?utm_source=googleAds), which is currently happening at MGM Grand in Las Vegas, there are countless of conferences and summits for developers to attend to learn about various topics. Whether it be AWS, machine learning, AI, C++, or Python, there is a conference for you. But with the admission tickets, plane flights, hotels, and other costs you'd have to spend during these trips, everyone always looks for the best conferences to attend. After all, no one has the budget nor time to simply attend them all.

Which, in your opinion, do you get the most for your expenses? The most bang for your buck? Let us know in the comments below.

Happy coding!
Laravel where and orWhere Condition Example
Tags: laravel, php, mysql, laravel8
Published: 2022-04-06 03:07:45

In this artical we will see how to use where and orwhere condition in laravel 8. For where() and orWhere() method the first argument is the name of the column. The second argument is an operator, which can be any of the database's supported operators. The third argument is the value to compare against the column's value.
 
Syntax of where() query in laravel 8

> where(Coulumn Name, Operator, Value);
 
Example of where() condition in laravel 8

```
$users = DB::table('users')
                ->where('id', '=', 5)
                ->where('department', '=', 'Designer')
                ->where('age', '>', 25)
                ->get();
```
 
Now, we will see orWhere() condition in laravel 8 and how to write orWhere() condition in laravel. so first we will see SQL query for better understanding.

SQL OR Example

```
SELECT * FROM users WHERE id='5' OR salary='10000';
```
 
Example of orWhere() condition in laravel 8

```
$users = DB::table('users')
                    ->where('salary', '>', 10000)
                    ->orWhere('name', 'Mark')
                    ->get();
```

---

You might also like :

- **_[Read Also: How to Integrate Razorpay Payment Gateway in Laravel](https://techsolutionstuff.com/post/how-to-integrate-razorpay-payment-gateway-in-laravel)_**

- **_[Read Also: How To Integrate Stripe Payment Gateway In Laravel 8](https://techsolutionstuff.com/post/how-to-integrate-stripe-payment-gateway-in-laravel-8)_**

- **_[Read Also: How To Create Dynamic Pie Chart In Laravel 8](https://techsolutionstuff.com/post/how-to-create-dynamic-pie-chart-in-laravel-8)_**
#FOSS in Python: How To Easily Screen ETFs By Category With The OpenBB Terminal
Tags: python, startup, showdev, tutorial
Published: 2022-04-06 02:58:29

The OpenBB Terminal sports an entire menu dedicated to ETFs; the screener is a submenu here. To get to this menu from anywhere in the terminal, enter:
```
/etf/scr
```

Alternatively, if launching the terminal from a command line, the terminal can start there by tagging the startup string, which looks like:
```
python terminal.py /etf/scr
```
![Screen By Category Function: /etf/scr/sbc (https://openbb-finance.github.io/OpenBBTerminal/terminal/etf/scr/sbc/)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6zlewxr4q5k0j86mheg.png)

This screener submenu has two distinct methods for filtration:

screen: this uses the .ini files, located in the installation folder, to filter based on performance metrics, like NAV, expense ratio, etc.

![ETF Screener Preset: /etf/scr/sbc (https://openbb-finance.github.io/OpenBBTerminal/terminal/etf/scr/screen/)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq9qz5i9zgbzhld3r542.png)

sbc: Screen By Category allows the user to discover ETFs offering specific exposure to a risk category, asset class, sector, or industry.

This second method is our focus. To see the help dialogue, in the submenu, enter:
```
sbc -h
```

Returns this dialogue:
```
usage: sbc [-c CATEGORY [CATEGORY ...]] [-l LIMIT] [-h] [--export EXPORT]

Search by category [Source: FinanceDatabase/StockAnalysis.com]

optional arguments:
  -c CATEGORY [CATEGORY ...], --category CATEGORY [CATEGORY ...]
                        Category to look for (default: None)
  -l LIMIT, --limit LIMIT
                        Limit of ETFs to display (default: 5)
  -h, --help            show this help message (default: False)
  --export EXPORT       Export raw data into csv, json, xlsx (default: )
```

The optional arguments for this feature are:

1. -l, --limit (number of results to return)
2. --export (export the procured list to a file)

For example, the top 20 ETFs by total assets in the category, Commodities Broad Basket.
![Commodities Broad Basket ETFs (https://openbb-finance.github.io/OpenBBTerminal/terminal/etf/scr/sbc/)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi6wjtoul44ui69n9vto.png)
 
```
2022 Apr 01, 10:36 (🦋) /etf/scr/ $ sbc Managed Futures
```
![Managed Futures ETFs (https://openbb-finance.github.io/OpenBBTerminal/terminal/etf/scr/sbc/)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wej219lia8q8kkot5aby.png)

```
2022 Apr 01, 10:39 (🦋) /etf/scr/ $ sbc Equity Precious Metals -l 10
```
![Equity Precious Metals ETFs (https://openbb-finance.github.io/OpenBBTerminal/terminal/etf/scr/sbc/)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwr0me4cbdzzaihufhh6.png)

Browsing ETFs in this way is bound to stir up some curiosity, don't be afraid to go down a few rabbit holes!
What's your jam? Let's talk about it!


https://discord.com/invite/Y4HDyB6Ypu
How to use custom URLs with Shopify Hydrogen
Tags: shopify, headless, seo, ecommerce
Published: 2022-04-06 01:47:23

---
title: How to use custom URLs with Shopify Hydrogen
published: true
description: Learn how to customize your URLs using Shopify Hydrogen in your Shopify Headless store and optimize your SEO in multiple languages.
tags: shopify, headless, seo, ecommerce
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq06xzxo4ev21y6onvft.png
canonical_url: https://rafaelcg.com/blog/custom-urls-on-shopify-headless/
---

[Shopify Headless](https://hydrogen.shopify.dev/) is used in different ways. The way I recommend most to merchants is through Shopify Hydrogen. In this article, I'm going to show you how to set up a custom URL for your international store to improve your SEO results and give a better experience to your clients by supporting other languages.

If you want to [learn how to create a fantastic production-ready Shopify Headless store with Hydrogen](https://rafaelcg.com/course-shopify-hydrogen-developer-2022/), check out my course on Udemy.

## How custom URLs work

All your old URLs on your Shopify store will remain the same, but the main difference is that your headless will control what to show on each page URL. It gives you total flexibility of customization and increases your responsibility of maintaining it simultaneously.

![Shopify Headless using Hydrogen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq06xzxo4ev21y6onvft.png)

## Translating and customizing category URL

As you can see in the image below, the first step will be changing a folder name and the folder *collections* inside the routes folder, which defines which route (URL path) to predict.

You will be able to access the new translated URL right away. I changed **collection** to **categorias** in Portuguese.

![Shopify Hydrogen custom URLs routes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afu1c67t3wu0lpzgwnou.png)

The second step is to change all the links in your theme that might include collections in the link statically. I had to change it in my **Navigation** file, as you can see in the image below.

![Shopify Hydrogen custom URLs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7321hvwlarrrcpbx7rq.png)

It can become enormously tricky depending on the project, but at least now, you don't need to start from scratch in your analysis. I hope it helped you understand how Shopify architecture works with a headless store and custom URLs.

[<img alt="Course Shopify Headless with Hydrogen" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arvuabf7iihl8o66x8eh.jpeg">](https://rafaelcg.com/course-shopify-hydrogen-developer-2022/)