teleren/devto huggingface dataset:
What could be the right business model for a FREE data marketplace?
Published: 2023-02-12 21:16:36

We have a baby business [https://datasn.io](https://datasn.io) that we want to transform into a grand website of datasets offered FREE to users.

Users will also be able to upload and publish their own datasets that can be viewed, searched, diagramed, forked, or pipelined on the website. They can talk and comment on each other's datasets, create something off them and share with the community, just like a GitHub of datasets.

The problem with datasets is that they take up tremendous amount of spaces and are pretty expensive to be set up for queries and searches that consume quite some computing resources.

How can we:

1. Motivate people to share their datasets
2. Make it profitable to open up the datasets FREE

Or is it financially impossible?

My ideas thus far:

1. Don't make it zero FREE but nearly FREE with a very cheap access fee for each dataset, in the range of $10 - $50 which will be used to cover infrastructure cost AND to pay to the uploader for motivation.
2. Browsing the data is FREE on-site but charge for exporting and downloading to a certain format, OR for pipelining to another application such as WordPress to create a website off the dataset, OR for other tools of data analysis or data search engines.

So owner sets a rate per row, and buyers pay a download fee every time he or she downloads the dataset, determined by the number of rows downloaded.

Is this viable in a business sense? I'm from technical background so I'm not sure.

Would really love to know your ideas and what a viable business model could be for this.

Thank you!
Better way to think when creating components
Tags: react, javascript, typescript, webdev
Published: 2023-02-12 21:14:20


When in doubt of how your component should look like and what it needs to support, start by how you would consume it. A few examples:

A dropdown which will receive a title and the content (which should be able to also receive JSX). An icon will be optional:    
```jsx
<Dropdown title="My title" content={<p>My content</p>} />

<Dropdown icon={<MyIcon />} title="My title" content={<p>My content</p>} />
// Now you know you need to accept an optional icon (ReactNode), a title string and the content (which is also a ReactNode)
```
A customizable flexible card with a lot of different variations:    
```jsx
<Card>
  <Card.IconWrapper>
    <MyIcon />
  </Card.IconWrapper>
  <Card.Title>My title</Card.Title>
  <Card.Content>My content</Card.Content>
</Card>

<Card>
  <Card.Title>My title</Card.Title>
  <Card.Content>My content</Card.Content>
  <Card.IconWrapper>
    <MyIcon />
  </Card.IconWrapper>
</Card>

<Card>
  <Card.Title>My title</Card.Title>
  <Card.Content>My content</Card.Content>
</Card>
// Now you know you'll need to create separate components (title, content, iconwrapper) and assign to the main card.
```
A sidebar that I can just pass a structured data to it:    
```jsx
<Sidebar
  items={[
    {
      name: "Home",
      icon: HomeIcon,
      link: '/',
    },
    {
      name: "About us",
      icon: AboutUsIcon,
      link: '/about-us',
    },
    {
      name: "Terms and conditions",
      icon: TermsIcon,
      link: '/terms',
    },
  ]}
/>

// Now you know you'll need an items prop, which you'll loop for each item and render the name, icon and pass the link as a href.
```
Instead of starting with the solution right away, a better approach may be starting by the use cases, which you will know more carefully what you need to build in order to support your needs.
Python Lists
Tags: python, list, sortingpytlist, beginners
Published: 2023-02-12 21:00:20

In python, a list is a collection of items that can be of any data type; i.e. strings, numbers, etc. Lists are ordered and mutable, meaning that you can change the elements in a list after creating the list.

**Creating a list**
To create a list in Python, you can enclose a comma-separated sequence of values in square brackets []. For example:

```
numbers = [1, 2, 3, 4, 5]
names = ['Alice', 'Bob', 'Charlie']

```
**Accessing elements**
To access an element in a list, you can use its index in square brackets []. The first element in the list has an index of 0.

```
numbers = [1, 2, 3, 4, 5]
print(numbers[0]) # Output: 1
print(numbers[2]) # Output: 3
```
**Modifying elements**
To modify an element in a list, you can simply assign a new value to it using its index.

```
numbers = [1, 2, 3, 4, 5]
numbers[2] = 42
print(numbers) # Output: [1, 2, 42, 4, 5]
```

**Adding elements**
To add an element to a list, you can use the append method. This method adds an element to the end of the list.

```
numbers = [1, 2, 3, 4, 5]
numbers.append(6)
print(numbers) # Output: [1, 2, 3, 4, 5, 6]
```
**Removing elements**
To remove an element from a list, you can use the remove method. This method removes the first occurrence of the given value from the list.

```
numbers = [1, 2, 3, 4, 5, 6]
numbers.remove(3)
print(numbers) # Output: [1, 2, 4, 5, 6]

```

## **Sorting Python Lists**

To sort a list in python, you can use the built-in 'sorted' function. By default, this function will sort the list in ascending order, but you can reverse the order by passing the argument 'reverse=True'.

```
numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
sorted_numbers = sorted(numbers)
print(sorted_numbers)
# Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

sorted_numbers = sorted(numbers, reverse=True)
print(sorted_numbers)
# Output: [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]

```
If you want to sort a list in-place, you can use the 'list.sort' method. This method sorts the list in-place and does not return a new list.

```
numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
numbers.sort()
print(numbers)
# Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

numbers.sort(reverse=True)
print(numbers)
# Output: [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]

```
Next JS - Intro And Setup
Tags: javascript, react, nextjs, webdev
Published: 2023-02-12 20:47:00

**Next.js** is a popular JavaScript framework for building server-rendered React applications. It offers a simple setup process, automatic code splitting, optimized performance, and the ability to use any of the hundreds of thousands of React components available on npm.

In this post, we'll take a look at what **Next.js** is and how to set it up for your next project.

## What is Next.js?
* **Next.js** is a React-based framework that allows you to build fast and efficient web applications. It was created by Zeit and is designed to make it easier for developers to build and deploy high-performance web applications.

* **Next.js** is built on top of React, which is a popular JavaScript library for building user interfaces. React provides a simple and flexible way to build reusable components that can be combined to create complex applications.

* **Next.js** takes this a step further by adding features like server-side rendering, automatic code splitting, and optimized performance. This makes it possible to build fast and responsive web applications that are easy to maintain and scale.



## Setting up Next.js

To get started with **Next.js**, you'll need to have **Node.js** and npm installed on your computer. If you don't have these installed, you can download them from the official **Node.js** website.

Once you have **Node.js** and npm installed, you can create a new **Next.js** project by running the following command in your terminal:

```
npx create-next-app my-app
```

This will create a new **Next.js** project in a directory named "my-app". Once the project has been created, you can navigate to the project directory and start the development server by running the following commands:
```
cd my-app
npm run dev
```

![file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghnkwgervl8dml5l8j61.jpeg)

This will start the development server and you can view your **Next.js** application by opening a web browser and navigating to http://localhost:3000.

## Conclusion
**Next.js** is a powerful framework for building fast and efficient web applications. Its simple setup process, automatic code splitting, and optimized performance make it a popular choice for many developers.

If you're looking to get started with **Next.js**, give it a try and see how it can help you build better web applications.
Firebase: Move authenticated users to another project
Tags: firebase, authentication, cli, users
Published: 2023-02-12 20:16:34

Firebase is a popular framework used by a lot of developers and companies to build high-quality applications.

With features such as Authentication management, real-time database, and storage management, Firebase is a framework to utilize.

Today, we are going to consider how to transfer authenticated users from one firebase project to another. Sometimes we may need to move our user data from one firebase project to another because of shared resources. Firebase makes it very easy to accomplish this by running a few lines of code in your terminal.

Steps to transfer Authenticated users from one project to another

In your terminal, do the following:

`firebase login`

This would log you into your Firebase account using the Firebase CLI tool.

Next, run:

`firebase projects:list`

This would list the firebase projects you have.

Next, run the command below to use the firebase projects which hold the users you would like to export to the other project:

`firebase use projectid`

The next step would be to export the users using

`firebase auth:export filename.json --project projectId`

This would export the users in your current folder in a JSON format. If you would like the file format to be in a CSV format, use

`firebase auth:export filename.csv --project projectId`

We can then import the exported users into the new projects by executing

```firebase auth:import filename.json --hash-algo=** --rounds=** --mem-cost=** --hash-key=** --salt-separator=**```

You can get the values for the algorithm, rounds, salts, etc., from your firebase projects.

1. Open the firebase project that contains the Authenticated Users you have exported. 
2. Navigate to the Authentication tab.
3. Click on the menu button (Three dot icon) and click on Password hash parameters.
4. The values for the command above would be revealed to you.

Once you run the command above, the users will be transferred to the new project.

Thank you for reading.

For more blogs, visit http://www.abrahamkolawole.com/blog
tsParticles 2.9.3 Released
Tags: javascript, typescript, webdev, showdev
Published: 2023-02-12 20:09:41

## tsParticles 2.9.3 Changelog

### Bug Fixes

- Fixed some plugins, they weren't loading correctly the options

--

### Confetti Website

Starting from `2.9.0` there are two new bundle for easier configurations:

- `confetti`, the demos are available [here](https://confetti.js.org/more.html), readme [here](https://github.com/matteobruni/tsparticles/tree/main/bundles/confetti#readme)
- `fireworks`, a demo website is not ready yet, but the readme contains all the options needed [here](https://github.com/matteobruni/tsparticles/tree/main/bundles/fireworks#readme)

--

## v3.0

Probably this will be the last `v2.x` version, except some bug fixes needed before `v3.0` will be released.

You can read more about the upcoming `v3.0` in the post linked below

{% link https://dev.to/tsparticles/preparing-tsparticles-v3-5bai %}

--

## Social links

- [Discord](https://discord.gg/hACwv45Hme)
- [Slack](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
- [WhatsApp](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c)
- [Telegram](https://t.me/tsparticles)
- [Reddit](https://www.reddit.com/r/tsParticles/)

---

{% github matteobruni/tsparticles %}
Accessing hidden Edge Features and Settings
Tags: tooling, browser
Published: 2023-02-12 20:04:34

Microsoft Edge is the latest web browser from Microsoft that is designed to offer a fast, secure and seamless browsing experience to users. Despite its popularity, many users are not aware of the hidden features and settings that Edge has to offer. These features can significantly enhance the browsing experience by allowing users to customize the way they browse the web and make the most of their online time. From productivity enhancements to privacy and security options, this article will take a closer look at some of the best-hidden features and settings in Microsoft Edge that you may not know about. Whether you are a casual user or a power user, these hidden features are sure to enhance your browsing experience and help you make the most of your online time.

# Edge://about

If you type in the address bar **edge://about**, you can access to all Edge's internal pages.
From this list you can recognize some known pages like **edge://newtab** or **edge://bookmarks** 

![edge://about](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yolydu6ferqhpsorvdus.png)

# Edge://flags

This page is really important because it's where all the Edge experimental features are present.
The list is very long and you can try to enable or disable some experimental features at your risk.

![edge://flags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57hvhvirosn2p708134w.png)

# Edge://system

In this page you can find all information about the Edge build.

![edge://system](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5ji55vf89uemls1iah3.png)

# Edge://credits

This page display all the third libraries and their relative licenses.

![Edge://credits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsc9adhmivd01goufmud.png)

---

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

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}
What is Logical Planning
Tags: interview, sql, coding, learncoding
Published: 2023-02-12 19:44:32

Taking user code and converting it into a logical plan is the first phase of execution. The logical plan only converts the user’s set of expressions into the most optimized version.

It does this by converting the user code into an unresolved logical plan. This logical plan is unresolved because although your code might be valid, the tables or columns that it refers to may or may not exist. Spark uses a repository of all table, catalog and DataFrame information to resolve columns and tables in the analyzer. The analyzer may reject the unresolved logical plan if the required table or column name does not exist in the catalog. If the analyzer is able to resolve it, the result is passed through the Catalyst Optimizer. 

The Packages can extend Catalyst to include their own rules for domain specific optimizations.
SQL query to find second highest salary using dens_rank function ?
Tags: interview, webdev, sql, database
Published: 2023-02-12 19:39:40

This is Question is most use full in Sql interview ,Below is Employee Table and we are going to write Sql Query using Dense rank function that is windowing function :

Name	age	salary	department
shubham mishra	31	20000	computer
rahul kumar	20	30000	electric


```
select Name , age , salary   , 
dens_rank  over (partition by  department    order by  salary desc ) as rank 
from 
Employee 
where rank =2
```

This Solution is provided by Shubham mishra This article is contributed by Developer Indian team. Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above. Also folllow our [instagram ](https://www.instagram.com/developer_indian/?hl=en), linkedIn , Facebook , twiter account for more
css interview questions and answers 2023 -dev.to
Tags: css, tutorial, interview, javascript
Published: 2023-02-12 19:27:13

1. What is Position related
2. What is Pseudo css?
3. What is the Box model in CSS?
4. What are the advantages of using CSS?
5. What are the limitations of CSS?
6. What is CSS and how does it work with HTML?
7. What are selectors and what are their different types?
8. What is CSS selector specificity and how does it work?
9. Describe z-index and how stacking context is formed.
10. Describe BFC (Block Formatting Context) and how it works.
11. Have you ever used a grid system, and if so, what do you prefer?
12. Have you used or implemented media queries or mobile specific layouts/CSS?
13. Explain how a browser determines what elements match a CSS selector.
14. Describe pseudo-elements and discuss what they are used for.
15. Explain your understanding of the box mode.
16. What does * { box-sizing: border-box; } do? What are its advantages?
17. What is the CSS display property and can you give a few examples of its use?
18. What's the difference between inline and inline-block?
19. What's the difference between the "nth-of-type()" and "nth-child()" selectors?
20. What's the difference between a relative, fixed, absolute and statically positioned element?
21. What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
22. Have you used CSS Grid?
What is different type of Selector in CSS -dev.to
Published: 2023-02-12 19:22:49

##  What is different type of Selector in CSS

Basically Cascading style sheet css used to design a font and color etc on html element therefore we need to specify target html element .

So if you want to select or target HTML element ,following are selector  :

- Universal selector
- Type selector
- class selector
- ID selector
 

** Introduction of Css and History of Css**
Cascading Style Sheets (CSS) is a simple mechanism for adding style
(e.g., fonts, colors, spacing) to Web documents

Althrogh HTML isvery essentialto generate adding
a web page bu their aresome important drawback which HTML
suffer

HTML has no style for layout
Using HTML we can’t add position of element
HTML does’t support for multiple unit like px ,em etc

Background image display using HTML repeate itself

To improve look and feel WC3 school launch a new language
called css in year 1996 .

The term css stand for Cascading Style Sheets
It is purly a design language
It only to handle look and feel of our page .

This means that still we have to use HTML
to process element but there presentation manage
by CSS

CSS Syntex :

Selector { property : Value }

“:+” single value

As I mention CSS are provide below type selector which are :

Universal selector : This selector are apply to all element of Html. 
Type selector : This selector are apply to  particular HTML tag.
Class selector :This selector are apply on same value of class attriute.
ID selector : This selector are apply on attribute of  ID of Html element
to Snap or not to Snap...
Tags: linux, ubuntu
Published: 2023-02-12 19:18:09

There's lots of negative towards Canonical's Snap store in Linux communities in favor of Flatpak, but when you dive deeper you figure Snap is not so bad -- it has at least two advantages:
1. It has more apps overall
1. It has stricter security rules

The second one is a dealbreaker for me, so I initially decided to stick to it. However, Snap's security rules have turned out to be a double-edged sword -- apps seemingly malfunction due to those strict rules. Particularly, I myself have stepped on broken functionality while using `keepassxc`, `postman`, `simple-scan` and `discord`. In all cases replacing snap apps with Debian versions fixed the issues for me. Perhaps it's time for me to give a try to Flatpak as well.
Learn CSS - dev.to
Published: 2023-02-12 19:15:08

## How to Write CSS

If you familiar with HTML syntax will notice that CSS syntax looks a different in nature.
CSS is apply on HTML tags.Learning css is much easier.
There is multiple method to apply CSS in HTML,Instead of listing page content, CSS lists the style rules that are assigned to HTML elements,
CSS is apply on entire HTML document, or even multiple HTML documents.
These rules are processed by the web browser loading the HTML file.So you can say our bowser (chrome, Edge ,Mozilla ) contain compiler for CSS.
CSS Comments
Similarly with HTML, you can write comments in CSS. Comments are ignored by the browser and are useful in providing context and meaning and functionality notes for your code.
To comment in CSS, write /*, then your comment text, then end with */.

**Why is CSS Used For in development ?**

The CSS is provide design , animation and position to web application as we know CSS would look as graphic property as well. To illustrate, our HTML Element on website.

**What is a CSS Selector?** 
Here i describe full explaination of CSS Selector.i.e  CSS Selector.

**What is CSS style declaration?**
This means that still we have to use HTML to process element but there presentation manage by CSS.

**CSS Syntex :**
Selector { property : Value }

**What is a CSS Style property?**
A CSS property is a characteristic (like color, animation , position) whose connect value defines one aspect of how the browser compile and display the element after changes.

There are CSS properties are follow that you can use to style a html element :

1. Float
2. Clear
3. Overflow
4. Text-transform
5. Z-index
6. Font-size
7. Background-color
8. Width
9. Height
10. Border
11. Padding
12. Margins
13. Font-family

Below is an example of a basic  CSS  that would print the words Hello World.

<html>
<head>
    <meta charset="utf-8">
        <title>My CSS experiment</title>
        <link rel="stylesheet" href="styles.css">
</head>
<body>
      <h1>Hello World!</h1>
      <p>This is my first CSS example</p>
</body>
</html>

Mandatory Tools you will need to install before work on Css or HTML and javascript.

1. you will need a Pentium 200-MHz computer with a minimum of 128 MB of RAM.
2. Linux 7.1 or Windows 95/98/2000/XP operating system.
3. chrome browser.
4. Microsoft Notepad or any other text editor or any tool like visual studio.
web2 to web3
Published: 2023-02-12 19:12:14

The continuation of the Web 2.0 concept was to be the new Web 3.0, which tentatively improved and streamlined the social 2.0 approach based on the semantic web, artificial intelligence (AI/ML), and advanced approaches to data processing.

**Main features of web3 design:**

- **High-tech** — using both advanced front-end and hi-tech and sci-fi images

- **HQ detalisation** — a high level of detail and quality, reaching the level of digital studios

- **Creativity** — concept art, science fiction, avant-garde graphics, cyberpunk

- **Animation effects** — the widespread use of animation effects for CSS / JS interfaces (navigation, typography, preloaders, scrolling, backgrounds, etc.)

- **3D** — hardcore three-dimensional graphics, video, animation, interfaces and effects

- **Virtual reality** — virtual environments, metaverse, VR/AR/MR elements

- **Gamification** — is the use of gaming technologies, storytelling, including for the consumer

- **Blockchain** — offers to make transactions through blockchain technology, NFT.

**Read [the whole article on Medium](https://medium.com/@sergeyieffe/after-web-2-0-from-web2-to-web3-e22d3803d777)**