teleren/devto huggingface dataset:
Virtual Bar - Video Chat App for Twilio Hackaton
Tags: twiliohackathon
Published: 2020-05-01 03:02:11

## What I built
#### Category Submission: COVID-19 Communications
I built a video chat app that is in the format of a virtual bar. You can enter the bar and you'll see a list of tables. Each table is a video chat room with a maximum number of users between 3 and 6. The idea is that you can "go to the bar" to meet people who are already there or tell your friends to go there. Currently there's no way to run into your friends in a video chat app without requesting an explicit video chat. The virtual bar facilitates a group of rooms that are always available to join. There's an added bonus that you can buy virtual drinks and they will affect how your video is displayed.

## Demo Link
https://gehenna.club

## Link to Code
https://github.com/nmyers322/virtual-bar

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I used the twilio-video.js package to make a NodeJS server with React front-end. The server is running on a Digital Ocean droplet and serves the React bundle as well as handles the Node endpoints. I ran into several issues with compatibility between devices and lossy connections when more than 2 people were in a room. My solution was to downsample the requested video, and to call getUserMedia early on and show helpful message to the user if the camera or microphone were not accessible.

## Gyro movement
I spent a huge amount of time on a feature that I thought would be easier but turned out to be much harder than I hoped. I wanted to be able to use a mobile device's orientation to calculate where you were looking. In other words, move your phone to the left and right and you can see the different people sitting around the table. I ended up having to create my own angle calculator given the 3 dimensional angular information in the DeviceOrientationEvent. Matters were made worse when I realized iOs required special permissions to be granted. It does work, but it needs to be optimized to really be a smooth feature. So if you visit a table, press the icon with two arrows to enable the feature and try it out. I ended up learning a lot about how device orientation works and I hope to use that knowledge on something in the future. 

## Additional Resources/Info
The drinks were hand-drawn by Marlena Yokel and colored by Matt Stikker. Attached are some screen shots from a laptop and from the iPhone X.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c0w93ah34tafweh01p1u.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u2ehn0h1rwbdvl9kkvr0.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qjuv26anp5f8yx3ohymr.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j7586cic3zdty00ifu7b.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e67ijq9p3g762xky7nyj.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/unf6e4g4dl6fngn1rsxf.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8c1s73oj2fbuoof7douk.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0g5ai9xnn8ktdedbxvy0.png)
Experience in this week 20200429
Tags: nuxt, cocoapods, ios, typescript
Published: 2020-05-01 02:56:03

# Experience in this week
## fetch() on Nuxt 2.12.x
treat 'this' object in fetch() at Nuxt 2.12.x
In this advantage, divide processing Statefull ViewModel or Data Access Layer to other .ts file.

### sequence
1. $router.replace(newURL)
2. fetch()
3. updateListFromQuery()
4. repository.fetch()
5. update this.$data.list
6. -> refresh screen
```
@Component({
  watch: {
    '$route.query': '$fetch'
  }
})
export default class HogeListVueImpl extends Vue implements HogeListVue {
  public async fetch() {
    await this.updateListFromQuery()
  }

  private async updateListFromQuery() {
    this.$data.list = await this.repository.get(this.$route.query)
  }
}
```

```
export default class Header extends Vue {
  public async onClickChangeUserButton() {
    const url = this.createReplaceURL(this.$route.path, this.$route.query, this.$data.userIndex)
    this.$router.replace(url)
  }
}
```

## @nuxtjs/proxy
changing to route implicitly.


.ex
```.env.local
BASE_URL=http://localhost:9001
PROXY_TARGET=http://localhost:9001
AXIOS_PREFIX=/api
```

```nuxt.config.js
  axios: {
    baseURL: process.env.BASE_URL,
    credentials: true,
    prefix: process.env.AXIOS_PREFIX,
    proxy: process.env.ENV === 'local'
  },
  proxy: {
    [<string>process.env.AXIOS_PREFIX]: {
      target: process.env.PROXY_TARGET,
      pathRewrite: { '^/api': '/' }
    }
  },
```
```package.json
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/proxy": "^1.3.3",
```
nuxt-proxy

```typescript
async hoge(){
    await window.$nuxt.$axios
      .get('v1/login')
      .then((response) => {
}
```

change url 
localhost:8000/v1/login
to
localhost:9001/api/v1/login
1. add 'api' by AXIOS_PREFIX
2. change to localhost:9001 by @nuxtjs/proxy


on Chrome inspector
localhost:9001/api/v1/login
->
localhost:8000/api/v1/login

Cant intersept other Proxy Software(ex.Charles)


## iOS Build failed by CocoaPods
checkout other branch branch, frequently fail to build.
because cause mismatch libraries integration.

how to fix this issue, have to clear any caches and rebuild Pods
```bash
rm Podfile.lock

rm -rf Pods
rm -rf ~/.cocoapods
rm -rf xxxxxxxx.xcworkspace
pod cache clean --all
rm -rf ~/Library/Developer/Xcode/DerivedData
rm -rf ~/Library/Caches/AppCode2019.3
rm -rf ~/Library/Caches/CocoaPods
```

## iOS cant use REPL boundary Pods library and code
```Podfle
plugin 'cocoapods-binary'
all_binary!
pod 'IBAnimatable', binary: false
```
'cocoapods-binary' plugin serve prebuild libraries
want to use REPL for librarie's objects,
disable this plugin and build local machine.
Twilio & Dev Hackthon Submition: Covid News SMS
Tags: twiliohackathon
Published: 2020-05-01 02:49:36

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built
I built an SMS service that sends to the user daily news about the COVID-19 in the USA. All that the user has to do is to enter their phone number in the form on the app's website.
The idea behind it is that there are so many news and while many people want to avoid the rabbit hole of bad news, they still may want to know what is going on. So for the beta phase, everyday the user get one SMS with the top news of the current day.

#### Category Submission: 
COVID-19 Communications


## Demo Link
https://covid-news-sms-demo.netlify.app/
 

## Link to Code
https://github.com/pachicodes/covid-sms-news-code



## How I built it (what's the stack? did I run into issues or discover something new along the way?)
**React, NodeJS and Express**
I am a Jr. Web Dev so while I know HTML and CSS well, but JavaScript skills are basic and I knew absolutely no NodeJS prior April 26th, so I tried learning it while following Twilio documentation and tutorials.
I also learned some React and Express to get this done.


## Additional Resources/Info

- [Twilio SMS API](https://www.twilio.com/docs/sms)
- [Twilio Phone Number](https://www.twilio.com/docs/phone-numbers)
- [Coronavirus Information API](https://developer.smartable.ai/api-details#api=coronavirus&operation=news) 

I made this as simple as possible to be able to build and functional app with the time I had, so I plan to implement future features like:
- User be able to subscribe to automatically get daily news.

##Shout Out

I have to thank my sister-in-law and super divaloper [Karoline Alencar](https://twitter.com/karoldalencar), who mentored me and helped me every time I got stuck and without who I would never be able to finish this project in time.
TypeError: Cannot read property 'filename' of undefined in ES Modules in Node 14 and greater
Tags: javascript, node, esm
Published: 2020-05-01 02:31:39

---
title: TypeError: Cannot read property 'filename' of undefined in ES Modules in Node 14 and greater
published: true
description: Node.js 14 removed module.parent and other globals when ES Modules are used, users may get errors they do not understand and may incorrectly assume the module they are importing is broken. As it turns out they can adjust how they require/import the module to successfully use CommonJS modules in ES Modules.
tags: javascript, nodejs, esm
---

**The problem**

When importing a Node.js module that uses some code similar to the following code:

```js
module.parent.filename
```

You might get an error similar to the following:

```bash
TypeError: Cannot read property 'filename' of undefined. 
```

The error can seem cryptic and might make you think there is a problem with the module you are importing. As it turns out, the problem is that you are using ES Modules in Node 14+ and using `import` to load a CommonJS module. While using this `import` syntax may sometimes work with CommonJS, some will not.

Luckily with a quick change you can successfully import the CommonJS module while still using `import` and ES Modules for the rest of your app/library.

**Why it happens**

[module.parent simply doesn't exist](https://twitter.com/MylesBorins/status/1255950295806488576) in Node ES Modules. It was removed because ES Modules are not a tree, but rather a graph. Thus the word 'parent' doesn't actually make sense when thinking about the module structures. Instead of thinking about hierarchy we're just at a point in a graph. Anyhow you don't need to worry about this distinction if you just fix this error. 

**A solution**

Instead of using the following code to import the module called [meow](https://npm.im/meow):

```js
import meow from "meow";
```

You can use the following code to import the meow module:

```js
import { createRequire } from "module";
const meow = createRequire(import.meta.url)("meow");
```

This is simply a way to tell Node to use the older require / CommonJS module loading while inside an ES Module. When you do this, module.parent.filename will be available again for the subtree of modules that get loaded.  

Special thanks to [Myles Borins](https://twitter.com/MylesBorins) for his input on solving this.
COVID-19 volunteers project
Tags: twiliohackathon, react, node, typescript
Published: 2020-05-01 02:29:24

---
title: COVID-19 volunteers project
published: true
description: My submission to the Twilio x DEV Hackathon!
tags: twiliohackathon, react, node, typescript
---

Excited to share a volunteers platform powered by Twilio SMS and Voice handling services. It was fun taking part in #twiliohackathon 🤓

## What I built
I build a service for helping people address their issues during quarantine time or in any other cases when help is required by finding volunteers who are ready to help.

### Sign up as a user or a volunteer 🙋🏻
Choose a role and verify your phone number with an SMS code from Twilio!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bv22pl5e4lv9u54nmwm5.png)

### Create a new task ✨
You're not alone! There're people ready to help you just need to ask

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s8rk0hsi7koccsox0trr.png)

### Or offer your help 👨🏻‍🎤

You are a rock star! We will immediately inform user vie SMS that you're ready to help.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jre0rljg0f8fmto09hr3.png)

### Make a phone call directly from the website 🤯

As soon as click "I'm ready" we will put you through with your volunteer. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5460pgr19eunl2atjygm.png)

## Demo Link
 There is still plenty of work to do, but I hope you enjoy it
[Volunteers project 🚀](http://volunteers.slide109.online/)

There are some test users if anyone wants to try it
```
      {
        "phone": "+11111",
        "role": "Volunteer"
      },
      {
        "phone": "+11112",
        "role": "User"
      },
      {
        "phone": "+11113",
        "role": "User"
      },
      {
        "phone": "+11114",
        "role": "Volunteer"
      },
      {
        "phone": "+11115",
        "role": "Volunteer"
      },
      {
        "phone": "+11116",
        "role": "User"
      }
```
Password is `fake-password`

## Link to Code
[Backend](https://github.com/Slide109/volunteers_backend)
[Frontend](https://github.com/Slide109/volunteers)

## How I built it
Thanks Twilio team for supporting this event and providing a great opportunity to play around with their SDK. That was fun. 

### Technologies

Backend is built using [NestJS](https://nestjs.com/) with MongoBD and GraphQL.
Frontend is built on [NextJS](https://nextjs.org/) with TypeScript, ApolloClient and [Mapbox GL](https://www.mapbox.com/) as maps provider.
Solution to Unknown modifier: $pushAll in Mongoose
Published: 2020-05-01 02:15:34

I first came across this error while solving [Freecodecamp's](https://www.freecodecamp.org) API and Microservices project Exercise-Tracker. I was trying to update an array in my DB using JavaScript "push" method but I kept running into this block. The solution to this is to include a settings object "usePushEach: true".
Here's how it's done:
```javascript
const MySchema = new Schema({
    name:String
},{usePushEach:true})
````
According to the [Github](https://github.com/Automattic/mongoose/issues/4455) issues, this should not be a problem from mongoose 5.0 and above, but unfortunately it's still there.Hopefully this is fixed in future release. :)
Food Find (Twilio Hackathon Submission)
Tags: twiliohackathon
Published: 2020-05-01 02:02:33


The name of my project is Food Find. Food Find is a chatbot that takes the names of grocery items and searches for stores with those items. The goal of Food Find is to simplify grocery shopping by providing people with a simple way to find many places where they can get a particular item without having to search for that item in multiple places online. 

Category Submission: COVID-19 Communications


Demo Link: http://1f3a781d.ngrok.io 
 

Link to Code: https://github.com/YnotCode/Food-Find


How I built it:

I used Node.js to create a server that takes in POST requests from the Twilio Programmable SMS API and responds accordingly. The server also serves static HTML pages and accepts POST requests from those as well. The server integrates the Kroger API and screen scrapes from the Walmart website in order to get links. The server also uses a small database of words that are NOT food items as well as a database of common grocery items to try and interpret natural language. As a beginner, the main challenges I faced were attempting to achieve consistent results with the natural language interpretation and delivering links in a reasonable amount of time. 

It was challenging to screen scrape quickly and it was hard to interpret texts without much knowledge on machine learning. The result of my efforts is far from perfect and only integrates Walmart and Kroger, but 

I think it can be improved and expanded with more efficient processing and more stores. 

A project by Anthony Varkey @ YnotCode on GitHub
Fixing a shallow GIT repo 💻
Tags: scm, git, devops
Published: 2023-11-14 19:36:27

---
title: Fixing a shallow GIT repo 💻
published: true
date: 2020-05-01 01:49:49 UTC
tags: scm,git,devops
canonical_url: https://medium.com/programmers-notebook/fixing-a-shallow-git-repo-6b940b8c77b
---

![Photo by [Yancy Min](https://unsplash.com/@yancymin?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/10000/0*fmdRWxfCNkSZVmvR)

Sometimes, a developer might intentionally (or) unintentionally end up with a shallow GIT Repo. And this can be a pain for those who unintentionally end up with shallow Repo.

You need to unshallow your local Repo. Following these simple steps can help you out of this situation.

Step 1: You must update/fix your origin remote repo. 
```git remote add origin <path-to-old-remote>```

Step 2: You would need to perform a git fetch with an unlike option (as suggested below)
```git fetch — unshallow origin```

Just these two steps would restore your repo to the normal state. After this, you can perform all options, like push into your new remote repository.

Initially, this was posted as a GIST @ [https://gist.github.com/gobinathm/96e27a588bb447154604963e09c38ddc](https://gist.github.com/gobinathm/96e27a588bb447154604963e09c38ddc)
🎼Voice-to-Note🤖
Tags: twiliohackathon, flask, aws, whatsapp
Published: 2020-05-01 01:37:28

---
title: 🎼Voice-to-Note🤖
published: true
description: My submission to the Twilio x DEV Hackathon!
tags: twiliohackathon, flask, aws, whatsapp
---


## What I built
I assembled a Whatsapp bot that, given audio, will use Google's Cloud Speech-to-Text to extract the text and send it back to the user. I figured that people are likely sending many more voice notes now that they're having longer conversations over text (I know I am). I know for me it would be nice if I didn't need to spend 5-10 minutes listening, or maybe it's not always comfortable for me to listen. This way I can easily get the voice note converted to text for quick and easy reading.

#### Category Submission: Interesting Integrations


## Demo Link

Feel free to connect to my sandbox by sending a WhatsApp message from your device to +1 415 523 8886 with code join terrible-shop

![Screenshot of Chat With Bot](https://dev-to-uploads.s3.amazonaws.com/i/1oz5llwkgg8sa3nwruys.png)
 

## Link to Code

https://github.com/huntingphi/voice-to-note


## How I built it

I built it using flask running on AWS Lambda. When a message comes in, the file containing the audio is fetched through twilio from an s3 bucket and sent to the Google Speech Recognition API. The result is returned to the flask server and the flask server then sends it back to the user.

It was interesting learning how the twilio API handles media, and the redirect to an s3 bucket was unexpected. Initially I was planning on just passing the twilio url to the Google API but because of the redirect it was necessary for me to download the file first and then send the file itself to the Google API.

Zappa was used to deploy the code to AWS Lambda and expose a public endpoint via API Gateway.


## Additional Resources/Info
Used https://dev.to/apcelent/deploying-flask-on-aws-lambda-4k42 for lambda deployment
Used https://cloud.google.com/speech-to-text/docs/quickstart-client-libraries?authuser=1#client-libraries-install-python for recognition code

## Closing notes

I had a lot of fun playing around with this project. Initially I was going to do fake news detection but it turned out that was quite a difficult problem to solve😂 I'm happy that I could still participate and learn with a different project 😊 Thanks for checking out my project and stay safe ❤️
Send a Text at the Push of a Button
Published: 2020-05-01 01:20:12

#twiliohackathon,#arduinocreate,#php

Nothing like doing this at the last minute, but I'm giving the Twilio Hack-a-thon a shot! (Hoping for some bragging rights.)
The "ESP8266 and Arduino Create Cloud.pdf" posted on my GitHub page (https://github.com/theledlady/TUIT/) contains a step-by-step tutorial (with pictures) on how to connect "Things" (like an Arduino esp8266) to Twilio using Arduino Create and Twilio's PHP. It's been a lot of fun and a great learning experience. I'm happy to have this opportunity to share.
Now that this post is done, I am planning a "geek-out" weekend. A Wi-fi connected hand-sanitizer anyone?
RedCS Web Application
Tags: twiliohackathon
Published: 2020-05-01 01:17:17

## What I built
#### Category Submission: COVID-19 Communications
RedCS is a Web Application created to aid people during the lookdowns due to COVID-19 emergency.

RedCS is an App intended to join the people looking for help with those who wants to help; RedCS is free of charge and need no subscriptions.

The App has 2 stages:

A) Front-stage: for final users who are looking for help or wants to help; the user login into the system with his/her Cel number and then receives in WhatsApp a code as a password to complete the authentication process, (the code is sent to the user using Twilio Api); then, the user may post requests for help (categorized) and/or may post how he/she wants to help (categorized too); all the matches between people is advised to the parts with WhatsApp messages via Twilio Api.

B) Back-stage: for administrative users; they login in to the system using the "Admin" option in the main menu, with a previously created account (user and password); they manage categories, keep the DB info quality (moderate languaje) and give support to final users.


## Demo Link
https://redcs.connectividad.net/
 

## Link to Code
https://github.com/mauriciojaramillo/redcs


## How I built it (what's the stack? did I run into issues or discover something new along the way?)
1. Great Api from Twilio to send messages to WhatsApp, new for us and very useful.

2. WhatsApp messages give us freedom to send instant info to users and avoid spam messages and use different ways to communicate with users without the restrictions for mail transport.

3. Some of our users may not have email accounts, but almost all of them have cel phones and use WhatsApp.

4. In Colombia is better the cel phone network for use WhatsApp than the services provided to use email.

5. Integrating Twilio Api to our development was so easy.
Time for focus
Tags: webgl, graphics
Published: 2020-05-01 00:46:57

---
title: Time for focus
published: true
description: Just an update for anyone who is interested
tags: webgl, graphics
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/58ulcvs64yktqgr0t22z.jpeg
---

I usually post a heavily though out post on a random topic that interests me at the time. My last post was an exception and this one will be as well. 

Lately I've been feeling as if I'm running out of time. Currently I'm in the last year of my bachelors but decided to do a 2-year masters because the creative dev industry seems on hold. Even though I'm most likely going to graduate this year I feel like I haven't 'achieved' a lot. 

I know mostly web development and have created websites and web apps  at a creative agency as something on the side. After actively looking for other types of development I noticed two interesting domains: embedded systems & computer graphics.

I've explored both but because of my split attention I haven't really had the chance to dive deep and learn/build in a way that can be shared. Because my interests are based on the low-level development aspect, keeping up a 'once-a-month' upload schedule on dev will be kind of hard to maintain. 

For the past couple of days I've been watching Tae'lur Alexis' live-streams on twitch and asked how she navigates her learning process based on all of the interests that she has. Her answer boiled down to: 'I pick something and stick with it'. Even though it is a really common piece of advice, this was the first time I 'got it'.

It was really hard to pick between hardware and graphics for the three month dev exploration I want to do to dive deeper. I decided to flip a coin. Heads for graphics, tails for hardware. I got heads. 

There are still a few things I have to figure out but I want to stick to graphics for a while and work from there. It'll be web based at first but I'm pretty sure that'll change too. 

If you are one of the 5k people that follow me here on dev and got this far, thank you. Seriously. I hope my journey will at least be interesting to you in the future.