Home > Blog Posts > Dev > Sharing Is Caring

Sharing Is Caring

Tags:

dev
Published: Jul 18 2018

Estimated Read Time:

Backstory

For the last few months I have been sharing memes with my girlfriend. Usually this would mean that I save them in my browser on my computer or phone and then bug her until she looks at them. Occasionally I would forward the links in Slack. This became an issue though as she might skip one or miss a link entirely. We also use Slack for talking and sharing of anything from work to project plans around the house. We could use the search bar but otherwise these notes are lost in the myriad of meme links and images.

Quick Fix

I had been thinking for a while of what would be a decent way to save up links so that she could see them at her leisure. I had thought about using a shared Google account where I could save them as bookmarks. It didn't seem practical though and neither of us is going to want to switch accounts constantly. Another plan might have been to keep a page on my site where I add links as needed. Having to log in and manage content constantly would be a pain too. I was looking for a solution that was more streamlined.

I settled on a new table in my database. I would push links there and display them on the site. The page layout would be simple: link, button to open link in new tab (and remove database entry), and a button to remove from the database (in case she clicked on the link directly). The first part of the task was just simply setting up the table in the database and a way to read/write/delete from it. A few stored procedures and it's done.

The second part was setting up the page. Obviously showing the results on the page wasn't difficult. I used all javascript as I don't need the page to refresh in between removing or viewing entries. One button calls the open link function. Both buttons call the remove entry function. This step was a bit fun. First I send an Ajax call to the controller (basically a REST API). This handles the database removal. The last part clears the div contents, resulting in the entry disappearing from the browser without refreshing.

The last piece was a simple way of adding records. I created a simple script that calls the REST API. Only this time to the 'Add to database' function. I couldn't use Ajax unless I wanted to include jQuery so I just used plain javascript for the call, which wasn't a big deal. On button click or shortcut key the tab URL would be posted to the REST interface where it would be added to the database. Since I am the only one using it I have Chrome using an unpacked extension (via developer mode). The only downside I have so far is that every time I start Chrome I am asked if I want to disable the extension. Much to the dismay of my girlfriend I do not.

I had thought about making the extension read all tabs' URLs but I wanted to be able to have the control over which tab is sent and not have to make sure things are in separate windows. The biggest drawback so far is that I cannot use the extension on my phone currently. I can access those tabs from my desktop though and it's better than using the phone to copy/paste links. It seems silly once I have this all typed up but it has been quite effective for us to share things to be viewed later. It works for her to view the page from any browser or device she likes whenever she would like. On my end it works as a simple button click in my default browser. 

Related Posts:

Previous:
Speech Synthesis Extension

Next:
Are You Still There?