# Bring Wikipedia page previews to the web: part 1 - implementing the frontend

## Why?

Wikipedia's page previews are so useful, instead of openings tons of new tabs while researching something, you can find a summary of the topic by simply hovering over the link, in this blog post we will be trying to achieve something similar but on our own website.

<Image
  image="image2-1.png"
  alt="An example of the Wikipedia page preview"
  width={1169}
  height={608}
  legend
/>

## How?

This project consists of two parts:

- **The frontend**: a javascript library that will be loaded in our website
- **Crawler service**: a REST API that will navigate to the requested website and send back some useful metadata as well as a screenshot

<p>
  <TLDR /> Here is an amazing draw that illustrates the project idea:
</p>

<Image
  image="image2-2.png"
  alt="Architecture illustration"
  width={1084}
  height={1065}
  small
/>

## Demo

This is an example of what the final project will look like:

<LinkPreview />

## Implementation

### The links preview SDK (frontend)

#### Preparing the testing data

As we don't have the backend service yet, we can mock the data that we need while working on the frontend side.

Let's take as an example the website ubuntu.com, this is what the backend will return later:

```javascript
const mockData = {
  screenshot:
    "http://localhost:3000/assets/projects/images/ubuntu-screenshot.png",
  metadata: {
    title: "Enterprise Open Source and Linux | Ubuntu",
    description:
      "Ubuntu is the modern, open source operating system on Linux for the enterprise server, desktop, cloud, and IoT.",
    icon: "https://assets.ubuntu.com/v1/49a1a858-favicon-32x32.png",
    url: "https://www.ubuntu.com",
    hostname: "ubuntu.com",
  },
};
```

#### Preparing a testing website

We also need a dummy website where we can test our frontend script, we can simply create an HTML file that look like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test links preview</title>
  </head>
  <body>
    <a href="https://www.ubuntu.com">Ubuntu Linux distribution</a>
    <script src="/links-preview.js"></script>
  </body>
</html>
```

Then serve it from a basic HTTP server with something like this:

```bash
npx serve .
```

#### The Javascript script

Now we are ready to get into the business! we have everything we need to develop the script: `links-preview.js`.

The main tasks of the frontend script are:

1. Scan all the anchor tags in the website (`<a href="..."></a>`)
2. For each scanned element:
   - Get the preview from the backend service (the crawler): we will look into this step in more details later in part 2
   - Setup a listener when the user hover over the element and show the preview UI element on trigger
   - Setup the opposite listenner where it hides the preview popup when the user move the mouse out of the element

For the sake of simplicity we will be looking for all the anchor tag elements without advanced filtering:

```javascript
function selectQueryLinks() {
  return Array.from(document.querySelectorAll("a"));
}
```

We will ask the crawler service (backend) for the data (metadata + screenshot) for each element:

```javascript
const previews = new Map();

async function fetchPreview(url) {
  // skip if already fetched
  if (previews.get(url)) return previews.get(url);
  const response = await fetch("https://localhost:3001/?url=" + url);
  if (!response.ok) {
    throw new Error("Received an error from the server");
  }
  const payload = await response.json();
  previews.set(url, payload);
  return payload;
}
```

Now that we have the necessary tools let's finish the step 2:

```javascript
const elements = selectQueryLinks();

// prefetch all the previews
elements.forEach((element) => {
  const url = element.getAttribute("href");
  fetchPreview(url);
});

// setup listeners
elements.forEach((element) => {
  element.addEventListener("mouseenter", () => showPreview(element));
  element.addEventListener("focus", () => showPreview(element));
  element.addEventListener("mouseleave", () => hidePreview(element));
  element.addEventListener("focusout", () => hidePreview(element));
});
```

As mentioned previously, we need a basic mock data to test the script for the moment, we can set the previews manually:

```javascript
elements.forEach((element) => {
  const url = element.getAttribute("href");

  // temporarily add this line
  previews.set(url, mockData);

  fetchPreview(url);
});
```

The final step on the frontend side is the preview popup, in other words the actual preview that the user will see, to keep it simple and avoid sharing a lot of code in this blog, I've added the final frontend script code along with preview popup in <a href={`${githubLink}/blob/main/demo/link-previews.js`}>this repo</a>.

<TLDR />: You can see the final result live at this <a href="https://link-previews-drab.vercel.app/">
  demo website
</a>.

And voilà, the frontend side is done, in part 2 will look into building a REST service that does some web scrapping to get the metadata along with taking a screenshot of the requested website.


Wikipedia's page previews are awesome, it helps to avoid "open in a new tab" nightmare, let's implement it.

Bring Wikipedia page previews to the web: part 1 - implementing the frontend

# Static websites, simple, yet powerful

## Introduction

When I started learning about how the web works, I learnt that there are 2 types of web servers, a static server where it only serves you the resource that you are asking for and a dynamic server which usually does some logic with your favourite programming language and then returns a result based on the context.

At a first glance, dynamic servers seems to be the solution to all the problems, as they are very flexible. You can do whatever you want, an e-commerce website, a todo app, a blogpost website and you can do it the way you want, with Python, Javascript or even C if you like to pay attention to details 🕵️‍♂️

But why do we mention static servers if we can do everything with dynamic web servers?

Well, usually your website assets (fonts, icons, CSS files, etc ...) tend to be static files that don't change often so it's easier to deploy this type of content with an efficient HTTP server such as NGINX where you usually have a layer of cache, even a CDN if your website is global.

## Minimalism and tech

Recently I got into minimalism which is a way of living with **only** the things that you absolutely need. I tried to relate to minimalism in web development so I thought about trying to replace dynamic servers with something simpler: static servers.

It was quite interesting, technically you can make an e-commerce website, a todo app and of course a blogpost website statically!

The basic idea is to build all the results that our website could send to the clinet a head of time, when the client ask for the resource later, as the results are already built in advance they are sent immediately to the client.

## let's do some practice

### Dynamic server approach

Let's take as example: building a personal blog website. A classic way to build this website is by having a SQL database with an PHP server where you have 2 main views:

- an admin view where once you are logged in you can publish your blogs then it's saved in the relational database
- a public view where people can read your blogs, where on each blog view the server pulls the data from the database and then renders the view.

### Static server approach

A way to have the same result but with only using a static server is to initialise a git in the website folder, have a project structure that looks like this:

```
blogs
	- 20181023.html
	- 20181106.html
	- 20181215.html
js
css
- index.html
- contact.html
- about.html
```

Let's break this solution down:

First the admin page, when you write a new blog post, you can write it in HTML (or convert it to HTML if the blogger doesn't have a technical background). To publish the blog you push your changes to a git server such as Github or Gitlab and then use some amazing static serving platforms such as Netlify and Vercel where they handle the deployment automatically on each push to the git server, you can also have everything locally and upload the new version of the website manually if you want to.

The advantages of using this approach are:

1. Less boiler code to write and maintain
2. Faster performance as blogs are ready and are sent immediately to send to the client
3. Cheaper as you don't need to host a database and your backend code, a free tier subscription at Netlify or Vercel are a perfect solution to get the job done for you personal blog, where they serve your content from a CDN
4. Out of the box working history changes system thanks to git, as all the blog posts are html files
5. Authentication is handled by the git server where you can only push changes if you have rights to the repository.

There are some disadvantages thought:

1. When you have a change to do to all the blogs, a nav button style update for example, you have to do it for every single html file manually, where as with the first approach you can do it simply by making your change to the blog view template
2. That's it! I can't think of other downside to this approach

I hope you can see how simple and yet power full this solution is!

### Getting rid of the disadvantage to make it perfect

Jamstack, an architecture that enables you to build complex problems with static servers.

I envite you to take a look at their website where they explain everything that you may need to develop, maintain and deploy you project with static servers.

The basic idea is to write your website using a programming language and perform a pre-rendering process where you generate all the pages during this process. Once this is done, your site is ready to be served as a bunch of static files that the browser can understand.

There are trendy site generators that have a huge community such as Hugo (Go language), Next.js (based on React.js), Gatsby (also based on React.js) ,Jekyll (Ruby language).

If we make our blog post with on of these site generators for example Next.js, it will look like this:

```
├─ components
│  ├─ Post.jsx             # Post component
│  └─ Footer.jsx           # Footer component
│  └─ Header.jsx           # Header component
├─ pages
│  ├─ index.jsx            # homepage
|  └─ posts                # posts will be available on the route /posts/
|     └─ [slug].jsx        # dynamic page to build posts
└─ blogs
   ├─ hello-world.md
   └─ 20181023.md
```

In this example, we will run the build process using the command:

```bash
# Build all the pages
npm run build
# Run a static HTTP Server that serves the generated content
npm run start
```

If we want to update that button in the navbar (that we had to update in all the HTML pages), we only need to change it in the `Header` component!

## Limitation of a fully static websites

That sounds too good to be true! why big tech companies like Amazon don't adopt such a way of serving content, to serve their products to the clients?

Professional websites like Amazon.com have massive databases with billions of entries (billions of products in case of Amazon), if you try to build a statics HTML file for each one of these entries you will need a lot of disk space to store all those HTML files in.


Over engineering things is a common thing that we think about, but what about if we actually simplify some fundamentals in web.

Blog Posts

Technology

Bring Wikipedia page previews to the web: part 1 - implementing the frontend

Static websites, simple, yet powerful