teleren/devto huggingface dataset:
You are being manipulated
Published: 2020-09-22 03:42:42

I wish this were a click-bait title. Sadly not. It is also not trying to push you into a political party or a religion or a business interest. It is an invitation to look at what is being done with our modern media.

Anything I probably want to say in this post is well covered by a documentary called [The Social Dilemma](https://www.thesocialdilemma.com/). Most of the interviews are with people who made the tech we all use. From management to the developers themselves.

I guess I won't rehearse all the things they presented there. But I will say this about the perceived dividedness that we face today. Media makes the most money by selling you the weapons and motivation to fight your neighbor. Social media does it at scale.

Please watch the documentary so you understand how it is happening. _Insert borrowed Netflix password meme here._ And as software developers consider how your company is using your creations. And I do not mean ICE using github... I mean something much bigger. Is the business model -- the engine that drives the company -- humane? Or does it data-mine and sell its users to advertisers? That is the fastest way to make money, but it also brings out the worst in humanity. Because what sells best are the things that appeal to our basest instincts.

I heard a song once... went something like this: "Is this the world you want? You're making it." Especially true for developers these days.
Merge Sort Algorithm 
Tags: algorithms, computerscience, javascript
Published: 2020-09-22 03:35:55

The merge sort algorithm is an effective algorithm to use when sorting a list. To sort a list, using the merge sort, two steps must be taken; split the list until the sublists are compromised of only one element and merge the sublists until the sorted array is reached.

##Implementation
So first we must have a function which can split the array until its length is equal to one
```
let unsorted_array = [3,5,7,2,1]

let merge_sort = (arr) => {
    let mid = arr.length/2
    let first_half = arr.slice(0, midp
    let second_half = arr.slice(mid, array.length)
    if (arr.length < 2){
       return arr
    }
    else{
       return merge(merge_sort(first_half), merge_sort(second_half))
    }
}
```
The code above is pretty straight forward; an unsorted array and merge_sort function are created. This function splits the array and passes the two halves into itself until the array is less than two in length. Once this is achieved the single subarray are all run through the merge function.
The next part we need to implement is the merge function. This function will return a sorted array composed of the two halves.
```
let merge = (first_half, second_half) => {
    let sorted = []
    while(first_half.length !== 0 && second_half.length !== 0){
          let currentMin = find_min_and_remove(first_half, second_half)
          sorted.pus(currentMin)
    return sorted.concat(first_half).concat(second_half)
```
The merge function appends the minimum from the two lists to the sorted array and also removes this item from its corresponding list. When one of the lists is empty the remaining elements are appended to sorted. The double append here is due to the fact that either list could become empty and allows for the absence of a check to determine which list is empty.
Lastly, we must create the find_min_and_remove function. This function will compare the first items of every list to find the minimum
```
let find_min_and_remove = (first, second) => {
    let min_first = first[0]
    let min_second = second[0]
    if (min_first < min_second)
       return first.shift()
    else:
       return first.shift()
```
Since the list will be split into single items the first element of every list will be the minimum. So the list that contains the smaller element will have it removed and sent back to be appended to the sorted list in the merge function. 
And that is it.
✍🔊👂 Free Text to Speech TTS Synthesis API 👉 Pure Vanilla JS JavaScript CodePen Source Code Demo
Tags: codenewbie, codepen, beginners, javascript
Published: 2020-09-22 03:29:55

🔛 Pure HTML, CSS, JS 👉 Google Text To Speech (TTS) API ✍ Source Code

{% codepen https://codepen.io/livewordpresshelp/pen/LYGgJRj %}
Using Vue3 And VeeValidate for Forms and Form Validation
Tags: vue, ionic, javascript, tutorial
Published: 2020-09-22 02:46:44

### Overview
Forms and Form Validation are a key part of many applications so I wanted to create a small sample application showing one library [VeeValidate Template Based Validation for Vue.js](https://vee-validate.logaretm.com/v4/), and how to integrate it with the new [Vue3 Release](https://v3.vuejs.org/guide/introduction.html).

Since a lot of folks who read my content know I work with Ionic Framework, I have implemented this solution with [Ionic Vue3 Web Components](https://ionicframework.com/docs/vue/quickstart)

### Video
- [See Source Code from Video](https://gist.github.com/aaronksaunders/23d91b7f033e34b863de6252c903a01e)
{% youtube iUN357fOUN0 %}

### Additional Examples
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3c1u2x9qy5akquvxxdk0.png)

- [See Source Code for Additional Examples](https://gist.github.com/aaronksaunders/53f1a8a41b2f27e650f4cd258ceb9843)

#### Setting Initial Values
```vuejs
<v-form v-slot="{ values }" 
   @submit="onSubmit" 
   :initialValues="formData">
</v-form>
```
In the `script`, define the object with the appropriate key/value pairs to be assigned to the form
```javascript
setup() {
  // set some initial values
  const formData = ref<any>({
    title: "Aaron",
    body: null,
    gender: "MALE",
    save : false
  });

  return { formData };
},
```

#### Working With Toggle, CheckBoxes
```vuejs
<ion-item>
  <ion-label>SAVE IT</ion-label>
  <v-field name="save" v-slot="{ field }">
    <!-- we need to set the checked property -->
    <ion-toggle v-bind="field" name="save" 
       :checked="field.value">
    </ion-toggle>
  </v-field>
</ion-item>
```


### Links
- [Announcing the (new) Ionic Vue Beta](https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/)
- [Vue3 Release](https://v3.vuejs.org/guide/introduction.html)
- [VeeValidate Template Based Validation for Vue.js](https://vee-validate.logaretm.com/v4/)
How to Install a Specific Version of an NPM Package
Tags: webdev, codenewbie
Published: 2020-09-22 03:21:51

The other day I got a warning in a Vue project I've been working on for a while. It was complaining about me using an unsupported version of TypeScript. I decided to download a supported version, but how was I supposed to do that?

First I uninstalled my existing version of TypeScript:

```
$ yarn remove typescript
```

Then after some quick Googling, I found this for downloading a specific NPM package version:

```
$ yarn add typescript@3.5.3
```

You can do the same thing with NPM:

```
$ npm install typescript@3.5.3
```

And that's it! You can do this for any NPM package:

```
$ yarn add some-package@version
// or
$ npm install some-package@version
```
Dia 0: Conociendo
Tags: 100daysofcode, java, sorrymomimtrying
Published: 2020-09-22 03:19:58

Es interesante el hecho de que estoy tratando en convertirme en lo que jure destruir alguna vez... HAHAHAHAHAH... JAVA DEVELPER. Pero aqui estamos, aprendiendo de una nueva tecnologia para adquirir experiencia en mi lado oscuro del mundo web "BACK-END". No me mal-interpretes no tengo nada encontra del lenguaje... incluso vengo de front-end con conocimientos de C#, Node, SQL.

Ni siquiera me acuerdo de como lograr un "Hello World" con java, y ya estoy intentando aprender un framework (Spring boot). La razon por lo cual hago esto es para ver aprender algo diferente con un enfoque diferente... -_- donde normalmente comenzaria por lo basico como la sintaxis y cosas como esas. Pero necesito perder tiempo lo menos posible... confio en mis habilidades de estudiante XD.

Asi que... aqui estamos, configurando el entorno de desarrollo para java. Estoy usando como IDE 'InteliJ Idea' y ya tengo en mente el proyecto a realizar... asi que pienso ir aprendiendo a medida que vaya completando los objetivos del proyecto.

Sin mas que decir a mi yo del futuro y mis amigos... QUE LA SANGRE SIGA FLUYENDO SIN INTERRUPCIONES, MANTENIENDO EL OXIGENO EN MOVIMIENTO PARA QUE EL CEREBRO PUEDA DAR SU MÁXIMO RENDIMIENTO

21/09/2020 23:19
Open Source Simple Online Shop With React Native
Tags: reactnative, mobile, opensource
Published: 2020-09-22 03:08:03

---
title: Open Source Simple Online Shop With React Native
published: true
description: Build a simple mobile online shop app with react native
tags: reactnative, mobile, opensource
//cover_image: https://direct_url_to_image.jpg
---

This is an open-source react native project that I and my friend did when we're at home because of the pandemic. I also doing live stream on Facebook while coding this project, you can check [here](https://www.facebook.com/devoresyah.id/videos/1471363416407509/). And this project made for both platforms (iOS & Android).
 

Here's the app preview:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gsc4ps3gm30vhojkxyrv.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/glfdsrgvd3j389x60eil.png)
### What main library we used?
- [Ignite Boilerplate](https://github.com/infinitered/ignite)
- [OsmiCSX](https://github.com/OsmiCSX/osmicsx)
- [Formik](https://github.com/formium/formik)

### React Hooks
95% already use React Hooks. We want to create an open-source project that uses React Hooks for learning and the best practice.

### Reusable Components
We try our best to always make a reusable component, so the community can learn about the reusable component in react-native.

### Utility Style
Most react-native beginners will use pre-defined components such as NativeBase and UI Kitten. But on this project, we want to introduce OsmiCSX as a utility-style for react native to the community. It's like TailwindCSS on the website, easy to use, and easy to customize. [Check OsmiCSX Docs](https://osmicsx.github.io/docs/)

That's all, I hope it can help everyone to learn React Native and how to use React Hooks on React Native.
Project Repository => [github.com/CloudGakkai/Alfredo-Mobile](https://github.com/CloudGakkai/Alfredo-Mobile)
Đặc điểm của máy bộ đàm cầm tay Motorola GP338
Published: 2020-09-22 02:45:21

Nâng cao hiệu quả làm việc vớ [bộ đàm motorola gp338](https://hethongbodam.com/bo-dam-motorola/may-bo-dam-motorola-gp338/)
Với chất lượng âm thanh rõ nét, tín hiệu ổn định, sản phẩm bộ đàm Motorola GP338 sẽ góp phần gia tăng khả năng kết nối giữa nhiều người/nhóm người, từ đó giúp làm việc trở nên đơn giản và hiệu quả hơn.

Đối với những công việc cần phải kết nối liên tục giữa các bộ phận, việc lựa chọn một chiếc bộ đàm với chất lượng âm thanh tốt cùng khả năng truyền tải tín hiệu tối ưu luôn được xem là ưu tiên hàng đầu. Thấu hiểu vấn đề này, rất nhiều sản phẩm bộ đàm hiện đại, tiên tiến đã ra đời, trong đó phải kể đến bộ đàm Motorola GP338.

Những ưu điểm nổi bật của sản phẩm bộ đàm Motorola GP338
Ưu điểm đầu tiên và có lẽ cũng là nổi bật nhất của sản phẩm này chính là chất lượng âm thanh mà nó mang đến rất tốt. Do được trang bị công nghệ nén, giãn âm thanh hiện đại nên giọng nói được truyền qua bộ đàm nghe rất rõ và trong. Ngay cả trong điều kiện môi trường ồn ào, người dùng hoàn toàn có thể nghe được âm thanh với chất lượng tốt. 
 
Sản phẩm bộ đàm Motorola GP338 cho chất lượng âm thanh tốt, trong, rõ ràng
Ưu điểm thứ hai chính là thiết kế chắc chắn, chịu được lực tác động. Do đó, sản phẩm có thể sử dụng được trong thời gian rất dài mà không dễ bị hỏng hóc, ngay cả trong hoàn cảnh khắc nghiệt.
Một ưu điểm nữa phải kể đến chính là sự đa dạng về tần số liên lạc cũng như tính ổn định của tần số. Để đảm bảo cho quá trình kết nối được thông suốt, sản phẩm sử dụng tiêu chuẩn MIL-STD 810C-F của quân sự Mỹ cũng như các yêu cầu nghiêm ngặt từ hãng Motorola. Sản phẩm còn có thể kết nối với 128 tần số khác nhau, đem đến nhiều tiện ích cho người sử dụng. 
 
Bộ đàm Motorola GP338 có khả năng kết nối đa dạng lên đến 128 tần số khác nhau
Hướng dẫn sử dụng sản phẩm bộ đàm Motorola [bộ đàm motorola](https://hethongbodam.com/bo-dam-motorola/) GP338
Mặc dù sở hữu nhiều tính năng ưu việt những sản phẩm này lại được sử dụng khá đơn giản. Trước hết, bạn cần điều chỉnh nút nguồn trên đầu của bộ đàm. Nó cũng là nút điều chỉnh âm lượng trên các sản phẩm máy bộ đàm cầm tay. Nếu muốn liên lạc với các sản phẩm bộ đàm khác, bạn hãy để chúng ở cùng 1 kênh liên lạc bằng cách xoay nút chuyển kênh. Nhấn và giữ nút PTT trước và trong khi thực hiện cuộc gọi nếu muốn liên hệ với người khác. Còn nếu muốn nghe họ nói chuyện, hãy bỏ tay ra khỏi nút PTT.
 
Cách sử dụng bộ đàm Motorola GP338 khá đơn giản, dễ dàng
Với những thông tin được trình bày ở trên, có thể thấy rằng việc lựa chọn bộ đàm Motorola GP338 được xem như một quyết định đúng đắn của nhiều đơn vị, doanh nghiệp. Để được tư vấn kỹ lưỡng hơn, hãy liên hệ với bộ phận chăm sóc khách hàng của chúng tôi hoặc truy cập vào website: https://hethongbodam.com. Với chính sách chăm sóc khách hàng tận tâm cùng những sản phẩm chất lượng hàng đầu, chúng tôi hi vọng sẽ trở thành sự lựa chọn đáng tin cậy của mọi khách hàng khi có nhu cầu về bộ đàm.
You know something I am looking for
Published: 2020-09-22 02:44:18

Have you ever looked for something on Google but can't find what you expected? I experienced this situation many times. 

If I were stuck at a problem, I would search for the solution on Google. Sometimes I didn't find the solution for my problem. I wondered whether any solution existed or any person knew the solution. 

I believe that there is someone knows the solution but they doesn't share it. I were that person before. I knew something that was valuable to people but I were afraid to share it. I thought people may shared it before and my solution was redundant. 

But things have changed. Recently, I have begun creating [tutorials](https://www.youtube.com/channel/UCXykqt3V2-9bYXKWZRcH0rA) and sharing them with everyone. I realized that sharing is another way to learn. When I create a tutorial about a concept, I will learn the concept and understand it more. It also makes me more creative because there are many ways to create a tutorial. It may be [a blog post](https://phongduong.dev/blog), [a video](https://www.youtube.com/channel/UCXykqt3V2-9bYXKWZRcH0rA) or an image of my code using [Carbon](https://carbon.now.sh/).

Sharing tutorials is also a way to save my knowledge. Programming is large, there are many things to learn and I can't remember everything. So [my blog](https://phongduong.dev/blog) and [Youtube channel](https://www.youtube.com/channel/UCXykqt3V2-9bYXKWZRcH0rA) are the first sources I will use when I am stuck. 

I also want to share my thoughts and write down everything in my mind. I think if I read my [blog posts](https://phongduong.dev/blog) 10 years later, I will understand how I thought 10 years ago.

I believe that we have different experiences in our life. Even though we experience a same thing, we still have different perspectives on how it effects to our life. So why don't you share your perspective and knowledge with people? It will be valuable to someone. It may be you and me.
Change Nx Default Affected Branch to Main
Tags: nx, devops, monorepo, webdev
Published: 2020-09-22 02:32:25

---
published: true
title: "Change Nx Default Affected Branch to Main"
cover_image:
description:
tags: nx, devops, monorepo, webdev
series:
canonical_url:
---

The Nx [affected commands](https://nx.dev/react/guides/ci/monorepo-affected#rebuilding-and-retesting-what-is-affected) are a powerful way to scale monorepos by only rebuilding and retested the apps and libraries that could be affected by a particular change. This is accomplished by comparing hashes of the files modified in the current branch compared to the base branch which defaults to `master`. It's easy to pass in a different branch as a parameter with `--base`, however, you can also change this default in the workspace [`nx.json`](https://nx.dev/react/workspace/configuration#nx-json).

First, make sure that you have created the new base branch. In this example, we will be using `main` as our base branch.

Next, edit the workspace `nx.json`. If you do not have the `affected` property then you will need to add that first, and then you can customize the base branch.

```
{
  "npmScope": "nxtend",
  "affected": {
    "defaultBase": "main"
  },
  ...
}
```

Lastly, this feature is only available in Nx 9.5 or higher. If you are currently on a version of Nx lower than this then I recommend upgrading to the latest version of Nx, or at least the latest version of Nx 9.

**Upgrade to latest version:**

```
nx migrate latest
```

**Upgrade to Nx 9.7:**

```
nx migrate @nrwl/workspace@9.7.0
```
Get to Know Event Bubbling and Capturing in JavaScript
Tags: javascript, webdev, beginners
Published: 2020-09-22 02:14:18

For you who has learned about event,you may want to have deep understanding about it, have you learn about event bubbling and capturing? if not, this is the right article for you.

```html
<div id="parent">
  <button id="children">Click me</button>
</div>
```

## Event Bubbling
```js
let parent = document.querySelector('#parent'),
    children = document.querySelector('#children');

parent.addEventListener('click', function() { 
    alert('Parent clicked')
});

children.addEventListener('click', function() { 
    alert('Children clicked')
})
```
Consider to simple HTML markup and few lines of JS code above, once you click button with id `children` two alert will show up. First alert with text **Children clicked** followed by another alert with text **Parent clicked**.

_Wait a minute? Who are you?_ said a parent element.
_I'm your children._ said the children element.

**What does it mean?** The concept of bubbling **The way of events are up**.

## Event Capturing
```js
let parent = document.querySelector('#parent'),
    children = document.querySelector('#children');

parent.addEventListener('click', function() { 
    alert('Parent clicked')
}, { capture: true });
// you can also just put `true` as third argument.

children.addEventListener('click', function() { 
    alert('Children clicked')
})
```
Keep take attention on HTML markup and JavaScript code above, to make the behavior of event become capturing, you need to set option object `capture: true` on parent event or you can just put `true` as third argument.

When you click button with id `children` the first alert will appear is an alert that attached on parent element (event) which has text **Parent clicked** and after that alert with text **Children clicked** will appear.

So, do you get it? Yes, the way of events down.

## The Difference Event Bubbling and Capturing
After you test that code I've provide you may get the conclusion of differences of these kind of events, the way of events of both are different.

Event Bubbling is up, and Event capturing is down.
😈 Steal my startup idea
Tags: startup, javascript, showdev, motivation
Published: 2020-09-22 02:21:44

🍿 Find a problem - implement a solution

That's how you build a business 
and make money

Programmers have an edge with this

There are so many problems 
we can solve in this age of the internet

.
.
.


🛑 Problem - with old age comes loneliness, 
especially if you are single and old

🍕 Solution - build an online dating app 
specifically targeted for old people

They have time 
and money to use your app

You will make them happy 
and earn money while doing so


---

I love to pour all my thoughts on [Twitter](https://twitter.com/ng_real_ninja)
Github Actions vs Travis CI
Tags: discuss, help
Published: 2020-09-22 02:09:09

I was wondering if anyone would mind sharing their thoughts on Github Actions.

I've been using Travis CI for a while and it seems to work fairly well but every once in a while I really would love to use something that's more docker centric which I think Github actions is.

## Travis CI

free for open source projects, you can easily set secrets to allow for a variety of different patterns.  Downside is that it seems like what a bit of a blackbox on what version of X come with their images.  Especially once you start doing Matrix configuration (ie. I need to run a python test, golang, and ruby test for my code base)

## Github Action

Much younger than Travis CI.  It seems pretty green when I tried it out initially but I am curious of people's thoughts on it.  

I did notice that it was using a more docker based approach.  So maybe it's worth giving it another go.  

Thoughts? Comments? Any love or hate ? Open to other solutions, ideally free/OSS.
Deploy Vue.js Application using AWS Amplify
Tags: aws, serverless, vue
Published: 2020-09-22 02:04:58

You know what you want to learn and you will see what you want to see, no small talk.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ykvki0vcod1w47aukr2c.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fs6zluxp8ge30mi5wj9y.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qcpdt1mx7fsaojamzvg2.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/thmv8qgbuimbzn0f6xj3.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kea35tcwt5s3yxhsdt6s.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/75s1rh1rijmrb59o9tye.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/np4onnofuvgim7x5qpa0.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ivk9t3ekmu134mr9b5xa.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yub84dcac80cxsheq9mm.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3yhpch20abae8b9szd8f.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aa4625wxgok9yj1zc7kc.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vn652pfjmh5wyf3fpnz2.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rpp0awrdb5r9ruamfmxf.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ioeen54qe51zv27sed8r.png)
Refactoring ES6 Fetch with Async/Await
Tags: javascript, beginners
Published: 2020-09-22 01:03:17

### **ES6 Fetch**
Whether you've been using Javascript for a while, or a beginner just learning the basics of asynchronous functions in Javascript, you've most likely used the ES6 [Fetch API] (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to retrieve data from a URI. Here is an example of using `fetch()` to get user information from the [Github API] (https://docs.github.com/en/rest):
```javascript
const getUser = name => {
 fetch(`https://api.github.com/users/${name}`)
  .then(response => response.json())
  .then(data => console.log(data))
};

//get user data
getUser('yourUsernameHere');
```
The above code isn't bad. It is fairly readable and it does function correctly. However, notice the `.then()` function, which supports a callback function for resolving the fetch function. You can imagine that as you start chaining more `.then()`'s, the code will get increasingly harder to read. This can lead into what is often referred to as "callback hell", or nested callbacks, and can easily lead to bad performance or bugs.

### **Refactor with async/await**
ES8 brought about the `async` function and `await` keyword. Using `async` and `await` doesn't change how asynchronous functions operate. These features are just syntactical sugar that makes things more readable, and in turn makes handling the return of a Promise object more seamless. They also make asynchronous code look more like synchronous code. Below is the same `fetch()` call using `async` and `await`:
```javascript
const getUser = async (name) => {
  let response = await fetch(`https://api.github.com/users/${name}`);
  let data = await response.json();
  return data;
}

//get user data
getUser('yourUsernameHere')
  .then(console.log(data));
```
Overall, this syntax is much easier to read and there is no longer a need for large `.then()` blocks. Keep in mind though, that in order to call a function using the `await` keyword, it must be within the `async` function. There's a lot more that can be covered in this topic, but I thought this would be a simple explanation to implementing `async` and `await` in your Javascript code.