teleren/devto huggingface dataset:
How to Be a Better Software Developer
Tags: webdev, softwaredev, codenewbie, career
Published: 2020-07-19 13:50:05

If you look at the world of business or tech at the core what every company solves is a problem. The need that the end users sometimes didn't even know they had. 

That's why this principle is extremely effective in your search to have relevant skills and stay ahead. Your learning efforts are much more powerful when they have a clear purpose. If you're at a point in your career where you've already mastered the language... let say Javascript, then you should focus on optimizing it. If you're just starting out, no problem, there are tons of projects you can use as practice. 

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

Karan Goel, an engineer at Google, compiled a mega list of projects that you can solve in any programming language to get started. You can find it on GitHub. 

You have everything from numbers, classic algorithms, graphs, data structure, networking, classes, threading, files, databases, graphics, and security. And I'm sure you can find something similar for any industry you're in. So if you don't know where to start, try something like that. 

Another option is to build your own project that will make life easier when you do another task. Build tools that will help you later. 

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

In my opinion, the reason why most people quit learning or stay as a newbie after two years of learning how to code... is not solving the right problems that will improve their learning.

Long story short, remember that the fastest way to learn and grow is to have a clear goal on what problem you want to solve.
Importance of Documenting
Tags: beginners, 100daysofcode, javascript
Published: 2020-07-19 13:18:57

We want to show you very good practice and that is to document our code, reduce those moments when we don't know what a part of our code does or how it works because we have a long time without reviewing it.

🔥 The idea of ​​the documentation is to leave comments in our code to recognize what it does, what it needs to run and what the result is. In this way, if we have to make a refactor (review and modify it) we can do it very easily.

There is JsDoc which is a JavaScript code documentation API that makes documentation very easy for us and generates a standard that is easy to follow but it doesn't matter if we use JsDOC to document or any other strategy, the important thing is to put it into practice.

In the example you can see that there are several ways to document, the first is a simple comment that explains what the function we created works for, the second gives us a little more context by adding extra information about what the function does, in this case, is a constructor and the third one we have the parameters and the type of variable that the function needs.

So I ask you, have you ever documented? Let me know in the comments. 
.
Básico de NoSQL Injection
Tags: mongodb, hacking, nosql, express
Published: 2020-07-19 13:12:08

Pra início de conversa, se você tá lendo isso provavelmente já sabe o que é SQLInjection, então não será nem um pouco difícil de entender NoSQLInjection. É básicamente injeção de comandos NoSQL pra dar bypass em alguma chamada ao banco de dados e pegar dados sensíveis etc.

Eu mesmo preparei um ambiente vulnerável, aqui está o código dele

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

Beleza, já temos a aplicação vulnerável, vou iniciar ela e ele vai mostrar no terminal alguns avisos como `Server started` e `DATABASE CONNECTED BRO, IHULL!`.

Se dermos uma rápida olhada no código veremos que se trata de uma aplicação express integrada com banco de dados MongoDB, um banco NoSQL. Vemos também que há duas rotas, uma chamada `/listUsers` e outra `/createUser`, ambas com método post.

Vamos então criar um usuário, nada muito incomum.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sck79jmqszlv6u02jnr8.png)

Usuário criado, se a gente for na rota de listagem de usuários veremos nosso usuário anteriormente criado lá.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u9dsxyhfspbdkk7yq2r1.png)

Okay, vemos que está funcionando perfeitamente.

Pra testar a injeção de NoSQL eu criei outro usuário com nome Pedro e senha 321 pela rota de criação de usuários e logo após fui verificar se ele estava mesmo lá.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g1gtavy0g3wrbe79uvq6.png)

Ok, os 2 usuários que criamos aparentemente estão lá.

Então, como a gente usaria o NoSQLInjection a nosso favor para por exemplo pegar todos os usuários do banco de dados? Bem simples, podemos usar o seguinte payload `{ "$gte": "" }`.

Dessa forma o banco de dados vai simplesmente achar que estamos buscando todos os usuário dessa collection.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tx21qwasafq07rosom4w.png)

É basicamente isso, esse é um post muito básico e introdutório. Tem muitos e muitos payloads para explorar NoSQL Injection, um lugar que eu recomendaria para procurar esses payloads é aqui: https://github.com/swisskyrepo/PayloadsAllTheThings/tree/master/NoSQL%20Injection

Artigos que podem ajudar:
https://owasp.org/www-pdf-archive/GOD16-NOSQL.pdf
https://medium.com/rangeforce/nosql-injection-6514a8db29e3
Vue 3's Local <-> Global States
Tags: vue
Published: 2020-07-19 12:37:16

With the advent of Vue 3's composition API, one may write local states and its tightly coupled actions like given below:

```js
// maths.js
import { ref } from 'vue';

export function useMaths() {
  const val = ref(0);

  const increment = () => (val.value += 1);
  const decrement = () => (val.value -= 1);

  return {
    val,
    increment,
    decrement,
  };
}
```

<small style="color: gray;">This should look eerily similar to what React offers (if you have used React hooks).</small>

The above code creates a reactive value called `val` and provides two actions to either `increment` or `decrement` this value.

This hook or a composable function can be imported into a component and used directly like so:

```html
<template>
  {{ val }}
  <button @click="increment">Increment</button>
  <button @click="decrement">Decrement</button>
</template>

<script>
  import { useMaths } from './maths';

  export default {
    setup: () => {
      const { val, increment, decrement } = useMaths();
      return {
        val,
        increment,
        decrement,
      };
    },
  };
</script>
```

The component binds the value and actions to the Vue template. This `useMaths` hook can be imported into any number of components and the behaviour can be reused while keeping the states local to the component in which it was used.

> Vue 3 not only allows us to compose the components and the UI but their behaviour as well.

### But what do you do when you realise that the state should have been global instead?

There are times when you could be thinking that a particular state should be local to a component or a page. But as the app progresses on, this assumption may not hold true anymore.

Or there might be instances where you just wanted to experiment with the component and flesh out the internal workings while keeping the implementation simple by using local states. But once the experimentation phase is over you just want to reuse the code as much as possible and adapt it to use a global state.

In these above scenarios, Vue 3 gives us a new trick that we can do with `ref` that makes this sort of **migration** negligibly cheap to implement.

See what we do to make the state global in the code below?

```js
// maths.js
import { ref } from 'vue';

const val = ref(0);

export function useMaths() {
  const increment = () => (val.value += 1);
  const decrement = () => (val.value -= 1);

  return {
    val,
    increment,
    decrement,
  };
}
```

Just move the `ref` out of the context of the hook and make it global. Vue will take care of the rest. Each component that uses this hook will all share the same `val`. Now, isn't that something?

PS: This can be done with `reactive` as well.
How to fix Page Not Found on netlify
Tags: webdev, react, github, netlify
Published: 2020-07-19 12:28:16

Since you are reading this, you surely might have came across the same error as shown in the cover image.

I'm not sure if other static site servers/platforms are all like that, but if you deploy SPA to Netlify you can only navigate from index.html to other pages using Links.Once you refresh or type a URL directly in the address bar you'll get 404.

###**Why does this error occur?**
If your SPA is build with React then React Router handles routing on the client side (browser) when you visit internal page (e.g. http://localhost:3000/about) but once you host your SPA on Netlify (server-side) the routing logic has to be modified because Netlify does not know how to handle the route.

###**How to fix the issue?**
As per the [doc](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file), you need to create a file named **_redirects** in the root folder.You can go to the link mentioned above to know more about it.I'll directly show how to fix it:

* Create a file named **_redirects** without any extension inside public folder.
* Copy paste the below content in the file
 ```
/*    /index.html   200
```
* Push your code and redeploy

>Cheers 🥂 you fixed the broken link!
Free Domain For Sale Bootstrap Template
Tags: bootstrap
Published: 2020-07-19 12:25:54

Sitting on a few domains you'd like to sell but don't want all the hassle of creating your own landing page for them/setting up all the mailing scripts?

We've designed and developed a **free domain for sale bootstrap website template** which uses formspree.io to handle all of the contact form submissions so it's really simple to get started and as plug and play as you can possibly get. 

You can even use it on static website hosting services such as GitHub Pages or AWS! 

So what does it look like? It looks like this:

![domain for sale bootstrap theme](https://i.imgur.com/TXc22sQ.png)

(our logo was removed for the purpose of this screenshot)

Our team has successfully used this website template to sell a couple of different domains in our portfolio and is quite the domain salesman.

Give it a try for yourself and let us know how well it works for you! This template has been released under the [CC-BY-3 license](https://creativecommons.org/licenses/by/3.0/).

[Download from our website](https://merrythemes.com/free-bootstrap-templates/domain-for-sale/download.zip)

We plan to release more free html website templates in the future with some exclusively for the dev.to community.
Faster: key combos for any editor (almost)
Published: 2020-07-19 12:24:24

# Intro

A blog on some key combinations that helped me to write/edit faster.
Those combos are working in (almost) any editor.

## Key combos

```CTRL + left/right arrow```
  
useful when you want to move the cursor between words.

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

```CTRL + SHIFT + left/right arrow```
  
useful when you want to to select consecutive words.

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

```SHIFT + HOME```
  
useful when you want to select something from where the cursor is till the beginning of the line.

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

```SHIFT + END```
  
useful when you want to select something from where the cursor is till the end of the line.

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

```SHIFT + up/down arrow```
  
useful when you want to select multiple lines.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2xy7a1m34pz3ot48c3bo.gif)
```CTRL + HOME```
  
useful when you want to go the start of the file.

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

```CTRL + END```
  
useful when you want to go the end of the file.

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

All the selection combos are useful when are combined with the usual suspects (copy, paste and cut):

```CTRL + C```
```CTRL + V```
```CTRL + X```

Cheers!
ScaleChamp Redis Maxmemory-policy
Tags: scalechamp, redis, keydb, keydbpro
Published: 2020-07-19 12:13:26

Happy to announce that ScaleChamp Redis/KeyDB/KeyDB PRO now support maxmemory-policy modification via Control Panel

More at https://www.scalechamp.com/changelog/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e04rxv4cu6f3mwj6dvr6.png)
Daily Developer Jokes - Sunday, Jul 19, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-19 12:00:21

---
title: "Daily Developer Jokes - Sunday, Jul 19, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jul%2019%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596ec99e0.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What sits on a pirate's shoulder and calls, "Pieces of seven, Pieces of seven"?

___A:___ Parroty error.
 -->
opengpg proof
Published: 2020-07-19 11:44:36

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/1CF6A3F772E82844A5CCDAD16AAA918BA6DF03CA) to [this dev.to account](https://dev.to/thinkverse). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:1CF6A3F772E82844A5CCDAD16AAA918BA6DF03CA]
VS Code Shortcuts to code Smarter and Faster
Tags: beginners, vscode, shortcut, programming
Published: 2020-07-19 11:35:32

1. Code Formatting:  
 -> Windows: Shift + Alt + F
 -> Mac:     Shift + Option + F
 -> Ubuntu:  Ctrl + Shift + I

2. Select in Words:
 -> Windows: Ctrl + Shift + Right arrow / Left arrow
 -> Mac:     Command + Shift + Right arrow / Left arrow
 -> Ubuntu:  Ctrl + Shift + Right arrow / Left arrow

3. Add Cursor Above/Below:
 -> Windows: Ctrl + Alt + Up arrow / Down arrow
 -> Mac:     Command + Alt + Up arrow / Down arrow
 -> Ubuntu:  Ctrl + Alt + Up arrow / Down arrow

4. Code Folding:
 -> Windows: Ctrl + Shift + [
 -> Mac:     Command+ Option + [
 -> Ubuntu:  Ctrl + Shift + [

5. Copy Line Up/Down:
 -> Windows: Shift + Alt + Up/Down
 -> Mac:     Shift + Option + Up/Down
 -> Ubuntu:  Ctrl + Shift + Alt + Up/Down

6. Navigate to a Specific Line:
 -> Windows: Ctrl + g
 -> Mac:     Ctrl + g or Ctrl + p
 -> Ubuntu:  Ctrl + g

7. Rename Symbol:
 -> Windows: F2
 -> Mac:     F2
 -> Ubuntu:  F2
How to Setup Logging Server with Rsyslog in Debian 10
Tags: debian, rsyslog, log, linux
Published: 2020-07-19 11:35:28


It is an important need to collect and analyze logs formed in various clients and servers in a common place. For this need, rsyslog is a very efficient tool.

I wanted to create this article because the rsyslog syntax has changed in the Debian 10 (Buster) version compared to the old debian versions (in example Debian 9).

## How to Install Rsyslog Server

The package can be installed as below for rsyslog:

```bash
sudo apt install rsyslog
```

## How to Configure Rsyslog Server

In the **/etc/rsyslog.conf** file, the following lines starting with the "#" sign are removed:

```
module(load="imudp")
input(type="imudp" port="514")

module(load="imtcp")
input(type="imtcp" port="514")
```

The following line can be added just below which allows you to get logs. The example shows that all devices in the 127.0.0.1 and 10.0.0.0 network can collect logs:

```
$AllowedSender TCP, 127.0.0.1, 10.0.0.0/24
```

In addition, various templates can be logged or taken as in the example below:

```
$template Incoming-logs,"/var/log/%HOSTNAME%/%PROGRAMNAME%.log"
*.*  ?Incoming-logs
```

Logs would start to be saved under a single file under /var/log if we did not make the corresponding template settings.

After making the related settings, the service is restarted by saving and checking whether there are any errors in the service:

```bash
sudo systemctl start rsyslog
sudo systemctl enable rsyslog
sudo systemctl status rsyslog
```

If there is no problem, syslog format logs directed from the rsyslog client from any source can be collected on the server we set up.

I will specify the relevant client settings in the next post.

---

Qui nescit dissimulare, nescit regnare
Dart Programming Part #1
Tags: dart, programming, learning, coding
Published: 2020-07-19 11:31:28

**This is an intro to the [Dart](https://dart.dev/) programming language.**

**What is Dart?**

[Dart](https://dart.dev/) is created by [Google](https://google.com) mainly to allow developers to build web interfaces and mobile apps with [Flutter](https://flutter.dev/). 

You can say that Google is trying to challenge JavaScript with [Dart](https://dart.dev/) as its primary web programming language.

[Dart](https://dart.dev/) is one of the easiest programming languages to start with. Let's dig in and find out how the dart program works.

**Installing Dart**
[Dart](https://dart.dev/) can be installed on Windows, Linux, and Mac by following the [instructions](https://dart.dev/get-dart).

>You can use the [VS Code, IntelliJ Idea, or any other latest IDEs](https://dart.dev/tools) to work with dart files. Dart extensions/plugins are available for the above-mentioned IDEs.


**Programming with Dart**
Let’s take a simple hello world program

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

Here on the line #1 main() is an entry point of any dart program. Void implies that the function block will not return any value. More importantly, the main() executes automatically.

On line #2 is a print() which is a built-in function of dart which prints any line of text to the console. The semicolon is the most important part of any code instruction inside a code block with opening and closing braces. If you do not give semicolon you will encounter errors.

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

This little program does not do much but it can be a good starting point if you are learning new programming as I am learning right now.

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

**Motivation**
One of my main motivations to learn dart is to build my first [Flutter](https://flutter.dev) app which can be mobile, web, or desktop.

Hope you like this article and got some learning with the dart.

Happy learning, stay healthy, and stay safe !!
Recreate the Translate App [ Part 2 ]
Tags: swift, ios
Published: 2020-07-19 11:20:37


[Part 1] (https://dev.to/vijaywargiya/recreate-the-ios14-translate-app-part-1-e4l)

Welcome Back. In this post we will talk about the listening animation.

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

If we take a closer look, this animation consists of several blocks with changing heights arranged horizontally. The main thing to focus here is that the min and max height of each of the block is different. Let’s start coding.

## Bar

Let’s start with a single bar. Each bar will have two heights. One will be set as the initial height and the other post animation. In the init method of the bar, we select two random integers between 1 & 50. One of these numbers will be set as the initial height and the other will be set post animation. The bar for which max height is selected initially will shrink in the first round of animation whereas the other set of bars will expand. This will give a nice mix and match affect.

We define a @State variable height. The bar’s height will be dependent on this variable. In the init method, we initialise the state variable with a random integer. We have another variable which stores another randomly selected integer and will be allocated to the state variable post animation. To make sure that we enough difference between the two heights and that the animation is visible, we check if the two heights have a difference of 10 or not. If they don’t then we increase the heightPostAnimation by 10.

In the below code section, we also see how this bar can be called from parent.

![Bar](https://cdn.substack.com/image/fetch/c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F8f8eba23-4dc8-47c1-a7f8-5e6ab683f9ad_1446x1116.png)

## Row of Bars

Once we have the bar ready, all we need to do is create a HStack of multiple Bar views. To do this, we will use a ForEach loop with a range. Make sure that the range is enough to cover the device.

We also wrap the HStack in a VStack with a bottom padding to position the row correctly on the screen.

![Row of Bars](https://cdn.substack.com/image/fetch/c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F506047bf-a3e0-45a7-bece-6732c4a29b3e_1226x460.png)

![Static](https://cdn.substack.com/image/fetch/c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Ff4a19816-f885-4b4f-8b12-c1206390500f_552x330.png)

There we go! Hope you found this post helpful. In the next post we will cover the editor & the bottom sheet animation.

You can browse the code here - https://github.com/vijaywargiya/Translate-SwiftUI
Jedi PyPi error
Tags: jupyter, pip, python, environment
Published: 2020-07-19 10:41:35

ERROR: Could not install packages due to an EnvironmentError: [Errno 2] No such file or directory: 'Python38\\site-packages\\jedi\\third_party\\django-stubs\\django-stubs\\contrib\\contenttypes\\management\\commands\\remove_stale_contenttypes.pyi'

Any help on this?
Autofill OTP code in iOS
Tags: ios, javascript, react, html
Published: 2020-07-19 10:22:31

HTML elements have many attributes that we don’t use them and maybe we don’t know all of them at all :). One of the useful attributes in form inputs is `auto-complete="one-time-code”`.

In most websites, Users can log in using the OTP code. When you receive the OTP code, it’s so boring to leave the browser and go to the messages and see the OTP code.

Now, I want to tell you a way to show the OTP code in the iOS keyboard like the following.

## How to implement this feature?

First of all, you should set `auto-complete=”one-time-code”` on your input like the following:

```html
<input type="tel" name="otp-code" auto-complete="one-time-code" />
```

Now, it’s time to update your SMS message. You should have `"code”` word in your SMS message.

For example: `Code: 123456 is your verification code`