Well its been years in the planning and months in the development but the "Big Summer Update" / "Seasons" / V1 update for our game [BattleTabs](https://battletabs.com) is finally out!

This is by far our biggest update yet. We generally don't like making large changes to the game like this, preferring small frequent incremental changes but it was necessary however as there are lots of exciting new overlapping systems and features in this update!



# Progression

For ages now there has been a large missing feature in the game one so obvious it stands as a testament to the [enjoyability and popularity](https://twitter.com/theBrandonWu/status/1458058505072652300) of the game that we were able to get this far without it. That missing feature was progression.

Sure we have had a rudimentary sort of progression via preset fleet unlocks but this was rather crude and players tend to whip through that part of the game:

[![](./preset-fleet-unlocks.png)](./preset-fleet-unlocks.png)

The new update however brings a whole new dimension to progression in the game. Players now earn XP for various actions during a battle which contributes to their season level.

[![](./game-over-modal.png)](./game-over-modal.png)

# Season

Seasons are a feature common to Free-2-Play games and exist as a mechanism to keep the game feeling fresh as the developer continually works on new content. The season is periodically (every few months) refreshed and the player's level resets. This gives new players to the game a way to enter the game without feeling like they will never catch up with the players that joined before them.

The XP earned contributes to their season level:

[![](./progress-scroller-1.png)](./progress-scroller-1.png)

Each level the player can claim various rewards:

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

There a lots of different kinds of rewards: Avatar Cosmetics, Custom Emotes, Ship Blueprints, Gold, Gems etc

There are 60 levels and two "tiers" of rewards. Theres the free tier, that anyone can claim rewards from, then there is the premium "Battle Pass" tier:

[![](./bp-modal.png)](./bp-modal.png)

The Battle Pass costs 2000 gold to unlock (1000 with Battle Club, our subscription product) and gives the player 2x XP rewards and substantially better rewards. Battle Pass also resets at the end of each season.

The player can grind enough gold during the free tier to unlock the Battle Pass for free eventually but they will loose all the double XP bonus they could have achieved along the way if they do that, so we are hoping this will be a strong incentive to visit our new Shop.

# Shop

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

Another common Free-2-Play mechanic that this update brings is In App Purchases (IAP) via the Shop. The player can spend fiat on in game currency in the form of Gold and Gems.

Gold can be used to unlock the Battle Pass but Gold and Gems can also be used to rent and buy ships.

# Ship Blueprints

Ships are the core game play feature for the game and can be thought of as cards in a traditional Collectable Card Game (CCG). You collect Ships (Cards) and combine them together in Fleets (Decks) and fight other players.

This update brings the concept of "Ship Blueprints" to game.

[![](./blueprint-states.jpg)](./blueprint-states.jpg)

The player can "discover" blueprints during the season then rent the ship for a few days for some gold. Once rented the ship can be used in a fleet. If it expires it can no longer be used and will have to be rented again. If the player get tired of renting a ship they can alternatively buy it outright with some gems. Once bought / owned they will never have to rent it again.

This Ship Rental concept gives the player something to spend their gold on and forces them into some interesting cost / benefit choices as they play.

# Content

The update is jam-packed with new content including:

- 6 New Ships
- 29 New Avatar Cosmetics
- 24 New Emotes
- 5 New Medals

The key is; once the season is over this content will no longer be unlockable. This incentives players to unlock everything before the season ends (FOMO). We may bring back some of the rewards in the future in the shop or through other rewarding mechanisms.

# Gangbusters

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

This update brings a name-change for the company.

[3 years ago](https://mikecann.blog/posts/farewell-bamboo-hello-markd) Brandon and I started working on a SaaS product called "Markd.co" and so we named the company "Markd Ltd".

Some time later we decided to pivot the company and focus on BattleTabs. For for some time now we have felt that the name no longer suits what we are doing and have been searching for a new name.

We traded different ideas until we hit on "Gangbusters". We like it as it hints at excitement, growth and energy, all things we want to instil in the company.

"Gangbusters" as a word also has some utility as it can be split into "Gang" and "Busters" so employees or fans of the company could be called "Gang Members" or perhaps "Busters". Its also a word in common parlance that hasnt been taken, which helps :P

# Conclusion

I hope this post has given you a little taste of this update. We have worked really hard on it and I am personally quite proud of the results. We are due to be featured on the GooglePlay ChromeOS store soon and the hope is this will increase the number of users and excitement around the game significantly.

If you are in interested in checking out out head over to [https://battletabs.io/](https://battletabs.io/) and get started. Ill see you there!

3 years ago while [working at Bamboo](/posts/started-at-bamboo) I was introduced to the concept of [Event Sourcing](https://martinfowler.com/eaaDev/EventSourcing.html) for the first time. The concept of turning the database inside out blew my mind. Since then I have been fascinated with the possibilities for the technology and have wanted to build another Event Sourced app.

When I heard about Cloudflare's new Durable Object tech I decided now was the time to tinker with Event Sourcing once again and to see if it was possible create one in a wholely serverless and databaseless manner.



# Video

This post is a little different than usual. Instead of subjecting you to a wall of text, and likely mangling the technical concepts, I decided to create a Youtube video instead. I have done this in the past with [my cube project](https://mikecann.blog/posts/the-cube) to great success so even though this project isnt as visually appealing I think it should still be more entertaining than a blog post.

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

If you want to see a demo of this in action checkout: https://mikecann.blog/posts/serverless-databaseless-event-sourcing

If you would like to dig a little deeper into how it all works all the source is available on Github here: https://github.com/mikecann/clouds-and-edges

I also put together a miro board for this project here which goes over some of the high-level structure: https://miro.com/app/board/o9J_lq_d2nE=/

BTW I also submitted this project to the [Cloudflare Developer Challenge](https://blog.cloudflare.com/developer-summer-challenge/) and it won! I got a nice little bag of swag for my efforts ❤️ Cloudflare.

Let me know in the comments what you think!

My PC is awesome but it has a bit of an addiction to Watts. So I wanted to build a low-powered NAS and Plex server so when I put PC asleep at night I can still enjoy some quality time with my content on the TV downstairs. Since I had a spare Raspberry Pi 4 glaring at me from my desk I thought, sure why not, how hard could it be?



# Requirements

- **Low Power**, its going to be on all day so it should just sip from the fountain of joules
- **Quiet**, its going to live in my office, so I don't want it bothering me with it whining all the time
- **Flexible**, I have a bunch of old hard drives, so I want to just sling them in there and have them all just work and contribute to one large pool of "stuff"
- **Redundant**, im not storing my sons baby pics on it or anything but I would rather not loose the data either, so some sort of redundancy would be nice.
- **Powerful**, it doesnt need to be a super computer but it needs to have enough juice to transcode a 4k video
- **Low Cost**, I aint made of money, if I was I would just buy a [Drobo](https://www.drobo.com/)

# Software

[Unraid](https://unraid.net/) would have been my first choice for a NAS / Media Server but it requires an x86 CPU and the Pi is ARM so unfortunately thats a non starter.

So I decided to just go with the standard Raspbian OS, I [grabbed the ISO](https://www.raspberrypi.org/software/) smashed it on an SD card and got cracking. I setup [SSH and VNC](https://www.raspberrypi.org/documentation/computers/configuration.html) for easy access then assigned a [static IP address to the Pi using the Google Home app](https://support.google.com/wifi/answer/6274660?hl=en-AU).

After a bunch of research and experimentation (which I will not bore you with) I decided to go with [Open Media Vault](https://www.openmediavault.org/) (OMV) as my main way of managing the Pi. It provides a nice UI and set of plugins smoothing the way like a butter coated bar of soap.

[A video](https://www.youtube.com/watch?v=FYkdPyCt5FU) by the rather nerdy but very helpful [Techno Dad Life](https://www.youtube.com/channel/UCX2Vhc0LIzSS9aMzhGFZ7PA) got me going with UnionFS which merges disks together so they appear as one large file system and SnapRAID which gives me a simple way to provide redundancy to the NAS.

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

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

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

The final step was to install Plex. I read a bunch of guides to installing it using OMV but they all seemed overly complicated involving Docker or other things. I found that [simply installing it natively using SSH](https://pimylifeup.com/raspberry-pi-plex-server/) worked just great.

Im making this sound all rather straight forward but by this point I had spent many nights and headaches on getting it all to work. But finally I now had a working NAS that had a single large file system that I could access from across the network. The drives were resistant to failure thanks to SnapRAID.

So with the software issues ironed out it was onto the hardware issues..

# Hardware

Its like software but harder.

Well I had the Pi.. so thats a good start. I also had two 2tb Toshiba Canivo drives that were sat around from my adventures around Australia a few years back.

[![](./2tb-toshiba.jpg)](./2tb-toshiba.jpg)

The Pi has 4 USB ports on it so I thought I could just hook up these two drives, job done. Oh no, that would be far too easy.. It turns out that the Pi, unlike a normal desktop PC, cannot deliver the full power required by a USB when multiple devices are plugged in. The result is one or both of the drives making a horrible clicking sound as it dies of power-starvation.

The solution? A powered USB hub that can deliver the required power and pass through the data communications to the Pi.

It turns out however, powered USB hubs are rather expensive at the moment for some reason. Particularly if you want each port to deliver the full power for a spinning hard drive.

I'll spare you the evening spent digging through various shopping sites looking for deals and instead show you what I ended up with:

[![](./usbhub.jpg)](./usbhub.jpg)
https://www.amazon.com.au/gp/product/B08222CYSS

This badboy cost only $19.99 and has been great. While I was there I also picked up this for $36:

[![](./usbdock.jpg)](./usbdock.jpg)
https://www.amazon.com.au/dp/B07C9RSZFM

And a couple of these for $15 each:

[![](./usbadaptor.jpg)](./usbadaptor.jpg)
https://www.amazon.com.au/gp/product/B011M8YACM/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1

I now had a way to get my 2 x portable drives, 2 x 2.5" drives and 2 x 3.5" drives all to work in the Pi.

I just needed a container for them all. I don't have a 3D printer to make one but thats okay because my Targét game is pretty strong, so I snagged this beaut for $8

[![](./container.jpg)](./container.jpg)
https://www.target.com.au/p/rattan-plastic-storage-basket/60093127

It was just a matter of then zip-tying it all together in some semblance of order.

[![](./pic1.jpg)](./pic1.jpg) [![](./pic2.jpg)](./pic2.jpg) [![](./pic3.jpg)](./pic3.jpg) [![](./pic4.jpg)](./pic4.jpg)

It actually came out pretty nice and neat, pop the lid on and then shove it in the corner and forget about it, exactly what a NAS should be.

# Conclusion

So how did I do against my goals?

- **Quiet**, yep I cant hear it at all
- **Flexible**, yep I was able to mix and match a whole range of different drives and it all just works.
- **Redundant**, with SnapRAID it should be, I haven't fully tested it yet however..
- **Powerful**, yep the Pi 4B is a very capable little device
- **Low cost**, the total I calculated (excluding the drives) was $174 AUD which is quite a bit more that I would have liked but its still far cheaper than a [Drobo](https://www.drobo.com/), even a second hand one.
- **Low Power**, yep it only uses 10w, about 0.25 kWh per day at 30 Aussie cents per kWh that works out to be about $27 per year which is acceptable and much less than what it would be if I left my PC on all the time.

[![](./power.PNG)](./power.PNG)

So all in all im happy with how it all went tho there are probably better ways of doing everything, please let me know in the comments if you have done something similar or have ideas for improvements!

Back in in the before-times of May 2020 OpenAI made a [stunning announcement](https://openai.com/blog/tags/announcements/) about the capabilities of their latest project named GPT3. When I saw [what it was capable of](https://beta.openai.com/) and it was going to be turned into an API I knew I was going to have to tinker with it!



# TL;DR

I tried out the worlds most advanced Natural Language Processing AI Model on a real world problem and received mixed results.

# GPT3

Generative Pre-trained Transformer 3 (GPT-3) GPT3 is a MASSIVE (175 billion parameter) Natural Langue model that was trained on basically the entire internet. This means that given any chunk of text its able to comprehend it and generate a realistic output.

Seriously, if you haven't seen some of the things this AI can do stop reading this now and head over to https://beta.openai.com/examples and check them out, its pretty mind blowing.

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

The power and possibilities of this tech are endless..

.. that is if it works as well as the examples indicate _portentous music plays_.

Eager to try it out for myself, I signed up for the closed beta on the spot.

# Many Months Later

I finally received my invite to try it out. My first step was to play with some of the examples in their playground.

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

So far so good, looks awesome!

Then I decided to set it a little challenge. One of the examples is called "TL;DR summarization":

> This prompt summarizes text by adding a 'tl;dr:' to the end of a text passage. It shows that the API understands how to perform a number of tasks with no instructions.

So given this post from my blog: [Introducing BattleTabs](https://mikecann.blog/posts/introducing-battletabs), I wonder what kind of tl;dr it will give me..

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

Ah that doesn't look right. Perhaps its struggling because I gave it Markdown rather than raw text?

I decided to remove all the Markdown markup and run it again..

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

Awesome! It now works and gives me a really nice summary :)

# Whats Next?

I wondered what real-world problem I could give it that would be simple but interesting enough to test its capabilities a little more.

I played with the examples a bit more while I pondered.

[One caught my eye](https://beta.openai.com/examples/default-keywords):

> Extract keywords from a block of text. At a lower temperature it picks keywords from the text. At a higher temperature it will generate related keywords which can be helpful for creating search indexes.

Well, this blog has over 600 posts on it and many of those posts are old and are missing Tags. Could I run all my tagless posts through GPT-3 and use this keyword extractor to generate the tags, I wondered.

It might be worth a shot, it would save me a bunch of time manually going through them and improve the navigability of this blog in the process.

First step was to try out this keyword extractor with my manually-markdown-stripped text from before.

As "[Introducing BattleTabs](https://mikecann.blog/posts/introducing-battletabs)" is a fairly recent post it already has some manually hand-crafted tags:

```
- chrome extension
- game
- async
- typescript
- battleships
```

Lets see what GPT-3 comes up with:

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

Wow! Impressive, sure its not quite as good as my manually crafted tags but still it worked really well.

Confident with my little experiment I set to work writing a script that would run through all my tagless posts strip out the text from the markdown and call the OpenAI API to get the keywords.

Simples! ...

It turns out that stripping the markdown markup from text is actually more complex that I thought it would be. To cut a long story short I decided to render the Markdown to HTML then using Puppeteer I extract the text from the page using `element.textContent`.

I will spare you all the other steps but if you are interested you can checkout the final script [HERE](https://github.com/mikecann/mikecann.blog/blob/master/scripts/openAIKeywords.ts).

# Results

I ran the script and 623 seconds later it had run through the 213 tag-less posts from a total of 612 posts.

_If you are interested, I have uploaded all the results [HERE](https://gist.github.com/mikecann/6efd37e58c5b0a38e0182bf40ac6a71e)._

It was able to generate tags for 177 of those 213 posts leaving 39 left over that it couldnt find keywords for. This isnt too bad, I was expecting a bunch of the older posts to be too short or to reference the visual (image or video) content too much to be able to extract any meaningful keywords from the text.

But what about the ones it could find keywords for?

Well firstly the good news, it seems like it was able to find good keywords for some of them. For example [my post titled "Village Life" from back in 2012](https://mikecann.blog/posts/village-life) it was able to generate these tags:

```
"mobile",
"game",
"facebook",
"multiplayer",
"flash",
"social",
"facebook",
"multiplayer",
"flash",
"social",
"facebook",
"multiplayer",
"flash",
"social",
"facebook",
"multiplayer",
"flash",
"social",
"facebook",
"multiplayer",
"flash",
"social",
"facebook",
"multiplayer,"
```

If you take the first 6 tags `mobile, game, facebook, multiplayer, flash` which is pretty impressive given the entire of the blog post text is:

```
Village life is a flash-based social game I worked on while at Playdemic. Its incredibly popular and has been played by millions of people.

I was responsible for the underlying client side technology that was used for developing the game.

Play it on facebook: https://apps.facebook.com/villagelifegame
```

Notice that nowhere in the post do I mention the word "multiplayer" or "social" but somehow it was able recognize that the game is that its "multiplayer" and "social" too.

I suspect it knows this from the various news stories about that game around the web that it gobbled up during its training. This would also explain the "mobile" tag and segway us into the negatives results of this experiment.

The problem with the "mobile" tag is that even tho the game was eventually ported to mobile I wasn't involved with the port and at the time the blog post was written the port didn't exist for mobile.

So this is a bit of a problem if I want to use these automatically generated tags for my posts as im now labelling my posts with falsehoods.

The issues continue. You many have noticed that the tags it generated are repeated many times. Well this seems to occur more often than not e.g.

```
 {
    "title": "Started Work at TheBroth in Perth!",
    "prompt": "Blog Post: Just a quick update. After a year of living down in Bunbury Western Australia and working Freelance and on my own projects (see this blog for more) I have decided to re-enter the workforce. Mainly because I was going a little stir crazy being by myself most of the day every day.\n\n\nI have taken a job 2 hours north in Perth at a company called TheBroth. We mainly work on a mobile and web game called SlotsGalaxy. Its similar sort of work to which I was doing at Playdemic so hopefully my old skills arent too rusty :)\nIm going to continue to work on my projects such as Mr Nibbles Forever and Post To Tumblr and my (still) unreleased strategy game but obviously time is going to be a little more limited.\nI have enjoyed the past year mostly but I think it was time for a change and im looking forward to the next year!\n\nKeywords: ",
    "tags": [
      "games",
      "game design",
      "game development blog",
      "game design blog",
      "games blog",
      "game development blog",
      "game design blog",
      "games blog",
      "game development blog",
      "game design blog",
      "games blog",
      "game development blog",
      "game design blog",
      "games"
    ]
  }
```

or worse it just gives up and starts repeating the same keyword:

```
{
    "title": "Supreme Commander Wallpaper",
    "prompt": "Blog Post: Well i have just finished making a massive (4608x2048) duel-screen wallpaper for a thread on the supreme commander forums.\n(click for full screen)\n\nKeywords: ",
    "tags": [
      "for alliance",
      "for allianc",
      "for allianc",
      "for alliance",
      "for allianc",
      "for allianc",
      "for allianc",
      "for allianc",
      "for"
    ]
  },
```

This could obviously be mitigated by removing duplicates but its worrying as the even the de-duplicated tags arent really that useful.

For example for the above Supreme Commander post the de-duplicated tags would be: `for alliance, for allianc, for` which doesnt actually say anything about the post.

# Whats Going On?

Why does the result of that original experiment on the "Introducing BattleTabs" post come out so good but when I run my script many of the results come out garbage?

I decided to run a quick text, take the Supreme Commander post and manually put it into the OpenAI Playground and see what I get:

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

Well thats not perfect, I would expect it to mention something about wallpaper or perhaps creation, Photoshop or something but at least its not repeating and seems to be more relevant to the game.

# Conclusion

Unfortunately I have run out of time to tinker on this little side-quest at the moment.

My conclusion is that although very impressive, the purpose I used the model for is not quite what I was looking for so in the end I decided not to use the generated tags.

Im 100% sure that this is the future tho. I mentioned [back in 2017](https://mikecann.blog/posts/a-game-developer-learns-machine-learning-intent) that:

> I see a future where an AI is capable of generating an entire game based on your preferences such as "I would like a game that plays like Mario but has the same size and scope as World of Warcraft", the AI then generates variants on that for you to play.

GPT-3 is definitely leading the way towards that being a possibility. If you dont believe me checkout [this tweet](https://twitter.com/sharifshameem/status/1282676454690451457?s=20) of someone using GPT-3 to generate HTML from some natural language.

So, although for my example I don't think its quite there, I can definitely see this becoming more and more a part of our lives.

I see programming changing drastically over the coming years, going from less of telling the computer how to do something and more having a conversation with the computer and asking it to iterate on what it generated. If you want a glimpse at what this awesome future may be like then checkout the incredible [GitHub Copilot](https://copilot.github.com/).

P.S. The generated keywords for this post are: `AI, NLP, NLU, Natural Language Understanding, Machine Learning` :)

This post is a little different to my usual but the incident had me thinking so I thought I would share..



# The Journey

I recently upgraded the CPU in my PC so I decided to sell my old CPU on popular Australian second-hand marketplace "Gumtree".

To my surprise less than an hour later I received a message on WhatsApp.

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

I thought this was a little unusual as Gumtree buyers usually contact via the website, email or sms, they have never used WhatsApp before.

Interested I took a look at their WhatsApp contact info:

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

She looked friendly enough, rather attractive, not who I expected to be buying a second-hand CPU (apologies for the sexist stereotype) but there are lots of girl-gamers out there these days I presumed, or perhaps she was a an artist / creator of some sort given the camera in the picture.

I probably should have noticed "+44" (UK) based prefix on her phone number at this point but im ashamed to admit I didn't.

I chalk it up to excitement in potentially finding a buyer so quickly that I overlooked this immediate red flag and decided to continue on with the conversation..

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

Any subconscious suspicion I might had had was now gone as this appeared to be a very normal Seller / Buyer Gumtree conversation.

Sure, I could have picked up the fact that she referred to the CPU as a "he" and the strange grammar of "At any time convenient for you" but I presumed non-english-primary-speaker or simply typo.

Her last message however peaked my interested. What did she mean by delivery service?

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

I thought perhaps she wanted to use a courier because of COVID or perhaps because she was a professional Gumtree trader and didn't have the time to go collect from everywhere. Again I probably should have been suspicious about this but I wasn't, I was more curious about this than suspicious.

But then came the hook..

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

Incredibly I still wasn't suspicious. Even when I clicked the provided link..

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

This all looked legit tho I hadnt ever used or heard about a Gumtree payment mechanism. I still wasnt suspicious because a feature like this to to facilitate easier payments and dispute resolution made sense for Gumtree and it made sense that she would use it if she was a professional Gumtree trader.

So I clicked the claim button..

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

They need my credit card? Okay well fair enough I thought, I hadn't ever entered my credit card into Gumtree before so its needed it to facilitate the payment from the buyer to me...

So I flipped open my wallet and extracted my credit card and was about to enter my details..

It was at this point I FINALLY took a proper look at the address bar.

[![](./urlbar.jpg)](./urlbar.jpg)

Padlock, that seems like a good sign but unfortunately it has nothing to do with domain authenticity these days. It only means that the connection between me and the site is encrypted and thus no man in the middle attack going on.

Lets continue looking..

"Gumtree.au" okay that seems legit. Hang on tho, thats not the domain, its just the subdomin. The domain is actually "3dsconfirme.site"..

Hmmmm... This doesn't seem quite right.

It finally landed in my head. I was probably being scammed.

I wasn't 100% sure however and I didn't want to seem stupid in front of this girl (no doubt all part of the ploy), so I went back to her with:

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

I was almost certain at this point that I was being scammed but I gave her just one more chance. I knew that if this was indeed a valid Gumtree payment feature then there must be a way to see this payment request from the Gumtree interface.

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

Ye so the jig was up at this point, I was convinced that it was all bull and had barely dodged a $280 scam.

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

# Conclusion

I am very impressed at how targeted this scam is and how realistic it is to the point it very almost got me. Me who I consider to be fairly savvy with computer security.

Past attempts at Gumtree scams against me have involved a text message that included a URL. This made it super obvious that it was a scam. A normal buyer would never just open a proceedings with a link to the URL.

This however felt lke a regular Gumtree buyer / seller conversation. It wasn't until 16 messages in that the hook to the fake payment site was dropped.

What worries me is that this is just the start of this sort of ultra-targeted scam. I suspect with the advent of [GPT-3](https://en.wikipedia.org/wiki/GPT-3) and similar AI techniques the scammer is only going to get more sophisticated and more automated allowing them to hit more targets in a shorter time and scamming, its just a numbers game.

Anyway, I hope this post serves as a warning, keep your guard up even tech-savvy people can be fooled!

P.S. I just noticed that Google has started flagging that domain as "Deceptive". This is great but it was not the case while the scam was being run on me otherwise I would have backed out much sooner.

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

Just a small post today sharing with you a really cool project that I have only recently become aware of.



# My Flash Game History

For new readers of this blog you may not be aware of my long history in building flash content. In fact some of my earliest posts to this blog (14 years ago) were about my (now defunct) Flash website Artifical Studios [way back in 2004](/posts/artificial-sudios-1).

Since then I have worked on [many websites, projects and games](https://mikecann.blog/tags/flash) built in Flash both personally [and professionally](/posts/gourmet-ranch).

Some of the Games I built [ended up being fairly popular](https://mikecann.blog/posts/1000000-views).

The problem is because Flash is now [effectively dead](https://blog.adobe.com/en/publish/2017/07/25/adobe-flash-update.html) on the web all my old content has stopped working.

# Flashpoint

Fortunately others have lamented this sorry state of affairs by collecting a huge archive of old flash content and making it available to play once again in an easy to use package.

[![](./flashpoint-ss.png)](./flashpoint-ss.png)

Simply [download the app](https://bluemaxima.org/flashpoint/downloads/) (either the 650mb installer or the MASSIVE 600GB full archive) and then search any game you want to play and click to run it, that simple!

Its awesome to see some of my games on there available to play again just a single click away.

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

If you are interested I made a playlist:

So far I was able to find

- [Icy Slicy](/posts/icy-slicy)
- [Blast Wave](/posts/blast-wave)
- [Blast Wave: Lost at Sea](/posts/blastwave-lost-at-sea)
- [Monkey Mines](/posts/monkey-mines)
- [Particle Playground](/posts/particle-playground)

Unfortunately ones that seem to be missing are

- [Blast Out](/posts/blast-out)
- [Flashteroids](/posts/flashteroids-is-out-finally)
- [Mr Nibbles](/posts/mr-nibbles-2)
- [Mr Nibbles Forever](/posts/mr-nibbles-forever-now-on-apple-app-store)

# Future

It looks like we might soon be able to play Flash content on the web again thanks to [Project Ruffle](https://github.com/ruffle-rs/ruffle) which looks really promising. Once its up to 100% feature parity with the latest version of Flash I might once again be able to update this blog with web-accessible links to my old games :)

An alternative might be [CheeperX For Flash](https://leaningtech.com/cheerpx-for-flash/) which emulates the entire of the x86 version of the Flash runtime in Web Assembly (jeeze!) but it appears that it is currently a commercial-only offering :(

When I was sent a replacement for my broken [Versa 1](https://www.fitbit.com/global/us/products/smartwatches) by Fitbit they decided to upgrade me to a Versa 2. This was great except it meant that the watch face I was using before no longer worked and I was unable to find a good replacement so I thought it was time to get my hands dirty and code one up myself.



# TLDR;

[![](./out1.gif)](./out1.gif)

Check out the clock face: https://gallery.fitbit.com/details/e865d518-7a36-41b2-b3e7-e12789c138a8

# How?

Micro controller development such as the [Arduino or ESP32](https://www.arduino.cc/en/software) tends to involve hacking away in low-level languages such as C. Fortunately Fitbit make things super easy with their Fitbit Studio their online IDE and the language choice (Javascript).

[![](./fitbitstudio.jpg)](./fitbitstudio.jpg)

It was super simple to setup a new project. Define your project and permission requirements in the "package.json" and start coding against their excellent SDK.

[![](./package.jpg)](./package.jpg)

As a (mostly) web developer these days I found it easy-peasy to get started with [their SDK](https://dev.fitbit.com/build/reference/device-api/power/) just import a few things then start reading data from the sensors.

One aspect unique to watch development is the care you have to take around battery. Limiting computation and sensor reads is important to prolong time between charges. Thankfully the SDK has you covered here and provides some handy API's for detecting screen on and off events.

[![](./display.jpg)](./display.jpg)

When it comes time to test your clock face you can either run it on device or via a very handy simulator that Fitbit provide. Connecting from Fitbit Studio is all rather straight forward tho I did have a couple of times where the IDE refused to connect to the watch for some reason.

[![](./sim.jpg)](./sim.jpg)

# What?

So what does my Clock Face do? .. Well it can tell the time ... among other things ..

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

It also shows the most important sensor readings in each corner; battery, heart rate, steps and stairs climbed.

I decided to get a little fancy with the icons for a couple of them. The battery icon has a bar that changes size depending on the battery level and the heart icon flashes from full to empty at the rate of your BPM.

After getting these basics in there I started to get a little carried away and decided to add some extra info.

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

A press of the screen and the user is taken into an auxiliary data mode. The date is replaced by the time the watch was last synced (I have found this useful to know so you don't loose data). This auxiliary data mode also reveals the "battery life estimation" instead of the current battery level.

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

The battery estimate feature is a little experimental but it seems to work well enough. When the battery level drops by 3% or more it calculates the time taken to decrease by that amount and interpolates the remaining time for the current battery level.

Last but not least I decided to add one final mode you can access by tapping the screen twice

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

Flashlight mode makes the screen go completely white and is actually super useful for when you get up in the middle of the night and its pitch black and cant see but don't want to turn the light on.

# Conclusion

All in all im happy with how things went. Fitbit put a lot of effort into making the development experience a breeze which made the process fun.

The watch itself works well and does everything the last one did and more.

Its even received a few positive ratings already :)

[![](./reviews.jpg)](./reviews.jpg)

If you are interested in getting the watch yourself its freely available on the Fitbit Gallery here: https://gallery.fitbit.com/details/e865d518-7a36-41b2-b3e7-e12789c138a8

I also uploaded the source code to Github incase you want to take a closer look at how things work under the hood: https://github.com/mikecann/minimal-mike


It's been 6 months since [I last wrote about BattleTabs](/posts/battletabs-ships-and-fleets-update) and so much has happened and so many things have changed I felt it was time to do an update.

# 6 Months Ago..

.. We had [just released](/posts/battletabs-ships-and-fleets-update) the ships and fleets update which was by far our biggest update to that point. For the first time we introduced the concept of ships that have abilities and are grouped into fleets. This fundamentally changed the game from what was essentially just Battleships into its own unique experience.

[![](./select-a-fleet.png)](./select-a-fleet.png)

In the same update we added a proper tutorial and gave a UI a much needed overhaul.

[![](./new-sidebar.png)](./new-sidebar.png)

# Whats New

Since then we released a whole heap of new features and improvements over a total of 35 updates!

Some of the biggest new features include:

- New version for web (https://battletabs.io)
- Battle Club, our paid subscription feature giving the player access to exclusive ships fleets, avatars backgrounds and lots more.
- BattleTabs Live, a discord bot that announces major events in the game.
- A user profile modal for viewing states and auth data
- A new authentication system so you can signup and login with socials
- A new "Update Available" / auto update feature
- Private proposals so you can send invites to each other via links
- A bunch of new fleets and ships

[![](./fleets-list.jpg)](./fleets-list.jpg)

# Some Numbers

Players seem to enjoy the regular updates and improvements. The number of matches created per week has steadily increased to the point where almost 70,000 matches are created per week:

[![](./matches-created.png)](./matches-created.png)

Thats over 300,000 turns taken per day!

[![](./turns-taken.png)](./turns-taken.png)

# Discord

We also launched a [Discord Server](https://discord.com/invite/kvJKXsu) in the last 6 months which has seen surprising growth to over 8,000 members.

[![](./discord-memberships.png)](./discord-memberships.png)

At any one time we have hundreds of members online chatting away in the various channels. Its awesome to see such a fantastic community grow around our little game.

Brandon, my co-founder, has been busy running community tournaments which have proved incredibly popular garnering far more sign-ups than there is space for.

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

# Under The Hood

<div style='position:relative; padding-bottom:calc(50.42% + 44px)'><iframe src='https://gfycat.com/ifr/redevenbedlingtonterrier' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe></div>

As you can imagine with all this growth comes some technical challenges.

## Scaling

In the past 6 months we have had our work cut our for us scaling the backend. Its a challenge as the game uses stateful sockets for communication which complicates the usual "stateless" servers mantra.

Our solution has been to use a combination of careful horizontal scaling of client facing nodes which communicate via a shared custom redis pub-sub mechanism.

Since launch we have run most of our infrastructure on Heroku which has been great for for rapidly getting us to were we are today but its scaling is a little lacking. For now it works but theres plenty room for improvement in the future.

## Client State

Recently we also changed the way state is managed in the client over from [MobX State Tree](https://github.com/mobxjs/mobx-state-tree) (MST) to just [MobX](https://mobx.js.org/README.html). Although [I am a fan of MST](https://mikecann.blog/posts/mst-libs) we have found that it unfortunately doesn't play very well with Typescript once your store reaches a certain size.

MST relies on a lot of type inference and union types and if you have been around Typescript for a while you will know that this specific combination of characteristics can quickly lead to a combinatorial explosion of types causing slow compile times and a poor IDE experience.

With MobX things are simpler as state is split between multiple stores defined as classes. This means Typescript doesn't have to work so hard calculating what the type of something should be at any given time.

We do give up some nice MST features such as time travel debugging, undo-redo and state managed purely in the background page but we either weren't using those features or we would have had to stop using them for [manifest v3](https://developer.chrome.com/docs/extensions/mv3/intro/) regardless.

## Monorepo

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

We changed the way we code to move from a multi-repo approach to a single monorepo approach. This was done to simplify dependency management between the various parts of the system and simplify the versioning story.

This definitely makes things much simpler to understand when you have more than one person working on the codebase at once.

# Future

Theres so much more we have planned both from a feature standpoint and technically. I cant share too much right now but its super exciting so stay tuned!

If you want to play the game you can [download the extension](https://chrome.google.com/webstore/detail/battletabs/mjcklhnhfiepmofggcoegkmkokbljmjd) or play right now on http://battletabs.io/



Making Heroku and DataDog Metrics play together isnt as straight forward as it probably should be. Read on to find out how to remedy this.

# TLDR;

Use the API directly with: https://github.com/dbader/node-datadog-metrics

# The Problem

I have used Heroku for many projects over the years, its a super convenient platform for hosting my apps. Lately tho our current project [BattleTabs](https://battletabs.com) has started to grow at a rate that is forcing me to look more closely at what is going on inside the system.

One way to do this is to gather metrics from the running app. Things like endpoint call frequency and roundtrip times. A fantastic tool for this is [DataDog](https://www.datadoghq.com/)

![](./ss1.png)

DataDog Metrics [usually requires](https://docs.datadoghq.com/getting_started/agent/) that you install their "Agent" which runs on the "host" and provides a "StatsD" service which communicates with their system. The problem is that in the Heroku environment you dont have access to the underlying host OS and thus cant install the Agent.

No worries, Heroku has a solution to this in the form of [Buildpacks](https://devcenter.heroku.com/articles/buildpacks). Fantastic so all you need to do is install the [DataDog Heroku Buildpack](https://docs.datadoghq.com/agent/basic_agent_usage/heroku/).

![](./ss2.png)

Well that is what I would say if you were running Heroku using their traditional "Slug Deploys" setup. Unfortunately tho we moved over to Docker Deploys for [BattleTabs](https://battletabs.com) some time back and Buildpacks dont work in that case.

Ill spare you all the details of how I searched and search for the correct way to solve this, even resorting to asking on StackOverflow with no avail. Eventually tho I stumbled upon [this part](https://docs.datadoghq.com/api/latest/metrics/#submit-metrics) of the DataDog docs that mention that it is possible to use their API to submit metrics.

Unfortunately tho DataDog dont supply an SDK for NodeJS so I would have to write my own.

# The Solution

Before I sat down to spend a few hours fighting DataDog's API I thought I would do a quick google to see if anyone else had written one. Well lucky for me someone had done an excellent job of it: https://docs.datadoghq.com/api/latest/metrics/#submit-metrics

![](./ss3.png)

So all that was left was to plug it into the app, too easy!

```ts
import { ensure } from "@battletabs/essentials";
import { config } from "../../config/config";
import { getClientVersion } from "@battletabs/shared";
import { BufferedMetricsLogger } from "datadog-metrics";

let _client: BufferedMetricsLogger | undefined = undefined;
const getClient = () => ensure(_client);

export const initDataDog = () => {
  if (config.DD_ENABLED != "true") return;
  _client = new BufferedMetricsLogger({
    apiKey: config.DD_API_KEY,
    appKey: config.DD_APP_KEY,
    flushIntervalSeconds: 15,
    defaultTags: [
      `app:${config.HEROKU_APP_NAME}`,
      `dyno_id:${config.HEROKU_DYNO_ID}`,
      `dyno:${config.DYNO}`,
      `client_version:${getClientVersion(config.BT_BUILD_NUMBER)}`,
      `stage:${config.STAGE}`,
    ],
  });
};

export const recordMetric = (name: string, value: number, tags: string[] = []) => {
  if (config.DD_ENABLED != "true") return;
  getClient().gauge(name, value, tags ?? []);
};

export const incrementMetric = (name: string, amount: number = 1, tags: string[] = []) => {
  if (config.DD_ENABLED != "true") return;
  getClient().increment(name, amount, tags);
};
```

# Conclusion

So although it wasn't as pain-free as I was hoping for when I decided to add some metrics to our app, the solution ended up quite clean and works well on Heroku Docker Deploys.


Im not sure how I first came across [Dfinity](dfinity.org) and the Internet Computer project but when I heard about the technologies they were using (Blockchain, Actors, Motoko) and the goals they were striving for I knew I had to have a tinker.



# Background

So what is the Internet Computer? Well ill quote [from their website](https://dfinity.org/):

> The Internet Computer is a public blockchain network so powerful that it can natively host hyperscale open internet services, pan-industry platforms, DeFi systems, secure enterprise systems, websites, and all of humanity's software logic and data in smart contracts. It is created by independent data centers worldwide running the Internet Computer Protocol (ICP).

Theres a lot of buzzwords in there but I see it as a decentralized app execution environment much like Heroku or parts of AWS or Azure. Much like those services you dont have to worry about the hardware that runs your code, you just deploy your code and it begins to execute.

[There a bunch of other cool things](https://dfinity.org/faq/) that make the project exciting from the way that the code executes in a "tamperproof" manner to the way the blockchain and tokens are used to both pay for execution and to operate as a governance mechanism.

As a programmer and tech nerd the main thing that interested me is their new programming language the way applications are structured in the form of the Actor Model.

So lets tinker..

# Getting Setup

Unfortunately the IC's SDK currently only runs on Linux or Mac so to get it to work on Windows I first had to install the Windows Subsystem for Linux 2 which wasn't too bad thanks to [this guide](https://www.omgubuntu.co.uk/how-to-install-wsl2-on-windows-10) but still a little frustrating.

Once setup I was able to install the SDK and create my first project using their command line.

[![](./ic-terminal1.png)](./ic-terminal1.png)

I followed their [quick start guide](https://sdk.dfinity.org/docs/quickstart/local-quickstart.html) and soon had my first little application running.

[![](./hello-world.png)](./hello-world.png)

As you can see from the image above, your application is split into two parts; the "src/my_app_assets" is the frontend and is your typical Webpack produced Single Page Application and the backend "src/my_app" which is the interesting part in the form of the Motoko actor.

# Actors

Functions you define to run on the Internet Computer run inside something called an Actor. Actors are an [old but fascinating](https://www.brianstorti.com/the-actor-model/#:~:text=The%20actor%20model%20is%20a,this%20model%20is%20probably%20Erlang%20.) concept and are used projects such as [AKKA](https://akka.io/) and [Project Orleans](https://dotnet.github.io/orleans/).

The basic concept is that code and state are located together much like classes in typical OO programming. On the IC actors are written using their special purpose langauge [Motoko](https://sdk.dfinity.org/docs/language-guide/motoko.html), heres an example:

```motoko
actor Counter {

  var value = 0;

  public func inc() : async Nat {
    value += 1;
    return value;
  };
}
```

As you can see you simply define an actor `Counter` which has some state `value` which can be incremented by calling `inc` and then returned to the caller.

Actors dont need to worry about saving their state to a database, the state is automatically persisted and depersisted by the system as actors are invoked.

The beauty of this model is its simplicity. You no longer have to worry about how to structure your DB tables and indices, simply pass a message to an actor (calling a function) to query or mutate its data.

Calling an actor from the frontend is as simple as importing it and calling it:

```js
import my_app from "ic:canisters/my_app";

my_app.greet(window.prompt("Enter your name:")).then((greeting) => {
  window.alert(greeting);
});
```

And because its just an RPC the typescript definitions for your actor are easily generated 💯.

# Queries vs Mutation

The Motoko language has two types of functions you can define in your actor; "query" functions only allow you to read and manipulate data from the actor and "mutation" (my term not theirs) functions that also allow you to update the state of the actor.

The reason why they have two kinds of functions is a bit complicated but has to do with consensus in a decentralized system. When you query data you dont need consensus, the response can simply be retrieved and returned but for a state change (mutation) to happen it must be agreed upon by multiple nodes. This consensus between nodes in the IC takes time and thus there is a delay.

This delay time is actually quite significant, the docs quote [1-2 seconds](https://dfinity.org/faq/), but when running locally its more like 3+ seconds. This might not sound like a lot but when you compare it to the millisecond responses everyone is used to with modern websites it does highlight a bit of an issue.

This inherent mutation delay sounds like a bit of a deal-breaker but if you are careful in the way you apply optimistic state updates on the client, [you can make it appear as if the state change happened immediately](https://medium.com/dfinity/how-i-built-a-multiplayer-reversi-game-on-the-internet-computer-f67d2fed0fc3).

# Other Problems

So there is a lot to be excited about with the IC however I would be remiss if I didn't mention a few issues that I encountered on my tinkering journey.

## No Unit Testing

So far the docs don't mention any sort of automated testing capabilities. I assume that this is something that they will implement at some point but IMO its really important to have this baked in from day one particularly if you are building a Blockchain / DeFi application.

## No Intellisense

Even though there is syntax highlighting and a VSCode plugin there is unfortunately no intellisense or other nice features such as refactoring that im used to from other languages. Again its early days for the project so im sure that will come in time.

## Slow deploy / development iteration process

When you make a change to your Motoko file you must then run `dfx deploy` to build and deploy to your locally running environment. Unfortunately this process currently takes a long time. On my powerful desktop computer it takes 19 seconds each time.

Again im hoping this will be fixed as the project progresses more. I think unit tests could help greatly here too as you can be more confident that your code is going to work before you hit "deploy".

## Not Open Source

This has been a bit of a sore point for members of the blockchain community who are used to cypto projects being open source from the beginning. Dfinity have promised to open source everything at somepoint however.

## Okay-ish docs

I think this is the nature of an early, rapidly developing project but it seems like chunks of the docs are out of date which leads to a bit of confusion. For example some of the tutorials recommend using `dfx deploy` whereas others talk about using multiple deploy steps such as `dfx canister create --all` then `dfx build` then `dfx canister install` etc.

## Not Yet Live

You can currently push code to a "testnet" which will allow you to run your code remotely and have others access it but this is not considered production ready. There are still lots of questions around what happens when the code is in production, who can view the code and data etc.

# Conclusion

I have barely scratched the surface of the Internet Computer but what I have seen I am very impressed with.

I think for my next step I would like to build something a little more meaningful and have it running on a remote network so others can access it.

Right now however im going to keep an eye on the project and wait a while. They have a bit more work to do to make it user friendly and I don't want to pay the early adopter tax when there are so many other cool shiny things to play with 😉

Its no secret that im a bit of a tinker'er and this blog seems to bear the brunt of my experiments.



# TLDR;

This site now uses [NextJS](https://nextjs.org/) hosted on [Vercel](https://vercel.com/).

# History

This blog started [way back in feb 2003](https://mikecann.blog/posts/snakez-2003) with some simple flash experiments. Back then it was itself a flash site (they all were at the time!). Over the years however it went through many iterations. 

Some time in 2006 it became a Wordpress site, which it stayed for quite some time. I never was happy with the performance on Wordpress however so [in 2017](https://mikecann.blog/posts/the-static-blog) I decided to move the blog to Hexo a static site generator. This allowed the site to be super fast because all the posts and pages were pre-rendered as simple HTML pages during build time then served from the AWS CDN close to the user.

Although I was happy with the performance I wasn't happy with the development process with Hexo, it felt very messy and archaic using bower for dependency management. It also took ages to build the blog which by that point has amassed 14 years of posts.

So [in 2019](https://mikecann.blog/posts/migrating-from-hexo-to-gatsby) I moved from Hexo to the popular Gatsby static site generator. This was definitely more modern and was highly configurable however I personally am not a fan of using GraphQL for accessing assets locally, it all just felt very complicated. It also took a long time to build everything.

# Now

So now enter NextJS. This is a very "in" framework at the moment that allows you to write your "app" in React but have parts of it rendered server-side and parts of it run locally in the browser. 

"But, but, Mike!" I hear you cry "server side rendering, wont that be like going back to the slow-old-days of wordpress where everything has to go to a central server before being rendered and delivered to the client?". Ah you see I thought that too that I discovered that the creators of NextJS, Vercel, have a cloud offering that solves that.

Vercel cloud uses "edge" servers to render the page then deliver it to the client. These "edge" server run very close to the client requesting the page and thus like a CDN they are able to load, render and deliver very quickly to the client. I dont think it can ever be quite as fast as a CDN but its pretty indistinguishable from what I can tell.

# Result

So the result is I now have a blisteringly fast blog that is a joy to develop in and builds quickly!

Hopefully I dont need to move again for a long time, but then again I think I said that last time :P

2021

Archive

2021

Archive

2021

Archive