teleren/devto huggingface dataset:
(help)Deploy Nest.js Application to Vercel
Tags: javascript, nestjs, vercel
Published: 2023-09-30 11:27:23

- Such a puzzle trip. 
- If you are also trapped in the issue that deploying Nest.js App to Vercel, you can just refer to this [Video](https://www.youtube.com/watch?v=YvwSgm22VGE)

- I have searched and tried many other articles for a whole day, and all of them didn't help a little, and I also looked through Vercel's documents 2-3 times, I am still in the puzzle now.
- Even if I successfully deployed it, **I also don't know what this configuration means**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1a6fjsvpt7i3pax2sl1.png)

- is anyone know how can I get a deep understanding of how Vercel works?

1. why putting `main.ts` file here, does it mean that in the production, it directly executes the ts file instead of running the compiled main.js?
  - if the answer is yes, it seems we don't need to run `nest build` in Vercel.
  - if the answer is no, what Vercel did to `main.ts` then?
Copy Commands Online Tool
Tags: javascript, commands, docker, react
Published: 2023-09-30 11:16:45

Hi, folks!

Recently, I created an online free application to keep commands/links with an easy way to use and manage them.

I was dealing with lots of information at work and felt like I needed a tool to organize myself.

Copy Commands is an Online tool to create and maintain lists of commands. So it's easy to copy them by left-clicking.

If you're a developer, there's no much to explain. You're gonna find this app useful for your daily basis.

But if you're not, this application might still be worth it to organize, keep and copy info that you use a lot everyday.

You can create groups of commands, duplicate groups, create commands to be copied inside each group, modify the commands, sort them, etc.

So, here it goes the link: [https://www.copycommands.com/](https://www.copycommands.com/)

If this app helps you, consider helping me keeping it on air, by making a donation.

Enjoy!
React VS Angular
Tags: react, angular, webdev, javascript
Published: 2023-09-29 09:38:24

I'll provide a comparison of React and Angular based on various aspects:

| Aspect         | React                     | Angular                  |
|----------------|---------------------------|--------------------------|
| **Library vs. Framework** | React is a JavaScript library for building user interfaces. | Angular is a complete front-end framework for building web applications. |
| **Language**   | JavaScript                | TypeScript (superset of JavaScript) |
| **Architecture**| Component-based           | Component-based (uses modules, directives, components) |
| **Learning Curve** | Generally considered easier to learn and get started with. | Steeper learning curve due to its comprehensive features and concepts. |
| **Community Support** | Large and active community with extensive libraries and resources. | Active and strong community support, especially from Google and the Angular team. |
| **Flexibility** | More flexible, allowing developers to choose libraries for additional functionalities. | More opinionated and less flexible due to the framework's structure. |
| **Performance** | Generally high performance due to its virtual DOM and efficient rendering. | Generally good performance but can be affected by the framework's complexity. |
| **State Management** | Relies on third-party libraries like Redux or Context API for state management. | Built-in state management using RxJS and services. |
| **Data Binding** | One-way and two-way data binding is supported. | Two-way data binding is a prominent feature. |
| **Mobile App Development** | React Native is used for building mobile apps. | Ionic and NativeScript can be used, but not as tightly integrated as React Native. |
| **SEO-Friendliness** | Requires additional effort for server-side rendering (SSR) to improve SEO. | Built-in support for server-side rendering (Angular Universal) for improved SEO. |
| **Community Size** | Large and widely adopted in the developer community. | Well-established with a significant developer base. |
| **Tooling and CLI** | Create React App (CRA) provides a quick setup and development environment. | Angular CLI provides a robust command-line interface for project setup and scaffolding. |
| **Integration** | Easier integration with existing projects and libraries. | Deep integration within itself but can be challenging to integrate with non-Angular libraries. |

Keep in mind that the choice between React and Angular often depends on the specific project requirements, team expertise, and development preferences.
Mastering Networking Skills: A Tour of Juniper Learning Portal
Tags: juniperlearningportal
Published: 2023-09-30 11:16:10

Features of the Juniper Learning Portal
The Juniper Learning Portal stands out due juniper learning portal to its exceptional features, including:
•	Diverse Course Catalog: A vast array of courses catering to different skill levels and interests.
•	Interactive Learning: Engaging content and interactive modules that facilitate effective learning.
•	Flexible Learning Paths: Customizable learning paths to suit individual preferences and career goals.
•	Certifications: Opportunity to earn industry-recognized certifications upon course completion.
Courses Offered and Learning Paths
The courses available on the Juniper Learning Portal cover a wide spectrum of networking and technology-related topics. From basic networking concepts to advanced security protocols, learners can choose courses aligned with their interests and career objectives. Additionally, the portal offers curated learning paths, guiding learners through a structured journey to mastery.


Click Here For More Details>>>>>>>https://dumpsmedia.com/education/juniper-learning-portal-training/
How to deal with boredom as a programmer
Tags: python, programming
Published: 2023-09-30 10:50:05

One of the things that tend to make a lot of people back down from learning to code is boredom.
At a certain point in time ,you are going going to get bored and to be honest its a small part of every job .I don’t usually get bored that often when coding but I’ve seen others break down while learning the craft

So here is a quick walk through of how I deal with boredom

### 1. Understanding that you’re part of the problem

Boredom comes as a result of doing the same thing over and over again. As developers we need to find ways to make our job fun and joyful .For example you can take breaks.

### 2. Challenge your self .

Basically you have to look for things you haven’t done before and just work on them. These challenges can come in all shapes and sizes .Challenges help in polishing your skill and furthermore helps you to understand your skill and it capabilities .

### 3. Keep Learning more

Computer Science is a very big field and if we learn too little about it , we’ll miss out on all the new frameworks created and new tools .
We as developers need to be hungry for information and we need to keep our curiosity afloat .

## Conclusion

If you are reading this , i guess you really want to improve your software development skills .
Don’t worry its what we’re all trying to do
and i hope this short readout helped you. 
Good Luck .
Perl Weekly Challenge #236 - Lemonade Stand
Tags: perl, perlweeklychallenge
Published: 2023-09-30 10:43:04

Welcome back to another round of the weekly challenge, with just one solution this week. I'm setting up a lemonade stand and need to deal with change. Interestingly, I can only sell one juice per person, so I hope you're not super thirsty!

We can take $5, $10, and $20 bills, and we don't start with any change, so we need our previous customers to provide us with change for future customers. Let's find out if we can make change for a set of customers.

Here's the code:

    #!/usr/bin/perl
    use v5.36;
    use List::Util 'any';

    my %till;
    my $failure;
    foreach my $bill (@ARGV) {
        if(!any {$bill == $_} (5, 10, 20)) {
            say('At least one bill provided is not $5, $10, or $20.') and exit;
        }
        $till{$bill}++;
        if($bill == 20) {
            if($till{10} and $till{5}) {
                $till{10}--;
                $till{5}--;
            } elsif($till{5} >= 3) {
                $till{5} -= 3;
            } else {
                $failure = 'false';
                last;
            }
        } elsif($bill == 10) {
            if($till{5}) {
                $till{5}--;
            } else {
                $failure = 'false';
                last;
            }
        }
    }
    say(defined($failure) ? $failure : 'true');

It might be possible to make this cleaner, but this is what I came up with quickly, so here it is. Our cash drawer is represented by the hash `%till`, which contains our $5s, $10s, and $20s. We add each bill we get, then we need to make change (unless it's a 5). If we can't make change at any point, we set our failure flag and stop serving customers. We check for the ability to successfully make change depending on the bill we've been handed. For a 20, first we try to make change with a $10 and a $5, otherwise three $5s, and for a $10 we see if we have any $5s. That's all we have to do! It's a lot of code for a simple result.

Hope to see you all next week. Enjoy!
vim-real-commenter
Tags: vim, neovim, comment, plugin
Published: 2023-09-30 10:16:07

## Resume
I make a new plugin, this time it is to make code comments like vscode, it supports 75 languages.


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

## Install
You can add this plugin to your vim cloning my repo:
https://github.com/dapt4/vim-real-commenter

Or using a Plugin manager like:

"NeoBundle
NeoBundle 'dapt4/vim-real-commenter'

"or VimPlug
Plug 'dapt4/vim-real-commenter'

:source %
:NeoBundleInstall
"or
:source %
:PlugInstall

## Mappings
This plugin must be mapped for works, it is recommended:
noremap <C-_> :call SetComment(0)<CR>
vnoremap <C-_> :<c-u> call SetComment(1)<CR>

## Usage
Just go to the desired line and use your mapped keys, you can make a visual select and it will work correctly

**_[source-code]: https://github.com/dapt4/vim-real-commenter_**
Leetcode: Single Number (Kotlin)
Tags: leetcode, kotlin, android, mobile
Published: 2023-09-30 10:00:00


![](https://cdn-images-1.medium.com/max/2560/1*SMPQonqL-eilcL5HfheW2g.png)

***Single Number*** is an easy question on Leetcode. I will discuss the problem and my solution below.
[**Single Number - LeetCode**](https://leetcode.com/problems/single-number/)

### Problem Statement

![](https://cdn-images-1.medium.com/max/2928/1*PQXYLLo8vFORAxJn0WXv4g.png)

### Examples

![](https://cdn-images-1.medium.com/max/2000/1*8TwVeY3c8KaxZLj0cUYH-A.png)

### Constraints

![](https://cdn-images-1.medium.com/max/2664/1*q5eVtGRsxcJ8s6G00REhcg.png)

### Brainstorm

The solution I thought of is pretty straightforward.

 1. They give us an array of integers, so we can use a map that will store each number as the key and the count of that number as the value.

 2. We iterate through the array to set each number’s count in the map.

 3. We will then iterate through the array again, but this time we will check each number’s count in the map and return the number with the count of one

They guarantee a number with a count of one is in the given array, so you could technically return any number at the end because it should never get to that point. I use Int.MIN_VALUE.

### Solution
{% gist https://gist.github.com/cmcoffeedev/8fbf2ccc3b472a79363c8350df3f0512.js %}
How to change the logo and App name in your own React app
Tags: beginners, tutorial
Published: 2023-09-30 09:58:42

**Replace the Default Logo Image:**

In a CRA project, the default logo is typically located in the public directory and is named favicon.ico. To change the logo, follow these steps:

1. Replace the Logo Image:
Replace the existing favicon.ico with your own logo image. Make sure your new logo is named favicon.ico.
You can also replace any other images you want to use throughout your application in the public directory.

**2-Clear Browser Cache**
After making these changes, you may need to clear your browser cache to ensure the updated logo and title appear correctly when you reload your application. Refer to the previous response on how to clear your browser cache for different browsers.

**3. Update the Title and Description:**
To change the app's title and description, you can edit the public/index.html file. Open the index.html file and locate the <title> and <meta name="description"> tags, which you can modify as needed.
**index.html**
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Your App Description Here"
    />
    <title>Your App Title</title>
  </head>
  <!-- Rest of the HTML content -->
</html>
**4-Test Your App*
Run your React app using npm start to see the changes take effect in your local development environment.
Using array_merge in a PHP loop is considered bad practice
Tags: php, loop, performance
Published: 2023-09-30 09:56:42

To use the `array_merge` function in a `for` / `foreach` / `while` loop, do the following:

```php
$arraysToMerge = [ [1, 2], [2, 3], [5, 8] ];

$arraysMerged = [];
foreach($arraysToMerge as $array) {
    $arraysMerged = array_merge($arraysMerged, $array);
}
```

is a poor practice 😱 because it is a **performance drain** (especially on memory).

Since PHP 5.6, there is a new operator, the **spread operator**, 

```php
$arraysToMerge = [ [1, 2], [2, 3], [5,8] ];

$arraysMerged = array_merge([], ...$arraysToMerge);
print_r($arraysMerged);
```

output

```shell
Array
(
    [0] => 1
    [1] => 2
    [2] => 2
    [3] => 3
    [4] => 5
    [5] => 8
)
```

which automatically expands the array without the need to loop through it.

- No more performance issues 
- No `for` / `foreach` / `while` loops
- Processed in a single line of code.

A more complex example can be represented by the following case:

- I have a list of students
- For each of them, I need to retrieve their used books
- I need to store them in a new array structure

It is possible to use the spread operator, but an intermediate process is required:

```php
// student data model
$students = [['id'=>1],['id'=>2],['id'=>3]];

// retrieve used books by student ID
function searchUsedBooksByStudent($id) {
    $books = [];
    $books[1] = ['italian', 'history'];
    $books[2] = ['mathematics'];
    $books[3] = ['latin'];
    if (isset($books[$id])) {
        return $books[$id];
    }
    return [];
}


$arrayUsedBooks = [];
foreach ($students as $student) {
    $books = searchUsedBooksByStudent($student['id']);
    if ($books) {
      $arrayUsedBooks[] = $books;
    }
}
$arraysMerged = array_merge([], ...$arrayUsedBooks);
print_r($arraysMerged);
```

output

```shell
 Array
(
    [0] => italian
    [1] => history
    [2] => mathematics
    [3] => latin
)
```

I hope these examples are helpful. Now, look at your code to see what you can improve!

> Good work 👨‍💻
Unsolicited tip #1 for Tailwind CSS users
Tags: tailwindcss, html, webdev, productivity
Published: 2023-09-30 09:38:34

I keep seeing this way of using Tailwind:

This doe's not allow you to be productive because you are adding extra divs and classes and it becomes super uncluttered and takes you longer to write. 

Don't forget that this is Tailwind, lot's of classes, right?
 
1. We could also remove the "mt-", "mb-" and "space-" and simply using "gap-". 
2. We could also remove the "px-8" and lift it up on the first div together with "py-12 max-w-7xl mx-auto" and wrap it all with a <section> tag.

It's supported in every browser.......

![snippet one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4lez7mjv22e64sj35z2.png)

Keep it clean, tidy and semantic.


![snippet two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf2qdnh3cp05iu40n43a.png)


Hope you find it helpful.


/mike (x.com/mike_andreuzza
Why I Joined Dev?
Tags: writing, data
Published: 2023-09-30 09:55:47

I have no special reason as to why I have joined Dev, I am not a developer, software engineer or data engineer. 

I just want to write anything that interests me, irks me or makes me wonder when I  engage with people/staff/news offline and online. 

That's it. Welcome to my world. I hope we get along, learn from each other, critique each other and most importantly have a good time when engaging with any of my writings.
Data Science! Data Science
Tags: datascience, luxacademy, beginners
Published: 2023-09-30 09:41:22

Before we dive into data science, What is data?
**Data** is a collection of raw facts and figures collected for a specific task e.g. census data, number of cars that use a road per hour, daily weather updates, etc. Once this data is collected it is not useful to anyone until some analysis is done on it and this brings us to data science.

**Data science Definition**
Data science is the study of data to extract meaningful insights for business and solve real-life problems. Easy right :).
Data science is a multidisciplinary field that is it combines different disciplines including mathematics, statistics, probability, programming, and more.


**Key Components of Data Science**
- Data collection
- Data cleaning 
- Data Exploration
- Modeling
- Interpretation

**Data Collection**
Data collection is the first step in data analysis. This involves gathering data from existing databases or collecting it directly from locals. eg if I need to do an analysis of how a school is performing I can get the data from KNEC or visit various schools, get the data from them, and do my "thing". 

**Data cleaning**
You have the data now, many a time when this data is messy, has errors, has outliers, and has duplicates basically means it cannot be used in raw form. Data cleaning involves removing all the irregularities that may interfere with the correct analysis and insights. 

**Data Exploration** 

It's time to work with the data now that you've cleaned. Data exploration is summarising and visualizing data in order to better comprehend its properties. Finding patterns and relationships in the data is made easier by methods like data visualization, descriptive statistics, and exploratory data analysis (EDA).


**Modeling** 
It entails creating mathematical and statistical models to predict the future or unearth undiscovered information. Regression analysis, clustering, neural networks, and machine learning algorithms are examples of common modeling techniques.

**Interpretation**

Data scientists interpret the outcomes of model training and prediction to obtain actionable insights. To fully understand the impact of the findings and make informed choices, this phase necessitates domain expertise e.g. transport, Medicine, climate, etc.

**Data Science Applications**

Health Care 
Transport 
Sports etc

**Conclusion**
Data science is the process of extracting meaning full insights that will help businesses make informed decisions as well us solve reallife problems.
HOW DOES THE INTERNET WORK
Tags: programming, codenewbie, learning, webdev
Published: 2023-09-30 09:21:25

It is important to have a solid understanding of what the internet is and how it works. The Internet has become such a large part of our lives, that a good understanding is needed to use it effectively.
Firstly, we need to know what a network is, A Network is a group of computers or other devices that are connected
When all networks are connected they form the Internet. The Internet is a network of networks
The Internet is a global network of computers connected to each other that communicate through standardized protocols.
When data is sent over the internet, it is broken up into small packets(A small unit of data transmitted over the internet.) sent from your device to a router(A device that directs packets of data between different networks.).
The router examines the packet and forwards it to the next router in the path towards its destination.
This process continues until the packet reaches its final destination. To ensure that packets are sent and received correctly, the internet uses different protocols.
A protocol is a set of rules and standards that define how information is exchanged between devices and systems, these protocols include the Internet Protocol (IP) and the Transmission Control Protocol (TCP).
The Internet Protocol (IP) is responsible for routing packets to their correct destination, while the transmission control protocol (TCP) ensures that packets are transmitted reliably and in the correct order.
IP addresses and domain names are both important concepts to understand when working with the internet.

An IP address is a unique identifier assigned to each device on a network. It’s used to route data to the correct destination, ensuring that information is sent to the intended recipient. IP addresses are typically represented as a series of four numbers separated by periods, such as “194.167.1.1”.Domain names on the other hand, are human-readable names used to identify websites and other internet resources. They’re composed of two or more parts, separated by periods. For example, “google.com” is a domain name. Domain names are translated into IP addresses using the Domain Name System (DNS).
HTTP is the protocol used to transfer data between a client (such as a web browser) and a server (such as a website). When you visit a website, your web browser sends an HTTP request to the server, asking for the webpage or other resource you’ve requested, the server then sends an HTTP response back to the client, containing the requested data.
TCP/IP (Transmission Control Protocol/Internet Protocol) is the underlying communication protocol used by most Internet-based applications and services. It provides a reliable, ordered, and error-checked delivery of data between applications running on different devices.

HTTPS is a more secure version of HTTP, which encrypts the data being transmitted between the client and server using SSL/TLS (Secure Sockets Layer/Transport Layer Security) encryption. This provides an additional layer of security, helping to protect sensitive information.
proxy login using react js
Published: 2023-09-30 09:08:05

**What is Proxy Login?**
Proxy Login is also known as proxy authentication.
This is a mechanism that allow one user to log into a system  or application on the behalf of another user.

**Users of proxy Login**

**Delegated Access:** It allows one user or system component to delegate specific permissions or access rights to another user or component. For example, a system administrator may temporarily act on behalf of a regular user to troubleshoot an issue.

**Authentication and Authorization:** Proxy login is used in situations where one entity (the proxy) needs to access resources or perform actions on behalf of another entity. The proxy must authenticate itself and obtain the necessary permissions to act as the other entity.

**User Impersonation:** In some systems, especially for troubleshooting or support, administrators can temporarily assume the identity of another user to see the system from their perspective, troubleshoot issues, or provide assistance.

**Multi-Tenancy:** In multi-tenant applications or services, proxy login can be used to allow an administrator to access the data or settings of a specific tenant without knowing their password.
Awesome Javascript loading bar with percentage
Tags: freecodez, react, html, blog
Published: 2023-09-30 09:03:26

**Awesome Javascript loading bar with percentage**

![Awesome Javascript loading bar with percentage](https://res.cloudinary.com/freecodez/image/upload/v1696064602/images/wvf7vdwisizd48cb4apk.webp)

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

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)