teleren/devto huggingface dataset:
Copying VS Understanding Code
Tags: beginners, webdev, programming, firstyearincode
Published: 2021-08-11 02:55:59

You need to build a countdown timer for your project. You remember something about setInterval but can't quite place it. You open a tab and see Google staring back. There is a choice here. Do you type "setInterval documentation" or "javascript countdown timer"?

One of these **teach** you the answer while the other will simply give it to you.

## Making Sure You Learn

If you googled the javascript countdown timer one of the first links you'll come across is from Stack Overflow and you'll find a function that looks like this:

```javascript
function timer(){
    var sec = 30;
    var timer = setInterval(function(){
        document.getElementById('safeTimerDisplay').innerHTML='00:'+sec;
        sec--;
        if (sec < 0) {
            clearInterval(timer);
        }
    }, 1000);
}
```

When coding for companies or bootcamps there will be a code review and you will have to explain your functions. Here are 3 ways that you can prove that you understand the code and make sure that you're learning:

1. **Can you test the code?**

    Looking back on that timer function could you write a test for 
    it right now? Which testing library would you use? What would
    a fringe case look like? Do you need any extra resources to 
    test it?

2. **Can you apply the code within a framework/other language?**

    How do you implement this code within React, Angular, or Vue?
    What does this look like in jQuery or Typescript?

3. **Can you explain this function using comments or documentation?**

    This is a crucial skill to have when contributing to larger 
    code bases and for debugging. Can you break this code up line 
    by line and describe what's happening?

If you can answer most of these questions congrats! You are leveling up. If not, congrats! You have a new goal to chase. I am still building my skills in these areas as all developers are. I'm just letting you know what I wish my bootcamp teachers would have told me. If you need any help with these questions feel free to comment below. I'm here to help.
TypeError: Invalid attempt to destructure non-iterable instance.
Tags: react, help, discuss
Published: 2021-08-11 02:34:25

Hello!

Have you seen a similar error before? 

`TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method`

Chance are that you need to make sure the component using the  react context, is actually a child (any level deep) of the component that sets the context.

It seems to related to when the usage is outside of the initialization.
First Post Outlining a Data Strategy

Tags: introduction, strategy
Published: 2021-08-11 02:33:46

This post is one which should give the outline of my data strategy. This includes but is not limited to 

1. Data sources
2. Data curation
3. Modification and/or data tinkering
4. Data agglomeration. 

Inferences sought from this data should have a backing based on the methods used in the above processes.
Ubuntu 14.04를 Ubuntu 20.04로 업그레이드하기
Tags: ubuntu, server, linux
Published: 2021-08-11 01:41:14

작업전 반드시 기존 서버자원 백업(웹데이타+DB외)

## 전체 과정은

-, 14.04 -> 16.04 업그레이드하고
-, 16.04 -> 18.04 업그레이드,
-, 18.04 -> 20.04 이렇게 3차례 과정을 거친다.

## 매 단계는 아래의 과정을 동일하게 진행하면 된다.

1. sudo apt update
2. sudo apt upgrade
3. sudo apt dist-upgrade 
4. sudo apt install update-manager-core
5. sudo vim /etc/update-manager/release-upgrades
    set prompt=lts // 하단에 Prompt=lts 확인  
6. sudo do-release-upgrade
   //reboot // Yes 선택
   //keep the local version currently installed 선택
   실행중 여러번 질문을 받게 되는데 'Y'를 선택하면 된다.
   Restart (auto)
7. lsb_release -a // 배포판 버전 확인
Deploying a containerized app to IBM Code Engine
Tags: node, javascript, cloud, devops
Published: 2021-08-11 01:16:21

Welcome back to THINK Days!

A weekly blog series where I discuss and share my journey with IBM Cloud Services. Before you begin, do checkout my previous blogs:

 - [Deploy a NodeJS app to IBM Cloud Container Registry](https://dev.to/ibmdeveloper/deploy-a-nodejs-app-to-ibm-cloud-container-registry-46m2)
 - [Deploy an image from IBM Cloud Container Registry to Kubernetes](https://dev.to/ibmdeveloper/deploy-a-nodejs-app-to-kubernetes-4flg)

In this week's THINK Tuesday we will be discussing how to use IBM Cloud's Code Engine service. The coolest new service on the block! It enables you to deploy a fully scalable app on IBM Cloud in a matter of minutes. Let's take a look at some of the amazing perks of this service:
 - Auto-scales up/down, even to zero when idle
 - Builds container images from source code
 - Seamless integration with IBM Cloud services
 - Built on OSS Kubernetes, Knative, Istio, and Tekton, keeping workloads portable
 - Pay only for what you use

Let's get started!

### Steps to Deploy an App on IBM Cloud Code Engine

#### Step 1
We are launching from this version of Code Engine from the IBM Cloud Dashboard. The quickest way to get started is to either provide a container image or source code.
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys01w8o9k3dvm60z39bc.png)

I pasted one of the sample demo apps image and hit Create to get started.

#### Step 2 - Fine Tune Settings
Since I want this to be a running app rather than a job that runs to completion, select `Application` for type of Code Engine Instance:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh7nrkk6u1tol0j7yd99.png)
 
Verify that I am passing in a container image:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2xk53en5txm7sn23esv.png)

For this tutorial, I plan to stick with the defaults. But, there are options to fine tune the runtime settings  to better configure how this app scales.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q862hxovpwnyaub0sy4.png)
 
#### Step 3 - Launch the app

Once configured, click Create, and the app will be deployed in a matter of seconds! 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy520p0kxur03iplx4rd.png)
 
Oila, congratulations on deploying your first container on IBM Cloud Code Engine!

In this tutorial, we are simply scratching the surface on what's available with this new and amazing service. 

Thank you for following along this THINK Day's Tutorial and be sure to look out for my next post, where I will continue sharing my Journey with IBM Cloud Services!!!

==== Follow me on Social Media(`@mrinasugosh`) ====
Dev.to: @mrinasugosh 
Github: [@mrinasugosh](https://github.com/mrinasugosh)
Twitter: [@mrinasugosh](https://twitter.com/mrinasugosh)
LinkedIn: [@mrinasugosh](https://www.linkedin.com/in/mrinasugosh/)
Getting Started with Express.js
Tags: express, node, codenewbie, fullstack
Published: 2021-08-12 17:28:47

---
title: Getting Started with Express.js
published: true
date: 2021-08-11 01:27:22 UTC
tags: expressjs,nodejs,codenewbie,fullstack
canonical_url: https://medium.com/codex/getting-started-with-express-js-721ef88efe99
---

[![](https://cdn-images-1.medium.com/max/1428/1*ITbeu1PrRL4EsHt3ZPoVtw.png)](https://medium.com/codex/getting-started-with-express-js-721ef88efe99?source=rss-be00f566a88f------2)

How to set up and leverage server interactions and routing using Express.js

[Continue reading on CodeX »](https://medium.com/codex/getting-started-with-express-js-721ef88efe99?source=rss-be00f566a88f------2)
How To Center A Div Within A Div
Tags: beginners, webdev, html, css
Published: 2021-08-11 01:17:19

I don’t think I’ve met a single soul working in web development who hasn’t googled this more than once. Whether you’re new and trying to finish that first project, or like me and immediately forget everything you’ve learned once you start a project, this is just one of those concepts that takes a while to stick. Either way I won’t judge nor will I waste your time. There are a ton of ways to accomplish this task. I’ll keep it simple and show you my go-to.

## Hello Flexbox 👋

Since the goal of most web pages is to make them responsive, using flexbox cuts down on a lot of the work when working on media queries.

### Prerequisites

- Make sure the **height** CSS property of both the body and HTML is set to 100%
  
- Make sure the **display** CSS property of your parent container is set to flex  
  

Now we can apply some CSS and HTML as follows:

HTML
```html
<div id="flex-container">
    <div>
        I am centered
    </div>
</div>
```

CSS
```css
html, body {
    height: 100%:
    margin:0;
}

#flex-container {
display: flex;
height: 100vh;
background-color: #31493C;
justify-content: center;
align-items: center;
}

#flex-item {
background-color: #FCA311;
}
```
The result:
![Full screen centered div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71eqi8tjbii2lyprcr6z.png)

And when you resize the window\:
![Half screen centered div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6tfzdes5phfgv1qibca.png)

Simple. Now if you’re a beginner I want you to think about something. There is a line in this code that could give you problems if the “flex-container” isn’t the outermost container. I did this because you shouldn't copy code you don’t fully understand. Tell me which line is the potential issue in the comments below… or yell at me about it. I accept both.
Understanding HTML Anchor Tag <a>
Tags: html, webdev, beginners, codenewbie
Published: 2021-08-11 00:19:18

> The \<a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address. Content within each \<a> should indicate the link's destination.
> - [www.developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

When To use anchor tags?

## Absolute URLs 

`<a href="www.example.com>text</a>`

Example:

{% codepen https://codepen.io/Aya_Bouchiha/pen/MWmLWQy %}

## Relative URLs

`<a href="/about-me">about me</a>`

## Email

`<a href="mailto:example@gmail.com">text</a>`

Example:

{% codepen https://codepen.io/Aya_Bouchiha/pen/KKmJKRp %}

## Phone Number

`<a href="tel:+12345678910>text</a>`

Example:

{% codepen https://codepen.io/Aya_Bouchiha/pen/eYWxYjB %}

## a section or a part of your page

`<a href="#section-id">text</a>`

Example:

{% codepen https://codepen.io/Aya_Bouchiha/pen/NWjoWEW %}

## Image as a link

Note:
Image as a link must have an alt attribute on the image otherwise there is no link text. The alt text should be the same as if the image didn't exist and the link was just text.

Without an alt attribute, it is bad for SEO and, more importantly, people using assistive technology have no way of knowing what that link does do you are (unintentionally) excluding them!

```html
<a href="link">
    <img src="img link" />
</a>
```
Example:

{% codepen https://codepen.io/Aya_Bouchiha/pen/ExmrxGw %}

Note:
anchors give access from the target site to the source, meaning that if foo.com has an anchor to bar.com, bar.com can get data about foo.com. To avoid this, ideally, all anchors should have the attribute rel with the value noopener noreferrer which makes them more secure.

### References

+ [www.developer.mozilla.org](https://developer.mozilla.org/)
+ [www.w3schools.com](https://www.w3schools.com/)

To Contact Me:

email: developer.aya.b@gmail.com

telegram: [Aya Bouchiha](https://t.me/AyaBouchiha)

Have a great day!
Some people like to be lied to
Tags: datascience, statistics, abtesting
Published: 2021-08-16 08:43:46

---
title: Some people like to be lied to
published: true
date: 2021-08-11 00:00:00 UTC
tags: datascience,statistics,abtesting
canonical_url: https://jhall.io/archive/2021/08/11/some-people-like-to-be-lied-to/
---

I worked at Booking.com several years ago. Booking.com is famous for their [A/B testing](https://en.wikipedia.org/wiki/A/B_testing) culture. They test a lot. Probably too much.

While I was there, they were just starting to run A/B tests for their hotel-facing web site, and I had the amazing privelege of helping with some of this. In fact, I was even offered a promotion to become the tech lead for the newly-forming hotel-facing experiment team. I initially was excited to accept, because the work was fascinating, and I really enjoyed working with the data scientists in this problem space.

But there was a problem.

The work was really hard.

That wasn’t the problem, actually. That made it interesting.

The problem was that _explaining_ this hard work to the product owners and other stakeholders who would be using the results of these hotel-facing A/B tests to make business decisions was hard. It was so hard, in fact, that most of the POs I was talking to would get frustrated and just ask for a simple explanation.

Of course I understand that desire. But sometimes there simply _are not_ simple answers. In such a case, do you offer a [simple-but-wrong answer, or a complex-but-right answer](https://www.gocomics.com/nonsequitur/2016/01/20)?

I concluded that, in that particular case, the better answer for these POs was no answer at all. It’s better to use your subjective intuition, than to rely on incorrect “objective” answers. Naturally, they weren’t interested in paying me for that, though, so I left the company. You can predict Booking.com didn’t agree with me, and they now have several teams dedicated to A/B testing. And last I heard, they were doing some amazing things with them, and no doubt, some POs are constantly misusing the results to make bad decisions.

I’ve had this same situation come up a few other times since then: Someone in management wants answers (via an A/B testing tool, or some other “hard statistics”) that simply isn’t possible to do reliably. Or the cost to do it reliably would far outweigh the value of the decision to be made.

The best answer can be no answer. But convincing people of this is often hard.

Have you been in this situation? How did you deal with it?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to Create Secret Tokens in Python
Tags: python, secret, security
Published: 2021-11-03 09:24:34

---
title: How to Create Secret Tokens in Python
published: true
date: 2021-08-11 00:00:00 UTC
tags: python, secret, security, 
canonical_url: https://tech.serhatteker.com/post/2021-08/create-secret-tokens/
---

If you working with web applications, it usually necessary to If you working with web applications, it usually necessary to generate tokens, API keys, [personal keys] etc.

We assign them to clients to use as authentication.

We already saw [how to create secrets]. However using that method could cause problem sometimes like if we use them in *url*.

Python's built-in [secrets] module provides functions for generating secure tokens, suitable for methods such as password resets, hard-to-guess URLs, and similar.

## Generating Tokens

### Bytes

Return a random byte string containing *nbytes* number of bytes

```python
# utils/secrets.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import string
import secrets


def generate_token_bytes(length: int = 32):
    return secrets.token_bytes(length)
```


```python
In [2]: generate_token_bytes()
Out[2]: b'\x8a\xb7\x19\xd8\x8f\x94\x16\x15\xedg\xc1\x833\xd4\xb9\xfe\xd8\xa7\xc5\xa17d\xd7k\xe5\x14\xea\xe4\x7fz\x0f}'
```


### Hex

Return a random text string, in hexadecimal.

```python
# utils/secrets.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import string
import secrets


def generate_token_bytes(length: int = 32):
    return secrets.token_bytes(length)
```


```python
In [3]: generate_token_hex()
Out[3]: 'b9165728eb46a36db8389c902c20bd7bd7a8430be398f47818323b0d15b46600'
```


### URL Safe

Return a random URL-safe text string, containing *nbytes* random bytes.

```python
# utils/secrets.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import string
import secrets


def generate_token_urlsafe(length: int = 32):
    return secrets.token_urlsafe(length)
```

```python
In [5]: generate_token_urlsafe()
Out[5]: 'uNuz07y8mkmwvHftrszV_SFffh9LT25L98UZO0w_LHA'
```

`urlsafe` is very useful when you want to use password reset:

```bash
http://tech.serhatteker.com/accounts/reset/MQ/uNuz07y8mkmwvHftrszV_SFffh9LT25L98UZO0w_LHA/
```

or using it as a password:

```bash
# redis://user:pass@instance:port/db
redis://redis-user:uNuz07y8mkmwvHftrszV_SFffh9LT25L98UZO0w_LHA@redis_instance_url:6379/0
```


All done!




[secrets]: https://docs.python.org/3/library/secrets.html
[personal keys]: https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token
[how to create secrets]: https://tech.serhatteker.com/post/2021-08/create-secrets/
How to remove or clear the history of all the commands that were executed in the Linux terminal?
Tags: resource
Published: 2021-08-11 00:00:00

---
  title: How to remove or clear the history of all the commands that were executed in the Linux terminal?
  published: true
  tags: Resource
  date: Wed Aug 11 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/remove-clear-history-of-all-commands-executed-linux-terminal
  cover_image: https://melvingeorge.me/_next/static/images/main-a9359ec0aeb8e26067dd637aa6512b48.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/remove-clear-history-of-all-commands-executed-linux-terminal)
  
To remove the history or the traces of all the commands executed, you can use the `history` command followed by the `-c` flag (clear contents flag) in the Linux terminal.

```bash
# Clear all the traces or the history
# of commands executed
history -c
```

- You may have to restart your current terminal session to check if the history has been deleted.

See the execution of the above command live in [repl.it](https://replit.com/@melvin2016/remove-the-history-of-commands-executed-in-terminal#main.sh).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Motherland: Fort Salem Pentagram Sticker with CSS and SVG (CodePen)
Tags: codepen, design, css, html
Published: 2021-08-10 23:48:26

I was bored and created the pentagram sticker from the official shop for the tv show [Motherland: Fort Salem](https://www.imdb.com/title/tt9900092/) because I have an unhealthy obsession with this witch show.

Sticker from the shop for reference [here](https://shopfreeform.com/collections/motherland-fort-salem/products/motherland-fort-salem-pentagram-die-cut-sticker).

The black circle with a star SVG was created on Figma with A LOT of pen strokes. The star strokes were drawn and flattened together, and then the circle outline around the star was drawn and then flattened with the star.

Fonts: 
    - Saira Stencil One
    - Roboto Condensed

Color Scheme:
    - #082F56 blue background
    - #EA0A2C red border outline
    - #050709 the shade of black

{% codepen https://codepen.io/anniedotexe/pen/NWjoKPw %}
Post #5: Everything almost done
Tags: python, weeklyretro, opensource, gsoc
Published: 2021-08-10 23:39:58

Hi everyone! This is my 5th blog post, and it is the last before the coding phase ends. I can't believe that almost 2 months have passed, the whole experience has been awesome, however, I am going deeper into it in the next post.

Last week I was working on modifying the graphical user interface. This change was necessary to improve the lesson's context, with this information the future students of the course can know more about the interfaces and the basic differences between them. In addition, I changed the initial position of dialogs to the left upper corner,  this change helps to a better experience when creating the dialogs. I made a PR with this change and it is awaiting the mentors' review. Below there is a result of this change. 

**Code**

```python

from browser import document, html
from browser.widgets.dialog import Dialog

# Creación de un dialogo con el título
d = Dialog("Show de preguntas Zombis", top=20, left=20)

# Agrega elementos como botones y títulos
d.panel <= html.H3(
    "Aprieta los botones",
    id="titulo_ventana",
    style=dict(textAlign="center")
)
d.panel <= html.BUTTON("Correcto", id="btn_correcto")

d.panel <= html.BUTTON("Incorrecto",
    id="btn_incorrecto",
    style=dict(marginLeft="5em")
)

```

**Result**
![Result Dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl7ahi75d1ufot0l6oog.png)


I made a few Proof of Concepts with different approaches until I found the best solution for my problem, however, one of the approaches that I used was inherited from the Brython class dialog and overwrote the methods that I needed. This approach was the optimal solution but I had a problem, the Brython interpreter did not allow me to do it and I had several issues with this, then I changed it to a simple solution, which can not be optimal, but remember...

![Better done than perfect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad29zwld72di3xqlt872.jpg)
[Linux] Disco em XFS
Tags: linux
Published: 2021-08-10 23:02:21

Muitas vezes na carreira de DBA eu já formatei discos em Linux e dessas diversas vezes fazendo filesystems e outros lugares, acabei sempre fazendo em ext3, porém hoje fiz em xfs, pois é o padrão da empresa.

Vem o passo a passo:

1. Criar pasta que vai ser o fs
`mkdir /teste`

2. Add disco na máquina.

3. Criar partição
```shell
fdisk -l
fdisk /dev/sdb
```

4 - Formatar a particao com o xfs.
```shell
[root@teste01 ~]# mkfs.xfs -f /dev/sdb1
meta-data=/dev/sdb1              isize=512    agcount=4, agsize=655296 blks
         =                       sectsz=512   attr=2, projid32bit=1
         =                       crc=1        finobt=0, sparse=0
data     =                       bsize=4096   blocks=2621184, imaxpct=25
         =                       sunit=0      swidth=0 blks
naming   =version 2              bsize=4096   ascii-ci=0 ftype=1
log      =internal log           bsize=4096   blocks=2560, version=2
         =                       sectsz=512   sunit=0 blks, lazy-count=1
realtime =none                   extsz=4096   blocks=0, rtextents=0
```

5. Pegar o uuid:
```shell
[root@teste01 ~]# blkid
/dev/sda1: UUID="de86b48a-914b-4104-9fd8-f9dd8OO452ea" TYPE="xfs" 
/dev/sr0: UUID="2006-12-25-15-55-36-00" LABEL="CONTEXT" TYPE="iso9660" 
/dev/sdb1: UUID="c4405025-7854-4xae-b5de-2c2d2tcd43do" TYPE="xfs" 
```

6. Add no `/etc/fstab`
```shell
vi /etc/fstab
UUID=c4405025-7854-4xae-b5de-2c2d2tcd43do /teste               xfs    defaults 1       2
```

7. Montar o fs.
```shell
mount /teste
# se der erro, tratar.
```

8. Teste pra ver se há leitura e escrita.
```shell
[root@teste01 ~]# touch /teste/1.txt
# se der erro, tratar possivel erro é de read-only.
# se nao der erro, 
rm -rf /teste/1.txt
```

9. (opcional) restart o servidor para testar se está subindo o disco.
```shell
shutdown -r now
```
PHP 7.3 + Nginx no CENTOS 7
Tags: php, nginx
Published: 2021-08-10 22:53:33

Passo a passo, simples, sem muito bla bla bla sobre a instalação do PHP 7.3 no CentOS 7.
<start>

0. Instale o CentOS 7 ou peça para o Suporte

1. Validar versão do CentOS7 (não custa nada)
`cat /etc/os-release`

2. instale o repositorio extra do Linux e o gerenciador de repositorio
`yum install epel-release yum-utils`

3. Instale o repositorio remi-release-7
`yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm`

4. Ative o remi-php73
`sudo yum-config-manager --enable remi-php73`

5. Instale os pacotes inicias do php 7.3
`sudo yum install php php-common php-opcache php-mcrypt php-cli php-gd php-curl php-mysqlnd`

6. Valide a instalção
`php -v`

7. Instale o PHP FPM, ative e inicie.
```shell
sudo yum install php-fpm
sudo systemctl enable php-fpm
sudo systemctl start php-fpm
```
**Comentário:** `systemctl enable` é para habilitar a inicialização automática depois de um restart do servidor.

8. (opcional) no meu projeto ainda faltou esses pacotes do PHP para instalar.
`yum install php-mbstring php-xml`

9. Instale o nginx, ative e inicie.
```shell
sudo yum install nginx
sudo systemctl enable nginx
sudo systemctl start nginx
```

Sem complicar muito, porque programar já é complicado de mais.
</end>