teleren/devto huggingface dataset:
CrossCopy: Effortless Text Copy Across Devices
Tags: webdev, javascript, react, productivity
Published: 2023-05-23 11:19:17

## Effortlessly transfer text across all your devices with **[CrossCopy](https://cross-copy.vercel.app/)**.

Hey fellow developers! Today, I want to introduce you to [**CrossCopy**](https://cross-copy.vercel.app/), a nifty web app I built using React and Firebase's real-time database. CrossCopy solves the age-old problem of transferring text seamlessly across different devices. It's all about making your life easier and more productive.

With **[CrossCopy](https://cross-copy.vercel.app/)**, you no longer have to resort to manual transfers or send yourself emails to copy text between devices. This sleek web app enables you to copy text on one device and have it instantly available on all your other connected devices. How cool is that?

The magic behind CrossCopy lies in its integration with Firebase's real-time database. As you copy text, it automatically syncs across all your devices, as long as they're in the same url. No more hassle, no more delays. It just works.

CrossCopy works like a charm on any device with a web browser. Whether you're switching between your desktop, smartphone, or tablet, your copied text will always be just a click away. No matter the operating system, CrossCopy has got you covered.

Head over to https://cross-copy.vercel.app to check out the live demo and start enjoying the simplicity and efficiency of CrossCopy.

I made CrossCopy opensource project. So, if anyone wants to checkout the project and contribute [click](https://github.com/sharoonrafeek/cross-copy) here. Also, I would like to hear your feedback.

Contact email: sharoonrafeek@gmail.com
LinkedIn: https://www.linkedin.com/in/sharoonrafeek/

Happy copying with CrossCopy!
Javascript (ES14): with()
Published: 2023-05-23 10:56:24

ECMAScript proposal "Change Array by copy" by Robin Ricard and Ashley Claymore has been merge into ECMAScript standard. This proposal brings a lot of new toys, one of which is new array method: `with()`.

The `with()` method is a new way to modify an array's item:

```
with(index, value): Array  
```

The only difference is that it does not change the original array and returns a changed copy of the original array.

```js
const arr = [1, 2, 3];

arr[1] = 4;

console.log(arr)
// [1, 4, 3] The original array is mutated
```

**with()**
```js
const arr = [1, 2, 3];

console.log(arr.with(1, 4)) 
// [1, 4, 3] Returns a new copy of arr with updated value.

console.log(arr) 
// [1, 2, 3] The original array is not affected
```

For more information, check out the following resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with
[plugin:vite:import-analysis] Failed to resolve import "react/jsx-dev-runtime" from "src/index.tsx". Does the file exist?
Tags: react, vite, errors, note
Published: 2023-05-23 10:49:10

> A problem while migrating from CRA to Vite

---

*Error Message:*
```bash
[plugin:vite:import-analysis] Failed to resolve import "react/jsx-dev-runtime" from "src/index.tsx". Does the file exist?
```

---

*Solution: Add an option `classic` to `jsxRuntime` of the plugin `react` in the vite config file.*

[vite.config.ts]
```javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    jsxRuntime: 'classic' // Add this line
  }), viteTsconfigPaths(), svgrPlugin()],
});
```

---

[@vitejs/plugin-react](
https://www.npmjs.com/package/@vitejs/plugin-react) : By default, the plugin uses the automatic JSX runtime. However, if you encounter any issues, you may opt out using the jsxRuntime option.
Grafonnet Libray with Github Action
Tags: githubhack23, githubactions, github, webdev
Published: 2023-05-23 10:37:45

## What I built: 

Dashboard as a code and Automate it using CI/CD.

### Category Submission:

Wacky Wildcards

### App Link : 
https://github.com/owaisrazi1012/graffonet


## Description:
Grafana as a code refers to the practice of managing and deploying Grafana dashboards, datasources, and alerts using version-controlled code. This approach can help improve productivity in several ways:

### Infrastructure as Code: 
By treating Grafana configurations as code, you can manage them using the same tools and processes as the rest of your infrastructure. This allows for easier automation, reproducibility, and scalability of your Grafana setup.

### Collaboration: 
Version control systems like Git allow for easy collaboration and review of changes to Grafana configurations. This can help improve team productivity by facilitating communication and reducing the risk of errors.

### Deployment automation:
With Grafana as code, you can automate the deployment of changes to your Grafana configurations, reducing the time and effort required to make updates. This can also help improve the reliability and consistency of your deployments.

### Testing:
By treating Grafana configurations as code, you can apply software development best practices to testing, including automated testing and continuous integration. This can help improve the quality and reliability of your Grafana setup.

Overall, adopting Grafana as code can help improve productivity by streamlining workflows, reducing errors, and facilitating collaboration and automation.

### Link to Source Code 

https://github.com/owaisrazi1012/graffonet


### Background

Automation using code approach

### How I built it:

I built whole CI/CD pipeline through github actions and deploy artifactory on jfrog.
申请免费的TLS证书，并自动续期
Tags: tls, ssl, tls证书
Published: 2023-05-23 10:22:05

- **0、你得有个域名**

- **1、执行自动安装脚本**
```
curl  https://get.acme.sh | sh
```
- **2、查看是否安装成功**
  - 查看版本号
    ```
    acme.sh --version
    ```
  - 如果 `-bash: acme.sh: command not found`，执行下面的代码,将命令加入环境变量
    ```
    alias acme.sh=~/.acme.sh/acme.sh
    ```
    > 正常来说这行命令不需要手动执行，执行`curl  https://get.acme.sh | sh`这条命令执行的时候，会自动的执行`alias acme.sh=~/.acme.sh/acme.sh`

  - 检查自动更新证书的cronjob是否已被添加
    ```
    crontab -e 
    ```
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq84d8zdjpkw5942jhcx.png)
    > 如果没有被添加需要手动添加 `14 0 * * * "/home/ec2-user/.acme.sh"/acme.sh --cron --home "/home/ec2-user/.acme.sh" > /dev/null`

- **3、将默认证书改为`letsencrypt`**
```
acme.sh --set-default-ca  --server  letsencrypt
```

- **4、生成证书（这个环节对域名所有权验证有依赖，所以这里生成证书一般分为两种类型：`http`、`dns`；这里采用`dns`的方式）**

> 如果考虑采用`http`的方式，[可以参考这里](https://www.panyanbin.com/article/c44653d8.html)

  
  - 4.1、DNS具体还分两种方式，手动和自动，由于手动无法实现自动续签过期的证书，这里采用自动的方式

  - 4.2、自动的方式需要调用DNS服务商的api，需要 `key` 和 `secret` ; 这里以阿里云为例：
    > 4.2.1、[创建RAM用户](https://ram.console.aliyun.com/users)


    ![新建用户](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqvbduv2od8xnww88rj3.png)
    > 4.2.2、记录 AccessKey ID 和 AccessKey Secret
    > 4.2.3、给生成的用户授权
    ![授权入口](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr4r67mxojpsz7t9u0km.png)
    ![授权内容](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tg6r6czt1d6f46vt61o.png)

  - 4.3、服务器执行以下命令生成证书
```
export Ali_Key="xxxx"
export Ali_Secret="xxx"
acme.sh --issue --dns dns_ali -d *.siquanzhuanxiang.top
```

  - 4.3、打印以下内容表示证书生成成功：
```
-----END CERTIFICATE-----
[Fri Aug 25 12:08:59 CST 2023] Your cert is in: /root/.acme.sh/*.xx.top_ecc/*.xx.top.cer
[Fri Aug 25 12:08:59 CST 2023] Your cert key is in: /root/.acme.sh/*.xx.top_ecc/*.xx.top.key
[Fri Aug 25 12:08:59 CST 2023] The intermediate CA cert is in: /root/.acme.sh/*.xx.top_ecc/ca.cer
[Fri Aug 25 12:08:59 CST 2023] And the full chain certs is there: /root/.acme.sh/*.xx.top_ecc/fullchain.cer
```

---


- **5、安装证书（带自动刷新防止过期）**

  > 是一行命令，该命令会生成证书会放到指定的目录，命令的参数中需要指定域名（要与上面操作中域名保持一致），并且制定证书存放目录;
    5.1、**确保存在目录**`/etc/nginx/tls/`
    5.2、`--reloadcmd "service nginx force-reload"`该参数表示重启Nginx服务，如果Nginx服务尚未安装，请剔除该参数
  
  ```
  acme.sh --install-cert -d *.siquanzhuanxiang.top --key-file /etc/nginx/tls/key.pem --fullchain-file /etc/nginx/tls/fullchain.pem --reloadcmd "service nginx force-reload"
  ```
 
  > 根据web服务器需要的文件按需引入对应的参数，reloadcmd定义证书更新后重启对应的web服务命令。（这里是以Nginx为例）

- **6、Nginx配置文件中引用证书：**
  ```
  ...
server {
  listen       443 ssl;
  ssl_certificate      /etc/nginx/tls/fullchain.pem;
  ssl_certificate_key  /etc/nginx/tls/key.pem;
  # ...
}
  ```
Play a Game of Tetris generated from your GitHub
Tags: githubhack23, nextjs, typescript, react
Published: 2023-05-23 10:07:40

## What I built 

I built a site where you can generate and play Tetris based on your GitHub contribution graph.


### Category Submission: 
- Wacky Wildcards

### App Link
- https://gh-tetris.vercel.app/

### Screenshots 
![Game Select Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igoj4mjob9fnlqaypqjs.png)

![Game Piece Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2q159ldyfzimiexw3kw.png)

![Game screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u70lg86qa15p3icbbsua.png)

### Description 

GH Tetris is a site where you enter your GitHub username, select a year of activity, and then get a playable generated Tetris game from that activity.
&nbsp;

### Link to Source Code 
{% github arndom/github-contribution-tetris %}

### Permissive License 
- MIT

## Background

When this was announced, I had no intention of participating, as time and ideas were scarce. Then one evening while on YT shorts I saw this _ad_ and got instantly reminded of the GitHub Contribution graph:

![Inspiration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skgax9e9uvvwfu5n32no.jpeg)

That changed my mind, and I went down the rabbit hole of planning and building.
&nbsp;

### How I built it

OSS really helped a lot during the build process; initially while thinking about this, I had planned to build it all from the ground up in _Next.js_, but time was the biggest constraint so after some googling and prompt engineering 😉, I found two repositories that were npm packages that helped me a lot:

- [GitHub Contributions Canvas](https://github.com/sallar/github-contributions-canvas)
- [React-tetris](https://github.com/brandly/react-tetris)

So with these two I had a solid starting point which allowed me to build fast. I took bits and pieces coupled with my own logic, custom functionalities and UI to create this application. 

My biggest pain point while building this was that when I got to production, there was a 504 gateway timeout due to the SSR not being properly optimised in the `/[user]` route. Trying to fix that took more time than I'd like to admit...at the end of the day, I went with CSR as a hotfix (will attempt refactoring back to SSR after submission).

I added a base development container to the repo to allow potential contributors to test the repository in Codespaces without having to clone/fork the repo.

### Additional Info (Future plans)
- Mobile responsive
- Sounds 
- And more...

Anyway, I hope you enjoy my [submission](https://gh-tetris.vercel.app/), have a nice day.

![End GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3tf17fy8q2e3c8seq8x.gif)
Scrum Master vs Product Owner
Tags: scrum, agile, software, beginners
Published: 2023-05-23 09:36:25

## Scrum Master:
Scrum master is responsible for solving the problems that arise during the work. The works of scrum master will be of updating everyday charts, scrum boards and make sure that the principles are followed by the team members. Scrum master conducts meetings, regulate workflow and also help the team members to get adapt themselves to the working agile development methodology. 

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

## Product Owner:
A Product owner is one who owns the product. He/she has to look at the product in the customer point of view. The user experience and the problems that the user might face were recognized by the product owner to ensure the right delivery of the project to the customers. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swo3r6r0624ugm3cuwee.png)
A product owner updates the product backlog on everyday 
basis. The Product owner can create the priorities and responsibilities based on the requirement. The team members can also change the priorities based on the situation.
Conditionally style elements in Turbo Frames with Tailwind Css
Tags: hotwire, tailwindcss, rails
Published: 2023-05-23 09:07:52

Part of [Hotwire](https://turbo.hotwired.dev/) are [Turbo Frames](https://turbo.hotwired.dev/handbook/frames). They allow you to insert a page, or just a part of it, into another page. 

I've found this feature quite magical when it was released. 🪄

But it would be useful to apply some Css conditionally, based if the page was viewed standalone or within a turbo frame. 

Previously, and still valid, way to do this was adding a wrapper/container class around the turbo-frame and nested the css within here. 

With Tailwind Css this is easier to do. Let's take the following example from [Helptail](https://helptail.com/) (Spinal's internally developed email support tool for calm SaaS companies):

This is the email composer on a standalone page.

![The standalone page with the email composer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18e1dpps7b9cns52b24m.jpg)

The the same page, but within a turbo frame:

![The email composer shown in a turbo-frame](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ksq13290ys7quanin4q.jpg)

Notice how certain elements are not shown and some things look different. The changes in this example are basic for demonstration purposes, but you can imagine making it look completely different for each variant (similar how you would with the dark-variant).

<insert image>


## How to do this

Set up a new variant in your Tailwind Css' config file, like so:

```js
module.exports = {
// …
  plugins: [
    // …
    function ({ addVariant }) {
      addVariant('turbo-frame', 'turbo-frame[src] &')
    }
  ]
// …
}
```

How it works: `turbo-frame[src]` matches a turbo-frame with any value for the `src` attribute. Check this [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax) article for all the details. And refer to the [Tailwind docs](https://v2.tailwindcss.com/docs/plugins#adding-variants) about the `addVariant` function.

Note: you can change the variant name to something else than `turbo-frame`, like `inside-frame` for example.

You now have the `turbo-frame:`-variant. It can be used in the same way as `md:`, `dark:`, etc. 

```html
<div class="block turbo-frame:hidden">
  <label for="from">From</label>
  <input type="email" name="email" id="email" />
</div>
```

So above `<div>`-element will be visible on the standalone page and be hidden when shown within a turbo-frame. 

And that is all there's to it. You can now create one page that can look completely different from when loaded in a turbo-frame.
What Side Project Are You Working On?
Tags: discuss, sideprojects, networking, programming
Published: 2023-05-23 08:54:29

Hey everyone,

I'm new here and was wondering what kind of projects you're all working on these days? I always find it interesting to see what others are creating and thought it would be a good way to introduce myself and get to know the community.

Feel free to drop a line about your current project, even if it's in the early stages or just an idea. I'd appreciate any details you're willing to share!

Looking forward to your responses. Cheers!
Exam Topics Made Easy: Free Resources to Boost Your Preparation
Tags: examtopicsfree
Published: 2023-05-23 08:42:30

Educational Apps and Mobile Learning Platforms 
 With the rise of mobile literacy, there's a plethora of educational apps available for smartphones and tablets.<a href="https://examtopicsfree.com/">Exam Topics Free</a>  Apps like Quizlet, Duolingo, and Khan Academy offer interactive assignments, flashcards, and quizzes for test motifs, enabling you to study accessibly on the go.

Click Here to Get Free Updates >>>>> https://examtopicsfree.com/ 
 Conclusion 

 penetrating free coffers for test motifs has noway been easier. By using online platforms, OER, educational websites, and other digital coffers, you can equip yourself with the knowledge and chops necessary to exceed in your examinations. <a href="https://examtopicsfree.com/">Exam Topics Free</a>Flash back to explore different sources, customize your study approach, and make the utmost of the wealth of free coffers available. So dive in, start exploring, and take your test medication to the coming position, all without spending a song. 

 In the competitive world of examinations and instruments, the pressure to succeed can lead some individualities to seek lanes. One similar roadway that frequently comes up in online quests is the term" test dumps." This composition aims to exfoliate light on the verity behind test dumps and why counting on them isn't a wise choice for test medication. 

Are exam topics free? | What is the free alternative to Examtopicsfree? | What is the best exam dump site? | What is an exam dump? | Examtopics contributor access free | Examtopics Aws removed| Examtopics contributor access login | Examtopicsfree reddit | Exam Topics Pl-300 | Examtopicsfree contributor access voucher| It Exams | Exam Topics AWS
Ramdom Memes Generator
Tags: githubhack23, react, vite, api
Published: 2023-05-23 08:27:27

## 💻 What I built 
I've built a **"Memes Generator"** web app for the GitHub & Dev Hackathon. It is built using React and Vite, providing users with a fun and interactive platform to generate and customize memes. The application allows users to create meme, add their own captions, and share their creations with others.

### ✨ Category Submission:
Type: `Wacky Wildcards`

### 🔗 App Link
https://memes-generator.pages.dev/

### 🖼 Screenshots 
![Memes Generator App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsywa5redgfbcj1an026.png)

### 📋 Description 
Memes Generator is an web app developed for the GitHub & Dev Hackathon. With the power of React and Vite, the project was made possible. It helps you to create the memes and share it online.

The Memes Generator application provides users with an intuitive and user-friendly interface to generate and customize memes effortlessly.

### 🎨 Link to Source Code 
https://github.com/blank-09/memes-generator/

### Permissive License :
The project is under **MIT Licence**

## Background 
I'm a beginner in React. So I wanted to create something fun with it. So I came across a Memes API in Scrimba. And tried to create it from scratch in GitHub CodeSpaces and GitHub Actions.  I've learnt GitHub Actions from fireship YouTube channel.

### How I built it
I used both GitHub Actions and GitHub Codespaces.

This is my first time working with GitHub Actions and GitHub Codespaces. I think I've learnt something new in this hackathon.

I've used **GitHub Actions** to automatically build and deploy the website. Thanks to **GitHub Codespaces**, I was able to do it quickly and able to share the live preview to others. Codespaces is the best code editor I've ever used for personal and collaboration both.

I was able to learn react in a new way through GitHub Codespaces. 

### Additional Resources/Info
- I've used Bootstrap for UI
- [Memes API]( https://api.imgflip.com/get_memes)
Alternative for azure communication chat?
Tags: community, help, chat
Published: 2023-05-23 08:14:13

---
title: Alternative for azure communication chat?
published: true
description: 
tags: community, help, chat
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-23 08:05 +0000
---

Since **Azure Chat** last version is `2021-09-07`and seems like they not still developing…

Any experience with **Chat services** can we use like `getstream.io`, `rocket.chat` or `any`?

I'm looking for alternatives with a good price.

Base on real-time, JS or backend with .NET

Thanks so much.
SAML Authentication for AWS OpenSearch with Okta and Role mapping
Tags: aws, webdev, devops, cloud
Published: 2023-05-23 08:07:35


We are going to set up <b>IdP-initiated</b> (Okta) SAML authentication for AWS OpenSearch. We will create two Okta groups: <span style="color:#4a6ee0">`"opensearch-admin"`</span> and <span style="color:#4a6ee0">"`opensearch-user`,"</span> and define different roles for OpenSearch.


https://bidhankhatri.com.np/cloud/saml-authentication-for-aws-opensearch-with-okta-and-role-mapping/
ChatGPT Whisper Interview madness
Tags: webdev, programming, chatgpt, ai
Published: 2023-05-23 08:07:28

The landscape for AI is huge! It will change the way we live and take in information. It will change the way we live our day to day lives. For me nothing has changed the landscape like this since the world wide web was given to the public way back when. But it also comes with issues and concerns certainly from me. See the WWW and the modern technology we now use daily has changed the way we live but it also comes with its challenges and issues. It has been abused and is used to cause harm and create havoc with divide across the masses.

So one of the things I have seen recently whilst browsing Twitter is the latest implementation of ChatGPT and Whisper. A bot that listens in on interviews and gives answers back to questions that are given and prompts the user to certain things to say to any given scenario. 

Now as a hiring manager I find this somehow a little disturbing. Allow me to paint a picture if you will, I'm hiring a senior developer and good salary to offer. We have a list of candidates and I interview one and give them a tech test. 

Now they can use ChatGPT to do the test and create code they have never written and during the interview process I maybe able to work this out, but now with the Whisper app they can literally have the same thing that wrote the code give me answers to questions when Im trying to work out if they really knew what they were doing. 

This concerns me somewhat and worries me that the people we are dealing with wont be able to handle the workload, the job and the pressure we put on them. Yet with the new AI tools people can apply and in someways get the jobs they are not qualified to do.

Am I being over cynical or am I write with my concerns? 

Id love to know your thoughts
Change how you perceive slow mornings as a Dev!
Tags: programming, productivity, career, webdev
Published: 2023-05-23 07:34:15

Every morning presents us with an opportunity to seize the day and embrace success. While some mornings may burst forth with boundless energy, propelling us towards our goals, today gifted me with a different pace.

In the tranquility of the morning, I found myself in front of my code editor, resolving a minor issue with a slider display. Though initially, I felt a hesitation to continue, I swiftly reminded myself of the immense potential hidden within this seemingly slow morning.

Instead of succumbing to self-doubt, I chose to shift my perspective. I realized that success is not exclusively reserved for rapid progress or bustling productivity. In fact, even in the quiet moments, success can be found.

With renewed determination, I embraced the unhurried pace and gracefully, as I ease into the day, fully aware that success can be achieved by focusing on one task at a time.

Today serves as a powerful reminder that slow mornings are not synonymous with failure or wasted time. On the contrary, they offer us the chance to savor each moment, to approach our endeavors with mindfulness, and to appreciate the value of progress made, regardless of its speed.

Don't forget to celebrate the beauty of every morning, regardless of its tempo, for within it lies the potential for success. Embrace the tranquility, cherish the progress, and remember that even slow mornings can be extraordinary successes.