teleren/devto huggingface dataset:
The Future of Social Media
Tags: socialmedia
Published: 2020-06-28 19:27:29

I have been thinking on this topic for a long time and I believe the future of social media will not be centered around selling user data to advertisers, but selling “likes” as a currency.

The successor to Facebook will have to find a way to successfully convince people that tipping their favorite content creators is normal. Not an easy feat by any means, but the beginnings of this idea can be seen in YouTube monetization, Twitch bits and subscriptions, and Medium applause. Combining these elements is the key.

This new social network will allow all types of posts to be monetizeable, not just videos. Like Medium, likes will be basically limitless. A single user can like a post as many times as they want which roughly translates to more appreciation for the creator. Standard likes are free and common, but there are rarer tiers of likes that cost real money and have a higher appreciation value, which can factor in to trends and recommendation algorithms.

Take a look at this [Twitter Moment](https://twitter.com/i/moments/1056893922419580931) for more on this topic.
Why do you love working with your programming language?
Tags: discuss, career, programming
Published: 2020-06-28 19:20:02

---
title: Why do you love working with your programming language?
published: true
description: Why do you love working with your programming language?
tags: discuss, career, programming
//cover_image: https://direct_url_to_image.jpg
---

I've recently started learning Elixir, and I love the fact that they include the arity with the method name. For example, in Elixir you would say `first/1` where `first` is the method and 1 is the number of arguments. It's a small thing, but it's so useful when reading through documentation.

How about you? What sparks joy with the programming language you work with?
create expo library (npm)
Tags: expo, library, reactnative, package
Published: 2020-06-28 19:14:42

I have made CLI for create expo library.
https://www.npmjs.com/package/expo-library

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4e8k4ndnyrj0e38wboog.gif)

## Install globally

This package requires `node >= 10`.

install `expo-library` by

```bash
npm install -g expo-library
```

## Creating a New Library

```bash
expo-library
```

Answer some basic prompts about your module, and then the CLI will perform the following steps:

- copy over the template
- install dependencies via yarn or npm
- link packages together for local development
- initialize local git repo


## Development

Local development is broken into two parts (ideally using two tabs).

First, go to `root` dir of newly create library and edit component in index.js/ts file.

Second, go to `example/` dir and run metro bundle by

```bash
cd example
npm start # runs your expo app bundler
```

Now, anytime you make a change to your library in `index.js` or to the example app's `example/App.js` will fresh refresh component in example.

![](https://media.giphy.com/media/14udF3WUwwGMaA/giphy.gif)

#### Publishing to npm

```bash
npm publish
```

Make sure that any npm modules you want as peer dependencies are properly marked as `peerDependencies` in `package.json`.

## Contributing

See the [Contributing page](https://github.com/nomi9995/expo-library/blob/master/CONTRIBUTING.md).
Getting started with SQLite GUI tools
Tags: database, beginners
Published: 2020-06-28 19:12:11

SQLite is a very fast, simple relational database system developed in C language. If you are not familiar with SQLite database, please refer to my other blog on <a href="https://dev.to/dev0928/working-with-sqlite-in-python-1b9a">SQLite</a> that talks about how to get started with SQLite database in Python. Understanding any medium to large project’s data model is relatively complex especially when there is no GUI tool to get the entire picture of the  project’s data model. 

In this article, let’s see how to get started using two GUI tools to access SQLite databases.

<h3>DBeaver</h3>
DBeaver is a free multi-platform database tool. This tool has support for not only SQLite database but many other popular SQL databases such as Oracle, PostgreSQL, MYSQL, DB2. Tool’s Enterprise Edition has support for NoSQL databases as well. Here is a link to <a href="https://dbeaver.com/databases/">list of databases</a> supported by DBeaver. Tool has many powerful features such as an ER Diagram view that helps in understanding the relationship between tables in a graphical view.

<a href="https://dbeaver.io/download/">DBeaver Downloads</a>
<a href="https://github.com/dbeaver/dbeaver/wiki">DBeaver Documentation</a>

Here is the data view of SQLite books database’s book table taken from DBeaver:
![DBeaver Data View](https://dev-to-uploads.s3.amazonaws.com/i/0lxern5a5ahn6prn7tx2.png)

<h3>DB Browser for SQLite</h3>
DB Browser for SQLite is another GUI open-source alternative for working with SQLite databases. It is a cross-platform tool with support for Windows and Mac OS.

<a href="https://sqlitebrowser.org/blog/version-3-12-0-released/">DB Browser Downloads</a>
<a href="https://github.com/sqlitebrowser/sqlitebrowser/wiki">DB Browser Documentation</a>

Here is the Table view of the same SQLite books database taken from DB Browser:
![DB Browser Table View](https://dev-to-uploads.s3.amazonaws.com/i/amyxn3tjogo5mty5kzno.png)
Do you have a "uses" page?
Tags: discuss, productivity
Published: 2020-06-28 19:08:10

We all are particular about the software and hardware we use. Something common that came about out of all this is tech folks that blog, stream and/or give talks started getting a lot of questions like, what font do you use? What theme is that? What kind of monitor etc.

So tech folk that have web sites started creating a "uses" page. If you have a uses page, share it in the comments and consider adding it to @wesbos' awesome project [uses.tech](https://uses.tech).

If you don't have one, [here my uses page](https://iamdeveloper.com/uses) as an example of one.

Might as well share a workstation photo too while you're at it.

Go!
Usando Bitbucket Pipelines para gerar apk release de um projeto React Native
Tags: react, reactnative, devops, android
Published: 2020-06-28 19:01:45


**OBS**: Esse tutorial tem o intuito de ir direto ao ponto, se no decorrer do mesmo te faltar algo, sugiro ler sobre e depois voltar pro tutorial. 

Bem, sabemos que gerar um **apk** pode até ser uma tarefa "simples", mas quando essa tarefa é repetitiva e toma algum tempo seu, é uma boa hora de ver uma forma de automatizar a mesma. Hoje quero mostrar uma forma de automatizar essa tarefa, fazendo uso do Bitbucket Pipelines.


# O arquivo: bitbucket-pipelines.yml

Esse arquivo basicamente define a configuração de construção de pipelines.
Baixe o arquivo do link abaixo ou copie e cole o código do mesmo e salve na raiz do seu projeto. E suba as alterações pro seu repositório remoto. 

**OBS**: na última parte/linha do arquivo é feito o upload do apk para a área de downloads do seu repositório. Se o nome do seu apk não for o padrão: **app-release.apk**
sugiro que modifique o arquivo com o nome correto.

Link: [bitbucket-pipelines](https://gist.github.com/mensonones/60f0f1703023dc514b23d0481f24ee28)

## Configuração no Bitbucket

Agora é preciso ir ao seu projeto no bitbucket e ir em: **Repository settings** - **Pipelines e selecionar settings** e então **Enable Pipelines**. 

O arquivo **bitbucket-pipelines.yml** será reconhecido no repositório. 

Agora vamos gerar uma senha de aplicativo. 
Acesse o link: https://bitbucket.org/account/settings/app-passwords/
Clique em criar senha do aplicativo 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/snd328rj1fm1wgbc00wu.png)
**OBS**: Lembre dessa senha, pois iremos precisar dela na etapa seguinte.

Agora é preciso voltar ao repositório e navegar: **Repository settings** - **Pipelines e selecionar Repository variables**.

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

Os nomes das variáveis são acessadas ​​pelo arquivo de pipeline, a senha é a que você copiou na etapa anterior. 

Em relação ao repositório em si, é preciso criar uma branch chamada: **release** e adicionar sua **release-key.keystore**  ao **gitignore**.

Quando você você subir uma mudança para sua **branch main** e fizer o **sync** da **branch release** com a **main**, a **pipeline** será acionada ou se deixar pra subir as mudanças no **gitignore** e o arquivo novo no final, ao criar sua **branch release**, a **pipeline** já será acionada.  Se tudo correr bem, seu apk irá aparecer em **Downloads**.

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

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

Essa foi a dica de hoje :) em breve vou mostrar como fazer o mesmo através do **github** e **gitlab**. Dúvidas, críticas ou sugestões, basta comentar abaixo. Até a próxima!
Explain what a programmer does. Wrong answers only
Tags: watercooler, discuss, challenge, fun
Published: 2020-06-28 18:58:16

Let's have another fun challenge.

#### Explain what a programmer does, but only wrong answer accepted!

![Image](https://149361781.v2.pressablecdn.com/wp-content/uploads/2015/04/ComputerNerd_062513-617x416.jpg)

I will start:

##### Programmers will fix your printer!
MagicLeap開発備忘録
Tags: magicleap
Published: 2020-06-28 18:28:10

個人的な備忘録、場合によっては情報が古い可能性もあり

- [MagicLeapアプリのThe Labからのアンインストール方法](https://dev.to/matsumotokaka11/magicleap-the-lab-e16)
- [MagicLeapコントローラのイベント取得方法](https://dev.to/matsumotokaka11/magicleap-4h9l)
- [MagicLeapのハンドトラッキング実装](https://dev.to/matsumotokaka11/magicleap-17pa)
- [MagicLeapでTextMeshProのSpriteAssetが片目が描画されないときに確認したいこと](https://dev.to/matsumotokaka11/magicleap-textmeshpro-spriteasset-4f3i)
- [MagicLeapToolKitを利用したハンドトラッキングの実装](https://dev.to/matsumotokaka11/magicleaptoolkit-15pk)
- [MagicLeapToolKitを利用したハンドジェスチャの検出方法](https://dev.to/matsumotokaka11/magicleaptoolkit-1d9d)
- [MagicLeapのEyeトラッキングの使い方( 超簡単サンプル )](https://dev.to/matsumotokaka11/magicleap-eye-2o3n)
this keyword in JavaScript
Published: 2020-06-28 18:24:39

### Introduction

A function's **this** behave is a little bit different in JavaScript, unlike other languages.
it also work diffrently with the use of <code>strict</code> mode and <code>non-strict</code> mode.
![code](https://dev-to-uploads.s3.amazonaws.com/i/rzyk6v6dirtsvb842t8y.png)
In <code>non-strict</code> both functions calls' **this** point to <code>window/object</code> and return true.

##### **this** in function context.

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

##### **this** and object conversion

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

##### with <code>bind</code> method

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

##### this work differently in both Arrow and Normal function
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zbctkjy59yqbetd2cmh9.png)
How many level of memory do we need for fast processing?
Tags: computerarchitecture, memoryhierarchy, basics
Published: 2020-06-28 18:15:48

We have heard several times that different levels of memory exists in our computer system. The different memories have different roles to play, it's basically for faster execution of the instruction.
So, I want to understand how many levels of memory do we still need for the optimum performance of the processor, or is there any replacement for the existing computer architecture.

 __Please comment down your opinions.__
Day 3 of #30DaysOfCode | struct and pointer in Go
Tags: go, challenge, motivation, codenewbie
Published: 2020-06-28 17:54:26

Whenever you are working on a project of any significance, you are going to have to work with collections of Data. The different programming languages have different solutions to approach that problem. Javascript has Object, Python has Dictionaries to deal with collections of data and Go has Struct(struct) for this job.

Struct(struct) is short for structure and is a data structure in Go to store collections of properties that are related.

Today, on the third day of #30DaysOfCode challenge I learnt about structs. One thing that you should learn from this post is that Go is a value type. So whenever you are passing a struct on a function, Go is making a copy of that struct and not actually passing the reference of the value in the memory. If you are coming from a Reference Type language like Javascript then you really need to be careful about this while writing Go code.

Sometimes, when you are changing the value of the struct with receiver function it will not work as you are expecting it to because again Go is Value Type language. But there is a workaround this problem. You can use Pointers.

Pointers can solve this problem but it is confusing and we will talk about that in the next post.
So, please follow to receive my next post firsthand.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Dependency Injection in JAVASCRIPT (Awilix decorator)
Tags: javascript, dependecyinjection, typescript
Published: 2020-06-28 17:44:00

[SOLID](https://en.wikipedia.org/wiki/SOLID) is one of the important factors to have a clean and maintainable code. 
one of the most popular with an easy learning curve for DI in javascript world is [awilix](https://www.npmjs.com/package/awilix).
there are also other popular alternatives such as [inverify](http://inversify.io/), but if you go to their documentation it is really huge. 

in overall, I don't want to compare them in this article , just I try to share my simple code which could be helpful for you if you decide to work with `awilix`.

```typescript
const getKeyName = (x: string | Function) => typeof x === 'string' ? x : (<Function>x).name
type dependencyType = 'request' | 'response' | 'nextFunction' | 'logger'
export function InjectDependency(
    ...dependencies: Array<
        dependencyType
        | Function
        | Record<string, dependencyType | Function>
    >
) {
    return <T extends { new(...args: any[]): {} }>(constructor: T) => {
        return ({
            [`__${constructor.name}__injected`]: class extends constructor {
                constructor(...args: any[]) {
                    if (args.length) {
                        const proxy = args[0]
                        super(proxy)
                        for (let d of dependencies) {
                            switch (typeof d) {
                                case 'object':
                                    Object.keys(d).forEach(key => {
                                        this[key] = proxy[getKeyName(d[key])]
                                    })
                                    break
                                default:
                                    const key = getKeyName(d)
                                    this[key] = proxy[key]
                                    break
                            }
                        }
                    }
                }
            }
        })[`__${constructor.name}__injected`]
    }
}
```


This code is a simple decorator on express js, you can  easily  get your dependencies inside an object without writing extra code. 

I will try to explain it in next posts.
Nuxt instead of Wordpress?
Tags: nuxt, gridsome, help, vue
Published: 2020-06-28 17:22:38

---
title: Nuxt instead of Wordpress?
published: true
description: Nuxt or Gridsome
tags: nuxt, gridsome, help, vue
//cover_image: https://direct_url_to_image.jpg
---

I had an idea for a site I was originally going to build with Wordpress but decided to go down the JAMstack route however I'm undecided on what to use. 

I've seen that has released the @nuxt/content module for transforming markdown files which ideally I'd like to use to create most of the content (then setup netlifycms), however I'm wondering if maybe I could use this or whether I may be better off using Gridsome instead although I'd raelly like to build something with Nuxt. 

Any thoughts on which would perhaps be the best solution?
Show 404 Route Page In React Router outside Router Component Heirarchy
Tags: react, router, historystate
Published: 2020-06-28 17:10:32

I am very excited and nervous at the same time as it is my first blog post. Recently I was working on a project in which the heirarchy of the components was like below diagram

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

Let me explain you the problem, I need to show the PageNotFound page without header and footer section and in layout I had defined the header and footer section with main as defined in the above diagram. If I had defined the PageNotFound in the AppRoutes components which had all the routes in my application, then I have to display the header and footer section in PageNotFound page. 

There was not enough content on the internet for above issue, But luckily I have found some stuff regarding the state management in the react-router via browser [history](https://developer.mozilla.org/en-US/docs/Web/API/History_API) api. So the solution was two use react-router's [Redirect](https://reacttraining.com/react-router/web/api/Redirect) component.

```js
<Switch>
    <Route exact path='/'>
        <HomePage />
    </Route>
    <Route path='*'>
        <Redirect to={{ ...location, state: { from: '404' } }} />
    </Route>
</Switch>
```

and in the Layout component I checked if the router state was   `{ from: '404' }` and if that was the case then I showed only the PageNotFound page otherwise the Header, Footer and main section.   

```js
const Layout = ({ children }) => {
   const { state } = useLocation();
   
   {state?.from == '404' ? (
            <PageNotFoundPage />
         ) : (
            <Fragment>
               <Header />
               <Flex
                  as='main'
               >
                  {children}
               </Flex>
               <Footer />
            </Fragment>
       )}
    );
};
```

Please let me know in the comments, if I am not making sense or anything wrong about the article.
Five ways to host your static website for free
Tags: webdev, beginners, productivity
Published: 2020-06-28 16:58:14

---
* Github pages 

Github Pages are a feature of GitHub that allows users to host static websites for individuals, projects, or organizations right from their repositories!
The engine GitHub uses to accomplish this is Jekyll, a “simple, static, blog-aware, site generator”, that supports regular HTML content.
For your GitHub Page you just need to create a repository named username.github.io, where username is your username (or organization name)
you edit or push your code and your changes are alive.

* Netlify

Netlify Deploy modern static websites. You simply sign up in the Netlify application using your GitHub account for example. you add your new site, you link netlify to your Github repository after that you build and you configure your site. Netlify allows you to name and to customize the domain of your site.

* Google Could 

For those who want to try the cloud computing services, Google gives you the opportunity to host a static website for a domain you own!
you start by creating a bucket on Google Cloud Console, then you upload your site's files and you allow the public access in order to make your bucket readable to everyone.
you also need to set up your SSL certificate and the load balancer so you can be able to connect your domain.
Find more information about hosting static website in Google cloud in link two.

* AWS S3

To host a static website on Amazon S3, you configure an Amazon S3 bucket for website hosting and then upload your website content to the bucket. When you configure a bucket as a static website, you must enable website hosting, set permissions, and create and add an index document. Depending on your website requirements, you can also configure redirects, web traffic logging, and a custom error document.

* Vercel 

Vercel is a cloud platform for static sites and Serverless Functions that enables you to deploy an existing project from your GitHub, GitLab, or Bitbucket repository.
Alternatively, if you want to start fresh with a new project, use a Quickstart template offered by Vercel.

*A static website “contains web pages with fixed content. Each page displays the same information to every visitor” (from techterms)

Resource: 
1-https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/
2-https://cloud.google.com/storage/docs/hosting-static-website
3-https://docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html
Photo: 
Dribbble Deploy Serverby Alex S. Mostov
Is there a tutorial to build a support live chat for a website using socket.io?
Tags: help, javascript, webdev, node
Published: 2020-06-28 16:51:57

I would like to add a support live chat web app to my website using socket.io, mainly focused on new users who have specific questions or feedback about my product. All visitors of the website can chat with the support staff, currently me, but the visitors can not see each other's messages or communicate with each other. I looked around on the internet for a tutorial that goes through this but all were for communication amongst all the users like in a group chat like https://www.youtube.com/watch?v=rxzOqP9YwmM . However, I need to build one in which they can all individually only message me and can not read each other's messages or message each other, and I can reply to each message individually. Could you please link a tutorial that walks me through this or the code for such an app so that I can examine and understand the code?