teleren/devto huggingface dataset:
how to set the vite to support use axios in web-worker
Tags: vite
Published: 2023-03-08 04:56:18

I need help, I use veu3 + vite to develop web-worker.

On dev env, I could use axios in worker to get data from server.
But when I build it and deploy it to test env, the worker throw an error that could not find axios.

I ask new bing, it told me axios cannot use in web-worker. If you want to use it ,you need to set plugins.

But after reading the documents, I still don't know how to set vite.config.js to support using axios in worker. 

SOS! Please help me
BERAPA LAMA USIA BAHASA PROGRAM KAMU?
Tags: webdev, programming, tutorial, productivity
Published: 2023-03-08 04:21:42


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

Ada yang seumuran sama kamu?😛Yuk belajar bareng serta diskusi dikolom komentar, serta di save biar ga lupa💬😝

🌱Follow : @appardana
💭Stay Young, Be Innovative and Keep Learning

#Content #Tips #Trick #Knwoledge #Management #Java #PHP #Javascript #Phyton #C #Web #Skills #IT #Backend #Developer #Roadmap #SelfImprovement #Growth #Aditria #Pardana #AditriaPardana #appardana #iAppTech ⚛️💻

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/610yakfisi72ul299h9v.jpg)
Backport `Data.define` for Ruby 2.7, 3.0, 3.1
Tags: ruby
Published: 2023-03-08 04:17:00

---
title: Backport `Data.define` for Ruby 2.7, 3.0, 3.1
published: true
description: Data class introduced in Ruby 3.2 is really amazing. Shall we use it also on Rails apps using Ruby 2.7-3.1 :)
tags: Ruby
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-03-08 04:17 +0000
---

`Data.define` is introduced by Zverok in Ruby 3.2.

{% embed https://dev.to/baweaver/new-in-ruby-32-datadefine-2819 %}

This is really amazing and desired by most Rubyists. However, regardless to say, the function is not available in Ruby 2.7-3.1 applications. Some users (including me), at this moment, still uses older versions of Ruby with struggling to upgrade large Rails applications.

## data_class_factory

I developed a backport of `Data.define` for Ruby 2.7, 3.0, 3.1.
https://rubygems.org/gems/data_class_factory

```ruby
require 'data_class_factory'

Point = Data.define(:x, :y) do
  def norm
    Math.sqrt(x * x + y * y)
  end
end

p1 = Point.new(x: 3, y: 4)
p2 = Point.new(x: 3, y: 4)

p1 == p2 # => true
p1.norm # => 5
```

It covers most of [the spec](https://github.com/ruby/ruby/blob/v3_2_0/test/ruby/test_data.rb) of original `Data` class introduced in Ruby 3.2.
https://github.com/YusukeIwaki/data_class_factory/blob/0.1.0/test/data_test.rb

## Feedback is really welcome :)

I personally use this library on my Rails apps. So try this lib for your app, and let me know issues and feel free to feedback.
https://github.com/YusukeIwaki/data_class_factory/issues
Building Better React Components with useState: An In-Depth Understanding
Tags: javascript, react, webdev, beginners
Published: 2023-03-08 04:01:11


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

**Introduction**

React is a popular JavaScript library used for building user interfaces. One of its most commonly used features is the useState hook, which allows developers to manage state within their components. In this blog post, we'll take a look at how the useState hook works behind the scenes.

At a high level, the useState hook is a function that takes an initial value and returns an array containing two values: the current state value and a function to update that value. Let's take a closer look at how this works step by step.

**1 Creating a state variable**
When a component calls the useState hook, React creates a state variable for that component. This state variable is an object that contains the current state value, as well as a reference to the function used to update that value.

**2 Initializing the state value**
The initial value passed to the useState hook is used to set the initial state value. This value is stored in the state variable created in step 1.

**3 Updating the state value**
When the function returned by the useState hook is called, React updates the state value stored in the state variable. This update triggers a re-render of the component, causing any changes to the state value to be reflected in the component's output.

**4 Managing multiple state values**
Components can use the useState hook multiple times to manage multiple state values. Each call to useState creates a separate state variable, allowing components to manage multiple pieces of state independently.

**5 Updating state asynchronously**
One important thing to note is that updating state with the function returned by useState is an asynchronous operation. This means that if you call the function multiple times in rapid succession, React may batch the updates together for performance reasons. This can lead to unexpected behavior if you're not careful.

```
import React, { useState } from 'react';

function Counter() {
  // Define a state variable called `count`, with an initial value of 0
  const [count, setCount] = useState(0);

  // Define a function called `increment`, which increases `count` by 1 when called
  function increment() {
    setCount(count + 1);
  }

  // Define a function called `decrement`, which decreases `count` by 1 when called
  function decrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

```
**conclusion**.
the useState hook is a powerful tool for managing state within React components. By creating and updating state variables behind the scenes, it allows developers to build dynamic and interactive user interfaces. Understanding how the useState hook works can help developers write more effective and efficient code, and avoid common pitfalls when working with state in React.
10 Best ChatGPT Examples of 2023
Tags: chatgpt, 2023, devlive, zegocloud
Published: 2023-03-08 03:23:04

ChatGPT is now incredibly popular and utilized for nearly anything throughout the world. It is used for a wide range of topics that span from asking simple queries to creating complicated computer algorithms. If you're a ChatGPT addict, read this post to learn about the finest ChatGPT examples.

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

## 10 Great ChatGPT Examples to Consider

Looking for ChatGPT samples on the internet will yield a plethora of inquiries and queries that people have posed to the platform. This AI-powered chatbot is popular among students, writers, and developers, but it is also employed in other professions. To begin, here are 10 great ChatGPT examples that clearly demonstrate ChatGPT's excellence:

1. ChatGPT as A Coder
2. ChatGPT as A Chef
3. ChatGPT as A Comedian
4. ChatGPT on Twitter
5. ChatGPT as A Poet
6. ChatGPT as A Storyteller
7. ChatGPT Helping Students
8. ChatGPT on Reddit
9. ChatGPT as An Emergency Therapist
10. ChatGPT being A Fun Bot

To learn more in depth about all these examples, make sure you read our post [HERE](https://www.zegocloud.com/blog/chatgpt-examples).

These ChatGPT samples demonstrated how effective a basic talking feature can be. While video and phone conversations are becoming more popular, nothing beats interactive text chat. You may use the [ZEGOCLOUD In-app Chat API](https://www.zegocloud.com/product/in-app-chat) to add robust talking functionality to your current apps. Additionally, it enables you to develop a world-class messaging app at a reasonable cost. If you also want to create a chatting application, ZEGOCLOUD In-app Chat API will be the best choice due to its impressive features.

Visit Video, Voice & Chat API for Real-Time Communication (http://zegocloud.com) to learn more!
6 Tips for writing maintainable Code
Tags: programming, devjournal, coding, codequality
Published: 2023-03-08 02:32:00

Writing maintainable code is a communication skill. 

Here are a few tips for writing it 👇

1. Comment your code

2. Use less code.

3. Don't forget about error checking.

4. Write code that can be easily modified.

5. Write code that can be easily tested.

6. Fix the problem, not the symptoms.


![6 Tips](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opey639m1hovmvonij8p.png)
Graph Database and Apache AGE
Tags: apacheage, database, postgres
Published: 2023-03-08 02:29:42

**What is Apache AGE?**
Apache Age is an extension to PostgreSQL that enables the use of graph databases, allowing complex and interconnected data to be modeled and queried efficiently and intuitively.

**How can I install this extension?**
The Github Repository of this project is [Apache AGE](https://github.com/apache/age). And you can install this extension to PostgreSQL by a few steps.

**Installing Apache AGE**
By the way I'm using Arch Linux for WSL and Version 12 of PostgreSQL. With your terminal, follow the scripts.

**To clone the repository:**
`git clone https://github.com/apache/age.git
``cd age`

**Setting the enviroment variable**
`export PG_CONFIG=/usr/local/pgsql-12/bin/pg_config
`
**Install the Apache AGE**
`make install`

**Let's try it!**
After run your PostgreSQL, use this command on your terminal:

`CREATE EXTENSION age;`
`LOAD 'age';`

**If everything is alright your terminal will show you something like this:**
```
postgres=# CREATE EXTENSION age;
CREATE EXTENSION
postgres=# LOAD 'age';
LOAD
postgres=#
```
**References:**
[Apache AGE](https://github.com/apache/age)
[Setup Apache AGE](https://age.apache.org/)
🎊Finished my portfolio🎊
Tags: beginners, programming, frontend, portfolio
Published: 2023-03-08 02:18:10

Hey guys!👋🏾
Finally finished my portfolio. I used Next.js, Tailwind CSS and Framer Motion. I wanted to create something simple yet elegant. These are the portfolios that inspired me:

- [Dunks1980](https://dunks1980.com/) - I really liked the simplicity and animations of this portfolio.

- [Lauren Waller](https://www.lauren-waller.com/) - I liked simplicity, the color scheme, and the font. Too bad the Grandslang Roman font is not free 😟. I don't have the exact background color but 'nude pink' is still a nice color.

- [Keita Yamada](https://p5aholic.me/) - I liked the simplicity and color scheme. But mainly the splash screen.

And here's the [link ](https://cp-portfolio-iota.vercel.app/)to my portfolio 😁
Some things I've learned
Published: 2023-03-08 02:10:48

I'm early on in my journey as a developer and have a ton yet to learn. One thing I've realized though is how important it is develop a trusting realtionship with the customer. This can be a difficult task for newer businesses as far how to implement that social proof. There are ways to overcome this obstacle and implement icons to display that trust the customer will seek. For more established buisnesses implementing testimonials is an excellent way to show the customer you are a trustworthy company. As developers this is something that's important to keep in mind as the website is the first experience most people have with a buisness and brand.
JavaScript Sets
Tags: webdev, javascript, beginners, programming
Published: 2023-03-08 01:59:09

Set is one of the new Data Structures that got added to JS with ES6.

- Sets are not ordered like array but iterable
- Sets can only have unique values even if we added duplicate values

```jsx
//we can create sets like this
const mySet = new Set([1, 2, 2, 5, 5]);
const mySet2 = new Set(['pizza','pasta', 'fries','burger','pizza', 'cheese']);
const mySet3 = new Set('abdelrahman');
console.log(mySet,mySet2,mySet3);
//Set(3) {1, 2, 5}  //no duplicates
//Set(5) {'pizza', 'pasta', 'fries', 'burger', 'cheese'}
//Set(9) {'a', 'b', 'd', 'e', 'l', 'r','h','m','n'}
```

- We can get set size like that
- size of the unique values only

```jsx
console.log(mySet.size); //3
```

- we can also check element is in the set or not

```jsx
console.log(mySet.has(2));//true 
console.log(mySet2.has('milk'));//false 
```

- we can add and delete values from a Set

```jsx
mySet.add(10);
mySet.delete(2);
console.log(mySet);//{1, 5, 10}
```

- there is no way of retrieving values from a set that’s because if all values are unique and if their does not matter there is no point of retrieving values out of a set and if your goal is to actually store values in order then the best use case is an **Array**

- we can iterate over a set cause they are iterable as we said before

```jsx
for(const item of mySet) console.log(item);
// 1
// 5
// 10
```

- the main use cause of sets is actually to remove duplicate values from arrays

```jsx
const arr = [10,10,20,20,30];
const uniqueArr = new Set(arr);
console.log(uniqueArr); //{10, 20, 30}

//if u want to save the unique values to an array again u can use the spread operator like that cause it work on all iterables
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); //[10, 20, 30]
```

- and finally u can delete all set element by using clear method

```jsx
arr.clear();
```
Crispin: Logger Facade for Flutter
Tags: flutter, tutorial, opensource, tooling
Published: 2023-03-08 01:40:23

# Introducing Crispin!
From [Sentry](https://sentry.io/) to [Splunk](https://www.splunk.com/) to `console` logging, controlling all of these log targets can quickly get complicated and distracting from our feature code. 

While several languages have Logging facades, Flutter and Dart were lacking. As such, @gillarohith and I created one for Flutter and Dart that is heavily inspired by [WinstonJS](https://github.com/winstonjs/winston). We call it [Crispin](https://pub.dev/packages/crispin)

While you can read more examples and details in [our documentation](https://docs.page/delvefore/crispin), below is some quick start usage and setup.

## Basic Usage
```dart
void getUser () async {
  try {
    User user = await DataService.getUserById('1');
    Crispin().info('User data', meta: user);
  } catch(e, s) {
    Crispin().error('User fetching failed', error: e, stackTrace: s);
  }
}
```

## Setup
```dart
import 'package:crispin/crispin.dart';
import 'package:logger_crispin_transport/logger_crispin_transport.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:sentry_crispin_transport/src/sentry_crispin_transport.dart';

void main() {
  Crispin().addTransport(
    LoggerCrispinTransport(
       LoggerCrispinTransportOptions(
          level: dotenv.get('LOGGER_LEVEL', 'warn'),
       ),
    ),
  );
  Crispin().addTransport(
    SentryCrispinTransport(
      SentryCrispinTransportOptions(
        level: dotenv.get('SENTRY_LEVEL', 'error'),
        //... keys
      ),
    ),
  );
}
```

## Next Steps
I have channels planned but welcome contributions and other loggers (log targets)!
LanguageTool: The Free Open-Source Alternative to Grammarly
Tags: opensource, elestio, languagetool
Published: 2023-10-11 13:05:37

---
title: LanguageTool: The Free Open-Source Alternative to Grammarly
published: true
date: 2023-03-08 00:30:20 UTC
tags: opensource, elestio, languagetool
canonical_url: https://elestio.hashnode.dev/languagetool-the-free-open-source-alternative-to-grammarly-6e2f677c1446
---

Do you struggle with writing in a non-native language? Introducing LanguageTool, an open-source proofreading and grammar-checking software that can improve your writing accuracy and clarity.

If you prefer, the video version is available here:

<iframe src="https://www.youtube.com/embed/thZQPrn2wZ8?feature=oembed" width="700" height="393"></iframe>

Gone are the days of relying on manual proofreading or expensive grammar checkers, as LanguageTool can detect and correct grammar mistakes, spelling errors, and style issues in over 20 languages, including English, Spanish, French, Japanese, and Chinese.

You can use LanguageTool directly on your browser with extensions or on your desktop and mobile with the available applications (unfortunately Android isnt covered yet). The software can even be integrated into your own website or software with the API.

LanguageTool uses advanced algorithms and language models to analyze your text and suggest corrections or improvements. It can detect a wide range of errors, such as missing articles, incorrect verb conjugations, redundant phrases, and ambiguous expressions. You can customize its settings and rules to fit your specific needs or writing style.

In our demo, we show how LanguageTool can be hosted on your own server with Elestio to enable the API and browser extension. We also showcase the softwares capabilities by demonstrating how it differs from the cloud version with example sentences. We show how LanguageTool can be used to detect and suggest alternatives to misspelled words, and how it compares to Grammarly, which requires a premium subscription for advanced features.

Overall, LanguageTool is a free and highly customizable tool that can help improve your writing skills. Whether youre a student, writer, translator, or non-native speaker, LanguageTool is a no-brainer when it comes to spelling, grammar, and style checking.

_Originally published at_ [_https://blog.elest.io_](https://blog.elest.io/languagetool-the-free-open-source-alternative-to-grammarly/) _on March 8, 2023._
🌎🚀 Error Handling in Web Application
Tags: webdev, javascript, react, beginners
Published: 2023-03-08 00:30:00



<img src="https://media.giphy.com/media/3orif9u2bESVGXImuk/giphy.gif">

🌎 In a globalized web app, error handling is a critical aspect of providing a smooth user experience. When an error occurs, it's essential to provide the user with meaningful feedback and quickly resolve the issue to minimize any impact on their experience.

## 🔍 Source maps:

Assuming that you are using webpack to bundle your React application, you can enable source maps by adding the following configuration to your webpack config file:

```javascript
module.exports = {
  // ...other configurations
  devtool: 'source-map',
}
```
This will generate source maps for your compiled code, which can be used to identify and debug errors in the production environment.

##  👀 Live monitors:

One of the popular live monitoring tools for React applications is Sentry. You can integrate Sentry in your React application by installing the npm library and it supports the integrations with other platforms(slack, mail, etc) to notify the developer's in real-time.

```javascript
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';

Sentry.init({
  dsn: 'your-Sentry-DSN',
  integrations: [
    new Integrations.BrowserTracing(),
  ],
  tracesSampleRate: 1.0,
});
```

## 🚧 Error boundaries:

Assuming that you have a component that is prone to error, you can wrap it in an error boundary component as follows:

```javascript
class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error(error, errorInfo);
   // raise sentry here
  }

  render() {
    if (this.state.hasError) {
      return <h1>💥 Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

class MyComponent extends React.Component {
  // ...component code that may throw an error

  render() {
    return (
      <MyErrorBoundary>
        {/* component that may throw an error */}
      </MyErrorBoundary>
    );
  }
}
```

By implementing best practices such as source maps, live monitors, error boundaries, and user-friendly error messages, developers can ensure that their application works flawlessly in the production environment. This not only helps in retaining users but also improves the reputation of the application in the global market.
To deploy and invoke a Soroban smart contract using Soroban Python SDK, you can follow the steps below
Published: 2023-03-08 00:01:27

Install the Soroban Python SDK:

```
pip install soroban-sdk
```
Import the necessary modules:



```
from soroban_sdk import Soroban, Account
Create a Soroban instance:

```


```
soroban = Soroban('https://api.soroban.co/', 'my-api-key')
Note: Replace 'my-api-key' with your actual Soroban API key.
```

Create an Account instance:



```
account = Account.from_private_key('my-private-key')
Note: Replace 'my-private-key' with your actual private key.
```

Define the smart contract code:
python


```
contract_code = """
pragma solidity ^0.8.0;

contract MyContract {
    uint256 public value;

    function setValue(uint256 _value) public {
        value = _value;
    }
}
```
"""
Note: This is just an example contract code. You should replace it with your actual smart contract code.

Compile the smart contract code:
makefile


```
compiled_contract = soroban.compile_contract(contract_code)
Deploy the smart contract:
css
```


```
deployed_contract = soroban.deploy_contract(compiled_contract['bytecode'], account)
Get the contract address:
css
```


```
contract_address = deployed_contract['contractAddress']
```
Invoke a function in the smart contract:
makefile


```
function_name = 'setValue'
function_args = [42]
soroban.invoke_contract_function(contract_address, function_name, function_args, account)
```
Note: Replace 'setValue' with the name of the function you want to call, and [42] with the arguments you want to pass to the function.
Perforce server
Tags: gamedev, perforce
Published: 2023-05-03 18:18:26

---
title: Perforce server
published: true
date: 2023-03-08 00:00:00 UTC
tags: gamedev, perforce
canonical_url: https://tinygame.dev/posts/Perforce-server/
---

## You need source control

If you're not using source control, start using source control. All game companies do this, small or large. You should be doing it as well.

The most basic features will immediately be useful. You'll get revision history and will be able to diff and see what's changed. You'll have a much easier time collaborating with others if you want or need to do that. If you set up a server off-site, it also acts as a solid backup in case something happens to your system.

## Use Perforce

Game companies working on anything other than trivial projects will most likely use [Perforce](https://www.perforce.com). It can grow to be expensive but the license is free for 5 seats so you might not need to worry about it. Git is popular with programmers but when you deal with large binary assets the workflow tends to cause issues. Binary assets can't be diffed (most of the time) and you can't merge them. Even if you don't collaborate with others heavily and don't rely on Git's distributed workflow, large binary files might cause issues and you'll need to deal with [LFS](https://git-lfs.com).

For [Magivoid](https://tinygame.dev/tags/magivoid/) I set up a Perforce server on a 1 GB Nanode running Ubuntu on [Linode](https://www.linode.com/pricing/#compute-shared). This is the tiniest shared VM they have and the performance is enough for my use. The 25 GB storage handles 10 GB of Magivoid code and data just fine for now. If you don't want to spend $5 per month for your server you can use any old PC you might have at home. The recommended spec for a Perforce server are [fairly modest](https://portal.perforce.com/s/article/2957).