teleren/devto huggingface dataset:
A file uploader for HTTP(s) to show progress
Tags: html, file, uploader, https
Published: 2023-02-26 11:34:11


## An open source file uploader

Progress-up is a HTML5 file uploader with support for file preview,
banning files based on MIME/size and progress display.

Here are some screenshots.

## Main tab

![Main tab](https://i.imgur.com/JxTRIjY.png)

## Dark mode

![Dark mode](https://i.imgur.com/KIzjtN0.png)

## Help tab

![Help tab](https://i.imgur.com/4L7XQJ5.png)

## Setup tab
![Setup tab](https://i.imgur.com/zKfUPmr.png)

## Banned files

![Banned files](https://i.imgur.com/NXyisu1.png)

## Features at a glance

 
* &#128311; Multiple files sent in parallel
* &#128311; 10 progress bars to choose from
* &#128311; 4 tabs [setup, drag drop, stats, help]
* &#128311; MIME and size filters [allow/deny, total/per file limit]
* &#128311; Test upload feature to test backend
* &#128311; Bare min config needed to start uploading
* &#128311; Drag and drop
* &#128311; Dark mode
* &#128311; POST HTTP method
* &#128311; Plugins for svelte, vue, react & angular

## Website , github link, docs and packages

- [Master website](https://progress-up.live)
- [Github](https://github.com/girish1729/progress-up)
- [React plugin](https://www.npmjs.com/progress-up-react)
- [Vue plugin](https://www.npmjs.com/progress-up-vue)
- [Svelte plugin](https://www.npmjs.com/progress-up-svelte)
- [Angular plugin](https://www.npmjs.com/progress-up-angular)
AWS IAM Users and Policy
Tags: cloud, beginners
Published: 2023-02-26 10:58:38

I have undertaken the journey to achieve the AWS Solutions Architect certification as the first step to learning about Cloud Computing. The ability to automate the rollout of production systems and have those systems scale up or out based on nothing more than utilization is a powerful attraction; as long as you can control the costs.

In the first part of the journey, after learning about Elastic Computing and Storage; we started down the path of learning about Identity and Account Management. IAM Users are used when you need to have long-term AWS access for humans, applications or services. There is a limit of users (5,000) and each user can only be a member of 10 groups which limits using them for large organizations (though there are other ways such as using IAM Roles or Identity Federation), they still have their use.

IAM users are Principals (which can be Human, applications, etc.) which authenticate via username and password or via a public/private Access Key pair. Humans can use either method depending upon whether they are accessing via the Web Console or the Command Line Interface.  The principal become authenticated once it proves its identity.

AWS Identities can have IAM Policies applied to them. These policies are a set of security statements that allow or deny access to AWS Resources. Policies consist of a JSON Document consisting of:

- SID (Statement ID, which is optional)
- Effect (allow or Deny)
- Resource (can be multiple and can use the wildcard character *)
- Principal (IAM User/Role)
- Action (the format is Service:Action, wildcards are allowed. Can also use the ARN--Amazon Resource Name format)
- Condition (option conditions for when the policy is in effect)

IAM Policy documents are written in a JSON Document and provides the ability to automate the application of policies to multiple users/groups. Armed with templates for various levels of permissions, a Cloud Administrator could easily apply polices to IAM Users rapidly and consistently.

Human IAM Users should have MFA applied to them as a Best Practice; especially those IAM users who have administrative roles. The type of MFA you use is up to your own policy, either a physical device an app on a mobile device or even biometric information.

This is just scratching the surface of IAM users and policies, the versatility is far-reaching.
C# Arrays Part 1 - Creating Arrays
Published: 2023-02-26 10:53:35

## Things to Note about C# arrays

- Arrays are stored in continuous-memory locations or contiguous block of memory.
- Arrays are index based and starts at index of zero.
- Array size must be define
- Array type must be defined
- Do not add values more than defined size, e.g if size = 4 then index starts at 0 and ends at 3.

## Array Declaration Snippet
```type[] arrayVariableName = new type[size];```

## Array Example
```C#
    public class Program
    {
        static void Main(string[] args)
        {
            int[] numbers = new int[5]; // create and initialize array

            // set values in array
            numbers[0] = 52;
            numbers[1] = 63;
            numbers[2] = 44;

            // display value from array
            Console.WriteLine($"First index is {numbers[0]}");

            Console.ReadKey();
        }
    }
```

## Array Initializer Example
- Using array initializer example below, you can initialize the array with values on declaration
```C#
int[] numbers = new int[5] {55, 22, 43, -1, 0};
string[] names = new string[3]{"Abel", "Marvel", "Phil"};
```

## Import Notes
- Values in arrays are called elements
- Arrays are used to hold group of values where as variables hold a single value
- The length represents the number of properties in the array
```C#
Console.WriteLine($"Length of array {numbers.Length}");
```
- Arrays belong to the names space `System.Array` and are stored in the heap memory. Its address reference is stored in reference variable on the stack memory.
When to Break Function for Clean Code
Published: 2023-02-26 10:46:00

1. Single Responsibility Principle (SRP): A function should only have one responsibility. If a function is doing multiple tasks, it may need to be split into smaller functions.
 
2. Don't Repeat Yourself (DRY): If a code block or section is repeated in multiple places throughout the codebase, it should be abstracted into a separate function.

3. Keep Functions Small: Functions should be small and focused to make them easier to understand, debug, and maintain.

4. Use Descriptive Function Names: Functions should have descriptive names that accurately reflect their purpose and what they do.

5. Testability: Functions that are small and focused are easier to test than larger, more complex functions. Breaking a function into smaller parts can make it easier to test and ensure that it works as intended.
6 useful resources for Front-end developer
Tags: react, programming, productivity, javascript
Published: 2023-02-26 10:22:14

[Daily. dev](https://daily.dev/)
It is a browser extension and a web app that helps developers stay updated on the latest programming news. Essentially it's a feed of posts we gather from the best tech blogs on any programming topic.

[Devdocs. io](https://devdocs.io/)
DevDocs combines multiple API documentation in a fast, organized, and searchable interface.

[lipsum. com](https://www.lipsum.com/)
Lorem Ipsum gives you a visual depiction of the layout by filling content sections with placeholder text.

[icones.js.org](https://icones.js.org/)
This platform offers a large collection of stylish and simplistic icons. 
**Features**

- Instant Fuzzy Searching - all are done locally, no web queries!
- The Bag - select your icons and pack them into a ready-to-use icon font!
- Svg-packer was born from this XD
- Copy the usage scripts
- SVGs direct download
- Mobile friendly
- Collection bookmarks
- Categories filters
- Dark mode
- Built with Vite and Vue 3

[publicapis. dev](https://publicapis.dev/)
A collaborative [list of public APIs](https://github.com/public-apis-dev/public-apis) for developers.

[colorhunt. co](https://colorhunt.co/)
It is a Color palette for Designers and Artists. You may improve the visual impact of your websites and find inspiring color schemes to create a user experience.
Integrating TLDR with FZF
Tags: bash, fzf, tldr, brew
Published: 2023-02-26 10:05:23

In this post, we gonna dive into [TLDR](https://formulae.brew.sh/formula/tldr) with [fzf](https://formulae.brew.sh/formula/fzf) search.

## Usage of TLDR

Go to your favorite terminal, with TLDR enabled, and execute the following command:

```bash
$ tldr brew
```

## Searching with FZF

```bash
$ fzf .
```

It will execute a fuzzy search in the current directory.

## Passing a TLDR list to FZF

```bash
$ tldr --list | fzf
```

The first argument `tldr --list` will generate a list of available commands enabled in your command line.

And when passing with a pipe operator `|` it will send the results to `fzf`.

## Selecting an Argument with FZF

```bash
$ tldr --list | fzf | xargs tldr
```

As you did in the previous step, it will share the list to `fzf`, and when you select an option it will send the argument via `xargs` to execute with `tldr`.

## Previewing Commands on Searching

It creates a preview window, showing the results from TLDR and passing to the new window via `xargs`.

Let's try with the following command:

```bash
$ tldr --list | fzf --preview "tldr {1}" --preview-window=right,60% | xargs tldr
```

## Bonus: Aliasing

Create an alias to avoid remembering all this stuff:

```bash
alias tldrf='tldr --list | fzf --preview "tldr {1}" --preview-window=right,60% | xargs tldr'
```

Source your command line configuration file, in my case it is `.zshrc`, and voilá!

Try your new alias into the command line:

```bash
$ tldrf
```
Design Thinking Process-Getting Started
Published: 2023-02-25 20:00:15

## What Is Design Thinking?
Design thinking is a process used during the initial stage of product development. UI/UX designers work on developing innovative solutions and prototypes that meet the needs of the user. This phase majorly involves empathizing with the user, defining problem statements, development of prototypes and testing.

## Why is Design Thinking important?
Design thinking is an important process for teams because it allows them to understand the users’ needs and develop solutions that really meet the needs of the user. As a developer, it is always important to remember that the product you are developing is for the user and their experience must be made top-notch.
In addition, it is a skill that is equally useful in helping one think outside their box. It triggers and pushes our creativity beyond limits since it involves developing prototypes, testing them in the market and re-developing others if the users are not satisfied with the product.
With this skill teams are able to develop better prototypes and conduct usability tests that meet the UX needs.

## How is Design Thinking Done?
Design thinking process can be done in 5 main phases:

## Phase 1: Empathize – Research users’ needs
This phase involves the team trying to understand the users’ needs, not what they think the user may need. It involves data collection through conduction of interviews, surveys and getting feedback on products. The UI/UX designers then can empathize with the users because they have their perspective on the problem they want to solve.

## Phase 2: Define- Stating users’ needs/problems
After data collection, the team should be able to define the users’ needs through the use of problem statements. It is always advisable to analyze and be able to get one problem statement that you provide a solution for. The problem statement should really capture the main need of the user to allow the product to be user friendly.

## Phase 3: Ideate- Creation of solutions
After getting a problem definition, it is time to provide solutions. This phase majorly involves brainstorming and allowing us to ‘think without borders’. Brainstorming can be done through techniques like white boarding.

## Phase 4: Prototype-Visualize the solutions
This stage involves bringing to life the solutions we have developed. For beginners it is as easy as having paper prototypes. It is important to note that you should not be limited in the number of prototypes sketched out but rather have as many as you can.

## Phase 5: Test- Try out solutions`
It is now time to see if your user is satisfied with the solution provided. This last phase involves engaging the users by getting feedback from them. It is important to still have in mind that whatever the feedback is from the user do not defend yourself by trying to convince them the prototype is good. If it is not pleasing, you have to try out the ideation process again.
 
In conclusion, while doing design thinking, always keep in mind the product is for the user and as a solution provider you need to create solutions for the users’ problems.
Continuous Integration and Deployment: The Key to Faster and More Reliable Software Releases
Tags: cicd, computerscience
Published: 2023-02-26 10:00:00

Continuous integration and deployment (CI/CD) is a software development practice that involves continuously integrating and deploying code changes to a shared repository. By using CI/CD, developers can release software faster and with fewer errors.

## **What is Continuous Integration and Deployment?**

Continuous integration (CI) is the practice of continuously integrating code changes into a shared repository. This allows developers to detect and fix errors early in the development process, before they become more difficult and expensive to fix.

Continuous deployment (CD) is the practice of automatically deploying code changes to a production environment. This allows developers to release software faster and with fewer errors.

CI/CD involves setting up a pipeline that automatically builds, tests, and deploys code changes. This pipeline typically includes several stages, such as build, test, and deploy. The pipeline can be triggered by a code change, such as a commit to the repository, or on a scheduled basis.

## **The Benefits of Continuous Integration and Deployment**

CI/CD provides numerous benefits for software development, including:

- **Faster releases:** By automating the build, test, and deployment process, CI/CD allows developers to release software faster.
- **Fewer errors:** By continuously integrating and testing code changes, CI/CD helps to detect and fix errors early in the development process.
- **Increased collaboration:** By continuously integrating code changes into a shared repository, CI/CD promotes collaboration and communication among developers.
- **Improved stability:** By automatically deploying code changes to a production environment, CI/CD helps to ensure that the software is stable and reliable.

## **An Example: An E-commerce Website**

An example of CI/CD is an e-commerce website. The development team sets up a pipeline that automatically builds, tests, and deploys code changes to the website. The pipeline is triggered by a code change, such as a commit to the repository.

The pipeline goes through several stages: building the code, running unit tests, and performing integration tests. Once the tests are passed, the code is deployed to a staging environment where it is tested again. If everything is working correctly, the code is then deployed to the production environment.

## **Conclusion**

Continuous integration and deployment is a powerful software development practice that allows developers to release software faster and with fewer errors. By setting up a pipeline that automatically builds, tests, and deploys code changes, developers can ensure that the software is stable and reliable. So, start exploring the world of CI/CD and see how it can benefit your software development process.
The Essential Guide to the sort Command in Linux
Tags: bash, linux, beginners
Published: 2023-02-26 09:38:17

---

### **_Introduction_**
The `sort` command in Linux is a simple but powerful tool that allows you to sort and organize data in a variety of ways. Whether you're working with text files, directories, or other types of data, the `sort` command is a go-to tool for many Linux users.

### **_Using the sort Command_**
At its simplest, the `sort` command allows you to sort the contents of a file or directory. For example, if you have a text file with a list of names, you can use the sort command to `sort` the names alphabetically:

```
sort names.txt
```

![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4camqd2d3k08rh7msygd.png)

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

The above command will sort the contents of the `names.txt` file and print the results to the terminal. If you want to save the sorted output to a new file, you can use the `>` operator:

```
sort names.txt > sorted_names.txt
```

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

### **_Options and Customization_**
While the basic `sort` command is useful, there are many options and customization features that you can use to tailor the sorting process to your specific needs. For example, you can use the `-r` option to sort the data in reverse order, or the `-n` option to sort the data as numbers rather than as strings.

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

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

Another useful option is the `-k` option, which allows you to specify the key field for sorting. For example, if you have a file with a list of names and ages, you could sort the data by age using the following command:

```
sort -k 2 people.txt
```

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

### **_Tips and Tricks_**
- You can sort data from multiple files at once by passing multiple filenames to the `sort` command.
- You can use the `uniq` command to remove duplicates from sorted data.
- The `sort` command can also be used in shell scripts to sort data and perform other tasks.

### **_Conclusion_**
The `sort` command is a powerful and versatile tool in Linux that allows you to sort and organize data in a variety of ways. Whether you're working with simple text files or complex data structures, the `sort` command is a must-know tool for any Linux user. With its simple syntax and powerful options, you can quickly sort your data and get the results you need.

**_Thank you for reading_** 🧑‍💻

**_Stay tuned for more_** 🚀

✌️ and **_logout_**

<a href="https://www.buymeacoffee.com/k1lgor" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
TailwindCSS from Zero to Production - Notes
Tags: webdev, react, tailwindcss, css
Published: 2023-02-26 09:19:50

# Why Tailwindcss

In my opinion `TailwindCSS` is `Typescript` but for `CSS` world! It will eliminate or decrease major problems that I strongly recommend to read it's comparison to the other ways like `BEM` etc. from the original reference and it's the creator [CSS Utility Classes and "Separation of Concerns"
](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)

# Where To learn

Now you know why you should use it and how much it will help you especially when you are trying to develop a `Design System` for your company's project!

The best source that I've found, after reading a lot of articles, `udemy` and `youtube` etc. videos, is just again their youtube channel, there is a series(8episode - totally under 2h) of videos on their youtube, you can see it here: 
[TailwindCSS from Zero to Production](https://www.youtube.com/watch?v=elgqxmdVms8&list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0) 

Here is the [code for this tutorial](https://github.com/tailwindlabs/tailwindcss-from-zero-to-production)

After this video, you can just go to it's document and like others, make the best and most use of his document, for example, to use a certain class or what...
https://tailwindcss.com/docs/installation


# Notes on these series ✨🤩

I've just finished this series and during watching this series I took some notes, and I will share them to you here so you can use it too.
[Notes](https://gist.github.com/SeyyedKhandon/5d5327a979230bfc16f54d4cf1b5de55)

## Practical Learning section

I strongly suggest to use or atleast read from [FlowBite](https://flowbite.com/docs/components/buttons/)
 which has alot of examples that are written with `tailwindcss`:


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




-------------------------------------------
### ✨ Bonus - VSCode Pro for Frontend developers: 🎖️
[ZPack](https://marketplace.visualstudio.com/items?itemName=SeyyedKhandon.zpack)
Being properly funded for your open-source is now a choice
Tags: javascript, opensource, typescript, npm
Published: 2023-02-26 09:07:12

As a developer, I always wonder how other developers handle an NPM build message like: **188 packages are looking for funding**

It has become almost impossible for companies to uniformly fund the packages they use. They might fund some high-profile ones or give up...

This problem led us to develop [opensourceregistry.com](http://opensourceregistry.com/). We think open-source developers should be compensated like content creators by the companies using their packages. 

Have a look and leave a comment!
🌟 New Thing 01 | Upload Image Using JS
Tags: codepen
Published: 2023-02-26 09:04:30

# 🌟 New Thing 01 | Upload Image Using JS

## 🛠️ Tools Utilized
I used HTML, CSS, and JS to create all the design.

## 📝 Description
The styling aspect was done by CSS, but the main thing was creating a JS function that will allow users to upload an image from their device. To create the JS function, we select the displayed image and input tag using their respective IDs. Then we create a function with `input.onchange`. Next, we create a URL object and give the URL of the selected image to the displayed image, so the selected image will be displayed on the webpage.

## 🎓 Learning
I learned how to access the files of input tag using JS. I got familiar with `URL.createObjectURL`, which allows me to display images on the webpage.

## 🔗 Link
I've uploaded the code at my CodePen. You can check it out here:
https://codepen.io/farmanali6349/pen/wvEzRro

Note: Use the code at your local setup, as the image will not be shown online.

## JS Code
`javascript
let profilePic = document.getElementById('profile-pic');
let inputFile = document.getElementById('input-file');

inputFile.onchange = function () {
    profilePic.src = URL.createObjectURL(inputFile.files[0]);
}
`
{% codepen https://codepen.io/farmanali6349/pen/wvEzRro %}