This article will guide you through the transformative journey of URLs as state managers in the context of React applications.

Prerequisites

• Fundamentals of HTML and CSS
• Fundamentals of ES6 JavaScript
• Fundamentals of React, React Router and React Hooks.

The Evolution of State Management in React

Let's journey through the past:

• setState: In the early days of React, many relied on component state, especially within class components. It was straightforward to manage component-specific data. But it wasn't ideal for larger applications.
• Redux & MobX: As applications grew in complexity, tools like Redux and MobX emerged. They centralized data management, making it easier to handle app-wide data.
• Context API & Hooks: React's own Context API, combined with the advent of hooks, brought about a more native way to manage the global state without adding extra libraries.

Managing State with URLs

At first, using a URL for managing state might seem unusual. But as you explore further, you'll discover several clear benefits:

• Save Your Spot: By keeping state in the URL, your webpage remembers your place. So, if you bookmark a page, it will look the same when you come back to it later.
• Easy Sharing: If you're looking at something specific on a page, like a product or a chart, you can share the URL. Anyone who clicks it will see exactly what you’re seeing, making collaboration a breeze.
• Troubleshoot with Ease: Developers can find and fix issues faster because the URL shows the state of the app. They can see problems just by clicking on the shared link.

In short, using URLs in this way helps keep your spot, share specific views, and makes problem-solving smoother for developers.

How to Implement URL-based State Management

Considering the size of this section, here’s everything you’ll learn.

1. How to Set Up the Environment
2. Clearing the clutter
3. Project Breakdown / Analysis
4. Install the Necessary Dependencies
5. How to Fetch the Data and Design the UI
6. How to Store State in the URL
7. How to Read the State Stored in the URL
8. How to Customize the Product Page

How to Set Up the Environment

Open your inbuilt terminal or code editor’s terminal (preferably) and run the following:

npm create vite@latest

This command uses Vite (a lightweight tool that is used for building fast and optimized web applications) to scaffold a web app environment. Navigate down using your arrow keys and select React.

Selecting React from Vite Setup

Then select your preferred language combination – I’ll be using plain JS.

Selecting Language in React

Next, move into your react folder using the cd “project-name” folder and run npm install to install all the project’s dependencies.

Finally, start the development server by running npm run dev and going to the respective URL (http://localhost:5173/).

Dev Server running

Clearing the clutter

Make sure to clear the contents of all the CSS files and delete the App.css as you’ll need only 1 style file. Then, clear the contents of the App component and replace it with basic JSX content.

Clutter Cleared in Dev Environment

This returns a clear page on your local server that looks like this:

Clear Server page

Project breakdown / analysis

The project involves getting data from an API and persisting that data globally via the URL to be accessible across many components/pages.

A relatable example is when you’re on your favourite e-commerce site, you may see this cool gadget and want to share it with your friend.

You usually share the link from the browser to your friend’s social media DM which they can use to view the same product without any fuss by opening the link you sent to them.

Here’s a sneaky peek at the project we're going to build: 😉

Sneaky peek of complete project

Intrigued?🌚 Let’s dive in then.

Install the necessary dependencies

Before you put anything on the page, you must first fully configure your development environment with the necessary dependencies.

• json-server: This package hosts your data on a local server, enabling you to fetch it like an external API.
• react-router: This package enables React to create SPAs that allow navigating without refreshing the page.

npm i json-server react-router-dom

Installing dependencies

• Then download the JSON data from this GitHub(json-data), and the assets from this GitHub(assets-data).

Now create a data folder in your root project directory and place the JSON file inside. Then create an assets folder in your public directory and place all images in that assets folder.

Your current folder structure should be like this:

Folder structure after downloading files

Next, modify your package.json file by adding a script which starts up the json-server

"server": "json-server --watch data/products.json --port 9000 "

Adding server script to package.json

After that, open your terminal and start up the server with npm run server:

Starting data server

With this, your server is running and the content of your JSON file can be accessed through the URL provided.

Data on Browser

Ps: If you want to view JSON files in the browser like I do, download the browser extension – JSON Viewer.

How to fetch the data and design the UI

Start by creating a HomePage component and importing it into the App component. This component will contain all the data in the first screen you saw earlier.

Importing the Homepage

In the HomePage component, use a useEffect hook to fetch all the data from your local API.

import { useEffect } from "react";

export default function HomePage() {
  useEffect(function () {
    async function fetchData() {

      try{
      const res = await fetch("http://localhost:9000/products");
      const clothesData = await res.json();
      console.log(clothesData);   
      }
      catch (error) {  console.log(error);}
      }
    fetchData();
  }, []);

  return (
    <main className="homepage">
      <h1>Homepage of my Dummy Product Page</h1>
    </main>
  );
}

At the moment, you can already view the data fetched in the console.

Evidence of data fetching

Next, store your data in a state using the useState hook and populate your interface with that data.

import { useEffect, useState } from "react";

export default function HomePage() {
  const [products, setProducts] = useState([]);

  useEffect(function () {
    async function fetchData() {
      try {
        const res = await fetch("http://localhost:9000/products");
        const clothesData = await res.json();
        console.log(clothesData);
        //Storing happens here
        setProducts(clothesData);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  return (
    <main className="homepage">
      <h1>Homepage of my Dummy Product Page</h1>
      <div className="products__list">
        {products.map((product) => (
          <div
            key={product.id}
                      className="product__item"
          >
            <img loading="lazy" src={product.imageUrl} alt="" />
            <h2>{product.itemName}</h2>
          </div>
        ))}
      </div>
    </main>
  );
}

All the styling required in this project is in this CSS file. Alternatively, you can paste these stylings in your index.css, which gives the same result.

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Nunito", sans-serif;
}

h1 {
  text-align: center;
  font-weight: 700;
  font-size: 3rem;

  & span {
    cursor: pointer;
    margin-right: 3rem;
  }
}

a,
h3 {
  text-decoration: none;
  color: #a04000;
}

img {
  width: 100%;
  display: block;
  transition: all ease-in 0.3s;
}

.homepage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 1rem;
  flex-direction: column;
  gap: 3rem;

  & > * {
    width: 100%;
  }
}

.products__list {
  column-count: 1;
  column-gap: 2rem;
  padding: 2rem;

  & > * {
    break-inside: avoid;
    margin-bottom: 2rem;
  }

  & .product__item {
    border-radius: 1rem;
    overflow: hidden;
    display: block;
    position: relative;
    transition: all ease-in 0.3s;

    & h2 {
      background: #fff;
      bottom: 5px;
      left: 5px;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      z-index: 2;
      position: absolute;
      transition: all ease-in 0.3s;
    }

    &:hover img {
      scale: 1.1;
    }

    &:hover h2 {
      transform: translate(10px, -10px);
    }
  }
}

.single__product {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 4rem;
  border-radius: 1rem;
  overflow: hidden;

  & section {
    display: flex;
    justify-content: center;
    flex-direction: column;

    & figure {
      border-radius: 1rem;
      overflow: hidden;

      & .product__img {
        width: 100%;
      }
    }

    & aside {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.5rem;

      & > h2 {
        font-size: 2.5rem;
      }
      & > h3 {
        font-size: 1.6rem;
      }
      & span {
        background: rgba(160, 64, 0, 0.5);
        padding-inline: 1rem;
        align-self: flex-start;
      }
    }
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .products__list {
    column-count: 2;
  }

  .single__product {
    & section {
      flex-direction: row;

      & .product__img {
        max-width: 300px;
      }
    }
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .homepage {
    padding: 2rem 4rem;
  }
  .products__list {
    column-count: 3;
  }
}

At the moment, your home page should already look identical to the demo version.

Home page with styles added

How to store state in the URL

In order to manage and share state across multiple pages using the URL, you first need to define routes using the react-router package.

Start by creating a route for the homepage:

import { BrowserRouter, Route, Routes } from "react-router-dom";

import HomePage from "./HomePage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<HomePage />} />
      </Routes>
    </BrowserRouter>
  );
}

• The BrowserRouter component wraps your entire application or the part of your app where you want to use routing.
• The Routes component wraps all your Route components and is responsible for rendering the first route that matches the current location.
• The Route component represents a single route in your application.

Next, create a ProductItem component responsible for showing a single item and its equivalent route.

import { BrowserRouter, Route, Routes } from "react-router-dom";

import HomePage from "./Homepage";
import ProductItem from "./ProductItem";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<HomePage />} />
         <Route path="product" element={<ProductItem />} />
      </Routes>
    </BrowserRouter>
  );
}

To view the ProductItem component, head over to your HomePage and wrap each individual product with a Link element pointing to the product page with their unique ID.

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

export default function HomePage() {
  const [products, setProducts] = useState([]);

  useEffect(function () {
    async function fetchData() {
      const res = await fetch("http://localhost:9000/products");

      const clothesData = await res.json();
      console.log(clothesData);
      setProducts(clothesData);
    }
    fetchData();
  }, []);

  return (
    <main className="homepage">
      <h1>Homepage of my Dummy Product Page</h1>
      <div className="products__list">
        {products.map((product) => (
          <Link
            key={product.id}
           // Moving to the product page
           to={`/product?id=${product.id}`}
            className="product__item"
          >
            <img loading="lazy" src={product.imageUrl} alt="" />
            <h2>{product.itemName}</h2>
          </Link>
        ))}
      </div>
    </main>
  );
}

Clicking on any product now routes you to the product page and shows the ProductItem component.

On closer observation, you may notice that the id of each item is appended to the URL via its id property (for example: product?id=12345678). This implies that you have successfully stored the id state to the URL.

How to read the state stored in the URL

In order to show data for each product, you have to read the state stored in the URL.

To implement this, start by creating a new custom hook (this helps for reusability). In your custom hook, import the useSearchParams hook.

import { useSearchParams } from "react-router-dom";

export function useURLID() {
  const [searchParams] = useSearchParams();
}

The useSearchParams hook allows you to interact with the query parameters of the URL (part of the URL that comes after the ? as seen in your URL earlier).

In order to retrieve the values from the URL, use the get method and pass in the name of the value you want to retrieve, in this case, the id.

import { useSearchParams } from "react-router-dom";

export function useURLID() {
  const [searchParams] = useSearchParams();
  const id = searchParams.get("id");
  return { id };
}

To test out your hook, import it into the ProductItem page and extract the values.

import { useURLID } from "./useURLID";

export default function ProductItem() {
  const { id } = useURLID();
  return <div>Product Item {id}</div>;
}

And voilà! Your id state is now global and can used by any component in your app. Bravo!

How to customize the Product Page

In order to fully achieve what was shown in the demo, perform another fetch based on the id to get the data for that product.

Start by creating states to store the data and account for the data loading.

const [singleProduct, setSingleProduct] = useState({});
const [loading, setLoading] = useState(false);

Then use a useEffect hook to fetch and store the data based on the unique product id.

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const res = await fetch(`http://localhost:9000/products/${id}`);

        const data = await res.json();

        setSingleProduct(data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);

Next, use the data received to populate the interface.

import { useEffect, useState } from "react";
import { useURLID } from "./useURLID";


export default function ProductItem() {
  const { id } = useURLID();
  const [singleProduct, setSingleProduct] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const res = await fetch(`http://localhost:8000/products/${id}`);

        const data = await res.json();

        setSingleProduct(data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);



  // If loading, display the loading div
  if (loading) return <div>Loading...</div>;

  // If not loading, display the product details
  return (
    <div className="single__product">
      <h1>
               <span>
          {singleProduct.itemName} Page id: {id}
        </span>
      </h1>
      <section>
        <figure className="product__img-container">
          <img
            className="product__img"
            src={singleProduct.imageUrl}
            alt="Image"
          />
        </figure>
        <aside>
          <h2>{singleProduct.itemName}</h2>
          <h3>{singleProduct.notes}</h3>
          <h4>
            Category: <span>{singleProduct.type}</span>
          </h4>
          <p>
            Width: <strong>{singleProduct?.size?.width}</strong>
          </p>
          <p>
            Length: <strong>{singleProduct?.size?.length}</strong>
          </p>
        </aside>
      </section>
    </div>
  );
}

Finally, account for easy navigation by providing a back button to go to the home page. You can do this using the useNavigate hook in react-router. This hook provides a function that allows you to programmatically navigate to other parts of your application.

Simply import the useNavigate hook, and initialize it with a variable like this:

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

Then call this function with an event handler, and pass in the home page route.

import { useEffect, useState } from "react";
import { useURLID } from "./useURLID";
import { useNavigate } from "react-router-dom";

export default function ProductItem() {
  const { id } = useURLID();
  const [singleProduct, setSingleProduct] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const res = await fetch(`http://localhost:9000/products/${id}`);

        const data = await res.json();

        setSingleProduct(data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);

  const navigate = useNavigate();

  // If loading, display the loading div
  if (loading) return <div>Loading...</div>;

  // If not loading, display the product details
  return (
    <div className="single__product">
      <h1>
       // Navigate to the home page
        <span onClick={() => navigate("/")}>🔙 </span>
        <span>
          {singleProduct.itemName} Page id: {id}
        </span>
      </h1>
      <section>
        <figure className="product__img-container">
          <img
            className="product__img"
            src={singleProduct.imageUrl}
            alt="Image"
          />
        </figure>
        <aside>
          <h2>{singleProduct.itemName}</h2>
          <h3>{singleProduct.notes}</h3>
          <h4>
            Category: <span>{singleProduct.type}</span>
          </h4>
          <p>
            Width: <strong>{singleProduct?.size?.width}</strong>
          </p>
          <p>
            Length: <strong>{singleProduct?.size?.length}</strong>
          </p>
        </aside>
      </section>
    </div>
  );
}

Testing your final result now gives the following:

Final take showing all features

Real-World Examples

• E-commerce platforms: Think of sites like Amazon. They use URLs to let you share specific product searches or settings. Thanks to this, people can easily share their favourite items or shopping lists with friends.
• Data Tools: Tools like Tableau save your custom views in the URL. This means teams can share specific data pictures with each other, making talks, shows, and decisions faster and clearer.

Additional Information

I’d like to point out a couple of things in the article not highlighted.

• The CSS used contains native CSS nesting that isn’t fully supported by all browsers, so if there are UI irregularities you notice, it may be from the browser you’re using. Feel free to switch to a browser like Google Chrome for better support or check for browser support with a tool like CanIUse and add polyfills to your code.
• If this article delved into things that were a tad complicated for you (how routing works), feel free to check out this article on Routing Animations for a better understanding.
• If you’re interested in the full code, here’s the repo, GitHub, and the Live version is here. Demo
• As an added feature, I made the code fully responsive for anyone interested in creating masonry grids for future projects, cheers!🍷

Conclusion

React's state management has evolved, with URL-based state emerging as a standout. This method not only simplifies state management but also fosters collaboration and transparency between users and developers.

So, the next time you're online and think of sharing data via a URL, remember that you have the tools to implement this feature yourself 😉. It's a nudge for developers to explore the untapped potential of URLs in state management.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

All valid URLs follow certain patterns. So if you know those patterns, you can determine whether a URL is valid or not in your program and give feedback, throw an error, and so on.

In this tutorial, you will learn three methods to check if a string in JavaScript is a valid URL:

• How to Use the URL Constructor to Validate URLs

• How to Use npm Packages to Validate URLs

• How to Use Regex to Validate URLs

How to Use the URL Constructor to Validate URLs

When you pass a string to the URL constructor, it returns a new URL object if a string is a valid URL. Otherwise, it returns an error:

const fccUrl = new URL("https://www.freecodecamp.org/");
console.log(fccUrl);

The following is what you get when you log fccUrl to the console:

A URL object in JavaScript

This object means that the string you passed to the URL constructor was a valid URL.

Now let's see what you get when you pass an invalid URL string:

const fccUrl = new URL('freecodecamp');
console.log(fccUrl);

The string 'freecodecamp' is not a valid URL. Thus, you get the following TypeError:

Invalid URL

To recap:

1. When you pass a valid URL string to the URL constructor, it returns a new URL object.

2. When you pass an invalid URL string to the URL constructor, it returns a TypeError.

With this knowledge, you can create a custom function to check the validity of a given URL string.

How to Create a URL Validator Function with the URL Constructor

By using the URL constructor and a try...catch statement, you can create a custom isValidUrl function:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

The isValidUrl function returns true when the string you pass as an argument is a valid URL. Otherwise, it returns false:

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://mail@freecodecamp.org')); // true
console.log(isValidUrl('freecodecamp')); // false

How to Validate Only HTTP URLs with the URL Constructor

Sometimes, you may want to check if the string is a valid HTTP URL, and reject other valid URLs like 'mailto://mail@freecodecamp.org'.

If you look closely at the URL object, one of its properties is protocol:

The URL object has a protocol property.

In the example above, the value of the protocol property is 'https:'.

To check if a string is a valid HTTP URL, you can use the protocol property of the URL object:

function isValidHttpUrl(string) {
  try {
    const newUrl = new URL(string);
    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://mail@freecodecamp.org')); // false
console.log(isValidHttpUrl('freecodecamp')); // false

The difference here is that you're not returning true after the new URL object is created. Instead, you're checking if the protocol property has a value equal to 'http:' or 'https:' and returning true if it is and false if not.

How to Use npm Packages to Validate URLs

There are two NPM packages you can use: is-url and is-url-http.

These packages are the simplest way to check if a string is a valid URL. All you need to do is pass in a string as a parameter, and they will return true or false.

Let's see how both of these packages work.

How to Validate URLs with the is-url Package

You can use the is-url package to check if a string is a valid URL. This package does not check the protocol of the URL passed to it.

To use is-url, first install it using the command below:

npm install is-url

Then import it and pass your URL string to it as an argument:

import isUrl from 'is-url';

const firstCheck = isUrl('https://www.freecodecamp.org/');
const secondCheck = isUrl('mailto://mail@freecodecamp.org');
const thirdCheck = isUrl('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // true
console.log(thirdCheck); // false

The is-url package returns true for strings that have valid URL formats and false for strings that have invalid URL formats.

In the example, both firstCheck (with the https: protocol) and secondCheck (with the mailto: protocol) return true.

How to Validate HTTP URLs with the is-http-url Package

You can use the is-url-http package to check if a string is a valid HTTP URL.

Install the package with the following command:

npm install is-url-http

Then import it and pass the URL string to it like so:

import isUrlHttp from 'is-url-http';

const firstCheck = isUrlHttp('https://www.freecodecamp.org/');
const secondCheck = isUrlHttp('mailto://freecodecamp@mail.org');
const thirdCheck = isUrlHttp('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // false
console.log(thirdCheck); // false

In this example, only firstCheck returns true. The is-url-http package is not only checks that the string is a valid URL, it also checks if it's a valid HTTP URL. That is why it returns false for secondCheck, which is not a valid HTTP URL.

How to Use Regex to Validate URLs

You can also use regex, or a regular expression, to check if a string is a valid URL or not.

All valid URLs follow a particular pattern. They have three main parts, which are:

• Protocol

• Domain name (or IP address)

• Port and path

Sometimes a query string or fragment locator follows the path.

You can learn more about URL patterns from this freeCodeCamp article on the structure of URLs.

Knowing the pattern URLs are made of, you can use regex to check for the existence of such patterns in a string. If the patterns exist, then the string passes the regex test. Otherwise, it fails.

Also, using regex, you can check for all valid URLs, or only check for valid HTTP URLs.

How to Validate URLs with Regex

function isValidUrl(str) {
  const pattern = new RegExp(
    '^([a-zA-Z]+:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://freecodecamp.org')); // true
console.log(isValidUrl('freeCodeCamp')); // false

The regex in the isValidUrl function above checks if a string is a valid URL. The protocol check ^([a-zA-Z]+:\\/\\/)? is not limited to just https:.

This is why the second example with the mailto: protocol returns true.

How to Validate HTTP URLs with Regex

To use regex to check if a string is a valid HTTP URL, you need to edit the protocol check.

Instead of ^([a-zA-Z]+:\\/\\/)?, you should use '^(https?:\\/\\/)?':

function isValidHttpUrl(str) {
  const pattern = new RegExp(
    '^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://freecodecamp.org')); // false
console.log(isValidHttpUrl('freeCodeCamp')); // false

Now only the first example which has a valid https: protocol returns true. Note that URL strings with http: work, too.

Wrapping up!

In this article, you learned how to check the validity of URLs in JavaScript. You now know the following three methods for doing so.

• How to Use the URL Constructor to Validate URLs

• How to Use npm Packages to Validate URLs (is-url and is-http-url)

• How to Use Regex to Validate URLs

It's up to you to choose which method you're comfortable working with.

Thanks for reading. And happy coding!

This would allow users to share links that point to any particular text on a webpage!

What's a URI fragment?

The URI fragment is the optional part at the end of a URL which starts with a hash (#) character. It lets you refer to a specific part of the document you've accessed.

For example, if you visit the following link, you'll automatically scroll to the top of the section you're reading right now!

What's a URI fragment?

Assuming you're consuming this article in the browser, you'll notice the URL changes too. It's now appended with #what-s-a-uri-fragment, which is the ID that the Ghost CMS assigned to the heading.

What's Changing?

Before, the primary way to anchor links to part of a page was by specifying the ID of an HTML element in the fragment (source).

This put readers at the whim of the web developer or content writer. If writers didn't provide appropriate IDs, there'd be no way to anchor links to that section.

Some websites or tools provide a non-standard way of handling this, namely highlighting. For example, in Read the Docs you can pass the highlight query parameter to highlight any particular text on the page.

You can try it out in the Weblate documentation.

This is what you see when you specify the highlight query parameter on the Weblate documentation.

Text Fragments are a relatively new proposal which extend the usability of URI fragments to query and highlight any arbitrary text as well.

Why Would This Be Useful?

Can you relate to one or more of these scenarios?

• When sourcing information, you can link directly to the quote or content you cited.

• As a member of support staff, you can link to and highlight a particular excerpt of the documentation or FAQ for the user.

• Text fragments can be used with any arbitrary text document that can't store anchor metadata, such as plaintext or configuration files.

• You're a web developer who implemented a custom solution for this, but can now just let the browser handle it for you.

If so, then this might help better attribute content on the web, highlight information your users need, or relieve some maintenance effort for developers.

The Proposal

You can specify either literal text, or the start and end of a range of text. The spec includes a pseudo-diagram that demonstrates what the syntax looks like:

:~:text=[prefix-,]textStart[,textEnd][,-suffix]

         context  |-------match-----|  context

Or alternatively, a more digestible version:

The sections prefix and suffix are used for context, so if the text you want to match appears multiple times on a page, you can use them to indicate to the browser which instance you want to match.

To provide some examples, let's suppose we open the Web Monetization website which includes the following text.

A JavaScript browser API that allows the creation of a payment stream from the user agent to the website

— https://webmonetization.org/

For longer excerpts of text, a range is preferred to avoid bloating the URL. Usually, developers will aim to keep the total length of URLs below 2,000~ characters anyway. This avoids potential issues with older user-agents, especially after accounting for the length of the domain and query parameters.

Here is how highlighting looks on Chromium when you visit a webpage with a text fragment.

Implementation Details

From reading the spec, and testing manually in a Chromium browser, here are some of the finer details with querying content in a text fragment.

• The sections are not case-sensitive, and accents are ignored (source)

• All sections match whole words only, so you can't partially match

• Only the first match will be highlighted if there are multiple (source)

Compatibility

Text fragments are available in most Chromium browsers, as this was implemented in Chromium itself in 2020.

Text fragments are not available in Firefox at all yet. Mozilla will hopefully have this implemented in the future – in February 2022 they opened a ticket to track progress.

Privacy and Security

Some concerns have been raised with the specifications, namely that automatically scrolling to parts of the page may reveal certain details about the user.

An interesting thing about URI fragments is that they shouldn't be sent to web servers for processing. URI fragments are intended to be a client-side/user-agent only mechanism to be handled locally by the browser or web application.

To verify this, we can run a small Express server that just logs the URL. We'll see if it includes the fragment:

const express = require('express');
const app = express();
const port = 3000;

app.get('*', (req, res) => {
   console.log('URL:', req.url);
   res.status(204).send();
});

app.listen(port, () => {
   console.log(`Listening on port ${port}.`); 
});

The results of each request via curl. The same strings would've printed had I executed the requests in a browser.

Some websites take advantage of this to improve privacy and reduce the bandwidth sent to web servers.

For example, if you look at TypeScript Playground, you'll notice instead of using query parameters or building a short URL, they just encode the TypeScript and store it in the URI fragment.

Observe how the URL includes a URI fragment. It's actually just console.log('Hello, World!'); but encoded.

With an implementation like this, you can bookmark or share the link with anyone, and their web server won't know or care about the code. However, any services you use to share the link could, of course, decode and read it.

However, the concern raised with text fragments is that, if a user-agent will automatically scroll down to a given section of a page, while the text fragment wouldn't have been shared with the web server, network requests may've been induced such as loading images on that part of the site. This would allow the web server to derive that you were linked to that section of the page (source).

Despite these concerns, it appears to me that URI fragments as a whole have been susceptible to this for a long-time, not just text fragments.

Regardless, it's a good thing to keep in mind until browser developers and security researchers give this more thought.

Link to Text Fragment Extension

Google has also developed an extension which provides a UI to link any arbitrary text as a URL.

The extension adds "Copy Link to Selected Text" to the context-menu when you select text and secondary-click on it. You can see it in action on the following video.

The extension also ships for Firefox, and polyfills an implementation of text fragments into each webpage, so it'll even scroll to and highlight the matched text too.

Conclusion

I hope this gives more incite on URI fragments as a whole, and especially text fragments.

If you have any ideas for how the specification can be improved, feel free to review the open issues on the browser's and WICG's repositories and provide your thoughts.

I'm eager to see more browsers support this, as it makes the experience of citing, attributing, and linking to content on the web a lot more convenient.

URLs are sometimes called web addresses. Like street addresses, URLs are unique, and lead to specific online resources. These resources could be HTML or CSS files, API endpoints, and much more.

Here is the URL to freeCodeCamp's homepage: https://www.freecodecamp.org/

Tim Berners-Lee created the first specification for the URL in 1994. It built upon the existing domain name structure and added slashes (/) to separate directory and file names like computer file systems.

URLs are made up of several parts, and always include the scheme/protocol, domain name, and path to the file or resource. They may also include the port, parameters, and anchor:

_Source: What is a URL?_

The domain names of a URL can be broken down further into a subdomain, second-level domain, and top-level domain.

For example, the freeCodeCamp forum is located at https://forum.freecodecamp.org/.

In this URL, forum is the subdomain, freecodecamp is the second-level domain, and .org is the top-level domain.

The subdomain is a division of the whole domain, and is a bit like a room in a house. Similar to how a bedroom and bathroom serve totally different purposes, different websites or applications can exist on each subdomain. Common subdomains include www, blog, shop, and m for the mobile version of a site.

The second-level domain is the name of your website or resource, and is how people will find it online. Second-level domains are usually the names of people, companies, or organizations.

The top-level domain, or TLD, can give people some information about your company or organization. For example, .com is a generic TLD that can be used for everything from personal sites to online stores. Meanwhile, .org is meant for nonprofit organizations and communities.

These days there are many different TLDs like .dev, .tech, and .rocks.

In this PHP-focused article, we will explore how to get the URL of the current page in the PHP programming language.

You may want to get the current page URL for the following reasons:

• Building internal links
• Using filters with GET requests, for example, currentURL.com?myFilterParameter=Food

PHP actually stores lots of useful information as users navigate your web application. One of these is, of course, the current URL.

PHP stores these pieces of useful information in its array of super-global variables.

What are Superglobals?

Superglobals are already defined variables by the PHP engine which can be used in any kind of scope. They are readily available at any one time.

There are many of these superglobals, but the one we are interested in is the $_SERVER superglobal.

The $_SERVER Superglobal

The $_SERVER superglobal variable has many properties that are accessible with an associative style index.

Some of the values we can access include:

• HTTP_USER_AGENT
• HTTP_HOST
• HTTP_ACCEPT_ENCODING
• HTTP_ACCEPT

You can see more of these indicies in the PHP documentation here.

So, how do we get the full URL?

With the above points on superglobals and the $_SERVER superglobal in mind, we can go ahead and get the current page's URL.

In the following screenshot, I've rendered a PHP application in a local environment in a page named "home."

The URL is http://localhost/home.

In the code base of this page, I'm going to use the $_SERVER variable.

With this variable, we will have to use 2 separate indices to get each part of the current page's URL. The first part will be the host, localhost, and the second part will be the page name, home.

The first index we will use is HTTP_HOST - The current web address host, for example localhost, or example.com

The second is REQUEST_URI which will give us the part of the URL after the host, so this is anything after localhost or example.com

Let's see this in action:

$currentPageUrl = 'http://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];


echo "Current page URL " . $currentPageUrl;

Output

And that is it - pretty straightforward!

Summary

The $_SERVER superglobal variable stores a lot of vital information for modern day use-cases. As we've discovered in this instance, getting the current page's URL is made simple with the ability to access this specific variable.

It's worth checking out the documentation to see what other indices are available, though, as it's good to have in mind how helpful this variable can be.

I hope you enjoyed this article! If you did, feel free to check out my blog, https://www.codewall.co.uk/

Imagine you have your images stored in a directory next to a component like this:

/src
  /components
    - component1
    - component2
/img
  - img1
  - img2

And you're trying to access the images in the /img directory from component2:

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom'
import { useTransition, animated, config } from "react-spring";
import imgArr from './images';
import '../App.css';

const Slideshow = () => {
  const [index, set] = useState(0)
  const transitions = useTransition(imgArr[index], item => item.id, {
    from: { opacity: 0 },
    enter: {opacity: 1 },
    leave: { opacity: 0 },
    config: config.molasses,
  })
  useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), [])
  return transitions.map(({ item, props, key }) => (
    <animated.div
      key={key}
      className="bg"
      style={{ ...props, slideshowContainerStyle}}
    >
      <img className="img" src={require(item.url)} alt=""/>
    </animated.div>
  ))
}

const slideshowContainerStyle = {
 width: '80%',
 height: '300px'
}


export default Slideshow;

You've tried the paths ../img/img1.jpg and ..img/img1.jpg, but get Error: Cannot find module '<path>' .

So what's going on here?

A little about create-react-app

Like most people, you probably used create-react-app to bootstrap your project.

In that case, using relative paths can be a bit tricky because create-react-app builds the HTML, CSS, and JavaScript files to an output folder:

/public
  - index.html
  - bundle.js
  - style.css

There are a number of ways to use images with create-react-app, but one of the easiest is to include your images into /public. When your project is built, /public serves as the root directory.

You can read more about adding images or other assets in the Create React App docs.

Importing images

If you took a look at the docs, you'll notice that the code includes import statements to load assets like images and fonts.

Importing is useful when your asset, in this case an image, is in the same directory or near the component that uses it, and won't be used anywhere else. For example, if you have an input component with buttons that use SVGs for thumbs up and thumbs down icons.

A bit advantage of using import is that it will throw an error during build time if there's a typo. This sort of checking helps ensure users won't see a broken image that slipped by.

There are only certain characters that are allowed in the URL string, alphabetic characters, numerals, and a few characters ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # that can have special meanings.

Reserved Characters

Encoding

Any character that is not an alphabetic character, a number, or a reserved character being used needs to be encoded.

URLs use the ASCII (“American Standard Code for Information Interchange”) character-set and so encoding must be to a valid ASCII format.

There are functions in most web languages to do this encoding for you, for example in JavaScript encodeURI() and in PHP rawurlencode().

Example:

encodeURI(Free Code Camp);
// Free%20Code%20Camp

In this article, I want my readers to get a picture of a very basic concept of the web world. Previously, I've written articles on the fancy stuff of today’s market, i.e. Angular journey, basics of react, etc. But, today, I want my readers to get into the journey which they encounter at first when they hit any URL.

As the topic is self explanatory - when we hit any URL then what happens? - let’s start!

Before discussing what happens after hitting the URL, we must go through what a URL actually is, and what different parts of the URL mean - right? Without wasting any time, let’s understand more about URLs.

URL – Uniform Resource Locator

If you look into its full form, then it is self explanatory: it has the location of the resources which we want to access. It is an address of the place where we want to go to interact with or find information.

Let's look into your daily life. If you want to visit your friend’s house for some work or to get information, you need their address. The same thing goes here in this big web world: we have to give an address of the website which we want to access. The web site is like the house and the URL is the address.

Anatomy of a URL

Now, we know what a URL is but we still don’t know about the parts of a URL. Let’s go!

Let’s take an example:

https://www.example.com/page1

Here, the first part is ‘https’. This basically tells the browser which protocol it should use. It can be http, https, ftp, etc. A protocol is a set of rules that browser use for communication over the network. 'https' is basically a secure version, i.e. information is exchanged in a secure way.

The second part www.example.com is a domain name. You can relate it to your friend’s house. It is an address of website. We use it to reach to the server (trained computer) that is responsible for serving the information for that website. Wait! You might think, a seconds before I mentioned URL is the address whereas I also mentioned domain name is also address. You may have been confused. Don’t be confused!

Difference between URL and Domain Name

The major difference between both is that the URL is a complete address. URL tells about the method through which information should exchange, the path after reaching that website. Whereas the domain name is part of a URL.

Let’s take our previous example to better understand. You can say that your friend’s house address is a domain name, whereas the URL not only tells the friend’s house address (domain name) but also how you are going to communicate like talking in a separate room (secure) or in front of everyone (info can get leak). It also tells the path, i.e. at which part of the house you will go after entering into the house. Hence, the domain name is part of the URL. A domain name with more information is a URL.

I hope now you are clear with the URL. Let’s get into the next part.

Domain Name

In the previous part, I explained about domain names, but not in depth. I want you to go into it more. As I told you, the Domain name is the address of the website. It gives a unique identity to your website in such a huge web world. No two domain names can be the same BUT - Yes! There is ‘but’. This is not the only definition of a domain name. There is another story behind it. Let’s get into that story.

As we know, when we hit any URL or you can say domain name, then that website gets opened with its content. A server (a trained computer) serves it. We also know that every computer has an IP address which is used for communication over the internet. It is an address as its self explaining ‘IP address’. When we hit any URL, then we are actually hitting the IP address of the computer which is responsible for serving the website content (hosting).

But, now, you might think what the hell...is everything an address? Why does this domain name exist if the IP address is there? Why can’t we use IP address to get content of the website?

Yes! You can use IP addresses to get content of the website but really!.. Would you be able to remember each website’s associated IP address? Obviously not! It’s hard to remember the IP address of every website. That’s why domain names came into the market.

You can relate it to your contact list. You can’t remember every person’s number, but you can remember their name. Same concept applies here as well. You can’t remember those scary IP addresses, but you can easily remember domain names.

This huge amount of data is maintained in a database where the domain name with its IP address is stored. A system that stores domain names with its corresponding IP address is known as DNS (Domain name system) (I believe you must have heard about it).

I think I have discussed enough basics. Now, get a deep dive into the process of when we hit any URL.

DNS lookup to find IP address

After hitting the URL, the first thing that needs to happen is to resolve IP address associated with the domain name. DNS helps in resolving this. DNS is like a phone book and helps us to provide the IP address that is associated with the domain name just like our phone book gives a mobile number which is associated with the person’s name.

This is the overview, but there are four layers through which this domain name query goes through. Let’s understand the steps:

1. After hitting the URL, the browser cache is checked. As browser maintains its DNS records for some amount of time for the websites you have visited earlier. Hence, firstly, DNS query runs here to find the IP address associated with the domain name.

2. The second place where DNS query runs in OS cache followed by router cache.

3. If in the above steps, a DNS query does not get resolved, then it takes the help of resolver server. Resolver server is nothing but your ISP (Internet service provider). The query is sent to ISP where DNS query runs in ISP cache.

   4. If in 3rd steps as well, no results found, then request sends to top or root server of the DNS hierarchy. There it never happens that it says no results found, but actually it tells, from where this information you can get. If you are searching IP address of the top level domain (.com,.net,.Gov,. org). It tells the resolver server to search TLD server (Top level domain).

4. Now, resolver asks TLD server to give IP address of our domain name. TLD stores address information of domain name. It tells the resolver to ask it to Authoritative Name server.

5. The authoritative name server is responsible for knowing everything about the domain name. Finally, resolver (ISP) gets the IP address associated with the domain name and sends it back to the browser.

After getting an IP address, resolver stores it in its cache so that next time, if the same query comes then it does not have to go to all these steps again. It can now provide IP address from their cache.

This is all about the steps that is followed to resolve IP address that is associated with the domain name. Have a look below to better understand:

TCP connection initiates with the server by Browser

Once the IP address of the computer (where your website information is there) is found, it initiates connection with it. To communicate over the network, internet protocol is followed. TCP/IP is most common protocol. A connection is built between two using a process called ‘TCP 3-way handshake’. Let’s understand the process in brief:

1. A client computer sends a SYN message means, whether second computer is open for new connection or not.

2. Then another computer, if open for new connection, it sends acknowledge message with SYN message as well.

3. After this, first computer receives its message and acknowledge by sending an ACK message.

To better understand, look below diagram.

Communication Starts (Request Response Process)

Finally, the connection is built between client and server. Now, they both can communicate with each other and share information. After successful connection, browser (client) sends a request to a server that I want this content. The server knows everything of what response it should send for every request. Hence, the server responds back. This response contains every information that you requested like web page, status-code, cache-control, etc. Now, the browser renders the content that has been requested.

That’s it! All the above process happens when we hit any URL. Although this lengthy process takes less than seconds to complete. This is the answer to your question ‘what happens when we hit any URL in a browser?’

Thanks for reading!