teleren/devto huggingface dataset:
One line copy button for the web
Tags: javascript, tutorial, api
Published: 2022-07-29 13:30:25

---
title: One line copy button for the web
published: true
tags: javascript, tutorial, api
canonical_url: https://nickymeuleman.netlify.app/garden/copy-on-the-web
---

TL;DR: The [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is quite good.

The one line: `navigator.clipboard.writeText("potatoes");`

---

Copying something to the clipboard can be done in one line now.
The [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is what powers this.
It has a bunch of asynchronous methods, meaning they return promises.
The promise resolves? Neat, do things afterwards.

This example React component uses the [`writeText`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method to copy a string to the clipboard.

```jsx
import { useState } from "react";

const CopyDemo = () => {
  const text = "Boil em, mash em, stick em in a stew.";
  const [copied, setCopied] = useState(false);
  const copy = async () => {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 1000);
  };
  return (
    <div>
      <p>{text}</p>
      <button onClick={copy}>{copied ? "Copied" : "Copy"}</button>
    </div>
  );
};
```

If you prefer vanilla JS, check out [my copy button codepen](https://codepen.io/NMeuleman/pen/bGRGpdj).

Click the copy button and BAM, Samwise Gamgee's words of wisdom are now in the clipboard.

{% youtube ihMMw0rnKz4 %}

> While writing to the clipboard can always be done in the active tab using the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API), reading the clipboard needs to be permitted.


> As with many modern APIs, `navigator.clipboard` is only available on HTTPS pages.


> Optional chaining (`?.` syntax) can not be used on things like `window` or `navigator`.
I would have liked to use it, to prevent errors when rendering on the server without a `window`, but, alas.

## Browser support

This is available in [all major browsers browsers](https://caniuse.com/mdn-api_clipboard_writetext), except Interner Explorer.

With Microsoft [ending Internet Explorer support](https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666) for some of their own major products.
And planning to deprecate it further in 2021, I'm not worried about Internet Explorer lacking support for the [clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard).

> Update: It's official.
[IE support has ended on June 15, 2022](https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support)

The [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is meant to replace the old way of accessing the clipboard via `document.execCommand()`.
[`execCommand()` is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand), only to be used for compatibility purposes.
Follow Friday: UX/UI Edition (29 July 2022)
Tags: meta, ux, ui, design
Published: 2022-07-29 13:29:30

---
title: Follow Friday: UX/UI Edition (29 July 2022)
published: true
description: 
series: Follow Friday
tags: meta, ux, ui, design
---

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

User experience (UX) and user interface (UI) design is a key consideration when it comes to developing the front end of your app. And it can be a lot of fun, too!

So, devs: who are your favorite DEV community members writing about UX/UI considerations?

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow for UX/UI tips (and letting us know why you love their posts!) ⤵️
VS Code Tip of the Week: The RapidAPI Client Extension
Tags: vscode, vscodeextension, vscodetips
Published: 2022-07-29 13:27:00

This week's tip is coming in a bit late. I had a bit of a busy week. There's another contender for testing and creating APIs. The [RapidAPI Client extension](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client).

> RapidAPI Client is a full-featured HTTP client that lets you test and describes the APIs you build or consume. Designed to work with your VS Code themes, RapidAPI Client makes composing requests, inspecting server responses, generating client code for API calls, and typesafe objects for application development simple and intuitive.

{% embed https://twitter.com/mrahmadawais/status/1552278389075091458 %}

Check out the tutorials and hit the ground running

* [A deep dive into RapidAPI Client for VS Code](https://rapidapi.com/guides/a-deep-dive-into-rapidapi-client-for-vs-code)
* [How to use RapidAPI Client for  VS Code to test APIs](https://rapidapi.com/guides/how-to-use-rapidapi-client-for-vscode-to-test-apis)
* [Generate API call snippets using the RapidAPI Client for VS Code extension](https://rapidapi.com/guides/generate-api-call-snippets-using-rapidapi-vscode-extension)
* [Replace API Clients with VS Code using the Rapid API Extension](https://rapidapi.com/guides/replace-api-clients-with-vscode-using-the-rapidapi-extension)
* [API development in TypeScript using RapidAPI VSCode Client](https://rapidapi.com/guides/api-development-in-typescript-using-rapidapi-vscode-client)
* [Auto generate interfaces from API Response using RapidAPI VSCode Client](https://rapidapi.com/guides/auto-generate-interfaces-from-api-response-using-rapidapi-vscode-client)

I've just installed it so I haven't done too much with it yet, but grab it yourself and let them know what you think about the extension.

Happy VS Coding!
Deployment to GCP App Engine, but angular app not serving Server Side Rendered pages
Published: 2022-07-29 13:23:00

Hi All 

I have an angular app which is working well and serving Server Side Render as per expectation If I remove handlers from app.yml file. If I add handler as mentioned below it doesn't serve SSR.
#angular #node #appengine #app_engine
```
runtime: nodejs16
env: standard
instance_class: F2
inbound_services:
  - warmup
handlers:
  - url: /(.*\.(gif|png|jpg|css|js|ico)(|\.map))$
    redirect_http_response_code: '301'
    static_files: dist/myApp/browser/\1
    upload: dist/myApp/browser/.*
  - url: /(.*\.(gif|png|jpg|css|js|ico)(|\.map))$
    redirect_http_response_code: '301'
    static_files: dist/myApp/server/\1
    upload: dist/myApp/server/.*
  - url: '/((?:assets|docs)/.*|favicon\.ico)'
    redirect_http_response_code: '301'
    static_files: dist/myApp/browser/\1
    upload: dist/myApp/browser/.*
  - url: /(.*)
    redirect_http_response_code: '301'
    static_files: dist/myApp/browser/index.html
    upload: dist/myApp/browser/index\.html
  - url: /(.*)
    static_files: dist/myApp/\1
    upload: dist/myApp/.*
  - url: .*
    script: auto


```

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

Please help me to figure out the issue.

Thanks
Appwrite Community Report #16
Published: 2022-07-29 13:22:19

Hello everyone! Greetings from team Appwrite 👋

Welcome back to yet another weekly community report where we talk about all the open source goodness that happened in the Appwrite ecosystem over the past week! 🤩

**TLDR;** This week we share 0.15.3 updates, issues we’ve fixed and are working on, new announcements for our community discord and some resources to end with.

---

## 📢  What’s new 

- 0.15.3 is out now! What do you think about it? 
Join our [community discord](appwrite.io/discord) to stay updated on releases, support and some fun.
- We just announced the third project for the OSS Fund - {% embed https://twitter.com/appwrite/status/1551583114715078659?s=20&t=WLYXLjY1Sz4XfsX4RMXLJA %}

If you are a maintainer or know a maintainer who would love some support, tell them about the [Appwrite OSS Fund](https://appwrite.io/oss-fund)

---

## ✅ Issues solved

This week we had the 0.15.3 release, here’s what we fixed 🛠️:

- Added hint during Installation for DNS Configuration
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/2450)

- Fixed Migration for Attributes and Indexes 
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3568)
- Fixed Closed Icon in the alerts to be centered 
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3594)
- Fixed Response Model for Get and Update Database Endpoint by community member [Ishan Vyas](https://github.com/ishanvyas22) 
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3553)
- Fixed Missing Usage on Functions execution by 
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3543)
- Fixed Validation for Permissions to only accept a maximum of 100 permissions for all endpoints 
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3532)
- Fixed backwards compatibility for Create Email Session Endpoint
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3517)

---

## ⚒️ What we’re currently working on

- Fixing user search by phone number
- Update SDK generators to the latest version
- Upgrade Mariadb and Redis
- Introduction of Loot V2 for the community discord

---

## 🗣 Discussions
Let’s talk about Appwrite’s permissions once more
🔗[Join the discussion here](https://github.com/appwrite/appwrite/discussions/3612)

---

## 📘 Resources

- Learn about [Webhook Security in Appwrite](https://dev.to/appwrite/level-up-your-webhook-security-with-appwrite-015-50mo)
- Get started with Phone Authentication using Appwrite and Twilio
{% embed https://dev.to/appwrite/appwrite-phone-authentication-with-flutter-3jii %}
- Creating a [custom Svelte store with Appwrite and Caching]
(https://dev.to/appwrite/custom-svelte-store-with-appwrite-and-caching-1m6d)
- Take up the 30 days learning challenge to get started with Appwrite
{% embed https://30days.appwrite.io/ %}
SSH - A web developer should know...
Tags: javascript, beginners, webdev
Published: 2022-07-29 12:59:00

_**SSH stands for secure shell protocol.**_

Just like modern web browsers uses https/ http protocol to communicate with servers, 
SSH allows to establish secure communication between systems or two computers, remotely access another computer, clone or pull/push files from GitHub servers and much more.


**Let's deep dive more and see how it works?**

_SSH breaks data into series of package and encrypts the data before transmitting._

The SSH command consists of 3 distinct parts for Mac and Linux users -
`ssh {user}@{host}`

Here, **{user}** represents the account you want to access like as your system **root** user.
**{host}** refers to the computer or system you want to access. It can be an IP Address (e.g. 244.235.23.19) or a domain name (e.g. www.xyzdomain.com).


**Understanding three encryption techniques of SSH**

1. Symmetrical encryption
2. Asymmetrical encryption
3. Hashing.


- Symmetrical encryption - It uses two separated keys to communicate between the systems.

- Asymmetrical encryption - It uses public keys, private integrated keys for communicating between the systems
and also uses key exchange algorithm - Difiie Hellman key exchange algorithm.

- Hashing - Hashing is a technique of transforming a key or string to another value to enhance the security.


**What a web developer has to do with it??**

Every developer works on any cloud platform and uses tools like Github to host their code. When we are asked to Fork or Clone a Github repository to our account or our local drive, Github comes with two options i.e. HTTPS or SSH.

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

Here, we can create an SSH key for our system using ssh-key-gen and add it to our Github account.
What are the challenges of hiring remote developer teams?
Tags: webdev, devops, team
Published: 2022-07-29 12:56:04

Hi guys!

I'm new here. So, I've been into tech industry for a while but since I've other priorities and can't manage 9-5 working hours nor can set up an office since I'm at an early stage. However, I know that remotely it's comparatively easier to make a team functional specially in my case.

Any kind of guidance would be appreciated!
7 browser extensions for web developers
Tags: programming, productivity, webdev, beginners
Published: 2022-07-29 12:34:00

Here are some incredible finds that I’ve wanted for so long to share with you. 

Work great with Chrome and other browsers to.

> ## Before that I like to recommend you theSkimify.com


![theSkimify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y21bv817wjppavz64uov.png)

## [Subscribe now for free](https://theskimify.com)

---

### Wappalyzer

It’s a technology profiler that shows you what websites are built with. Find out any framework, ecommerce platform, javascript library and many more.



### Window Resizer

It’s an extension that re-sizes the browser’s window in order to test different layouts on browser revolutions. It also features many more things.

### CSSViewer

It’s a simple CSS property viewer. To enable it, simply click the toolbar icon and then hover any element on you want to inspect in curent page.

### Checkbot
 
It’s a powerful website tester that tells you how to improve the SEO, pagge speed and security of your website. Its operation speed is so high!

### JSON Viewer 

It’s the most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen. It's also open-source,so check it out!

### Check My Links 

It’s an extension that quickly finds all the links on a web page, and checks each one for you. It highlights which ones are valid and broken, simple as that.

### Web Developer 

It’s a very useful extension that adds a toolbar button to the browser with Various web developer tools. The number of features is insane!

If you've reached this point, here is a free gift from me - [Designer Kit](https://kit.theskimify.com)
Early Access for Highly-Secure, Tamperproof Audit Trail
Published: 2022-07-29 12:46:00

*Calling all app developers who like to check out early-stage products.* 

At Pangea, we've made our cloud-based, tamperproof audit logging implementation available for [early access](https://pangea.cloud/signup/), and we're looking for feedback from developers that love to try new things.

Our Secure Audit Logs provide a scalable backend and performant search to satisfy even the lengthiest of data retention requirements without the infrastructure overhead. Built-in redaction helps prevent unnecessary storage of sensitive data, and our unique tamperproofing capability provides cryptographically verifiable evidence that your logs are intact and unmodified. 

The audit trail log implementation is very lightweight, with an API interface and Node, Python, and Golang SDKs for easy integration.  (see REST API example below). 

```
curl -sSLX POST 'https://audit.aws.us.pangea.cloud/v1/log' \
-H 'Authorization: Bearer pts_ibop3t2cfg4uyrhxjvmtifnnjyrro3ng' \
-H 'Content-Type: application/json' \
-H 'X-Pangea-Audit-Config-ID: pci_yymrsmnpeuiozm7b2abeuhtpt76lxh4r' \
-d '{"event":{"message":"user123 deleted file hello.world","actor":"user123","action":"delete"}}'
```

If this has you excited, join our [early access program] (https://pangea.cloud/signup/) and help shape the future of our offering. Not quite there yet? Learn more about tamperproof audit logs in our [blog] (https://pangea.cloud/docs/blog/a-tamperproof-logging-implementation/), and find out about the genesis of Pangea in a [message from our founder] (https://pangea.cloud/docs/blog/pangea-uniting-security-for-builders/).

For any other questions contact me directly (email:rob@pangea.cloud, twitter:@RobTruesdell).
Electron— A Complete Guide for building windows executable
Tags: electron, javascript, webdev, programming
Published: 2022-07-29 12:19:18


Wanna learn how to generate a build for the windows [desktop](https://blog.canopas.com/generate-distributable-of-the-electron-app-and-set-the-custom-app-icon-2bfc088b1e30) app using electron.js and electron-builder?

We will build the app using electron-builder and [vue](https://blog.canopas.com/vue-3-lifecycle-hooks-with-real-time-example-1b772b89e085)-cli-plugin-electron-builder and will [package](https://blog.canopas.com/custom-php-runtime-layer-in-aws-lambda-functions-fee0e71c7097) it with electron-windows-store.

I have used Vue.js inside the electron.js app for creating an app. You can do the same config with whichever framework you have used.

What you will learn today?
 
Steps for building a Windows app.

Install dependencies
Prepare images
Add app configs
Generate build
Packaging app to publish it on the Microsoft store

Building a windows app using electron-builder is easy, except for the packaging and code signing process by the windows store.

You can also configure the build on CI/CD to automate the building process. That way, whenever you perform any changes in your existing code, the build will be generated automatically and will also be uploaded to the store.

You can more read on [blog.canopas.com](https://blog.canopas.com/electron-a-complete-guide-for-building-windows-executable-a2cca8b52e00)
Install WHM on AlmaLinux OS
Published: 2022-07-29 12:05:00

**Step 1) OS Installation** 

Use "AlmaLinux-8.6-x86_64-minimal.iso" (minimal) OS version.

During the installation of AlmaLinux, make sure to setup following:

https://drive.google.com/file/d/15--Ro7lq0h9j4jYv4Imez3ClDutV-_CM/view

**1) Installation Destination**
During setup it will ask to "Reclaim space", make sure to confirm it. You delete all old disk if not needed.

**2) Newwork Setup**
2.1) Configure the Static IP of your server and turn on the Ethernet
2.2) Change the host name and click apply

**3) Setup Root Password**

And Click "Begin Installation"

After installation reboot the server.

**Step 2) Update and Setup SSH**

Login to your server using root username and password. 

Run following command to update the OS:
```
sudo dnf update
```

Setup SSH
```
sudo dnf install openssh-server openssh-clients
```

Now, you should be able to connect with your server via SSH.

**Step 2) Install CPanel**

Run following commands:
```
iptables-save > ~/firewall.rules
systemctl stop firewalld.service
systemctl disable firewalld.service

sudo dnf -y install perl
sudo dnf -y install curl
```

Install CPanel from following command:
```
cd /home && curl -o latest -L https://securedownloads.cpanel.net/latest && sh latest
```

Once this installation is complete. You should be able to visit following url:

```
https://PUBLIC-IP:2087
```

And can login using root username & password.
JavaScript DOM
Tags: javascript, programming, beginners
Published: 2022-07-29 12:04:00

## **Introduction**
JavaScript DOM(Document Object Model) is essential part of web development. DOM is a platform that allows programs and script to dynamically access and content , style and structure of a document.
There are three different parts of DOM -
a. Core DOM - Document type
b. XML DOM - XML Documents
c. HTML DOM - HTML documents
In these case we will discuss about HTML DOM.

1) document.getElementById: 
Select element using get element by Id .

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

2) document.querySelector :
select element using query selector.

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

3) document.getElementByTagName: 
Select element by tag name .

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

4) document.getElementByClassName:
Get multiple elements using getElements by class name.

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

5) document.querySelectorAll:
Get multiple elements items using querySelectorAll. 

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

## **Event listeners in DOM**
The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object.

1. click event ()

The onclick event occurs when the user clicks on an element.

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

addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.


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

when user click on change color button the body background will automatically change and the color of text will change also.

## Example: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzxvf9t08m2t4ph1rbm7.png)
Is it good to hire remote teams in 2022 ? Any good companies from where I can grab a team ?
Tags: remotejobs
Published: 2022-07-29 11:56:46

So I am deciding to work on a product startup like food review system based social media app, you may call it a modified of yelp (P.s its not their advertisement just using the name to explain the idea better) but in countries where yelp isn't much functional
with a unique business logic as compared to theirs. But I am thinking of having contract based remote teams to work on my product.