teleren/devto huggingface dataset:
Speech-to-text in browser
Tags: dohackathon, node, javascript, machinelearning
Published: 2020-12-14 14:32:10

## What I built
Voicer is a solution that transcribes speech to text and works in your browser (Google Chrome only).
Designed for hearing impaired people to communicate with their friends more easily. Or follow an audio conversation without any sound.

### Category Submission: 
Program for the People: communication assistance

### App Link
https://nevolin.be/voicer/?room=dohackathon

or

https://voicer-jofm9.ondigitalocean.app/?room=dohackathon

### Screenshots
![voicer screenshot](https://dev-to-uploads.s3.amazonaws.com/i/x8i7a2vs234lipx2cmyo.png)

![voicer screenshot](https://dev-to-uploads.s3.amazonaws.com/i/la14g2fru80lql8dcnab.jpg)

### Description
Voicer is a solution that takes your microphone input, transcribes it to text and broadcasts the text to your connected friends. It uses the Web Speech API which is currently only available in Google Chrome. It's secured through HTTPS/SSL and respects everyone's privacy, no data is stored nor shared with third-parties.

Open the app link in your Chrome browser, allow microphone access,  enter your username and submit. Now you can start talking and you'll see your words/sentences appear on screen.

### Link to Source Code
https://github.com/healzer/voicer

### Permissive License
MIT

## Background
Many months ago I was building a music bot for Discord with voice enabled controls (e.g. play next, pause, shuffle, play random, play <category>). That bot got some traction and I started getting attention from people with hearing conditions. Unfortunately that bot has to be configured and hosted, which may be a little too hard for non-tech people. So I started looking into simpler solutions, and so voicer was born. It only needs Google Chrome to work.

Other browsers such as Safari, Edge and FireFox have their Speech API in development, so hopefully they'll be compatible soon.

### How I built it 
It's purely JavaScript/jQuery/HTML on the front-end, nothing too fancy.
And NodeJS for the back-end.
It uses web sockets for server-client communication to reduce latency to the minimum.

The beautiful part is that it allows you to join "rooms", so many people can use it with just a single server running. My app runs on a basic $5 digitalocean cloud app.

I did struggle for a few minutes to get it up and running, because the port wasn't set to 8080, but that was my fault :)

### Additional Resources/Info
You can use the app as is, or you can host it yourself. The server component does not store any sensitive information about the conversations. The speech-to-text part is done by Google Chrome, in your browser. The server component is nothing more than a broker for all the connected users.

You can use third-party software to keep your browser/tab stay on top of all your other windows, this way you can keep following the conversation while working/gaming. It won't work for full-screen apps (so gamers need to be in windowed mode).
Dev.to View Count Day 1 -- Planning
Tags: dohackathon, planning
Published: 2020-12-14 14:21:36

Last night, I came up with an idea for the Hackathon, so today, I'm just doing some light reading and planning!

First, let us get some of the basic decisions out of the way. If you know me, you know I've been really enjoying Rust, so I considered it here. But in the end, I think for this Hackathon, Rails is gonna be better. I can stand things up quicker, and for a view counter [correctness isn't my top priority](https://fasterthanli.me/articles/aiming-for-correctness-with-types).

For the Frontend, I think we will do some 'basic' Rails views; no frontend framework will be needed! If I am feeling fancy, I might try out some `StimulusReflex` at the end if I need any real-time frontend changes.
I'm also going to use Tailwind CSS for the styling since it's been a project I've been meaning to try out for a while, and this seems like a great time!

With those decisions out of the way, I'm ready to start diving in! I think I'm gonna wrap up for the day, though, and jump back in next time. Thanks for following along!

<span>Photo by <a href="https://unsplash.com/@firmbee">William Iven</a> on <a href="https://unsplash.com/s/photos/planning">Unsplash</a></span>
Cara Connect Kamera HP dengan Linux Menggunakan Aplikasi Droidcam
Tags: linux, ubuntu, droidcam
Published: 2020-12-14 14:21:24

Disaat pandemi ini banyak orang yang menggunakan video konferensi seperti zoom atau google meet. Namun, tidak sedikit orang yang bermasalah dengan kamera laptop "kentang" mereka yang kualitasnya sangat buruk, di tutorial kali ini saya akan memberi solusinya dengan cara menghubungkannya dengan hp android menggunakan aplikasi bernama droidcam, aplikasi ini tidak memakan banyak ruang, ukurannya kurang dari 10 mb

## Download Droidcam di PC dan di HP

### Untuk PC
Droidcam dapat di download di [sini](https://www.dev47apps.com/) atau di [sini](https://droidcam.en.softonic.com/)

### Untuk HP 

Install di [sini](https://play.google.com/store/apps/details?id=com.dev47apps.droidcam&hl=en_US&gl=US)


## Instalasi

Copy paste command berikut di terminal kalian, pastikan kalian membuka terminalnya di folder tempat  aplikasi droidcam berada ya... kalo aku sih downloadnya di folder `Downloads` 


```
cd /tmp/
wget https://files.dev47apps.net/linux/droidcam_latest.zip
unzip droidcam_latest.zip -d droidcam
cd droidcam && sudo ./install-client
```
## Install Video dan Audio

Droidcam kalian masih belum bisa jalan, sekarang jalankan command berikut untuk menginstall video dan audio.

`sudo ./install-video`
`sudo ./install-sound`

## Hubungkan!

Buka, droidcam di HP kalian, pastikan HP dan PC berada pada wifi yang sama. Maka akan muncul tulisan wifi IP, Droidcam Port, Browser IP cam address.

![Gambar SS](https://dev-to-uploads.s3.amazonaws.com/i/39yszk71gz6h48z5iwk6.png)

ketik Browser IP cam address di browser kalian, diakhiri dengan /video, contoh `http://192.168.0.100:4747/video`

Selesai!!! 

Note: Kalian juga dapat menghubungkannya lewat kabel usb. lihat artikel [berikut](https://www.dev47apps.com/droidcam/connect/)
I want to become a software engineer (my brain hurts)
Tags: beginners
Published: 2020-12-14 13:59:09

 My name is Jonathan and I have decided to make this leap into a whole new career (Software Engineering). I was born and raised in NYC which taught me to be persistent and not give up on myself. I got intrigued with coding when myspace first came out since it required a very basic level of coding and I felt so cool doing it. 

I became a restaurant manager at the age of 22 and started my path up the ladder, with talks of becoming an operations manager at my last company. Due to covid my restaurant closed down, leaving me lost and scared of whats to come. I stayed home for months not knowing what to do, until one faithful day I stumbled upon Flat Iron School's programming class which peaked my interest. I sat on the idea for about a month thinking about the difficulty and even questioning my ability to learn code, I can honestly say I was scared, but I made the leap and now as week one is wrapping up I can say that I'm looking forward to the challenge and I appreciate all the help I can get.

I decided to study software engineering with no prior coding experience to make a better future for myself and prove to others that you can really do anything you put your mind too.
javascript replace string
Published: 2020-12-14 13:46:57

How to use the string method replace() with syntax and examples , How to replace all occurrence from string, How to replace srting using regular expression (regex)

<a href="https://askavy.com/javascript-replace-string/">javascript replace string</a>() function used to replace occurrences of a specified string or regular expression with a replacement string.

```javascript

   var string = "Blue need to replace";
   var result = string.replace(/Blue/g, "red");   //  red need to replace

 console.log(result);

```

javascript regex replace

```javascript
  var string = "Blue   need   to          replace";
  var result = string.replace(/\s{2,}/g, ' ');   // Blue need to replace

console.log(result);
```

JavaScript replace special chars with empty strings Regex

```javascript
 var string = "This is a <<<<!!!!st st>ring??? What ^^^";
 var result = string.replace(/[^a-zA-Z 0-9]+/g,'');   //  This is a st string What 

 console.log(result);
```

Replace multiple characters in one replace (regex OR operator |)

```javascript
 var string = "#Replace_string-example:";
 var result = string.replace(/#|_|-/g,' ');  // Replace string example: 

        console.log(result);
```
Hackproof Your AWS Cloud Set Up in a Few Simple Steps 
Tags: aws
Published: 2020-12-14 13:45:08

<a href="https://addwebsolution.com/aws-cloud-consulting"> AWS cloud</a>brings the endless potential for computing, storage, and network infrastructure for enterprises. The new opportunities for data management seek an advanced level of security to avoid the breach or loss of enterprise-wide information. AWS cloud security is a hot topic these days because of the recent security breach of Capital One. It has shaken the security community and made the organizations think about key concerns and interests related to security in Amazon Web Service environments.

 

Though security is a “Shared” responsibility of Amazon Web Services and the users, many people assume that it is taken care completely cloud computing service providers only. However, that is not reality! At the end of the day, whatever data enterprises put in the cloud computing solutions is their responsibility too. Let’s take a little closer look at what enterprises or cloud customers think of security.

 

“According to the AWS Security Report, 91% of organizations are concerned about their cloud security.

 

On the other hand, the configuration of the AWS cloud platform is considered a little complex and requires a lot of time for the cloud infrastructure management team to identify the loopholes. 35% of people believe that AWS cloud misconfiguration is the biggest security threat for the organizations.

 

Furthermore, it is also found that legacy security tools are not working seamlessly with cloud environments or offer very limited functionality to the enterprises.”

 

These findings provide you with a starting point to plan out your time to scrutinize your cloud infrastructure for the security aspect. As more and more organizations are embracing cloud computing solutions, digital engineering teams are considering cloud security a priority and checking whether their cloud computing service providers deliver the right level of security for their data or not.

 

It is the responsibility of the enterprise or business to understand and identify security loopholes, discuss with the cloud computing service provider, and establish or follow the best practices to achieve top-notch security for their AWS cloud computing solutions.

Read Complete Blog post at - <a href="https://addwebsolution.com/blog/hackproof-your-aws-cloud-set-few-simple-steps">Hackproof Your AWS Cloud Set Up in a Few Simple Steps</a>
Setting Up VS Code and iTerm on M1 Macs
Tags: webdev, vscode
Published: 2020-12-14 13:42:01

Let's answer some questions:

- **Why are you writing this?**
Because some stuff doesn't 'just work' when restoring from an old backup. I was gifted an M1 Mac Mini (thanks, girlfriend!) and tried to set it up with a backup from my Macbook Air. While some things worked, other things went horribly wrong. And going through the process of resetting an M1 Mac product is [a pain¹](https://www.forbes.com/sites/ewanspence/2020/11/19/apple-macbook-pro-macbook-air-macos-11-big-sur-restore-revive-bricked-failure-reset-fix/?sh=21416db35cef) [in the²](https://appleinsider.com/articles/20/11/23/apple-provides-instructions-to-erase-and-restore-unresponsive-m1-macs) [ass³](https://support.apple.com/en-gb/guide/apple-configurator-2/apdd5f3c75ad/mac), so I'm attempting to save you the headache.

- **But I restored from a backup and mine works fine!**
Great! Mine didn't.

- **Okay, so what do you recommend?**
Start from scratch. Yeah, I know. It's not fun. But it doesn't have to be entirely terrible!

# Prerequisites
- [Enable Settings Sync in Visual Studio Code](https://code.visualstudio.com/docs/editor/settings-sync) and sync your settings from your current machine
- Save your `.zshrc` in a Github Gist or something of the sort.

# Visual Studio Code
Once you've got your settings from VS Code on your existing machine synced up, [install VS Code](https://code.visualstudio.com) on your new machine, enable Settings Sync, and...sync your settings. Easy. All of your extensions will get installed, your settings will be synced, and you'll be set. If you were using a custom font (Fira Code, Dank.sh, Monoid, whatever floats your boat) go and install that. Done. 

**UPDATE:** Visual Studio Code Insiders just released a version compatible with M1 Macs! Link: [VS Code ARM64](https://code.visualstudio.com/insiders/)

# iTerm
Once you install [iTerm 2](https://iterm2.com/), you'll probably want to install Homebrew, Oh My ZSH!, NVM and whatever else. Before doing _anything_, go to your Applications folder, right-click on iTerm, click 'Get Info', and check the 'Open using Rosetta' option. 

![Open iTerm using Rosetta](https://i.ibb.co/gSFphht/Screen-Shot-2020-12-14-at-5-24-03-AM.png)

Before I did this, I was getting a bunch of undecipherable errors from various command line tools because (presumably) they have compatibility issues with the M1 chip. There are alternative solutions, but I found this to be the easiest to implement and the most out-of-sight-out-of-mind solution. Check the option and don't worry about it. From there you should be able to install all your shell integrations and command line tools with no problem. I was able to install Homebrew and some formulas, NVM, Python 3, and [Mac CLI](https://github.com/guarinogabriel/mac-cli) with no issues.

Create or update your `.zshrc` file with your existing configuration which you should have uploaded to a Github Gist, and you're set.

Or. At least I was set. 😅 Good luck!
Array.find Method in JavaScript
Published: 2020-12-14 13:41:31

The <a href="https://askavy.com/javascript-array-find/">JavaScript Array find</a> method is a way to find and return the first occurrence of an element in an array , Array.find only return a single matched element , if nothing is find then it return undefined

```javascript
  var array = ['cat', 'dog' , 'car']; 
  

  var found = array.find(function (element) { 
      return element == 'dog'; 
  }); 

  
  document.write(found);  // return dog
```

```javascript

        var array = [10, 20, 30, 40];

        var found = array.find(function (element) {
            return element > 10;  
        });

        document.write(found);  // return 20

```

Array find with startsWith javascript function

```javascript

    const vehicles = [
        "car",
        "bus",
        "truck",
        "SUV"
    ];

    const result = vehicles.find(tree => tree.startsWith("c"));

    document.write(result) ;  // car

```

Array Find using JavaScript object

```javascript

            const vehicles = [
                { name: "car", count: 4 },
                { name: "bus", count: 5 },
                { name: "SUV", count: 2 }
            ];


            const result = vehicles.find(vehicle => vehicle.name == 'SUV');

            console.log(result);  // {name: "SUV", count: 2}

```

Array Find on a JavaScript object with index i

```javascript
                const vehicles = [
                    { name: "car", count: 4 },
                    { name: "bus", count: 5 },
                    { name: "SUV", count: 2 }
                ];

                const result = vehicles.find((vehicle, i) => {
                    if (vehicle.count > 1 && i !== 0) return true;
                });

                console.log(result);  // {name: "bus", count: 5}
```
We are hiring #JetBov
Tags: python, devops, angular, vue
Published: 2020-12-14 13:39:34

1 - Desenvolvedor(a) Sênior FullStack Python;
2 - SRE/DEVOPS Python;
3 - Desenvolvedor(a) FrontEnd / Mobile (Ionic, VueJS) Sênior.
 
Todas vagas com disponibilidade para trabalho remoto!
 
Acesse o link e escolha a vaga para mais informações:
https://jetbov.enlizt.me/
 
Se interessou? Conecte-se comigo no LinkedIn ou envie um e-mail para talentos@jetbov.com.
The easiest way to build a Dark Mode
Tags: css, design, a11y
Published: 2020-12-14 13:36:42

Most operating systems natively support dark mode now. I have become so used to it that anything without a dark theme becomes painful in the evening.

As I gave my website a minor visual refresh this week, I often coded into the evening. When everything else switched to dark mode, my website stayed in its light theme. A dark mode would be nice, but that sounded like a lot of work.

Little did I know that browsers and CSS have caught up. Adding a dark mode to websites is not hard anymore. The easiest way to build one is with our good old friend, the media query.

Detecting browser widths with media queries is essential for building responsive designs. They can also check for other media features, like a display’s pixel density or a device’s orientation.

The feature `prefers-color-scheme` detects if the system is set to a light or dark color scheme. In the same way we’d do [progressive enhancement](https://islovely.co/newsletter/archive/progressive-enhancement-with-at-supports), we can add styles for a dark mode with this.

The un-queried version is our light theme. In a media query that checks for a dark mode preference, we override some styles as necessary.

```css
button {
  background: blue;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
}

/* override some button styles for dark mode */
@media (prefers-color-scheme: dark) {
  button {
    background: red;
    color: white;
  }
}


input[type="text"] {
  background: white;
  color: black;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 5px;
}

/* override some text input styles for dark mode */
@media (prefers-color-scheme: dark) {
  input[type="text"] {
    background: black;
    color: white;
  }
}
```

We mostly need to change colors to turn a light theme into a dark theme. Many other styles can stay as they are, which makes it pretty easy to add a dark mode to an existing website. By using the media query, we can switch back and forth by changing which mode our operating system is set to.

I’m about an hour into experimenting with this on my own website, and it looks like I’m almost done. I would release it, but I’m too busy switching back and forth between light and dark mode. It’s too fun to see everything update instantly.

There is another, more complicated way to do the theme switch that does not rely on the media query. We could add a toggle that allows people to pick the theme. I’m not sure it’s worth the extra effort if the media query works so well.

What do you think? Is the media query “good enough” or do you prefer the sites you visit to have a theme toggle somewhere?

– Dom
javascript array for-each loop

Published: 2020-12-14 13:34:57

javascript forEach()  method calls a function once for each element in an array , callback function is not executed for array elements without values.

for each code example

we have a array like

```javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
```

The forEach (<a href="https://askavy.com/javascript-each/">javascript each</a>) method use a callback function for each element of an array with 3 parameters

1 – array item
2 – array index
3 – array

array item (value) parameter in for each loop

```javascript

     const numbers = [1, 2, 3, 4, ];
     numbers.forEach((item) => {
       document.write(item) ;      // output 1 2 3 4
       document.write("<br />") ;
     }) ;
```

optional parameter index in foreach method

```javascript

      const numbers = [1, 2, 3, 4];
      numbers.forEach((item, index) => {
        console.log("Index: " + index + " Value: " + item);
      });

Output
Index: 0 Value: 1
Index: 1 Value: 2
Index: 2 Value: 3
Index: 3 Value: 4

```

array parameter in foreach method

```javascript

      const numb

ers = [1, 2, 3, 4];
      numbers.forEach((item, index , array) => {
        console.log("Index: " + index + " Value: " + item + " array " + array);
      });
OutPut 
Index: 0 Value: 1 array 1,2,3,4
Index: 1 Value: 2 array 1,2,3,4
Index: 2 Value: 3 array 1,2,3,4
Index: 3 Value: 4 array 1,2,3,4

```

javascript array foreach using key and value


```javascript

      const numbers = [1, 2, 3, 4];
      numbers.forEach((value, key) => {
        console.log("key: " + key + " Value: " + value );
      });

```

javascript foreach object

```javascript
     const obj = {
        name: "value1",
        rank: "value2",
      };

     Object.keys(obj).forEach((key) => {
        console.log(key, obj[key]);
      });

Output
name value1
rank value2
```

The Object.values() function return an array with index and values

```javascript

    const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.values(obj).forEach((val) => {
        console.log(val);
      });

OutPut
Avy
Captain

```

The Object.entries() function returns an array of entries. An entry is an array of length 2, where entry[0] is the key and entry[1] is the value

```javascript

      const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.entries(obj).forEach((entry) => {
        const [key, value] = entry;
        console.log(key, value);
      });

OutPut
name Avy
rank Captain


```
How much pragmatism is too much? 
Tags: discuss, programming, architecture
Published: 2020-12-14 13:21:37

There are circumstances when one has to "get things done" quickly. It's sad, but it's life. 

How much pragmatism is still okay and how much could kill the project in a long term? 

I believe, some degree of pragmatism on the lower level of code is just fine. I'm talking about one line of code more or less, one nanosecond more or less, `let` or `const`, things like that. 

On the other hand, using shortcuts in design is not just pragmatic, it's simply wrong. It creates technical debt that will grow exponentially, hard to fix in the future. 

The point is, design (architecture) has an overall impact, while implementation is quite isolated. 

Recently, I had a discussion with a software architect, who described himself as pragmatic. As that, he believes the opposite: compromises in design can save a lot of effort, but code must be as clean and efficient as possible. 

What are your thoughts?
How to develop an online photography school?
Tags: ruby, startup, programming, writing
Published: 2020-12-14 13:21:05

The Fotoshkola photography school is the first edtech project in Russia to focus on teaching photography. Its main goal is to provide convenient, online photography courses, with quick feedback on assignments from teachers.

With our help, the client's team had to create and launch a classic educational product from scratch, with functions for two groups of users: students and teachers.

In one year, we launched Fotoshkola.net, a classic online e-learning platform using Ruby On Rails/Ruby. The LMS for the online photography school included the following features: the ability to download and watch video tutorials, organization of video lessons into courses, user registration and personal student accounts, online payment capabilities on the website, restrictable access to new activities until current homework is completed, messenger for communication between students and teachers, commenting on assignments, with the ability to leave comments/tags anywhere in the uploaded image.

[Find all the educational platform launch tips in the full article!](https://evrone.com/fotoshkola)