teleren/devto huggingface dataset:
Os primeiros passos com Rust
Tags: rust, programming, codepen
Published: 2021-01-05 11:41:13

<i> Rust é uma linguagem de programação multiparadigma compilada desenvolvida pela Mozilla Research.Foi projetada para ser “segura, concorrente e prática”, suportando os estilos puramente funcional, procedural, e orientado a objetos, e possui suporte nativo ao WebAssembly. </i>

O Rust nasceu em um projeto pessoal do Graydon Hoare que está no time da mozilla, o seu compilador foi escrito em <a href="https://pt.wikipedia.org/wiki/OCaml"> OCaml </a> e foi lançada em 2010.

O Rust apareceu na minha lista por acaso. Estava em busca de outras horizontes.

Então vi um artigo muito massa do <a href="https://medium.com/@0x7cfe"> @Dmitriy </a> Kashitsyn que o titulo é Why Rust?

O que achei mais legal do rust é que existe segurança nos dados sem precisar do coletor de lixo, concorrência sem disputa de dados e abstração sem overhead.

Isso é lindo ❤

Vamos parar de conversar miolo de pote e vamos para o que interessa!

A instalação é bem simples você pode seguir o passo a passo no próprio <a href="https://www.rust-lang.org/learn/get-started"> site </a> que não tem erro.

A linguagem possui o seu gerenciador de pacote que se chama <a href="https://crates.io/"> Cargo </a>, esse tipo de abordagem já virou comum em algumas linguagem. Por exemplo no nodeJS temos o yarn ou npm e no java temos maven e por ai vai.

O Cargo é um gerenciador de pacote da linguagem chamada <a href="https://www.rustaceans.org/"> Rustaceans </a> que cuida da construção do seu programa e assim baixando dependências ou até gerando um código inicial. O tipo do arquivo é .toml é bem similar com o arquivo de inicialização tipo ini.

Vamos fazer aquele velho olá mundo. : )

```bash
 $ cargo new olamundo - bin
```
Se você listar o que está dentro da pasta você encontrará a pasta src e o arquivo Cargo.toml.

O arquivo de Cargo.toml tem a seguinte estrutura:

```bash
[package]
name = "olamundo"
version = "0.1.0"
authors = ["Higor Diego <higordiegoti@gmail.com>"]
edition = "2020"
[dependencies]
```

Dentro do src temos um arquivo chamado main.rs que contém a seguinte estrutura.

```bash
fn main() {
  println!("Hello, world!");
}
```

Você pode usar rustc src/main.rs ou usar o gerenciador cargo com o comando cargo run para iniciar a aplicação.

O primeiro comando que usamos é rustc, ele é um compilador da linguagem de programação Rust, fornecida pelo próprio projeto que compila o seu código fonte para produzir em um binário e assim criando um executável.

Vamos executar o arquivo criado.

```bash
 ./main
```

A saída esperada é Hello, world!

No caso do segundo comando que é com o gerenciador de pacote Cargo, a saída será a mesma mas teremos um processo diferente pois vem a build do arquivo e por fim a saída do texto no terminal.

É isso, por fim, fizemos o nosso primeiro código Rust, vamos seguir em frente e entender mais sobre essa linguagem, seus conceitos e paradigmas.
Placeholder title
Published: 2021-01-05 11:29:50

## What I built

### Category Submission: 


### App Link


### Screenshots


### Description
 

### Link to Source Code

### Permissive License


## Background
(What made you decide to build this particular app? What inspired you?)

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)


### Additional Resources/Info
CurateBot Devlog 3: Second steps - adding Firebase and Twitter OAuth
Tags: devjournal, javascript, vue, serverless
Published: 2021-01-05 11:14:37

Since CurateBot will be deeply integrated with Twitter, it makes sense to use Twitter's OAuth login. It means we don't have to force users to make an account and have an extra username/password to deal with, it also means users can share permission to tweet as their account with us simply by logging in! It's the height of convenience. The code for this post matches the state of the repository [at this commit](https://github.com/meseta/curatebot/tree/35f5f4597914f3aa3a6da28c50934b37e1e7f35c)

Fortunately, Firebase has built-in support for this, and we can do it in a few clicks. But first, we have to register for [a developer account on Twitter](https://developer.twitter.com/)

# Setting up OAuth
After setting up a developer account on Twitter, we go through the process of creating a new project, and once done, some API keys pop up for us to copy down. Once we do that, in the app settings page, there's an OAuth setting that can be enabled:

![Twitter Developers](https://dev-to-uploads.s3.amazonaws.com/i/o9hc0i6b3gsqkmqba4sl.png)

Simultaneously, over on Firebase, I enable Twitter logins.

![Firebase OAuth](https://dev-to-uploads.s3.amazonaws.com/i/0nbhge41dxxnclot2hnn.png)

Between this Firebase screen and the Twitter Oauth setup, I exchange API keys from Twitter to Firebase; and the callback URL from Firebase to Twitter. Once done, that was all that's needed to setup OAuth between my project and Twitter!

# Adding login code
Over in our project, I'm using vuex for shared state management, and I like to keep user data/login features in vuex since they don't really correspond to a specific view/component. There's some boilerplate code needed, but the core Vuex module (`store/auth/index.ts` file) The `login` action looks like this (see code [here](https://github.com/meseta/curatebot/blob/a66c2695b733cdcb7794b52e1143293623762e28/web/src/store/auth/index.ts) ):

```ts
const actions: ActionTree<AuthState, RootState>= {
  login({commit}) {
    const provider = new firebase.auth.TwitterAuthProvider();
    firebaseAuth.signInWithPopup(provider)
    .then((result: firebase.auth.UserCredential) => {
      commit('setUser', result.user)
    })
  },
}
```

That's all that's needed for a basic login! This function is provided by the `firebase` module, and directly pops up a window that directs to twitter's login page. Currently we're just storing the returned user in the vuex state, but we also need to create a profile store in Firestore, which I'll show in the next post

This kind of convenience is typical of using Firebase. Though it may seem daunting as using require a little bit of understanding of how these flows work and how Firebase expects you to use it (something perhaps not all tutorials and guides do well at explaining), once you crack that, it lets you significantly speed up web development.
Vue.js 3 Tutorial with Example:  Components, Props & Composition API
Tags: vue, vue3, vue2, javascript
Published: 2021-01-05 11:07:37

Vue.js 3 is the latest version of Vue which was re-written from scratch with TypeScript by the Vue team.

# Vue 3 New Features
According to Evan You, Vue 3 will be faster, smaller, more maintainable, and easier to target native development.

In more details, these are some of the new features of Vue 3:

* Class-based components and ES2015 classes,
* Fragments, which allow you to have components with multiple root nodes,
* TelePort, which allows you to render content outside of Vue’s mount element,
* The Composition API, which is similar to React Hooks, a new syntax that allows you to use functions for organizing your code by feature not operation,
* TypeScript support, Vue 3 is built-in TypeScript and allows you to optionally use TS for development,
* Modularity,
* Virtual DOM rewrite for faster performance,
* Slots Generation optimization (separate rendering for parent & child components),
* Static props hoisting,
* Hooks API (experimental),
* Time Slicing Support (experimental),
* provide / inject, etc.
{% youtube FXsWed7Nc2o %}



# Vue 3 installation and setup

Rather than installing Vue 3 directly, let's clone the project vue-next-webpack-preview which will give us a minimal Webpack setup including Vue 3.
```
$ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
$ cd vue3-experiment
$ npm i
```

Once that's cloned and the NPM modules are installed, all we need to do is remove the boilerplate files and create a fresh `main.js` file so we can create our Vue 3 app from scratch.

```
$ rm -rf src/*
$ touch src/main.js
```

Now we'll run the dev server:

```
$ npm run dev
```

# Vue 3 Composition API
One of the greatest features in Vue 3's release is Vue's new Composition API. The objective of the Composition API, which is inspired by React Hooks, is to simplify your components, improving the readability and organization of your code, and make it simpler to reuse code all through your application. 
{% youtube 0pwL89YdqRE %}

# Ref and Reactive

Ref is used to declare reactive variables from primitive types such as:

String
Number
BigInt
Boolean
Symbol
Null
Undefined

{% youtube JJM7yCHLMu4 %}

# watchEffect and watch 
In Vue3, in addition to the watch method, there’s a new `watchEffect` method to track a reactive dependency and run a method when it runs. 

{% youtube mM-P7S2sXQ4 %}

# Multiple v-model for custom components 
The v-model directive is one of the few directives that come with Vue.js. This directive allows for two-way data binding. 
{% youtube 5TFelzoDMBQ %}

# Vue 3 Teleport 
Teleporting is a new feature in Vue.js 3.0, inspired by React Portals. The Teleport component permits us to specify template HTML that we can send to another part of the DOM.
{% youtube cwaShbUMV9w %}

# Vue 3 Suspense and Lazy Load Components
Lazy loading components are a simple method to improve the user experience of the application particularly if your code pack is large or if users are on slow internet connections. 
{% youtube TMlQzHrxeNI %}
React Native, Nativescript or Native App. Which's the best for code maintenance?
Tags: reactnative, nativescript, ios, android
Published: 2021-01-05 10:57:28

Hi! We are a small company using Nativescript (on Angular) for our mobile app, and after 4 years, we faced some problems that need some expert advices.

Many times we were unable to build or run the app on NS, **without changing anything on the code**. We were confronted to :
 * code breaks/bug at JS compilation
 * code breaks/bug at Native API compilation/running
 * code breaks/bug related to NativeScript plugins

Most of the time, the problem was quickly solved by doing a NS update, but many times, the NS update and code adaptations (relative to NS breaking changes) was not enough to re-run the app, and then the problems becomes harder and longer to resolve, depending on NS plugins you have.

At this point, **we still didn't change anything on the code**, excepted the code adaptation relative to NS update, and the only thing we want is to run our existing NS App, which was worked fews weeks ago.

#### Concerning that point, we have few questions about it :
 * Is there a way to avoid this behaviour on a Nativescript App ?
 * Do React Native Framework have similar problems than Nativescript concerning the maintainability?
 * Is the Native App developpment avoid this kind of behaviour ?
Learn Cyber Security
Tags: security, linux, codenewbie, tutorial
Published: 2021-01-05 10:34:46

Wep App
  https://owasp.org//
  https://owasp-academy.teachable.com/courses
  https://portswigger.net/web-security
  https://www.hacker101.com/
  https://youtu.be/24fHLWXGS-M
CTF's (capture the flag, basically games to learn)
  https://overthewire.org/wargames/
  https://tryhackme.com
  https://www.vulnhub.com
  https://picoctf.org/
  https://www.hackthebox.eu
Operating System
  https://www.kali.org/
  https://www.parrotsec.org/
  https://blackarch.org/
YouTube channels (too many to list)
Hak5
https://www.youtube.com/user/Hak5Darren
The Cyber Mentor
https://www.youtube.com/channel/UC0ArlFuFYMpEewyRBzdLHiw
Live Overflow
https://www.youtube.com/channel/UClcE-kVhqyiHCcjYwcpfj9w
DEFCONConference 
https://www.youtube.com/channel/UC6Om9kAkl32dWlDSNlDS9Iw
Marcus Carey
https://www.youtube.com/channel/UCzWt6E0J-_kjHcMATu9UAmw
 The Pwn School Project
https://www.youtube.com/channel/UCCPAxE2M4JuMjiG74IinZqA
 FireTalks Online
https://www.youtube.com/channel/UCKyEP9FaYqUJgTUg_2CJ_1Q
etc etc etc

for discord I recommend DeadPixelSec
https://discord.gg/deadpixelsec

for a podcast darknet diaries
https://darknetdiaries.com/

Best of luck, and remember
https://youtu.be/u3CKgkyc7Qo?t=20
CodeIgniter Tutorial
Published: 2021-01-05 10:27:11

CodeIgniter was created by EllisLab on February 28, 2006. Codeigniter is a powerful framework that follows the MVC pattern. MVC is a Model View Controller-a toolkit for building websites. Model is responsible for managing the data, View is responsible for displaying the data, and the Controller is responsible for controlling the model and viewing the part to work together. Codeigniter is open-source software that makes it easier for a coder to maintain a page more efficiently and quickly develop a web framework, and its speed and other functionality is better than the other PHP framework, and CI Documentation is the main advantage of the other framework.
A web developer can build a full-featured web application with the help of the CodeIgniter. The aim of the Codeigniter Tutorial is to introduce a framework for CodeIgniter and basic configuration and setup. http://www.phptpoint.com/codeigniter-tutorial/
How to set background image in React
Tags: react, css
Published: 2021-01-05 10:25:41

Having trouble setting a background image in your react project? I was looking at many posts on websites and I was finally able to solve this problem. 

```
import candles from './Picture/candles.jpg';

<Box
    class="candles"
    style={{
    backgroundImage: `url(${candles})`,
}}>

```

I was trying this way for a while and it looked nothing wrong with it. 

```
import candles from './Picture/candles.jpg';

<Box
    class="candles"
    style={{
    backgroundImage: `url(${candles})`,
    backgroundSize: "cover",
    height: "100vh",
    color: "#f5f5f5"
}}>
```

This worked and I found out that the image I was using was bigger than div default so it needed to be specified its height. So if you are struggling to set your background image in react, you can try this!


Hope this is helpful for you :)
n8n on DigitalOcean App Platform
Tags: dohackathon, n8n, automation
Published: 2021-01-05 10:20:29

This is the second article of the series Trying DigitalOcean App Platform which is part of [DigitalOcean App Platform Hackathon](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k)

Today, I'm trying to deploy [n8n.io](https://n8n.io/) to DigitalOcean App Platform. 

{% github ThewBear/do-n8n %}

However after it is successfully deployed, the web ui could not connect to backend. It is showing "Connection lost" on the upper right corner.
![Connection lost](https://dev-to-uploads.s3.amazonaws.com/i/0v093mi6ziu19evjd9c7.png)

I open Devtool and don't see any console error. Then I look at network tab and see that the request to `/rest/push` is **pending**. This is the only one request that n8n is trying to reach the backend. The request is not a plain http request instead it is using an [EventSource API](https://developer.mozilla.org/en-US/docs/Web/API/EventSource).

It seems that DigitalOcean App Platform does not support the [EventSource API](https://developer.mozilla.org/en-US/docs/Web/API/EventSource). I found an issue about how to configure [a reverse proxy like Nginx](https://github.com/n8n-io/n8n/issues/36). However, the Platform-as-a-Service like DigitalOcean App Platform and [Cloud Run](https://community.n8n.io/t/cloud-run-deployment/155/4) seems to not support it.

Unfortunately, we cannot deploy n8n workflow automation tool on DigitalOcean App Platform. DigitalOcean App Platform works great to provide simplicity for developer using a framework supported.
How can you gain traffic in Dev.to?
Tags: webdev, devops, codenewbie, react
Published: 2021-01-05 10:08:05

OK to be clear, I'm still a newbie on this platform. But the first post I posted on Dev.to last week gained 2,000+ views, and more than 70 reactions in total. It was a very big surprise to me which the numbers are so much higher than I expected. Here's the post last week:https://dev.to/imunprecedented/best-of-2021-an-ui-visual-programming-tool-you-should-look-forward-to-enj

I was very intrigued by these numbers, and have been trying to understand the actions behind the posts, I guess the good content affect the most, obviously, the title itself also plays a very important role. As from the previous post of mine, I used [Best of 2021] in the topic, that's what I guess it attracts such major traffic to me. 

Since I'm planning to share more knowledge and informative contents in the future, I'd like to know if there is any tips from you guys, that can boost the views and traffic to a post? Thanks in advance! ;)

I guess I'm not the only one who are in need with the answer of this question, so I hope this post can be a preference for those who need it.

And from the previous post, I shared about the tool that I developed with my team, it's a tool that helps building a Responsive Webpage 10x Faster, feel free to check that out if you're interested in Front End Development!


________________________________________

Go check out pxCode by the link below
Website: https://www.pxcode.io/
Facebook: https://www.facebook.com/pxCode
Youtube: https://www.youtube.com/channel/UCi-NJnon0ROgyX2xdO9y-QA]
Portfolio Website using just HTML, CSS, and Javascript.
Tags: dohackathon
Published: 2021-01-05 10:06:43

## What I built
A static portfolio website using Html/CSS and javascript. More work to be done on the backend. 
### Category Submission: 
Personal Site/Portfolio

### App Link
https://theodulaja-com-uh3bv.ondigitalocean.app/

### Screenshots


### Description
A statice portfolio website using Html/CSS and javascript. More work to be done on the backend. You can dynamically change the theme of the website using the theme options. 

### Link to Source Code
https://github.com/thevideopilot/theodulaja.com

### Permissive License
MIT

## Background
(What made you decide to build this particular app? What inspired you?)
Starting out in the software engineering industry and I felt the need to be able to put more skills out there and to also practice what I've learned.

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
I used HTML and CSS basically. In the CSS I practice grid-column and flex boxes to get a practical grasp. I also worked with javascript to dynamically change the theme of the website. Learned about deployment reading the "how to deploy an app" guide. What stood out to me is the importance of the location where you set up the computer and the idea of a CDN.

### Additional Resources/Info![tempsnip2](https://dev-to-uploads.s3.amazonaws.com/i/jjjsmus75rvew5drjtxs.png)
Boekhouden online
Published: 2021-01-05 09:51:52

Wil jij online boekhouden maar weet je niet welk boekhoudprogramma je moet gebruiken? Meeroverboekhouden.nl biedt uitkomst. Deze website vergelijkt alle boekhoudprogramma's met elkaar en geeft je een goed inzicht in de voor- en nadelen van een <a href=“https://meeroverboekhouden.nl/online-boekhoudprogramma/”>boekhoudprogramma</a>
How to manage in React the statuses response from a Google API
Tags: react
Published: 2021-01-05 09:27:29

Hello,

I'm writing this post as I would like to learn and understand the best way to manage Google API status responses.

Link to statuses:
https://developers.google.com/places/web-service/autocomplete#place_autocomplete_status_codes

I would like to understand what should I do to cover the statuses in the right way and how to inform a client about it.

For example:
Probably with a status `ZERO_RESULTS` I can show a message to the client about the result was not a success. 

But what about those statuses which are more for the dev team or management to know like this:
`OVER_QUERY_LIMIT`  

Would be good to throw an error? and to client show, a message like `The service is temporarily not available`? 

I would like to see some example of a good way of managing those statuses in React so I can learn a good practice :)

Thank you for your help :)
Flixplore - Explore Movies - DOHackathon Submission
Tags: dohackathon, react, node
Published: 2021-01-05 09:25:00

---
title: Flixplore - Explore Movies - DOHackathon Submission
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
series: Flixplore
tags: dohackathon, react, nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1cuzuo4q0jzgb382xzyf.PNG
---

## What I built
I built an app to help you choose a movie to watch when it's difficult for you to find one. 

### Category Submission: **Random Roulette**

### App Link
https://flixplore-react-vfzxa.ondigitalocean.app/


### Screenshots
#### Step - 1
![Step - 1](https://dev-to-uploads.s3.amazonaws.com/i/iqptvud2gzc702ssg9ry.PNG)

#### Step - 2
![Step - 2](https://dev-to-uploads.s3.amazonaws.com/i/pemv8p1x7wmr4k4rhzpy.PNG)

#### Step - 3
![Step - 3](https://dev-to-uploads.s3.amazonaws.com/i/ln177duymg4i8tj79yd8.PNG)

### Description
We all would have been in a state where our mind craves a certain genre of film to watch but we couldn't find one.
A tool to help you pick a movie at such times would be convenient and that's what Flixplore does.
You just open the app and select a Genre, Language, Year of release and submit to get a random list of movies that satisfies your selected criteria. All these options are optional and not selecting generates a completely wacky list. Guess I took the category name **Random Roulette** too seriously. 

Click on a movie from the list to get the details about the movie, including streaming providers [(by TMDB)](https://www.themoviedb.org/).
 

### Link to Source Code
[flixplore-react](https://github.com/prasanna-rkumar/flixplore-react)
[flixplore-api](https://github.com/prasanna-rkumar/flixplore-api)

### Permissive License
[MIT License](https://github.com/prasanna-rkumar/flixplore-react/blob/master/LICENSE)

## Background
A couple of months back, a friend of mine asked me to suggest to him a good Hollywood thriller flix. I shared a few that I've watched. Guess what? He's seen them too. So I went on googling for thriller movies and realized how hard it is to find one that myself or my friend is yet to watch. That inspired me to build Flixplore. 

### How I built it 
As the app has both front-end and back-end, I deployed them in DigitalOcean App Platform as **two components** of *same App* and assigned the root route to front-end and /api to the back-end. On other platforms, I had to enable **CORS** in the back-end. But with DigitalOcean App platform it is not necessary.

Also Deployment was as easy as pushing the code to the designated branch. 

Only issue was the react router didn't work as expected. [App reloading leads to 404 error](https://www.digitalocean.com/community/questions/react-router-with-the-app-platform). So I had to replace the URL params with location state in react-router.


### Additional Resources/Info
#### Technologies used
 - [ReactJS](https://reactjs.org/)
 - [ExpressJS](https://expressjs.com/)
 - [MaterialUI](https://material-ui.com/)
 - [TMDB API](https://developers.themoviedb.org/3/getting-started/introduction)
Basic auth deprecation on github and its impact
Tags: github, git, tutorial, devops
Published: 2021-01-05 09:12:11

Basic auth deprecation on github and its impact.

Till now Github was supporting basic Authentication for making an API call for git.
But starting nov-20 git stopped supporting basic Authentication as mechanism for authentication.

As per git alternative is to use personal token for authentication for GIT API calls.

Though personal token is there from long time but there is no clear cut details about
what exactly works that is how i scrambled over net to figure out what works.

Below set of details with curl, that works and does not work.

curl -H "Authorization: Bearer <YOUR Personal Token>" -H "Accept: application/vnd.github.v3+json" https://api.github.com/repos/developer-help/Test-Token/contents/pipeline.json

Does not work
curl -H "Authorization: Token <YOUR Personal Token>" -H "Accept: application/vnd.github.v3+json" https://api.github.com/repos/developer-help/Test-Token/contents/pipeline.json

Does not work
curl -H "Authorization: Basic <USER_NAME_PWD_ENCODED>" -H "Accept: application/vnd.github.v3+json" https://api.github.com/repos/developer-help/Test-Token/contents/pipeline.json