teleren/devto huggingface dataset:
NPM vs Yarn: A CLI Comparison
Tags: webdev, programming, beginners, tutorial
Published: 2023-02-21 17:28:07

**Bookmark** this article If you are migrating from `npm` to `yarn` or viceversa😊.

> Here is a list of all commonly used commands in NPM and Yarn:

| Command   |      NPM      |  Yarn |
|----------|:-------------:|------:|
| `Initializing a project`|  `npm init` | `yarn init` |
| `Running tests for the current package` |    `npm test`   |   `yarn test` |
| `Confirming if any package is outdated` | `npm outdated` | `yarn outdated`|
|`Publishing a package`|`npm publish`|`yarn publish`|
|`Running a script`|`npm run`|`yarn run`|
|`Cleaning the local package cache`|`npm cache clean`|`yarn cache clean`|
|`Logging in and out`|`npm login (logout)`|`yarn login (logout)`|
|`Installing dependencies`|`npm install`|`yarn`|
|`Installing packages`|`npm install [package-name]`|`yarn add [package-name]`|
|`Uninstalling packages`|`npm uninstall [package-name]`|`yarn remove [package-name]`|
|`updating`|`npm update`|`yarn upgrade`|
|`updating package`|`npm update [package-name]`|`yarn upgrade [package-name]`|
|`Installing package globally`|`npm install --global [package-name]`|`yarn global add [package-name]`|
|`Uninstalling package globally`|`npm uninstall --global [package-name]`|`yarn global remove [package-name]`|
|`Interactively updating dependencies`|`npm run upgrade-interactive`|`yarn upgrade-interactive`|
|`Running packages without downloading`|`npx`|`yarn dlx`|
|`Checking licenses of dependencies`|`N/A`|`yarn licenses ls`|

---

## Conclusion
In most cases, you will only need some of these commands. However, Getting an idea of all of these commands is always a plus point. This list will help you remember easily and in migrating for you and your teams. If you feel I forgot any essential commands, please let me know in the comment section.
Thanks for reading this article from start to end. I will see you all in my next article👨‍💻.
Paracetamol.ts💊| #15: Explica este código TypeScript
Tags: typescript, javascript, spanish, webdev
Published: 2023-02-21 16:51:20

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark> </center>

```ts
const obj = {
  id: 1,
  title: "test",
}
obj.description = "hello";
console.log(obj); // 🤔
```

- A. `{ description: "hello", id:1, title: "test" }`
- B. `TypeError`
- C. `{ id:1, title: "test" }`
- D. `ReferenceError`

Respuesta en el primer comentario.

---
Moonly weekly progress update #37
Tags: javascript, saas, blockchain, nft
Published: 2023-02-21 16:46:06


## Moonly weekly progress update #37

![](https://cdn-images-1.medium.com/max/3200/1*v-DQKBYPKJJEuaJCw129xQ.png)

Hello everyone, I hope you all are feeling great!
Another busy week went by and we are eager to release our new features on Moonly!
Here is just a brief summary of what we have accomplished in the past week.

**Weekly devs progress:**

* The logic component for nonregistered users finished

* Finished overlay for non-registered users and implemented it in the monitor table

* Fixed upcoming NFT dropdown component issue

* Fixed NFT collection edit form bug

* Made DB changes, migrated data and inspected results with changes

* Made necessary changes to the codebase to adjust the improved DB structure

* Implemented caching for trait API

* Changed DB structure for metadata and made changes to the codebase

**Holder Verification Bot (HVB):**

* Fixed an HVB issue during role assessment

* Made changes to mints-scraping to migrate traits during token creation

* Design fixation on moonly-bot frontend

* Made a script to migrate traits and solved different issues of it

* Fixed unique trait type and value combination issues on HVB

**Work on the Ethereum collections market data:**

* Created a separate doc for Ethereum scraper

* Researched how we can prevent the slug duplications

* Created a script to fix the slug duplication on the collection

* Created a custom script to publish & unpublished all collections

**Staking (Locking):**

* Unstake All at once with a single button

* Fixed Nft Item fallback issue

* Refactored Reward Increment state

* Researched reading tx data for verification purposes

**Portfolio Tracker:**

* Recalibrate scraper with different time/IDs number/replicas values

* Eliminated potential memory leak issue

* Thorough debugging of the token tracker in an effort to increase its performance

* Maintenance and monitoring of token tracker

* Setting up a database on RPC to speed up metadata->traits data migration

* Fixed several issues with the trait migration script

Upcoming NFT projects to mint:

[https://moon.ly/nft/elite-emperors](https://moon.ly/nft/elite-emperors)

[https://moon.ly/nft/degenu](https://moon.ly/nft/degenu)

[https://moon.ly/nft/blingz](https://moon.ly/nft/blingz)

Minted projects worth mentioning:

[https://moon.ly/nft/taiyopilots](https://moon.ly/nft/taiyopilots)

[https://moon.ly/nft/blocksmith-labs](https://moon.ly/nft/blocksmith-labs)

[https://moon.ly/nft/y00ts](https://moon.ly/nft/y00ts)

[https://moon.ly/nft/duelbots](https://moon.ly/nft/duelbots)

Check out our latest blog post: Rugpulls-A Quick Guide

[https://moon.ly/blog/rugpulls-a-quick-guide/](https://moon.ly/blog/rugpulls-a-quick-guide/)
How to add react to an existing website?
Tags: webdev, react, javascript, html
Published: 2023-02-21 16:33:47

**React** is a **JavaScript** library for building user interfaces. Generally we use react to create standalone **single page applications**.

But what if you already have a large scale web application built on a different technology or framework and you want to test out react for some part of the your application without touching the other features.

For such scenarios you can add react to your web application for specific part of your UI without affecting rest of the application. **React has been designed from the start for gradual adoption**


##Let's jump into handson
We will create a small application where we have a post and we can add comments on that post.

To start the Demonstration create an `index.html` file in your root folder.
Since `index.html` is an existing page of your web application it can contain lot of other html as well.
Our **existing** html file might look like this:

```javascript
<div class="post-container">
  <h1 class="post-header">T-shirt for sale</h1>
    <div class="post-body">
      <img src="t-shirt.jpg" alt="img" width="300px" height="300px" />
    </div>
</div>
```

Now wherever you want to inject your react application just add a html tag with a **unique ID** (you can use class if the same react application has to be added at multiple places in your application).
Add a html element just below `.post-body` div with any `id`
```javascript
<div id="post-comments-root"></div> <!--This is a react root node-->
```

Now you need to add react scripts to your `index.html` at the end of body tag. (when deploying, replace `development.js` with `production.min.js`)
```javascript
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
```
To use jsx syntax you need to add babel script otherwise you will have to use React.createElement() in the return of react component.
```javascript
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
```
Now create a `javascript` file which will contain your react component code. and include that in your `index.html`. This file will be the entry point of your react app.
```javascript
<script src="react/components/post-comments.js" type="text/babel"></script>
```


This way you have completed the `index.html` configuration and you can go ahead and write your react code.

After writing all the component code, query your root react DOM node in `index.html` using id `post-comments-root` and render your root element using `createRoot` **api** just like a normal `index.js` file of any react app.
```javascript
const domNode = document.getElementById("post-comments-root");
const root = ReactDOM.createRoot(domNode);
root.render(<PostComments />);
```

Congratulations! You have integrated a react app in your existing front end project.

Thanks for reading my article. In case of any questions let me know in the comment.

You can find the complete code on my [github](https://github.com/nadeem099/adding-react-to-website).
How to Fix Missing Tkinter Library Error When Creating Executable in Tkinter
Tags: webdev, programming, python, tkinter
Published: 2023-02-21 16:32:57

## 🤔 Have you ever encountered an error when creating an executable of your Tkinter app?

👨‍💻 I faced a similar issue where some windows were not showing up. After some investigation, I discovered that the problem was due to the absence of the Tkinter library in the executable file.

👍 Luckily, the solution was simple. By running the command `pyinstaller --onefile --hidden-import tkinter hello.py` when creating the executable, I was able to include the missing library and resolve the issue. Hope this tip helps fellow Tkinter developers out there!

## Options
`📁 --onefile` is to just creating a .exe file
`🔍 --hidden-import <library>` is for import the libray
`🙈 -w` is for not showing the console when the executable runs
Remove Element - LeetCode
Tags: javascript, beginners, programming, tutorial
Published: 2023-02-21 16:32:00

> Given an integer array nums and an integer val, remove all occurrences of val in nums in-place. The relative order of the elements may be changed.

The goal of this challenge is to remove all occurrences of a specified value in an integer array, without creating a new array. The relative order of the elements may be changed. This technique is known as "in-place" modification.

Here's a JavaScript solution to this problem:

```js
var removeElement = function(nums, val) {
    let i = 0;
    for(let j = 0; j<nums.length; j++){
        if(nums[j]!==val){
            nums[i]=nums[j]
            i++
        }
    }
    return i
};
```

Let's break down the code and understand how it works:

1. We declare a variable `i` and initialize it to `0`. This variable will keep track of the position in the array where the next non-matching element should be placed.

2. We have a for loop that starts at index `0` and goes up to the length of the `nums` array. The variable `j` will keep track of the current index we're checking in the `nums` array.

3. In the loop, we check if the current element in the `nums` array, `nums[j]`, is equal to the specified value val.

4. If the current element does not match the specified value, we copy it over to the current position in the array being tracked by `i`. This effectively removes the occurrence of the specified value.

5. Finally, we increment `i` by 1, ready to copy over the next non-matching element.

6. When the loop ends, the `i` variable will hold the length of the new array after all the occurrences of val have been removed.

And that's it! With this simple code, we can remove all occurrences of a specified value from an array in-place, changing the relative order of the elements in the process if necessary.
#Rust 🦀 – Using #OpenAI Text Completion APIs from Rust
Tags: englishpost, openai, rust
Published: 2023-02-22 19:38:52

---
title: #Rust 🦀 – Using #OpenAI Text Completion APIs from Rust
published: true
date: 2023-02-21 16:15:06 UTC
tags: EnglishPost,EnglishPost,OpenAI,Rust
canonical_url: 
---

![](https://brunocapuano.files.wordpress.com/2023/02/a669d364-8028-4471-a1d4-f1d7b43e182c.png?w=1024)

Hi!

Let’s look at my [**sample repository on how to use OpenAI APIs in Rust**](https://github.com/elbruno/RustOpenAIAPIs). It includes a sample console app that uses the Text Completion API endpoint. In case you want to know more:

> The [completions](https://platform.openai.com/docs/api-reference/completions) endpoint can be used for a wide variety of tasks. It provides a simple but powerful interface to any of our [models](https://platform.openai.com/docs/models). You input some text as a prompt, and the model will generate a text completion that attempts to match whatever context or pattern you gave it. For example, if you give the API the prompt, “As Descartes said, I think, therefore”, it will return the completion” I am” with high probability.
> 
> <cite><a href="https://platform.openai.com/docs/guides/completion" target="_blank" rel="noreferrer noopener">Open AI API – Text Completion</a></cite>

The

- As I mentioned in my previous post, I used a set of Structs to parse the JSON response from the API.
- There are 2 ways to send the request JSON body, using a simple string or a HashMap to create the JSON.
- I use a specific match to validate the following HTTP Codes
  - OK, parse the JSON response and show the completion text.
  - UNAUTHORIZED, this may usually trigger the use of an invalid API Key.
  - TOO\_MANY\_REQUESTS, also triggered when the team (or app) is overusing the current licence.

This is a sample response from the current Completions Rust Sample:

```

cargo run <API Key> "generate a 2-paragraph description on how to use OpenAI APIs using Rust programming language"
    Finished dev [unoptimized + debuginfo] target(s) in 3.04s
     
Prompt: generate a 2-paragraph description on how to use OpenAI APIs using Rust programming language
 🔥 Success!
 💬 Response:

OpenAI APIs can be used with the Rust programming language to provide developers with access to powerful artificial intelligence systems. ...

```

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Refactor javascript code
Published: 2023-02-21 16:12:21

Refactor JavaScript snippet for given problem statement.

```js
var arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
var arr2 = [1, 2, 3, 4, 5, 6];
var arr3 = [11, 22, 5, 6];
var arr4 = ["tom","cat","bob"];

arr1.foreach{
// length = 7
 //do something
}
arr2.foreach{
// length = 6
 //do something
}
arr3.foreach{
// length = 4
 //do something
}
arr4.foreach{
// length = 3
 //do something
}
```

Below code fulfill my objective but it's checking un-necessary condition for arr4 (7 times instead of 3),
arr3 (7 times instead of 4),
arr2 (7 times instead of 6)
because it's inside max length 7 iteration.



```js
const zip = (...arr) => Array.from(
  { length: Math.max(...arr.map(a => a.length)) }, 
  (_, i) => arr.map(a => a[i] || null )
  );

var arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
var arr2 = [1, 2, 3, 4, 5, 6];
var arr3 = [11, 22, 5, 6];
var arr4 = ["tom","cat","bob"];

var a = zip(arr1,arr2,arr3,arr4);


a.forEach(function(item, index, array) {
	//console.log(index, item);
	console.log("--------------------");
	(item[0] === null) ? "nothing" : console.log("first array " + item[0]);
	(item[1] === null) ? "nothing" : console.log("second array " + item[1]);
	(item[2] === null) ? "nothing" : console.log("third array " + item[2]);
	(item[3] === null) ? "nothing" : console.log("third array " + item[3]);
	
});
```
First Post!
Tags: webdev, beginners, progress, hello
Published: 2023-02-21 15:58:01

#Starting Out

##Feelings
I've just finished my pre-course work! 🎉 
I'm finding it is taking me a while to get my focus on track and create a proper learning environment where I can sit down and learn without getting distracted all the time.  
The guided static web-page we made was super simple, but even so I'm proud of the work I did there and even explored a few things outside of what was taught! 
I get so excited about what I want to do, I tend to get caught doing that stuff instead of focusing on the main lesson. Not necessarily bad, until I have a deadline. 

##What I Did 
[Pre-Course Study Guide](https://jaychan0125.github.io/prework-study-guide/)
I MADE THAT! 
It will prompt you and ask what you're interested in studying, where you'll open the console and see the simple JavaScript interactions I learned. 
This page is just notes for the topics I was introduced to. We made the face with HTML and formatted it with an external CSS Style Sheet, and then the console interactions on JavaScript. The hardest part of this for me was learning to properly merge it with Git. 

##Takeaways
I enjoy learning, and I am really excited for this boot camp. However, I am also a bit anxious as I know it will be fast-paced and challenging. I'm hoping that I've done enough to prepare myself for it, but I'm mostly nervous about balancing my life with all the studying time I'll have to invest into my learning! I think once I get through the first class I'll feel better!
Print the Magic Number for each test case.
Published: 2023-02-21 03:50:49

Couples Combo
Bob decides to distribute 2N random secret numbers to N couples (Husband is given number P,
Wife is given number Q,) each. Bob can pick as many pairs of couples an possible.
He will then generate two integers X and Y, X is sum of all P, he picked and Y in sum of all the Q,
he picked, and he wishes to maximize X+Y So he seeks help of his best friend Alice, the
mathematician. Alice likes to add some more spice, hence she decides to compute a magic number.
Magic number is the sum of squares of X and Y Compute the maximum magic numbert
Input
The first line has T number of test cases.
The next line has N number of couples.
Each of the following next 2 lines contain N numbers separated by space.
First line represents numbers given to all husbands Second line represents numbers given to all
wives
Output
Print the Magic Number for each test case.
Constraints
1<T< 10
1 <= N <= 1000
-10^6 < Pi, Qi <= 10^6
Sample Input
1
2
-1 6
45
Sample Output
72
Class code {

class Main [
public static void main(String args[]) throws Exception [
/ Sample code to perform 1/0
Use either of these methods for input
//BufferedReader
BufferedReader br = new BufferedReader(new InputStreanReader (System.in, "UTF-8")); String
name = br.readLine(); // Reading input from STDIN
System.out.println(name); // Writing output to STDOUT
1/Scanner
Scanners = new Scanner(System.in);
String names.nextLine(): System.out.println(name);
// Reading input from STDIN // Writing output to STDOUT
7/Write your code here
}
}
Unlock the Power of Google Analytics 4 in Just 5 Minutes with Next.js and TypeScript
Tags: nextjs, typescript, javascript, tutorial
Published: 2023-02-21 15:33:24

Are you looking to improve your website's performance and track user behaviour? Then you need to harness the full power of Google Analytics 4! And with Next.js and TypeScript, you can do it in just 5 minutes!

In my new article, I have shared a quick guide on how to get started with Google Analytics 4 using Next.js and TypeScript. 

The report covers everything you need to know to get started with Google Analytics 4, including:

- Setting up Google Analytics 4 for your website

- Creating custom events to track user behaviour

- Using Types to to enhance your code

The guide is perfect for developers who want to optimize their website's performance and track user behaviour using the latest version of Google Analytics. 

Plus, the guide is written in a clear and concise manner, making it easy to follow even if you're new to Next.js or TypeScript.

So why are you waiting? Head over to the article on StackFails.io and unlock the full power of Google Analytics 4 in just 5 minutes with Next.js and TypeScript!

link: [https://www.stackfails.io/posts/unlock-the-power-of-google-analytics-4-in-just-5-minutes-with-next-js-and-typescript-2023](https://www.stackfails.io/posts/unlock-the-power-of-google-analytics-4-in-just-5-minutes-with-next-js-and-typescript-2023)
ChatGPT
Tags: ai, chat, technology, news
Published: 2023-02-21 15:31:06


Let's get started!

**#CHAT GPT. #**
##_A BRIEF OVERVIEW_:##
Chat GPT is a form of chatbot, also known as chat generative Pre-trained transformed language chatbot developed by open AI.  The AI has remarkable ability to interact in conversational dialogue and provide a response that is as human as possible. 
This chatbot do generate responses from data fed to it that are satisfactory to humans on the platform. It is built by open AI located at San-Franssisco. It’s a type of Large Language Model (LLM). LLM is a kind of autocompleting scheme that predict next words like autofill in a sentence. This helps to generate a whole paragraphs and entire page of content thus why its possible for the chat-GPT to write articles.

**##DID YOU KNOW? ##**
•	Chat-GPT doesn’t provide or give harmful response .It does avoid those type of questions.
•	Whatever inquiry you input or what you search is what determines the answer you will get.
•	An expert in a certain field is preferably the best to generate greatest answers for specific questions fed to the AI.
•	Chat GPT can be used / utilized to complete a certain given task
•	It has both paid and free plans currently awaiting users to provide inputs and feedback on responses whilst improving it and becoming better and learning from mistakes.


**##WONDERING WHY IT MATTERS?##**
It will save time since repetitive tasks will be responded faster and repetitive questions.
Chat GPT generates a very personalised content and that’s how it improves engagement and lead to conversion rate.
It can be used in creating chatbots, virtual assistant and customer service and  even articles .
It is cost effective in reducing operating costs and scalability since it can handle large customer interactions.

CHAT GPT is a chatbot launched by Open AI in November 2022. You can check it out in their website in the following link:

https://openai.com
Data Platform Architecture Types
Tags: datascience, database, beginners, analytics
Published: 2023-02-21 14:51:29

[![](https://cdn-images-1.medium.com/max/2600/0*AieV6x36MOF2p6Mt)](https://towardsdatascience.com/data-platform-architecture-types-f255ac6e0b7?source=rss-e06a48b3dd48------2)

How well does it answer your business needs? Dilemma of a choice.

It is easy to get lost with the abundance of data tools available in the market right now. The Internet is filled with opinionated stories (often speculative) about which data tools to use and how to make our Data Stack modern in this particular year. Which data tools are the best? Who is the leader? How to choose the right ones? This story is for those who are in the “space” and are building the best data platform in the world.

[Continue reading on Towards Data Science »](https://towardsdatascience.com/data-platform-architecture-types-f255ac6e0b7?source=rss-e06a48b3dd48------2)