teleren/devto huggingface dataset:
Evolution of HTTP
Tags: backend, http
Published: 2023-05-28 06:51:03

---
title: Evolution of HTTP
published: true
description: In this blog, we will learn about the evolution of HTTP.
tags: backend, http
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pm9ufgn6r35ekd8d7tkv.png
canonical_url: https://amitshekhar.me/blog/evolution-of-http
---

I am [**Amit Shekhar**](https://amitshekhar.me), a mentor helping developers in getting high-paying tech jobs.

Before we start, I would like to mention that, I have released a video playlist to help you crack the Android Interview: Check out [Android Interview Questions and Answers](https://www.youtube.com/playlist?list=PL_I3TGB7aK6jNBMZkw3FYdJXyf7quHdI8).

In this blog, we will learn about the evolution of HTTP.

HTTP has seen the following version in its evolution.

- HTTP 1.0
- HTTP 1.1
- HTTP 2.0
- HTTP 3.0

**This article was originally published at [amitshekhar.me](https://amitshekhar.me/blog/evolution-of-http).**

Each version has some problems, and in order to get rid of those problems, it has to update itself. That's why HTTP kept on evolving like any other technology.

So, we will discuss each of the versions of HTTP, the problem with that version, and how it got solved in the updated version.

Let's start with HTTP 1.0

## HTTP 1.0

This was the first version of HTTP. It has a problem.

**Problem**: Each request to the same server needed a new TCP connection.

We needed a solution for that, and HTTP 1.1 was introduced to solve this problem.

## HTTP 1.1

It solves the HTTP 1.0 problem. But it has another problem.

**Problem**: HOL blocking issue. HOL(head-of-line) blocking issue - new request had to wait for the earlier request to complete.

HOL blocking issue at two layers:

- Application
- Transport(TCP)

Again, we needed a solution for that, and then HTTP 2.0 was released to solve this problem.

## HTTP 2.0

It solves the HTTP 1.1 problem of the HOL issue at the application layer using request multiplexing. But the HOL blocking issue at TCP was the problem.

**Problem**: HOL blocking issue at TCP.

And once again, we need a solution for that, and with the release of HTTP 3.0, this problem got solved.

## HTTP 3.0

It solves the HOL blocking issue at TCP. It uses QUIC(Quick UDP Internet Connections) which is based on UDP.

This is how HTTP has evolved from HTTP 1.0 to HTTP 1.1 to HTTP 2.0 to HTTP 3.0.

Master Kotlin Coroutines from here: [Mastering Kotlin Coroutines](https://amitshekhar.me/blog/kotlin-coroutines)

That's it for now.

Thanks

[**Amit Shekhar**](https://amitshekhar.me)

You can connect with me on:

- [Twitter](https://twitter.com/amitiitbhu)
- [YouTube](https://www.youtube.com/@amitshekhar)
- [LinkedIn](https://www.linkedin.com/in/amit-shekhar-iitbhu)
- [GitHub](https://github.com/amitshekhariitbhu)

[**Read all of my high-quality blogs here.**](https://amitshekhar.me/blog)
Importance of CSS Specificity
Published: 2023-05-28 09:53:34

CSS specificity is an important topic if you want to get better at CSS. If you give the same element two or more CSS rules, then which style declaration will be applied to that HTML element?

Here comes an important concept called **CSS Specificity**, here the listed selector categories are **in the order of decreasing specificity**.

**Important > inline styles > ID > class, pseudo-class, attributes > Elements**

According to MDN, the browser will decide which CSS property values are more relevant to that element and will be applied. Simply if two or more CSS selectors apply to the same then which has the highest specificity will be applied to that element.

These selector categories are represented:  0 - 0 - 0 - 0 - 0 in that order.

Let us take one example: 

`<button class=”class-btn” id=”id-btn”> Hello World! </button>`

1. !important: This property overrides all others. style: 1 - 0 - 0 - 0 - 0

` button {
color: “red” !important;
}`

2. Inline Styles: if an element has an inline style then 0 - 1 - 0 - 0 - 0

`<button style=”color:  blue”>Hello World!</button>`

3. ID Selector: if the element has an ID selector then 0 - 0 - 1 - 0 - 0

`#id-btn {
color : “blue”;
}`

4. If the element has a class, pseudo-class or attribute selector then add 1: 0 - 0 - 0 - 1 - 0

` .class-btn {
color : “violet”;
}`

5. Add 1 to the element selection: 0 - 0 - 0 - 0 - 1

`button {
background : “yellow”;
}`

Now I have one question for you to better understand this concept.


![Importance of css specificity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etmc9bubi7swcwc3b9h7.png)

**What would be the color of the heading “Hello World!”?**

**A. Red**
**B. Green**
**C. Violet**
**D. Yellow**

Now If you are confused then let’s understand the question

`h3.heading {
        color: green;
}`

Specificity is 0 - 0 - 0 - 1 - 1, because it has 1 class and 1 element.

`.main h3 {
        color: violet;
}`

Specificity is 0 - 0 - 0 - 1 - 1, because it has 1 class and 1 element.

`.heading {
        color: red;
}`

Specificity is 0 - 0 - 0 - 1 - 0, because it has only 1 class.

`h3 {
     color: yellow;
}`

Specificity is 0 - 0 - 0 - 0 - 1, because it has only 1 element.

**So now color green and violet have same specificity that is  0 - 0 - 0 - 1 - 1.**

Now according to cascading style sheet rule, whichever rule is applied the latest that is found in the bottom most will be the one that is applied. So in our question the violet color is the applied in the bottom most.

**So the answer is Violet.**

## Conclusion

I hope you understand the concept of CSS Specificity and if you like the blog and If you think this will be helpful for you do **Like, Comment, and Share** with your colleagues and friends.

Do **Follow me** here on **dev.to**

**Until then Happy Coding.**
Add Image Lightbox in Your Wordpress Theme Without a Plugin
Tags: javascript, wordpress, webdev
Published: 2023-05-28 08:50:08

An image lightbox is a user interface element commonly used to display images in a modal or popup window, providing an immersive viewing experience. It is a popular design pattern for presenting images in a more focused and visually appealing manner.

When implemented, a lightbox typically appears when a user clicks on a thumbnail image or a larger preview image. The lightbox overlay dims the background content and displays the selected image front and center, allowing the user to view it in detail without navigating away from the current page.

The lightbox often includes additional features, such as navigation arrows to switch between images in a gallery, a close button to exit the lightbox, and options for zooming, panning, or scrolling through the image if it exceeds the viewport size.

Image lightboxes are commonly used in various contexts, including photo galleries, portfolios, e-commerce product showcases, and article pages with inline images. They provide a visually pleasing and user-friendly way to showcase images while maintaining the context of the surrounding content.

**CSS:
**
`/* Lightbox container */
#lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  overflow: auto;
}

/* Lightbox image */
#lightbox img {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: 5% auto;
}

/* Close button */
#lightbox .close {
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}`

**JavaScript:
**

`// Get all the images
var images = document.querySelectorAll('.wp-block-image figure img');

// Create the lightbox container
var lightbox = document.createElement('div');
lightbox.id = 'lightbox';
document.body.appendChild(lightbox);

// Create the image element inside the lightbox container
var lightboxImage = document.createElement('img');
lightbox.appendChild(lightboxImage);

// Create the close button
var closeButton = document.createElement('span');
closeButton.className = 'close';
closeButton.innerHTML = '&times;';
lightbox.appendChild(closeButton);

// Attach event listeners to each image
images.forEach(function (image) {
  image.addEventListener('click', function () {
    // Show the lightbox with the clicked image
    lightbox.style.display = 'block';
    lightboxImage.src = this.src;
  });
});

// Close the lightbox when the close button is clicked
closeButton.addEventListener('click', function () {
  lightbox.style.display = 'none';
});
`

This code will create a lightbox container when any of the images with the class gb-block-image is clicked. The clicked image will be displayed in the lightbox, and there will be a close button to close the lightbox.

You can add this CSS code to the <style> tag or in a separate CSS file, and the JavaScript code can be placed within a <script> tag or in an external JavaScript file. Make sure to include the JavaScript code after the HTML elements have been loaded on the page.
How to display the temperature with a unit?
Published: 2023-05-28 09:41:01

---
title: How to display the temperature with a unit?
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-28 09:37 +0000
---

In this post, I’ll share how to display the temperature with the unit using the MeasurementFormatter.

## MeasurementFormatter
```swift
let numFormatter = NumberFormatter()
numFormatter.maximumFractionDigits = 0

let measureFormatter = MeasurementFormatter()
measureFormatter.numberFormatter = numFormatter

let kelvin: Double = 294
var temperature: String = ""

let kelvinTemperature = Measurement(
    value: kelvin,
    unit: UnitTemperature.kelvin
)
//temperature is automatically changed the celcius / farenheit depending on locale.
temperature = measureFormatter.string(from: kelvinTemperature)

//70°F
print(temperature)
```


## UnitStyle

```swift
//70 degrees Fahrenheit
measureFormatter.unitStyle = .long
//70°F
measureFormatter.unitStyle = .medium
//70°
measureFormatter.unitStyle = .short
```

The default unitStyle is medium. You can set the three different unitStyle. 



![Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7eks9wmanqlge0d9uxo.png)

Apple Weather App
The unitStyle is short.

If you want to see more postings, visit my blog. https://shawnbaek.com
How to fix IntelliJ debugger trigger breakpoint only once until restart Server/Application
Tags: java, beginners, programming, tutorial
Published: 2023-05-28 09:27:49

##Problem:

I would say I debug a lot of the time but I am not really an expert on how to use the debugger tool to its full potential so there's some knowledge limitation to how I can use the debugger.

I was developing Java application and I used Jboss EAP for web server for my Java application to run but as I debug the application I always finish the debug by using **the Run to caret position** button and the breakpoint was never trigger ever again until I restart the server.

##Solution to the problem:

This is my current version of IntelliJ Idea:

```
IntelliJ IDEA 2022.3.3 (Ultimate Edition)
Build #IU-223.8836.41, built on March 10, 2023
Runtime version: 17.0.6+1-b653.34 aarch64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 13.4
Kotlin: 223-1.8.0-release-345-IJ8836.41
```

For you to hit the breakpoint as many time as you want, you would have to click on **Resume Program Execution** after your debug session. (Red Circle)


![Resume Program Execution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8ghhx50xentuladdj35.png)

If you click on **Run to where caret is**, the debugger won't be able to re-hit the breakpoint again until you restart your server or application. (Red Circle)


![Run to where caret is](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfmbyf0t7jiznsrbw096.png)

Hope this help
Selection Sort
Tags: programming, computerscience, algorithms, csharp
Published: 2023-05-28 09:17:38

Selection Sort is a straightforward sorting algorithm based on in-place comparison, that is, it works by repeatedly finding the minimum element from the unsorted part of the list and placing it at the beginning.

## How it works

Suppose we have an array of n unsorted numbers. The algorithm works as follows:

1. Starting from index 0, it searches for the minimum value in the array.
2. Once the minimum is found, it swaps it with the element at the starting index.
3. It moves to the next index and repeats the process for the remaining subarray.
4. This process is repeated until all elements in the array are sorted.

These steps are performed repeatedly until the entire array is sorted.

Here is a simple implementation in C#:

```csharp
public void SelectionSort(int[] arr)
{
    var len = arr.Length;
    
    for (var i = 0; i < len - 1; i++)
    {
        var minIndex = i;
        
        for (var j = i + 1; j < len; j++)
        {
            if (arr[j] < arr[minIndex])
            {
                minIndex = j;
            }
        }
        
        (arr[i], arr[minIndex]) = (arr[minIndex], arr[i]);
    }
}
```

## Time complexity

In the worst, average and best case, the time complexity is O(n²), where n is the number of elements to be sorted. This is because the algorithm performs a number of comparisons proportional to the square of the number of elements, irrespective of their initial arrangement.

## Space complexity

Since this is an in-place sorting algorithm, thus requiring no additional space to sort a collection, the space complexity is O(1), making it a good choice for situations where memory usage is a crucial factor.

## Conclusion

Selection Sort is not a particularly efficient sorting algorithm for large data sets, yet it provides a solid foundation for understanding more complex sorting algorithms. Its simplicity makes it an excellent teaching tool for computer science students and anyone new to the world of sorting algorithms.

## References

- Algoritmi e programmazione in C di Francesco Oliveri, Aracne editrice (Italian book)
Coding live session starting 3PM CEST, come and join me for a chat!
Tags: clojure, programming, buildinpublic
Published: 2023-05-28 09:17:08

For the first time in my life, today I am going to stream while I work on one of my side projects.

I want to invite you all to join me, today May 28 at 15:00 CEST, on Twitch https://www.twitch.tv/fpsd_codes !

Why I am doing this? Because I think that having a potential audience would help me to stay focuses on the code without (too many) distractions and because building a side project it is easy to feel alone :)

I will keep notes on [Dynalist](https://dynalist.io/d/y47HRsd9pjyqYR8JaPYE9pnO), if you want to have edit access to the document to contribute, please ping me!

See you later!
WordPress is 20 years old today: celebrate with the worldwide community...
Tags: webdev
Published: 2023-05-28 08:22:33


a new article in WpTavern notes: (see link below)

WordPress is 20 years old today, an estimable milestone for open source software running on the web. Parties are happening all over the world – in Geneva, Los Angeles, Istanbul, Bangkok, Lahore, Jakarta, Mumbai – in over 150 different locations.

The software has been downloaded more than 2.8 billion times but the most impressive stat is the project’s staggering 112,000 contributors, past and present, who have improved and energized WordPress with their passion, talent, and hard work.

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

None of the global collaboration we enjoy today would exist without the inspiration and leadership of co-founders Matt Mullenweg and Mike Little. They worked in a distributed way from day one, having never met when they started WordPress. This way of working created the foundation for a global contributor base that now supports 43% of the world’s websites.

see more here:  https://wptavern.com/wordpress-turns-20


https://wptavern.com/wordpress-turns-20
How to enable battery charge limit on Linux
Tags: battery, linux, tlp
Published: 2023-05-28 08:16:52

Some laptops allow you to set a limit on the battery charge level. This feature is known as a **charge threshold**. For instance, you can choose to stop charging the battery when it reaches 60%, which may help to prolong the battery's lifespan.

On my Lenovo Thinkbook 14s Yoga it's very easy to do this. Here are the steps:

```
sudo dnf install tlp tlp-rdw

```

```
sudo nano /etc/tlp.conf

```
add this line to the file:

```
STOP_CHARGE_THRESH_BAT0=1

```
save and close.

```
sudo systemctl enable tlp.service
sudo systemctl start tlp.service

```
Done! Now your laptop should stop charging the battery beyond 60%.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwvzobd773c3nglb9xq1.png">
  <figcaption>As you can see in the screenshot, the battery is charged until it reaches 59% and then stops charging above that limit.</figcaption>
</figure>

To check if your laptop supports this feature run:
`sudo tlp-stat -b
`
On my laptop the output is this:

```
$sudo tlp-stat -b
--- TLP 1.5.0 --------------------------------------------

+++ Battery Care
Plugin: lenovo
Supported features: charge threshold
Driver usage:
* vendor (ideapad_laptop) = active (charge threshold)
Parameter value range:
* STOP_CHARGE_THRESH_BAT0: 0(off), 1(on) -- battery conservation mode

/sys/bus/platform/drivers/ideapad_acpi/VPC2004:00/conservation_mode = 1 (60%)

+++ Battery Status: BAT1
/sys/class/power_supply/BAT1/manufacturer                   = Celxpert
/sys/class/power_supply/BAT1/model_name                     = L19C4PDB
/sys/class/power_supply/BAT1/cycle_count                    =    316
/sys/class/power_supply/BAT1/energy_full_design             =  60000 [mWh]
/sys/class/power_supply/BAT1/energy_full                    =  52800 [mWh]
/sys/class/power_supply/BAT1/energy_now                     =  31380 [mWh]
/sys/class/power_supply/BAT1/power_now                      =      0 [mW]
/sys/class/power_supply/BAT1/status                         = Not charging

Charge                                                      =   59.4 [%]
Capacity                                                    =   88.0 [%]
```

This line:

`Supported features: charge threshold
`
shows that my laptop supports charge threshold.

And this section gives me the line I need to add to /etc/tlp.conf:

```
Parameter value range:
* STOP_CHARGE_THRESH_BAT0: 0(off), 1(on) -- battery conservation mode
```
How to Set Up JavaFX in IntelliJ IDEA with Maven
Tags: javafx, intellij, maven
Published: 2023-05-28 03:06:53

There are some options to start working with JavaFX to build Graphical User Interface (GUI) using Java programming language. [The documentation](https://openjfx.io/openjfx-docs/) has explained the JavaFX installation in various code editors, like NetBeans, Eclipse, Visual Studio Code, and IntelliJ IDEA. The easiest one is to set up JavaFX in IntelliJ IDEA with the Maven project because you don't need to download JavaFX SDK or set up the library.

Per this article published, the newest JavaFX version is 20.0.1 and it needs at least Java JDK 17 to install. Make sure the JDK is added to the System Variable Path and set the JAVA_HOME environment variable. You can go to [this article](https://www.liquidweb.com/kb/how-to-install-java-windows-ubuntu-macos/) to do all that stuff.

- After Java 17 was installed, open IntelliJ IDEA and click **New Project**
- In the left bar (Generators), choose **JavaFX**
- Then, specify **Name** and **Folder Location** of your project and change **Group** and **Artifact** name
- The most important part is the **SDK**, make sure you choose the installed Java JDK version, and click Next
- In the Additional Libraries window, you can select the libraries you want to work with to simplify JavaFX project development, and click Create

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

IntelliJ IDEA will download all dependencies needed, so it will take a while. After finishing, the project structure will look like the following image.

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

Open **pom.xml** file, and make sure there are two main dependencies (**javafx-controls** and **javafx-fxml**) and one plugin **javafx-maven-plugin**. In some cases, those dependencies are not the latest version. You can check the latest version in [this link](https://mvnrepository.com/artifact/org.openjfx/javafx-controls) for javafx-controls and [this link](https://mvnrepository.com/artifact/org.openjfx/javafx-fxml) for javafx-fxml.

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

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

To test and run the application, open **HelloApplication.java** file, then click the green color play button. It will show the GUI like the following image.

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

Congratulation!!! You succeed in creating the first GUI application using JavaFX framework.
Updated my Next.js project to v13 Part2: Hooks for App Router
Tags: nextjs, react
Published: 2023-05-28 07:48:42

This is a series of my memo from when I migrated Next.js v13 into my project with the article [From Pages to App](https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs). I also updated other packages’ versions.

[Part1: Migrated app router from page router](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part1-migrated-app-router-27c3ce172bba)

**Part2: Migrated router API**

[Part3: Applied some other Next.js v13 updates](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part2-link-use-client-3f5e17d12b8f)

[Optional: Updated NextAuth from v3 to v4](https://medium.com/@lada496/updated-nextauth-from-v3-to-v4-4210f2b994e3)

[Optional: Updated Redux from classical Redux to Redux Toolkit Query](https://medium.com/@lada496/optimistic-updates-with-rtk-query-4770698de6c1)

useRouter, usePathname, and useSearchParam are available from next/navigation. This useRouter behaves differently from the same name hook from next/router. withRouter is also not available for App router.
[**From Pages to App**](https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks)

## useRouter
```javascript
    // Before
    import { useRouter } from "next/router";
    
    // After
    import { useRouter } from "next/navigation";
```
## withRouter

You can use each hook depending on what you need.

For example, I used usePathname instead of router.query provided from withRouter.
```javascript
    // Before
    
    import { withRouter } from "next/router";
    
    const CategoryPage = ({ router }) => {
      ...skip
    
      const categoryObject = list.filter(
        (category) => category.path === router.query.category
      )[0];
      ... rest
    };
    
    export default withRouter(CategoryPage);
```
```javascript
    // After
    
    import usePathnameArray from "../../../client/hooks/use-pathname-array";
    
    
    const CategoryPage = () => {
     const pathnameArray = usePathnameArray();
      ...skip
    
      const categoryObject = categories.filter(
        (category) => category.path === pathnameArray[2]
      )[0];
      ...rest
    };
    
    export default CategoryPage;
    
    "use client";
    import { usePathname } from "next/navigation";
    /**
     * return pathnames split with /
     * e.g /shop/womens-clothing => ["", "shop", "womens-clothing"]
     * @returns {string[]}
     */
    const usePathnameArray = () => {
      const pathname = usePathname();
      return pathname.split("/");
    };
    
    export default usePathnameArray;
```
original article is [here](https://medium.com/@lada496/updated-my-next-js-project-to-v13-part2-hooks-for-app-router-38a82a8e5b0)