teleren/devto huggingface dataset:
Changing input value after populating it with data in react.js
Tags: react, shortreacttips
Published: 2023-10-04 15:43:22

Have you ever faced this problem, when you're trying to edit an input value after populating it with data you get from a server but the input is not responding? 

**Let's take this scenario:**
Let's say you're building a blog and want to edit something after posting it on your blog site, after creating your edit-blog page. You fetch data and then populate the input with the data, but when you click on the input to change its value, the input does not respond.

**The solution:**

```
//Declare your states
const [author,setAuthor] = useState('')
const [data,setData] = useState('')

// fetch the data with use effect
useEffect(() =>{
const fetch = async () =>{
const res = await fetch('http://yourUrl.com')
const data = await res.json()
setData(data)
}}
fetch()
},[data])

// use another useEffect hook to set the input value
// using setTimeout 
useEffect(() =>{
setTimeout(()=>{
setAuthor(data.author)
.... // rest of the states, if you have more
}, 1000}
},[author]) //Don't forget to set the dependency array

```
_your input_
```
<input
type='text'
value={author}
>
```
Done you fix it.
Primer publicación
Tags: productivity, writing, español
Published: 2023-10-04 15:34:06

## Primer publicación

Esta es mi primer publicación realizada y no tengo idea sobre que tema podría hablar.

Soy un programador web de 36 años, vivo en México y llevo en el área de TI alrededor de 17 años, en la cual he sido técnico en reparación de equipos, he incursionado en el cableado estructurado, comunicaciones, desarrollo de aplicaciones de escritorio con Visual Fox Pro y actualmente desarrollador de aplicaciones web con Vue y Laravel.

Llevo casado 6 años de un noviazgo de 7 años y tengo una hermosa hija de 2 años y medio, y mi esposa y yo pasamos por la perdida de nuestro primer hijo en el año 2019.

Llevo muchos años siguiendo esta pagina, pero nunca me había atrevido a hacer una publicación por miedo y por falta de un tema para escribir. El día de hoy me anime a hacerlo después de leer una publicación que habla sobre el TDAH (ADHD) y me sentí muy identificado con los problemas que llegan a tener las personas diagnosticadas con esta condición.

Siempre me he sentido frustrado al no poder concentrarme en avanzar o terminar en mis tareas diarias y siento que el tiempo que me demora realizar alguna asignación es muy elevado comparación con otros compañeros que incluso tienen menos experiencia que yo en el área.

No estoy seguro si en verdad tengo esa condición y me gustaria indagar mas en el tema y quisiera preguntar si alguien mas llego a estar en la misma situación.
SQL - Use Indexes Wisely for Performance Optimization
Tags: sql, programming, tutorial
Published: 2023-10-04 15:30:00

Indexes are database structures that improve the speed of data retrieval operations on database tables. Properly using indexes can significantly enhance the performance of your SQL queries. Here are some tips for using indexes wisely:

1. **Identify the Right Columns to Index:** Not every column needs an index. Focus on indexing columns that are frequently used in `WHERE` clauses for filtering, `JOIN` conditions, and sorting (`ORDER BY`). Primary keys and foreign keys are good candidates for indexing. Avoid over-indexing, as it can slow down data inserts and updates.

2. **Clustered vs. Non-clustered Indexes:** Understand the difference between clustered and non-clustered indexes. A table can have only one clustered index, which determines the physical order of data in the table. Non-clustered indexes are separate data structures that store a copy of a portion of the data and the indexed columns.

3. **Consider Composite Indexes:** Composite indexes include multiple columns and are useful when filtering or sorting based on combinations of columns. Be cautious not to create overly large composite indexes, which can consume significant storage.

4. **Regularly Update Statistics:** The database optimizer uses statistics to generate efficient execution plans. Regularly update statistics to ensure the optimizer has accurate information about the data distribution in your tables.

5. **Monitor Index Usage:** Keep an eye on index usage in your database. Unused or redundant indexes consume storage and can slow down data modification operations. Consider removing or consolidating indexes that aren't providing performance benefits.

6. **Understand Query Execution Plans:** Use database tools to analyze query execution plans. This can help you identify which indexes are being used and where query performance bottlenecks may exist.

7. **Consider Index Maintenance:** Indexes can become fragmented over time, decreasing query performance. Schedule regular index maintenance tasks to optimize them, such as rebuilding or reorganizing indexes.

8. **Test and Benchmark:** Before implementing indexes, thoroughly test your queries with and without indexes to measure the impact on performance. Benchmarking can help you make informed decisions about which indexes to create.

Remember that while indexes can improve query performance, they also come with trade-offs in terms of storage and maintenance. Therefore, it's essential to strike the right balance between indexing and other database performance optimization techniques based on the specific needs of your application.
🖼️I made an image viewer for locally AI-generated images by Easy Diffusion
Tags: stablediffusion, easydiffusion, node, svelte
Published: 2023-10-04 15:21:51

[Easy Diffusion](https://easydiffusion.github.io/) is a web UI for using Stable Diffusion models and generate image locally using your CPU or GPU.

You can save your images locally with its metadata. But they are stored inside many folders and it's hard to browse them.

I made a node.js server + Svelte UI to browse all your images with a search bar searching for specific keywords in the prompt.

## Code here
[Github repo](https://github.com/MarioVieilledent/EasyDiffusion_Image_Browser).

- Put the repo inside your Easy Diffusion image destination folder
- Simply click the bat file (Windows) and server should serve images

More details in readme file. Thx for reading. ✅
Glassmorphism Analog watch with digital watch using html, css, javascript
Tags: freecodez, react, html, blog
Published: 2023-10-04 15:16:05

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**Glassmorphism Analog watch with digital watch using html, css, javascript**

![Glassmorphism Analog watch with digital watch using html, css, javascript](https://res.cloudinary.com/freecodez/image/upload/v1696432508/images/hkc435clqrzfefh5l0lx.webp)

For full source code visit : [https://freecodez.com/post/088c0ab](https://freecodez.com/post/088c0ab)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Data Science Beginner's guide.
Tags: datascience, machinelearning
Published: 2023-10-04 14:59:54

1. Basic education and abilities:

   - **Educational Background**: - Earn a bachelor's degree in an area that is applicable, such as data science, engineering, statistics, mathematics, or computer science.

   Learning computer languages like Python and R, which are necessary for manipulating and analyzing data, is important.

   - **Statistical Knowledge**: Develop a solid understanding of probability theory and statistics. This serves as the basis for data science.

   - **Data Handling**: - Gain experience with tools like Pandas, NumPy, and SQL to organize and clean data.

   - **Visualization**: - For successful insight communication, get to know data visualization tools like Matplotlib, Seaborn, or Tableau.

2. Intermediate Tools and Skill Sets

   - **Machine Learning**: - Explore machine learning approaches and algorithms. Recognize classification, grouping, regression, and other advanced techniques.

- **Deep Learning**: - Examine deep learning frameworks like TensorFlow or PyTorch and neural networks.

   - **Big Data technologies**: - Learn about technologies for handling massive datasets, such as Apache Hadoop, Spark, and NoSQL databases.

   - **Version Control**: - Acquire the skills necessary to work with other data scientists and keep track of changes using version control tools like Git.

"3." "Advanced Topics"

   Consider learning about natural language processing (NLP) if working with text data is something that interests you.

   - **Time Series Analysis**: - Develop your analytical skills when it comes to time-dependent data, which is common in many sectors.

   - **Feature Engineering and Selection**: - Recognize the best characteristics to engineer and choose while constructing models.

   - **Model Deployment**: - Gain knowledge on how to deploy models in real-world settings utilizing frameworks like Flask and Django or cloud services like AWS.


Just keep in mind that you can modify this plan to suit your particular hobbies and professional aspirations. Remember that being adaptable, remaining curious, and learning new things constantly are necessary qualities for a successful data scientist. Wishing you luck on your travels!
Give credit to Open Source Contributors
Tags: opensource, github, hacktoberfest23
Published: 2023-10-04 14:58:50

Tables like this one are in a lot of repositories, giving well deserved credit to their contributors.

And you know, developers are lazy so there has to be an automation to manage this.

![All contributors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/561mmudrgoixbn2z390m.png)

Today’s topic is the all-contributors tool and I will show you how you can integrate it in your project and why you should!

Contributors merging a PR will get a green square in their profile, but not every contribution is actually submitted through a pull request.

That’s why there’s an emoji key table which includes many other actions giving value to the project, such as writing blog posts, mentoring new contributors or answering questions on discord.

Here's a video where I talk about the two main ways to use this tool which are the Bot and the CLI.

{% youtube 9okPS0yjsK0 %}

## Bot

The bot is a GitHub App that will automatically create a Pull Request to add a new contributor to the table.

Once installed, you can invoke it with a comment in an issue or pull request, like this:

```markdown
@all-contributors please add @balastrong for code
```

Pros are that it's automatic, you literally just have to write a comment and the bot will do the rest with the PR ready to be merged.
Cons, it spams a little bit of notifications.

## CLI

Similarly to the bot, once installed in your project you can run the CLI to add a new contributor to the table.

```bash
npx all-contributors add balastrong code
```

Pros: you can control when/how you want to add contributors as it just edits the files locally.
Cons: as it's less _automagic_, you will need to manually commit and push the changes.

## Hacktoberfest

A cool contribution during Hacktoberfest could be asking the repository maintainers if they're interested in using the tool.

Setting it up can be a cool PR, after receiving the green light on an issue :)

## Conclusion

Which one is better? I definitely think it depends on how you want to use it, but both ways are super easy to set up and use.

I’m using it on my [github-stats community project](https://github.com/Balastrong/github-stats) and I think it’s a great way to say thank you to everyone involved in the success of an open source project.

Want to learn more? You can watch [my video](https://youtu.be/9okPS0yjsK0) or directly head over the [all-contributors website](https://allcontributors.org/).

---

Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ❤️
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/c/@DevLeonardo?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}
React.js Short Tips Series
Tags: react, reactshorttips
Published: 2023-10-04 14:32:58

Hi,

Welcome to my react.js short tips series.
 We all love React.js. But for a beginners can be very daunting and challenging to fully understand what is going on with `useEffect()`, `useReducer()`, and may be `useMemo()` and `useCallback()` hooks. In this series, we will go through all this effect, and other parts of react.js explaining them in a very short,brief and easy way you can understand.
域名 Whois 查询 API 数据接口
Published: 2023-10-04 14:30:09

域名 Whois 查询 API 数据接口

多类型域名支持，精准 Whois 数据，实时数据。

![gugudata_api_cover](https://static.gugudata.com/api_cover_websitetools_whois.png)

# 1. 产品功能

- 支持国际、国内域名 Whois 查询；
- 每小时定时更新基础数据库；
- 提供精准、高效的 Whois 查询；
- 返回可查询最详细的域名相关信息；
- 秒级查询性能，支持高并发；
- 数据持续更新与维护；
- 全接口支持 HTTPS（TLS v1.0 / v1.1 / v1.2 / v1.3）；
- 全面兼容 Apple ATS；
- 全国多节点 CDN 部署；
- 接口极速响应，多台服务器构建 API 接口负载均衡；
- [接口调用状态与状态监控](https://www.gugudata.com/status)

# 2. API 文档

**接口详情:** [https://www.gugudata.com/api/details/whois](https://www.gugudata.com/api/details/whois)

**接口地址:** https://api.gugudata.com/v2/websitetools/whois

**返回格式:** application/json; charset=utf-8

**请求方式:** GET

**请求协议:** HTTPS

**请求示例:** https://api.gugudata.com/v2/websitetools/whois?appkey=YOUR_APPKEY&domain=YOUR_VALUE

**数据预览:** [https://www.gugudata.com/preview/whois](https://www.gugudata.com/preview/whois)

**接口测试:** [https://api.gugudata.com/v2/websitetools/whois/demo](https://api.gugudata.com/v2/websitetools/whois/demo)

# 3. 请求参数

| 参数名 | 参数类型 | 是否必须 |   默认值    |           备注            |
| :----: | :------: | :------: | :---------: | :-----------------------: |
| appkey |  string  |    是    | YOUR_APPKEY |    付费后获取的 APPKEY    |
| domain |  string  |    是    | YOUR_VALUE  | 域名地址，如 gugudata.com |

# 4. 返回参数

|            参数名            | 参数类型 |                 备注                 |
| :--------------------------: | :------: | :----------------------------------: |
|    dataStatus.statusCode     |   int    |            接口返回状态码            |
| dataStatus.statusDescription |  string  |           接口返回状态说明           |
| dataStatus.responseDateTime  |  string  |           接口数据返回时间           |
|  dataStatus.dataTotalCount   |   int    | 此条件下的总数据量，一般用于分页计算 |
|         data.address         |  string  |               注册地址               |
|          data.city           |  string  |               注册城市               |
|         data.country         |  string  |               注册国家               |
|      data.creation_date      |  string  |               注册时间               |
|         data.dnssec          |  string  |                DNSSEC                |
|       data.domain_name       | string[] |            域名，数组形式            |
|         data.emails          |  string  |               注册邮箱               |
|     data.expiration_date     |  string  |               过期时间               |
|          data.name           |  string  |              注册人姓名              |
|      data.name_servers       | string[] |              DNS 服务器              |
|           data.org           |  string  |              注册人组织              |
|      data.referral_url       |  string  |              注册人 URL              |
| data.registrant_postal_code  |  string  |              注册人邮编              |
|        data.registrar        |  string  |                注册商                |
|          data.state          |  string  |               注册省份               |
|         data.status          | string[] |               域名状态               |
|      data.updated_date       |  string  |               更新时间               |
Faded Box Backdrop Blur
Published: 2023-10-04 14:29:44


Imagine `box-shadow` but for a blur effect, where the backdrop of an element is blurred around the that element, gradually going from blurry to crisp.

Such an effect can increase the focus on the element which drops the blur, by creating more contrast between it and its backdrop, especially if they happen to be in similar color shades.

There is no native way of doing with the CSS beside combining a few tricks together to simulate such an effect

## Steps to create the effect

1. Create an HTML element within the the one which harbors the effect. 
Best to use a *pseudo-element* for such a thing, so not to involve any markup changes.
2. Position the pseudo-element so it occupies the whole area of its parent **plus** some extra, so the blur “spills” outside the area of the container and will be visible, since the container should not be blurred
3. Give that element [`backdrop-filter: blur(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)
4. Apply `-webkit-mask` & [`mask`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask) on the element, with a specific value with multiple gradients  
5. Apply [`-webkit-mask-composite: source-in`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite) (for non-standard Chrome support) and 
`mask-composite: intersect` (for non-chromium browsers) to the masked pseudo-element, to marge the pixels of the gradients in such a way that they don’t add to each-other but simply merge to their average, so only areas where both gradients apply to are visible, and this is crucial having the mask fade-out blur backdrop-filter in a somewhat realistic way.

### The Mask’s Gradients:

Two gradients, one vertical and the other horizontal, both go from transparent, to a color, and back to transparent. The colored region should be prominent - occupy most of the area.

```css
linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 18% 82%, transparent 100%)
```

{% youtube 0q-21xYXSv4 %}



### `-webkit-mask-composite: source-in` / `intersect` Applied:

As mentioned in step 5:

{% youtube 6lvz6sOmHg8 %}



### Combining Everything:

{% codepen https://codepen.io/vsync/pen/XWoYaag %}

Note that in the above Codepen example I am using a mask with these percentage values:

```css
linear-gradient(to top, transparent 0%, red 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, red 18% 82%, transparent 100%);
```

Wherever the fill color is irrelevant (like in this case), I tend to use "*red*" as it's the shortest color name. Another thing to note are the percentages `25% 75%` & `18% 82%`. These roughly correspond the aspect ratio of the popup box, which gives a more “balanced” look to the blur effect between the horizontal sides and vertical sides.
国际 IP 地址定位 API 数据接口
Published: 2023-10-04 14:29:37

国际 IP 地址定位 API 数据接口

兼容 IPv4 与 IPv6 兼容，IPv4/IPv6，全球 IP 地址定位。

# 1. 产品功能

- 支持全球 IP 地址定位查询；
- 每周定时更新最新定位基础数据库；
- 提供精准、高效的 IPv4/IPv6 地址定位查询；
- 一个接口同时兼容 IPv4 或 IPv6 地址的查询定位；
- 返回的 IP 定位地址包含详细的位置信息；
- 数据持续更新与维护；
- 全接口支持 HTTPS（TLS v1.0 / v1.1 / v1.2 / v1.3）；
- 全面兼容 Apple ATS；
- 全国多节点 CDN 部署；
- 接口极速响应，多台服务器构建 API 接口负载均衡；
- [接口调用状态与状态监控](https://www.gugudata.com/status)

# 2. API 文档

**接口详情:** [https://www.gugudata.com/api/details/internationaliplocation](https://www.gugudata.com/api/details/internationaliplocation)

**接口地址:** https://api.gugudata.com/v2/location/ip

**返回格式:** application/json; charset=utf-8

**请求方式:** GET

**请求协议:** HTTPS

**请求示例:** https://api.gugudata.com/v2/location/ip?appkey=YOUR_APPKEY&ip=YOUR_VALUE

**数据预览:** [https://www.gugudata.com/preview/internationaliplocation](https://www.gugudata.com/preview/internationaliplocation)

**接口测试:** [https://api.gugudata.com/v2/location/ip/demo](https://api.gugudata.com/v2/location/ip/demo)

# 3. 请求参数

| 参数名 | 参数类型 | 是否必须 |   默认值    |                备注                 |
| :----: | :------: | :------: | :---------: | :---------------------------------: |
| appkey |  string  |    是    | YOUR_APPKEY |         付费后获取的 APPKEY         |
|   ip   |  string  |    是    | YOUR_VALUE  | IP 地址，可以传递 IPv4 或 IPv6 地址 |

# 4. 返回参数

|            参数名            | 参数类型 |                 备注                 |
| :--------------------------: | :------: | :----------------------------------: |
|    dataStatus.statusCode     |   int    |            接口返回状态码            |
| dataStatus.statusDescription |  string  |           接口返回状态说明           |
| dataStatus.responseDateTime  |  string  |           接口数据返回时间           |
|  dataStatus.dataTotalCount   |   int    | 此条件下的总数据量，一般用于分页计算 |
|       data.countryCode       |  string  |         IP 地址定位国家代码          |
|          data.state          |  string  |          IP 地址定位省份/州          |
|          data.city           |  string  |           IP 地址定位城市            |
|        data.latitude         |  number  |           IP 地址定位纬度            |
|        data.longitude        |  number  |           IP 地址定位经度            |
LeetCode - Solution for 383. Ransom Note
Published: 2023-10-04 14:18:50

## Runtime: Beats more than 80% of users with TypeScript

Iterate through each char in the string `ransomNote`. If you can find the char in the string `tempMagazine`, remove the char from `tempMagazine` (indicating that the char **has been used** by `ransomNote`). Return false if you cannot find the char in `tempMagazine`.

```
function canConstruct(ransomNote: string, magazine: string): boolean {

    let char = '';
    let tempMagazine = magazine;
    for(let i =0; i< ransomNote.length; i+= 1){
        char = ransomNote.charAt(i);

        if(tempMagazine.indexOf(char) > -1) tempMagazine = tempMagazine.replace(char, '');
        else return false;
    }
    return true;
};
```
Should we use DRY code pattern ?
Tags: programming
Published: 2023-10-04 14:01:02

_Is it always good to have DRY(don't repeat yourself) code pattern?_

DRY is a software principal which aims to reduce the repition of code means don't repeat your code. Write your code in module, function, methods or classes so that you can use it anywhere anytime, without writing it again and again.

**Here is the advantage:**

-> You don't have to write code again and again.
-> It take less memory (which we don't bother most of the time).
-> You need to change only at one place, when there is any change in the algorithm.

**But here what I experienced:**

Let's assume there is large codebase of a social media, there is a function which is performing some task, let's assume creating a comment. Now, this function is used by many users (admin, creator, viewer) to create comment. Here it is best to use DRY code because all users are creating comment in same way, but we want to change some logic of any user there is some headache occurs. Let's assume for 'special user' we want to add functionality to add stickers. Now we have to change basic functionality of comment function.Whenever we are changing something we also need to make sure if everything is working fine for other users as well.

Have you also experienced this?
Would love to hear your opinions.