teleren/devto huggingface dataset:
Percentile for measuring performance.
Tags: performance, webperf
Published: 2022-05-02 07:19:29

---
title: Percentile for measuring performance.
published: true
description: Why is percentile chosen over average while measuring the performance metrics
tags: #performance, #webPerf
//cover_image: https://direct_url_to_image.jpg
---
To understand the difference between both of the factors, let us take an example where we calculate marks percentage and percentile both.

## How is the percentile different from than percentage?

A percentile is different from a percentage. A percentage is calculated based on this formula

```math 
percentage = marks obtain / total marks * 100 
```

This equation will give the percentage of marks.

### Percentile is calculated?

Percentile is a **collective unit** whereas percentage is **individual unit**. 

The percentile is calculated based on this formula

```math
percentile = (No of people behind you) / (Total number of people) * 100
```
So, let's say you got 90/100(i.e 90%) marks in a class of 100 students. And no one has got more than you so the percentile is 99th percentile

**Another example**: 
Let's say you got a mark of 50% and only 20 students are behind you so the percentile will be
 20th percentile

Okay, We now know the difference between percentage and percentile and we are starting to get the picture of why we measure performance based on percentile and not a percentage. 
Because a percentile is a collective unit and we need to measure our response time for our users collectively and not individually

This means we don't want to say our API responded with 0.25ms for one user. We would love to say that our API response for 90% of users was less than 0.25ms.

### Got it so why in percentile for measuring performance?

By far average is the easiest way to calculate and can be used to measure performance but one should not rely on average for calculating the performance and only focus on a percentile (90th percentile) to improve and measure performance.

Let us look at why?
To answer this question look at the simple bell curve.

![Bell Curve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8olrtjc2h5l6cfzdrq4.png)

For a bell curve average and median(50th percentile) will always be the same.

But for a real-world scenario, the graph will be something like this.

![Performance report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/muod54t8f3qx6u9chl31.png)

based on this graph average will be **0.97ms** but that's not what most of our users are having response time.

Let us sort this graph. 

![Sorted performance graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv5k5ztqaat7hsr7ikm4.png)

We can see that 90%(P90) of our user is facing 2sec of response time but only 10%(P10) of users are having 0.97ms of response time. So we know that we need to improve our API's response time. 

## Conclusion

We tried to learn about different techniques and why percentile should be preferred over other techniques. And one should care about P90(i.e 90th percentile) for measuring the performance in real-world applications.
Elastic Container Service
Tags: aws, beginners, cloud
Published: 2022-05-02 07:12:30

In this post, I will introduce us to the Amazon Web Service offering for running and managing containerised workloads. 

Let's begin by understanding what containers are. You can skip if this seems familiar to you. 

For newbies are you ready? 

![image](https://media.giphy.com/media/lsqUDSmbnAeuxmZhw7/giphy.gif)

**Containers** are basically operating system virtualised unit of software that packages codes and all of its dependencies; libraries, binaries so that the application can be moved from one computing environment to another fast and reliably. This solves the problem of environment drift, the popular "it works on my machine syndrome", for developers. Containers run as isolated processes on your operating system, most likely Linux. This provides security to your application as processes don't interfere with one another since they are isolated from one another and the host. You can have one to ten containers running on your linux machine and its somewhat easy to manage these containers and their hosted applications, in terms of resources, liveliness, networking etc.

As a developer, you have deployed applications in containers. These containers are managed by you. Users begin to love your application and you are getting hundreds to thousands of traffic per day, this definitely demands for more containers in order to scale to meet user traffic. Hence your container infrastructure would increase to hundreds and thousands. The big question is, do you have the manpower, skill and time to manage an infrastructure with hundreds to thousands of containers. The answer would be 
![image](https://media.giphy.com/media/vPN3zK9dNL236/giphy.gif)

This is where **Amazon ECS** comes to the rescue. Amazon Elastic Container Service (Amazon ECS) is a fully managed container orchestration service that provides the most secure, reliable and scalable way to run containerised applications. With Amazon ECS, you can launch thousands of containers without worrying about management. You can deploy your web applications and auto-scale as your user continuously grows.

![ECS](https://media.giphy.com/media/5xtDarmwsuR9sDRObyU/giphy.gif)

I would love to keep this post short. Here are resources that would help you get started with Amazon ECS service.

- [AWS ECS features](https://aws.amazon.com/ecs/features/?pg=ln&sec=gs)

- [AWS ECS resources](https://aws.amazon.com/ecs/resources/)
- [Getting started with AWS ECS](https://aws.amazon.com/ecs/getting-started/)
Getting Started with Docker
Published: 2022-05-01 17:55:18

## Docker 
At the base, Docker is a container management service. It is very powerful because it acts as a platform to develop, run, and ship applications. It is lightweight and secure while containing everything necessary for running applications. It also allows for running multiple containers from one host. 

## Play With Docker
[Play With Docker](https://www.docker.com/play-with-docker/) is the tutorial provided to get familiar with Docker. There are a few options, a 101 tutorial, a lab environment, and other learning materials. It is very easy to set up, just download the desktop version and run the command `docker run -d -p 80:80 docker/getting-started` in the terminal to open the tutorial. It walks you through step-by-step what to do to set up the tutorial and your first application.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v34det7m6u6kdhaqgl17.png)
 
Follow the instructions and you’re all set – you made your first containerized application!

![Image of ToDo app built with Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5n8h9n9u0p6avjy5lb6.png)

## Using Docker with Existing Apps
As we saw above, it’s very easy to get started using Docker and it’s still easy to utilize for your own projects. If you regularly use node/npm in your development, there is a very helpful guide on their [Dockerizing](https://nodejs.org/en/docs/guides/nodejs-docker-webapp/) tutorial. 

It follows a similar setup as the Play With Docker example in creating a Dockerfile (shown below) and a .dockerignore file, which is useful for dealing with the node modules and logs so they don’t get copied into the image. 

![Dockerfile for Node app, from Node Dockerizing guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au70mvs2i28pep0ayi83.png)

I have also added an example of a docker-compose file, used to define and run apps that are composed of multiple containers. 

![docker-compose file for news api found at https://github.com/heyMP/news-api-workshop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv7jcjp7zun2hgyywicj.png) 

The service is pretty easy to understand overall, but they also provide really helpful guides and reference sheets with their extensive [documentation](https://docs.docker.com/) if you do run into any problems.
[HELP]::Problem Solving
Tags: programming, javascript, productivity, webdev
Published: 2022-05-02 06:47:38

**I'm looking for resources on solving technical problems, thinking, optimizing, improving code efficiency and writing better algorithms and not just code.**

if you guy can share me links, post, videos or anything that will help became better developer. it'll be great and very helpful.

I'm already googling but idk if I'm doing it properly.

Thank you in advance ♥❤💛❣
7 Phases Of Software Development Life Cycle Infographic
Published: 2022-05-02 06:43:07

7 Phases Of Software Development Life Cycle Infographic

Software development Life Cycle is a process in which the tasks performed at every step in the -software development method.

It consists of a complete plan explaining the way to develop, maintain and replace specific software system.

SDLC models define phases of the software cycle and the order in which those phases are executed. The 7 phases of Software Development Life Cycle are planning, requirements, design, development, testing, deployment, and maintenance.

Software Development Life Cycle consists of a complete plan explaining the way to develop, maintain and replace specific software system. SDLC models define phases of the software cycle and the order in which those phases are executed.

[Original Source](https://elearninginfographics.com/software-development-life-cycles-infographic-phases/)
Stages of Software Development Process
Published: 2022-05-02 06:42:12

Today, each and every software development project adheres to definite steps, Vishal Shah, developer at TatvaSoft, a software development company said while discussing this topic.  He further added that with defined steps launching of high-quality software is much easier. Let’s explore further at the stages in software development and the various management methodologies available.
  Steps in the Software Development Process
Step One – Planning and Brainstorming
Step Two – Preparing the Requirements Gathering
Step Three – Coding Focus
Step Four – Consider the UI/UX Design
Step Five – Reviewing the Product with the Quality Assurance Stage
Step Six – The Operations Stage—Caring about the Software Product

[See All the steps in details](https://www.dunebook.com/stages-of-software-development-process/)
Open-WC Beginner Guide
Tags: tutorial, node, npm, lit
Published: 2022-05-02 00:25:07

## Welcome to the world of Web Components!
Open-WC is a powerful tool to develop web-components fast. With some simple JavaScript here, and few installs there, you'll be an experienced developer in no time.

- I highly recommend using Linux or WSL for web development, however this step is optional and all install links will be provided below. If you would look to install WSL with a customized terminal look and feel, follow my guide [here](https://dev.to/mnmartinelli/the-ultimate-starter-setup-3gee).

 
## Dependencies Required:

- [NodeJS](https://nodejs.org/en/) NodeJS includes [NPM](https://www.npmjs.com/package/npm) and both can be installed with one command:

```
$ sudo apt-get install -y nodejs
```


## Optional Installs:
- [VS-Code](https://code.visualstudio.com/download)
- Recommended VSCode extensions:
![VSCode extensions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xlp234jljbzwfkpq9ne.png)
 

## Open-WC Installation/Setup:

1. Create a folder and enter into the directory:```
$ mkdir open-wc-demo
$ cd open-wc-demo
```
2. NPM install [Open-WC](https://open-wc.org/guides/)```
$ npm init @open-wc
```
3. Select **"Scaffold a new project"** using the enter key.
4. Select **"Web Component"** using the enter key.
5. Select All (Linting, Testing, & Demoing) by pressing **"a"** and then enter key.
6. Please select **"No"** to not use typescript. We will be using Javascript.
7. Then give your web-component a name, I will be calling mine "open-wc-test".
![Step 7 results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxvozl1jfvwef54e7lyp.png) 
8. Select **Yes** to write the file structure to the disk.
9. Then, select "Yes, with npm" to install all dependencies.
10. Lastly, to test if everything works run `npm start`


![Your local web-sever should look like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckauvpptfzd8a834vbdq.png)
 

## Developing with Open-WC

- Learn more from [Lit Documentation](https://lit.dev/docs/getting-started/),
- Learn more from [Open-WC Documentation](https://open-wc.org/guides/)

### Hello World example provided by [Lit Playground](https://lit.dev/playground/#sample=examples/full-component)
Resource routes in Remix
Tags: react
Published: 2022-05-02 05:54:50

So far, we have been looking at routes in Remix, and they are always HTML-based output routes.

It means they render some HTML, but what happens if we want to have a different route type?

Some examples:

- JSON endpoints
- Images
- PDF files

Don't worry. Remix got your back on that, as we can use their fantastic resource routes for this.

## Resource routes in Remix

There are multiple ways of achieving the endpoint URL to create these routes.

You can create any of the following formats:

```txt
- app/routes/reports/$id/pdf.ts
- app/routes/reports/$id[.pdf].ts
- app/routes/reports/$id[.]pdf.ts
- app/routes/reports.$id[.]pdf.ts
```

All of these will have the same output format:

`http://yourwebsite.com/reports/id.pdf`

But let's see how we can output it as a file rather than plain HTML.
To achieve this we have to use the loader function to change our output like this:

```js
export async function loader({ params }) {
  const report = await getReport(params.id);
  const pdf = await generateReportPDF(report);
  return new Response(pdf, {
    status: 200,
    headers: {
      'Content-Type': 'application/pdf',
    },
  });
}
```

This example uses some functions we don't have, including the `getReport` and `generateReportPDF` functions.
This means it's only an example of how you can achieve it (taken from the official Remix docs).

## Using different types

Let's say we instead want to have a JSON format?

Let's change our document to the following format:

`app/routes/reports.$id[.]pdf.ts`

```js
import { json } from '@remix-run/node';

export async function loader({ params }) {
  return json({ foo: params.id });
}
```

We format the ID from our dynamic URL into a JSON object in this example.

![JSON output in Remix](https://cdn.hashnode.com/res/hashnode/image/upload/v1650645921975/pv_NONCw3.png)

This is pretty cool. This way, we can support all these different formats in Remix.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Smart Email API to build Smart Integrations
Tags: api, email, emailmarketing, node
Published: 2022-05-02 05:35:12

Integrate quickly and send unlimited emails to unlimited contacts for Free.

**Email API - Seamless Integration**
SendClean Email API gives you easy access to interactive documentation, library codes, SMTP and more to simplify your transactional email campaigns. Statistics like open, click, bounce, delivery rates, complaints by Dashboard & HTTP API with Webhooks method in JSON data structure are right on your fingertips.

ruly Whitelabeling
Whitelabeling allows to send email with brand, customize sending domain, tracking links and IP address.

Custom SPF and DKIM record creation to eliminate domain spoofing and phishing via DMARC records on emails being sent from your domain.

**Quick Integration:**
Our tight and seamless integration doesn’t require any plugin or Middleware.Just choose your integration method and make your emails take off.

**World-Class Deliverability**
Our email deliverability monitors your sender reputation. Stay on top of latest best practices to deliver better experiences.
A Powerful suite of features for developers and marketers.



**Every Thing for Developers**
[Free Email API for Developers](https://sendclean.com/email-api/). API that supports multiple development platforms including Node.js, PHP, Python, Curl with customizable integration approach.

Wide range of options even control IP Routing, Open, Click Tracking & DKIM Authentication via Simple API.
Publicly available Robust Documentation and Support articles.
JSON, XML & Get option in both request and response.

Ready to Get Started? [Register now](https://manage.sendclean.com/register)!
To move or not to move
Tags: discuss, firebase, lamp, hosting
Published: 2022-05-02 05:00:21

I currently have my website and web applications on my Hostinger account. Yes! That means it runs on LAMP (Linux Apache MySQL PHP) server. 

Last year I started working on a mobile project for a client. It's a project that involves Flutter (for the mobile app), firebase and Angular (for the Admin site). I learned a lot about Firebase and its features, I recently started to think about moving all my apps and site to Firebase. The main items from my list of things hosted on LAMP are:

- My Website.
- My blog (Wordpress)
- My project management system (Kanboard)
- My store (Opencart)
- The rest of websites and apps that are not relevant.

So, I have my concerns! The website is not a problem because it is a simple HTML 5 website and the contact form is managed by typeform. 

The main concern is my blog. It is small (I have only 5 posts) but Wordpress is easy to use and I believe it handles the CEO good. If I switch, I might use [HUGO](https://gohugo.io/) and connect it to firebase. 

For the store, I know I will have to build something integrated to firebase. And the same thing goes for the project management System (although the last one is more easy because it doesn't include the payment headache the store has).

I want to stop depending on PHP for these things and also reduce the cost. I'm paying ~250$ a Year on my current hostinger plan. Switching to the Blaze plan on Firebase will be a lot cheaper (a lot!) and I will handle the development. But I also want to see your opinions on this and if you think it's worth it.
Variable sequence organization.
Tags: solidity, gasoptimization, bestpractice
Published: 2022-05-02 04:52:54

---series: Gas Optimization techniques---
The sequence in which we we define our state variables in solidity smart contracts affects the gas fees we spend while contract deployment as well as while calling functions that make use of those variables.

Solidity stores state variables in 256 bits slots, and if 2(or more) consecutive variable sizes add up to 256 or less, then these variables are stored in same slot. (types like bytes can acquire upto 2 slots)

## Let's experiment using following contracts:

```solidity
contract varSequence_1{
    uint128 var1;
    uint256 var2;
    uint128 var3;
    byte

    function set(uint num1, uint128 num2) external {
        var1= num2;
        var2= num1;
        var3= num2;
    }
}
```

```solidity
contract varSequence_2{
    uint128 var1;
    uint128 var3;
    uint256 var2;

    function set(uint num1, uint128 num2) external {
        var1= num2;
        var2= num1;
        var3= num2;
    }
}
```

Both the contracts are exactly same, just the sequence of defining variables is changed.

## Results:

**<u>Deployment costs</u>**

- **varSequence_1**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t7w7j71mrewz25aytia.jpg)
- **varSequence_2**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/245q2zahk2pg7plpek5s.PNG)

There is very minor difference in deployment, let's check the function calls.

**<u>Function call costs</u>**

- **varSequence_1**

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

- **varSequence_2**

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

## Observation

**varSequence_2**, which had optimized variable sequence costed almost 25% less than **varSequence_1**.
How I earned my first 100$ with ai copy writer.
Tags: blog, ai, beginners
Published: 2022-05-02 04:52:36

I had always wanted to make money as a blogger but I was terrible in writing posts. After some research, I learned some basic things about making money from ai writing. First, I made a list of all the topics that people usually search on (comment if you want to know the whole process).
With the help of an AI copywriter copykitties.ai (Site is under maintenance and soon to be released with new exiting features), I was able to earn my first $100 within a few days. The process was simple: I signed up for a free trial with the copykitties, used their service to create a few pieces of content, and then published those articles on my blog. Within days, people were reading my articles and clicking on the ads that were displayed alongside them.
It took me 3 minutes to generate one blog and and I generated more than 100 blogs in 3 days which didn't cost me more than 10$!!!.

I have talked the support to let me use their AI and I got to become their beta tester at copykitties.vercel.app, and I quickly fell in love with new AI templates and content generation.
Ionic vs React Nactive vs Flutter
Tags: mobile, reactnative, ionic, flutter
Published: 2022-05-02 04:45:24

## Table of Contents <a name="TOC">
1. [React Native](#react-native)
2. [Ionic](#ionic)
3. [Flutter](#flutter)
4. [Helpful Links](#helpful-links)


### React Native
#### What is React Native?
An open source framework launched back in 2015 and is backed by Facebook. It provides all the tools you need to develop cross-platform applications on iOS, Android, and Windows. Languages include JavaScript, Swift, Objective-C, C++, and Python.

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

React Native, like React, has a very strong community support backing it up. Alongside this component, React Native allows developers to build applications that provides native look-and-feel by utilizing the devices' native APIs and components sometimes out of reach.

#### Advantages of React Native
- Code re-usability
- Huge support community
- Performance is greater than Ionic

#### Disadvantages of React Native
- Native code
- Need React background

[Back to TOC](#TOC)


### Ionic
#### What is Ionic?
An open source SDK launched in 2013. It uses HTML/CSS, SaaS, JavaScript, etc. to develop cross-platform mobile applications. You can develop cross-platform hybrid apps for web, native iOS, and Android.

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

Ionic is similar to React Native when it comes to the strong community support. Since Ionic allows developers to create hybrid cross-platform applications, creators will need to know how to use third-party packages in order to wrap application in native covers.

#### Advantages of Ionic
- Easy-to-learn framework
- Fast prototyping

#### Disadvantages of Ionic
- Lower performance
- App will look the same regardless of platform


There are always advantages and disadvantages of cross-platform and hybrid applications. If you are interested, here is a previous article:

{% embed https://dev.to/tmchuynh/native-vs-hybrid-vs-cross-platform-apps-4f5p %}

[Back to TOC](#TOC)


### Flutter
#### What is Flutter?
Powered by Google, Flutter designs native-type applications on Android and iOS. Flutter was launched in 2017 and consists of widgets as its building blocks. It uses Dart, which is developed by Google as well. Dart is based on C/C++.

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

#### Advantages of Flutter
- UI building components
- Dart support

#### Disadvantages of Flutter
- Design features may not be up to date

[Back to TOC](#TOC)


### Helpful Links
- [React Native](https://reactnative.dev/)
- [React Native Tutorial for Beginners](https://www.youtube.com/watch?v=0-S5a0eXPoc)
- [Ionic](https://ionicframework.com/)
- [Ionic Framework Crash Course](https://www.youtube.com/watch?v=YwSzqeBchEc)
- [Flutter](https://flutter.dev/)
- [Introducing Flutter](https://www.youtube.com/watch?v=fq4N0hgOWzU)
- [How do I make my first Flutter app](https://www.youtube.com/watch?v=xWV71C2kp38&vl=en)

Happy coding!