teleren/devto huggingface dataset:
[Vite plugin] Jump to the editor by clicking console.log output.
Tags: vite, javascript, vue
Published: 2023-11-03 02:37:50

**Vite-plugin-turbo-console** is a Vite plugin for enhancing console.log().
Its main features include:

## 🔥 Features
1. Output console.log content highlighted according to file type.
2. Jump to editor from console by simple click.

## 🎥 Screen Recording

![gif](https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/11/upgit_20231101_1698844263.gif)

## 📦 Install

```shell
# npm
npm install -D vite-plugin-turbo-console
# yarn
yarn add -D vite-plugin-turbo-console
# pnpm
pnpm i -D vite-plugin-turbo-console
```

## 🦄 Usage

### Vite

**vite.config.ts**

```ts
import { defineConfig } from "vite";
import TurboConsole from "vite-plugin-turbo-console";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    TurboConsole({
      /* options here */
    })
  ],
});
```

### Nuxt

**nuxt.config.ts**

```ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    'vite-plugin-turbo-console/nuxt'
  ],
  turboConsole: {
    /* options here */
  }
})

```

Check the more information on [GitHub](https://github.com/yuyinws/vite-plugin-turbo-console)

Welcome to use and feedback:)
服务器和PC的区别
Tags: webdev
Published: 2023-11-03 02:19:37


做为一台服务器，有两个特点是必须的，一是服务器必须应用在网络计算环境中，二是服务器要为网络中的客户端提供服务。一台脱离了网络的服务器是没有太大意义的，即使配置再高，也只能被称作是一台高性能计算机，也无法实现为客户端提供网络服务的功能。在网络中，服务器为客户端提供着数据存储、查询、数据转发、发布等功能，维系着整个网络环境的正常运行。大多数客户对服务器概念不了解，导致大量PC服务器诞生。他们认为，在高配置的PC机上安装相应的应用软件可以代替真正的服务器。长期连续运行往会导致死机、蓝屏、业务正常发展，给客户造成经济损失。
服务器归根结底还是一台计算机，其硬件结构也是从PC发展而来，服务器的一些基本特性和PC有很大的相似之处。服务器硬件也包括处理器、芯片组、内存、存储系统以及I/O设备这几大部分，但是和普通PC相比，服务器硬件中包含着专门的服务器技术，这些专门的技术保证了服务器能够承担更高的负载，具有更高的稳定性和扩展能力。
稳定性要求不同 服务器是用来承担企业应用中的关键任务，需要长时间的无故障稳定运行。在某些需要不间断服务的领域，需要服务器7*24*365运行，一旦出现服务器宕机，后果是严重的。这些关键领域的服务器从开始运行到报废可能只开一次机，这就要求服务器具备极高的稳定性，这是普通PC无法达到的。
性能要求不同 除了稳定性之外，服务器对于性能的要求同样很高。前面提到过，服务器是在网络计算环境中提供服务的计算机，承载着网络中的关键任务，维系着网络服务的正常运行，所以为了实现提供服务所需的高处理能力，服务器的硬件采用与PC不同的专门设计。服务器处理器相对PC处理器具有更大的二级缓存，高端的服务器处理器甚至集成了远远大于PC的三级缓存，并且服务器一般采用双路甚至多路处理器，来提供强大的运算能力。服务器芯片组也不同于PC芯片组，服务器芯片组提供了对双路、多路处理器的支持。
扩展性能要求不同 服务器在成本上远高于PC，并且承担企业关键任务，一旦更新换代需要投入很大的资金和维护成本，所以相对来说服务器更新换代比较慢。企业信息化的要求也不是一成不变，所以服务器要留有一定的扩展空间。服务器上相对于PC一般提供了更多的扩展插槽。
主板区别，真正的服务器采用双向主板和至强处理器，服务器主板使用的电子部件和电路设计经过严格测试，可以长时间运行。另外，在热散热方面，机架式服务器的表现特别突出。
内存区别，真服务器采用的是具有ECC校验和Reg功能的内存，众所周知，计算机处理数据全部采用二进制方式进行数据处理，并非我们所看到的汉字和字符.而服务器一天24小时运行，不间断地长时间运行，难免会出现操作错误，ECC校验能有效地纠正长时间运行中出现的错误.提高系统的稳定性.这些都是PC服务器做不到的.此外，真服务器全部支持大容量内存，单容量可支持1GB至4GB的容量.现实中，没有一个PC服务器能做到这一点。
Pitfalls while memoization
Published: 2023-11-03 02:15:36

As practicing dynamic programming, I was implementing a function that returns the binomial coefficient `nCr` given `n` and `r`.

Naive formula:

```javascript
function binomial_naive(n, r) {
  if (n < 0 || r < 0 || r > n) {
    return 0;
  }
  if (r === 0 || r === n) {
    return 1;
  }
  return binomial_naive(n-1, r-1) + binomial_naive(n-1, r);
}
```

We can memoize this function to get O(r(n-r)) running time.

I was using `Map<number, Map<number, number>>`s but encountered a problem.

**My initial memoization implementation had cache updating code and cache retrieval code interleaved, which made subtle bugs that only occurs only when some cache is computed.**

I threw it away and coded a more straightforward implementation:
```javascript
const cache = new Map();

function binomial(n, r) {
  if (!cache.has(n)) {
    cache.set(n, new Map());
  }
  if (!cache.get(n).has(r)) {
    cache.get(n).set(r, binomial_naive(n, r));
  }
  return cache.get(n).get(r);
}

function binomial_naive(n, r) {
  if (n < 0 || r < 0 || r > n) {
    return 0;
  }
  if (r === 0 || r === n) {
    return 1;
  }
  return binomial(n - 1, r) + binomial(n - 1, r - 1);
}
```

Now I see that we could implement this using 2d arrays which makes it a little more straightforward.
What Kinds of Tests Should be Automated
Tags: beginners, testing, development, softwaredevelopment
Published: 2023-11-03 02:14:31

Automation testing is a critical component of modern software development processes, and it's essential for achieving a high degree of efficiency and quality in software testing. However, not all tests should be automated. Knowing which tests to automate and which ones to perform manually is crucial for ensuring a successful automation testing strategy. Here are the different types of tests that should be automated for a faster and more efficient testing cycle.

**Unit Tests**
Unit tests are automated tests that focus on individual units of code. These tests are designed to ensure that each unit of code works as expected, and they can be run quickly and easily. Unit tests are typically easy to automate because they are simple, self-contained, and have well-defined inputs and outputs.

**Functional Tests**
Functional tests are automated tests that simulate user actions and verify that the system behaves as expected. These tests are designed to test the functionality of the system as a whole, rather than individual units of code. Functional tests are typically more complex than unit tests, but they are still well-suited to automation because they can be run repeatedly and can help to identify regressions.

**Regression Tests**
Regression tests are automated tests that are designed to ensure that previously identified defects or issues have been fixed and new changes have not introduced new issues. These tests are typically automated because they need to be run repeatedly to ensure that the system is still functioning correctly after changes have been made.

**Smoke Testing**
Smoke testing is a quick and straightforward test that verifies whether the most crucial functionalities of the application are working correctly. It's usually performed before more in-depth testing is done, such as regression or functional testing. Automated smoke testing tools can quickly identify critical issues, providing developers with early feedback on the application's overall health.

**Performance Testing**
Performance testing is a type of testing that verifies the application's performance under various load conditions. It's crucial to ensure that the application can handle heavy loads and maintain its performance and stability under different usage scenarios. Automated performance testing tools can simulate various load conditions, making it easier for testers to identify bottlenecks and performance issues.

## Bottom Line
In conclusion, there are several types of tests that are well-suited to automation. By automating these tests, software development teams can ensure that their products are reliable, high-quality, and meet the expectations of end-users. WeTest automation could be used for functional testing, performance testing, regression testing and so on. If you haven't tried WeTest automation, [download and try it today](https://wetest.net/products/automation/?utm_source=tw&utm_medium=AM-TW-3) .
typescript - using reduce to get repited items
Published: 2023-11-03 02:06:08

```TS
const listItems = ["papa", "camote", "yuca", "papa"];

const result =  listItems.reduce((acc,current: string) => {
    acc[current] = acc[current] ? acc[current] + 1 : 1;
    return acc;
}, {} as any);

console.log(result);
```
example response: 

```JSON
[LOG]: {
  "papa": 2,
  "camote": 1,
  "yuca": 1
} 
```
EIEN取引所が市場の発展を主導する
Tags: eien取引所
Published: 2023-11-03 01:54:07

EIEN取引センター：暗号通貨市場の新王者

EIEN取引センターは、業界で重要ないくつかのマイニング(採掘)企業を買収し、質の高いICO資格資源を統合して設立され、最新改革の核心取引と投資機能を通じて、暗号通貨市場を迅速に占領し、業界のリーダーになることを目標としています。 

EIEN取引センターの本部はアメリカにあります。
サービスの範囲は広く、市場は世界中に広がっています。
当社は、ブロックチェーン技術および運営チームの専門性、効率性、豊富な経験を持っており、数十年間のインターネット開発とサービスに携わってきました。
独自の洞察力とビジョンを持つのインターネットの専門家たちは、世界中の暗号通貨ユーザーに安全で、便利で、安定した、低コストの総合サービスプラットフォームを提供することに専念しています。
 
EIEN取引センターは、安全で信頼性の高い暗号通貨取引プラットフォームの構築に努めています。
チームは数十年の金融リスク管理の経験を持っており、主要メンバーはハーバード大学、オックスフォード大学、マサチューセッツ工科大学、シドニー大学など、世界的に有名な大学を卒業しています。
EIEN取引所は、多くの金融ライセンスを持っており、全世界の資質を継続的に向上させています。
プラットフォームは長期的に安定しており、リスク投資は保証されています。

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

EIEN取引センターは、市場で明らかに低い手数料の契約取引と質の高いICOプロジェクトという利点があり、将来はNASDAQに上場する予定です。
主要な運営プロジェクトはICOおよびFOFマイニングプールプロジェクトです。
ICOプロジェクトは業界の優れた投資プロジェクトのリーダーであり、様々な発行者との協力の焦点となり、ユーザーにとって人気な投資プロジェクトとなっています。
このプロジェクトは、多くの投資業界の伝説を生むでしょう。
FOFマイニングプールプロジェクトは、業界の優れたマイニング機を組み合わせた投資プロジェクトであり、主な特徴はリスクが低く、収益が安定していることです。


EIEN取引センターのシステムは、ユーザーエクスペリエンスを全面的に最適化しており、ロードバランシング技術を利用してシステムの流れを最大化し、複数のサーバーを提供して取引の速度を保証します。
取引システムの体験満足度は、世界トップクラスの取引システムを基準としています。
 
EIEN取引センターのセキュリティレベルは金融レベルで、ユーザーの資産を守ります。
デジタル資産の保存は、スマートな冷暖分離を行い、フルチェーンデジタルウォレット、アカウント暗号化技術を全面的に適用し、業界のトップセキュリティレベルへと継続的にアップグレードして、ユーザーの安全を確保します。

EIEN取引センターには、完全なユーザーサービス体系があり、最も完全で便利な管理システムサポートを提供し、7×24時間の迅速な対応を実現します。
真の公平、公正、公開のデータ取引市場を作り上げます。
 
EIEN取引センターは、現物取引、法定通貨、契約取引、ICOなどの取引だけでなく、全チェーンのデポジットおよび出金サービスをサポートしています。
全世界の銀行システムの振り込みおよび出金サービスにも対応しています。
成行、指値、利益確定・損切りの注文もサポートしており、7×24時間の多言語オンラインカスタマーサポートも提供しています。 

EIEN取引センターが設立された当初から、暗号通貨実践大会を行い、質の高いICOを推進する方法で取引所の知名度を向上させ、暗号通貨市場の投資者教育の質が高いプラットフォームを作り上げることに専念しています。
したがって、EIEN取引センターは多くの専門投資家が集結する場所となるので、とても楽しくなるでしょう。
Docusaurus: Understanding the sitemap feature
Tags: typescript, programming, opensource, documentation
Published: 2023-11-03 01:05:41

Docusaurus, the popular static site generator, simplifies the process of building documentation websites. Among its powerful features is the sitemap generator, a vital component for enhancing a site's search engine optimization (SEO).

## Exploring the Code

### 1. `isNoIndexMetaRoute` Function:

This function is crucial for determining whether a specific route should be excluded from the sitemap. It checks the HTML head of a page for a meta tag with the name "robots" and the content "noindex". If found, the route is excluded from the sitemap. This ensures that pages marked as 'noindex' in their meta tags are not included in the generated sitemap.

### 2. `createSitemap` Function:

Input Parameters: The function takes several parameters, including siteConfig (Docusaurus configuration), routesPaths (an array of route paths), head (HTML head content for each route), and options (plugin options for the sitemap).

Exclusion Logic: The function filters out routes that should not be included in the sitemap. Routes ending with `404.html` are excluded, as are routes matching patterns specified in `ignorePatterns` from the options. Additionally, routes with 'noindex' meta tags, identified by `isNoIndexMetaRoute`, are excluded.

Sitemap Construction: This process uses a popular npm package by the obvious name of **sitemap**. The included routes are formatted with appropriate trailing slashes and base URLs. The function constructs a sitemap using the SitemapStream class and writes the formatted routes into the sitemap.

### 3. Integration and Usage:

This sitemap generator function is typically integrated into Docusaurus build processes or plugins. It generates a structured sitemap for the entire documentation website, improving its discoverability by search engines.

## Understanding the Flow

Initialization: The function begins by initializing necessary variables and checking if the site's URL is provided in the configuration. If not, an error is thrown to ensure the URL is properly set.

Exclusion Checks: The function checks each route for exclusion criteria. If a route matches any exclusion condition (404 page, ignore patterns, or 'noindex' meta tag), it is skipped from the sitemap generation process.

Sitemap Generation: Valid routes are formatted, including trailing slashes and base URLs, and added to the sitemap stream. The sitemap stream is then converted to a string and returned as the final output.

## Conclusion

Understanding the inner workings of the Docusaurus sitemap generator gives valuable insights into how SEO-friendly sitemaps are created for static websites. By examining the logic and flow of the code, this helps me understand how to integrate this logic into my own SSG application, which I will talk about in my next post!
Single Responsibility Principle (SRP)
Tags: webdev, programming, tutorial, learning
Published: 2023-11-03 01:05:38


The Single Responsibility Principle (SRP) is the first of the five SOLID principles and states that a class should have only one reason to change. In other words, a class must have a single responsibility within the system, that is, it must do only one thing and do it well. When a class has multiple responsibilities, it becomes difficult to understand, modify, and maintain. By adhering to SRP, classes become more cohesive, specialized and focused on a single task, which results in cleaner and easier to maintain code.

## Example Before Applying SRP in PHP:
```php
class Order {
    private $items;
    private $client;

    public function addItem($item) {
        // logic for adding an item to the order
    }


    public function sendEmailConfirmation($client) {
        // logic to send an order confirmation email to the customer
    }
}
```

In this example, the `Order` class has three responsibilities: adding items to the order, calculating the order total, and sending a confirmation email. This violates the **SRP** as the class has more than one reason to change.
​
## Example After Applying SRP in PHP:

```php
class Order {
    private $items;

    public function addItem($item) {
        // logic for adding an item to the order
    }
}

class EmailService {
    private $client;

    public function sendEmailConfirmation($client) {
        // logic to send an order confirmation email to the customer
    }
}
```

In this refactored example, the `Order` class now only has the responsibility of managing the order items and calculating the total. The responsibility for sending confirmation emails has been moved to the `EmailService` class, which now has the sole responsibility for handling sending emails.

This separation of responsibilities makes the code clearer, more cohesive, and easier to maintain. Furthermore, by following **SRP**, it is simpler to make changes to a single part of the system without affecting other parts, thus promoting software flexibility and extensibility.

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

***

## Support Me

[Youtube - WalterNascimentoBarroso](https://www.youtube.com/channel/UCXm0xRtDRrdnvkW24WmkBqA)
[Github - WalterNascimentoBarroso](https://github.com/walternascimentobarroso)
[Codepen - WalterNascimentoBarroso](https://codepen.io)
Today I learned- Dynamic Path Segments
Published: 2023-11-03 01:04:08

Today I learned about dynamic path segments and used them to improve my dice rolling app. I used these dynamic path segments to support all possible combinations of dice rolls. When we start a path segment with a colon it becomes a dynamic path segment. I also learned how to use the params hash to receive user input. I was able to refactor the code after using the dynamic path segments to make it shorter while still being functional.
I love the "Add Note" feature on Facebook Messenger!
Tags: discuss, socialmedia, facebook, messenger
Published: 2023-11-03 00:55:50

Look I'm not one who gets into things made by **Meta**. It's not that I hate them I just think some censorship on their platforms are beyond socially ethical. For instance I couldn't add a guy I met who works next door to me because we had no mutual friends, why? **Facebook** blocked my request saying that I should only add people that I know lol.

Either way it's inevitable to have to use this network if you want to communicate with people you actually know because let's face it, they're not budging.. yet!

So I noticed this _note_ feature in **Messenger** that let's you put a few words on you display pic. I for one love it! I think it's very innovative (even for **Meta**) and we need new game changing features like this.

Have you tried this feature? What are your thoughts?
A feature-rich, highly customizable AI Web App Template, empowered by Next.js
Tags: apps
Published: 2023-11-04 15:16:59

---
title: A feature-rich, highly customizable AI Web App Template, empowered by Next.js
published: true
date: 2023-11-03 00:38:00 UTC
tags: Apps
canonical_url: https://reactjsexample.com/a-feature-rich-highly-customizable-ai-web-app-template-empowered-by-next-js/
---

# AI Fusion Kit
 ![A feature-rich, highly customizable AI Web App Template, empowered by Next.js](https://reactjsexample.com/content/images/2023/10/Code_2023-10_21-33-20.jpg)

A feature-rich, highly customizable AI Web App Template, empowered by Next.js.

### Screenshots

| | |
| --- | --- |
| ![A feature-rich, highly customizable AI Web App Template, empowered by Next.js](https://camo.githubusercontent.com/8c47b91154690ba5ae8127151f953d1668b9dd33766e71209c54a48fe852f61e/68747470733a2f2f61692d667573696f6e2d6b69742e76657263656c2e6170702f5f6e6578742f696d6167653f75726c3d25324666656174757265642d6461726b2e6a706726773d3139323026713d3735) | ![A feature-rich, highly customizable AI Web App Template, empowered by Next.js](https://camo.githubusercontent.com/04039a54753804d65abefa7ecf81569385059cb4d3787da8ef69cc33d58c2e09/68747470733a2f2f61692d667573696f6e2d6b69742e76657263656c2e6170702f5f6e6578742f696d6167653f75726c3d25324666656174757265642d6d6f62696c652e706e6726773d3139323026713d3735) |

## Demo

- [AI Fusion Kit](https://ai-fusion-kit.vercel.app/)

## Authors

- [@nphivu414](https://github.com/nphivu414)
- [@toproad1407](https://github.com/toproad1407)

## Main stacks

- [Typescript](https://www.typescriptlang.org/)
- [ReactJS](https://reactjs.org/)
- [NextJS](https://nextjs.org/)
- [Supabase](https://supabase.com/)
- [Open AI API](https://platform.openai.com/docs/api-reference)
- [Vercel AI SDK](https://github.com/vercel/ai)
- [TailwindCSS](https://tailwindcss.com/)
- [Shadcn UI](https://ui.shadcn.com/)
- [Next.js AI Chatbot](https://github.com/vercel-labs/ai-chatbot)

## Installation

1. Clone the repo

2. Install dependencies

3. Setup your supabase schema

4. Create a new .env file based on the example defined in `.env.example`.

> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.

## Run Locally

1. Go to the project directory

```
  cd ai-fusion-kit
```

1. Start the web app

```
  yarn dev
```

## GitHub

[View Github](https://github.com/nphivu414/ai-fusion-kit?ref=reactjsexample.com)
The Basics of a Binary Tree (Javascript)
Published: 2023-11-03 00:33:23



When coding we would have some lines of code that would support each other. These sometimes are in random areas of our code. Making our code a bit messy to read and understand. By putting those lines of code into a binary tree our code will become clean. The binary tree is like
a family tree. It holds all information from the parent code to the child code allowing the developer to make complex lines of code.

The binary tree was studied by a man called Cayley. At the time it was seen as a math concept for graphs. Cayley stopped the reachers in 1857 then a man named McKay continued it (unable to find any information on McKay full name and the date when the teacher started again). He later discovered that the binary tree can be used in a database. Because the Binary tree is a concept and not a function, it can be used in any version of any coding language. There is no need to download any extra software to use it.

To use a binary tree you would
First, create an object and give it some values.

```
const obj = {
name: bob,
age: 1
} 
```

Second, give the object another value that is an object or array. for now, let's look at the object version.  
 That new object added in should hold a similar value to the object in it

```
const obj = {
name: bob,
age: 1,
kids: {
name: bob,
age: 1,
kids: {}
}
}
```

.Third, create a function that can loop through the binary tree using recursion. since it will be tricky to access some of the data.

```
function recursion(obj, target)=>{
if(obj.name === target){
 return True;
}else if(Object.keys(obj).length === 0){
return false
}

return recursion(obj.kids, target);
}

//this should just loop through the given object and return true if
//it finds the target or false if it doesn't find the target

```
This should just loop through the given object and return true if it finds the target or false if it doesn't find the target. One way to use a Binary tree is to store information about your family. Like who are your parents, grandparents, siblings, your kids, your grandchild, and etc. And, with their information about the time when they were born to when they died.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnexu4111rll2nefds9t.png)

Another way is to use it for video game enemies. When writing code for an enemy you may realize that two of the enemies look and act the same. So instead of copying the same code from one enemy to another. You can make one enemy the parent and the other one
the child. The child will have the same code as the parent.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f142b3cmpij1datkkr9x.png)


the second screens shot is edited in gimp
//links
https://www.ukessays.com/essays/english-language/history-and-introduction-of-binary-trees-english-language-essay.php
https://www.cetconnect.org/how-to-make-your-own-family-tree/
ONIS DIGTAL THE EXPERT HACKER
Published: 2023-11-03 00:20:43

I want to share my recent experience with ONIS DIGITAL hacker, a true professional in the field. I cannot express enough gratitude for the exceptional service they provided me. Recently, I encountered a distressing situation where my wallet was lost, and I had virtually given up hope of ever recovering it. It contained valuable personal information and important documents, making the loss even more worrisome. Despite my efforts, no one seemed to be able to assist me in retrieving it. In a stroke of luck, I came across ONIS DIGITAL hacker, and after reading through their testimonials and success stories, I decided to reach out to them. From the very beginning, their level of professionalism and commitment to my case was unparalleled. They patiently listened to my situation, asking pertinent questions to gather as much information as possible. Within a surprisingly short period of time, ONIS DIGITAL hacker displayed an impressive set of skills and techniques, enabling them to locate and retrieve my lost wallet. I was floored by their expertise, as it seemed like an impossible task for anyone else I had approached before. The accuracy and efficiency with which they navigated through the complexities of the digital sphere amazed me. Not only did ONIS DIGITAL hacker recover my wallet, but they also ensured its integrity and promptly returned it to me. Their attention to detail and adherence to ethical standards further reflect their professionalism and commitment to customer satisfaction. I wholeheartedly recommend ONIS DIGITAL hacker to anyone in need of digital investigation or recovery services. Their exceptional expertise in their field, combined with their reliability and dedication, sets them apart from the rest. Trusting them with such a crucial matter turned out to be one of the best decisions I have made. Once again, I express my deepest appreciation to ONIS DIGITAL hacker for their remarkable assistance and for going above and beyond to help me. If there is anything I can do to recommend or vouch for their outstanding services, please do not hesitate to reach out.
Is There a Faster Alternative to JSON?
Tags: discuss
Published: 2023-11-03 00:00:00

---
published_at : 2023-11-03 00:00 +0000
---
What techniques or alternatives have you discovered to improve JSON performance and accelerate application speed?

Follow the DEVteam for more discussions and online camaraderie! 

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}