A couple of months ago my [Markd](https://markd.ltd/) co-founder [Brandon](https://www.linkedin.com/in/theBrandonWu) came up with an great idea for a new app, we mulled it over, ran a few experiments and decided to build it, thus [Howdy](https://howdy.page/) was born.



# TLDR;

Howdy is a service for sending short personalized video messages to one another.

<iframe width="853" height="480" src="https://www.youtube.com/embed/WbT3Lkynx9g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

# Concept & Testing

[Brandon](https://www.linkedin.com/in/theBrandonWu) pitched the idea to me a couple of months ago as a service for people who get too many emails. The idea is that those people can sign up to our service, put a link to their own private "page" in their email footer or auto-responder and have others send them personalized video rather than more emails.

One of the key concepts for the service was that the messages should be personal and so shouldn't be pre-recorded, that is they must be recorded on the spot and must be short (no more than 1 minute in length).

[![](./record-60.png)](./record-60.png)

We were unsure if the idea was good enough to spend the time on development so we decided to run some ad tests. This is a process that Brandon knows a great deal about more than me but the general-jist is that you spend a small amount of money on ads that point to a targeted landing page. You then analyse the resulting analytics to determine if the pitch is good and which target market might respond the best.

After we ran a bunch of different ads we had enough data to confirm that the idea was good enough to spend the 3-4 weeks of development on to get an MVP launched.

# Development

Although we tested the idea with ads we knew that we didn't want to spend too long coming up with the "perfect" technical architecture for something that still might not work in practice.

So I chose my preferred weapons of choice at the moment for rapid iteration; a Typescript-React frontend hosted on Netlify with Postgres-Node backend hosted on Heroku.

[![](./heroku.png)](./heroku.png)

Development was swift and within a week or so I had a working prototype up on our "staging" server where we could send messages to each other.

We decided that for this product we wanted to have payments in from the beginning. We chose Stripe as our payments platform and it took me a week or so to get that implemented into the app with tiered subscription levels. I hadn't used Stripe before so it took me longer than I would have liked but its a really nice API and platform so I think we will definitely use it again for other projects.

[![](./sub.png)](./sub.png)

We spent another week or two polishing, adding some extra features and making sure everything worked on mobile.

One of the trickiest hurdles was (and usually is these days) the lagging support for modern web technologies by Apple on the Safari browser. We use WebRTC to record video from the user's webcam which we then stream to S3, then do some processing on our servers before delivering to the user.

Unfortunately WebRTC isnt supported on Safari yet so as a workaround we implemented a input-file-picker for video on iOS. This works okay and doesnt allow users to select a pre-recorded video from their camera-roll thankfully but it would be nice if we had a unified video recording system.

[![](./ios.png)](./ios.png)

# Conclusion

Its still very early days for the project but we have had a number of signups already and some messages sent. We are still unsure if the service will work or not but its a positive sign that while we were developing the large company Typeform released a very similar product named [VideoAsk](https://www.videoask.com/) although competition might seem bad, to us it validates the concept.

Im happy with the amount of time we have spend on it relative to the potential for the project. Im really happy that we managed to get the payments system in from the start too and we definitely learnt a whole bunch from working with the excellent Strip API. Theres definitely a ton more we can do but its a good start.

If you would like to check out Howdy head over to [https://howdy.page](https://howdy.page) and signup for free now and tell your friends! :)

Its been almost 2 years since I had to change anything with my blog but unfortunately 2 years is a long time in web development, and my blog needed some love.



# The Problem

So a few days ago I sat down to write a post on how we had just converted the entire backend of Markd over from Parse to GraphQL. I had recently upgraded my machine and thus I checked out the source from the [repo](https://github.com/mikecann/mikecann.blog) and started to build.

To my incredible frustration, no matter what I did, I couldn't get the project t build. I spent 2 hours wrestling with npm, hexo, gulp, grunt, saas, node-gyp and windows native compilation. Eventually I threw my hands in the air and decided enough was enough. Im just going to rebuild the site myself so I know exactly how everything works.

# Gatsby

I knew from my [last migration](http://mikecann.blog/blog/the-static-blog) that the key to a good performing blog was a staticly generated site. With that in mind I had heard much about [GatsbyJs](https://www.gatsbyjs.org/) the static site generator with a large following and so I decided to give it a shot.

One of the awesome things about Gatsby is the documentation is very thorough and there are plenty of third party tutorials so I found it pretty easy to do just about everything that I needed to do. 

I replicated pretty much everything from my old hexo-based blog and added a few other nice things.

I love it that my site is now all written in Typescript and React so I can very easily create custom components and things such as the Algolia powered search feature (see top right of this page).

# Conclusion

There are definitely going to be some minor things not working so if you see something please do contact me and let me know.

For too long I have suffered from a slow blog. Im currently inbetween project so I decided it was finally time to change that.



For many years https://mikecann.blog has been a Wordpress blog. This has suited me just fine up till now. Its flexible and simple enough for me to chuck up new posts with ease. Infact it has served me so well that over the [14 years](/all-archives/) of operation I now have over 520 blog posts.

The performance of the blog however never was particularly great. I tried experimenting with a number of caching plugins over the years but none really helped... but it was just about good enough for what I needed.

The performace really started to become an issue however when I moved to Australia. The issue is that the servers hosting the wordpress blog are all in the UK so the further away you are from there, the slower things got. So if you are Perth Australia, it would take 20 seconds for the homepage of mikecann.blog to load..

[![](./chrome_2017-10-31_10-26-13.png)](./chrome_2017-10-31_10-26-13.png)

I put up with this for a while but I decided, its 2017 and I am kind of jealous of the speed of all these "minimal" blogs on Medium and Ghost, so I really should do something about it.

The key to getting lightning performanmce I knew, was to get things on a CDN. The first step in making this possible was to ditch Wordpress and go with a static site generator, that way I could avoid all those costly round-trips back to the UK by hosting everything on a CDN.

There are lots and lots of options for static site generators out there and to be honest I didn't do a huge amount of research before I stumbled across [Hexo](https://hexo.io/).

Hexo is a Node based static site generator. I chose it over the others because im really familiar with node and thus if I got into trouble I should be able to dive into the source and see whats going on.

I also chose Hexo for its large number of existing [plugins](https://hexo.io/plugins/) and [themes](https://hexo.io/themes/), many of the other generators dont have these so I would have to code up many of these features myself.

With that in mind, I grabbed the [wordpress migrator plugin](https://github.com/hexojs/hexo-migrator-wordpress) and the [Tranquilpeak theme](https://github.com/LouisBarranqueiro/tranquilpeak-hexo-theme) plus a few personalization tweaks and generated this site.

Once done I uploaded it all to AWS S3, then put CloudFront CDN infront of it and tada! Super Fast Blog!

Im really happy with the end result, page navigation is super fast. I have [archives](/all-archives/), [tags](/all-tags/), [rss](/atom.xml) and even [search](/#search) powered by Algolia!

All the source for the blog can also be found on github: https://github.com/mikecann/mikecann.blog

There are a few minor niggles such as post creation is not quite a nice as wordpress (but it looks like I may be able to [solve that](https://github.com/netlify/netlify-cms) in the future) and its quite slow generating a blog of this size (but a CI should be able to take that pain away when I get time).

Oh by the way you still want to access the old site at http://wordpress.mikecann.blog though im not sure how long ill keep that around.

[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.blog/wp-content/uploads/2016/09/chrome_2016-09-15_08-36-51.png)](https://www.mikecann.blog/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.blog/wp-content/uploads/2016/09/chrome_2016-09-15_09-03-37.png)](https://www.mikecann.blog/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.blog/wp-content/uploads/2016/09/chrome_2016-09-15_09-05-27.png)](https://www.mikecann.blog/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.blog/wp-content/uploads/2016/09/chrome_2016-09-15_09-08-47.png)](https://www.mikecann.blog/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.blog/wp-content/uploads/2016/09/2016-09-15_09-33-32.gif)](https://www.mikecann.blog/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.blog/wp-content/uploads/2016/09/chrome_2016-09-15_09-37-52.png)](https://www.mikecann.blog/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!

Wow, well that took longer than expected! [44 days ago I blogged](/posts/tinkering-with-typescript/) that I had started work on a second version of my Chrome Crawler extension and have only just managed to get it to a state I was happy with enough to release it. To be fair I had been on [a trip to New York](/posts/new-york-new-york/) during that period so perhaps I can be excused. Having said that however I think the time has been well spent and am fairly proud of the result.



### TL;DR

Recursive is an experimental tool for visualising the world wide web. Given a URL it downloads the page search for links and then recursively downloads those. The information is then displayed in a node-based graph.



### The Name

So what's this all about? Why is it called 'Recursive', why not 'Chrome Crawler 2'?

Although I would like to have called the spiritual successor to ['Chrome Crawler'](/posts/chrome-crawler-a-web-crawler-written-in-javascript/), 'Chrome Crawler 2' Chrome's [branding guidelines](https://developers.google.com/chrome/web-store/branding) forbid using the Chrome name or logo (they brought this in since the launch of Chrome Crawler 1).

With that in mind I decided that rather bend Chrome Crawler's name and logo to fit the guidelines I would create a whole new logo, name and app. The app is a total rewrite from the previous iteration anyway so I thought it justified.

According to dictionary.com there is no definition for "Recursive" or "Recurse" but there is one for "Recursion":

> 2\. the application of a function to its own values to generate an infinite sequence of values.
> So a tool that downloads pages, follows the links on that page to download other pages seemed like a rather apt description of something that is "Recursive".

### Video

Before I go much further, I put together this little video demonstrating some of the extensions core functionality:

<iframe width="640" height="360" src="https://www.youtube.com/embed/oNdpoM5Vhsc" frameborder="0" allowfullscreen></iframe>

### Installing

Installing and upgrading is dead simple thanks to how Google Chrome's extension system works. Just head over to this link and hit install:

[https://chrome.google.com/webstore/detail/recursive/hbgbcmcmpiiciafmolmoapfgegbhbmcc](https://chrome.google.com/webstore/detail/recursive/hbgbcmcmpiiciafmolmoapfgegbhbmcc)

Then to launch it visit any website and hit the little icon in the Omnibox:

[![](/wp-content/uploads/2012/12/Screenshot_008.png "Screenshot_008")](/wp-content/uploads/2012/12/Screenshot_008.png)

### How it works

Recursive works by taking in a starting URL which it uses to download the page it points to:

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

Once that page is downloaded Recursive parses it looking for links and files. If it finds things it thinks are files then it records them against that URL. It then proceeds to visit all the links in turn, downloading the page then parsing the for yet more files and links.

This cycle continues until a certain "depth" is reached which is the maximum number of links away from the starting URL. You can set the maximum depth allowed in the settings:

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

One of the key improvements of Recursive over Chrome Crawler is the way it visualises the data as it is returned:

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

Every page is grouped by its domain and is represented by a circular "node".

[![](/wp-content/uploads/2012/12/Screenshot_013.png "Screenshot_013")](/wp-content/uploads/2012/12/Screenshot_013.png)

So for example "/posts/tinkering-with-typescript/" would be grouped under the "mikecann.blog" domain. Any other pages found while running that match this domain are added as little page icons inside the host node.

[![](/wp-content/uploads/2012/12/Screenshot_014.png "Screenshot_014")](/wp-content/uploads/2012/12/Screenshot_014.png)

Any files that are found on a given page are given an appropriate icon and added to that page's domain node.

[![](/wp-content/uploads/2012/12/Screenshot_015.png "Screenshot_015")](/wp-content/uploads/2012/12/Screenshot_015.png)

As Recursive downloads pages and follows links it records the path it takes. It then draws lines between the nodes that are linked:

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

### Interacting

Using the mouse wheel you can zoom in and out to get a better perspective. Click and drag to move about the recursive space. You can also run the app in fullscreen if you so desire.

[![](/wp-content/uploads/2012/12/Screenshot_017.png "Screenshot_017")](/wp-content/uploads/2012/12/Screenshot_017.png)

If you click on a node it tells Recursive to explore that node for one extra level depth.

Right clicking a node opens a menu that lets you either open all the pages contained in that node or view the files for that node.

[![](/wp-content/uploads/2012/12/Screenshot_019.png "Screenshot_019")](/wp-content/uploads/2012/12/Screenshot_019.png)

### Files

By using the context menu for a node you can checkout all the files that Recursive found for that node. The files are separated into various categories which you can toggle on or off:

[![](/wp-content/uploads/2012/12/Screenshot_020.png "Screenshot_020")](/wp-content/uploads/2012/12/Screenshot_020.png)

Then if you wish you can download all the files as a zip.

### More

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

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]

[![](/wp-content/uploads/2011/06/disqus2.jpg "disqus2")](/wp-content/uploads/2011/06/disqus2.jpg)

Just a quick post. I have swapped over my commenting system from IntenseDebate over to Disqus. I really didnt like some things IntenseDebate did. It also seemed to get alot more spam which I had to manually approve / disapprove all the time.



Hopefully all the comments should have been preserved in the move over.

[![](/wp-content/uploads/2010/08/Untitled-1.jpg "Untitled-1")](/wp-content/uploads/2010/08/Untitled-1.jpg)

As im not out tonight I thought I would do a little work on the site.

I have been meaning to add the retweet and facebook buttons for ages. I have also updates the flash header to make it a little prettier :)

What d'you think?

[![](/wp-content/uploads/2010/06/ScreenHunter_01-Jun.-11-11.37.jpg "ScreenHunter_01 Jun. 11 11.37")](/wp-content/uploads/2010/06/ScreenHunter_01-Jun.-11-11.37.jpg)

The last few weeks my site had been playing up. I have been getting alot of spam comments and other issues. For that reason I have wiped my entire blog and started again using a fresh install and backed up data.



This may have caused some issues to do with missing files and attachments and the like, so if you see anything amiss then drop me a comment or an email mike.cann@gmail.com.


[![agscreen01](/wp-content/uploads/2009/05/agscreen01.png "agscreen01")](https://www.artificialgames.co.uk)

Well I think it was about time I gave [www.artificialgames.co.uk](https://www.artificialgames.co.uk) abit of a spit shine. For this overhall I went for a minimalist theme by [Chris Wallace](https://www.chris-wallace.com/). I decided to ditch the news updates and just keep it as a portfolio to my flash games and projects.
