Creating a Link-Sharing Site Part 0

Introduction

Welcome to a new series of blog posts. In this series I will be sharing my progress on a new project. What's the new project? I want to create a link-sharing site similar to HackerNews but with the flexibility of StackExchange.
Read on for more details.

Motivation - Why am I doing this?

As an avid reader of HackerNews one day I started to wonder if this kind of site exists in other domains. I knew that aggregators were popular in areas like finding new music but these tend to be more complex.

The thing I love about HackerNews is the organic growth of different links. When a link is shared on the site it is not surrounded by some long description or backstory. Just the title of the page. This means that the quality of the link is evaluated by readers based on the content rather than how well the poster is able to dress up the page with a misleading or exaggerating description.

As a developer, I also spend a lot of time on another site, StackOverflow or more generally, StackExchange. One interesting thing I find about StackExchange is the way that it has taken a concept which works in separate domains and implemented it across them separately. For example, as well as StackOverflow for programming, there is also english.stackexchange.com and mathematics.stackexchange.com for English and maths respectively. See a full list here: https://stackexchange.com/sites.

Considering these two sites I spend an awful lot of time on, I thought I would try to create a network of link sharing sites across different domains.

Showing My Work

Recently, I finished reading 'Show Your Work!' by Austin Kleon (and I highly recommend it)! To complement this, I recently listened to a great Indie Hackers podcast with Josh Pigford. Both of these inspired me to get into the habit of sharing my work. My blog itself is still in its infancy and I am trying to build up a habit of posting more regularly both as a good incentive to publicise work I produce and to track my learning with time.

Because of this I plan to blog my progress on this project and will be open to any feedback. If you want to keep updated with my progress, I strongly recommend signing up to my mailing list on my blog here.

Technology - How am I going to build this thing?

I have recently been picking up some experience using lit and have found that it provides a very quick and easy way to get going with web components. This is about all the thinking I wanted to do at this point. Too often I get bogged down planning and deciding on frameworks, languages etc. This time I wouldn't let that happen. For better or for worse...

One thing I had heard of but not had the chance to use was the Lit element JavaScript project template. So this is going to act as the baseline for the project.

Here's the first element I created which is incredibly basic. LinkBox refers to a box or card containing the link someone has shared.

import {LitElement, html} from 'lit';

/**
 * A small box containing a link and a title.
 */
export class LinkBox extends LitElement {

  static get properties() {
    return {
      /**
       * The title of the link.
       * @type {string}
       */
      name: {type: String},

      /**
       * The link itself.
       * @type {string}
       */
      link: {type: String},
    };
  }

  constructor() {
    super();
  }

  render() {
    return html`
      <a href=${this.link}><sl-button>${this.name}</sl-button></a>
    `;
  }
}

window.customElements.define('ls-link-box', LinkBox);

Keep in Touch

For now, this is where I am. I aim to post roughly once a week with updates on my progress. I hope you enjoyed reading and wish me luck! As mentioned earlier, if you want to get updates straight to your inbox, consider following me or checking out the original article and joining my mailing list on my blog here.

Happy hacking!