teleren/devto huggingface dataset:
Don't Be A Douche, Vol. 1
Tags: meetings, management, business, zoom
Published: 2020-07-25 06:27:53

---
title: Don't Be A Douche, Vol. 1
published: true
description: 
tags: ["meetings", "management", "business", "zoom"]
//cover_image: https://direct_url_to_image.jpg
---

I've been intending to detail my approach to business for a while. Google (still?) has "Don't be evil" (I think?). My approach is, while very outspoken, hopefully in keeping with my own philosophy:

Don't be a douche. I mean, sometimes I may be a douche, but hopefully only to douches.

In keeping with that, here's a response to a prevalent thought that had gone through my mind a ton since the lockdowns:

> Video meetings are the new norm...

They shouldn't be right now. Seriously. Think about your neighbors. Think about their kids ready to revolt if they can't watch their streams (I get it, luxury item, but is it really right now?). 

Think about the documents and code commits and all the other things which actually need to be uploaded. Your face isn't one of them.

Think about your team. There's a reason "Zoom fatigue" keeps coming up in the news. It's exhausting to feel like you're in a fishbowl all day, every day, for everyone to see.

You don't need to stare at the same faces on the screen every day. Turn off your camera. Encourage your team to do the same.

Your phone plan likely has unlimited voice. Call in. Encourage your team to do the same.

And then there's the daily standup. It's 2020. Set up a DailyBot or similar, and share those details via email/Slack/etc., with actionable dashboards from the results.

This isn't hard. 

This includes interviews. Pick up the damned phone instead of sending a meeting link.
15+ Best Programming Tips Useful for Career
Tags: tips, productivity, beginners
Published: 2020-07-25 06:12:50

1. DO NOT CODE WITHOUT UNDERSTANDING THE WHAT AND WHY OF IT
2. LEARN TO PRIORITIZE
3. DO NOT OVERUSE THE STATIC KEYWORD
4. ALWAYS GO TILL THE LAST ANSWER IN STACK-OVERFLOW
5. NEVER HESITATE TO ASK FOR THE SOLUTION TO SENIORS
6. TRY “:GITHUB” IN GOOGLE SEARCH (to find a solution of a problem)
7. DON’T GO BEHIND COOL LANGUAGES GO BEHIND ALGORITHMS AND DESIGNS
8. TRY TO AUTOMATE NON-PRODUCTIVE TASK IT SAVES A LOT OF YOUR TIME
9. NEVER WRITE MORE THAN 15 LINES OF CODE & NEVER TAKE MORE THAN 4 PARAMETERS IN A METHOD
10. DO NOT ASSUME ANYTHING IN CODING
11. CODE WILL NEVER LIE, IT IS ALWAYS YOUR MISTAKE
12. DO NOT TAKE PRIDE IN PROGRAMMING IN ANY LANGUAGE. EXPLORE AND BE OPEN-MINDED
13. BEST SOLUTION IS A KING
14. MAKE YOUR CODE AS GENERIC AS POSSIBLE
15. GIVE MEANINGFUL NAMES TO VARIABLES AND FUNCTIONS
16. KEEP UPDATING
17. SIT IN A GOOD POSITION ON CHAIR (LAST BUT NOT LEAST)

##Also Read: [How to Improve Programming Skills](https://www.codesnail.com/how-to-improve-programming-skills/)
The time for VUI is here
Tags: lambda, alexa, googlehome, rasa
Published: 2020-07-25 06:09:46

> Adversity brings along opportunity for the one's who keep their eyes open.


With processes becoming contact less each day, having the ever changing touch screen while does serve the purpose, but also makes the user skeptic.  
  


> To touch or not to touch, that is the question.
>  -User

  
  
These times that we're in provide an excellent opportunity for voice enabled apps and systems. The adoption of voice though has picked up steadily, it's still not a mainstream medium of interaction. The credit of which goes not to the NLU side of the app (trust me it's *so much* more accurate) but to the content half.  
  

Creating user journeys that provide an intuitive way to input data, has more to do with an engaging and cleverly written script. Yes the visual aesthetics still play their part to a certain extent but for devices like the echo (which happen to be the leader in the race) its only words you have to offer.  
  

Making users feel confident that the app will do what's asked of it is also a major driving force in VUI acceptance. Once hooked they'll not want to go back typing out their responses!  
  

*Have you got your hands dirty with intents slots and actions yet?*
2FA and recovery codes
Tags: discuss, security
Published: 2020-07-25 06:07:26

It's about my GitLab.

Authenticator app is still here, but for some reasons I cannot login, and I didn't keep recovery codes.

Indeed, in the past, I did change Authenticator app. Maybe GitLab is confused?

So, I should let my account die, and GitLab complaining to itself of the inactiveness of the account?
React JS Blog
Tags: react
Published: 2020-07-25 05:58:55

Hello Everyone 

I have covered some topic on React please take a look 

<a href="http://askavy.com/react-hooks/">React Hooks</a> , <a href="http://askavy.com/react-redux/">React redux</a> , <a href="http://askavy.com/react-bootstrap/">React Bootstrap</a> and <a href="https://askavy.com/react-card">React Card</a>
Pure React SEO
Published: 2020-07-25 05:27:11

Hello, I am using react js for my social website. I want to share my URL's over social media. For that I need meta info and dynamic OG tags. My meta info coming from API side and I am set using react-helmet. It shows me under head tag on DOM, but after I checked link using Facebook debugger, it does not shows me any OG tags present. Can anyone please share me what is issue? Thank You
How to add port on unpublished running docker container
Published: 2020-07-25 05:16:17

---
title: How to add port on unpublished running docker container
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
While executing a docker command, forgot give `-p` as parameter, then container become inaccessible to others with locathost ip-address.

To access the docker which is running is without publishing port using the tool [socat](https://medium.com/@copyconstruct/socat-29453e9fc8a6).

For example, you have nginx docker and executed below command to running nginx without publishing the port.

```
docker run --name nginx -d nginx
```

When you execute below command, you will not be able to access.

```
$ curl localhost:80
curl: (7) Failed connect to localhost:80; Connection refused
$ curl localhost:8080
curl: (7) Failed connect to localhost:8080; Connection refused
```

To make the port accessible, you don't need stop and remove 
 the container, instead without stopping the container, using socat docker port can be made accessible make sure running socat docker in same network where nginx is running.  

Execute below docker command to get ip address of the nginx container.

```
$ docker inspect nginx -f "{{json .NetworkSettings.Networks }}" | jq
{
  "bridge": {
    "IPAMConfig": null,
    "Links": null,
    "Aliases": null,
    "NetworkID": "b813449892718ab3fb3559d1009df9ac8ce53a445ab1de3158396362371e99f6",
    "EndpointID": "bbc0b7510a66c9a84e49d6987daf8cdc7634af2f8615d4cb4c68f579fabb6a44",
    "Gateway": "172.17.0.1",
    "IPAddress": "172.17.0.2",
    "IPPrefixLen": 16,
    "IPv6Gateway": "",
    "GlobalIPv6Address": "",
    "GlobalIPv6PrefixLen": 0,
    "MacAddress": "02:42:ac:11:00:02",
    "DriverOpts": null
  }
}
```
Copy the Ip Address of the nginx paste next to TCP-CONNECT in below docker command.  

```
docker run -d --name socat -p 8080:1234 alpine/socat TCP-LISTEN:1234,fork TCP-CONNECT:172.17.0.2:80
```

Now nginx container output will be re-direct from socat through 1234 -> 8080.

If you execute curl command, now nginx container will become accessible.  

```
$ curl localhost:8080
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>
```
For demo, created a video through asciinema, please check below.  

[![asciicast](https://asciinema.org/a/349556.svg)](https://asciinema.org/a/349556)
Everything To Consider Before Upgrading To Magento 2
Tags: magento2migrationservices, magento2upgradeservices, magento1tomagento2migration
Published: 2020-07-25 05:00:47

In reaction, an improved platform was developed by the Magento team, Magento 2. Early on, the group had enough time to deal with accessibility problems and create a highly scalable and customizing open-source framework for some of the biggest eCommerce companies. To stay in the competition, and E-commerce companies need to migrate Magento 1 to Magento 2 today.

Read Here:- https://www.geeksscan.com/everything-to-consider-before-upgrading-to-magento-2/
GPT-3: Programming in English
Tags: machinelearning, webdev, ai
Published: 2020-07-25 04:48:59

---
title: GPT-3: Programming in English
published: true
description: COBOL 2020
tags: machinelearning,webdev,ai
//cover_image:
---

{% twitter 1284421499915403264 %}

I know GPT-3 and similarly fascinating tech have a long way to go, but I want you to envision a future where we use GPT-3 for real. This is my opinion after entertaining that thought:

[COBOL](https://en.wikipedia.org/wiki/COBOL) was meant to be friendly to non-programmers using English words and such, but in the end, it was still programming.

At my workplace, people who are proficient at using [Joget ](https://www.joget.org/)(low/no code platform) are called Joget Developers. Just like there are Joget Developers, there will be people trained at giving instructions to the AI and using its platform; GPT-3 Developers.

Using GPT-3 will still be programming. It will be coding in a language that uses English as its syntax. Let's consider that for a moment: Human spoken languages are less concise, less clear and more prone to misunderstanding. People will need to practice the right nouns, adjectives and verbs etc. to use when talking to GPT-3 to get the outcome they want. You would need to learn to "debug" your English sentences according to how GPT-3 understands it, and not according to what you really meant. Words and even sentences carry different meanings based on context.

Some might argue _"they could create a simplified version of the English language that makes it easier to give instructions to GPT-3"_ - you just invented a programming language.

With programming languages, you say what you mean and mean what you say. Learning a logical language is easier than learning English.
API & GRAPHQL COVID-19.
Tags: javascript, api, coronavirus
Published: 2020-07-25 04:47:46

Access data on COVID19 through an easy API for free. Build dashboards, mobile apps or integrate in to other applications. Data is sourced from Johns Hopkins CSSE.
-   Realtime global counts; total cases, recovered & deceased.
-   Realtime counts across countries; total cases, recovered & deceased.

Documentation: https://bit.ly/37MS1yQ
Url: https://corona.azure-api.net/
Updated daily.
How to Setup Let's Encrypt SSL with NGINX server: Hands-on!
Tags: nginx, ssl, tutorial, codenewbie
Published: 2020-07-25 04:01:38

{% youtube -EBiE8ATtG8 %}
In this video, let's understand how to setup SSL with NGINX server on Ubuntu. This is production-level setup Let's Encrypt SSL with NGINX server.

Follow on:
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Landing Page Redesign| Design For Developers 
Tags: design, ux
Published: 2020-07-25 03:39:10


If you're a developer and you find yourself struggling with making things look good then this video is for you! 

I go over how I changed the landing page from this

![Landing Page before the redesign](https://dev-to-uploads.s3.amazonaws.com/i/qnayp2nx3o8silwrw143.png)

to this

![Landing page after the redesign](https://dev-to-uploads.s3.amazonaws.com/i/f81anj41ita1hb7pdh94.png)


👉🏻 **https://www.youtube.com/watch?v=eovEWBXSWIg**

This is the landing page for [The coding Career Handbook](https://learninpublic.org). You'll find my redesign live at https://coding-career-handbook.netlify.app

It's built using Gatsby and TailwindCSS, two of my favorite technologies at the moment. It's open-source as well at https://github.com/m-abdelwahab/coding-career-handbook

If you prefer reading, I wrote a summary of the changes I made + key takeaways ⬇️

# The Hero Section

By far the most important section of any landing page. This is where users build the first impression and should be able to understand what the whole website is about.

So make sure that:

→ Use an attention-grabbing headline that focuses on the product's value
→ Make sure that there are clear call-to-actions

![Hero section summary before and after](https://dev-to-uploads.s3.amazonaws.com/i/en5j84gpkw8r4xm1mw48.png)

# Table Of Contents Section

Having a table of contents that users can read is important.

People want to know exactly what they're paying for.

However, having it on the main page will result in a lot of scrolling.

A good approach is to have it on a separate page

![Table of contents before and after](https://dev-to-uploads.s3.amazonaws.com/i/fptol5rcp7ld61q5p434.png)

# About The Author Section

When designing things, sometimes "less is more"

You don't need a unique color combination

You don't need fancy layouts.

Keeping things simple works more often than you think

![About the author section before and after](https://dev-to-uploads.s3.amazonaws.com/i/ex42wbiw22llbzhztosh.png)

# Pricing Section

If you offer different packages/ pricings a common pattern is to have a comparison table. This way your future customers can easily understand the differences and which package is best for them

![pricing section before and after](https://dev-to-uploads.s3.amazonaws.com/i/k3dkftjplcpt43dyb7ro.png)


If you enjoyed this you'll find that the video covers one more section (the book reviews)

Check it out here: 👉🏻 **https://www.youtube.com/watch?v=eovEWBXSWIg**
How to Dockerize Laravel Application
Tags: devops
Published: 2020-07-25 03:37:14

In this post, I will show you how to setup a Laravel application inside docker. Here we are using Laravel, MySQL, Nginx & Docker for the setup.

To view the blog post click below.

[How to dockerize Laravel Application | DevMatrix.in](https://devmatrix.in/how-to-dockerize-laravel-application)
Atualizando seu projeto no GitHub
Tags: github, git, atualizando, projeto
Published: 2020-07-25 03:19:02

### Um passo a passo rápido para você subir a nova versão do seu projeto do GitHub

Uma das formas mais eficientes de mostrar que você é um programador ativo é fazendo uploads no GitHub. Afinal, não tem nada mais *cool* do que ver o seu perfil cheio dos quadradinhos verdes.

O problema é que muitos iniciantes só sobem o projeto no GitHub quando ele está pronto e acabam perdendo a oportunidade de não só fazer o backup do progresso do trabalho como também de manter o seu perfil sempre ativamente alimentado. Então hoje eu resolvi falar sobre esse método muito simples para você manter os seus projetinhos do GitHub sempre atualizados junto com os arquivos locais. 

Antes de mais nada, se você quer aprender a fazer um repositório **novo** no GitHub, [segue este tutorial aqui](https://dev.to/alanfabricio/subindo-seu-repositorio-no-github-atraves-da-linha-de-comando-3kcm).

Bom, mãos à obra!

![Japonês pronto pra te hackear estalando os dedos](https://media.giphy.com/media/10UgyJMCF4EP7y/giphy.gif)

1. Tenha certeza que o seu git está instalado. No terminal ou prompt de comando cheque através do comando `git -v`;

2. Abra o Git Bash ou terminal na pasta onde está o seu projeto. **Presume-se que o repositório já esteja iniciado no GitHub, mesmo que apenas com o ReadMe**;

3. Adicione todos os arquivos para serem validados como upload através do comando `git add .`;

4. Se o seu projeto local já possuir uma URL de origem definida pule este passo. Se não possuir, como é o caso de você iniciar um repositório sem fazer upload de arquivos ou somente com um ReadMe, você pode definir uma. Para isso, vá no repositório criado e no botão Code copie a URL que é disponibilizada:
![copiando URL do repositório](https://i.imgur.com/bOQ62OF.jpg)
Posteriormente execute `git remote add origin URL-DO-REPOSITÓRIO`;

5. Incorpore as mudanças do seu projeto remoto com seu projeto local utilizando `git pull origin master`.
_Dica_: Você pode checar quais arquivos sofreram mudanças e serão upados através do comando `git status`;

6. Confirme as alterações entre o projeto remoto e o projeto local usando o comando `git commit -m "descrição do commit"`;

7. Jogue o projeto para a nuvem usando `git push origin master`. O terminal irá pedir o seu login e senha do GitHub para realizar esse processo e você finalmente terá seu projeto atualizado.

---
Teve algum problema? Comenta aqui em baixo!

Se este link foi útil pra você ou você quer apoiar o meu trabalho,
deixa seu like aí e compartilhe ❤️

![Deixa seu like aí!!!](https://media.giphy.com/media/fAVOVstMKzWEOgl4gV/giphy.gif)
Fast a new UI library from Microsoft
Tags: react, javascript, design, uiweekly
Published: 2020-07-25 03:06:46


![Fast a new UI library from Microsoft](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/07/68747470733a2f2f7374617469632e666173742e64657369676e2f6173736574732f666173745f62616e6e65725f6769746875625f3931342e706e67.png?resize=750%2C402&ssl=1)

Choosing the correct UI library for a project is always most confusing thing for developers. We already have a lot of options like Material UI, Ant Design, Fluent Design, etc. Recently Microsoft has lanuched one more UI library called  **Fast**. In this article we will gonna see how Microsoft Fast is different from other UI library.

## What is Fast ?

Microsoft’s Fast mainly focuses on the web components. It have a lot of pre-built web components. You can choose between two _adaptive_ design systems: Fluent Design and FAST Frame. It can be easily integrated with any frontend framework.

FAST is a collection of JavaScript packages centered around web standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.

#### Installation

Like any other package you can install it from yarn and npm. The `fast-components` and `fast-components-msft` libraries contain Web Components built on top of our standard component and design system foundation. `fast-components` express the FAST design language while `fast-components-msft` expresses Microsoft’s Fluent design language.

```
npm install --save @microsoft/fast-components
```

```
yarn add @microsoft/fast-components
```

#### Usage

To use Fast UI you need to wrap your app with a parent web component wrapper like this.

```
<!-- ... -->
<body>
    <fast-design-system-provider use-defaults>
    </fast-design-system-provider>
</body>
<!-- ... -->
```

After that you are ready to use any web component in your app.

For example to use a button we can write.

```
<fast-design-system-provider use-defaults>
    <fast-button>Submit</fast-button>
</fast-design-system-provider>
```

The out put will gonna look like this.

![Fast a new UI library from Microsoft submit button](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/07/image-3.png?w=750&ssl=1)

Same we have a lot of web components like progress, text-fields, tabs, slider, switch, radio, menu, dialog, cards, checkbox etc etc. You can see full components list  [here](https://fast.design/docs/components/accordion).

[The best Reactjs UI frameworks/library in 2020](https://blogreact.com/the-best-reactjs-ui-frameworks-library-in-2020/)
Rmackdown in vscode
Tags: rstat, datascience, machinelearning, productivity
Published: 2020-07-25 02:47:17

https://marketplace.visualstudio.com/items?itemName=TianyiShi.rmarkdown
 

I always told peoples this: ” The R ecosystem is different then the MS office bundle of software”. We always assumed that we can only use the Rmarkdown super powers inside the Rstudio IDE. Wrong, Rmardown is just a file with the extension ’Rmd’. The R interpreter will know how to run the code inside of it. Even the knitr is a R function, acting as an api, that will communicate with pandoc and the LaTeX compiler.  Now I can easily work with Rstudio and vscode on the same project.
Singleton Pattern in JavaScript?
Tags: javascript, node, architecture
Published: 2020-07-25 02:20:18

Instead of my usual blog post, I'd like to pose a question.

How often do you JavaScript developers use singleton patterns?

If I wanted to implement a singleton pattern in ES6, is this how I'd do it?

If not, why not?

```javascript
// notifications.js
class Notifications {

  constructor() {
    this.messages = [];
  }

  add(message) {
    this.messages.push(message);
  }
}

export const notifications = new Notifications();
// ☝️ asking about this

// main.js
// 👇 less important
import { notifications } from './notifications';

class Main {
  constructor() {
    notifcations.add('some message')
  }
}

new Main();
```
Plz Help, 2 Repos inside each other to upload on Github
Tags: help, discuss, node, github
Published: 2020-07-25 01:58:25

There is a Chat App (Socketio/React/Node) that I'm trying to create. I want to upload it on github. The directory root has two separate folders - Client & Server, while I'm try to upload it, it is saying
![1](https://user-images.githubusercontent.com/66199202/88446456-d6e53200-cdde-11ea-99c0-04069df60986.png)

"warning: adding embedded git repository: extractor/annotator-server
hint: You've added another git repository inside your current repository."

So, what I'm supposed to do? How to upload my project on github, when it has  2 repos inside?Any hints?
Flutter UI Templates
Tags: dart, android, ios
Published: 2020-07-25 00:46:23


Today I will share this repository with themes very well worked for you to use in your projects.

Completely free for everyone. Its build-in Flutter Dart.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/536gc5x7ehxyxg3nk5qe.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y6d98bdmjgmxrinrmdhk.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iz9w3555lvspw76ywwj0.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7fo5p3zqqy5k5kas4dgt.png)

https://github.com/mitesh77/Best-Flutter-UI-Templates
1 fish, 2 fish, #red fish, .blue fish
Tags: javascript, css, html, webdev
Published: 2020-07-25 00:30:26

#A lesson in Frontend Development from Dr. Seuss.

##1 fish
###Right
`document.querySelector('fish');`
###Wrong
`document.getElementById('#fish');`
##2 fish
###Right
`document.querySelectorAll('.fish');`
###Wrong
`document.querySelector('.fish');`
## #red fish
###Right
`document.getElementById('red');`
###Wrong
`document.getElementById('#red');`
##.blue fish
###Right
`document.getElementsByClassName('blue');`
###Wrong
`document.getElementsByClassName('.blue');`

##Pay close attention to the method you use and the query string you pass as argument.

[Get more practice by playing this free game I made each day: Fix a function!](http://freecodegame.com)
Simple snippet to shuffle array
Tags: javascript, node, typescript
Published: 2020-07-25 00:29:32

If you need to shuffle the elements of an array, you can use this simple function:

```js
function shuffle(array) {
  const copy = [...array]

  return copy.sort(() => Math.random() - 0.5)
}
```

### The algorithm

1. Creates a copy of the parameter to not modify the original array
2. Uses the function `Array.prototype.sort` of the copy to randomly sort the array with a callback that always returns `Math.random() - 0.5` (The random factor).

### Example

```js
const example = [1, 2, 3]

const shuffled = shuffle(example)

/*
  shuffled is one of these:
  - [1, 2, 3]
  - [1, 3, 2]
  - [2, 1, 3]
  - [2, 3, 1]
  - [3, 1, 2]
  - [3, 2, 1]
*/
```