[Markd](https://markd.co/) is a project I have been working on for Brandon over a [pepwuper.com](https://www.pepwuper.com/) for a while now.



Quite simply its a Chrome Extension and website that allows a user to quickly and easily bookmark people you come across on the internet. In [Brandons own words](https://www.pepwuper.com/markd-pinterest-for-people/):

> I wanted a better way to go about the process. A simple tool that would allow me to save someone into my “book of interesting people”, no matter which site I find them on. I wanted it to be easy with image/description automatically filled out. I wanted it to allow me to save reference images. And I wanted it to have a simple way for me to organise and search those I’ve bookmarked later on.
> And so he contacted me to help him build out such a tool and [Markd](https://markd.co) was born:

[![chrome_2016-09-15_08-36-51](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_08-36-51.png)](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_08-36-51.png)

## The Extension

The tool comes in two parts. Firstly there is a [Chrome Extension](https://chrome.google.com/webstore/detail/markd/beaalofkiocejchbpaocbbjhobmambpp):

[![chrome_2016-09-15_09-03-37](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-03-37.png)](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-03-37.png)

Once installed (and logged in) you can visit any site then just hit the little Markd icon on the browser toolbar:

[![chrome_2016-09-15_09-05-27](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-05-27.png)](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-05-27.png)

This opens a window which auto populates from the page you are on:

[![chrome_2016-09-15_09-08-47](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-08-47.png)](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-08-47.png)

Currently the auto-population only works for a number of the most popular sites sites, namely: "Twitter, Linkedin, Behance, Facebook, Dribble, DeviantArt, Github and ProductHunt", but if it isnt on that list (or even if it is) you can easily edit any part of the Mark before it is saved. Images are scraped from the page and presented in a handy dialog:

[![2016-09-15_09-33-32](https://www.mikecann.co.uk/wp-content/uploads/2016/09/2016-09-15_09-33-32.gif)](https://www.mikecann.co.uk/wp-content/uploads/2016/09/2016-09-15_09-33-32.gif)

## The Website

Once saved you can view and edit your saved marks on Markd.co:

[![chrome_2016-09-15_09-37-52](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-37-52.png)](https://www.mikecann.co.uk/wp-content/uploads/2016/09/chrome_2016-09-15_09-37-52.png)

## The Tech

The two parts (Chrome Extension and website) were built with two different technologies.

### Chrome Extension

I decided to go with [Aurelia](https://aurelia.io/) for the extension. I was wanting to find an excuse to give it a try for a while and this seemed like the perfect opportunity.

Its a framework for web app development from Rob Eisenberg, the same dude that worked on Durandal and Angular before deciding he wanted to go his own direction and create Aurelia.

Much like Angular its a template-based framework like Angular e.g.

[code lang="html"]
<template>

<h1>\${heading}</h1>

<form submit.trigger="addTodo()">
<input type="text" value.bind="todoDescription">
<button type="submit">Add Todo</button>
</form>
</template>
[/code]

You then write a backing "Component" class which implements the "addTodo()" function and provides the "heading" variable etc.

In addition to this it provides many other nice things out of the box such as easy to setup routing and good support for Typescript.

Because it is quite new I did have quite a few setup difficulties, in the end I managed to get it all working and found it a pleasure to use.

### The Website

I wasn't sure which backend tech to use for this, there were many options. In the end I decided to go with .Net (C#) hosted on Azure. Development was "relatively" simple because of the excellent VisualStudio tooling with C#. I did however have some difficulties around providing my own Authentication scheme using Json Web Tokens. In the end I managed to get it working thanks to a number of helpful projects on github.

Azure itself also provided its own share of problems; one such such being it seems to be impossible to handover a resource group to another user. To me this is a pretty common usecase for a freelancer that wants to handover a completed project to a client.

We also ran into the auto-DB backups not actually running for some reason. For all its power, Azure can be a bit of a fickle beast sometimes, in the future I will probably stay away from it.

## Conclusion

[Markd](https://markd.co/) was a great project to work on and im proud of the result and the [client is happy](https://www.pepwuper.com/markd-pinterest-for-people/) which makes me happy. We have a bunch of other features and things we want to add to it but that will have to wait for another blog post, for now tho you can check out the tool for free at:

[https://markd.co/](https://markd.co/)

Let me know what you think in the comments below!

I'm extremely proud to announce the launch of a project I have been working on for quite a while now.

[Printomi](https://www.printomi.com/) is a service for social games that allows players to take snapshots of their worlds and upload them to their own personal gallery. Players can like, comment share and order poster prints of their virtual creations.



The way it works is we provide the game owner with a tiny API that is used to interface with Printomi. The bulk of the Printomi client is downloaded at runtime from the Printomi servers. This is good for two reasons. Firstly by keeping down the size of the code that must be embedded into the game we can keep down the initial load time the player must sit through before they can play the game. Secondly we can upload changes and fixes to Printomi without requiring the game owner to recompile their code.

Once downloaded the printomi client is ready to be be used. In the case of [Gourmet Ranch](https://apps.facebook.com/gourmetranch) a themed button is shown to the player inviting them to click:

[![](/wp-content/uploads/2012/04/btn-to-click.png "btn-to-click")](/wp-content/uploads/2012/04/btn-to-click.png)

Once clicked (or activated by the JavaScript API) the main Printomi window opens:

[![](/wp-content/uploads/2012/04/01.jpg "01")](/wp-content/uploads/2012/04/01.jpg)

The window has controls to zoom in and move the print about allowing the player to get the perfect angle of their world:

[![](/wp-content/uploads/2012/04/02.jpg "02")](/wp-content/uploads/2012/04/02.jpg)

Once happy the player can then saves the print to the printomi servers. While the image is uploading the user can continue to play the game. Once the upload is complete the window is opened once more offering to show the player their print.

[![](/wp-content/uploads/2012/04/03.jpg "03")](/wp-content/uploads/2012/04/03.jpg)

Printomi is tightly integrated with Facebook so that it's as easy as possible for new users to get started:

[![](/wp-content/uploads/2012/04/04.jpg "04")](/wp-content/uploads/2012/04/04.jpg)

Once connected the new print is then available for viewing, sharing, liking, commenting, etc:

[![](/wp-content/uploads/2012/04/05.jpg "05")](/wp-content/uploads/2012/04/05.jpg)

In addition the prints are organised into galleries so that users can browse the uploads of others:

[![](/wp-content/uploads/2012/04/06.jpg "06")](/wp-content/uploads/2012/04/06.jpg)

If a user particularly likes one print then they can order it as a poster:

[![](/wp-content/uploads/2012/04/07.jpg "07")](/wp-content/uploads/2012/04/07.jpg)

Currently we only offer posters to people living in the US however we plan on opening it up to other countries when we can.

To print to such a large poster (24x18" @ 150DPI) and maintain the quality of the final product we must capture a large number of pixels. For example here is a comparison between what a user would see on printomi.com and what we store behind the scenes:

[![](/wp-content/uploads/2012/04/08.jpg "08")](/wp-content/uploads/2012/04/08.jpg)

The technology that lets us capture these large images and store them in a compressed way (to conserve disk space and therefore cost) is quite complex and will have to wait for a later post.

Printomi is currently only available to a small subset of the [Gourmet Ranch](https://apps.facebook.com/gourmetranch) user base but we are performing a steady-rollout to everyone, so if you don't have access to the button in Gourmet Ranch just yet then don't worry it should be available for you soon!

Printomi is a culmination of many many hours of hard work, late nights and stress. But its been worth it! I've had a blast throughout the whole process and am proud of the result. I have also learnt a whole bunch in the process. I have had to work with so many technologies to pull this off, to name a few: AS3, C++, C#, ASP.Net, MySQL, IIS, AWS. I have particularly enjoyed the C# work having largely abandoned the language since my [early work](/posts/windows-7-taskbar-performance-monitor-v0-2/) [with it.](/posts/killer-space-penguins/)

[![](/wp-content/uploads/2012/04/fb1.jpg "fb")](https://www.facebook.com/printomi)[![](/wp-content/uploads/2012/04/tw.jpg "tw")](https://twitter.com/#!/printomi)

If you would like to support me or if you would like to keep up to date with the goings on with [Printomi](https://www.printomi.com/) then you can like us on [Facebook](https://www.facebook.com/printomi) or follow us on [Twitter](https://twitter.com/#!/printomi) :)

## More

If you would like to read more on Printomi then checkout these posts:
[catlist id=27 numberposts=100]

asp.net

asp.net

asp.net