teleren/devto huggingface dataset:
Soft UI PRO - Flowbite Dashboard
Tags: tailwindcss, flowbite
Published: 2022-04-28 18:16:06

---
title: Soft UI PRO - Flowbite Dashboard
published: true
description: Soft UI Flowbite PRO features a huge number of components built to fit together and look amazing - Built with Flowbite and Tailwind CSS.
tags: tailwind, flowbite
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4njffltu53yi671ttv6.jpg
canonical_url: https://www.admin-dashboards.com/soft-ui-flowbite-pro-tailwind-css/
---
Hello Coders!

This article presents a premium **Tailwind CSS** Template crafted by Creative-Tim on top of **Soft UI Design** (premium version). [Soft UI Flowbite PRO](https://www.admin-dashboards.com/soft-ui-flowbite-pro-tailwind-css/) is built with over 100 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

> Thanks for reading! 

- 👉 [Soft UI PRO - Flowbite Dashboard](https://demos.creative-tim.com/soft-ui-flowbite-pro/?AFFILIATE=128200) - `LIVE demo`
- 👉 [Soft UI PRO - Flowbite Dashboard](https://www.creative-tim.com/product/soft-ui-flowbite-pro?AFFILIATE=128200) - `Product Page`

Build your website faster with an Innovative Admin Template based on TailwindCSS, Flowbite, and HTML. Soft UI Flowbite PRO features a huge number of components built to fit together and look amazing.

---  

> *Disclosure* - **This post contains affiliate links**. 

If you use these links to buy something (no additional cost to you) I may earn a commission, product, or service. **Thank you!**

---

![Soft UI Flowbite PRO (Tailwind CSS) - Charts Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t79fmh443ouqprortle6.png)

---

If you like the look & feel of the hottest design trends right now, you will definitely fall in love with this dashboard. Its design is inspired by `Soft UI Design` and it gives you the flexibility that will get you going in no time.

All components can take variations in color, which you can easily modify using `Tailwind CSS` config and classes. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

**Example Pages** - If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our 20 prebuilt example pages.

---

![Soft UI Flowbite PRO (Tailwind CSS) - Maps Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66o9nmgx6tkml0ek6ph6.png)

---

> `Soft UI Flowbite PRO` - Kanban Page

![Soft UI Flowbite PRO (Tailwind CSS) - Kanban Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jr7bt9vv111m22n5tvlb.png)

---

> `Soft UI Flowbite PRO` - User Profile Page

![Soft UI Flowbite PRO (Tailwind CSS) - Profile Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3ud7x9uykppuruu829a.png)

---

> `Thanks for reading!` For more resources, please access:

- 👉 More [admin dashboards](https://www.admin-dashboards.com/) - a `huge index with products`
- 👉 More [ui themes and templates](https://www.ui-themes.com/) - 90% `opens-source and free`
My First Open Source Project
Tags: javascript, github, opensource, showdev
Published: 2022-04-28 18:11:14

Hi, this is my first poste on dev.to. And what better way to start it then announce my first opensource project I have ever made.

The goal of the project is to be an open-source alternative to Firebase, which goal is to make it easy for people to set up and start developing their dream app with out having to worry to much about the back-end stuff. As I said this is my first open source project so it might not be the best but I that not the meaning of open source. A way for developers to share there code and other people help make it better?

So feel free to contribute or just share it. Btw it is in alpha state because it is really new.

[Github](https://github.com/VpgMackan/mushroom-server)
Remix SaaS kit Changelog #4 - Blogging
Tags: remix, react, saas, release
Published: 2022-04-28 18:10:19

---
title: Remix SaaS kit Changelog #4 - Blogging
published: true
description: Added /blog, /blog/:slug, /admin/blog and /admin/blog/new.
tags: remix,react,saas,release
cover_image: https://yahooder.sirv.com/saasfrontends/remix/blog/changelog/2022-04-28.png
---

[Demo video](https://www.loom.com/share/730d680d15564e5f87fc868566c30e80)

5 closed issues + 2 added issues.

### ✅ Add Page: Blog [#12](https://github.com/AlexandroMtzG/remix-saas-kit/issues/12)

/blog

![/blog](https://user-images.githubusercontent.com/8606530/165638974-4f19345e-6f1b-446e-b56f-a8bd39cfa5ce.png)

/admin/blog

![/admin/blog](https://user-images.githubusercontent.com/8606530/165638982-0689a332-9658-4c1a-92ec-e2408a160a67.png)

/admin/blog/[new/:id]

![/admin/blog/new-edit](https://user-images.githubusercontent.com/8606530/165643515-c26bc41f-9247-4e9a-8c67-d623124ff2f4.png)

/blog/:slug

![/blog/slug](https://user-images.githubusercontent.com/8606530/165643892-6279cc94-3b13-405b-af08-a1a9c1c7d2d5.png)

### ✅ Force Update Subscription [#42](https://github.com/AlexandroMtzG/remix-saas-kit/issues/42)

***Problem***: Cannot update customer's Stripe plan

![Stripe customer plan](https://user-images.githubusercontent.com/8696717/164223189-0ce0b27d-e6fc-4fff-84c9-756f0d1762c2.png)

***Solution***: Set Stripe customer's default payment method

![Update Stripe default payment method](https://user-images.githubusercontent.com/8606530/164313343-f3610ebf-591e-4d94-8e9f-dc17b50eae8c.png)

### ✅ Tenants Overview 404 [#43](https://github.com/AlexandroMtzG/remix-saas-kit/issues/43)

![Tenant Overview 404](https://user-images.githubusercontent.com/8696717/164223533-9d0090c0-9dcf-4ce9-86c9-d0c9a1a9f9c7.png)

### ✅ Logging IP Adresses on Events #44

***Problem***

![IP Addresses on events](https://user-images.githubusercontent.com/8696717/164223821-bb6c3a27-14b2-4ad0-bd0d-91b08b1323dd.png)

***Solution***

![Code](https://user-images.githubusercontent.com/8606530/164314645-db10b6cf-0e4e-41fc-aefc-03ac63375712.png)

![Vercel](https://user-images.githubusercontent.com/8606530/164315172-00855fa3-fa4d-4f7d-bacd-2c28293ba8c5.png)

### ✅ Design system documentation #46 [#46](https://github.com/AlexandroMtzG/remix-saas-kit/issues/46)

![Components](https://user-images.githubusercontent.com/8606530/165818697-bcdfe214-9250-4c2a-8594-f3ee0da058fc.png)

### ⌛ Social Auth & Magic Link [#45](https://github.com/AlexandroMtzG/remix-saas-kit/issues/45)

### ⌛ SEO tags loaded from database [#47](https://github.com/AlexandroMtzG/remix-saas-kit/issues/47)
CSS select
Published: 2022-04-28 18:06:31

I am a student not very good at CSS I have a small project must present the teacher but it's not finished yet I want to know why I choose .bg-custom-1 it's normal 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcyqivn71v3vod02fhov.jpg)but if i choose .bg-custom-2 
it's write background![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cesddb7fg0my745m8kpy.png)
code css :
.bg-custom-1 {
    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}
.bg-custom-2 {
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}
[Desafio] - Contornar Limite de 10MB de um API Gateway
Published: 2022-04-28 17:33:03

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1519729029737488384)

---

Dev,

Outro #desafio pra vc que faz APIs:

Existe um API Gateway que funciona há anos para um serviço crítico. Agora, ele precisa receber uma nova funcionalidade que é upload de imagens.

Veja as premissas no próximo tweet ↓

cc @sseraphini @nenhumrafael 

---

Premissas:

- Existe um hard limit de 10MB para as requisições nesse API Gateway;
- As imagens podem ter mais de 10 megas (não tem como controlar isso).
- Precisa associar a imagem a um cliente;
- Desafios da vida real :)

Se você já passou por isso, conta aí como resolveu :)
[Desafio] - API com Rate Limit - HTTP 429
Published: 2022-04-28 17:30:10

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1519724533841862656)

---

Dev,

Um #desafio pra vc que faz APIs:

Pense em como limitar o número de requisições (por dia, hora, segundos, mês, etc) pra uma API. Se ultrapassar o limite, retorne HTTP 429 - Too Many Requests.

cc @sseraphini

---

Premissas:

- O limite deve ser por cliente (chamadas são autenticadas);
- A API estará num cluster com mais de um nó e as requisições podem ir para qualquer um deles;
- Vale usar frameworks;
- Inclua o header "Retry-After" nas respostas 429;
- Esse é um desafio realista :)

![img](https://pbs.twimg.com/media/FRckrkMXIAEY3Qw?format=jpg&name=large)

---

Se você já teve que implementar isso, conta aí pra gente como fez :)
How do you build backend API for Next.js apps?
Tags: discuss, nextjs, node
Published: 2022-04-28 16:55:52

Do you use the Next.js own router and create routes under the API folder? Do you use a custom server? Or do you create your own backend server, serve the next.js as usual - via the built-in server and use a reverse proxy in front of them?

Of course, the approach would differ based on what we are trying to do. Have you got any preferences, though?

And what approach would you opt for, if you'd want to create an ecommerce in Next.js with a heftier backend?

Let's discuss!
Find files and directories in CLI
Tags: cli, beginners, programming, tutorial
Published: 2022-04-28 16:55:01

---
canonical_url: https://baransel.dev/post/cli-find-files-directories/
---

> [Sign up to my newsletter!](https://baransel.dev/newsletter/).

Although the popular use of the `find` command is to **search** within the folder path with its option, it can also meet much more specific needs when customized.

The basic usage is as follows:

```commandline
find [search-to-directory] [option] [search-org]
```

Let's start with examples. Our first example is to find the `error.log` files on the server.

```commandline
find / -name "error.log"
```

Or using type;

```commandline
find / -type f -name "error.log"
```

When this command is applied, the `error.log` files found in other services in the system will also be listed. If we want to find all `*.log` files on the server, the following command will be useful.

```commandline
find / -name "*.log"
```

Let's search multiple files at once. The files we want to find are `access.log `and `error.log`.

```commandline
find / -type f ( -name "access.log" -o -name "error.log" ) -print
```

we are not limited to searching only filenames. Let's take a look at `-type` expressions before folder searches.

* `b`: block device
* `c`: character device
* `d`: directory
* `f`: regular file
* `l`: symbolic link
* `P`: FIFO
* `s`: socket

Now let's perform a folder search.

```commandline
find / -type d -name [folder-name]
```

> Let me remind you that all operations are case-sensitive. We can use `-iname` to perform search operations without distinction of upper and lower case.

```commandline
find / -type d -iname [folder-name]
```

> [Sign up to my newsletter!](https://baransel.dev/newsletter/).
Java 8 Collection Framework: List
Published: 2022-04-28 16:54:30

The List is one of the interfaces of the collection which extends the collection and declares the behavior that stores a group of elements. List is kind of an array which stores the elements and which can be inserted of accessed by their index position in the list. The index starts from 0.

**interface List<E>**
E is the type of object which the list will hold. List also has its own methods defined. Some methods can throw different kind of Exceptions. If we try to save null object in the list then NullPointerException Will be thrown as null elements are not allowed in the list.

There are Many methods which are supported by the list:-

![List Methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aarmie7vz5t5uz8raxjk.png)

The void add(int index,E) adds the element at a specified index position in the list. 
boolean addAll(int index,Collection) adds the group if element starting from the given index position. Returns true if the list is changed otherwise will return false.

To get the object stored at a particular index the get(index) method is used. 
The int indexOf(Object obj) returns the index of that particular object.
For all versions, null elements are not allowed. In all cases, the List implementation is unspecified.

Click Run below code to see some of the methods running:-

{% replit @AtharvaSiddhabh/atharvajava#Main.java %}

In the next blog we will see Set Interface.

Reference Links of the series:-
1) [Collection Framework Introduction](https://dev.to/atharvasiddhabhatti/java-8-collection-framework-introduction-28gc)
SSH into AWS: EC2 instances easily!
Tags: aws, ec2, programming, tutorial
Published: 2022-04-28 16:48:06

## Intro
This tutorial will show you how to login to your ec2 instance without having to do `ssh ./pem.key ubuntu@0.00.00.0` each time.

With this easy to setup method you can **login to any number of ec2 instances with a simple command for each instance**. No installs needed!

going from this

`ssh ./pem.key ubuntu@0.00.00.0` 

to this

`ssh api-one-ec2`

(you can name your entry point whatever you'd like)


## Tutorial


### Things you need
 - The absolute path to your pem file related to the ec2 instance you want to login to.
 - The IPv4 address of your ec2 aws instance.

### Steps
First edit your ssh config file in vscode. To do this type in the following

`code ~/.ssh/config`

Something like this should popup

![VS Code Editor ssh config screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj88qqd6zzb3i3rsxwf5.png)

Then you're going to add and fill in some syntax

![vscode - ssh config syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xz93aguh5dzkhzhfs9qb.png)

 - `Host` will be the shorthand text you type to log into your instance from anywhere in terminal.
 - `HostName` This you need to get from aws. It's the Public IPv4 address of the instance you want to login to.
 - `User` This is your instance user. If you created a ubuntu instance keep it as ubuntu.
 - `IdentityFile` This is going to be the location where your pem key resides. Make sure to use an absolute path to your pem key. Here's a [good article](https://www.quora.com/What-does-mean-in-a-directory-path) that describes what the `~` key is in this path.
 - `IdentitiesOnly` just keep it as yes for now. I'll update why soon.

Once all this is filled out then you can now login to your ec2 instance from anywhere! With the example I provided I would just type `ssh api-on-ec2` and I'm in!

I no longer have to type `ssh ./pathToPem.pem ubuntu@00.000.00.000`!

## Cautions
There will be times where your IPv4 address will change such as stopping your ec2 instance. In this case all you have to do is update your `HostName` in the ssh config to the new address and you're good to go!

Same goes for your pem file, make sure that if you move it to another location to also update `IdentifyFile` pem path in ssh config to reflect the new location.
6 /100 DaysOfFlutter : Introduction to flutter Codebase
Tags: flutter, dart, app, tutorial
Published: 2022-04-28 16:43:26

---
title: 6 /100 DaysOfFlutter : Introduction to flutter Codebase
published: true
description: Knowing about flutter creating project, folderstruture, package manager, yaml
tags: #flutter #dart #app #tutorial
//cover_image: https://direct_url_to_image.jpg
---

<!-- quick look around.   package manager test folder yaml files , pubspec using pubspec-->
<!-- title:-->
<!--  specs: Knowing about flutter creating project, folderstruture, package manager, yaml-->

# Create Flutter Project.
Flutter projects can be created using multiple ways.
here we will create using terminal

```bash
flutter create <project_name>
```
it will create a new project in the current directory.

# Project Structure
![Project Stucture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skgodz4ze0uk5m4x4g8b.png)
## [`Andriod folder`](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/android)
As flutter is the cross-platform mobile app development framework, making apps for android configuration is required, and that is done in [`android](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/android) folder, you can also find Gradle file in this folder.which is package manager for andriod.

## [`ios folder`]([./ios/](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/ios))
for making apps for ios configuration is required, and that is done in [`ios`](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/ios) folder, even here you can find Xcode project file, for packages and plugins.

## [`lib`](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/lib/main.dart)
this is the main folder for all the code, which is used for creating the app, everything start's from here in a flutter.

>same stuff for [`windows`](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/windows/runner/main.cpp) and [`web`](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/web/)

## [`pubspec.yaml`](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp/pubspec.yaml)
Here is every information regarding your application form **name:**, **description**, **version**, what other packages you are using.

# Packages What you they?
Packages are the libraries which can be used in your application.
In simple words, here **people**, **organisations**, even other  **open source communities** have been built and you can use them then

it is similar to **NPM** for nodejs, **pip** for python, and so on


## Package Manager for Flutter(dart)🎯
[`pub.dev`](https://pub.dev) is the package manager for flutter, it is used for installing packages, and for managing packages

see and sample the flutter project here
**repo link**: [`@github`](https://github.com/theabhayprajapati/100DaysOfFlutter/tree/main/day6/flutter/myapp)

ping 🤙🏾 me on [`@twitter`](https://twitter.com/abhayprajapati_)
Hot Reload Fails, DOM adds an additional iframe
Tags: react, help, discuss, webpack
Published: 2022-04-28 16:41:47

Hey React Developers🙋‍♂️, this your gateway to solving this problem if you're still facing this. I've **tested** the solution in **multiple React projects on various different devices with variety of OS and browsers.** Why? Because everyone in my team was facing this issue but were not frustrated enough to solve it which I was.

I've gone through multiple github discussions and stackoverflow posts to finally reach this solution and then test it out.

Let's see the **symptoms** you're facing. Are they mentioned below:
 - Application becomes **non-interactive, iframe** is added to DOM.
 - Hot reload continues to work, but the page becomes unresponsive. **Can't click or do anything unless you do a manual refresh.**
 - process is not defined

```
Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)
```

You might have started facing this problem either after **updating your CRA or starting a new project using create-react-app** which lead to the probable lead cause of it to be **react-error-overlay.**
> You can check the **issue reported on github** [here](https://github.com/facebook/create-react-app/issues/11771)

### SOLUTION
`npm i -D react-error-overlay@6.0.9`

> If this doesn't helps, check [this](https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614) out.

_If this solution solves your problem, do like this post or comment down so that others can also get the benefit by reaching to it as early as possible. Till then safe debugging👍_
Attempting Vercel
Tags: vercel, webdev
Published: 2022-04-28 16:35:07

###A lil bit of background
I will be describing how to set up a Vercel site but using one we have been working on over the past few months. Since I had issues when setting up eleventy, I could not get Vercel working on those repos.

HOWEVER! I did get it to work in this group project so we will be using that as a walkthrough.

##Setting it Up
To begin, you will go to the [Vercel Site](https://vercel.com/dashboard) and create an account or login. If you haven't created an account already I would recommend using your GitHub to login since it allows you to access your repos directly.

###Importing your Repos
The reason I recommended the use of Github to login is since it allows for importing repos to be very simple.

![Vercel Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21yf5r6rbf6bvuih86yl.png)

Once logged in, you want to select "New Project" located at the upper right corner of the screen. That will bring you to a screen with a couple of options. On the right provides the you with some pre-built sites you can modify. 

On the left, which we will focus on, provides you with a drop down selection for GitHub accounts and their repos. 

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

After selecting your desired repo, all you need to do is press "import" and "save".

###Configuring your Repo
The only thing you need to do to fully complete your repo is edit three things:
- Root Directory 
- Build and Output Settings
- Environment Variables

If you want to take a look at those configurations, take a look at this [repo](https://github.com/liljimmyk99/threaded-discussion).

##All Set!
Now that everything is configured you are all ready to begin. Keep in mind that typically to run a project you may use `npm start` or `yarn start`. Vercel however runs a little different as you need to run `vercel dev`
leet deneme 1 two sums
Published: 2022-04-28 16:32:58

bi de bunu foreach'le denemek lazım

```
public class Solution {
	public int[] twoSum(int[] nums, int target) {
		for (int i = 0; i < nums.length; i++) {
			for (int j = 0; j < nums.length; j++) {
				if (i == j)
					continue;
//				System.out.println(i + " " + j);
				if (nums[i] + nums[j] == target) {
					return new int[] { i, j };
				}
			}

		}
		return null;
	}
}
```