teleren/devto huggingface dataset:
What’s asked for more? FrontEnd, Backend, Database, Maintaining
Tags: react, python, javascript, database
Published: 2021-01-09 03:34:18

When you create a site....
What type of “admin” do you make? Do you rely on something like Django to Create a Admin for a client to update products or such as a blog? 
How do you implement a way to “update” so they don’t mess up the code? 
When you create a site, is there any times that a site is “as is” and they have to have someone else maintain it? 

I’ve gotten better about “CRUD” and also implementing MongoDB.
So, how is a site updated with products, when you don’t want the client having access to the code?
Fitting a linear regression model using numpy
Tags: beginners, python, numpy, pandas
Published: 2021-01-09 03:32:59

# Context
As python beginner, I try to learn from different sources, differents methods. I was reading a brazilian blog (estatsite.com.br) and I found an interesting topic about linear regression model, but it was in R.

So I took his example and applied to Python, but as soon I found problems using sklearn package, I found numpy method: `numpy.polyfit()`. The official [documentation](https://numpy.org/doc/stable/reference/generated/numpy.polyfit.html) is very clear and concise.

### What we want?

We want verify if students get better in grades when they earn more money, using linear regression model.

# Fast review in official documentation
According to it, `numpy.polyfit()` fits polynomial least squares. Consider a polynomial p:
![equation1](https://dev-to-uploads.s3.amazonaws.com/i/eyfdo7hmg1vzunvcq4dj.png) 

A p coefficient vectors which minimizes the squared errors of order ![equation1](https://dev-to-uploads.s3.amazonaws.com/i/u13hzswfzwdhy6t2bgn0.png)
are encountered.

The general sintax is:

`numpy.polyfit(x, y, deg, rcond=None, full=False, w=None, cov=False)`.

Parameters as `x, y, deg` must be completed. 

The general equation of squared errors minimized is:

![equation3](https://dev-to-uploads.s3.amazonaws.com/i/ybhuwe6skvk3hzl3ofqi.png)

The curious reader must read the official documentation.

# Code

**Hiphotesis:** earn money upgrade students performances. 

```python
# importing manipulation lib to visualize data
import pandas as pd

# importing numerycal processor lib
import numpy as np

# importing visualization lib
import matplotlib.pyplot as plt

# creating a dataframe
alunos = pd.DataFrame({
    'André': {'Mesada': 36.02, 'Nota_Testao': 48},
    'Joao': {'Mesada': 11.83, 'Nota_Testao': 25},
    'Bia': {'Mesada': 22.0, 'Nota_Testao': 43},
    'Ana': {'Mesada': 24.0, 'Nota_Testao': 39},
    'José': {'Mesada': 100.0, 'Nota_Testao': 60},
    'Vinicius': {'Mesada': 10.0, 'Nota_Testao': 40},
    'Tulio': {'Mesada': 20.0, 'Nota_Testao': 48},
    'Josué': {'Mesada': 25.0, 'Nota_Testao': 47},
    'Antonella': {'Mesada': 22.0, 'Nota_Testao': 43},
})

# visualization of dataframe
alunos = alunos.T
alunos

# converting a series object into numpy array
x = np.array(alunos['Nota_Testao'])
y = np.array(alunos['Mesada']
```
The column `Mesada` is our y, dependent variable. The column `Nota_Testao` (x) is our predictor. 

```python
print('Independent : ', x)
print('Dependent variable: ', y)

# ploting 
plt.plot(x, y, 'o')

m, b = np.polyfit(x, y, 1)
plt.xlabel("Mesada (R$)")
plt.ylabel("Nota")
plt.show();
```
---

Thank you for reading and I'm open mind to suggestions, sorry for eventual mistakes. My github link is: github.com/biangomes.
How to set the Google OAuth callback URL
Published: 2021-01-09 03:32:42

Google Developer Console Dashboard:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4fwd8ea6g9ushn6k6oj2.jpg)

Rails Server:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y29gsi7dapmrnrt0pbxt.jpg)
Membership Operators in python
Tags: python, programming, beginners, tutorial
Published: 2021-01-09 03:12:00

Membership operators are used to testing if a sequence with the specified value is present in the given object.

**[Fact: In python, all data types are implemented as an object.](https://dev.to/aswin2001barath/data-types-in-python-14ol)**

Let's go code through each of them.

## `in` operator
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0uo778b7jdco4vskj4xs.png)
Output:
```
True
```

## `not in` operator
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/60han0bb8cc0ruod3900.png)
Output:
```
True
```

### Best Resources

- [Python Blog Series](https://dev.to/aswin2001barath/series/10416) : A Blog series where I will be learning and sharing my knowledge on each of the above topics.

- [Learn Python for Free, Get Hired, and (maybe) Change the World!](https://academy.zerotomastery.io/a/aff_tz1t0tpx/external?affcode=441520_dcwk-s8s) : A detailed roadmap blog by Jayson Lennon (a Senior Software Engineer) with links to free resources.

- **Zero To Mastery Course** - [Complete Python Developer](https://academy.zerotomastery.io/a/aff_9khypm7v/external?affcode=441520_dcwk-s8s) : A comprehensive course by Andrei Neagoie (a Senior Developer) that covers all of the above topics.

**Who Am I?**

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through [Blogging](https://medium.com/techsoftware) during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

**Thank you** so much for reading my blog🙂.
[Styled Components, attrs] "@deprecated — Prefer using the new single function style, to be removed in v5"
Tags: styledcomponents, react, typescript, gatsby
Published: 2021-01-09 03:07:00

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing [Lilac](https://note.com/frontendlifeinde/m/m9b8feda1d547), an online school with hands-on Frontend e-books and tutoring👩‍💻

# What is this article about?

- styled components, attrs
- v5

Error log was from VS Code👇

```
@deprecated — Prefer using the new single function style, to be removed in v5
```

# Who is this article for?

Anyone sees this error🚨

![oops](https://media.giphy.com/media/hWAeTfmy74WqndwOOn/source.gif)

# When did this error appear?

This error appeared when I was working on styled components attrs(attributes).

Of course, I took a look at their documentation first👍

> Styled Components Docs: [https://styled-components.com/docs/api#attrs](https://styled-components.com/docs/api#attrs)

But it seems like VS Code detects spmething it's missing from the documentation🤔

# How to solve?

I figured out the source.

> Styled Components Spectrum: [https://spectrum.chat/styled-components/general/object-form-attrs-keys-are-now-deprecated~2bd034a0-8464-4695-9f7f-98bdf37f9ff6](https://spectrum.chat/styled-components/general/object-form-attrs-keys-are-now-deprecated~2bd034a0-8464-4695-9f7f-98bdf37f9ff6)

This source says, the syntax is wrong and must be updated.

### Before

```javascript
const Input = styled.input.attrs(props => ({
// 👇
  type: 'text',
  size: props.small ? 5 : undefined,
}))`
  border-radius: 3px;
  border: 1px solid palevioletred;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.padding};

  ::placeholder {
    color: palevioletred;
  }
`

render(
  <>
    <Input small placeholder="Small" />
    <Input placeholder="Normal" />
    <Input padding="2em" placeholder="Padded" />
  </>
)
```

### After

```javascript
const Input = styled.input.attrs(props => ({
  // 👇
  style: {
    type: 'text',
    size: props.small ? 5 : undefined,
  }
}))`
  border-radius: 3px;
  border: 1px solid palevioletred;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.padding};

  ::placeholder {
    color: palevioletred;
  }
`

render(
  <>
    <Input small placeholder="Small" />
    <Input placeholder="Normal" />
    <Input padding="2em" placeholder="Padded" />
  </>
)
```
Typewriter Effect
Tags: javascript
Published: 2021-01-09 03:00:50

I've got this idea for my portfolio site where my name gets typed out when the page loads.  It's going to get fancy, but to start out, I just want to just get the typing effect figured out.  Luckily, I found a library called [Typed.js](https://github.com/mattboldt/typed.js) which is really simple, and looks really great!

I was just messing around, so for now I'm just using vanilla JavaScript.  So I started by creating a simple html doc and including the CDN script:

```
<head>
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
  <title>Typing Effect</title>
</head>

<body>
  <h2>
    <span id="typed"><!-- content will be typed here --></span>
  </h2>
</body>
```

The simplest way to go is to create a script tag and add the strings you'd like to cycle through as an array.

```
<script>
  const typed = new Typed('.element', {
    strings: ['This effect is super cool!', "I'm going to use it.", 'All the time!'],
    typeSpeed: 40
  };
</script>
```

And boom, already up and running!

![Simple Typing Effect](https://media.giphy.com/media/PoMXgARJ3ZLYemVQVx/giphy.gif)

But I wanted to get a little bit more complex and customized.  I want my html to determine what should be typed, not my JavaScript.  At first I thought I would use an html data-attribute, but then I saw that I don't even have to do that, I can write it as regular html, including style tags, and then Typed.js can pick it up and use it directly by setting the `stringsElement` option.  I also plan on adding more advanced stuff, so I've broken it out onto it's own `script.js` file just to get it out of my html.

```
// html
<h2>
  <div id="typed-strings">
    <p>This effect is <mark><em>super</mark></em> cool!</p>
    <p>I'm going to use it.</p>
    <p>For pretty much everything</p>
  </div>
  <span id="typed"><!-- content will be typed here --></span>
</h2>

// JavaScript
const typed = new Typed('#typed', {
  stringsElement: '#typed-strings',
  typeSpeed: 40
});
```

Then, playing around with its other features, I landed on these options.  I slowed it down a little, added a delay before the text gets deleted, and changed the cursor to an underscore to simulate a terminal.  To make the terminal effect pop, I also customized the cursor element with CSS.  I also wanted it to repeat 3 times, so I added the `loop` and `loopCount` options as well.

```
// JS
const typed = new Typed('#typed', {
  stringsElement: '#typed-strings',
  typeSpeed: 40,
  backDelay: 1000,
  loop: true,
  loopCount: 3,
  cursorChar: '_'
});

// css
.typed-cursor {
  font-weight: 900;
  box-shadow: 0px 1px;
  font-size: 1.3em;
}
```

And there I have it, in just a few minutes of messing around I had a perfect typing effect.  

![Full Typing Effect](https://media.giphy.com/media/m3DHoz0TfbU3CeNzOl/giphy.gif)

Next step will be to get really customized, including placement and variable colors, but that's a project for next week.
Day 6 :100DaysOfCode

Tags: 100daysofcode, productivity, kotlin, flutter
Published: 2021-01-09 02:46:07

jUST FEW Leetcode problems today.

Completed daily scrum at intern(android dev).

Fixed some backend issues of my project(on flutter).
Read some concepts of OS.

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
HTTP(S) Forward Proxy (🤔 Types)
Published: 2021-01-09 02:42:05

I am Keeping this Post as Simple as Possible.

> Feel Free to Comment and Point Out Problems, Suggestions and Your Point of View.

So There are 3 Types we can Say
1) **HTTP Proxy**

(Does Not Support `CONNECT Method`, In Simple words it cannot connect to HTTPS Sites)

Example: 
* [Cherry Proxy] (https://pypi.org/project/CherryProxy/)
* [Cherry Proxy Official Site] (http://www.decalage.info/python/cherryproxy)



2) **Connect Proxy**

(Supports `CONNECT Method`, Meaning they can Let user to connect to HTTPS Sites BUT cannot see anything as the data is Encrypted).

Example:
* [Tiny Proxy] (https://github.com/tinyproxy/tinyproxy)
* [Tiny Proxy Official Site] (http://tinyproxy.github.io/)

>*Tiny Proxy Have a Lot More Capability Then Just a CONNECT Proxy, it can be used as a `FORWARD PROXY`, `REVERSE PROXY`, `TRANSPARENT PROXY`*

[Mozilla Docs for Proxy & Tunneling] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling)



3) **HTTPS Proxy**

[MitmProxy](https://mitmproxy.org/) is the Perfect Example Here.
[BurpSuite](https://portswigger.net/burp) The `All Time Favourite`.

* A Proxy that can Intercept & Inspect HTTPS Sites.
* It can See all the HTTPS Data as Plain HTTP Request, Response 
* It is Also Called as
1. SSL/TLS Termination Proxy
2. HTTPS Inspection Proxy (Not Exactly, But `HTTPS Inspection` is a Term)
3. SSL Proxy
and many more...
FastAPI Deploy On DigitalOcean's App Platform
Tags: dohackathon, fastapi, python, pytest
Published: 2021-01-09 02:17:22

## What I built

I built a simple FastAPI app that will respond with random Yo' Mama! jokes.

### Category Submission:

**Random Roulette**: Everybody's building a COVID19 app. COVID19 got
nothing on a good Yo' Mama joke! Also, I can't program for crap so there's that as well. One day I'll build a COVID19 FastAPI app. That day ain't today.


### App Link

[Yo' Mama!](https://fastapi-d-oapp-tjgd2.ondigitalocean.app/)


### Description

This is a simple FastAPI app that dishes out Yo Mama Jokes in the same vein as dishing out affirmations like [Tilde Thurium](https://twitter.com/annthurium)'s [affirmations](https://www.affirmations.dev/) API.

### Link to Source Code

[Source Code](https://github.com/mrcartoonster/fastapi_DOapp)

### Permissive License

[MIT](https://github.com/mrcartoonster/fastapi_DOapp/blob/DEV-4-blog-post/LICENSE)

## Background

Building this app to show how to deploy a FastAPI app
to DigitalOcean's App Platform. DigitalOcean has examples of the major Python web frameworks, but not FastAPI. This post will fix that since I believe that DigitalOcean's App Platform is ideal for deploying FastAPI fast.

### How I built it

Using [FastAPI](https://fastapi.tiangolo.com/) web framework

### Additional Resources/Info

* [FastAPI](https://fastapi.tiangolo.com/): The Official Documentation
* Calmcode.io [FastAPI course](https://calmcode.io/fastapi/hello-world.html):
  Fastest quickstart in the world for FastAPI. Yes, even faster than FastAPI's
official docs. Narrated, written, and coded by
[@fishnets88](https://twitter.com/fishnets88).
* TestDriven.io [FastAPI course](https://testdriven.io/courses/tdd-fastapi/?utm_source=mrcartoonster): If you're an actual professional Developer/Programmer, I'm not. This course supports financially FastAPI library and will show you how to use FastAPI for its ultimate purpose. Serving ML models. I just use it for Yo Mama jokes and Bob's Burgers hamburger recipes. There's got to be somebody out there who needs that for their ML stuff... Right???
Review, and write something better
Tags: opensource, javascript, github
Published: 2021-01-09 02:04:11

This post will be mainly talking about fixing [my old PR](https://github.com/infokiller/web-search-navigator/pull/221). In my previous blog posts, I mentioned that I plan to redo a previous PR that I submitted but didn't get merged.

I've started coding for about 2 years. In these 2 years, I focused more about giving the solution and make the program work. I seldom look back to my code and review it. However, to become a developer, having the ability to write clean, quality code is critical.

In my [last blog post](https://dev.to/yuanleemidori/fix-the-previous-mistake-49me), I mentioned that my [old commit](https://github.com/infokiller/web-search-navigator/pull/221/commits/6a33202c6425cd3b65af3c986e6992701b8b43fd) in this PR was duplicate and messy. The changes I make in the [new commit](https://github.com/yuanLeeMidori/web-search-navigator/commit/444e34c9420c6454f872d8412d55f2395b4ebe06) accomplish the same functionalities, but it improves the code to be more maintainable and understandable. For example, instead of using letters 'l', 'e', 'i', to represent the image sizes of 'large', 'medium', and 'icon', I use an array object to store the value of these 3 image sizes. It is more readable and better for trouble-shooting.
```javascript
// store the value into an array of objects
const sizeOptions = {
  LARGE: { value: 0, name: 'Large', code: 'l' },
  MEDIUM: { value: 1, name: 'Medium', code: 'e' },
  ICON: {value: 2, name: 'Icon', code: 'i' }
};
// call the object.code value to replace the old letter 'l'
switch (size) {
  // case 'l': // <-- the old one
  case sizeOptions.LARGE.code: // <-- the improved one
  // ...
}
```

After graduation, we'll be working on real projects instead of school work. For school work, we usually don't need to maintain the code after the submission. However, that's not how the system work. When we're doing a real project, we need to keep the application work until the client doesn't need it, which means we'll be facing different issues and be required to fix them often. That's why we need to keep our code easy to maintain. Moreover, we'll be working with other developers. We'll need to follow certain coding style and convention, and we certainly don't want to make other developers waste their time to understand our code logic or style.

---

Compare with the last time, the repo owner seems to be satisfied with my new changes instead of asking for many change requests. I believe my PR will be merged this time. In the future, I'll spend more time studying about writing quality code and reviewing my code.
Stackoverflow clone with MERN stack (MongoDB, Express, React, Node)
Tags: showdev, javascript, node, mongodb
Published: 2021-01-09 01:38:15

![Stackoverflow clone](https://dev-to-uploads.s3.amazonaws.com/i/6pzay6upl2h0qdm4l7mw.png)

Hello developers, I've recently built a [Stackoverflow clone](https://github.com/kimlimjustin/stackoverflow-clone) and I'm looking for any feedback. Any comments will be appreciated. Thanks.

Code: https://github.com/kimlimjustin/stackoverflow-clone
Please drop a star on Github if you like it.

Happy coding!
Use GitHub Issues for Personal Task Manager
Tags: github
Published: 2021-01-09 01:30:37

---
title: Use GitHub Issues for Personal Task Manager
published: true
description: "Recently, I use GitHub issues for personal task manager"
tags: github
//cover_image: https://direct_url_to_image.jpg
---

Recently, I have used GitHub issues for personal task manager.
Previously, I used [Producteev](https://www.jivesoftware.com/producteev/), [TickTick](https://ticktick.com/), [OmniFocus](https://www.omnigroup.com/omnifocus/) as task manager.
But, the existing task manager has two problems.

**Problems**

- Duplicated of GitHub Issues
  - GitHub Issues already has tasks as an issue
  - I do not want to create duplicated tasks on existing task manager
- Hard to extend task manager by programming

So, I've created [missue](https://github.com/azu/missue) template repository to resolve this problems.

## [missue](https://github.com/azu/missue)

It helps us to use GitHub as a personal task manager.

- [azu/missue: A Toolkit helps you to management your TODO based on GitHub Issues.](https://github.com/azu/missue)

[missue](https://github.com/azu/missue) is just a template repository, so you can just [Use this template](https://github.com/azu/missue/generate).

missue can sync `CR` issue's state.
"CR" is Cross-Reference Issues.
You can create Cross-Reference Issues with [userscript](https://github.com/azu/missue/tree/master/userscript) from other repositories.

Cross Reference Issues has a link that you want to track and has `CR` label.

- Example: https://github.com/azu/missue/issues/4

![missue](https://raw.githubusercontent.com/azu/missue/master/docs/missue-architecture.png)

missue is almost plain GitHub issues.
However, GitHub issues have enough features for me.

- Issues
- Label
- Milestone
- [Project boards](https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/about-project-boards)
- Automation(GitHub Actions)

Additionally, you can extend GitHub issues by GitHub Actions and Probot.

For example, if you want to get a reminder feature, and you can use [Probot: Reminders](https://github.com/probot/reminders).
Also, [GitHub Actions](https://docs.github.com/en/free-pro-team@latest/actions) help you to extend your workflow by programming.


After all, GitHub issues was necessary and sufficient for me.
Diário de bordo - #2
Tags: go, 100daysofcode, daily
Published: 2021-01-09 00:59:06

Esta é apenas uma documentação dos meus estudos diários, portanto se sinta a vontade para me apresentar coisas novas ou comentar algo que eu errei ou confundi, pois, isso irá me ajudar demais no meu crescimento pessoal.

Hoje meu dia não foi tão focado em aprender novas tecnologias como ontem então vai ser breve este diário, porém conheci algumas coisas bem interessante e alguns aprendizados sobre refactoring que obtive durante uma leitura com a galera do trampo no livro do refactoring guru. 

# [faicade/Pixel](https://github.com/faiface/pixel)
![LOGOTYPE-HORIZONTAL-BLUE](https://dev-to-uploads.s3.amazonaws.com/i/rmvr37kza221irjbhrlz.png)
Hoje durante meu [100DaysOfCode](https://www.100daysofcode.com)
eu testei esse pacote de criação de jogos bem maneirinho para golang, achei bem simples a forma que ele fez e a documentação bem clara e tals, encarei alguns problemas que acreditam que foi por falta de coisas em meu S.O, mas encontrei solução para isso [aqui](https://github.com/icexin/gocraft/issues/8)

# [Vim adventures](https://vim-adventures.com)
![vimAdventure](https://dev-to-uploads.s3.amazonaws.com/i/9ut4wr6qnp3qcz3u9dv9.png)
Uma das coisas mais maneiras que conheci ontem, mas verifiquei melhor hoje, foi este joguinho bem maneiro para ensinar vim e é algo que eu tenho muita vontade em me tornar mais acostumado a utilizar, pois passo bastante tempo no terminal e quando preciso utilizar coisas rápidas o vim já salvou bastante mas se eu utilizasse ele junto com plugins como o [NERDTree](https://github.com/preservim/nerdtree) ele iria salvar mais ainda.

# [Replace Temp with Query](https://refactoring.guru/replace-temp-with-query)
![solution](https://dev-to-uploads.s3.amazonaws.com/i/x9ges1x2ebbolcvgzfb2.png)
Eu estou lendo o livro interativo que o [refactoring guru](https://refactoring.guru) disponibiliza na compra do livro *refactoring write awesome code* e eu aprendi esta técnica para melhorar métodos longos e foi particularmente interessante como isso faz com que processamentos que acreditamos ser banais podem ser melhor reutilizados em outros lugares do código dessa forma.

Mais uma vez repito serem apenas anotações de coisas que vi durante meu dia e achei interessante, caso eu tenha algo a acrescentar irei colocar nos comentários, sinta-se a vontade para sugerir coisas novas ou para me explicar assuntos que achou que estou garotiando, se leu até aqui obrigado pela sua atenção.
![Alt](https://res.cloudinary.com/practicaldev/image/fetch/s--uLCaazgs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5991methcmv4ojwolws2.gif)
Error Fix: RVM is not a function, selecting rubies with 'rvm use ...' will not work.

Published: 2021-01-09 00:53:57

When running the command you will get:

// ♥ rvm use 2.7.0 --default

RVM is not a function, selecting rubies with 'rvm use ...' will not work.

You need to change your terminal emulator preferences to allow login shell.
Sometimes it is required to use /bin/bash --login as the command.
Please visit https://rvm.io/integration/gnome-terminal/ for an example.

To permanently fix the second error:

Add this into your VSCode settings.json file:

// Linux
"terminal.integrated.shellArgs.linux": ["-l"]

Source for the permanent fix: https://code.visualstudio.com/docs/editor/integrated-terminal