teleren/devto huggingface dataset:
BillSplita
Tags: javascript, webdev, css, react
Published: 2022-09-06 17:28:47

Hello Everyone, 

I have recently taken part in 1 of the hackathons where I was supposed to develop a bill splitting application.
And i have created **BillSplita**.

Please give me a chance to introduce something interesting about **BillSplita**.

_BillSplita is a Bill Splitting web app which helps user to split their bill when they are going to a trip or to spend holidays with friends. BillSplita helps users to add their expenses that they have done for each items/service they have purchased (like tickets, restaurant bill, hotel bills, others) throughout the trip and who has paid how much amount for that purchase or whether any user has taken part in that purchase or not and split the bill accordingly for the different amount paid by different user or paid by a single individual. And if you haven't participated in a particular purchase, then you don't have to contribute for that purchase. If you have already paid your bill for any purchase and others paid in a distributed way, then bill will only split between them with the actual amount that who will pay to whom and you don't have to worry about yours._


> Let me explain this with an example,
> If in a trip group 3 people (A, B, C) are added and they have purchased cake and price for cake is 400 and for this A has eaten cake and paid 150, B has eaten cake and paid 150 and C has not eaten cake but paid 100, so for the item cake bill will split only between A and B and A has to pay 50 to C and B has to pay 50 to C.

BillSplita shows the consolidated view of who owes to whom and by how much at the end to the trip.
It also shows you the detailed view (item wise) of the amount owing by the members of the group.



If you liked my project, then please VOTE ME HERE [rahul nag](https://www.findcoder.io/challenges/Build%20A%20Bill%20Splitter/62f25d4eba9b544ac487ba5a)


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




Please check the demo video here.

{% embed https://www.youtube.com/watch?v=EGLopNG7SO0 %}


You can checkout the application here : https://billsplita.netlify.app


Tech used:
1. ReactJS for UI
2. Firebase

Thank You,
Rahul Nag
(Team CapsCode)
How To Add Tooltips In HTML & CSS
Tags: webdev, beginners, tutorial, css
Published: 2022-09-06 16:46:20


![Add Tooltips In HTML & CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9a2dz8qjwrk7av6cg0f.jpg)
Tooltip is a way used in HTML for displaying some extra details about the particularly selected element. This can be done on the mouse hover effect whenever the user drags the mouse over an element that is using a tooltip to display particular information about that element.

Tooltip is used as an inline element like div, periodically with class tooltip text. One can set a place to that tool-tipped text by using CSS, which supports us to represent some style and position to our tooltip.

## Add Tooltips in HTML & CSS

To add tooltips you need to create two files one is index.html and one is style.css or you can add CSS in the HTML file as well. so, let’s start.

HTML Code.

```HTML
<div>Here is an examples of a <a class="tooltip" href="#">Tooltip<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a></div>
```
CSS Code

```CSS
<style>
.tooltip {position: relative;}
.tooltip span {
 margin-left: -999em;
 position: absolute;
}
.tooltip:hover span {
 border-radius: 5px; 
 position: absolute; left: 1em; top: 2em; z-index: 99;
 margin-left: 0; width: 250px;
}
.classic { padding: 0.8em 1em; 
}
* html a:hover { background: transparent; }
.classic {background: #f3f4fe; border: 1px solid green; }
</style>
```
Read More: [Add Tooltips In HTML & CSS](https://softcodeon.com/tutorials/add-tooltips-in-html-and-css.htm)
[FR] Le Repo secret de GitHub ?
Tags: github, programming, tutorial, productivity
Published: 2022-09-06 17:26:22

Beaucoup connaissent cette astuce, mais beaucoup ne l'utilise pas ! Pourquoi ?!

On passe d'un profil Github basique (pas beau 😒)  à un profil comme celui-ci 🤩  :

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

------------------------------------

**Comment y parvenir ?**

Très simple !

**_(Tu trouveras tout les liens nécessaires pour continuer en dessous des explications)_**

Il te suffit de créer un repo qui portera le nom de ton **pseudo** GitHub ! (Tu auras même un petit message indiquant que tu as trouvé le _repo secret_ 🤫)

Tu as réussi ? Parfait !
On continue alors.

A présent tout va se passer dans ton **README**. Si tu t'y rends, tu peux voir qu'il est déjà pré-configuré.
Mais tu vas me dire : "C'est tout ce que tu as pour nous ?!"

Et non, car la magie va opérer **ici** !
Un Monsieur du nom de **Rahul Jain** va nous faciliter la tâche !

Il a tout automatisé pour nous !
Tu vas pouvoir mettre tes informations et tout ce que tu désire mettre pour ensuite télécharger ton README tout propre à mettre sur ton repo ! Sympa non ?!

------------------------------------

Le lien pour faire ton Repo : [Ici](https://rahuldkjain.github.io/gh-profile-readme-generator/)

Si tu veux en découvrir d'avantage sur tout ça, Guillaume Reygner qui fait pas mal d'article en à fait un sur le sujet juste [**ici**](https://guillaume-reygner.medium.com/github-profile-master-803c494271ba) !

Si tu n'aimes pas le rendu et que tu n'as pas d'idée, voici un repo avec des [Templates](https://github.com/abhisheknaiidu/awesome-github-profile-readme).

Si tu as aimé cet article et/ou que tu souhaites y contribuer, laisse un commentaire/like !
Minimum Sum of Absolute Differences of Pairs
Tags: geeksforgeeks, solution, algorithms, array
Published: 2022-09-06 17:13:30

### Problem Statement
You are given two arrays A and B of equal length N. Your task is to pair each element of array A to an element in array B, such that the sum of the absolute differences of all the pairs is minimum.

link to the problem statement could be found here, https://practice.geeksforgeeks.org/problems/minimum-sum-of-absolute-differences-of-pairs/1

Sample Input and Output
> Example 1
```
Input:
N = 4
A = {4,1,8,7}
B = {2,3,6,5}
Output:
6
Explanation:

If we take the pairings as (1,2), (4,3),(7,5), and (8,6), 
the sum will be 
S = |1 - 2| + |4 - 3| + |7 - 5| + |8 - 6|
  = 6
It can be shown that this is the minimum sum we can get.
```

### Expected Time Complexity: O(N*log(N))
### Expected Auxiliary Space: O(1)

## Solution
Now how to solve this, if you closely look into the problem statement it clearly means the absolute difference should be as minimum as possible.
Let's apply the induction method, now consider 2 arrays
```
X = [a, d, b, c]
Y = [c, d, b, a]
```

The minimum comes when for an element a in array X there must be the closest number in Y. So to 'b' within array X should map into array Y. When done this array would look like

```
X = [a, b, c, d]
Y = [a, b, c, d]
Difference = 0
```

The bottom line here, is you need to have the same order in both arrays. Which directly means, we need to sort the Array either in ascending or descending order.

Here, I've choosen default natural sorting order, ie, Ascending. By this approach we come up with below solution.

```
class Solution { 
    long findMinSum(int[] a,int[] b, int n) { 
        if(a.length != b.length) 
            throw new IllegalArgumentException();
        long res = 0l;
        Arrays.sort(a);
        Arrays.sort(b);
        for(int i = 0; i < a.length; i++) {
            res += Math.abs(a[i] - b[i]);
        }
        return res;
    }
}
```
Problem with React and Express.
Published: 2022-09-06 16:52:04


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

I get this errors when I try to import this function 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzrcnux8fdgagclzlmgl.png)

Only then! Can you help me? And I can use some advice where to put my express, mongoDB server and how to use it in a React app.
Setup Smart Contract Development with Foundry and Thirdweb
Tags: tutorial, solidity, thirdweb, foundry
Published: 2022-09-06 16:51:38

## Intro
In this guide, you are going to learn how to set up a starter smart contract with Foundry and ThirdWeb. Foundry provides the fastest way to test your smart contract with Solidity. On the other hand, Thirdweb3 provides extensions: a Solidity library of reusable and secure smart contracts. Once this contract is built, we can deploy it and get a dashboard that helps us interact with it. Last but not least, ThirdWeb allows us to create contracts and share them with the team or everyone.

## Setup

Our first step is to download the repository of the starter
https://github.com/thirdweb-example/forge-starter

Install the dependencies
```bash
npm i @openzeppelin/contracts @openzeppelin/contracts-upgradeable

npm i @thirdweb-dev/contracts
```
- Refresh Visual studio code if it said that the contract does not exist when importing it.

Add to remappings in foundry.toml or create `remappings.txt` because vscode extension solidity has some issue finding remapping from `foundry.toml` for correct error highlight. 
```
forge remappings
```

```
@thirdweb-dev/=node_modules/@thirdweb-dev/
@openzeppelin=node_modules/@openzeppelin/
forge-std/=lib/forge-std/src/
ds-test/=lib/forge-std/lib/ds-test/src/
```

Lets Create an initial example. ThirdWeb provides two types of extensions:
- Base contracts that you can build upon.
- Features for you to implement.

```js
// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.13;

import "@thirdweb-dev/contracts/token/TokenERC20.sol";

contract Contract is TokenERC20 {

constructor() {}

fallback() external payable {}

receive() external payable {}

function mintWithFee() public payable {

_mint(msg.sender, msg.value);

}

}
```
Fallback and receive functions are executed when a non-existent function is called or there is no data supplied with the function call, respectively.

Create a test to make sure that everything works as expected.
```js
// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.13;

import "forge-std/Test.sol";

import {Contract} from "src/Contract.sol";


contract ContractTest is Test {

Contract myContract;

function setUp() public {

myContract = new Contract();

}

function testExample() public {

myContract.mintWithWei{value: 1 wei}();

assertEq(myContract.balanceOf(address(this)), 1 wei);

}

}
```

## Deployment

Run `forge test` to test it.
Run `npm run deploy` to deploy to Thirdweb Dashboard.
Run `npm run release` to upload the contract to your profile so that everyone can find it and use it.

## Useful Links
https://book.getfoundry.sh/

https://github.com/thirdweb-example/forge-starter
https://github.com/thirdweb-dev/contracts
https://portal.thirdweb.com/extensions

https://thirdweb.com/deployer.thirdweb.eth/TokenERC20
How to validate all child node which has the same set of validations?
Published: 2022-09-06 16:49:43

```
validations() {
  return {
    formData: {
      name1: {
        rule1,
        rule2
      },
      name2: {
        rule1,
        rule2
      },
      name3: {
        rule1,
        rule2
      },
      name4: {
        rule1,
        rule2
      },
      name5: {
        rule1,
        rule2
      },
    },
  }
}
```

is there any shorthand I can use? Basically all the child nodes are having the same set of validation rules.
Useful windows shortcuts to speed up your work
Published: 2022-09-06 16:43:52

**Win key shortcuts**
**Win+D** : shows or hides the desktop
**Win+S** : opens up the windows search bar
**Win+L** : locks your PC or laptop
**Win+E** : opens file explorer
**Win+I** : opens windows settings
**Win+(number)** : opens the program as its pinned on taskbar

**Ctrl key shortcuts**
**Ctrl+E** : opens the search bar of active window
**Ctrl+W** : closes the window, image or tab 
**Ctrl+T** : opens new browser tab 
**Ctrl+N** : opens new file
**Ctrl+Shift+Esc** : opens task manager
**Ctrl+(number)** : switches to the tab respectively
**Ctrl+P** : prints document
**Ctrl+O** : opens a file
**Ctrl+F** : find text
**Ctrl+A** : select all
**Ctrl+Y** : redo action
**Ctrl+Z** : undo action
**Ctrl+mouse scroll** : zoom in or out in most programs

**Other shortcuts**
**F2** : rename files
**Alt+F4** : close the window
**F11** : fullscreen
**F5** : refresh
**Alt+arrowkey** : move forward backward in either a browser 
                   or file

Thanks for Reading!💜
query.params.operationKind - Cannot read properties of undefined reading operationKind
Tags: recoil, react, reactnative
Published: 2022-09-06 16:33:58

Hello i do have following query:


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


But when i try to execute it, i'm hitting this error:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z95lthf3n2efukvdqgui.png)
Updating My Previous GraphQL + .NET to GraphQL.NET version 7
Tags: dotnet, graphql, tutorial, beginners
Published: 2022-09-06 16:29:38

GraphQL.NET version 7 was released around August 23, 2022. Now, I want to upgrade it. It has some breaking changes. You can see the breaking changes [here](https://graphql-dotnet.github.io/docs/migrations/migration7) too.

Here is my changes for `GraphQLNETExample.csproj` :

```diff
+<PackageReference Include="GraphQL" Version="7.0.2" />
+<PackageReference Include="GraphQL.MicrosoftDI" Version="7.0.2" />
+<PackageReference Include="GraphQL.Server.Transports.AspNetCore" Version="7.1.0" />
+<PackageReference Include="GraphQL.Server.Ui.Altair" Version="7.1.0" />
+<PackageReference Include="GraphQL.SystemTextJson" Version="7.0.2" />
```

Final Result:

```xml
    <PackageReference Include="GraphQL" Version="7.0.2" />
    <PackageReference Include="GraphQL.MicrosoftDI" Version="7.0.2" />
    <PackageReference Include="GraphQL.Server.Transports.AspNetCore" Version="7.1.0" />
    <PackageReference Include="GraphQL.Server.Ui.Altair" Version="7.1.0" />
    <PackageReference Include="GraphQL.SystemTextJson" Version="7.0.2" />
```

## Pull Request Diff

I have partial changes to the codes because I've updated the dependencies without updating my code, which became a broken build.

{% embed https://github.com/bervProject/GraphQLNETExample/pull/64 %}

### Code Changes

I only need to update the `Program.cs`. Here the code:

```csharp
using GraphQL;
using GraphQL.MicrosoftDI;
using GraphQL.Types;
using GraphQLNetExample.EntityFramework;
using GraphQLNetExample.Notes;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddDbContext<NotesContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("Default"));
});
builder.Services.AddSingleton<ISchema, NotesSchema>(services => new NotesSchema(new SelfActivatingServiceProvider(services)));
builder.Services.AddGraphQL(options =>
                    options.ConfigureExecution((opt, next) =>
                    {
                        opt.EnableMetrics = true;
                        return next(opt);
                    }).AddSystemTextJson()
                );

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        builder =>
        {
            builder.WithOrigins("*")
                   .AllowAnyHeader();
        });
});

builder.Services.AddControllers();
builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new() { Title = "GraphQLNetExample", Version = "v1" });
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "GraphQLNetExample v1"));
    app.UseGraphQLAltair();
}

app.UseHttpsRedirection();

app.UseCors();

app.UseAuthorization();

app.MapControllers();

app.UseGraphQL();

app.Run();
```

## Good Luck!

If you are still confused, feel free to comment here. Thanks for reading!

![wink gif](https://media.giphy.com/media/3ofSBxTeZ8OpzTkZGM/giphy.gif)
💚 My Mac Apps
Tags: apple, mac, app, free
Published: 2022-09-06 16:20:32

This is my list... all the app are free to use! 🥳

## Tools
- 🏄‍♀️ [Google Chrome Dev](https://www.google.com/chrome/dev/)
- 🏄‍♀️ [Brave Browser](https://brave.com/)
- 📊 [OnlyOffice](https://www.onlyoffice.com/download-desktop.aspx)
- 🗓 [Itsycal](https://www.mowglii.com/itsycal/)
- 📬 [Gmail](https://www.google.com/intl/en_us/gmail/about/)
- ⛅️ [Dropbox](https://www.dropbox.com/)
- 📬 [Microsoft Outlook](https://www.microsoft.com/microsoft-365/outlook/email-and-calendar-software-microsoft-outlook)
- ☁️ [Microsoft OneDrive](https://www.microsoft.com/microsoft-365/onedrive/online-cloud-storage)
- 💬 [Discord](https://discord.com/)
- 📝 [Notion](https://notion.so/)
- 📹 [Miro Video Converter](http://www.mirovideoconverter.com/)

## Utility
- 🧹 [Appcleaner](https://freemacsoft.net/appcleaner/)
- 🤐 [Keka](https://www.keka.io/)
- 🖍 [Maccy](https://maccy.app/)
- ⚙️ [Stats](https://github.com/exelban/stats)
- 🍱 [Rectangle](https://rectangleapp.com/)
- 📵 [UNetbootin](https://unetbootin.github.io/)
- 🖥 [UTM](https://mac.getutm.app/)

## Development
- ✍️ [Sublime Text](https://www.sublimetext.com/)
- 🦚 [Microsoft Visual Studio](https://visualstudio.microsoft.com/)
- 👾 [MAMP](https://www.mamp.info/en/mamp/mac/)
- 🦆 [Cyberduck](https://cyberduck.io/)
- 🏄‍♀️ [Firefox Developer Edition](https://www.mozilla.org/it/firefox/developer/)
- 🕹 [Local](https://localwp.com/)
- 🎳 [Prepros](https://prepros.io/)
- 💻 [GitHub Desktop](https://desktop.github.com/)
- 💽 [Sequel Ace](https://sequel-ace.com/)

## Design
- 🎨 [Figma](https://www.figma.com/)

## Video
- 📽 [HandBrake](https://handbrake.fr/)
- 📼 [IINA](https://iina.io/)
60 Days of Data Science and Machine Learning
Tags: datascience, ai, machinelearning, python
Published: 2022-09-06 16:05:24

Hello, everyone.

Followings are fourth week of this series. You can find them on my [GitHub](https://github.com/levintech/60-Days-of-Data-Science-and-ML). You can run all the notebook on colab or jupyter notebook as well.

- [Day 22 - All the important ML algorithms](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_22_All_the_Important_ML_algorithms.ipynb)

    Topic : Quick overview of ML algorithms

- [Day 24 - Machine Learning Classification Project2 Part1](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_24_Machine_Learning_Classification_Project2_Part1.ipynb)

    Topic : ML Classification on Customer Review and Analysis in details

- [Day 25 - Machine Learning Classification Project2 Part2](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_25_Machine_Learning_Classification_Project2_Part2.ipynb)

    Topic : ML Classification on Customer Review and Analysis in details

- [Day 26 - Machine Learning Clustering Project1 Part1](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_26_Machine_Learning_Clustering_Project1_Part1.ipynb)

    Topic : Machine Learning Clustering with Customer Segmentation

- [Day 27 - Machine Learning Clustering Project1 Part2](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_27_Machine_Learning_Clustering_Project1_Part2.ipynb)

    Topic : Machine Learning Clustering with Customer Segmentation

- [Day 28 - Machine Learning Clustering Project2 Part1](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_28_Machine_Learning_Clustering_Project2_Part1.ipynb)

    Topic : Machine Learning Clustering with Suctomer Personality Analysis

- [Day 29 - Machine Learning Clustering Project2 Part2](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_29_Machine_Learning_Clustering_Project2_Part2.ipynb)

    Topic : Machine Learning Clustering with Suctomer Personality Analysis

- [Day 30 - Machine Learning Clustering Project2 Part3](https://github.com/levintech/60-Days-of-Data-Science-and-ML/blob/main/Day_30_Machine_Learning_Clustering_Project2_Part3.ipynb)

    Topic : Machine Learning Clustering with Suctomer Personality Analysis


Hope my work would be little bit helpful for AI enthusiastic.
If that, please **star** that repository then **follow** me on **Github** and **Dev.to**

https://github.com/levintech
https://dev.to/levintech
Best Regards.
Google Slides logo in Python
Tags: python, pythonturtle, chiki1601, google
Published: 2022-09-06 15:50:37

Hello friends...

I created Google Slides logo using Python...

which is shown below:


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


If you want source code,
Please tell me in the comment!!!👇🏻👇🏻👇🏻
I want to build an open sourced parking app because I live in NYC
Tags: 4articles4weeks, week3, ideas
Published: 2022-09-06 15:37:41

Recently, I was driving in NYC and, as expected, when I got to my destination I could not find parking. I ended up paying for parking, but it reminded me of an idea I had years ago. A parking app that allowed users to share open parking spots. It was one of my first app ideas that I worked on years ago, called the [Parking App](https://github.com/SincerelyBrittany/ParkingAppV2). The idea is that a a user will share when they saw an open car spot or if they plan to leave a parking spot, they share it too. It would go based off a honor system and allow people to see places where there might be parking.

Today, it reminds me a lot of the waze app, where users are able to report police, items in the street, cars on the side of the road, etc. Imagine having an app that shows open parking spots in some of the largest cities. It even shares hydrants or places where you can't park! It would be great and save so much time. 

I remember when I was building the app, I ran into a lot of questions some included:

1. Why would people use this app? What are the top incentives? I was thinking about a point system where if a user shares a spot they get points that will give them more opportunities to see spots. If you never contribute to the app, you wont see spots or may not see as many spots. It would make people want to share more so that they can have more chances of seeing free open parking spots.

2. Security. We want to make sure a user is unable to know a persons location. For example, we don't want someone to say a place has an open parking spot and be waiting for someone to park there. 

3. Should people be able to save spots. Right now, it's just a trusting honor system, but what if people began to save spots for people. For example, if they knew they were leaving soon. Add it and give a countdown for someone who needs a spot in the area. 

Hmmm, these are all just thoughts. I still love this idea and hopefully one day I can pick it back up again. I would need more IOS and Android developers, but it would be a fun open source project to work on. If you have any ideas to add or if you are interested in this idea. Comment below!

As always thank you for reading!
Google Docs logo in Python
Tags: python, pythonturtle, chiki1601, google
Published: 2022-09-06 15:50:37

Hello friends...

I created Google Docs logo using Python...

which is shown below:

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

If you want source code,
Please tell me in the comment!!!👇🏻👇🏻👇🏻
Google Jamboard logo in Python
Tags: chiki1601, google, python, pythonturtle
Published: 2022-09-06 15:50:36

Hello friends...

I created Google Jam board logo using Python...

which is shown below:


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

If you want source code,
Please tell me in the comment!!!👇🏻👇🏻👇🏻