teleren/devto huggingface dataset:
3 online tools to use for selecting a future-proof NPM library for frontend and Nodejs projects
Tags: javascript, dx, devrel
Published: 2023-09-15 11:23:56

---
title: 3 online tools to use for selecting a future-proof NPM library for frontend and Nodejs projects
published: true
description: 
tags: javascript, dx, developerexperience
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xe2yu3r51eoex274bqv.jpg
---
Finding the right NPM packages has become both crucial and challenging. Fortunately, a suite of online tools has emerged to assist professionals in this quest, simplifying the process of discovering and selecting the perfect packages for their projects. 

The abundance of NPM packages offers incredible potential, but it also presents a dilemma: choosing the wrong package can have serious consequences for a project's performance, security, and scalability. 
Whether you're a seasoned developer or just starting out, these tools serve as indispensable resources, empowering you to make informed decisions and navigate the NPM ecosystem with confidence and precision.

🔴 https://npmcompare.com/ - gives you a nice comparison over the parameters about the number of maintainers, number of dependencies, number of downloads per day/month, last release date and much more;

🔴 https://bundlephobia.com/ - estimate a footprint, basically how many Kb will be added to your bundle when you add this dependency to your project. Those may differ a lot, try comparing say - `dayjs vs momentjs` ;

🔴 https://lnkd.in/dN9UiYwt - online tool by snyk.io, checks the packages with versions that are used in your project dependencies - if they have known vulnerabilities or unfixed security problems;

![selecting a future-proof NPM library for frontend and Nodejs projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xe2yu3r51eoex274bqv.jpg)

You can use those tools before doing `npm install xxx` and in 5 mins you’ll be able to make an informed decision. The solution perhaps will be a compromise between a popular API and a well-supported code base.

Enjoy, and hope your DX stays🔺 and the size of the bundle stays🔻

[Follow or friend me on LinkedIn - I am former full-time frontend developer turned team lead with over 13yrs xp, writing about industry topics](https://www.linkedin.com/in/michailkuznetcov/)

Pic from Bytes, great mailing list by ui.dev

Other important tools that you use daily - that I have missed ? Please add them in the comments 🙏
🤷‍♂️ O Paradoxo da Liderança: Mais Responsabilidade, Mais Dependência
Tags: leadership
Published: 2023-09-15 11:08:00

À medida que subimos na hierarquia da liderança, um paradoxo se revela. Quanto mais responsabilidade assumimos, mais dependentes nos tornamos das pessoas ao nosso redor. Esse paradoxo molda o mundo da liderança atual.

As organizações estão passando por mudanças significativas, e os papéis de liderança estão se transformando. Não se trata mais apenas de coordenar processos e supervisionar tarefas. Agora, precisamos nutrir talentos, promover a inovação e manter os times integrados, motivados e produtivos.

**➡️ Compreenda as necessidades individuais**

À medida que ocupamos posições de liderança, é essencial reconhecer que cada membro do time possui necessidades e motivações individuais. Como líderes, devemos estar atentos a essas particularidades e criar um ambiente que valorize a diversidade de talentos e ofereça suporte adequado a cada um. Entender e atender às necessidades individuais fortalece o engajamento e a colaboração do time como um todo.

**➡️ Desenvolva uma comunicação eficazes**

Conforme nossa responsabilidade cresce, a habilidade de se comunicar de maneira clara e eficaz se torna ainda mais vital. Devemos estabelecer canais abertos de comunicação, ouvir ativamente as preocupações e ideias das pessoas e transmitir nossas expectativas de maneira transparente. A comunicação eficaz fortalece a confiança, melhora o alinhamento e permite que todos os membros do time se sintam valorizados e compreendidos.

**➡️ Fomente o desenvolvimento**

À medida que avançamos hierarquicamente, também temos a responsabilidade de fomentar o crescimento e o desenvolvimento contínuo de nosso time. Isso envolve fornecer feedback construtivo, oferecer oportunidades de aprendizado e capacitação, e incentivar a autonomia e a busca por novos desafios. Ao investirmos no desenvolvimento de nossos colaboradores, estamos investindo no sucesso a longo prazo de nossa organização.

Ao exploramos mais esse paradoxo, descobrimos que a verdadeira habilidade da liderança está em como os líderes equilibram sua crescente responsabilidade com sua capacidade de confiar e capacitar as pessoas ao seu redor. É um desafio que exige flexibilidade, franqueza e uma compreensão profunda das complexidades das relações humanas no ambiente de trabalho.

Texto originalmente postado em: https://confiancaradical.substack.com/
Artificial Intelligence in Digital Marketing? 2023
Tags: digitalmarketing, ai, seo, marketing
Published: 2023-09-15 10:51:20

The world is changing fast because of this thing called artificial intelligence (AI). [Artificial Intelligence](https://maxdigitalacademy.com/artificial-intelligence-in-digital-marketing-2023/) in simple words is a machine stimulating like a human and this AI stuff is not just sitting there, it’s messing with digital marketing too. Like, it’s making things better in digital marketing by doing lots of cool things.

 

In this blog post, we will see how AI can help a Digital Marketer in achieving his/her goals.

 

So, let’s check it out, AI is shaking up digital marketing like this:

 

Content creation and distribution: AI is like your personal tailor for making content. It looks at what you like or what you prefer and makes stuff just for you. And then it’s like a secret delivery agent that knows where to send the stuff so the right people see it.
How to Setup/Connect HP Pinter to Computer/WiFi
Tags: howtosetuphpprinter, howtosetuphpprintertocomputer, howtosetuphpprintertowifi
Published: 2023-09-15 10:50:49


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs2u7dnj6dmrn5bwix8x.jpg)
There are two form of hp printers, Touch Display and Non-Touch Display. Once you've determined which of the two printer types you have, you'll need to follow specific instructions for each. 

**
Hence i am publishing this article for user who face the same problem.

## [How to Setup and Connect HP Pinter to WiFi Network](https://www.youtube.com/watch?v=H7ZgKot4IEU)
**
If you have **Touch** Display:
1. Turn on the printer.
2. Select the wireless setup/wireless setup wizard option. 
3. The printer will show the for wireless networks names, select your wireless network ID from the proposed list. 
4. Enter the ID and password.  
5. Select OK to confirm wireless settings.

If you have **Non-Touch** Display:
1. Select the WiFi setup button. 
2. Then enter the OK button
3. Choose manual connect, and then enter.
4. Select your wireless network.
5. Enter password. 

Now we will start **[How to Setup and Connect HP Pinter to Computer](https://www.youtube.com/watch?v=ed5e8u5BsUM)**.

In today, hp printer comes in two forms - wired and wireless. We’ll teach you how to setup and connect a printer to your computer or laptop.

how to setup and connect a printer to your computer or laptop using USB Cable.

**Step 1: Open windows setting**
**Step 2: Access devices**
**Step 3: Connect your printer**

how to setup and connect a printer to your computer or laptop using Wireless.

**Step 1: Locate your settings**
**Step 2: Link your WiFi network**
**Step 3: Complete connectivity**
**Step 4: Locate your printer settings**
Downloading YouTube Videos with Elixir
Tags: elixir, youtube, ytdlp, exyt
Published: 2023-09-14 13:18:48

We recently had to develop some features that involved downloading videos from YouTube.

After some research, we found YT-DLP([https://github.com/yt-dlp/yt-dlp])

*yt-dlp is a fork of youtube-dl based on the now inactive youtube-dlc. The main focus of this project is to add new features and patches while staying up to date with the original project.*

From this came the idea of writing a simple wrapper around Elixir to facilitate integration with our stack.

#Exyt-dlp
[https://github.com/v0i4/exyt]

#setup
[https://github.com/yt-dlp/yt-dlp/wiki/Installation]
[https://hex.pm/packages/exyt_dlp]

add to your mix.exs file:
{:exyt_dlp, "~> 0.1.2"}

run *mix deps.get* at project root folder


#check installation
```
iex> Exyt.check_setup()
"Installed yt-dlp version: 2023.07.06\n"
```

#download
```
iex> url = "https://www.youtube.com/watch?v=BaW_jenozKc"
iex> Exyt.download(url, %{output: "/tmp/test/", format: "mp4", quality: :fhd})
```

#customize your params
```
iex> Exyt.ytdlp(["--get-filename"], "https://www.youtube.com/watch?v=BaW_jenozKc")
```

#check docs for more details
https://hexdocs.pm/exyt_dlp/Exyt.html#content

#contribute
accepting PRs :)
Front-End Dilemmas: Tackling Precision Problems in JavaScript with Decimal.js
Tags: javascript, programming, productivity, decimaljs
Published: 2023-09-15 10:23:52

### Dealing with Precision: Solving JavaScript’s Arithmetic Woes
As a seasoned senior front-end developer, I’ve encountered my fair share of challenges while working on web applications. But recently, I stumbled upon a particularly vexing problem: JavaScript’s handling of addition and multiplication with decimal numbers. Allow me to share my journey and the solution I found.

## The Problem
JavaScript is a powerful and versatile language, but it’s not without its quirks. One of the most common issues developers face is precision problems when dealing with decimal numbers. Let’s illustrate this with a simple example:

```
const result = 0.1 + 0.2;
console.log(result); // Output: 0.30000000000000004
```

Wait, what? I expected the result to be 0.3, not this long, seemingly inaccurate number! JavaScript uses binary floating-point arithmetic, which can't represent some decimal fractions exactly. This can lead to unexpected results, especially in financial or scientific applications.

### The Solution: Decimal.js
Desperate for a solution, I stumbled upon [Decimal.js](https://mikemcl.github.io/decimal.js/), a JavaScript library that provides arbitrary-precision decimal arithmetic. I was intrigued, so I decided to give it a try.

Installing Decimal.js
To get started, you can install Decimal.js using npm:

```
npm install decimal.js
```

Or include it directly in your HTML:

```
<script src=”https://cdnjs.cloudflare.com/ajax/libs/decimal.js/10.3.1/decimal.min.js"></script>
```

Using Decimal.js
Once installed, using Decimal.js is straightforward:

```
const Decimal = require('decimal.js');
const a = new Decimal('0.1');
const b = new Decimal('0.2');
const result = a.plus(b);
console.log(result.toString()); // Output: '0.3'
```


Decimal.js allows you to perform precise arithmetic operations with decimal numbers, ensuring that you get the results you expect.

Let’s look at some examples to highlight the benefits of Decimal.js.

Without Decimal.js:

```
// Without Decimal.js
const resultWithoutDecimal = 20.01 * 10;
console.log(resultWithoutDecimal); // Output: 200.10000000000002
```

With Decimal.js:

```
// With Decimal.js
const Decimal = require('decimal.js');
const a = new Decimal('20.01');
const b = new Decimal('10');
const result = a.times(b);
console.log(result.toString()); // Output: '200.1'
```

Multiplying 20.01 by 10 gives us 200.1, exactly as expected.

Conclusion
Decimal.js has proven to be a lifesaver for me when dealing with precision issues in JavaScript. Whether you’re working on financial applications, scientific calculations, or anything requiring accurate decimal arithmetic, Decimal.js can help you achieve reliable results.

So, the next time you find yourself frustrated by JavaScript’s quirks, remember that there’s a library out there to save the day.

To learn more about Decimal.js and its functions, you can check out the [official documentation](https://mikemcl.github.io/decimal.js/). Happy coding!
AI Suite: All-in-one AI tools App
Published: 2023-09-15 10:14:54


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

Playstore: https://play.google.com/store/apps/details?id=com.speakwise.ai.suite.app


AI Suite is an all in one AI tools app of popular AI tools like ChatGPT, Google Bard, Microsoft Bing, Quora Poe, Anthropic Claude, Perplexity AI, HuggingChat, Character.AI Midjourney, CopyAI, Jasper, etc., from a range of categories like chatbot, image generator, etc.

AI Suite all in one AI tools app contains all popular AI tools. You can easily search, select, and use AI tools according to your requirements in the ad free app.

AI Suite all in one AI tools app offers AI tool for video editing, AI chatbot, AI tool for content creation, AI tool for coding, AI tool for image editing, AI tool for SEO, AI Logo Generator, AI image generator, AI tool for email, AI tool for podcast, AI tool for music, AI tool for social media, AI tool for meme, AI tool for productivity, AI tool for text to speech, AI tool for copywriting, AI video generator, AI tool for writing, AI tool for startup, AI tool for art, chat, AI writer, AI content writer, and more for free. 

AI Suite all in one AI tools app is a free to use & ad free all in one AI tools app with various AI tools like Google Bard, Microsoft Bing, Open AI ChatGPT, Poe, You chat, CharacterAI, Anthropic Claude, Perplexity AI, HuggingChat, etc., from a wide range of categories like chatbot, image generator, chat etc.
Spread Multiple Props With This Syntax
Tags: react, javascript, typescript, webdev
Published: 2023-09-15 10:12:23

In React, when working with components, you might encounter scenarios where you want to conditionally pass multiple props based on a certain condition. Fortunately, there's a concise syntax that allows you to do just that.

## The Conditional Spread Syntax

Imagine you have a React component named `<Button />`, and you want to conditionally pass multiple props (`color` and `size`) to it based on some condition. Here's how you can achieve this using the conditional spread syntax:

```jsx
function App() {
  const [isLoading, setIsLoading] = useState(false)

  return (
    <div>
      {/* Conditional spreading of props */}
      <Button {...(isLoading && { color: 'primary', size: large })}>
        Click me
      </Button>
    </div>
  );
}
```

In this example:

1. We first define a `condition` in this example it's `isLoading` that determines whether we want to pass the additional props.
2. We define the `color` and `size` variables, which represent the props we want to conditionally pass to the `<Button />` component.
3. Within the JSX, we use the conditional spread syntax:

`{...(isLoading && { color, size })}`. 

   - If the `condition` is `true`, it spreads the object `{ color, size }` as props to the `<Button />` component.
   - If the `condition` is `false`, no props are spread, and the `<Button />` component receives only its default props.

4. We render the `<Button />` component with the conditional props, and it will have the additional properties (`color` and `size`) only when the condition is met.

This technique provides a clean and concise way to conditionally spread multiple props onto a component, making your code more readable and maintainable when you have **varying prop requirements based on specific conditions**.
Unlock Your Potential: Personal SWOT Analysis as the Key to Success
Tags: career, beginners, productivity
Published: 2023-09-15 10:00:00

## What is Personal SWOT Analysis?

SWOT analysis is a tool primarily known from the business world, but did you know it can be equally useful in a personal context? A personal SWOT analysis is an excellent way to understand your strengths and weaknesses, as well as to identify opportunities and threats that could affect your future. In this article, you'll learn how to effectively conduct such an analysis and how to apply its results in practice.

## Why is Personal SWOT Analysis Important?

Understanding yourself is the first step to achieving success in any area of life. SWOT analysis can be invaluable here, allowing for a systematic and objective look at yourself. It will not only help you in career planning but also in relationships with others and personal development.

## How to Approach the Analysis: First Steps

Before you start, consider your main goal. It could be a job promotion, acquiring new skills, or improving relationships with loved ones. Next, prepare a sheet of paper divided into four sectors: **Strengths, Weaknesses, Opportunities, and Threats.**

##  What to Include in Each Category?

- **Strengths**: Here, consider what sets you apart. It could be your creativity, interpersonal skills, or expertise in a specific area.
  

- **Weaknesses**: This is the place for an honest admission of your weaknesses. Is there something that hinders you from achieving your goal? It could be a lack of certain skills or a tendency to procrastinate.


- **Opportunities**: Look at the world around you and consider what opportunities are open to you. It could be a new job offer, skill-enhancing courses, or support from family and friends.


- **Threats**: Here, it's good to be realistic. What obstacles could stand in your way? It could be competition at work, financial instability, or changes in your personal life.

## How to Utilize the Results of the Analysis?

After conducting the SWOT analysis, don't just leave it in a drawer. Set specific steps that will help you leverage your strengths, work on your weaknesses, utilize opportunities, and minimize threats.

{% embed https://dev.to/girlsgotech/personal-swot-analysis-by-example-5073 %}

## Your Path to Success

Personal SWOT analysis is more than just an exercise on paper. It's a tool that can teach you a lot about yourself and help you achieve your life goals. Whether you're at the beginning of your career or looking for new opportunities, it's worth taking advantage of it.
Prefix Unused Variables With Underscore
Tags: typescript, javascript, cleancode, tip
Published: 2023-09-15 09:52:33

We're always on the lookout for clever ways to make our code more readable and maintainable.
Today, let's explore a quick and fun little trick that involves prefixing unused variables in function arguments with an underscore (_). This simple technique can help us signal to others (and ourselves) that these variables are irrelevant to the current task at hand.

> We can also only use an underscore without any variable. Still, the downside is that it can be confusing as to what this variable that we're ignoring is, and not as descriptive. (Eslint too will understand this syntax)

---

Imagine you're working on a web application that fetches data from an API. The API response includes a callback function with several arguments, but you're only interested in the first and last argument. Here's how the underscore prefix can help:

```js
api.fetchData((data, _statusCode, headers) => {
  // Process 'data' and ignore '_statusCode'
  console.log(data, headers);
});
```

In this example, you're using the `api.fetchData` function, which provides a callback with three arguments. By prefixing _statusCode with an underscore, you make it clear that you're intentionally ignoring this variable in your callback function. This practice enhances code readability and helps others understand your coding intentions.

---

### Final Thoughts

The underscore prefix is a valuable convention for callbacks that provide more arguments than necessary. It simplifies code readability and helps convey your coding intentions clearly. So, the next time you encounter surplus callback arguments, don't hesitate to prefix the unused ones with an underscore. Your fellow developers (and future self) will appreciate the clarity and maintainability it brings to your code! 🚀
WordPress 查看 SQL 的方法
Published: 2023-09-15 09:45:15

经過多年的WordPress開發經驗，我們的編輯為您整理了三種查看WordPress執行SQL查詢的方法，希望其中一種適合您的需求。

## 方法一：使用WordPress插件

最簡單的方法是直接安裝WordPress插件，例如：**Query Monitor**。

![Query Monitor](https://ps.w.org/query-monitor/assets/banner-1544x500.png?rev=2870124)

![Query Monitor範例](https://ps.w.org/query-monitor/assets/screenshot-4.png?rev=1856844)

**編輯評論：**

Query Monitor類似於ThinkPHP和Laravel內置的調試工具，對於偶爾查看SQL查詢來說還不錯。但是，在WordPress頁面包含數十甚至數百行SQL查詢的情況下，使用該工具可能會顯得不夠負責任。

**缺點：** 當開發API或代碼出現錯誤時，Query Monitor將無法顯示相關信息。它雖然可用，但並不是理想的選擇，有點像那種不可靠的人，總是在平時出現，但在關鍵時刻消失不見。而且它的菜單深藏不露，需要多次點擊才能找到。

**推薦評級：** 1顆星（滿分5顆星）

## 方法二：在WordPress代碼中添加記錄並打印SQL查詢

通過編輯WordPress根目錄下的`wp-config.php`文件，您可以啟用SQL查詢記錄。

在文件中添加以下代碼：

```php
define('SAVEQUERIES', true);
```

然後在需要查看SQL查詢的地方添加以下代碼：

```php
<?php
global $wpdb;
var_dump($wpdb->queries);
exit;
?>
```

這將啟用WordPress記錄執行的每個SQL查詢，包括它們的執行時間，並將日誌保存在名為`queries`的全局數組中。

**編輯評論：**

想象一下，每次需要查看SQL查詢時，都要找到適當的位置添加代碼，查看完畢後再刪除代碼。如果問題仍未解決，您需要再次返回並把剛剛刪除的代碼補回來。這種循環會讓您感到非常疲憊。

**缺點：** 需要修改代碼，每天都要重複多次，即使將這幾行代碼定義為宏以避免手動輸入，精神上仍然非常耗費精力。疲勞可能導致將錯誤的代碼提交到線上環境的風險。

**推薦評級：** 2顆星（滿分5顆星）

## 方法三：使用外部工具

### 1. 啟用MySQL的查詢日誌記錄功能

只需在MySQL的my.cnf文件中添加以下代碼，即可讓MySQL記錄所有執行的SQL查詢：

```
# 記錄SQL
general_log = 1
general_log_file = /var/log/mysql/general_sql.log
```

**編輯評論：**

要使用這種方法，您需要具備對MySQL服務器的權限。如果多人共享一台MySQL開發服務器，最好不要啟用此功能，因為會引起混亂。此外，由於日誌包含大量信息，很難確定哪些查詢是您的，因此建議在測試服務器上使用，只在需要解決重要問題時才啟用。

**缺點：** 需要登錄到MySQL服務器才能查看日誌，如果MySQL出現問題，可能會受到懷疑。此外，由於記錄了所有SQL查詢，導致查詢量巨大，很難找到與您相關的查詢。

**推薦評級：** 3顆星（滿分5顆星）

### 2. 使用PHPStorm插件

PHPStorm的插件市場提供了一個名為MySQL Proxy的插件，將代碼中的數據庫配置更改為它代理的端口，就能將所有的SQL日誌展示出來。是編輯目前用的唯一方便的工具，不用改代碼，不需要MySQL數據庫服務器權限，並且檢索方便。

![PHPStorm MySQL Proxy插件](https://upload-images.jianshu.io/upload_images/29317863-e38fd69faeab998d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**編輯評論：**

這個工具類似於MyCAT，它可以代理並記錄SQL語句。

**缺點：** 尽管支持搜索功能，但不支持正则表达式搜索，只支持文本搜索。

**推薦評級：** 4顆星（滿分5顆星）