teleren/devto huggingface dataset:
Membuat file.desktop di Linux dari .tar.gz- Postman
Tags: linux, postman, ubuntu, terminal
Published: 2023-08-19 05:46:39

Postman adalah sebuah aplikasi yang memungkinkan developer untuk menguji API dengan mudah. Sebenarnya lebih mudah menginstall menggunakan file .deb atau dari ubuntu-softaware sudah menyediakan tetapi jika ingin menginstall Postman dari file `.tar.gz` berikut langkah-langkahnya:


**Download File Postman**:
   Situs web resmi Postman di https://www.postman.com/downloads/ dan download versi aplikasi yang sesuai untuk sistem operasi.

**Ekstrak File**:
   Setelah download selesai, buka terminal. Pindah ke direktori di mana akan mengekstrak Postman. Gunakan perintah berikut untuk mengekstrak file `.tar.gz`:

   ```
   tar -xzf nama_file.tar.gz
   ```

   Ganti `nama_file.tar.gz` dengan nama file yang didownload. Saya biasanya menggunakan Tab untuk supaya tahu fiel yang dimaksud ada atau tidak, dan tidak salah ketik nama atau menggunakan `ls -l` atau `ll`.

**Pindahkan ke Direktori yang Tepat**:
   Setelah proses ekstraksi selesai, akan memunculkan sebuah direktori baru yang berisi instalasi Postman. Pindahkan direktori tersebut ke lokasi yang sesuai, seperti dalam direktori `/opt` untuk instalasi global atau dalam direktori pengguna.

   Ganti `nama_folder_hasil_ekstraksi` dengan nama direktori hasil ekstraksi.

   ```
   #format
   sudo mv nama_folder_hasil_ekstraksi /lokasi/tujuan/

   #contoh
   sudo mv Postman /opt/ 
   ```

**Buat Shortcut**:
 Membuat shortcut untuk Postman agar lebih mudah diakses. Cara ini bervariasi tergantung pada desktop environment yang gunakan.

   - **GNOME**: Jika menggunakan lingkungan GNOME, buat file desktop `.desktop` di direktori `~/.local/share/applications/`. Berikut contoh isi file tersebut:

     ```desktop
     [Desktop Entry]
     Name=Postman
     Exec=/lokasi/tujuan/nama_folder_hasil_ekstraksi/Postman
     Icon=/lokasi/tujuan/nama_folder_hasil_ekstraksi/app/resources/app/assets/icon.png
     Terminal=false
     Type=Application
     Categories=Development;
     ```

     Pastikan menggantikan `/lokasi/tujuan/` dan `nama_folder_hasil_ekstraksi` sesuai dengan lokasi instalasi.

     ```
     [Desktop Entry]
     Name=Postman
     Exec=/opt/Postman/Postman
     Icon=/opt/Postman/app/resources/app/assets/icon.png
     Terminal=false
     Type=Application
     Categories=Development;
     ```

**Berikan Izin Eksekusi**:
   Pastikan file Postman yang telah diekstrak memiliki izin eksekusi. Buka terminal dan jalankan perintah berikut:

   ```
   sudo chmod +x /lokasi/tujuan/nama_folder_hasil_ekstraksi/Postman

   sudo chmod +x /opt/Postman
   ```

**Mulai Postman**:
   Kini dapat menjalankan Postman dengan mengklik shortcut yang telah buat atau dengan menjalankan perintah berikut di terminal:

   ```
   /lokasi/tujuan/nama_folder_hasil_ekstraksi/Postman
   ```


![postman desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mnrfuuthu8bqn79tp1b.png)


   Pastikan menggantikan `/lokasi/tujuan/` dan `nama_folder_hasil_ekstraksi` sesuai dengan lokasi instalasi.
Running nodejs application using micro service architecture.
Tags: node, kubernetes, docker, javascript
Published: 2023-08-19 05:42:14

Hi Team,
I have developed on project where multiple nodejs application are running as micro services using Kubernetes.
Here is the link : https://github.com/ershubhamgupta1/k8-MERN-App.git
if you found it good, can you please star and share it.
Dynamic Metadata NextJS 13 App Directory
Tags: nextjs, programming, react
Published: 2023-08-19 05:40:45

When building a website with Next.js 13, you'll likely need to display dynamic metadata like product names. There are two approaches for handling metadata in Next.js app directory: static and dynamic.

Static metadata looks like:

```
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
```

However, dynamic metadata is more common for sites displaying changing content. After researching solutions, I realized the only way to show dynamic metadata was calling an API on each page. But fetching metadata from an API on every page felt inefficient.

That's when I discovered request memoization - deduplicating similar API requests to avoid wasting resources. Here's how it works:

- Create a shared cache for metadata API responses
- Before fetching, check if response already exists in cache
- If it does, return cached data instead of calling API again
- If not, make API call and cache response
By memoizing metadata API requests, we avoid duplicated network requests. The metadata is still dynamic, but now fetched only once per unique content.

This optimizations allows displaying dynamic SEO-friendly metadata in Next.js 13 without taxing our API. Request memoization is a simple but powerful strategy for improving performance in React and Next.js apps.

If you need a code reference, check it out below! 

```
import Link from 'next/link';
import { Metadata, ResolvingMetadata } from 'next';
interface Params {
  slug: string;
}

export async function generateMetadata({
  params,
}: {
  params: Params;
}): Promise<Metadata> {
  const { slug } = params;
  // read route params
  const url = 'https://api.example.com/v1/component/' + slug;
  
  // fetch data
  const component_item = await fetch(url).then((res) => res.json());
  console.log(component_item);

  return {
    title: component_item.name,
    description: component_item.description,
  };
}
```

Request Memoization

React extends the fetch API to automatically memoize requests that have the same URL and options. This means you can call a fetch function for the same data in multiple places in a React component tree while only executing it once.

For example, if you need to use the same data across a route (e.g. in a Layout, Page, and multiple components), you do not have to fetch data at the top of the tree then forward props between components. Instead, you can fetch data in the components that need it without worrying about the performance implications of making multiple requests across the network for the same data.


Resources for Dynamic Metadata
https://javascript.plainenglish.io/mastering-metadata-in-next-js-a-comprehensive-guide-to-seo-excellence-ab9c2cf0dc35

https://nextjs.org/docs/app/building-your-application/caching#request-memoization

https://www.slingacademy.com/article/next-js-how-to-set-page-title-and-meta-description/

https://www.builder.io/blog/routing-seo-metadata-nextjs-13
6 Tips for Effective React Pagination: Building a User-Friendly Navigation Component
Tags: react, webdev, javascript, ui
Published: 2023-08-19 05:27:17


![React Pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehcabfi6ehoz3utyq051.png)
Pagination is a fundamental feature for managing large datasets in web applications. In this blog post, we'll explore six essential tips to create an effective React pagination component that enhances user experience and simplifies navigation.

## Tip 1: Smart Data Handling

Efficiently manage your data by implementing server-side pagination. Fetch only the necessary data for the current page to reduce load times and improve performance.

## Tip 2: Clear User Interface

Design an intuitive user interface with clear navigation controls. Use familiar icons for previous and next buttons and provide numeric page links for easy navigation.

## Tip 3: Pagination Logic

Implement pagination logic by calculating the total number of pages based on the data count and items per page. Update the current page dynamically as users interact with the pagination controls.

## Tip 4: Styling and Customization

Style your pagination component to match your application's design. Utilize CSS or CSS frameworks to create visually appealing and responsive pagination controls.

## Tip 5: Edge Case Handling

Address edge cases such as small datasets or single-page scenarios. Disable unnecessary controls when they aren't applicable, providing a seamless experience for users.

## Tip 6: Performance Optimization

Optimize performance by minimizing re-renders. Utilize techniques like code splitting and lazy loading to enhance the speed and efficiency of your pagination component.

## Conclusion

Incorporating these tips will help you build a user-friendly React pagination component that enhances navigation, improves performance, and provides an overall seamless experience for users.
Eye-catching features of the Playwright
Tags: playwright, automation, testing, discuss
Published: 2023-08-19 05:24:14

I was amazed by trending Automation tool Playwright and wanted to share some eye-catching features of the Playwright:

**<u>API support on the fly</u>**
- No need to depend on third-party library to automate API
- API can be added along with UI test cases

<u>In the below snip, I am using API response after the click event on the UI effortlessly:</u>
![Playwright Code snip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9lm076is9hoqbqurd7h.png)

**<u>In-built support of the detailed reports</u>**
- Inbuilt descriptive support
- Support of the test screenshots,  videos, and logs on the go
- Easy to debug at any point of the test case via timelines or the test steps
- Point out the flaky test cases which help us to catch intermittent failures 
- Network logs recorded for each test step
- Pick locator, Selectors for the web page directly from the report

<u>Below is the snip of the in-built report</u>
![Report Snip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2zyqrs9vp037id7l74i.png)

<u>**Assert based on Visual Comparisons**</u>
- Playwright allows you to assert a test case totally based on the screenshot pixels 
- Validate test cases based on the screenshot of the page as well as the single component e.g toggle button
- Helps in catching user experience issues

<u>Here test case got failed due to image comparison </u>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsf1o1amwl0ban69u41f.png)

**<u>Easy to handle Download streams</u>**
Easy to perform operations on the downloaded files
here is a good read(https://playwright.dev/docs/api/class-download)

**<u>Auto-wait mechanism</u>**
- No need to break your head why it is not clicked and not filled, it handles wait automatically for each action
- It will run all the possible wait scenarios before performing an action
Here is an example of the click action done by the playwright:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vos1dpm1m167eyxxev0d.png)

Do let me know the feature which amazed you and wanted to explore the Playwright more
APU-like Triangle in WebAudio
Tags: webaudio
Published: 2023-08-19 04:08:12

---
title: APU-like Triangle in WebAudio
published: true
description: 
tags: webaudio
---

## PeriodicWave

We can define `OscillatorNode` for any periodic function `f(t)`, defined by the domain `[0, 2π)`, using `PeriodicWave`:

```js
const ω = new OscillatorNode(
    audioContext,
    {
        type: "custom",
        frequency: frequency,
        periodicWave: new PeriodicWave(
            audioContext,
            {real: a, imag: b}
        ),
    }
);
```

where `a` and `b` are `Float32Array`s.

## APU-like Triangle

NES's pseudo-triangle wave repeats `FEDCBA9876543210` and `0123456789ABCDEF`:

begin | end | value
-----:|----:|------:
0 | π/16 | 1
π/16 | π/8 | 13/15
π/8 | 3/16 π | 11/15
3/16 π | π/4 | 3/5
π/4 | 5/16 π | 7/15
5/16 π | 3/8 π | 1/3
3/8 π | 7/16 π | 1/5
7/16 π | π/2 | 1/15
π/2 | 9/16 π | -1/15
9/16 π | 5/8 π | -1/5
5/8 π | 11/16 π | -1/3
11/16 π | 3/4 π | -7/15
3/4 π | 13/16 π | -3/5
13/16 π | 7/8 π | -11/15
7/8 π | 15/16 π | -13/15
15/16 π | π | -1

As a result, we obtain follows:

{% katex %}
\begin{aligned}
  a_{0} &= 0 \\\\
  a_{k} &= \frac{4}{15\pi{k}} \sum_{n=1}^{15} \sin\frac{\pi{kn}}{16} \\\\
  b_{k} &= 0
\end{aligned}
{% endkatex %}
InnerText, TextContent and InnerHTML.
Tags: beginners, javascript, webdev, productivity
Published: 2023-08-19 04:00:47

As a novice in the realm of web development, I have frequently encountered obstacles and challenges when it comes to manipulating the Document Object Model (DOM). Specifically, I have found it difficult to differentiate between three crucial properties: InnerText, textContent, and innerHTML. However, through careful analysis and examination, I have been able to break down and comprehend the distinct features of each, and how they can be tailored to specific scenarios.

When it comes to updating webpage content on-the-fly, it is imperative to utilize the appropriate tool for the task at hand. InnerText is an invaluable resource when it comes to modifying visible text without HTML interpretation. It is particularly useful for making user-friendly adjustments such as altering headings or tweaking labels. For updating different types of content without jeopardizing security, textContent is the all-purpose content craftsman. It is versatile and perfect for a variety of content updates. Lastly, when dealing with rich, structured content that requires HTML tags, innerHTML is the markup maestro. It breathes life into updates with structure and style, even for complex elements.

In my personal experience, I have found textContent to be the most favorable option when it comes to manipulating the DOM. It is an ideal choice as it does not interfere with the structure of HTML. Ultimately, it takes practice to determine which method works best for you when dealing with DOM manipulation. In the end, the key is to stick with what works best for you.

To navigate the complexities of DOM manipulation, it is crucial to keep these three trusted tools in mind: InnerText for friendly facelifts, textContent for versatile updates, and innerHTML for rich, structured content. With these resources at your disposal, your dynamic web journey can begin in earnest.

To learn more about these HTML DOM methods, visit https://www.w3schools.com/jsref/dom_obj_all.asp. They provide examples to see each method works with DOM manipulation.
Working with C# in VS Code.
Tags: beginners, csharp, vscode
Published: 2023-08-19 03:50:47

# What can C# can do?
1. Application development(Xamarin)
1. Game　development(Unity, UnrealEngine)
1. Web application development
C# can be used universally.

# Getting started guide with official documentation
## Install
1. Install C# Dev Kit from the Visual Sdudio Marketplace.→C# extension is installed automatically.
1. Sign in with Microsoft to use Dev Kit
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujs6ijaotouoqqdxurw7.png)
1. Install .Net Coding Pack from official document(https://code.visualstudio.com/docs/csharp/get-started)
1. Open folder
```
mkdir hello
cd hello
code .
```

# Create a Hello World app
1. Create a Hello World app by using the terminal
   1. Open a terminal/command prompt and navigate to `hello/`.
   1. Enter the following command in the command shell

         ```
         dotnet new console
         ```

   1. Run the app by entering the following command in the command shell:

         ```
         dotnet run
         ```

1. The resulting output to the terminal is "Hello, World!"
Introduction to Reduce
Published: 2023-08-19 03:44:17



Reduce is a native method in JavaScript that acts on arrays. It is a high-order function. Reduce takes two arguments, a callback function that is applied to each value in the array, and an optional initial value for the accumulator. The accumulator stores a value that is altered over the course of reduce’s execution. Reduce returns a single value. If no initial value is provided, the first element of the array becomes the initial value of the accumulator, unless the array reduce is called on is empty, in which case an error will be thrown.  

To make this a bit clearer here is a simple example, using reduce to add all of the numbers in an array:

```JavaScript
let nums = [1, 2, 3];

let sum = nums.reduce((accumulator, currentValue) => {
    return accumulator + currentValue
}, 0);

console.log(sum);
6
```

In this classic example, I have provided an initial value of 0 as the second argument in reduce(). The function iterates through the array, adding each value in the array to the accumulator and returns 6. 

In this case, if I hadn't provided an initial value this example would still work because setting the initial value of the accumulator to the first item in the array would not affect the addition performed by reduce.

Another example:

```JavaScript
let bools = [true, false, true, false, true];

let truths = bools.reduce((accumulator, currentValue) => {
    if(currentValue){
accumulator++
}
    return accumulator;
}, 0);

console.log(truths);
3
```

In this example, reduce iterates through the array bools and when the values in the array evaluate to true, it adds one to the accumulator. Because there are three values that are true in the array, this console logging truths will return to 3. 

Reduce can return more than just a number though. For instance, it can return an array. Here is an example:

```JavaScript
let nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

let flatArray = nestedArray.reduce((accumulator, currentValue) =>{
 return accumulator.concat(currentValue);
}, [0]);

console.log(flatArray);
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
```

Here, reduceiterates through the nested array and concatenates the accumulator with the current value in the array. Because I started with an initial value of [0], that is the value of the accumulator when it is concatenated with the first array in the nested array.

Reduce is a very powerful method that has many uses. It can tackle a wide range of iterative operations performing aggregation, manipulating data, and transforming. Learning to use reduce effectively will allow you to write cleaner and more succinct code.
Maximum Points You Can Obtain from Cards
Tags: javascript, leetcode
Published: 2023-08-19 03:20:15

[Maximum Points You Can Obtain from Cards](https://leetcode.com/problems/maximum-points-you-can-obtain-from-cards/description/)

## Approach

We have to calculate sum of K elements from array & you can take one card from the beginning or from the end of the row. You have to take exactly k cards.

What we will do is we will create a window of arr.length - k `let windowLength = arr.length - k;`, so after this we will be left with on K elemnts in array & sum of those K will give us ans.

 At first, we will take sum of all remaining K elements after window. i.e

example arr = [1, 2, 3, 4, 5, 6, 1], length = 7 & K = 3
so windowLength should be of 7-3 = 4 element => [1, 2, 3, 4]
now remaining k (i.e 3) element = [5, 6, 1],

`for (let i = windowLength; i < arr.length; i++) {
    windowSum = windowSum + arr[i];
}`

& will assume that this sum is maximum sum.

Now for this statement "you can take one card from the beginning or from the end of the row. You have to take exactly k cards."

We will add one element from start to maxsum & will move window by 1 element & hence remove the Kth element from maxsum i.e, (windowLength + i)


 ` let windowLength = arr.length - k; `

```js

/**
 * @param {number[]} cardPoints
 * @param {number} k
 * @return {number}
 */


var maxScore = function (arr, k) {
  let windowLength = arr.length - k;
  let windowSum = 0;
  let maxSum = 0;

  for (let i = windowLength; i < arr.length; i++) {
    windowSum = windowSum + arr[i];
  }
  maxSum = windowSum;

  for (let i = 0; i < arr.length - windowLength; i++) {
    windowSum = windowSum - arr[windowLength + i] + arr[i];
    maxSum = Math.max(maxSum, windowSum);
  }
  return maxSum;
};

console.log(maxScore([1, 79, 80, 1, 1, 1, 200, 1], 3));
console.log(maxScore([1, 2, 3, 4, 5, 6, 1], 3));
console.log(maxScore([2, 2, 2], 2));
console.log(maxScore([9, 7, 7, 9, 7, 7, 9], 7));

```
Giúp bạn sử dụng máy phun sơn cầm tay đúng cách
Published: 2023-08-19 03:01:02

Máy phun cầm tay là một thiết bị quan trọng giúp tăng tốc quá trình lắp đặt và xây dựng, mang lại sự tiết kiệm thời gian và công sức hiệu quả. Trong bài viết này, chúng tôi sẽ cùng với Siêu thị Hải Minh, đưa ra hướng dẫn cách sử dụng máy phun sơn cầm tay.

## 1. Chuẩn bị bề mặt

Trước khi bắt đầu việc phun sơn, bạn cần thực hiện những bước sau:
Đảm bảo bề mặt cần sơn là khô ráo và không có bụi bẩn.
Kiểm tra xung quanh để xác định có các ổ điện, đồ vật hoặc khu vực không muốn bị sơn dính. Sử dụng băng keo để bao phủ ổ điện hoặc bàn kín bề mặt bằng bạt để tránh sơn phun vào những vị trí không mong muốn.

## 2. Phun thử nghiệm
Trước khi bắt đầu phun sơn thực sự lên bề mặt, nên thực hiện một lần phun thử nghiệm, đặc biệt là nếu bạn mới bắt đầu sơn. Điều này giúp giảm nguy cơ phun sơn không đều hoặc quá dày lên bề mặt. Đồng thời, bước này cũng giúp bạn phát hiện và sửa lỗi kĩ thuật của máy.

## 3. Điều chỉnh áp suất

Nếu sơn bị phun không đều hoặc quá đậm, bạn nên điều chỉnh áp suất thông qua đồng hồ tăng/giảm áp trên máy. Tùy thuộc vào tình hình, bạn có thể tăng áp suất để sơn phun đều hơn.

Tuy nhiên, hãy tránh đặt áp suất quá cao khiến chất lượng sơn giảm và cũng không nên điều chỉnh quá thấp gây chậm tiến độ công việc. Hãy điều chỉnh áp lực sao cho vừa phải mà không làm tia phun sơn trở nên yếu.

## 4. Khoảng cách phun sơn
Khoảng cách tốt nhất từ máy phun sơn đến bề mặt cần sơn là 10-20 inch (khoảng 30.5cm). Khoảng cách này giúp sơn phủ đều và màu sơn hiện rõ lên bề mặt, đồng thời đảm bảo sơn được phun đều trên các vị trí khác nhau.

## 5. Di chuyển máy phun sơn
Liên tục di chuyển máy sẽ giúp sơn phủ đều và có độ mịn sau khi hoàn thành công việc. Hãy điều chỉnh tốc độ di chuyển máy ở mức vừa phải, không quá chậm hoặc quá nhanh để đảm bảo kết quả sơn hoàn hảo.

## 6. Dừng phun sơn
Khi đã hoàn thành việc phun sơn lên toàn bề mặt cần sơn, chỉ cần nhả nút kích hoạt trên máy phun để dừng dòng sơn.

Trên đây là những kinh nghiệm về việc sử dụng máy phun sơn cầm tay mà chúng tôi muốn chia sẻ. Chúng tôi hy vọng rằng những thông tin này sẽ giúp bạn tự tin hơn trong việc sơn nhà cửa và các đồ vật.
PURPOSE OF HAVING A GOOD DP
Published: 2023-08-19 02:44:39

The purpose of cultivating an appealing and thoughtfully curated Display Picture (DP), including a distinctive whatsapp a name dp, goes beyond mere visual aesthetics, serving as a multifaceted tool for effective communication, identity projection, and a distinct online presence. In the digital era, where virtual interactions shape personal and professional relationships, a strategically chosen DP can convey emotions, intentions, and individuality concisely yet impactfully.
**[Website](https://storysseed.blogspot.com/purpose-of-having-good-dp)**