teleren/devto huggingface dataset:
Make your browser speak!
Published: 2022-02-16 14:14:16

This is so cool, you can let your browser talk, just with the latest javascript in the browser. It's called SpeechSynthesis. Open your javascript console (cmd+opt+j in chrome on mac) and try this:

```
let utterance = new SpeechSynthesisUtterance("Hello");
speechSynthesis.speak(utterance);
```

On my computer I heard the words "Hello world" with a Dutch accent! So let's change the nationality of the voice.  
Let's first load this in our global memory:
```
const synth = window.speechSynthesis;
```

Then search for voices:
```
synth.getVoices();
```

The browser returns 67 voice objects. Let's map it to the languageCode (key "lang")

```
let languageCodes = synth.getVoices().map(voice => voice.lang);
```

Let's only look at the unique codes with
```
languageCodes = [...new Set(languageCodes)];
```

41 results! I bet your mothertongue is also among those. Let's find yours (in my case nl-NL, which is Netherlands)

```
synth.getVoices().find(voice => voice.lang === 'nl-NL')
```

The find method returns the first hit. In my case a human bot called Xander, not a typical Dutch name. Let's make this voice say something. 

```
// if you didn't yet load the speech synthesis in the constant synth, you may do so here, then uncomment the next line:
// const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('Hallo'); // Dutch :)
utterance.voice = synth.getVoices().find(voice => voice.lang === 'nl-NL');
synth.speak(utterance);
```

It would be nice to make a function that has text and language as input and let the voice speak it. 

```
function speak(text, language) {
    const synth = window.speechSynthesis;
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.voice = synth.getVoices().find(voice => voice.lang === language);
    synth.speak(utterance);
}
```
Now we can simply use that function and wirite:

```
speak('hi there','en-UK')
```

If you are lazy you can also only filter on language (the 'en' = english part) and not on country (the 'UK' = United Kingdom part). So now we split it until the -

```
function speak(text, language) {
    const synth = window.speechSynthesis;
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.voice = synth.getVoices().find(voice => voice.lang.split('-')[0].toLowerCase() === language.split('-')[0].toLowerCase());
    synth.speak(utterance);
}
```

Enjoy!
#OpenCV – Detect and blur faces 😁 using DNN in C#
Tags: englishpost, csharp, facedetection
Published: 2022-02-16 20:14:35

---
title: #OpenCV – Detect and blur faces 😁 using DNN in C#
published: true
date: 2022-02-16 14:00:00 UTC
tags: EnglishPost,CSharp,EnglishPost,FaceDetection
canonical_url: 
---

Hi !

NET is in anniversary mode, so I think it will be a good idea to share some camera samples in C#. For these demos I’m using C# 6 and OpenCVSharp as OpenCV wrapper for .NET.

Today post: detect a face using a DNN model and blur the face area. This demo also show the detected face in a separated window (just for fun). And I added the Frame per second (FPS) as additional information in the main window

Easy to implement, and also easy to read:

![face blur demo in csharp using dnn](https://brunocapuano.files.wordpress.com/2022/02/face-blur-cs-dnn.gif?w=450)

#### Code Sample

{% gist https://gist.github.com/elbruno/eaaf239c78fab7cb01ffd172d3ab1ed7 %}

[Original Post](https://elbruno.com/2022/02/16/opencv-detect-and-blur-faces-%f0%9f%98%81-using-dnn-in-c/)

Happy coding!

Greetings

El Bruno

* * *
3 things you need to know about RxJS
Tags: javascript, webdev, rxjs
Published: 2022-02-16 13:39:36

This post is a super brief summary of the RxJS fundamentals. If you are interested in RxJS, read the [complete article](https://medium.com/p/d04149065be0) on Medium, where I added a short example.

But first, let's dive into the three things you need to know about RxJS.

## 1. RxJS is a JavaScript library

RxJS stands for Reactive Extensions for JavaScript.

<p>According to the <a href="https://rxjs.dev/guide/overview" target="_blank" rel="noreferrer noopener">official documentation</a>, "<em>RxJS is a library for composing asynchronous and event-based programs by using observable sequences</em>".</p>

<p>In other words, RxJS is a library that helps us manage and manipulate data over time. </p>

## 2. RxJS offers some advantages over Promises

RxJS offers several advantages compared to traditional techniques like Promises. Here are two key advantages:
- RxJS can produce multiple values over time 
- Unlike Promises, it is possible to cancel async operations before they terminate


## 3. RxJS share some principles with Reactive Programming

<p>Reactive programming is simply programming with asynchronous data streams. Anything can be a stream: variables, user inputs, data structure, etc. Therefore, it is possible to listen to the stream and react appropriately.</p>

<p>When we combine the functional paradigm with reactive programming we want to dynamically specify the behavior of values when we declare them. </p>

<p>Thanks to <a href="https://www.vitainbeta.org/rxjs-operators-in-angular/" target="_blank" rel="noreferrer noopener">RxJS operators</a>, we get a set of tools to merge, filter, and manipulate data streams.</p>

Being a very short intro, there are no examples nor code. But at least you have some idea about RxJS. If you are interested, [learn more about RxJS](https://www.vitainbeta.org/rxjs-primer/).
Introduction to Python
Tags: python, beginners, programming
Published: 2022-02-16 13:36:02

This Python series is for beginner programmers with some programming knowledge, but it is not required. Although not comprehensive, I hope that this series can quickly guide beginners past the initial syntax hurdle — so that they can spend more time writing code. 

It is important to note that the aim isn't to replace books, courses, tutorials, and other resources but rather to supplement the initial learning experience.

#### — Part 5 in the series is coming soon —
Cool Button Background Animation only using HTML and CSS
Tags: html, css, incoder
Published: 2022-02-16 13:31:56

Hey friends, today in this blog you'll learn how to create a cool button background animation only using HTML and CSS. In our last blog, we saw [how to create amazing glowing buttons using HTML and CSS](https://incoderweb.blogspot.com/2022/01/amazing%20glowing%20buttons.html).Now it's time to create a cool button with background animation. I've also shared many button designs. Don't forget to [check here](https://incoderweb.blogspot.com/search/label/CSS%20Buttons).

A button is a fundamental UI element of web pages that play an important role to provide interactions to the user. Mainly it is used for submitting forms, confirming actions, etc. That's why buttons are the middleman between the user and the product.

Today in this blog, I'll share this cool button with animated background. At first, these buttons are in normal background color but when you hover over them then a black background comes from the left side and covers the whole button with smooth animation.

Preview is [available here](https://incoderweb.blogspot.com/2022/02/cool-button-background-animation.html).

##Source Code

##HTML Code

```
<!-- ------------------- Created By InCoder ------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cool Button Background Animation - InCoder</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="wrapper">
    <a href="#" class="inBtn inBtn-green mr-3">Submit</a>
    <a href="#" class="inBtn inBtn-red">Submit</a>
  </div>
</body>

</html>
```

##CSS Code

```
/* ------------------- Created By InCoder ------------------- */

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6e6e6;
}

.wrapper {
  width: 30rem;
  display: flex;
  height: 15rem;
  margin: 2rem 1rem;
  border-radius: 8px;
  align-items: center;
  background-color: #fff;
  justify-content: center;
  transition: box-shadow 0.2s;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
}

.wrapper:hover {
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
}

.inBtn {
  border: 0px;
  z-index: 1;
  color: #fff;
  overflow: hidden;
  font-size: 1.2rem;
  position: relative;
  border-radius: 6px;
  padding: 0.8rem 2rem;
  text-decoration: none;
  background-position: 5rem;
  text-transform: capitalize;
}

.inBtn::before {
  content: "";
  top: 0%;
  left: -100%;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: #fff;
  position: absolute;
  transition: left 0.4s;
  background-color: #202020;
}

.inBtn:hover::before {
  left: 0%;
}

.mr-3 {
  margin-right: 20px;
}

.inBtn-green {
  background-color: #22ba87;
}

.inBtn-red {
  background-color: #e03652;
}
```
Does Kotlin can be used to Develop Multi-Platform Mobile Application
Published: 2022-02-16 13:28:19

Kotlin is the primary language to develop android apps for the last decade. So seeing the popularity of cross-platform technologies Kotlin launched its own Kotlin MultiPlatform tech. Kotlin Multi Platform is being adopted by many big tech players such as Netflix, Pinterest, Uber, Evernote, etc.  

The best thing about Kotlin Multi-Platform is that you only need to write code once for multiple platforms like Android, iOS, Web, etc. This helps in saving your time as well as the cost for developing a mobile app for different platforms. You can reuse the same code for both iOS and Android if you are developing apps on both of these platforms. Kotlin Multiplatform Mobile makes it easy and quick to share logic between frontend and backend web applications because of its common code base. This also saves time during the development phase.  

So, the simple answer here is YES kotlin can be used to develop a multiplatform mobile application.  

By hiring dedicated Kotlin developers that are experts in kotlin can help you develop apps on both platforms. (Android & iOS.)  

You can hire dedicated Kotlin App Developers from **WebClues Infotech**. Their flexible hiring models are designed to offer you the ability to select top developers as per your budget and project requirements. When you hire Kotlin developers from WebClues, you gain their experience in mobile app development across different industry verticals.
M3O - A new serverless cloud platform
Tags: serverless, cloud
Published: 2022-02-16 13:26:41

---
title: M3O - A new serverless cloud platform
published: true
description: M3O is a serverless cloud platform. Explore, discover and consume public APIs as simpler programmable building blocks all on one platform for a 10x developer experience.
tags: serverless, cloud
//cover_image: https://direct_url_to_image.jpg
---

Hey all 👋

Happy to share [M3O](https://m3o.com), a new serverless cloud platform we're building which tries to put all the common building blocks on one platform. Our goal is to abstract away the complexity of the cloud and provider higher level APIs to build on. 

Would love your feedback. Oh and btw, its open source too!

https://github.com/m3o/m3o

Cheers
Asim
Safeguard agains Whales in Crypto
Tags: solidity, token, smartcontract, blockchain
Published: 2022-02-16 13:18:04

Hello Everyone,

I´m creating some requirements for a Token to resist as much as possible to whales attacks, doing some max hold of a token in a single wallet, max per transaction, etc.

But my question here is, there is any way to limit the number of transactions with that token in a wallet? Like for the token XPTO there can only have 2 transactions per day?

Thank you in advance.
Strategy Design Pattern in Go
Tags: go, programming
Published: 2022-02-16 13:17:40

According to Wikipedia,

> The strategy pattern (also known as the policy pattern) is a behavioral software design pattern that enables selecting an algorithm at runtime. Instead of implementing a single algorithm directly, code receives run-time instructions as to which in a family of algorithms to use

The strategy design pattern comes under the behavioural pattern.
**Strategy design pattern** turns a set of behaviors(strategies) into objects and makes them interchangable inside original context object.
We create objects which represent various strategies and a context object(original object),which holds a reference to a strategy object and delegates it executing the behaviour.
In order to change the context object perform its work, other objects may replace the currently linked strategy object with another one.

## Example
Suppose we are building an in-memory cache.Since, the size of an im-memory cache is limited, whenever it reaches its maximum size alloted, some enteries have to be removed in order to free up the space. This task can happen via several algorithms:

1. First In , First Out (FIFO) - remove an entry from in memory cache , that was created first.

2. Least Recently Used (LRU) - remove an entry from in memory cache, that has been used least recently

3. Least Frequently Used (LFU) - remove an entry from in memory cache, that has been used least frequently

The main idea is to decouple the cache object/class from these algorithms (strategies) so that we can change the algorithm at runtime.

Also, the original cache class should not change when a new algorithm is being added in the future.

This is where **Strategy Pattern** comes into play. It basically suggests to create the family of algorithms and each algorithm having its own class. Each of these classes implement the same interface and this way the algorithm becomes interchangable within the family.

Lets say the common interface name is `evictionAlgo`
evictionAlgo.go: Strategy Interface


![Strategy Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auziq0rcya6chojgfgxy.png)

fifo.go: Strategy

![fifo.go](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr2h5lq4dqg20ptqqviu.png)

lru.go: Strategy

![lru.go](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33hfvhfnh3lwsaa2dq35.png)

lfu.go: Strategy

![lfu.go](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03nmh9p724agqjyl5tff.png)

cache.go: Context


![cache context object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/910ohektwm7biujr2wz8.png)
Here as you can see , the original context object(cache) holds a reference to a strategy interface(evictionAlgo). 

main.go: Client Code

![main.go](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4trksng8b0mf7jfdfaws.png)

Output:

```
Evicting by lfu strtegy
Evicting by lru strtegy
Evicting by fifo strtegy
```
Sending a V-Model Through a Slot in Vue 3
Tags: vue, webdev, typescript, javascript
Published: 2022-02-16 13:16:58

If you ever attempt to send a `v-model` through a slot in Vue 3 (or Vue 2), you learn pretty quickly that it isn't possible out of the box. However, there is a workaround.

The following code example allows you to update the internal state of the **SlottedComponent** from a parent. This is useful in cases where you want the consumer of your component to be able to style or control its internal state.

**SlottedComponent:**

```vue
<template>
  <slot
    :input-value="inputValue"
    :update-input-value="updateInputValue"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const inputValue = ref('')
  const updateInputValue = (event: Event) => {
    inputValue.value = (event.target as HTMLInputElement).value
  }
</script>
```

**In a parent component:**

```vue
<template>
  <SlottedComponent>
    <template #default="{ inputValue, updateInputValue }">
      <input
        type="text"
        :value="inputValue"
        @keyup="updateInputValue"
      >
    </template>
  </SlottedComponent>
</template>
```

The key here is that you cannot directly set a `v-model` bound to `inputValue` on the parent's input element as you typically would since it cannot cross the slot boundary. However, you can set the `value` of the input to `inputValue` and call an event, such as `@keyup`, to send any changes back to the **SlottedComponent**.

I hope you found this useful. Have a great day.
OAuth CodeFlow without redirection
Tags: oauth, codeflow, pkce, identityserver
Published: 2022-02-16 13:04:46

I wanted to implement `OAuth 2 Code Flow with PKCE` by help of `IdentityServer`. Currently, mobile users put their user/password only in the mobile app. They do not redirect to other pages via browsers or popups. When I use Postman to test APIs, I just call some APIs to get access token. I want no major changes on this part too. I do not like a call back endpoint in my side or a popup window in the postman.
Seems that `Code Flow` cannot be implemented without redirections. In the other hands, the user/pass should be entered in the authentication provider directly. My searches for followings was not helpful:
* identityserver oauth2 code flow login without redirect
* identityserver code flow embed login page


A work-around is to embed login page but not sure if it is possible. Postman has an internal mechanism for oauth 2 logging in. It includes entering clientId and client secret then a popup is opened to enter user/pass. However, I was in search of simulating this by several API calls. As my back-end is .Net, I tried to use IdentityServer. I used templates to create a sample application.

Useful resources I found during this search:
* Any ways to get authorization cookies without redirection to IS4 #3858 [+](https://github.com/IdentityServer/IdentityServer4/issues/3858)
* [OAuth2 Flow: Reason for sending auth code via redirect](https://stackoverflow.com/questions/61325478/oauth2-flow-reason-for-sending-auth-code-via-redirect)
* [What's the right OAuth 2.0 flow for a mobile app](https://stackoverflow.com/questions/17427707/whats-the-right-oauth-2-0-flow-for-a-mobile-app)
* [Identityserver4 with SPA without redirecting to Login Page](https://stackoverflow.com/questions/45887943/identityserver4-with-spa-without-redirecting-to-login-page)
* [imgur oauth](https://www.youtube.com/watch?v=NRU_KdUSjD4)
* [Identity server & oauth 2.0](https://referbruv.com/blog/posts/implementing-authorization-code-grant-using-identityserver4-with-pkce)
* [+](https://www.youtube.com/watch?v=K_xkWmebxew&t=491s)
* [Is it possible or does it make sense to use OAuth 2.0 CodeFlow PKCE for an internal authentication provider?](https://softwareengineering.stackexchange.com/questions/436677/is-it-possible-or-does-it-make-sense-to-use-oauth-2-0-codeflow-pkce-for-an-inter)
* [OAuth 2.0: Implicit Flow is Dead, Try PKCE Instead](https://blog.postman.com/pkce-oauth-how-to/)
* [OAuth 2.0 flows explained in GIFs](https://dev.to/hem/oauth-2-0-flows-explained-in-gifs-2o7a)
* [Which OAuth 2.0 Flow Should I Use?](https://auth0.com/docs/get-started/authentication-and-authorization-flow/which-oauth-2-0-flow-should-i-use)
Git Subtree in 1 minute
Tags: tutorial, git, devops
Published: 2022-02-16 12:44:30

##"Git subtree" are often described like a  better Git Sub-module. 


Git subtree gives the possibility to nest one repository into another repository. It's very useful to manage dependencies in your project.  

**Pro:**
- Modifying content of the module without having another repository.
- Keep your metadata files clean. 
- Users don't need to learn specific command to modify modules and files.
- After initializing the subtree, all the code is available in the main tree and subtree.  
- Can create easier workflow. 

**Cons**:
- Upstream flow is more difficult to modify.
- Need to use git subtree instead of git merge.
- Potential mistakes while committing and mixing super and sub into commit.
- listing multiples subtree is complicated

### Creating a subtree

To add a subtree you need a repository with at least 1 commit(initial commit).
 
Then you can add your subtree like this. 

```
git subtree add --prefix subtreeDirectory https://github.com/arthurlch/mytree.git master --squash

```

Here we clone this repo -->  https://github.com/arthurlch/mytree.git master branch in subtreeDirectory.

### Pull new commits to the subtree repository

Use pull instead of add. 

Example:

```
git subtree pull --prefix subtreeDirectory https://github.com/arthurlch/mytree.git master 
```

###UPDATE

You can update the subtree remote repo. 

```
git subtree push --prefix subtreeDirectory https://github.com/arthurlch/mytree.git master
```

Note: The commit will be stored in the host repository and with it logs. 

###Conclusion
Subtree > Submodule

Feel free to @ me on Twitter with your opinion & feedback about my article; Constructive feedback is always welcome.
¿Por qué? la mágica pregunta al desarrollar software
Published: 2022-02-16 12:43:46

Cuando el negocio nos solicita un requerimiento, generalmente
como técnicos tendemos a empezar la solución de este
lo antes posible, tal vez preguntemos acerca de
quienes lo van a usar, que información necesitamos
guardar para luego usar en reportes, los permisos que deberá
tener, y empezamos a validar en nuestra mente la mejor manera
de desarrollarlo en el sistema, pero una pregunta importante que muchas veces
no hacemos y que deberíamos hacer frecuentemente es:

**¿Por qué?**

- ¿Por qué se necesita aumentar un campo a un formulario?
- ¿Por qué es necesario ejecutar un reporte cada cierto tiempo?
- ¿Por qué mover un botón a otra parte de la pantalla?
- ¿Por qué enviar un nuevo correo electrónico al cliente luego de una acción?
- ¿Por qué debemos capturar el tráfico de un sitio web?
- ¿Por qué _Inserte aquí el requerimiento_?

Esto nos permite tener una perspectiva diferente, poder conocer
las razones del **negocio** para solicitarlo, nos ayuda
a entender de mejor manera los **objetivos** que se quieren lograr
con el requerimiento, el poder no solo pensar desde el punto de 
vista técnico sino como parte de la empresa.

Al principio es posible que no obtengamos la respuesta que
queremos, es posible que nos den una respuesta vaga como: 
**mejorar la experiencia de usuario**, pero no debemos quedarnos ahí
debemos usar la técnica de [ los 5 ¿Por qué? ](https://es.wikipedia.org/wiki/Los_cinco_%C2%BFPor_qu%C3%A9%3F)
debemos encontrar la raíz del requerimiento, para así tener
la mejor forma de medir si un requerimiento va a cumplir o no 
el objetivo del negocio.

Muchas veces el lado del negocio solo piensa que como técnicos
solo debemos dedicarnos a ese sector y no opinar acerca
de posibles alternativas que pueden ayudar a conseguir
el objetivo planteado. Y como técnicos no solo debemos 
entrenarnos en los últimos frameworks, o lenguajes o aplicaciones
sino también y tal vez en mayor medida en aprender
cómo funciona la empresa, cómo hace dinero, a quién servimos,
qué esperan los clientes de la empresa, etc.  De tal forma
que seamos los coadyuvantes del mejoramiento de la empresa
en su totalidad no solo del departamento de tecnología de información.

Una vez que conocemos los objetivos y también tenemos una
mayor comprensión del negocio, podemos dar nuestra opinión
acerca de las mejores opciones de solución, muchas veces la solución no 
es cambiar los sistemas, puede ser necesario cambiar
procesos internos, o contratar software o servicios de terceros,
o incluso dejar de hacer cosas que no contribuyen a fortalecer los objectivos
de la empresa.