teleren/devto huggingface dataset:
Combining Arrays with the Spread Operator
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-11 03:34:23

* Another huge advantage of the spread operator is the ability to combine arrays, or to insert all the elements of one array into another, at any index. Spread syntax makes the following operation extremely simple.
* Let's take this for example. I have defined a function `spreadOut` that returns the variable `sentence`. I modified the function using the spread operator so that it returns the array ['learning', 'to', 'code', 'is', 'fun'].
```
function spreadOut() {
  let fragment = ['to', 'code'];
  let sentence = ['learning', ...fragment, 'is', 'fun']; <----
  return sentence;
}

console.log(spreadOut()); will display  
['learning', 'to', 'code', 'is', 'fun']
```
Programmer block
Tags: problems, helpful
Published: 2021-05-11 03:33:51

---
title: Programmer block
published: true
description: 
tags: problems, helpful
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1944q4zwporcpbn7oys.png
---

I have heard a lot of writers mention writers block, but this is the first time I have experienced Programming block. 

Have any of you experienced it before, and for how long, and how did you get out of it? 

I will put my experience in the first comment.
5/10 TIL: Typescript
Tags: todayilearned, typescript
Published: 2021-05-11 03:31:25


- tsconfig.json configuration: 
    - "noEmit": true will not have Typescript emit Javascript out after compilation
    - https://www.sitepoint.com/react-with-typescript-best-practices/
- react-app-env.d.ts references the types of react-scripts, and helps with things like allowing for SVG imports
- React.ReactNode vs. React.FC
    - function Heading(): React.ReactNode { return <div>hello</div> }
    - const HeadingTwo: React.FC = () ⇒ <div>hello</div>
- using string literal type for useReducer (described in the link above)
- npm vs npx vs yarn
    - npx only executes without installing
    - https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/
- currently working on my #7 video on youtube (Go React Auth frontend part)
Kyanon Digital_Hiring
Tags: mobile, reactnative, dotnet, career
Published: 2021-05-11 03:29:38

𝐊𝐲𝐚𝐧𝐨𝐧 𝐃𝐢𝐠𝐢𝐭𝐚𝐥 𝐢𝐬 𝐮𝐫𝐠𝐞𝐧𝐭 𝐇𝐢𝐫𝐢𝐧𝐠  #HCMM]
Hi everyone, How are you today?
It's a good time to get a new job at #Kyanon_Digital

We have the plan to expand our Production House.
So, we really need you guys:
1. 𝐌𝐨𝐛𝐢𝐥𝐞 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 (2YOE, React Native): https://lnkd.in/gsMcQx6
2. 𝐒𝐞𝐧𝐢𝐨𝐫 .𝐍𝐄𝐓 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 (2-3YOE in .NET core, ASP.NET,..): https://lnkd.in/gKQ6JiR
3. 𝐁𝐚𝐜𝐤-𝐞𝐧𝐝 𝐈𝐧𝐭𝐞𝐫𝐧𝐬𝐡𝐢𝐩 (𝟑𝐦𝐨𝐧𝐭𝐡)

What we can offer you?
- We have a good working environment.
- Flexible working time.
- We will provide a device for you to work.
And lots of good benefits for you

𝐋𝐨𝐜𝐚𝐭𝐢𝐨𝐧: Kyanon's Production House, Phu Nhuan Dist.

If you need any further information, feel free to contact me.
📩 #Mail: dung.vo@kyanon.digital
📲 #Skype_Zalo_Tele_Viber: Dung Thao (0967.457.491)
-------------------
Thank you for your reading and stay safe!
Copying an Array with the Spread Operator
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-11 03:29:00

* While `slice()` allows us to be selective about what elements of an array to copy, among several other useful tasks, ES6's new spread operator allows us to easily copy all of an array's elements, in order, with a simple and highly readable syntax. The spread syntax simply looks like this: `...`

* In practice, we can use the spread operator to copy an array like so:
```
let thisArray = [true, true, undefined, false, null];
let thatArray = [...thisArray];
```
* `thatArray` equals `[true, true, undefined, false, null]`. `thisArray` remains unchanged and `thatArray` contains the same elements as `thisArray`.

* Try it out!
I have defined a function, `copyMachine` which takes `arr` (an array) and `num` (a number) as arguments. The function is supposed to return a new array made up of `num` copies of `arr`. I have done most of the work for you, but it doesn't work quite right yet. Modify the function using spread syntax so that it works correctly.
```
function copyMachine(arr, num) {
  let newArr = [];
  while (num >= 1) {
    // Only change code below this line

    // Only change code above this line
    num--;
  }
  return newArr;
}

console.log(copyMachine([true, false, true], 2));
```
* Answer:
```
function copyMachine(arr, num) {
  let newArr = [];
  while (num >= 1) {
newArr.push([...arr]) <----
    num--;
  }
  return newArr;
}

console.log(copyMachine([true, false, true], 2)); will display 
[[true, false, true ], [true, false, true]]
```
Linux에서 홈페이지 자료 백업  및 데이터베이스 백업 자동처리
Tags: backup, autobackup, serverbackup
Published: 2021-05-11 02:58:57

대부분의 웹사이트가 리눅스 서버 기반에서 운영되고 있다.
아래는 전용 백업툴을 사용하지 않고 쉽게 사이트의 데이타 및 DB를 자동 백업하는 과정이다.

1. nano 또는 vi편집기를 이용하여
backup.sh파일을 아래의 내용으로 만든다.

예: 
* 도메인이 abc.com
* dbuser, dbpass, dbname
* ftpuser, ftppass, ftphost(백업서버)
* 3일이전 백업본은 삭제

```
#!/bin/sh
NOW=$(date +"%y-%m-%d")	#오늘일자를 생성
DELDAY=$(date -d "-3 days" +%y-%m-%d)	#3일 전의 일자를 생성
####### 홈페이지 자료 백업 처리 및 데이터베이스 백업처리 #####
tar zcvfp /home/backup/abc-$NOW.tar.gz /home/abc/ #홈페이지폴더
mysqldump -udbuser -pdbpass dbname > /home/backup/abc-$NOW.sql
tar zcvfp /home/backup/abc-$NOW-sql.tar.gz /home/backup/abc-$NOW.sq*
rm -f /home/backup/abc-$NOW.sq*
B_DIR=/home/backup
REMOTE=ftphost
ID=ftpuser
PWD=ftppass
ftp -n -v $REMOTE << EOF
user $ID $PWD
lcd ${B_DIR}
put abc-${NOW}.tar.gz
put abc-${NOW}-sql.tar.gz
delete abc-$DELDAY.tar.gz
delete abc-$DELDAY-sql.tar.gz
#### 백업서버에 있는 파일중 3일 전의 파일은 삭제 처리 한다.
bye
EOF
### ftp접속을 종료 한다.
rm -f /home/backup/abc-$DELAY.tar.gz
rm -f /home/backup/abc-$DELAY-sql.tar.gz
```

2. cron에 위 파일을 등록한다.(끝)
Tools that I use to compose a post
Tags: android, tools, writing, discuss
Published: 2021-05-11 02:58:37


I have been blogging for a month in dev.to and I like to share my tools list with you all. Please add yours in comments so that everyone can benefit.

## Markdown editor - Typora
If you're using mac and looking for a clean editor, try typora. After trying Obsidian, Joplin and StackEdit I found this editor. Feature that I most like about typora is the [WYSIWYG](https://en.m.wikipedia.org/wiki/WYSIWYG) experience.

In all the above editors, we have a preview panel to see the outcome. That's not the case in typora. Also the image resize feature in typora comes in handy in many cases.

...

## Android - screenshots/video - ADBConnect
To capure content to demo from app, **ADBConnect** is my goto option. It stuck to the menu bar which I can find in a second. Opening the Android Studio and using the logcat's option is painstaking in multiple instances. Also the Logcat video quality is not upto the mark when you record from a real device.

##  Video editing - iMovie
To keep the content focused, I use iMovie to trim the video and crop the frame. This will bring down the file size, focus on particular interaction and keep the reader in context as the content area is small compared to the original full height video.

##  Gif conversion - Gifski
Although gif is not space efficient, it is a necessary evil. With this minimalistic tool you can create a gif (even downscale the frame) with few drag and drops.

## Few things I learned along the way
1. When creating the post, it was easier to compose in typora. But for each image in the post I had to upload to dev.to and then replace it with local path in the markdown. To avoid this, I open a draft screen in parallel, upload the image and use the url in typora. If you've found a better alternative for image hosting, do post in comments..
2. When comparing the post in dev.to vs the editor, I noticed the post is bit condensed in the former. The space between paragraphs is not much to give a content break. Check the spacing above Adbconnect title and other places. So I place three dots `...` in between or `---`(horizontal line) to increase the spacing.
3. In case anyone missed it, use language next to the code block for syntax highlighting.

##  Endnote
I'm writing this article from my mobile on Press app just to try it out. I enjoy the editor already. If you haven't started, just start writing and tag me along. I'm looking forward to read.

This post is just to trick the community to give their tool names as I did. I'm excited to try out your tools.
Herramientas para programar en Kotlin
Published: 2021-05-11 02:48:57

###Para escribir nuestros algoritmos y pasarlo a un sistema de compilacion, necesitamos de herramientas de maquina de alto nivel para su respectiva compilacion de la lògica que realimos.
En la actualidad existen muchas herramientas de desarrollo de software que nos vuelve mas productivo a programar.
Aqui te damos las herramientas que mas se utilizan en para programar en Kotlin.

1. **Intellij - IDEA**
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h1jme2li3lfrrjtdsxl.png)
 
###Dentro de este editor tambien podemos programar con el RELP y el scratches, que se ejucutan al mismo tiempo que escribes el codigo.
--->RELP
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ji6i3khor82gsom2wjm6.png)
--->Scratches
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e81lr2l9x860e605szui.png)

2. **VS-code**
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9hfws51ty7myl15ktlk.png)

3. **Android-Studio**
 ###Para solamente utilizar kotlin, crea un proyecto sin actividad.
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ah6uqjb3mbedt8willk0.png)
    
###A nivel online puedes utilizar de su propia pagina oficial [kotlin](https://play.kotlinlang.org/?_ga=2.202915287.797882295.1620648005-687373427.1620648004#eyJ2ZXJzaW9uIjoiMS41LjAiLCJwbGF0Zm9ybSI6ImphdmEiLCJhcmdzIjoiIiwianNDb2RlIjoiIiwibm9uZU1hcmtlcnMiOnRydWUsInRoZW1lIjoiaWRlYSIsImNvZGUiOiIvKipcbiAqIFlvdSBjYW4gZWRpdCwgcnVuLCBhbmQgc2hhcmUgdGhpcyBjb2RlLiBcbiAqIHBsYXkua290bGlubGFuZy5vcmcgXG4gKi9cblxuZnVuIG1haW4oKSB7XG4gICAgcHJpbnRsbihcIkhlbGxvLCB3b3JsZCEhIVwiKVxufSJ9)
Free Trial Entries for Premium Accounts are available on Gamingpal! 
Tags: gamingpal
Published: 2021-05-11 02:07:53

We know that many people on the Internet do not want to pay for a paid app. That's why we've created categories of the most popular games and apps and published free accounts. At Gaming Pal, since 2019, we have been checking websites that share <a href="https://gamingpal.net/">free accounts</a> on the Internet for premium and paid entries. We share the correct and workable ones from these accounts we check with our visitors on our website in a list. We also try to keep lists of games and apps, many of which have premium memberships, up to date every day. 

Some websites ask you to download a program to provide you with the login information they share. But this is a complete lie. Because most of the programs it wants you to download contain viruses. For this reason, as gamingpal, all the accounts we spread on our website are presented to you in a list. You can easily get login information without any additional action.

We update the login information we publish frequently to reach more users. However, some users may have difficulty getting an account. Therefore, we decided to use a system called generator on our website. With this system, users who are late in obtaining an account can easily access the login information they are looking for by running the generator. 

Paid Game - App - Get Free Entries For Websites!

Our website publishes free account information for a total of 80 different categories. This account information consists of premium memberships of the most popular games, applications, websites. We update this completely legally obtained free account information every day to reach more users. For this reason, most of the users who visit our website state that they can easily access the account they are looking for. If you are tired of searching for an account on the internet, you can visit our website.
My click event doesn't work react 17
Tags: react, webpack
Published: 2021-05-11 02:46:46

My click event doesn't work
Configuration Environment
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfuzumq0qk4osj7ewbtt.png)
 
code
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3d7wwvz267mewpt9alyz.png)
AWS CodeStar - a cool service
Published: 2021-05-11 02:35:41

Learnt something new today - AWS CodeStar

From the AWS website - "AWS CodeStar enables you to quickly develop, build, and deploy applications on AWS. AWS CodeStar provides a unified user interface, enabling you to easily manage your software development activities in one place.

Rating: - I love it!!!

What I also leant this week - CodeCommit; CodeBuild; CodeDeploy; CodePipeline

I'm at hour 4 of 20 in Stephane's AWS DevOps Professional Course.
Awk Commands to replace filenames
Tags: awk, gawk, commandline
Published: 2021-05-11 02:29:26

---
title: Awk Commands to replace filenames
published: true
description: (Gnu's) Awk is a scripting language to manipulate text. This post shows how I replaced filenames using awk Commands.
tags: awk, gawk, commandline
---

[(Gnu's) Awk](https://www.gnu.org/software/gawk/manual/gawk.html) is a scripting language to manipulate text data.
This post shows how I replaced filenames using `awk` Commands.

I had translation dictionary files in Swedish aka "Sv"enska.

```console
$ ls -1 translations/*.sv.*
translations/about.sv.xliff
...
translations/validators.sv.xliff
```

Well, my goal was to get `cp` commands to duplicate them such as:

```console
$ cp translations/about.sv.xliff translations/about.ja.xliff
```

I was not used to `awk`.
Therefore, I first tried to print the same list with `awk`'s [`print`](https://www.gnu.org/software/gawk/manual/gawk.html#Print).

```console
$ ls -1 translations/*.sv.* | \
    awk '{ print $1; }'
translations/about.sv.xliff
...
translations/validators.sv.xliff
```

Got 🙂
Next, I found `awk` has [`gsub`](https://www.gnu.org/software/gawk/manual/gawk.html#Gory-Details) as a standard library function. "gsub" exists in Ruby and I was familiar with it. 

```console
$ ls -1 translations/*.sv.* | \
    awk '{ gsub(".sv.", ".ja.", $1); print $1; }'
translations/about.ja.xliff
...
translations/validators.ja.xliff
```

I succeeded in replacing languages in filenames.
Then I lined up the original and the replaced.

```console
$ ls -1 translations/*.sv.* | \
    awk '{ print $1; gsub(".sv.", ".ja.", $1); print $1; }'
translations/about.sv.xliff
translations/about.ja.xliff
...
...
translations/validators.sv.xliff
translations/validators.ja.xliff
```

Got, but I didn't want new lines between the original and the replaced.
Thus, I converted `print` to `print`__`f`__.

```console
$ ls -1 translations/*.sv.* | \
    awk '{ printf $1; gsub(".sv.", ".ja.", $1); print $1 }'
translations/about.sv.xlifftranslations/about.ja.xliff
...
translations/validators.sv.xlifftranslations/validators.ja.xliff
```

It seemed necessary to insert space. Anyway, it was coming there soon.

```console
ls -1 translations/*.sv.* | \
    awk '{ printf "cp "$1" "; gsub(".sv.", ".ja.", $1); print $1";" }'
cp translations/about.sv.xliff translations/about.ja.xliff;
...
cp translations/validators.sv.xliff translations/validators.ja.xliff;
```

I got the commands above. I ran them. They were successful.
After all, I got thanks to `awk` commands:

```console
$ ls -1 translations/*.ja.*
translations/about.ja.xliff
translations/daterangepicker.ja.xliff
translations/exceptions.ja.xliff
translations/flashmessages.ja.xliff
translations/invoice-calculator.ja.xliff
translations/invoice-numbergenerator.ja.xliff
translations/invoice-renderer.ja.xliff
translations/messages.ja.xliff
translations/pagerfanta.ja.xliff
translations/plugins.ja.xliff
translations/system-configuration.ja.xliff
translations/validators.ja.xliff
```

So sweet 🙂
gem-panel: easily create layout similar to Adobe After Effects
Tags: webcomponents, layout, customelements, adobeaftereffects
Published: 2021-05-11 01:33:07

---
title: gem-panel: easily create layout similar to Adobe After Effects
published: true
description: A custom element `<gem-panel>`, use css grid
tags: webcomponents,layout,customelements,adobeaftereffects
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn0xjfmqypf9c8q9mm4l.png
---
https://github.com/mantou132/gem-panel

## Features

- Drag to adjust the grid
- Drag to move the panel and window
- Drag and drop to adjust the panel sorting
- Add commands to the panel
- Cache layout
- Custom style, [example](https://gem-panel-example-style.vercel.app/)
- Async load panel content, [example](https://gem-panel-example-bridge.vercel.app/)
- Typescript support
- Lightweight, ~20kb(br)

## Example

```ts
import { Layout, Panel, Window } from 'gem-panel';
import { render, html } from '@mantou/gem';

const panel1 = new Panel('p1', { title: 'p1 title', content: html`p1 content` });
const panel2 = new Panel('p2', { title: 'p2 title' });
const panel3 = new Panel('p3', { title: 'p3 title', content: html`<p3-panel></p3-panel>` });
const panel4 = new Panel('p4', { title: 'p4 title', content: html`<p4-panel></p4-panel>` });
const panel5 = new Panel('p5', { title: 'p5 title', content: html`<p5-panel></p5-panel>` });
const panel6 = new Panel('p6', { title: 'p6 title', content: html`<p6-panel></p6-panel>` });

const panels = [panel1, panel2, panel3, panel4, panel5, panel6];
const layout = new Layout([new Window([panel1, panel4, panel5]), new Window([panel2]), new Window([panel6])]);

render(
  html`
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      gem-panel::part(fixed-window) {
        box-shadow: 0 0.3em 1em rgb(0 0 0 / 40%);
      }
    </style>
    <gem-panel
      .panels=${panels}
      .layout=${layout}
      .theme=${{ backgroundColor: 'red' }}
      cache
      cache-version="1"
    ></gem-panel>
  `,
  document.body,
);
```
You can use `<gem-panel>` in other ways.
Criando overlay com a previsão do tempo
Tags: braziliandevs, html
Published: 2021-05-11 01:19:06


Após várias pessoas perguntarem se eu estava com frio durante as [lives na Twitch](https://www.twitch.tv/bug_elseif), surgiu a ideia de colocar um overlay com a previsão do tempo, mostrando a temperatura atual da minha localização.

Foi possível fazer isso de uma maneira simples, usando uma página HTML e uma API.
#### Vamos aos passos:
<enter>
_Primeiramente, criamos um arquivo com a estrutura básica de HTML:_

```html
<!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <meta charset="UTF-8">
            <title>Titulo</title>
        </head>
        <body>
        </body>
    </html>
```
<enter>
_Dentro do corpo do HTML, criamos uma tag `<img>` da seguinte forma:_

```html
    <img src="http://wttr.in/~Lages+Brazil_tqp0.png">
```
<enter>
Desta maneira acessamos a API que nos retorna uma imagem `.png`, através do link vamos passar alguns parâmetros, são eles:
* Localização - informa o nome da cidade e país;
* t - aplica transparência na imagem;
* q- retira o texto “previsão do tempo” deixando só o nome da cidade e país como título;
* p - adiciona uma borda ao redor da imagem;
* 0 - deixa visível somente o clima no momento atual.

Além destes, existem [outros parâmetros](http://wttr.in/:help) que modificam a imagem.
<enter>
_Por fim adicionamos um `<meta>` tag que atualizará a página em determinado tempo (em segundos):_

```html
    <meta http-equiv="refresh" content="300" />
```
<enter>
_A estrutura final do código fica assim:_
```html
<!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="refresh" content="300" />
            <title>Previsão do tempo</title>
        </head>
        <body>
            <img src="http://wttr.in/~Lages+Brazil_tqp0.png" >
        </body>
    </html>
```
<enter>
_Gerando este resultado:_
![Retângulo contendo informações sobre o clima](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5fa1u8jg5zp0bhw1pn9.png)
<enter>
Com a página pronta, basta adicionar uma fonte de navegador no OBS com o caminho no qual o arquivo HTML foi salvo.
<enter>
Mais informações sobre a API [neste github](https://github.com/chubin/wttr.in).
<enter>
Enjoy!
TIL How to Access Emoji Easily
Tags: productivity, windows, emoticons, todayilearned
Published: 2021-05-11 00:58:00

2021-05-10

It's often hellacious to use multiple communication apps that all have different emoji support. Also sometimes I like to use icons like ✅ and ⚠ in my documents/checklists and often resort to memorization of numpad codes or opening up a browser and copy/pasting from emojipedia (or whichever hit pops up first in my search engine of choice).

Luckily on my Windows 10 OS, I can hit Win key + ; and it pops up an emoji helper that supports search and recently used emoji.

![Emoji keyboard helper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sab8zct4zm40gm8zcpl.png)

Less headache, more expressiveness.
How IT People See System Administrators
Tags: devops, sysadmin
Published: 2021-05-14 08:03:54

---
title: How IT People See System Administrators
published: true
date: 2021-05-11 00:00:00 UTC
tags: devops,sysadmin
canonical_url: https://jhall.io/archive/2021/05/11/how-it-people-see-system-administrators/
---

I just ran across this meme on LinkedIn:

 ![How IT People See Each Other](https://jhall.io/archive/images/how-it-people-see-each-other.jpg)

While there’s a lot that could be disected here, the first thing that jumped out at me was the right-hand column:

 ![How IT People See Sysadmins](https://jhall.io/archive/images/how-it-people-see-sysadmins.jpg)

Apparently _everyone_ hates sys admins.

The sad reality is that this is often true. In fact, it’s the kernel of truth in this joke that lead to the formation of the DevOps movement: the idea that development and operations (including systems administration) should be united in a common goal, not set against each other as adversaries.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._