teleren/devto huggingface dataset:
JavaScript paste text from the clipboard
Tags: javascript, beginners
Published: 2022-01-30 10:28:29


I've made several articles on copying text to the clipboard in JavaScript with the [Clipboard API](https://daily-dev-tips.com/posts/vanilla-javascript-copy-text-to-clipboard-with-clipboard-api/), or [execCommand](https://daily-dev-tips.com/posts/vanilla-javascript-copy-text-to-clipboard-with-document.execcommand/).

But we never looked at how we could paste information from the clipboard with the click of a button.

Someone recently asked me how to do this on Twitter, so here you go, a dedicated article to pasting text in your clipboard.

## JavaScript paste text from the clipboard

The main issue with this feature is that we need permission from the browser the read this data.

So on the very first try, the user will be prompted with a popup like this.

![Read clipboard permissions](https://cdn.hashnode.com/res/hashnode/image/upload/v1642745993999/As4LqH_4S.png)

Let's take our existing clipboard demo and make the paste field interact.

In our demo, you should be able to click the top text area, which will copy the text to the clipboard.

Once the user clicks the bottom field, it should auto-paste it.

We'll first need to assign this field to a variable and attach a click handler.

```js
const paste = document.getElementById('paste');
paste.addEventListener('click', () => {
  // Do our action
});
```

Our actual paste action is super simple and looks like this:

```js
navigator.clipboard.readText().then((clipText) => (paste.innerText = clipText));
```

We use the clipboard API and invoke the `readText` function. It will give us the current value, which we can set on our paste field.

You can try this out on the following CodePen.

{% codepen https://codepen.io/rebelchris/pen/XWeLzMG %}

## Browser support for Clipboard API

The support for the Clipboard API improved massively over the past couple of months, and all latest versions seem to support it fully.

<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/static/v1/mdn-api__Clipboard-1642746361576.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/static/v1/mdn-api__Clipboard-1642746361576.png">
<img src="https://caniuse.bitsofco.de/static/v1/mdn-api__Clipboard-1642746361576.jpg" alt="Data on support for the mdn-api__Clipboard feature across the major browsers from caniuse.com">
</picture>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
til: SSH Connexion troubleshooting
Tags: git, ssh, todayilearned
Published: 2022-01-30 10:21:51


A few weeks ago several developers on our team were unable to connect to our Gitlab instance using the SSH protocol.
Their `git` commands kept asking for password with no apparent error.

It was a bit strange because nothing had changed in their setup (or at least, that's what they thought). Most of them recreated their ssh keys, which seemed to correct the problem, and we all moved on - it seemed a PEBKAC[^1] issue.

I didn't gave it much thought until it happened to me too 😅.

The [gitlab documentation][1] offers a path forward:

```bash
# Options -T to Disable pseudo-tty allocation.
# Options -v to set verbose mode. Multiple -v options increase the verbosity.  
# The maximum is 3.
ssh -Tv git@example.com

# ouput
debug1: Next authentication method: publickey
debug1: Offering public key: /home/user/.ssh/id_rsa RSA ... agent
debug1: send_pubkey_test: no mutual signature algorithm
debug1: No more authentication methods to try.
```

The `no mutual signature algorithm` when offering my public `ìd_rsa` indicates that `ssh-rsa` is not enabled.

For me this happened after updating my Git version, and after digging a bit I found out that Git updated its OpenSSH version to 8.8 since [version 2.33.1][git]. Furthermore, reading [OpenSSH 8.8 release notes][openssh] I found the root
cause (_emphasis mine_):

> This release disables RSA signatures using the SHA-1 hash algorithm by default. [...]
>
> For most users, this change should be invisible and there is no need to replace ssh-rsa keys. [...]
>
> _Incompatibility is more likely when connecting to older SSH implementations that have not been upgraded
> or have not closely tracked improvements in the SSH protocol.
> For these cases, it may be necessary to selectively re-enable RSA/SHA1 to allow connection and/or user
> authentication via the HostkeyAlgorithms and PubkeyAcceptedAlgorithms options_.

This seems to be exactly my case, as I was interacting with a server using OpenSSH `6.x`. 

Two solutions are offered. Either generate a new key using a more robust algorithm[^2] (which I did)

```bash
$ ssh-keygen -t ed25519 -C "your_email@example.com"
```

or re-enable `RSA SHA-1` support on the affected ssh client (**not recommended**)

```bash
#In ~/.ssh/config
PubkeyAcceptedAlgorithms +ssh-rsa
```

So while, the solution was actually the same as other teams members, i'm glad i actually understood the _why_.

#### Some References:

- Troubleshooting
  Git [on BitBucket support page](https://confluence.atlassian.com/bitbucketserverkb/ssh-rsa-key-rejected-with-message-no-mutual-signature-algorithm-1026057701.html)
- Github article
  on [improving git protocol security](https://github.blog/2021-09-01-improving-git-protocol-security-github/)

[^1]: _Problem Exists Between Keyboard And Chair_
[^2]: Gitlab/Github recommend [ED25519 keys](https://docs.gitlab.com/ee/ssh/#ed25519-ssh-keys)

[1]: https://docs.gitlab.com/ee/ssh/#password-prompt-with-git-clone
[git]: https://github.com/git-for-windows/git/releases/tag/v2.33.1.windows.1
[openssh]: https://www.openssh.com/txt/release-8.8
Host Multiple WordPress Websites on one Server.
Tags: digitalocean
Published: 2022-01-30 10:02:26

**Pre-requirements:**

- Digital Ocean Account
- AA Panel
- Nameserver Management


Step 1: Create a Digital Ocean Account.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpnihcrgilppjnbia0eg.png)

Step 2: Make a Basic Droplet With Ubuntu OS (cost 5$/month).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kswgkpmnnjbuvf9fs1zh.png)

Step 3: Login into Droplet Console.

Step 4: Install AA panel in the Droplet (Ubuntu)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8p1i79vlce4amxymht5.png)
Click Here for [AAPanel](https://www.aapanel.com/index.html)

Step 5: Save the URL and Login Credentials of AApanel that you got after installation done in console.

Step 6: Visit the URL open AApanel console and login with Credential

Step 7: After Login choose NGINX server and install the basic files like MySQL, php (7.1 is better)

Step 8: Add Website using their domain name/subdomain name
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbo6tpx2fcdu712ip6yp.png)

Step 9: Go to your domain Name provider add A record and target it to the Droplet ipv4 address.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi5m5gi8p2k0mk684cdb.png)



Your hosted site will be ready within an hour. A welcome page shown to the particular Domain name what you add in your AA panel.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpn90idukesj56kr0b6v.png)
Javascript IIFE
Tags: javascript, 100daysofjs
Published: 2022-01-30 09:57:48

---
title: Javascript IIFE
published: true
description: Menjalankan fungsi async secara langsung mengunakan IIFE.
tags: ["javascript","100daysofjs"]
//cover_image: https://direct_url_to_image.jpg
---
IIFE (Immediately Invoked Function Expression) merupakan sebuah terminologi ketika anda ingin mengeksekusi sebuah function secepatnya setelah didefinisikan. Hal tersebut dapat membuat kode lebih bersih, misalnya ketika melakukan *debugging* pada Async/Promise based function.

Pada skenario dibawah ini saya akan mensimulasikan sebuah function yang melakukan request ke API server.

```js
const data = (number) =>
  new Promise((resolve, reject) => {
    if (number === 200) resolve("200 OK");
    else reject("400 Bad Request");
  });
```
Dibelakang layar apabila fungsi dipanggil dan *number* memiliki argumen bernilai 200, object tersebut akan mendapatkan state *resolve*. Jika *number* berisi selain 200 maka akan mendapatkan state *reject*.

Kemudian kita akan memanggil function tersebut dengan cara pemanggilan pada umumnya.

```js
const fetchData = async () => {
  try {
    const response = await data(200);
    console.log(response);
  } catch (err) {
    console.error(err);
  }
};

fetchData();
```

Terlihat setelah kita menginisialisasikan *fetchData* kemudian kita memanggilnya dengan menggunakan *parentheses*.

Dengan mengunakan IIFE anda hanya memerlukan *double-parentheses* ()(). Parentheses pertama diinterpretasikan sebagai *expressions* dan yang kedua sebagai function call.
Berikut contoh kode yang digunakan untuk mengkonsumsi API dari server menggunakan metode IIFE.
```js
(async () => {
  try {
    const response = await data(200);
    console.log(response);
  } catch (err) {
    console.error(err);
  }
})();
```
Output:
`200 OK`

Referensi:
[MDN - IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
YAGNI - News
Tags: discuss, personal, improvement, growth
Published: 2022-01-30 09:54:53

---
title: YAGNI - News
published: true
description: What if you stopped watching TV?
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/porh2z5ndgbtw9hnwut7.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/yagni-news/)._

What if you stopped watching TV? 

More specifically 'news' on the TV. I don't have anything against an occasional movie or a show (hell, I do it myself), but I don't think watching TV news is the best time investment one could make ('world' news on the Internet fall in the same category).

I heard a cool abbreviation for CNN the other day: Constantly Negative News. IMHO, this goes for almost any other channel, be it red or blue or whatever 'color'. 

**If the world was ending, you'd probably learn that from your neighbor.**

What if, instead, you spend that time reading the news from your particular field or industry, or what if you watch an educational documentary? See which one brings you more benefit on the long run.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Copy VEGAS Pro presets, etc. to another PC
Published: 2022-01-29 15:37:11

Hello everybody.
This is an English translation and modification of the article ([link](https://bigbamboo-jp.hatenablog.com/entry/vpcbt-introduction)) posted in Japanese in advance.
## Introduction
I recently changed my main PC.
I install the software that I always use on the new PC, but some of them need to be migrated.
Chrome and Microsoft Office are linked to the account, so they do it automatically, but for software that does not, you have to export and import the settings yourself.
When I was doing such work leisurely while fighting drowsiness, I realized that it was not straightforward to migrate the settings of the video editing software VEGAS Pro.
Normally, software for creators such as video editing software has a menu for migrating settings, but only VEGAS Pro did not find such a menu.
I had no choice but to ask Google Sensei and he told me to download "Preset Manager 2.0".
However, the software has already been officially distributed, and I had to download it from an unofficial archive site.
At that time, I was already sick, so I just checked for viruses and installed the software from that installer.
**\* Good boys should not download programs from suspicious sites.**
And I used that software to migrate the data, but the only migrated setting was the event FX filter his package.
However, there is no other tool that could be used, so I had no choice but to spend about an hour manually migrating the settings.
This time, the migration was completed, but I don't want to struggle with the same thing a few years later, so I decided to put together the work required to migrate the settings in the program.
## Main subject
So, this time, I would like to introduce you to [VEGAS Pro Configuration Backup Tools](https://github.com/bigbamboo-jp/vegas-pro-cbt).
With this free software, you can back up and restore the effect settings of VEGAS Pro.
The backup targets are "Filter package of each event FX", "Media generator preset", and "Rendering template".
### How to use
\* You must agree to [the license (MIT License)](https://github.com/bigbamboo-jp/vegas-pro-cbt/blob/main/LICENSE) to use the program.
1. Download the ZIP file containing the latest program
Download the latest release of "Source code (zip)" on [this page](https://github.com/bigbamboo-jp/vegas-pro-cbt/releases).

2. Extract the ZIP file
Right-click the downloaded ZIP file and click "Extract All" to display the extraction wizard.
3. Find the folder of the item you want to back up from the extracted folders
#### Reference
Filter package of each event FX → Event FX
Media generator preset → OFX Presets
Rendering template → Render Templates
4. Execute "save.bat" in the folder of the item you want to back up (operate at the migration source)
5. Execute the backup file (operate at the migration destination)
\* It is necessary to copy the backup file to the migration destination using a USB memory or the like.

### Important point
1. Not all settings will be migrated (eg event pan / crop presets will not be migrated).

2. Use this program at your own risk.
Why Many Web Developers Are Obsessed With CSS-Only Things?
Tags: discuss, webdev, watercooler
Published: 2022-01-30 09:34:56

I have seen so many CSS-only things, and it's seems so many web developers who like it so much. I know JavaScript can be disabled, but people who do it only 2% from internet population. Even if our visitors disable JavaScript, we can simply put a `<noscript>` that tell user to turn on their JavaScript. CSS-only file-size things also usually 2-3x or more larger than same thing that code in JavaScript.  

I don't know why, maybe anyone can explain?
JavaScript RPG Game Development | Episode 3: NPCs and Dialogs
Tags: rpgjs, html, javascript
Published: 2022-01-30 09:20:57

---
title: JavaScript RPG Game Development | Episode 3: NPCs and Dialogs
published: true
description: Moving on to episode 3 we add our first NPC our main character can talk to.
tags: rpgjs, html, javascript
canonical_url: https://www.timo-ernst.net/blog/2022/01/30/lets-code-a-final-fantasy-style-browser-game-with-rpg-js-add-npcs-dialogs-and-events-episode-3
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gsecsuij49texmkvsba.jpg
---

Moving on to episode 3 we add our first NPC the main character can talk to.

If you're new to this series, make sure to check out episode 1 first: https://youtu.be/W4SVdtY6wZs

**Question for you:** Have you started creating your own RPG yet? How's the progress? Let me know in the comments section! :-)

## Tutorial Video

{% youtube fzHTHFpszMg %}

## Links

- My source code: http://github.com/valnub/jrpg
- rpg.js http://rpgjs.dev
- Free 16x16px spriteset (maps + chars) https://opengameart.org/content/tiny-16-basic
- My Blog https://www.timo-ernst.net
- Twitter https://www.twitter.com/timo_ernst
Vite.js, Sevelte.js, and Windi CSS: The Perfect Combo for My Web Dev
Tags: vite, svelte, windicss, webdev
Published: 2022-01-30 08:44:40

## Why

Vite is fast.

Svelte is elegant.

Windi CSS is easier to install than Tailwind on Vite-Svelte.
And you should read this before you choose: https://github.com/windicss/windicss/discussions/176

## Preparation

I strongly recommend pnpm as it is much faster and saves spaces on disks. If you haven't installed it, run:
```
npm i -g pnpm
```

## Get started

First, create new `vite` project using:
```
pnpm create vite
```
Then choose `svelte` in the interactive CLI dialog.

Then:
```
cd projectFolder
pnpm i
pnpm i -D vite-plugin-windicss windicss
```
Then in `vite.config.js`:
```
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import WindiCSS from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export default {
  plugins: [
    WindiCSS(),
    svelte()
  ],
}
```
In `main.js`:
```
import 'virtual:windi.css'
```

Done!
```
pnpm dev
pnpm build
```
React Native Firestore: Real-time update with custom hook
Tags: reactnative, firebase, typescript, javascript
Published: 2022-01-30 08:23:00

Supposed that we want to observe real-time changes of a particular Firestore document, we could implement the logic in a custom hook and reuse the logic across many components:  

```typescript
export function useUserInfo() {
  const [user, setUser] = useState<User | undefined>();

  useEffect(() => {
    const unsubscribe = subscribeFirestoreUser();
    return () => unsubscribe();
  }, []);

  const subscribeFirestoreUser = () => {
    const subscriber = firestore()
      .collection(FIRESTORE_COLLECTIONS.USER)
      .doc(userId) // an example id here
      .onSnapshot(documentSnapshot => {
        setUser(documentSnapshot.data() as User);
      });
    return subscriber;
  };

  return {
    user,
  };
}
```


To use the user information in other components: 

```typescript
export default function HomePage() {
  
  const { user } = useUserInfo();
  
  return <Text>{user.name}</Text>;
}

```
ReactJS - Disable console.log() in production and staging
Tags: react, javascript, beginners, tutorial
Published: 2022-01-30 08:01:10

Husky hooks are a really good way to prevent someone from pushing accidental console logs to a production ready build or staging environment, but still if you decided to remove the usages of `console.logs()` from your build add this global function to your JS codebase.

> `remove-consoles.js`

```javascript
export const GlobalDebug = (function () {
  var savedConsole = console;
  /**
  * @param {boolean} debugOn
  * @param {boolean} suppressAll
  */
  return function (debugOn, suppressAll) {
    var suppress = suppressAll || false;
    if (debugOn === false) {
      // supress the default console functionality
      console = {};
      console.log = function () {};
      // supress all type of consoles
      if (suppress) {
        console.info = function () {};
        console.warn = function () {};
        console.error = function () {};
      } else {
        console.info = savedConsole.info;
        console.warn = savedConsole.warn;
        console.error = savedConsole.error;
      }
    } else {
      console = savedConsole;
    }
  };
})();
```

Use this function at the root of your project or in any file you want to.

> `App.js`

```javascript
import React, { Suspense, useEffect } from "react";
import { GlobalDebug } from "utils/remove-console";

function App() {
  /**
   * @REMOVE_CONSOLES
   * // remove the working of console logs
   * // remove any accidental use of console logs
   */
  useEffect(() => {
    (process.env.NODE_ENV === "production" ||
     process.env.REACT_APP_ENV === "STAGING") &&
      GlobalDebug(false);
  }, []);

  console.log("I am just another dummy console log, 
   suppose to be suppressed 🙂");

  return (
    <Suspense fallback={<h3>Loading...</h3>}>
      <YourComponentsHere />
    </Suspense>
  );
}

export default App;
```

> ⚠ Will update this blog with - how to set multiple enviornments in ReactJS [development, staging, production][through `.env` files]

Hope you enjoyed reading, make that heart read color in top left corner if you liked this post. 🍻
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-01-30 08:00:02

---
title: "A Quick 10-Second Programming Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12588c48015.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

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

<!--
Joke text:
```
[Please Enter New Password]

fortnight

[Error: Password is Two Week]
```
 -->
login user validation using volder
Tags: javascript, programming, beginners, tutorial
Published: 2022-01-30 07:52:55

you can use javascript with power of volder to do validation
volder is schema builder and data validation
visit [volder.vercel.app](https://volder.vercel.app) to see more
you can do in this example.

```js
import { Volder, Email } from 'volder';


const userSchema = new Volder({
    username: {
        type: [String, 'username must be in string'],
        alphanumeric: [true, 'username should only contain letters and numbers'],
        minLength: [4, 'username at least 4 characters'],
        maxLength: [16, 'username at most 16 characters'],
        required: [true, 'username is required'],
        trim: true
    },
    email: {
        type: [String ,'email must be in string'],
        pattern: [Email, 'not valid email'],
        maxLength: [150, 'email be at most 150 characters'],
        required: [ true,'email is required'],
        trim: true
    },
    password: {
        type: [String , 'password must be in string'],
        minLength:[8, 'password should be at least 8 characters'],
        maxLength: [30, 'password should be at most 30 characters'],
        required: [ true, 'password is required'],
        matches: ["^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]$", 'password must contain numbers and letters']
        
    }
})

const { valid, errors, value } = userSchema.validate(input);
```
What is token economy?
Tags: web3, blockchain, tokeneconomy, cryptocurrency
Published: 2022-01-30 07:46:07

Token economy means studying the production, distribution and consumption of goods and services that have been tokenized. Web3 enables tokenized economic interactions without intermediaries. 

It provides a unique set of data, a universal state layer, also referred to as the **ledger**, which is collectively managed by a network of **untrusted computers**. This unique state layer allows us to **send digital values in the form of tokens entirely peer to peer**, circumventing the double-spending problem(Double-spending is a potential flaw in a digital cash scheme in which the same single digital token can be spent more than once). Sending digital values over the web has therefore become as cheap and easy as sending an email. 

Tokens can be as revolutionary as World wide web. 

![Tokens](https://bsmedia.business-standard.com/_media/bs/img/article/2021-04/08/full/1617824383-1486.jpg)

“Cryptographic asset” would be a more generic term that we could use for certain types of tokens instead of cryptocurrency. The term “token” however, is even more generic and encompasses all tokens, not just asset tokens.

You will get to read more about tokens and lets  make it a series where we will dive deep in tokens and token economy.

I am keeping this blog short and ending it here.

Hope readers will love it, and thank you so much for reading...

Please write in comments, what do you think about token economy, so that we can learn more about it together...