Forem: Adam Hawley

Connecting to Firestore - Link-Sharing Site Part 3

Adam Hawley — Tue, 26 Apr 2022 21:08:25 +0000

New to this series? Start here!

Introduction

Thanks for taking the time to join me on my journey to create a new link-sharing site. In the last post I talked about how I initialised Firebase. Today I get to talk about how I hooked the web app up to work with Firebase's offerings. In particular I will cover how I connected Firestore and gave users a way to submit and view links stored on it.

Handling Authentication

In the previous post, I also described how I used the Firebase SDK function createUserWithEmailAndPassword() to connect a sign-up form to Firebase Authentication.

Even after signing up, I presumed that I would first have to create the account and then call a sign in function separately. However the Firebase SDK makes it easier than that! If an account is successfully created then the user is automatically signed in.

Web Component Redirects

So, a user has created an account and been signed in. At this point, most sites I know redirect the user back to their previous page or another specific page. To simplify things, I opted to redirect the user to the 'browse' page whenever
they have signed in. This page is the page where users can 'browse' all of the recently added links, it also acts as the home page (see below).

Initially, createAccount() looked like this:

createAccount(email, password) {
  const auth = getAuth();
  createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
      const user = userCredential.user;
  })
}

At first, I called createAccount() and then immediately redirected the user to a new page. Without waiting for the response to createUserWithEmailAndPassword(). I quickly realised this was an issue, whether the account creation was successful or not was not important. If a user clicked the 'submit' button in the sign-up form, they were getting redirected, authenticated or not.

However, if an account is not created due to an error such as an invalid email or password being used, then the user interface should give the user an opportunity to amend their form entries. To get around this, I wrapped my createAccount() logic in a Promise:

createAccount(email, password) {
  return new Promise ((resolve, reject) => {
    const auth = getAuth()
    createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
        this.user = userCredential.user;
        resolve()
    })
  })
}

As a relative-newcomer to JavaScript, I am still trying to get to grips with everything related to async, await, Promise etc. So for fellow newcomers, I recently published a guide on getting started with JavaScript Promises.

Signing In

Users could create accounts, hurrah! But they couldn't yet sign in without making a new account every time. Doesn't sound too user friendly to me...

Keeping it as simple as possible, I put together a sign in page which looked exactly the same as the sign up page. The only difference being what went on when the user hit 'submit'. My signIn() method is almost identical to createAccount(). The difference being that signIn() uses
signInWithEmailAndPassword() rather than the aforementioned createUserWithEmailAndPassword().

Working Sign-in Page

Now it's time to celebrate! Working authentication hooked up to Firestore. Users can now create accounts on the site and sign-in later.

Firestore

Adding Links

Onto the content of the site. We have already seen how users will view links on the browse page in the web component redirects section and in part 1 of the series, I showed how I created a page for submitting links but mentioned that the submit button did nothing at all. Time for that to change!

I started by creating an event handler submitLink to handle when the submit button in the form is pressed:

get _form () {
  return this.renderRoot.querySelector('#submit-form')
}

async submitLink (e) {
  let userTitle = this._form.querySelector('#title-input').value
  let userLink = this._form.querySelector('#link-input').value
  const db = getFirestore(this.app);
  let col = collection(db, 'links')
  await addDoc(col, {
    link: userLink,
    title: userTitle
  })

  const event = new CustomEvent('submitted-link')
  this.dispatchEvent(event)
}

I also amended the submit button in the template to use the new submitLink handler:

<sl-button @click=${this.submitLink}>Submit</sl-button>

On the Firebase side of things, I start by using
getFirestore(). I pass this.app to getFirestore() where this.app is a property passed to the web component equal to the output of initializeApp(). The aim of this first line is to initialise a variable with access to the database.

Then I define col, a variable with access to the specific collection within the database:

let col = collection(db, 'links')

The final step is to add the document containing the link to the collection:

await addDoc(col, {
  link: userLink,
  title: userTitle
})

If this operation is successful then we have added the link to the database! Following this, I use the same strategy as described earlier to redirect the user to a new page by dispatching a custom event.

Reading Links

Luckily reading from Firestore is very similar to writing to it. Here are the lines I use to get all of the available links from the links collection:

const db = getFirestore(this.app)
let col = collection(db, 'links')
const querySnapshot = await getDocs(col)
querySnapshot.forEach((doc) => {
  this.linkBoxes.push(doc.data())
})

The first two lines are exactly the same as writing and follow exactly what I described in the previous part. Things change a little in the third line.

A querySnapshot contains the results of a query. By using getDocs() on the whole collection col, I am asking to return all of the documents in the collection into the variable querySnapshot.

Once the query is resolved, I loop through each document and add them to the list of links shown on the browse page.

Note: to access the contents of each document you have to iterate through each and call its .data() method.

That's all there is to it! Link submission works and now the home page is populated using links properly submitted by the user(s).

Conclusion

In this update I have discussed:

How I used JavaScript promises to perform redirects
How the sign-in page came to existence
How users gained the ability to submit links
How the home page dynamically loads links from Firestore

I sincerely hope you have enjoyed this update. If you would like to hear when I publish more updates, follow me here on Dev.to or follow me on Twitter.

Get Started with JavaScript Promises (in Under 2 Minutes)

Adam Hawley — Tue, 12 Apr 2022 19:48:48 +0000

Intro

Welcome to an extremely brief introduction to JavaScript Promises. After getting to grips with Promises myself I thought I would share the essentials that I needed to put them into practice.

Basics of JS Promises

Promises can be defined with the following recipe:

function function1 () {
  return new Promise ((resolve, reject) => {
    try {
      doSomeStuff()
      resolve()
    } catch (err) {
      reject(err) 
    }
  })
}

resolve() should be called if the operation associated with the Promise has been successful. reject() should be called if the Promise could not be resolved, maybe there was some sort of problem when trying to perform the associated operation.

The caller function then has the option to asynchronously wait for the Promise to resolve using await or the then() method of Promises. To use await, declare the entire function as asynchronous using the async keyword. Here are examples of both:

async function callerFunc1() {
  // Use 'await'
  await function1()
}

function callerFunc2() {
  // Use '.then()'
  function1().then(() => {
    doSomethingAfterwards() 
  })
}

Two extra things about Promise.then(). Firstly, we can chain .then() statements together to make something that operates like so:

function callerFunc3() {
  function1.then(() => {
    console.log('First thing finished')
  }).then(() => {
    console.log('Second thing finished')
  })
}

Secondly, then() can actually take two arguments: one in case the Promise resolves and another to handle the case when the Promise rejects.

function callerFunc4() {
  function1.then(() => {
    console.log('Everything went to plan!')
  }, () => {
    console.log('The Promise rejected :(')
  })
}

If you want to see these examples in action, check out this StackBlitz

Conclusion

Hopefully you found this helpful, to get updates as soon as I release helpful guides such as this follow me on Twitter or Dev!

Initialising a Firebase App

Adam Hawley — Sun, 20 Mar 2022 21:50:37 +0000

Introduction

Welcome to the latest update in the "Creating a Link-Sharing Website" series where I try to build a StackExchange and HackerNews crossover. Before this update, I had a couple of working UI elements and (hopefully) a cool idea. See my last post to see exactly how I got started building out the first core UI elements.

If you want to jump straight to reading how I got started with Firebase, click here.

I concluded the last post by discussing how my top priority was to consider database solutions. This is because, at that point, a user could interact with the UI and 'submit' links to the website but with no real effect. The UI would simply gobble up the form entries and do nothing with them. Content generation that doesn't involve generating content? Sounds pretty redundant to me.

Deciding on a Storage Solution

So I needed a way to store the links users would be uploading to the website. Naturally, I started to consider a number of database solutions I have used in the past.

MongoDB: a document-based NoSQL database that I have extensive prior experience with.
Firebase: actually a whole suite of services provided by Google. It includes, but is not limited to, two different database offerings, an authentication service and hosting.
ElasticSearch: in the past, I have worked with ElasticSearch as a database for storing text data. Because of this, I know that it has extremely powerful search and query capabilities.

When evaluating the different choices I had to think about what I was going to be storing. URLs and the title's of the pages. Text. The basis of the site is for people to share website links. If I want people to be able to share and view
them, I have to store them somewhere. Specifically, my plan is to store simple objects in the form:

{
  url: "https://adamjhawley.com/post/2022-02-07-using-git-rebase-to-perfect-commits/",
  title: "Using 'git rebase' to Perfect Commits"
}

Even though MongoDB would definitely be up to the job if I had opted to select it, I ultimately disregarded it. It was going to do exactly what it said on the tin; no more, no less. It would serve as a document-based database with developer-friendly APIs. So this would have definitely been my choice if another wasn't so tempting...

Despite the fact that I had experience using ElasticSearch to quickly navigate mountains of text data, I had an important realisation. I was not going to be doing any complicated queries. So what's the point? I had to stop myself from
dodging Occam's razor and consider something else.

It is important to me to keep the website true to itself. I know from experience that I, like many other developers, am easily distracted by the thought of adding cool new features, insights and analytics to websites long before they are necessary.

Now onto Firebase. As I mentioned earlier, Firebase is rather a whole suite of services provided by Google. Apart from a storage solution, Firebase offers hosting, authentication and several other services.

Initially it might appear as if I am going against what I just said with regards to keeping things as simple as possible. However, there is a key difference between the extra features of Elasticsearch and the other services offered by Firebase.

Solutions for hosting and authentication are things I would need to even get the base functionality of the site off the ground. For example, without a way to host the site, there is no way for users to reach it. Of course, I could handle
this myself but that would involve taking on a considerably large amount of work. Remember, at this point, I am focusing on an MVP. Furthermore, I am considering making the website open source as a template for other developers to use. By using Firebase it means that it would be much easier for someone else to pick up the project. All they need is a Google account!

Firebase

Initialising a Firebase Project

So how did I actually get started? The first thing I did was turn to the Firebase web documentation on getting started. From there I followed the following steps:

Created a Firebase project using the Firebase console
Installed the Firebase CLI tools: npm install -g firebase-tools
Logged in using Firebase CLI: firebase login
Initialised the project as a Firebase app: firebase init with the following configuration:

Note: during the firebase init dialogue you might get an error similar to the following. Don't panic. For some reason, Google requires that users create the Firestore instance in the UI before it can be accessed with CLI tools. Simply follow the URL in the error and create a Firebase instance in your browser.

Error: It looks like you haven't used Cloud Firestore in this project before. Go
to https://console.firebase.google.com/project/<PROJECT-ID>/firestore to
create your Cloud Firestore database.

After this, Firebase CLI automatically generates a handful of config files which it will use for deploying to Firebase, configuring storage etc.

In order to submit links to Firestore (the Firebase storage service I have opted for), it requires a working authentication system. By default, Firestore does not allow for unrestricted access to the database. Besides, I plan to limit users to only be able to post links if they are signed in to an account. So authentication is a necessary step. So I decided it was best to start with it rather than working around it and then having to come back and rework in future.

Problems with FirebaseUI

During the process of setting up the application to use Firebase authentication, I found helpful documentation on how to use a pre-built UI for authentication which apparently allows for:

Multiple authentication providers (email/password, Google, Github etc.)

Account linking

Customisation

One-tap sign-up and automatic sign-in

Localised UI

This all sounded great. I tried to integrate this into the application but ran into an issue trying to import the package.

In the project, I use ES module imports. That is, imports in the format:

import x from 'npm-module/app';

For some reason, this doesn't seem to be supported by the FirebaseUI. This GitHub issue has been open since 2020 with no clear progress seemingly made.

After reading through the issue thread I decided to abandon using the FirebaseUI and build my own authentication UI.

Creating an Sign-Up Page

Using shoelace.style's helpful <sl-input> elements with built-in input validation for emails, I put together a sign-up page with a component with the following render functions:


get _form () {
  return this.renderRoot.querySelector('#signupform')
}

handleSubmit (event) {
  let email = this._form.querySelector('#email').value
  let password = this._form.querySelector('#password').value
  this.createAccount(email, password)
  this.signIn(email, password)
}

render() {
  return html`
      <div id="signupform">
          <sl-input id="email" label="Email" type="email" placeholder="Enter email here" clearable></sl-input>
          <sl-input id="password" label="Password" type="password" toggle-password placeholder="Enter password here"></sl-input>
          <br>
          <sl-button @click=${this.handleSubmit}>Submit</sl-button>
      </div>
  `;
}

Where createAccount() and signIn() use the Firebase authentication SDK. For example:

createAccount(email, password) {
  const auth = getAuth();
  createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
      const user = userCredential.user;
  })
}

A couple of interesting things here:

I linked handleSubmit() to the click event of the <sl-button> element using @click=${this.handleSubmit}. For more information, see the lit documentation on adding event listeners in the element template.
_form acts as a way to make the child <div> element accessible throughout the component and to parent components. This technique is also documented in the lit documentation. See accessing nodes in the shadow DOM.

Conclusion

At the end of this update I have a working way for users to sign up! I had hoped to have a working storage solution by this point but I am happy with the progress I have made. I think the time I have invested into setting up Firebase will pay dividends in future when it comes to integrating with other services.

Only time will tell! Make sure you follow me to find out! Or catch up on my personal site where these blogs are posted first: adamjhawley.com

Creating a Link-Sharing Site Part 1

Adam Hawley — Fri, 04 Mar 2022 22:41:36 +0000

Introduction

Welcome to the first update on my journey to creating a link-sharing site. If you are interested in what I am doing and why I am doing it check out the introduction to the series. And if you want to get notified when I post new updates, follow me on Twitter or sign up to my mailing list.

I have prioritised getting something functional. This means that I haven't exactly created anything beautiful yet. But I'm sure that will be very obvious.

Building the Basics

I broke down my requirements based on the pages and functionality I needed to create to get an MVP (minimum viable product) up and running.

A Page for Consuming

Link-sharing websites are, simply put, a platform for facilitating content consumption. That is, the 'content creation' side of this website is limited to a user providing a link and a title. At least for the time being... Furthermore, I expect the majority of users to spend much more time consuming content rather than producing.

Therefore, I need a way for users to find content to consume! This page will probably act as the home page for the site.

My current intention is for this page to simply contain a list of cards where each one contains just the title of the link.

A Page for Producing

Then again, what's the point in a page for consuming content if there is no content to be consumed! Sounds like I can't get away with not building a page for submitting links to the site.

So, as I said, I went ahead and made it as minimal as possible.

Now it's worth noting that for the time being, that 'Submit' button sends the link nowhere. My plan is to hook this up to a database which will contain all of the links on the site.

Conclusion

That's all I have for this update. My main priority in upcoming updates will be hooking up the site to use a persistent database to store the links. It has been great fun getting started with this project and I am very excited to see where it can go!

I know that I am new to the concept of 'sharing your work' but I know consistency is key so stay tuned for another post coming soon!

If you enjoyed this post then please consider following me on dev.to or on Twitter!

Using 'git rebase' to Perfect Commits

Adam Hawley — Mon, 21 Feb 2022 16:00:17 +0000

I have long tried to get into the good habit of committing as I develop. However, I often fell into the same scenario. On commit №4, I would realise that I should have worked something differently in commit №2.

Naively, my old approach was a combination of adding extra re-work commits and different forms of git reset. git rebase to the rescue!

The git rebase -i command was everything I believed had to be part of git but didn't know of. The -i flag is the 'interactive' mode of git rebase. Which allows you to choose which commits you want to rebase.

Let's have a look at an example to illustrate:

At this point I made a mistake a couple of commits ago and have even made further changes to some of the bad code I have written as part of future commits.

To go back in time, I use git rebase -i <COMMIT_ID>. Where <COMMIT_ID> is the commit id of a commit BEFORE my mistake.

As shown in the helpful comments, there are many commands I can use for each commit and each one is explained. The commands I use most-frequently are 'edit' and 'reword' ('reword' is for the times when you have a typo in your commit message).

Here we can change pick to e or edit next to our bad commit before saving and closing the file.

Then I can go in and change my mistake. Once the changes are made, I can git commit --amend to fix the commit itself.

Once my initial mistakes have been corrected and git knows about the fixes I can use git rebase --continue. git will now try to apply my old commits (№3 & №4) on top of my fixes.

If there are any conflicts git will let you know. These happen in this case if your fix for the broken code replaced some of the code that you changed in later, good commits.

You should solve the conflicts so that the code is as you would want it at that commit. Importantly, you should stop before using git commit --amend here. git stopped to let you shape the commit in the way you want it and did not apply it yet. This means that to save this rework in the same commit, you should just go straight to git rebase --continue where git will ask you to confirm/edit the commit message.

And there we have it! A clean git history with useful commits. Learning git rebase has truly given me a greater confidence using git and helped increase both my productivity and the quality of my work. I hope this you have managed to learn something too and thanks for reading this far!

To keep in the loop consider following me or signing up to my mailing list on the original post on my blog.

Creating a Link-Sharing Site Part 0

Adam Hawley — Sat, 19 Feb 2022 21:24:35 +0000

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!

Part-of-Speech Tagging Simplified

Adam Hawley — Sat, 17 Oct 2020 08:53:07 +0000

Introduction
Tags
Example
How are POS Tags Assigned

Introduction

Part-of-Speech tagging is a very useful foundation of NLP and deeper NLP concepts. The action involves analysing text and returning the tokens of the text with the appropriate Part-of-Speech (POS) tags.

POS Tags

Read this blog post on my website for a better experience (dev.to please implement markdown tables)!

ADJ: adjective -> super cat
ADP: apposition -> my friend Liam
ADV: adverb -> The boy ran quickly
AUX: auxiliary -> He will make
CCONJ: coordinating conjunction -> this and that
DET: determiner -> the squirrel
INTJ: interjection -> Oi!
NOUN: noun -> the dog
NUM: numeral -> one fork
PART: particle -> not Sam ’s
PRON: pronoun -> he shouts
PROPN: proper noun -> Helsinki is beautiful
PUNCT: punctuation -> Hello , there !
SCONJ: subordinating conjunction -> I do this while they do that
SYM: symbol -> 5 + 10
VERB: verb -> They think that
X: other -> this asd;lfkjasd;flkj

Source: Universal POS tags

Above is a list of the standardised POS tags. You will probably recognise many of them from English class.

Example

Courtesy of Spacy’s visualiser (as always!), below I have included an example where the phrase “This is my house while I live here” has been analysed and POS tags have been assigned. You can see that the tags line up with what would be expected from the list above.

How Are POS Tags Assigned?

There are many different ways that POS Tags are assigned. These methods include dynamic programming algorithms (such as the popular Viterbi algorithm). It is common to see hidden Markov models implemented in POS-tagging algorithms. As with many modern NLP elements, machine learning is now very popular for POS-tagging. In this case, computers analyse corpora of text which has been appropriately tagged already and try to learn how to tag tokens itself.

Named Entity Recognition (NER) Simplified

Adam Hawley — Sat, 12 Sep 2020 21:44:43 +0000

Introduction
Defining Named Entity Recognition
What makes NER Difficult
Current Approaches
Experimenting With NER

Introduction

This blog post is post number two in a series aimed at making Natural Language Processing topics more accessible by abstracting these topics away from mathematics and implementation details.

Defining Named Entity Recognition

Named Entity Recognition (NER) is the detection and labelling of named entities (organisations, people, locations etc.) within a text.

Here is an example of what an NER analysis returns on a given sentence (using spaCy's NER and visualiser):

Tags (labels such as organisation) can vary between different systems and implementations but they will usually include:

ORGanisation
(GPE) Geo-Political Entities
PERSON

Other categories you may encounter include location, money and time.

What Makes NER Difficult?

At first glance, the task can seem very easy. However, after considering a few examples it can equally quickly become clear how the task could be troublesome for a machine.

“First Lady Makes an Appearance at John Smith’s”

Are we discussing the first lady to ever exist or are we talking about the president’s wife here? Is John Smith's a pub, a person's house or something completely different? And, more importantly, how can a computer know?

Approaches to NER

There are several different approaches that people use to meet their NER requirements. Generally, these can be broken down into techniques using statistics (including machine learning) and techniques based on grammar. Obviously most implementations take a combination of both of these approaches.

More grammar-based techniques involve a higher labour cost but see much more accurate results.
Statistical approaches produce slightly less accurate results but can analyse sample sets much quicker. A common bottleneck for statistical approaches is the amount of annotated data (these are sentences like in the picture above which are labelled correctly so that the computer can learn how to label too).

Experimenting with NER

Now that you hopefully have a baseline understanding of what NER is, I could not end this post without suggesting using the NLP package spaCy's NER feature and visualiser (which I even used when making this post)!

You can find an interactive code playground here where you can change anything from the NLP pipeline or just the sentence to analyse.

Word Vectors Simplified

Adam Hawley — Fri, 04 Sep 2020 20:42:06 +0000

Note:
This blog post is based on assignment 1 from the Stanford CS 224N NLP And Deep Learning Course which is available here. I highly recommend this course for people beginning NLP as it is freely available, has great content and is great fun to follow!

Introduction
Word Meaning From Context
Co-occurrence Matrices
Synonyms from Vector Similarity
Using Vector Maths to Find Semantic Relations
Flattening Matrices for Graphical Representation

Introduction

Below I hope to outline the concept of word vectors and to show how useful they can be. With the aim of keeping this concise, I will not be discussing implementation details. However these can be found in the course linked at the beginning of this post.

Word vectors (or word embeddings) are vector representations of the meaning of a given word.

Finding Word Meaning From Surrounding Words

Word vectors commonly rely on the fact that words which are commonly found next or close to other words are usually linguistically related (either syntactically or semantically).

For example, it is natural to think that you would find the word "trombone" in contexts with a musical theme so you could predict other words which might be in the text such as "instrument" or "song". You would probably also say that it is unlikely that you would find the word "kebab" around the word "trombone" because of their very different meanings.

In real NLP practices, many of the words surrounding a word are used to create a mathematical definition of the word. This number of words is commonly referred to as the window.

Here is an example of an active window when our centre word is "snowflakes" and with a window size of 1:

Co-Occurrence Matrices

An easy way to represent how frequently words are in the context of other words is to use a co-occurrence matrix. The simple way to think of a co-occurrence matrix is that it is a table where the values are counters of how many times two words co-occur!

"the snowflakes fall from above"
"some raindrops fall from above"

Given the sentences above with a window size 1, we would get the following co-occurrence matrix:

Synonyms from Vector Similarity

Once you have the vector representations of each word calculated, you effectively have vector definitions for each word. It turns out that you can use vector calculations to interact with these representations. For example, many people learn how to find angles between vectors using cosine similarity.

cos(\theta) = \frac{\mathbf{A \cdot B}}{\Vert A \Vert \Vert B \Vert}

The more similar the two vectors, the more closely related the two words are likely to be in meaning.

Using Vector Maths to Find Semantic Relations

An interesting find which is discussed in the course practical this is based on, revolves around the difference in vectors and using vector representations to explore relations between words as well as meanings.

One of the examples uses the the roles of King and Queen and gensim's most_similar() to investigate. They show that the difference between man and king should be the same vector difference between queen and woman.
Hence:

w o man + kin g - man = q u ee n

Flattening Matrices for Graphical Representation

Once we have a co-occurrence matrix we can see that the dimensions are too large to display on a standard 2D or 3D graph (and would but much much larger in a practical situation with a corpus consisting of more than 7 words)!

In order to represent our matrix on a graph we will have to shrink the matrix so that we have appropriate x and y coordinates.

A popular way to do this is to use SVD (singular value decomposition) .

Since this post is about keeping it simple I won't go into how SVD works but here is a useful resource from MIT on understanding SVD if you want to delve deeper. The key thing for us is that SVD will help us through dimensionality reduction (going from an n x n matrix to a 2 x n matrix).

Forem: Adam Hawley

Connecting to Firestore - Link-Sharing Site Part 3

Introduction

Handling Authentication

Web Component Redirects

Signing In

Firestore

Adding Links

Reading Links

Conclusion

Get Started with JavaScript Promises (in Under 2 Minutes)

Intro

Basics of JS Promises

Conclusion

Initialising a Firebase App

Introduction

Deciding on a Storage Solution

Firebase

Initialising a Firebase Project

Problems with FirebaseUI

Creating an Sign-Up Page

Conclusion

Creating a Link-Sharing Site Part 1

Introduction

Building the Basics

A Page for Consuming

A Page for Producing

Conclusion

Using 'git rebase' to Perfect Commits

Creating a Link-Sharing Site Part 0

Introduction

Motivation - Why am I doing this?

Showing My Work

Technology - How am I going to build this thing?

Keep in Touch

Part-of-Speech Tagging Simplified

Introduction

POS Tags

Example

How Are POS Tags Assigned?

Named Entity Recognition (NER) Simplified

Introduction

Defining Named Entity Recognition

What Makes NER Difficult?

Approaches to NER

Experimenting with NER

Word Vectors Simplified

Contents

Introduction

Finding Word Meaning From Surrounding Words

Co-Occurrence Matrices

Synonyms from Vector Similarity

Using Vector Maths to Find Semantic Relations

Flattening Matrices for Graphical Representation