teleren/devto huggingface dataset:
Coding Smart: Using TypeChain for Type Generation from Smart Contract ABI
Tags: typescript, web3, ethereum
Published: 2023-06-29 11:39:20

Utilizing the right tools is crucial to establishing a typesafe development environment when navigating blockchain data. One such instrument is TypeChain, which streamlines this process by converting ABI (Application Binary Interface) files into TypeScript types. This straightforward conversion allows developers to construct fully typesafe queries or mutations with react-query, leading to an enhanced development experience.

Let's delve into how this process works.

First, we need to install the necessary packages: `typechain` and `@typechain/ethers-v5`.

Installation is straightforward and can be executed by running the following commands:

`yarn add typechain @typechain/ethers-v5 -D`

Next, it's recommended to house your ABIs in a dedicated folder for better organization. For example, you could place them in src/abis. Let's also assume that the output directory is types/abis.

To facilitate this process, an npm script should be written as follows to package.json:

`"typechain": "typechain --target ethers-v5 --out-dir ./types/config/abis './src/config/abis/*.json'"`

The script will utilize TypeChain to generate TypeScript typings for Ethereum smart contracts. It targets ethers-v5 and specifies an output directory for the typings.

Running this script is as simple as executing `yarn typechain` in your terminal.

In conclusion, by adopting TypeChain and integrating it into your development environment, you can easily interact with your contract and elevate the overall developer experience. The ability to create type-safe queries or mutations, combined with an organized, dedicated location for your ABIs, paves the way for a more streamlined and efficient coding experience.
What is Initialization in React?
Tags: react
Published: 2023-06-29 11:36:53

In React, initialization refers to the process of setting up the initial state and behavior of a component when it is first rendered. Initialization is typically performed within a special method called the constructor, which is executed once during the creation of a component.

During initialization, developers can define the initial state of the component, assign values to variables or properties, bind event handlers, or perform any other setup tasks required for the component's functionality.

The constructor method is a built-in method in React components that is called automatically when a component is created. It is responsible for initializing the component's internal state and setting up any necessary bindings or configurations.

**Here is an example of a constructor in a React component:**

```jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      name: '',
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  }

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;
```

In this example, the constructor initializes the component's state with a counter set to 0 and an empty name. It also binds the `handleClick` method to the component's context using the `bind` method, ensuring that it has access to the correct `this` value when invoked.

By obtaining [React Course](https://www.edureka.co/reactjs-redux-certification-training), you can advance your career in React. With this course, you can demonstrate your expertise in applications using React concepts such as JSX, Redux, Asynchronous Programming using Redux-Saga middleware, Fetch data using GraphQL, many more fundamental concepts, and many more critical concepts among others.  

By performing initialization tasks in the constructor, React components are set up with the necessary initial state and behaviors. This allows components to render correctly and respond to user interactions or changes in state as the application runs.
Estimating Sequential Scan Cost in PostgreSQL
Tags: apacheage, postgres
Published: 2023-06-29 11:30:09

In PostgreSQL, query optimization plays a crucial role in achieving efficient query performance. Cost estimation is a key component of this optimization process, allowing the database to estimate the cost of various operations. This article focuses on the estimation of the sequential scan cost, one of the fundamental operations in PostgreSQL, and explores how it is calculated for a specific query.

## Understanding Sequential Scan Cost:
The cost of a sequential scan operation is estimated using the cost_seqscan() function. To illustrate the estimation process, let's consider the following query:

testdb=# SELECT * FROM tbl WHERE id < 8000;

## Estimating Run Cost:
The run cost of a sequential scan is composed of two parts: the CPU run cost and the disk run cost. The CPU run cost is calculated based on the number of tuples (Ntuple) and the CPU costs (cpu_tuple_cost and cpu_operator_cost) set in the postgresql.conf file. Similarly, the disk run cost is determined by the number of pages (Npage) and the sequential page cost (seq_page_cost). The default values for these costs are 1.0, 0.01, 0.0025, and 1.0, respectively.

To estimate the run cost, we can use the following equation:

'run cost' = ('cpu run cost' + 'disk run cost') = ((cpu_tuple_cost + cpu_operator_cost) × Ntuple) + (seq_page_cost × Npage)

To determine Ntuple and Npage, we can execute the following query:

testdb=# SELECT relpages, reltuples FROM pg_class WHERE relname = 'tbl';

In our example, Ntuple is 10,000 and Npage is 45.

Plugging these values into the equation, we get:

'run cost' = ((0.01 + 0.0025) × 10,000) + (1.0 × 45) = 170.0

## Calculating Total Cost:
The total cost is the sum of the start-up cost and the run cost. In the case of a sequential scan, the start-up cost is 0.0. Therefore, the total cost is equal to the run cost. In our example, the total cost is 170.0.

## Confirming the Cost Estimation:
To validate the cost estimation, we can use the EXPLAIN command on our query:

testdb=# EXPLAIN SELECT * FROM tbl WHERE id < 8000;

The output will display the query plan with the associated costs. In our case, we can observe that the start-up cost is 0.00 and the total cost is 170.00. Additionally, it is estimated that 8,000 rows (tuples) will be selected by scanning all rows.

Understanding how PostgreSQL estimates the cost of a sequential scan operation is essential for query optimization. By analyzing the CPU and disk costs based on the number of tuples and pages, PostgreSQL can determine the most efficient execution plan. By considering the estimated costs and analyzing the query plan, developers and database administrators can make informed decisions to optimize performance in PostgreSQL.
I Hosted My First Ever Website
Tags: webdev, beginners, programming
Published: 2023-06-29 11:23:08



REMEMBER THIS GUY???

Y’all I have good news…. I am super excited. Literally screaming my lungs out.
So the good news is I HOSTED MY FIRST EVER WEBSITE!!!
https://onomeblessing.com/

Well I have been working on this project for some time now and I am going to say it hasn’t been easy. Working on it for hours and encountering lots and lots of errors, debugging, and going back to it non-stop. I do get frustrated when I’m stuck because of errors. But like the saying, No Bug; No Life.

I worked on this project using HTML, CSS and JavaScript. When working on this project I learnt a lot of new things. I learnt how to buy a domain name, I learnt about SSL and how important it is to your site making it safe and secure for visitors, I learnt how to host a website, I learnt how to link a domain and hosting bought from two different hosting company using DNS, also I learnt SEO and how it works, least I forget I also learnt about optimization and its importance. Building this website was fun but hosting it was more interesting as I got to learn and try out new things for the first time. Everything ain’t perfect with the site but a wise man once said to me “HOST IT UGLY BUT HOST IT!  QUIT PROCASTINATING!!” and that prompt this brave step…

My journey in Tech as a Female Web Developer hasn’t been easy but it’s filled with so much progress and growth and it fills my heart with so much joy and accomplishment. I get super excited when I learn something new it gives me this feeling I can’t explain. To my fellow junior Web Devs….. Learn from Dev.to, Learn from Instagram, Learn from Stack Overflow, Learn from GitHub…. It pays…. But most especially, learn from Senior Developers…. I am so grateful for having such a wonderful boss and an amazing college who are part of my progress so far. You guys are the best @justiceorogun @britinogn
 @rawgold50 

Please I would love as many support and correction and contributions as possible… You all are my hero
Young-Tech-Lady.
Async vs Defer in JavaScript
Tags: async, defer, javascript, webdev
Published: 2023-06-29 10:55:51

In the world of web development, performance is key. One of the ways to improve the performance of your website is by controlling how your JavaScript files are loaded. 

This is where the `async` and `defer` attributes come into play. These attributes, when used with the `<script>` tag, can significantly impact the loading and execution of your JavaScript files.

## What does Async do?

The `async` attribute in JavaScript allows the browser to continue parsing the HTML document while a script is being downloaded. 

This means that the script is executed as soon as it is available, even if the HTML is not fully parsed. This can speed up the loading time of your page, but it also means that scripts may be executed out of order if they are loaded at different speeds.

## What does Defer do?

On the other hand, the `defer` attribute tells the browser to continue parsing the HTML document while the script is being downloaded, but to wait until the HTML is fully parsed before executing the script. 

This ensures that scripts are executed in the order they appear in the HTML document, which can be important if one script depends on another.

## Which is better?

The choice between `async` and `defer` depends on the specific needs of your website. If your scripts are independent and do not rely on each other, `async` can be a good choice because it allows scripts to execute as soon as they are available. 

However, if your scripts depend on each other, `defer` may be a better choice because it ensures that scripts are executed in the correct order.

## What happens when you use Async and Defer together?

Technically, you can use both `async` and `defer` attributes on the same `<script>` tag. However, this is not recommended. 

The reason is that `async` and `defer` have different execution behaviors, and using them together can lead to inconsistent results across different browsers.

According to the HTML specification, if both `async` and `defer` are present, the `async` attribute takes precedence in modern browsers, while older browsers that do not support `async` will fall back to `defer`. 

This can be useful if you want to use `async` but also want to provide a fallback for older browsers. However, it's important to use this combination intentionally and understand the potential cross-browser implications.

## Conclusion

In conclusion, `async` and `defer` are powerful tools for controlling how your JavaScript files are loaded and executed. 

They can help improve the performance of your website, but they should be used with care. Always consider the dependencies between your scripts and the potential cross-browser implications before deciding which attribute to use.
Post-Vacation Pull Request
Tags: github, opensource, programming
Published: 2023-06-29 10:51:02

So I just got home from vacation.

What better way to ease back into my normal life than to contribute to an open source project?

The issue with that is that usually everything that someone of my abilities could tackle has already been snapped up.

Guess what? I found an [untouched repository](https://github.com/szabgab/awesome-lists) with absolutely zero code contributions required. You're welcome.

_I_ made a request, and I _never_ make requests. It's that easy.

Go check out the original post about making an impact in open source [here](https://dev.to/szabgab/a-small-contribution-is-still-valuable-13a3).

Happy contributing! ✌
Creating a customer loyalty program that actually works
Published: 2023-06-29 10:00:47


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

💼 Creating a Customer Loyalty Program That Actually Works! 💪🎉

As businesses strive to build long-lasting relationships with their customers, a well-designed customer loyalty program can make all the difference. But how can we ensure its success? Here are three key elements that should be at the core of any effective loyalty initiative:

1️⃣ Personalization: Tailoring rewards and experiences to individual preferences strengthens customer engagement and fosters loyalty.

2️⃣ Simplicity: Keeping the program simple and easy to understand eliminates barriers and encourages participation.

3️⃣ Continuous Value: Regularly offering enticing rewards and surprises to customers keeps them excited and coming back for more.

Remember, a successful loyalty program isn't just about rewards—it's about building genuine connections with your customers. Let's create a program that truly delights and keeps our customers loyal for life! 🤝💙

[https://www.webmaxy.co/egrowth/customer-loyalty/](https://www.webmaxy.co/egrowth/customer-loyalty/)

Want to create a customer loyalty program? Start your Webmaxy eGrowth journey today! 
[https://www.webmaxy.co/egrowth/](https://www.webmaxy.co/egrowth/)
#customerloyalty #customerloyaltymarketing #loyalcustomer #marketingloyalty #customerloyaltysolutions #whatiscustomerloyalty #customerloyaltyinmarketing #loyaltymarketing #whatareloyalcustomers #whatisaloyalcustomer #definitionofcustomerloyalty #loyalcustomerdefinition #whatisaloyalcustomer #loyalconsumer #customerloyaltydefinition #clientsloyalty #definecustomerloyalty #customersloyalty #loyalcustomermeaning #loyalclients #loyaltyinbusiness #customerloyaltymarketing
Apache AGE SET Clause.
Published: 2023-06-29 10:18:58

**Introduction**
Apache AGE(AGE) is a PostgreSQL extension that enables hybrid queries using PostgreSQL. It boasts of a `SET` clause which is used in adding labels on properties of already created vertices and edges. In this blog post, I am going to explain how these are done with examples.

**Prerequisites.**
I presume you have installed or have knowledge of the following.

1. Postgres installed from [source](https://dev.to/chidera/step-by-step-guide-on-installing-wsl-and-postgresql-from-source-code-on-windows-5c84) code.
2. Apache AGE installed from [source](https://dev.to/chidera/age-installation-guide-for-windows-2c7p) code.
3. Basic knowledge of graph [terminologies](https://dev.to/chidera/a-simple-guide-to-graph-databases-for-beginners-3log).
If otherwise, the hyperlinks in each one will point you where to install them.

Supposing you have a graph named `food`, with the following Vertices. 


![Image showing all vertices created in a graph known as food](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h8x3tsjnrzxp1ilv1gf.jpg)

Details on how this graph was created can be seen in this [blog](https://dev.to/chidera/understanding-age-skip-and-limit-clauses-3n2a) post.

- The `SET` clause can be used to add a new property on a vertex, by executing the query below. 
```
SELECT * FROM cypher('food', $$ MATCH (v:Recipes) SET v.meat = 'beef' RETURN v
$$) as (v agtype);
```
This query will add a new property called `meat` to the vertex `Recipes`

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

- It can also be used to delete a property by setting its value to null.
```
SELECT * FROM cypher('food', $$
MATCH (v:Recipes)
   SET v.meat = null RETURN v
$$) as (v agtype);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iub4n6rpp9q8bgmhtxvv.jpg)
In the image above, the `MATCH` clause was used to select the vertex `Recipes` and its property `meat` was removed by equating its value to null.

- It can be used to add multiple properties to a vertex at the same time, as can be seen in the image below.
```
 SELECT *
FROM cypher('food', $$
   MATCH (v:Recipes {name: 'Spaghetti'})
   SET v.meat = 'beef',v.spice ="maggi" RETURN v
$$) as (v agtype);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/625sfy2lmbuy1ddqwzf2.jpg)

**Conclusion**
The AGE `SET` clause is very useful as it helps greatly in manipulating existing vertices.
advrcntr3-dll
Published: 2023-06-29 10:11:38

Hi,
To all online web users' friends, I facing an error regarding the common [fix advrcntr3.dll](https://pcpatchedup.com/advrcntr3-dll) missing errors in my computer. This error is the crashing of all files and applications. So someone please me resolve this problem. And sorry I am not a native lecturer pardon me for my imperfect English.

Avni Sharma
CirCO Coworking Space
Published: 2023-06-29 10:07:24

"CirCO https://circo.co/ là đơn vị cung cấp đa dạng giải pháp không gian làm việc linh hoạt như: văn phòng chia sẻ, văn phòng ảo, văn phòng riêng, ... giúp hỗ trợ, thúc đẩy sự phát triển của doanh nghiệp và mang đến những trải nghiệm tuyệt vời nhất.
Address: 384 Hoàng Diệu, Phường 6, quận 4, TPHCM. 
Phone: 19003384. 
Website: https://circo.co/ 
#vanphongao #vanphongchiase #coworkingspace #vanphongrieng #chothuevanphonghcm"
https://circo.co/services/virtual-office
https://circo.co/services/private-office
https://circo.co/blogs/van-phong-chia-se
https://circo.co/blogs/coworking-space
https://circo.co/blogs/co-working-space-hcm

https://goo.gl/maps/Gj33FGcjVSckhALM9
https://www.facebook.com/circo.co
https://www.instagram.com/circo.co/
https://www.linkedin.com/company/circoco/
https://www.youtube.com/channel/UCTxyJbBcOsEgYfnXZbOxg7g
Use of Dev.to API using NodeJS and Axios
Tags: node, beginners, api, codenewbie
Published: 2023-06-29 10:07:02

**Hello Reader,**

_**Here we will discuss how we can access Dev.to API using NodeJS and axios.**_

I will show you how we can achieve that**

1. Without API key
2. With API key.

Here you can get more details about dev.to api [API Documentation](https://developers.forem.com/api/v1)
So, let's dig into it.

**1. Without API key**

- First install axios using nodeJS and write the bellow code by passing the username to the this `https://dev.to/api/articles?username=your_name` end-point to get user's articles.

```javascript
const axios = require('axios');

let configDetails = {
  method: 'get',
  url: 'https://dev.to/api/articles?username=snehalkadwe',
  headers: { 
    'Content-Type': 'application/json'
  }
};

axios.request(configDetails)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
});
```

**2. With API key**

**_First we have to generate api key, follow the steps and generate one._**

1. Logged in to you Dev.to account
2. Go to Settings and then click on Extension or
[Click Here](https://dev.to/settings/extensions)
3. At bottom you will find `DEV Community API Keys` section where you have to provide your `project_name` or `name_of_key` and click on generate api key, your key will be generated.

Now, we have to pass api key and content-type in header with this `https://dev.to/api/articles/me` end-point to grab articles.

Add this code.

```javascript
const axios = require('axios');

let configDetails = {
  method: 'get',
  maxBodyLength: Infinity,
  url: 'https://dev.to/api/articles/me',
  headers: { 
    'Content-Type': 'application/json', 
    'api-key': 'ADD_YOUR_API_KEY'
  }
};

axios.request(configDetails)
.then((response) => {
  console.log(JSON.stringify(response.data));
})
.catch((error) => {
  console.log(error);
})
```

In both the ways you can get all the latest articles and posts in your system. For more details you refer dev.to api documentation and try to use different end-points.


:heart: Thank You!! :heart:

Happy Reading :heart: :unicorn:
Develop Exceptional AI SaaS Apps with Horizon AI Template
Tags: ai, saas, react, opensource
Published: 2023-06-29 10:01:57

Are you searching for a way to develop impressive AI projects and web apps with a touch of sophistication? Look no further than Horizon AI Template! This awesome template is the world’s top OpenAI ChatGPT Admin Template and Starter Kit. 

It is built using React, NextJS, and Chakra UI and comes loaded with various design elements, pre-built blocks, and fully coded pages. With Horizon AI Template, you can effortlessly create stunning AI projects and web apps that rely on ChatGP.

Horizon AI Template is the first-ever OpenAI ChatGPT AI template created using React, NextJS, and Chakra UI. This template allows you to develop exceptional AI SaaS apps, projects and prompts up to 10 times faster than before.

The best part is that you can customize and personalize your AI apps and projects to your preferences, with multiple theme modes available, including Dark and Light. Furthermore, you’ll have access to a growing components library and receive lifetime free updates.

With over 100 front-end elements available in dark and light modes, such as buttons, input fields, navbars, tabs, cards, alerts, and more, you can effortlessly select and blend them to create your desired UI.

Additionally, you’ll have everything you need to kickstart your AI projects with 27 fully coded example pages, including desktop and mobile page examples, templates, prompt pages, chat UI, and profile settings.

We are confident that Horizon AI Template will exceed your expectations in developing your dream AI web apps and projects. Act now and start building your future today!


[**VISIT  NOW!**](https://uneedbest.com/horizon-ai-template/)



{% embed https://youtu.be/saKhUwE1nIU %}
WEb3form how to avoid exposing your api key
Tags: astro, webdev, security, api
Published: 2023-06-29 09:57:25

Web3form API keys are being exposed in html files, since any user can inspect the page and copy it, to prevent this create a process.env file and store you API key there

`WEBFORM = your-api-key`

Then we'll import it into the html file by adding an id to the 
access key input as follows

```
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact us</title>
</head>
<body>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" id="key" >
        <input type="text" name="name" required>
        <input type="email" name="email" required>
        <textarea name="message" required></textarea>
        <div class="h-captcha" data-captcha="true"></div>
        <button type="submit">Submit Form</button>
    </form>
    <script src="https://web3forms.com/client/script.js" async defer></script>
</body>
</html>
```

Then we'll access the value attribute through Javascript and link it to the env variable 

```   
document.getElementById('key').value = process.env.WEBFORM; 
```

This will prevent users from inspecting the page and stealing your API key since the env file is not accesible.

If you are contributing to a Github repo or NPM make sure to add the process.env file to your gitignore file or npmignore respectively
Build Intelligent Apps with AI: Your Comprehensive Guide to AI-powered Apps
Tags: ai, mobileapplication, techapps, programming
Published: 2023-06-29 09:52:27

The use of AI in application development offers a wide range of possibilities from providing personalized and proactive user experiences to automating complex decision-making processes. The various AI tools and techniques that can be used in [AI Powered apps](https://seasiainfotech.hashnode.dev/how-to-build-ai-powered-apps-a-complete-walkthrough?utm_source=devto&utm_medium=devto_profile&utm_campaign=profile) development such as machine learning, natural language processing, and predictive analytics.