Shortlink - Adding Creature Comforts

Mike Shi
The Commit Message
Published in
3 min readFeb 20, 2017

I’ve been working on Shortlink, a Chrome Extension that allows users to create personal shortlinks for long links that no one can remember. It’s a productivity tool that is supposed to cut down on typing and ease bookmarking of webpages.

Recently I’ve been working on adding “creature comforts”, an initial explanation page of how to use the app and a “404” page if the user enters a shortlink that doesn’t exist.

Welcome Page

The welcome page kills a couple birds with one stone. I needed an initial page to open for technical reasons (making the omnibar recognize m/ as a domain name and not automatically google search it), and also to explain to users that might not be familiar with the concept of shortlinks or bothered to read through any instructions I provide on the Chrome store.

I used gifs cause it seems like gifs are all the rage, and hopefully it makes the instructions more useful/intuitive.

I’m still polishing up this page (wording is hard) before it’s completely ready for users to tread all over it.

404 Page

The 404 page is pretty important to make sure that if the user enters a shortlink with a typo, or just made a random stab at a shortlink, that they will be gracefully handed to a page that will inform them that 1. it’s not a valid shortlink and 2. ways to proceed to get to where they wanted. I recycled (embarrassingly had to copy) most of the code used in the extension flyout, but added a message on top to indicate that the shortlink is invalid, and also auto-inputted their shortlink query into the search box, to help them look for shortlinks that are available.

In the future I hope to make this page more responsive, so that the add new shortlink section would be to the right of the shortlinks search results.

Compatibility

Thanks to one of my friends testing my extension on Windows, it turns out the shortcut I was using (alt + d) was already used in Chrome on windows, so I had to implement a windows specific shortcut (ctrl + shift + s) and write some code to change the shortcut on the welcome page depending on the user’s underlying OS. Thank you beta testers! 💙 I almost missed this one as most of my friends use Macs.

Fin

That’s all I have for now! While I have the majority of the functionality down, I’m still working on adding polish and catching bugs. I hope I can ship this out to the Chrome store soon!

About The Commit Message

The Commit Message is a publication that documents progress on projects. I hope it provides inspiration to those looking to work on their own projects, and authors can get early feedback for features/ideas still in progress.

If you like what you see, help me out with a 💚 below and also hit Follow on this publication. Want to publish here? Feel free to comment below!

--

--