teleren/devto huggingface dataset:
BCP Calltree
Tags: twiliohackathon
Published: 2020-04-28 20:03:46

## What I built
Every company has a Business Continuity Plan (BCP) to deal with unforeseen events that may disrupt the business' normal activity. The possibility to reach all the employees in an automated fashion, using Twilio APIs, simplifies dramatically the process of contacting manually everyone in the organisation, by means of traditional phone calls.
In this Calltree model, one employee has the designated role of CHAMPION. The CHAMPION can initiate an event by specifying the target role to send the messages to, in a hierarchical-style (CHAMPION -> MANAGER -> LEADER -> REPORTER), and also a text as body of the SMS. 

![Calltree hierarchy](https://i.ibb.co/kDyM1v6/role-tree.png)

When an employee replies to a SMS sent by the system, the response is then saved in the  database. The champion, through the UI, can check the status of the event(s), terminate it and check the results in the dashboard. 
The first level of statistics is an overview of the overall events - number of SMS sent out, number of replies and average response time in minutes. The second level of statistics is more comprehensive and collects data from each employee. 
When the number of the replies is equal to the number of SMS sent out during the event initiation, the system will automatically terminate the event for the champion, if the event has not been terminated prematurely by the champion. 

#### Category Submission: 
Engaging Engagements
 
## Link to Code
[BCP Calltree on Github](https://github.com/TeamWicket/Twilio-BCP-CallTree)

## How I built it 
This is a fairly standard 3-tier application, composed of frontend, backend and database.
The frontend stack is React (with JavaScript and TypeScript - statically typed). The backend is a mixture of Java and Kotlin languages, in combination with Spring Boot, REST APIs are documented using OpenAPI v3 specifications (with SpringDoc and Swagger implementation), embedded JMS and Spring Data. 
For demonstration purposes the application is using an in-memory database (H2), but the system is ready to use PostgreSql, just by selecting the appropriate property file at startup.

CircleCI has been used as a building tool, connected to the Github repository for automated build after every code push.
Harp/Jade Debug Snippet
Tags: debug, harp, jade
Published: 2020-04-17 04:55:56

---
title: Harp/Jade Debug Snippet
published: true
date: 2018-08-31 14:59:00 UTC
tags: debug,harp,jade
canonical_url: http://english.catchen.me/2018/08/harp-jade-debug-snippet.html
---

I’m using [Harp](http://harpjs.com/) with [Jade](http://jade-lang.com/) recently. At the beginning, it was hard for me to figure out the JSON data structure used by Harp at build time. It was also hard to debug JavaScript function written in Jade and executed at Harp compile time. In the end, I figured out that I could dump that JSON as a string to `console.log` in browser. Everything is so much easier now.

 <script src="https://gist.github.com/CatChen/e2ad53a2050b76e3d15fc5f33ea37ecc.js"></script> 

Now I have that [`debug.jade`](https://github.com/CatChen/catchen.me/blob/master/public/_partials/debug.jade) file in [my project](https://github.com/CatChen/catchen.me). Whenever I want to examine some JSON data in Harp, I just call `!= partial('debug', { data: anything })` and pass the right `data`.

 ![](http://feeds.feedburner.com/~r/CatChen/English/~4/4ZBj4VXAuwU)
`docker run -p 127.0.0.1:8080:8080`? and if not, do I need SSL certificate?
Tags: docker, help, devops, fastify
Published: 2020-04-17 04:49:55

It is [this repo](https://github.com/patarapolw/rep2recall/tree/lessons), actually; powered by fastify.

About SSL, I can try `docker run -p 8080:8080`, but then I would need to access `http://0.0.0.0:8080` which gets permanent redirect (301) to `https`, but then, I don't have local HTTPS. (I rely on Heroku's for online.)

I think the culprit is Chrome's security itself.

Ok, I decided to ask on StackOverflow.

{% stackoverflow 61268560 %}
How to detect a change in HTML5 Local Storage in the same window?
Tags: help, javascript, html
Published: 2020-04-17 08:57:46

I want to detect if a **local storage variable** value is changed or not, But I have noticed that if I added an event listener on **'storage'** event, I can detect the change only if I open the same link in ** another window** and then change the **local storage value** from that window, then it will show me the change in the **first window**. But I don't want this behavior I just wanted to observe the change in the **same window**. Is there any way to do it?
CONFLICT MANAGEMENT SYSTEM - PRACTICE IN SOCIAL LIFE AND TECHNOLOGY CULTURE
Tags: discuss, techtalk
Published: 2020-04-25 15:46:19

---
title: CONFLICT MANAGEMENT SYSTEM - PRACTICE IN SOCIAL LIFE AND TECHNOLOGY CULTURE
published: true
description: Talk about complex systems (whatever they are). It takes a strong logical basis to find "bugs" or errors, it may be small and trivial but it will be fatal if the scale is large. Especially the big "bugs"!
tags: discuss, techtalk
---

Talk about complex systems (whatever they are). It takes a strong logical basis to find "bugs" or errors, it may be small and trivial but it will be fatal if the scale is large. Especially the big "bugs"!

When logic is used to "debug" a problem in a system, it will produce new reason or understanding, this allows us as humans in its application to calculate/formulate it with mathematical / physics theory to find solutions.

Unconsciously, the actual working system of the human brain has been able to calculate the formulations that will be generated by logic and produce new values, namely conclusions that we practically call "action".

However, if we determine conclusions or actions that are not in accordance with what we want, then the diction can be seen from the "processor" of a computer that has special specifications depending on usage and needs.

If you can take advantage of this conflict management system that already exists in every human being, then any problems you can face, even if you are unable to survive in the system, you can go out and create a new system and create a "backdoor" to occasionally view and learn from "bugs" from the old system.

What do you think? and what is your opinion?
How To Install PostgreSQL On Windows 10
Tags: postgres, database
Published: 2020-04-25 19:51:52

## And Use It From Your Terminal

### Installation Instructions

Go to [PostgreSQL Database Download](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads) and download the version of PostgreSQL you want under the "Windows x86-64" column. Once the installer is done downloading, run that bad boy.

![Download PostgreSQL](https://dev-to-uploads.s3.amazonaws.com/i/lyj7u5viavbz1buj92sj.PNG)

Once you run the installer you downloaded, you should see a screen that looks like this:

![PostgreSQL installer](https://dev-to-uploads.s3.amazonaws.com/i/hhbi2qbd472xhq27oo14.PNG)

Click `Next >`. Then choose your installation directory:

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

Select components. I would leave all these checked and click `Next >`.

![PostgreSQL components](https://dev-to-uploads.s3.amazonaws.com/i/rrarjp52huvkczqv22yw.PNG)

Select the data directory. I left its default value.

![PostgreSQL data directory](https://dev-to-uploads.s3.amazonaws.com/i/muhwhi6p93ovcgkgfrfa.PNG)

Set up a password for your PostgreSQL user. Do something that's really easy to remember. If you're not worried about somebody hacking and finding sensitive data in your local PostgreSQL data, you would probably be fine setting it to `password`.

![PostgreSQL password](https://dev-to-uploads.s3.amazonaws.com/i/x1ciy10djmzfjd7f3sk2.PNG)

Set up PostgreSQL port. Default is 5432, I recommend leaving it like that.

![PostgreSQL port](https://dev-to-uploads.s3.amazonaws.com/i/dqq0lhywc8b7e6s593z1.PNG)

Choose your locale. I speak English and I'm from the United States, so I choose `English, United States`.

![PostgreSQL locale](https://dev-to-uploads.s3.amazonaws.com/i/4tvx7jrt1m0z9ardi7u9.PNG)

Once we get to the pre-installation, click `Next >`.

![PostgreSQL pre-installation](https://dev-to-uploads.s3.amazonaws.com/i/4qkyn1i5376nq925z7sn.PNG)

Then click `Next >` again and it install will start!

![Install PostgreSQL](https://dev-to-uploads.s3.amazonaws.com/i/di7598ozmz1al9icqsoz.PNG)

Now, in your Windows search bar, type: `Edit the system environment variables`. Click on that and you should see this:

![Windows env vars](https://dev-to-uploads.s3.amazonaws.com/i/mayp5zm5rvba6pzq00fe.PNG)

Then click on the `Environment Variables` button. 

![User env vars](https://dev-to-uploads.s3.amazonaws.com/i/3vjxmcxyzcfwrex5f60q.PNG)

Click on PATH under user variables and then `Edit...` and then add the path to your PostgreSQL's bin folder to the list of locations in your PATH variable.

![PostgreSQL path](https://dev-to-uploads.s3.amazonaws.com/i/oignl8pyjpfnnfoh2e6w.PNG)

Click `OK` then `OK` and `OK` again. Once you've closed out of everything you should open up your terminal and type `psql -U postgres` and it will ask you for PostgreSQL's password. Whatever you set it as during the installer will be what you want to type in, and tada! :tada: You can now use PostgreSQL in the terminal now!
Smooth Operator: Concurrent Mode in React
Tags: softwareengineering, programming, react, javascript
Published: 2020-04-30 05:00:58

---
title: Smooth Operator: Concurrent Mode in React
published: true
date: 2020-04-27 15:36:32 UTC
tags: software-engineering,programming,react,javascript
canonical_url: https://medium.com/javascript-in-plain-english/smooth-operator-concurrent-mode-in-react-bf303de4c161
---

[![](https://cdn-images-1.medium.com/max/2600/1*_PPkLZHj34kBI1WEhPi6AA.jpeg)](https://medium.com/javascript-in-plain-english/smooth-operator-concurrent-mode-in-react-bf303de4c161?source=rss-5676ca6163ee------2)

Warning: At the time of writing this, Concurrent Mode is not yet stable and should not be used in production.

[Continue reading on JavaScript in Plain English »](https://medium.com/javascript-in-plain-english/smooth-operator-concurrent-mode-in-react-bf303de4c161?source=rss-5676ca6163ee------2)
HTML to DOM (following...)
Tags: html, dom
Published: 2020-04-28 12:01:44

Following the previous snippet **toDom**, here is another example

```js
String.prototype.toDOM = function () {
  var d = document,
    i,
    a = d.createElement("div"),
    b = d.createDocumentFragment();
  a.innerHTML = this;
  while ((i = a.firstChild)) b.appendChild(i);
  return b;
};

const users = [
  {
    prenom: "Hal",
    age: 45,
  },
  {
    prenom: "Bert",
    age: 54,
  }
];

const mail = ({ prenom, age }) =>
  `<li onclick="alert('${prenom}')">
  Bonjour ${prenom} vous avez ${age} ans
  </li>`;

const style = `
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li:hover {
  cursor: pointer;
  background: blue;
  color: white
}`

document.body.append(
  `
  <style>
    ${style}
  </style>
  <ul>
    ${users.map(mail).join('')} 
  </ul>
  `.toDOM()
);

```

You can test it here : [toDom](https://flems.io/#0=N4IgtglgJlA2CmIBcA2AHAOgMwBoQDMIEBnZAbVADsBDMRJEDACwBcxYQ8BjAe0pfj9kIEAF8cVWvUYArUtz4ChDAMosAThEoBzDAAd1PFkYCee+BmMARAPIBZAAQBeB-gCulLiwh8HACgBKB2AAHUoHBwA3anUHKGc4ni43On4cMIiIiHTwzOoEqAwudXhqAQBRBFSWPxCQKAhIuoCczIcAIwKikrL4KySUwRYAMXVqbWrAgG4Mh2oMLUp4dQAJABU7ABkEliYIYhncgHc9hH8-CAT5wnViFgBhU6gAoPaMaj1zSihHoigLgKHCIlFhudThdqHUSHMK8Sh3BxuYjLYgJMizUK5CIGQQ8MBIBx1FbUWB1Vp5bTwAkAFgArOTxBjZtiSpQ8QS6gAhZYsMnMuaUgm06kMsIAXRhnj4CLA1CICT8wAcOLZYBwAvgDlEQScAD5ZgADAA8sEufC4pq4AGsnHUSTy-AByAAkwBVeNEjoCdX1uU5fBkPDBDld7rAoiiQdR1Ei8AAXiHgON4BHqPDZkaAPSm3UGyVwhF3ExnFwGsJuWDBWamu4AWiLCAJbKWQOV1BgWm0BIADK3ZeptFoe1CwqakEweLHYpiIslbjx1AS9DwtAJ1K32tRrdpDB4oAT2rA3PBW7xYAuCScIAIwqIwmXvgNqhh2jwoCZ3p9BP9DRmG-BfTaV1-zvXIs3-QCHCNCtIIiV0kRRDBZT0PxZSIAIMEDLQnS9CMM0zGDDUsHhbDsQIwkBMJOBAZEEC8Hx4WEbskG7WtqTQFixAkEAaDoYQimIeQQDhJQWGEMQxTwXjpGsPExCAA)
Apagando o cache do Redis
Tags: redis, cache
Published: 2020-04-28 12:29:46

Se você não usa cache na sua aplicação, considere usar. Otimiza muito a performance e, se bem aplicado, vai te polpar bons recursos e ainda deixar o usuário bem feliz pela agilidade na entrega das requisições. Mas hoje não vamos falar de como implementar isso, é só um artigo rápido para te ajudar a limpar o cache caso precise.

## Como listar todo o cache

```
redis-cli keys * 
```

## Como apagar todo cache

```
redis-cli FLUSHALL ASYNC
```

## Como filtrar a lista do cache

```
redis-cli keys "*ALGUMA_PALAVRA_NO_MEIO*"
```

## Como apagar entradas específicas 

```
redis-cli --raw keys "*ALGUMA_PALAVRA_NO_MEIO*" | xargs redis-cli del
```

É isso aí! Como falei, é só um guia para consulta rápida!

Até a próxima!
Is it okay to build portfolio not using my own ideas? 
Tags: Portfolio, discuss, frontend
Published: 2020-04-28 12:51:26

Hi, I'm beginning to build my own portfolio and I've been searching for ideas and I've found it. 

So I kinda like, use that template <b>BUT</b>, I didn't just copy the whole thing and leave it like that, I improvise the site to my own likings, like added some css elements such as typewriter effect, added some components to showcase my skills. 

The point is, I added some of my own ideas to a template to make the site as my portfolio, it's acceptable, right? Or people will judge like, "euw, are you even a developer?", "go get a creative mind bro"? 

I need some feedbacks and yeah, if you wanna see, just let me know, thanks!
AQI
Tags: python
Published: 2020-04-28 14:11:23

# Air Quality Index

I'v been experimenting to fetch data related to [AQI](https://en.wikipedia.org/wiki/Air_quality_index) in China recently.

A good resource is http://aqicn.org, which provides air pollution data in a good way by city, and I try to write a python script to crawl the data from it.


{% gist https://gist.github.com/chuanjin/07a0f43530464cabe7ff3cb45107e4d1 %}

Another website is http://www.stateair.net/, it reports AQI from US consulate in Chinese major cities, i.e. Beijing, Shanghai, Guangzhou, Chengdu and Shenyang. Similarly, the code to fetch data from it shown below.

{% gist https://gist.github.com/chuanjin/4d0307f1dbcb19c2743a348045b137ea %}

Both of the code above are using Python and handy packages like [requests](http://docs.python-requests.org/en/master/) and  [Beautiful Soup](https://www.crummy.com/software/BeautifulSoup/bs4/doc/).

The stateair website also provides historical data for download in CSV format, therefore I use those data to create a simple visulization page. Check it from https://chuanjin.github.io/pm25/ and source code is availabe from Github [repo](https://github.com/chuanjin/pm25).


Last but not least, I found [pm25.in](http://pm25.in/) website, and they provide real time data for all Chinese cities, even better, they have opened their API for develper and I also created a Python library based on their API. Code available from https://github.com/chuanjin/python-aqi-zh
Angular Events vs. Observables
Tags: angular, events, typescript
Published: 2020-04-28 14:47:16

When Angular 2 came out, it adopted the [Observable](https://www.google.com/search?q=angular+observabl) as an intregal part of its architecture.  [rxJS added all of these Observable oriented functions, operators and support](https://rxjs-dev.firebaseapp.com/api). All good; yes very good, except for one thing. It's ramp up time is quite steep.

**Simplicity First**

None of the DOM architecture has Observables built-into it like Angular. That's because it was built on the [event model](https://www.google.com/search?q=dom+events). Indeed reading up on the [DOM Living Standard](https://dom.spec.whatwg.org/) we see just two words referring to something Observable; both in the context of Events.

**The EventHandler**

The pre-historic 'observable' was the [event handler](https://www.google.com/search?q=dom+event+handlers) which registers a function to listen for an event. It is asynchronous, because it never knows when the event will happen. The event itself is time-independent and, the event architecture of the DOM is baked-in. It's so deep that the current standard shows no indication of change. So while the event is pre-historic, in this case it just means that; it is, was, and will continue to be around the DOM world for a long time to come. 

**The EventHandler is it's own type of Observable**

I was reading up on [StackOverFlow's bazillion posts on Angular Observables](
https://stackoverflow.com/search?tab=votes&q=%5bangular%5d%20observables), the other day. There are over 24 thousand questions on Observables. One of the common comments are ["Don't ever use events in Angular, the support may be pulled at some time, use Observables"](https://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter/36076701#36076701). This is just [bad, opinionated advice](https://en.wikipedia.org/wiki/Drinking_the_Kool-Aid). 

[What's a ba-zillion anyway?](
https://www.google.com/search?q=bazillion)

**Computer Programming Event History**

The history of [events in computer programming goes back 50 years or more]
(https://www.google.com/search?q=computer+programming+events). This is a good thing, in that there are probably no bugs left to find in this architecture. 

There is some [criticism of events](https://en.wikipedia.org/wiki/Event-driven_programming#Criticism) but it doesn't seem to be substantial nor is there any credit given for those conclusions.

**Event Usage in Angular is Fine** 

On your journey to learning about observables, don't forget about the more simple event pattern. It works quite well, and has a rich solid history. So much so, that the Observable architecture [adapts to events](https://www.google.com/search?q=rxjs+fromevent) easily allowing anyone to transform an event into an Observable. 

JWP2020
Competitive Programming
Tags: competitiveprogramming, algoritham, datastructures
Published: 2020-04-28 17:51:46

#What is Competitive Programming
Competitive Programming is an *art*. Most of the developers don't do this because they think **it's really tough ?**. But it isn't tough it's like a game when you start playing with problems you start loving it. **CP** is like a game but it also tests your patience level.

##How to start Competitive Programming ?
Most of the beginners don't know how to start **CP** even i myself don't know this when i started my journey in *CP* world. When i started *CP* most of the time i was unable to solve even basic ***problems*** and this is the time when we say that we can't do this. But the only way to be good in this is ***keep doing*** competitive programming.

###Some rules to start competitive programming
- learn one programming language completely.
- learn data-structures
- Strong your basics and for this
- Daily write code
- Read and apply algorithms.



####Golden rule of *CP*
The only rule is just **learn before** you **write** code. The problem with us is this world change us and we don't want to wait and that's why most of the developers jump in competitive programming before knowing the basics and that's why they'll not able to solve problems and they become frustrated. So first complete your basics and write code daily.

#####How we can do this regularly ?
This is the common problem with us that we start something and after 3 or 4 days we become bore and we leave that thing.

**Solution** of this problem is 
- do commitment with yourself
- write your goal somewhere( like on paper etc.)

and the best way of doing this is make a **PR** on github and name it whatever you want eg. [100 days of CODE](https://github.com/developer-anand/100-Days-of-code) and push your code daily.
A workout routine with Oracle DEV GYM
Tags: java, programming, productivity, sql
Published: 2020-04-29 03:02:37

---
title: A workout routine with Oracle DEV GYM
published: true
description: 
tags: java, programming, productivity, sql
cover_image: https://images.unsplash.com/photo-1556817411-31ae72fa3ea0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80
---

As developers , we must to find the opportunity to go to the gym and be healthy, count with an excellent routine for to see the results soon, but we don't have to forget that not just the body needs exercise, the brain too, and needs a special gym for that. But the gym what I going to say isn't a real gym with sweat and weights. This gym is where the programmers who knows Java, SQL, databases and logic recurring for get in shape with exercises to solve, improve the logic and participate in tournaments.

So, Oracle designed a website for practice, have a lot of exercises, tournaments and classes.

![Oracle DEV GYM](https://i.ibb.co/3cp7Xkn/Screen-Shot-2020-04-28-at-19-15-16.png)

Register.

![Oracle DEV GYM register](https://i.ibb.co/L0yRbHD/Screen-Shot-2020-04-28-at-21-56-06.png)


You can check your score and trophies.

![Oracle DEV GYM dashboard](https://i.ibb.co/64m9ynd/Screen-Shot-2020-04-28-at-19-33-13.png)

The only this what you need is register and start the exercises. I hope this help you.

Link:
[https://devgym.oracle.com/pls/apex/f?p=10001:2001::::2001::](https://devgym.oracle.com/pls/apex/f?p=10001:2001::::2001::)
WeWatch - virtual couch to watch videos with people
Tags: twiliohackathon
Published: 2020-05-01 06:59:01

[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
During COVID-19, people are bound at their homes. Times of watching shows together with your friends feel like a distant past. 

WeWatch is a virtual couch for friends to watch videos together.
1. Invite friends to same room
2. Paste in video link (currently supports YouTube and other sites)
  - video is synchronized across each client (play, pause, scrub)
3. React to videos while video streaming with your friends

#### Category Submission: 
COVID-19 Communications

## Demo Link
None yet

## Link to Code
https://github.com/Michael-Xie/wewatch

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
- React, Express, Node, Twilio Sync, (Twilio Programmable Video)
- react-player

### WIP
- video streaming for participants

### Issues
- there are a lot of sync updates, even thought played or paused once
- as the play and pause are pressed more, more lag is created between clients

## Additional Resources/Info
Setting up Multiple Environments on React Native for iOS and Android
Tags: reactnative, mobileprogramming, ios, android
Published: 2020-05-02 17:35:17

---
title: Setting up Multiple Environments on React Native for iOS and Android
published: true
description: Tutorial explaining how to set up multiple environments on React native for iOS and Android and be able to install each version on the same device (spoiler: different bundle identifiers/application suffixes).
tags: React Native, Mobile Programming, iOS, Android
---

As soon as a project starts scaling, it becomes obvious the ability to have more than one environment is crucial.

I just published an article talking about just that; check it out!

https://medium.com/@maximejulian/setting-up-multiple-environments-on-react-native-for-ios-and-android-c43f3128754f
My first blog
Tags: freevps, vps
Published: 2020-05-04 16:08:11

Hi my name is hamza and i am from pakistan i love to do seo work and i have small <a href="https://freewindowsvpslifetime.com">website</a> you can visit my <a href="http://freevpslifetime.com">free vps website</a> any time for amazing tutorial