teleren/devto huggingface dataset:
What's FPS Appropriate for React-Native?
Published: 2023-02-06 08:48:16

There's no one specific FPS that's considered appropriate for all React Native applications, as the ideal FPS depends on the particular requirements and characteristics of each app. However, as a general guideline, a frame rate of 60 FPS is considered smooth and fluid and a commonly used target for high-performance applications.

In some cases, a lower frame rate is acceptable, for simple or less-intensive applications. In contrast, in others, a higher frame rate may be necessary to achieve a certain level of visual quality or to support certain types of interactions.

Ultimately, the appropriate FPS for a React Native application depends on factors such as the desired user experience, the hardware and software capabilities of the target devices, and the specific performance requirements of the app
Monitor k8s with Loki, Prometheus and Grafana
Published: 2023-02-06 08:33:03

Bismillah...

We will learn how to monitor Kubernetes using Loki, Prometheus, and Grafana using existing helm packages.

I found two helm packages which are very useful.

First, let's install the helm package for Prometheus:

```shell
helm repo add prometheus-community https://prometheus-community.github.io/helm-charts
helm repo update
helm install monitoring-stack prometheus-community/kube-prometheus-stack -n monitoring
```

Next, let's install the helm package for Loki:

```shell
helm upgrade --install loki grafana/loki-stack --set fluent-bit.enabled=true,promtail.enabled=false -n monitoring
```

To access Grafana locally, run the following command:

```shell
kubectl port-forward svc/monitoring-stack-grafana 8080:80 -n monitoring
```

You can now access Grafana by opening [localhost:8080](http://localhost:8080) in your browser. Login with the following credentials:
- Username: admin
- Password: prom-operator

Next, let's configure Loki as a datasource in Grafana. Follow these steps:
1. Go to the Grafana dashboard.
2. Click on "Configuration" in the side menu.
3. Click on "Data Sources".
4. Click on "Add data source".
5. Set the following configurations:
   - Name: Loki
   - Type: Loki
   - URL: http://loki:3100
   - Save & Test

That's it! You have successfully set up monitoring for Kubernetes using Loki, Prometheus, and Grafana.

Enjoy monitoring your Kubernetes cluster!

Sources:
- [Prometheus Helm Package](https://artifacthub.io/packages/helm/prometheus-community/kube-prometheus-stack#configuration)
- [Loki Helm Package](https://artifacthub.io/packages/helm/grafana/loki-stack)
Terraform module to create an amazon MSK / apache kafka cluster.
Published: 2023-02-06 08:30:13

This is a terraform module to set up an amazon MSK / apache kafka cluster.

[Terraform registry](https://registry.terraform.io/modules/leroykayanda/MSK/aws/latest?tab=outputs)

```
    module "amazon_msk_cluster" {
      source                      = "leroykayanda/MSK/aws"
      version                     = "1.0.1"
      microservice_name           = var.microservice_name
      env                         = var.env
      team                        = var.team
      kafka_client_subnets        = var.kafka_client_subnets
      broker_ebs_volume_size      = var.broker_ebs_volume_size
      broker_instance_type        = var.broker_instance_type
      kafka_version               = var.kafka_version
      number_of_broker_nodes      = var.number_of_broker_nodes
      kafka_enhanced_monitoring   = var.kafka_enhanced_monitoring
      kafka_logs_retention_period = var.kafka_logs_retention_period
      security_group_id           = aws_security_group.kafka_sg.id
      public_access               = var.kafka_public_access
    }
```
The Confidential Data You Recently Deleted Is Still There and It Is at Risk of Being Leaked
Tags: security, linux, shred, privacy
Published: 2023-02-06 08:21:35

Regular file deletion is not enough to protect confidential information.

Hitting the "delete" button does not permanently remove the data from your hard drive. Instead, the operating system only removes the reference to its location and marks the space as available for reuse. The data remains on the disk until it is overwritten by new data. This means that with the right tool, someone could easily recover your supposedly "deleted" file and access sensitive information.

## What can you do to delete confidential files and make them unrecoverable?

Use a secure file deletion tool to permanently delete your confidential files.

There are several tools available to erase a file and make it unrecoverable. These tools work by overwriting the file many times with random data until there are no more residues of the original data.

### Shredding files on Linux

Linux distributions have the `shred` command. This command overwrites the file repeatedly, making it harder for even very expensive hardware to recover it. By default, it overwrites a file 3 times, although you can specify the argument `-n` followed by the number of overwrites you want.

![Example of a confidential file containing a database user and password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/137a4ffp3sul5wlbc3yl.png)

Using the _.env_ file above as an example of a confidential file, let's overwrite it with random data 3 times, by executing the following command:

```bash
shred .env
```

It is worth noting that the command above does not remove the file after overwriting it. If you also want to remove the file, you need to add the argument `-u`.


![Example of a confidential file after it is overwritten by the shred command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq4dztmx2h8zo8qbmnr8.png)

In the picture above you can see how the file looks after it is overwritten by the `shred` command.

### Popular shred tools for Mac
- [Cleanmymac X Shredder](https://macpaw.com/cleanmymac-3)
- [Stellar BitRaser File Erase](https://www.bitraser.com/bitraser-file-eraser.php)
- [MacClean](https://www.imobie.com/macclean/)
- [Mac Optimizer Pro](https://macoptimizerpro.com/)

### Popular shred tools for Windows
- [EaseUS BitWiper](https://toolbox.easeus.com/bitwiper/)
- [Securely File Shredder](https://download.cnet.com/Securely-File-Shredder/3000-2144_4-75987012.html)
- [Eraser](https://sourceforge.net/projects/eraser/)
- [Secure Eraser](https://www.ascompsoftware.com/en/products/show/product/secureeraser/tab/description)

---

## Conclusion

Whether it be for personal privacy or for compliance with data privacy regulations, it is essential to be proactive when it comes to protecting sensitive information. Research and find a secure file deletion tool that works for you and your needs to protect yourself and your data.

---

Photo by [Frank R](https://unsplash.com/@frank041985?utm_source=dev.to%2Fjfmelo&utm_medium=referral) on Unsplash
Factors to consider before chosing technology to build your product
Tags: programming, product, tutorial
Published: 2023-02-06 08:10:34

When choosing a technology to build your product, there are several factors to consider
&nbsp; 


## 1. Problem fit:
  Choose a technology that is well-suited to solve the specific problem you're trying to address with your product.
&nbsp; 

## 2. Development time and cost:
 Consider the time and resources required to develop the product using the technology, as well as the ongoing maintenance costs.
&nbsp; 

## 3. Scalability:
 Choose a technology that can easily scale as your product grows and evolves.
&nbsp; 

## 4. User experience: 
Make sure the technology supports a seamless user experience and provides the features and functionality your users need.
&nbsp; 

## 5. Integration with existing systems:
 Consider how well the technology integrates with other systems and tools you already use.
&nbsp; 

## 6. Technical skills: 
  Make sure you have the technical skills and resources necessary to develop and maintain the product using the technology.
&nbsp; 

## 7. Support and community: 
Look for a technology that has a strong community and readily available support to help you overcome challenges and keep the product up-to-date.
&nbsp; 

## 8. Future plans: 
Consider the future plans for the technology, including its roadmap and potential for innovation, to ensure that it will meet your needs for the long-term.
&nbsp; 

## 9. Security: 
Consider the security and privacy features of the technology and make sure it meets any regulatory requirements.
&nbsp; 

## conclusion
By taking these factors into account, you can make an informed decision and choose a technology that best fits your needs and helps you achieve your goals. Feel free to comment share your feedback 👇
Understanding TypeScript Data Types
Tags: typescript, webdev, beginners, programming
Published: 2023-02-06 08:03:29

TypeScript is a statically typed language, meaning that every variable in TypeScript has a type. It is important to understand these types to write clean, efficient, and error-free code. This article covers the basic and most commonly used data types in TypeScript, as well as a few additional types that are useful to know.

Number: Used to represent numeric values, such as integers or floating-point numbers.

```typescript
let a: number = 42;
let b: number = 3.14;
```

String: Used to represent a sequence of characters.

```typescript
let name: string = "John Doe";
```

Boolean: Used to represent true or false values.

```typescript
let isTrue: boolean = true;
let isFalse: boolean = false;
```

Array: Used to represent a collection of values of the same type.

```typescript
let numbers: number[] = [1, 2, 3, 4];
let names: string[] = ["John", "Jane", "Jim"];
```

Tuple: Used to represent a data structure similar to an array with multiple types.

```typescript
let user: [string, number] = ["John Doe", 32];
```

Enum: Used to give named identifiers to numbers or strings.

```typescript
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
```

Any: Used to represent any TypeScript type.

```typescript
let value: any = 42;
value = "Hello";
```

Void: Used to indicate a function that does not return a value.

```typescript
function sayHello(): void {
    console.log("Hello!");
}
```

Never: Used to indicate an error or termination state.

```typescript
function throwError(): never {
    throw new Error("Something went wrong");
}
```

These are just a few of the additional TypeScript data types that are available. It's important to understand these types and choose the appropriate one for your specific use case to write efficient and maintainable code.
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2023-02-06 08:00:26

---
title: "A Nice Developer 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/5e12593f93b65.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:
___Q:___ I love you and I only love you. Does that turn you on?

___AND GATE:___ No.
 -->
Our Journey In The Open Source World - cache-candidate-plugin-dependency-keys
Tags: javascript, opensource, typescript, github
Published: 2023-02-06 08:00:00

Do you know we built an awesome caching library for Node at Jointly? No?! Well, check [this](https://dev.to/cadienvan/disrupting-the-node-caching-panorama-our-journey-in-the-open-source-world-cache-candidate-4gnb) out!

Today we want to present you our first plugin: A dependency key invalidation plugin!

## What is this?

This is a plugin for [@jointly/cache-candidate](https://github.com/JointlyTech/cache-candidate) that allows you to use a dependency keys mechanism to invalidate the cache records.


### How To Install?

```bash
$ npm install @jointly/cache-candidate-plugin-dependency-keys
```

### How To Use It?

The library exposes a `PluginDependencyKeys` object that can be used as a plugin for the `cacheCandidate` library and a `cacheCandidateDependencyManager` object that can be used to invalidate the cache records.


```typescript
import { cacheCandidate } from '@jointly/cache-candidate';
import { PluginDependencyKeys, cacheCandidateDependencyManager } from '@jointly/cache-candidate-plugin-dependency-keys';

async function getUsers() {
  // Do something
  return users;
}

async function updateUser(user) {
  // Do something
  cacheCandidateDependencyManager.invalidate(`users-${user.id}`); // <-- This is responsible for invalidating the cache records that depend on the key 'users-1'
  return user;
}

const cachedGetUsers = cacheCandidate(getUsers, {
  requestsThreshold: 1,
  plugins: [
      {
        name: PluginDependencyKeys.name,
        hooks: PluginDependencyKeys.hooks,
        // ...PluginDependencyKeys would to the same
        additionalParameters: { dependencyKeys: (users) => users.map((user) => `users-${user.id}`) }
      }
    ]
});

let users;
users = await cachedGetUsers(); // <-- This will be executed and cached
users = await cachedGetUsers(); // <-- This will be retrieved from the cache
await updateUser({ id: 1, name: 'John' }); // <-- This will invalidate the dependency key 'users-1' and the cache record will be removed consequently
users = await cachedGetUsers(); // <-- This will be executed and cached
```

You can pass an additional parameter `dependencyKeys` property which instructs the plugin about which keys to use to invalidate the cache records if necessary.  
This property can be either a number, a string, an array of strings, a function that returns an array of strings or a function that returns a Promise fulfilled with an array of strings.  
Both the function and the Promise will receive the result of the method on which the `cacheCandidate` operates.  
In case of an async method, the promise will be fulfilled before passing the result to the `dependencyKeys` function.  
The `dependencyKeys` function will be called only if the cache adapter correctly sets the value in the cache (i.e. the `.set` method is fulfilled).
Git Branch and Git Merge
Published: 2023-02-06 07:58:24


git branch
git checkout -b <branch-name>
git status
git add . or git add <filename>
git commit -m "type your message here"
git push --set-upstream origin <branch-name>
git push 

-- when required
git config --local user.email "<email addr>"
git config --local user.name "<name>"



git checkout main
git merge <branch-name>
git pull
git push 
<resolve conflict>

git pull
How to create a React project from scratch in 5 Minutes
Published: 2023-02-06 07:56:38

Here's a quick tutorial on how to create a React project from scratch:

Install Node.js and npm: https://nodejs.org/en/
Create a new directory for your project: mkdir my-project
Go into the project directory: cd my-project
Initialize a new npm project: npm init -y
Install React and ReactDOM: npm install react react-dom
Create an index.js file in your project directory: touch index.js
Open the index.js file in a text editor and add the following code:
javascript
Copy code
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello React!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
Create an index.html file in your project directory: touch index.html
Open the index.html file in a text editor and add the following code:
php
Copy code
<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>
Run the app in your browser by opening the index.html file.
Congratulations! You just created your first React app.
Css Naming Convention - BEM
Tags: css, bem, naming
Published: 2023-02-06 07:52:24

Web developer ဆိုတာနဲ့ ကျွန်တော်တို့တွေ လုံးဝချန်ထားခဲ့လို့မရတာကတော့ css ပါပဲ။
css ဆိုတာတော်တော်လေးကို ကျယ်ပြန့် ပြီးတော့လေ့လာစရာတွေ မကုန်နိုင်လောက်အောင်ကို များပြားလှပါတယ်။ဆိုတော့ များပြားလှတဲ့ css ရေးသားဟန်တွေထဲကမှ css naming convention အကြောင်းလေး sharing လုပ်ပေးချင်ပါတယ်။ strict လုပ်ထားတဲ့ အရာတစ်ခုမဟုတ်လို့ မလိုက်နာလဲ ကိစ္စတော့မရှိပေမယ့် convention အတိုင်းလိုက်နာပီးရေးသားလိုက်ရင်တော့ အကျိုးကျေးဇူးတွေရလာနိုင်ပါတယ်။

## BEM
BEM ဆိုတာကတော့ block, element, modifier သုံးမျိုးကို ပေါင်းစပ်ပီးတော့
class name ပေးတဲ့ method တစ်မျိုးဖြစ်ပါတယ်။

ကျွန်တော်တို့ မှာ section 3 ပိုင်းပါဝင်တဲ့ Home.html file တစ်ခုရှိတယ်ဆိုကြပါစို့။ 
ပါဝင်တဲ့ section တွေကတော့ 
- Hero section
- About section 
- Contact section 
တွေပဲဖြစ်ပါတယ်။

Block ဆိုတော့ ကိုယ်သုံးမယ့် section တွေရဲ့ parent container တွေကို ပေးတာသင့်တော်ပါတယ်။ဉပမာ ကျွန်တော်က Hero section ထဲမှာ button တစ်ခု ဆောက်ပီးတော့ အဲ့သည့် button ကို style လုပ်ဖို့ class name ပေးမယ်ဆိုရင် `.hero-section-button` ဆိုပီးတော့ပေးမှာဖြစ်ပါတယ်။ကျတော်တို့ website က `dark-theme` နဲ့ `light theme` ၂ခု လုပ်ထားတာမျိုးဆိုရင် `.hero-section__button--light` နဲ့ `.hero-section__button--dark` ဆိုပီးတော့ပေးမှာပဲဖြစ်ပါတယ်။ class name တွေကို ပြန်ခွဲကြည့်ရမယ်ဆိုရင် hero-section ဆိုတာ block (သို့) parent နဲ့သက်ဆိုင်တာဖြစ်ပီးတော့ button ဆိုတာကတော့ ဘယ်လို html element ကို သုံးထားသလဲဆိုတာကို ကိုယ်စားပြုပါတယ်။ နောက်ဆုံးက --light နဲ့ --dark တွေကတော့ modifier တွေပဲဖြစ်ပါတယ်။

modifier တွေကိုတော့ -- နဲ့နောက်ကနေပီးတော့ ဆက်တိုက်ပေးသွားလို့ရပါတယ်။
ဉပမာ button ကိုအသေးအကြီး ၂ခု ခွဲထားတယ်ဆိုရင်တော့
`.hero-section__button--small--light`
`.hero-section__button--small--dark` ဆိုပြီးတော့ ရေးလို့ရပါတယ်။

ကျွန်တော်တို့ က hero section ကို left, right ဆိုပီးတော့ ၂ပိုင်းခွဲထားတယ်ဆိုရင်
`.hero-section__left__button--small--light`
`.hero-section__right__button--big--dark` ဆိုပြီးတော့ ရေးလို့ရပါတယ်။

BEM ကို နိဂုံးချုပ်ရမယ်ဆိုရင်တော့ Block ဖြစ်တဲ့ parent section ကိုရှေ့ဆုံးမှာရေးပြီးတော့parent ထဲက child element တွေကို double underscore (__) ခံပြီးတော့
modifier တွေကိုတော့ (--) double hyphen နဲ့ရေးကြပါတယ်။

များသောအားဖြင့် developer တွေက project တစ်ခုဖြစ်လာဖို့ ပူပေါင်းလုပ်ဆောင်ကြရတာဖြစ်ပီးတော့ ထိုကဲ့သို့ convention တွေကို သတ်သတ်မှတ်မှတ်ထားပီးရေးသားတာကလဲ ပိုပြီး team နဲ့ ချိတ်ဆက်မိစေပီးတော့ maintain နဲ့ modify လဲပြုလုပ်ရ လွယ်ကူစေပါတယ်။


![BEM Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dy667ulyz32ky37vk0n.png)
How do I change Now Playing song with Static API Json from a HTML Code?
Tags: ask
Published: 2023-02-06 07:44:59

Dear all, 
I have a code (web-player), but I tried to load the now playing data from a Static API JSON from my server. In fact, the idea is to load artist name, song and automatically when its posible.
I will be extremely grateful to you for doing so. 

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

Here's my code:

```
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <style>
      .sticky-bottom {
        bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 1030;
      }
    </style>
  </head>
  <body>
    <div class="sticky-bottom bg-dark">
      <div class="container-fluid">
        <div class="row py-3">
          <div class="col-2 text-center">
            <i class="fa fa-music text-white"></i>
          </div>
          <div class="col-8">
            <p class="text-white m-0 now-playing">Now Playing: Loading...</p>
            <p class="text-white m-0 current-time">Current Time: Loading...</p>
        </div>
      </div>
    </div>

    <audio id="player" controls>
      <source src="https://cp.streamchileno.cl/radio/8040/radio.mp3" type="audio/mpeg">
    </audio>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
    <script>
      const player = new Plyr("#player");
      const nowPlaying = document.querySelector(".now-playing");
      const currentTime = document.querySelector(".current-time");

      player.on("playing", event => {
        nowPlaying.innerText = `Now Playing: ${event.detail.plyr.media.title || "Unknown"}`;
      });

      setInterval(() => {
        currentTime.innerText = `Current Time: ${new Date().toLocaleTimeString()}`;
      }, 1000);
      </script>
    </body>
  </body>
</html>

```

```
####API JSON####
https://cp.streamchileno.cl/api/nowplaying_static/radio_riquelme_1350_am.json
```