However, fast forward a year, and the vue3 ecosystem is a lot more stable and development has stopped on vue2, so it looks like its time to make the upgrade. Now the application isn't that huge, but moving all the components over will take time, luckily we should be able to do it gradually instead of big bang as vue2 components can be written using the new composition API.

Another change is the move away from Vuex to Pinia as the state store. Again this is backward compatible with vue2, so this seemed like a good place to start.

I'm not going to talk much about the actual migration of the stores here, but it was actually pretty straightforward forward and they are much more pleasnt to use than vuex stores, the issue I had was testing with them.

Please just give me an example! 📝

My issue came when I tried to move my tests over from once the Vuex stores had been replaced in the components with Pinia ones. Obviously, they all started to fail, so I headed over to the testing section of the documentation (https://pinia.vuejs.org/cookbook/testing.html) to see how to get going.

Now it might just be me but I struggled to understand a couple of the things going on here. My main issue was there's a lack of example component test online showing a simply create and inject a mocked pinia store into the component you are testing. After much head-scratching I finally got one working, as below:

import { mount, createLocalVue } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent'
import { PiniaVuePlugin, setActivePinia, defineStore } from 'pinia'
import { createTestingPinia } from '@pinia/testing'

const localVue = createLocalVue()
localVue.use(PiniaVuePlugin)

describe('MyComponent.vue', () => {
    let wrapper, ourPinia

    //create pinia instance. No autostub we control the outcomes
    ourPinia = createTestingPinia({            
        stubActions: false, 
      })
    
      //activate our instance
      setActivePinia(ourPinia)

    const actionId = 1

    const actionsResponse = [
        {
            id: actionId,
            triggerFormSubmit: true
        }
    ]

    })

    const mountWithProps = function () {
        const app = document.createElement('div')
        app.setAttribute('data-app', true)
        document.body.append(app)

        wrapper = mount(MyComponent, {
            localVue,
            pinia: ourPinia,                
        })
    }

    beforeEach(() => {

        //setup our store
        const useMyStore = defineStore('MyStore', {
            state: () => ({ actions: actionsResponse }),        
                getters: {
                    getAllActions: (state) => state.actions,
                },
                actions: {
                    setActions() {
                        return new Promise(() => {
                            this.actions = actionsResponse
                        })                    
                    },
                },
        })

        useMyStore(ourPinia) 
    })

    afterEach(() => {
        wrapper.destroy()
    })


    it('onActionTrigger with triggerFormSubmit set emits event', () => {
        //  assign 
        mountWithProps()
        
        // act
        wrapper.vm.onActionTrigger(actionId)

        // assert
        wrapper.vm.$nextTick(() => {
            expect(wrapper.emitted().actionWorkFlowSubmitTrigger).toBeTruthy()
        })
    })

})

So, what's going on? 🤔

The first couple of bits are actually pretty well documented. We create a localvue and push the PiniaVuePlugin in. Then we create a testing pinia instance using createTestingPinia, here I'm also telling it not to auto-mock the actions so we can decide what happens. Then we activate our instance ready to use.

Once we have our instance setup we need to create our mocked store. Make sure to name it the same as the 'real' one so it drops in over the top of it. We define our store as if creating a real one, but here we just mock out the state/getters/actions. Then we pass our store into the active Pinia instance.

One of the bits that had me stumped for a while was by default if you don't include the stubActions: false directive when creating the test Pinia then all the actions get auto-mocked. These could be fine in some instances, but the actions don't seem to return promises so all my calls failed as I waited for them to resolve.  This is why I am manually mocking any actions and making sure to return a promise where required.

ssh git@bitbucket.org host_key_info

The output was telling me I was using the old ssh-rsa algo, so I needed to update my known hosts with the new details.

The instructions on https://bitbucket.org/blog/ssh-host-key-changes gave me the first part, I needed to update my known_hosts file with the new trusted keys.

ssh-keygen -R bitbucket.org

This added the new keys, but it also left my old ones behind, resulting in me getting an error when connecting. It was easy to get around, but it was very annoying.

Warning: the ECDSA host key for 'bitbucket.org' differs from the key for the IP address 'xxxxxxxxxx'
Offending key for IP in C:\Users\Luke/.ssh/known_hosts:9
Matching host key in C:\Users\Luke/.ssh/known_hosts:13
Are you sure you want to continue connecting (yes/no)? yes

The only way I could find to clean this up was by opening the known_hosts file, and removing the offending line (in my case line 9), once iIran the connection again stopped getting the error.  

So, how does it work?

When we call a method on a controller, we can use the Authorize attribute to tell the application a user must be authenticated to use said method or controller. If the user is not authenticated then a HTTP 403 is normally sent back. There are various way to wire up what this Authorize attribute actually does. In our case, we are going to create a new handler for the authentication that is going to pull a HTTP header from the request, check it's valid then return the status from our authentication handler.

Our new handler

So first, we need to scaffold our handler up. Create a new class that inherits the AuthenticationHandler class, and brings in all the boilerplate code

public class BasicAuthenticationHandler : AuthenticationHandler<AuthenticationSchemeOptions>
    {
        
        public BasicAuthenticationHandler(
            IOptionsMonitor<AuthenticationSchemeOptions> options,
            ILoggerFactory logger,
            UrlEncoder encoder,
            ISystemClock clock)
            : base(options, logger, encoder, clock)
        {           
        }

        protected override async Task<AuthenticateResult> HandleAuthenticateAsync(){}

Pretty standard stuff, we're just overriding the HandleAuthenticateAsync method with our own code. Next, we need to have a list of valid API keys injected into our method. In this example, we are just going to drop them into our appsettings.config file as a dictionary and bring them in using IOptions (don't forget to register them in DI). We also need to set up a couple of string constants for our auth scheme name and api http header name. So now our boilerplate code will look like this:

public class ApiKeyAuthenticationHandler : AuthenticationHandler<AuthenticationSchemeOptions>
{
 	public static readonly string SchemeName = "APIKeyAuthentication";
    public static readonly string ApiKeyHeaderName = "X-API-Key";
    private readonly IDictionary<string, string> _apiKeys;
        
	public ApiKeyAuthenticationHandler(
            IOptionsMonitor<AuthenticationSchemeOptions> options,
            ILoggerFactory logger,
            UrlEncoder encoder,
            ISystemClock clock,
            IOptions<IDictionary<string, string>> apiKeys)
            : base(options, logger, encoder, clock)
        {
            _apiKeys = apiKeys.Value;
        }
 protected override Task<AuthenticateResult> HandleAuthenticateAsync()
        {
        }
}

Cool, so once we have that we can start to actually go and see if we have the header, and if we do then pull the payload out and go and see if it exists in our allowed list of clients. We're going to wrap that up in a try/catch block just in case anything goes wrong and returns a fail (unauthorized result). So let's build that logic up

 try
    {
        if (!Request.Headers.ContainsKey(ApiKeyHeaderName))
            {
                Logger.LogWarning($"Missing {ApiKeyHeaderName} Header", Request.Headers);
                return Task.FromResult(AuthenticateResult.Fail($"Missing {ApiKeyHeaderName} Header"));
            }

        var apiKeyHeader = AuthenticationHeaderValue.Parse(Request.Headers[ApiKeyHeaderName]);
        if(!_apiKeys.ContainsKey(apiKeyHeader))
        {
            Logger.LogWarning("Invalid API Key passed", apiKeyHeader);
            return Task.FromResult(AuthenticateResult.Fail("API Key not found"));
        }

        
    }
    catch (Exception e)
    {
        Logger.LogError("Basic authentication failed", Request.Headers[ApiKeyHeaderName], e);
        return Task.FromResult(AuthenticateResult.Fail("API authentication failed. Unable to authenticate"));
    }

So most of that should be pretty self-explanatory, we are checking to make sure we have the expected http header, and if we don't then return a fail result.

If we do then we try and find the key in our dictionary of known API keys, if it doesn't exist then at this point we again send a failed result back. If it does then we need to move on to the next part, creating our AuthenticationTicket.

First, we can create some claims for the user, in this example we are just going to add one that creates the customer's name, this will come from the information we hold in our API keys settings in config. Update this with any claims you might need.

 private static IEnumerable<Claim> CreateClaimsForCustomer(APICustomer customer)
        {
            return new List<Claim>
            {
                new Claim(ClaimTypes.NameIdentifier, customer.Name)
            };
        }

Now we can create claims, we just need to create our ticket, add the claims, and return the ticket along with a Success result

var identity = new ClaimsIdentity(CreateClaimsForCustomer(customer), Scheme.Name);
                var principal = new ClaimsPrincipal(identity);
                var ticket = new AuthenticationTicket(principal, Scheme.Name);
                return Task.FromResult(AuthenticateResult.Success(ticket));

That should be it for our handler

Wire It into the Pipeline

Now it's just a case of plugging it into our Startup file. Under ConfigureServices add the following section somewhere

 services.AddAuthentication(ApiKeyAuthenticationHandler.SchemeName)
                .AddScheme<AuthenticationSchemeOptions, ApiKeyAuthenticationHandler>(ApiKeyAuthenticationHandler.SchemeName, null);

This tells the application to add our handler as an authentication method. Then again in Startup under Configure we need to add the line

 app.UseAuthentication();

And we should be ready to go! Now in your controllers, above the class just add the [Authorize] attribute and your controller will require authentication using our handler. Simple but a good start to understanding and controlling access to simple applications.

I'm not going to go into how to add prism in detail as there are plenty of posts about that, this is more to specifically get c# snippets working.

So it turns out as well as needing the css file (prism-okaidia for example) and the core js (prism.min.js) and csharp (prism-csharp.min.js) scripts pulled down, you also need 2 more as well

prism-c.min.js
prism-clike.min.js

This is because the prism-csharp.min.js has a dependency on prism-clike.min.js and that in turn has one on prism-c.min.js. Once you reference all these files from the CDN (https://cdnjs.com/libraries/prism) your csharp snippets should start to show up nicely, like:

/// <summary>
///     I am a test class
/// </summary>
public class TestClass1
{
	private string _string1 {get; set;}
	public string String1 {get;}
}

I have however come across a bit of an issue with the way it handles the rounding/accuracy of a double data type

The Problem...

I had some geography points (lat/longs) that were being updated in a service, and this service was then publishing the updates onto the service bus for other services to consume. One day a user pointed out that some of the positions of the lat/longs seemed to be slightly wrong,  not massively but it was noticeable.

I checked the logs to find the data coming in and the points looked correct, but they were wrong when they ended up in the database. As I looked into it further I could see that the numbers where losing accuracy somewhere down the line.

I created a test case and pumped it through the system, I could see the data going into the event fine but when it was consumed on the other side it had changed. Hmm, what's going on here?

As I couldn't see anything actually wrong, I headed over to the github issues for the netcore dapr, after a search yielded no results I asked the question.

Sounded like it was to do with the way the type was being converted into a JSON object, but no one really had a solution to fixing it, apart from 'use a string instead of a double'. I wasn't all that happy with that answer, so I came up with a different solution instead.

Hacky Fix incoming...

So instead of using a string in my model to hold the data, I used a customer JsonConverter instead.

The idea is to pass the data through another process as it gets serialized/deserialized so we can change its format etc.  To create a new converter you just need to implement the  JsonConverter<T> type, and then you can override the read and write methods. This is a converter I created:

public class JsonDoubleLatLongConverter : JsonConverter<double>
{
	public override double Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
    {
        if (reader.TokenType == JsonTokenType.String)
        {
        return double.Parse(reader.GetString());
        }

        return reader.GetDouble();
	}

    public override void Write(Utf8JsonWriter writer, double value, JsonSerializerOptions options)
    {
    	writer.WriteStringValue(value.ToString("G17", CultureInfo.InvariantCulture));
    }
}

So on write (serialize), we are outputting our double as a string formatted as G17,  and when we read we are going to just output the string as a double, this way it keeps our accuracy.

So now to use this converter, we just need to add a new attribute to our model properties where we want it to be used:

[JsonConverter(typeof(JsonDoubleLatLongConverter))]
public double? LocationLongitude { get; set; }

[JsonConverter(typeof(JsonDoubleLatLongConverter))]
public double? LocationLongitude { get; set; }

So now when the events get published we can keep the properties the correct types, but they are no longer losing any accuracy.

I tried changing the gas fees, I even converted to USDT to see if that would make any difference but again same error.

The only thing I noticed was the amount I was trying to send had lots of decimal places, like 10.191919191919 or similar. Just as a test I rounded it up to a whole number, and next thing you know the transaction flew through. So, in future be careful using the max button as you could end up with this happening to you!

I kept hearing the word DeFi, but never really understood what it was, just that people kept saying it was the future, so this week I've decided to have a bit more of a deep dive into it.

The thing that really got me interested was watching the gas fee's on the Ethereum network go crazy a couple of weeks ago (I think at one point the average fee was hitting over $20). If you don't know what a gas fee is then in simple terms its how much it costs for a transaction on the Ethereum network.

While is was reading about the high gas  fee's I started reading about the Polygon network. This is pretty much a copy of the Ethereum blockchain, but with the goal to make the transactions much faster, and a lot cheaper. Like much cheaper, less than a 1c in most cases. This opens up the world of DeFi to normal retail investors, as moving you money into the DeFi exchanges and swapping your assets no longer costs a fortune.  

My first DeFi Transaction

So first of all I need to get some of my collateral onto the Pollygon network, so you need a bridge. I had some USDC on the BSC that I could play with, so the first thing I did was send that to Metamask, that was probably the first expense as I had to pay about 30c or something to get it into there.

Next I needed to swap the coins onto the Pollygon network. I was originally going to use bridge.orbitchain.io but that only supports a small subset of coins on the BSC that I didn't have. After a bit of searching I came across xpollinate.io. From here you can go from the BSC to the Pollygon network with one of the stablecoins. Win!

NB - There was a slight issue the first time I tried as there wasn't enough liquidity for my coin. If thats the case give it a bit of time and try again later

Once I'd told it to swap, I had to allow the transaction in Metamask, and a few minutes later (I think I had to wait about 5 minutes) I had the USDC sat in my wallet in the Pollygon network, sweet!

DeFi Exchange

Next I needed an exchange. Now, as I'm new to the space I wanted to start out with something as low risk as possible, where I could just add my assets to a Liquidity Pool and let them earn some interest, and if possible some staking rewards as well.
My first thought was to use Aave as I had heard lots of people talking about them on reddit/youtube. Using them you can add your assets to an LP, and then get a loan out using your staked asserts as collateral that you can then go and invest in other project. At the time I was looking you also get paid to take the loan out more than the interest on the loan! While this all seemed tempting I wasn't really ready to get that deep into it yet. That's when I stumbled across polygon.curve.fi

So curve is pretty much a LP for stablecoins, you can stake on one of their various pools, getting a reasonable APY and also rewards (such as Matic and Crv). This looked like it was probably what I was looking for. Decent APY and reward tokens as well.

The next part is where DeFi comes into its own. When you want to use one of these services, there's no sign up, no verification, no nothing. Its not like Coinbase or Binance where you need to get verified before you can buy anything. All you need to do connect your wallet and your good to go, it really is that simple. The only thing with curve is the interface takes a bit of getting used to, its a bit like an old school console application!

So I simply picked a pool, and deposited my USDC tokens into it, and that's it! My tokens are now in the LP pool, earning interest and I'm also earning Matic and CRV on top of them as well. I can easily withdraw my assets anytime I want, or just go and claim my rewards if I want them.

Be your Own Bank

So now using services such as these, you can effectively be your own bank. You Choose where you want to invest your money, where you loan you money out to based on the projects/companies that you like and serve your best interests. Obviously its still early days, and you have to be very carful where you deposit your money but going forward this is giving the average person much more control of their own finances.
Oh, and this is not financial advice, always do your own research!

Update - So, since writing this originally you can now withdraw from Binance directly to the polygon chain, so you don't have to mess about with a bridge anymore, game changer!

This only seems to be available for the Matic token but this doesn't really matter. When you go to withdraw now just pick Matic, input your wallet address, pick the Matic network and boom!

Compaired to normal polygon transactions the fee is a bit high (10c) but that's nothing really compared to the ETH network. It's a bit of a pain at the minute depositing onto Binance as they have been blocked by quite a few banks, but you can always transfer your funds in from other exchanges.

I use WSL/Ubuntu along with the windows terminal pretty much everyday, and I flipping love it, having the Linux tools on my windows machine is amazing and so useful as a developer. The only issue I have ever really had was the speed, its not that bad, but it could be better 🐢

So, this release was supposed to increase the speed 5 fold or something, so I though great, pulled the update down and updated my Ubuntu install to a WSL2 version.

After everything had finished updating, i fired up the terminal did a git pull in the terminal, did a bit of work then did a git status. And i waited, and waited. It came back, but it was noticeably slower than it was before the update. So I tried another repo. Same again.

Now, all of my code is held in the Windows side of my machine, as I work in visual Studio and VSCode for my development. As a test i created a new repo on the Linux file system, then opened it up in VSCode via the command line, made some changes and did a git status. It was pretty speedy, I did a commit, made some more changes/added files etc and it was still fast, like really fast. I went back to my original repo and tried the same but it was slower again.

So, I've come to the conclusion that WSL2 is only faster if you do you work on the Linix side exclusively, people like me who still open their stuff up from windows and just use the command line tools don't seem to have been helped (quite the opposite in fact) by this release.  It's not the end of the world and i'll be carrying on using it everyday, its just a little disappointing its no faster 😟

So I started lurking in a couple of places, the Reddit community r/CustomKeyboards, and the forum over at geekhack.org. People on there are doing some amazing work with their boards, like some of these are works of art.

One of the first things that struck me was a big percentage of the builds where 60% keyboards. This essentially means the function keys on the top row are missing, there's no number pad and no dedicated arrow keys. There's also a few TKL (Tenkeyless) layouts that have no number pad, and a few split style.

Decisions, Decisions

So I thought i'd have a try and making my first custom. Now, when you start to look into this you'll soon find that a) lots of the custom stuff people sell are really expensive and b) you have to wait ages to get your gear. Especially if you go for a group buy. As i'm not sure what the best layout for me really is, i don't want to start dropping hundreds of pound on something quite yet, so with that in mind I started looking on the big Chinese retail sites banggood and aliexpress. Now, these dont have anywhere near the best quality gear, but its pretty cheap and there's a good selection.

I'd already decided to have a try with a 60% layout, I loved the look of them, I rarely use my number pad and there was a good selection of base kits. In the end I went with the following

• GK61 Hot Swappable 60% RGB Keyboard from banggood. This was a full kit with a PSB mounted in a case, and the PCB was hot-swappable, so you don't have to solder the switches in, meaning you can change them out if you want
• Gateron Brown Switch from banggood. I use cherry reds at the moment, this have a nice feel to them but are maybe slightly loud. The Gateron's are slightly less 'clicky' but should still have the same feel. Also they are the same size as the cherry so most keycaps will fit
• PTB Joker ANSI Keycaps from Ebay. There was loads of group buy kits I was looking at, but most of those would take 3-4 months to get here, and would cost about £90. I wanted something now, i like the way these looked and they shone through so you could see the RGB so I decided to spring for these
• The cable. So the keyboard came with a USB-C port, you did get a standard cable with the kit but I opted to make my own. I'll do a post about that at some point.

So that was it, I order all my stuff and sat back. The switches came in about a week, then I waited for the case/PCB kit. And waited, and waited, and waited.....
Now I know ordering from aliexpress/banggood can be a bit hit and miss, but I had to wait about 2 months for the rest of my order to arrive. Yep, 2 months. I was giving up hope and then one day, it just turned up. I think you also need quite a bit of patience to play the custom keyboard game as well

The mail, the mail is here

So finally, I had everything I needed. Building the board was really straight forward, the PCB was already mounted in the case, all i had to do was pop the switch's in, and put the key caps on. The stabilisers where even already in place so that was a nice touch.  See the bottom of the post for some images of the various stages of build

So then, I started using it. I'm actually typing this post on it. First thoughts, for the price I paid, its a good quality board, and the caps are pretty good as well. I'm also enjoying the brown switches, they have good feedback and sound, and I think i prefer them to the red's I've been using for years.  As for the actual layout, I'm not sure I like it. I need to spend a bit more time with it before I commit, but at the moment I find I miss the dedicated arrow keys quite a lot, and its strange not having any F keys as well. But, I'm going to stick with it for now and give it a good try. Watch this space...

After getting slightly obsessed with keyboards (more on that in another post) I started wondering how people could actually be  productive with a 60% keyboard, that got me thinking more about keyboard shortcuts.

I thought about how sometimes you watch someone writing code, and they never seem to go anywhere near the mouse, they just float across the keyboard like a person possessed, and figured that might be an area I could actually improve on.

Lets go old School 🖥️

Even though I do 95% of my work in Visual Studio and VS Code I did (for about a day) have another go at trying my hand at VIM.  Now, I do kind of know how to use VIM, when i'm in a Linux shell I do tend to use it to edit files, but i'm not that profeicant in it. So, I installed the plugins for VS Code and starting trying to get the hand of it. I lasted about 2 days and just ended up turning it of again. My brains to used to using the arrow and ctrl keys, and thats not really how VIM works. Ok, back to the drawing board.

Working with what you already have

After abandoning VIM, I figured i'd just try and learn some more of the default keyboard shortcuts my editors of choice had built in. Now there are 100's, and you can if you want make your own (more on that later), but there a few I came across that I now find myself using everyday. Not sure how i missed them to be honest.

Ctrl + Tab - Ok, this one is so obvious now I don't know how i missed it. This opens a list of all your open tabs and lets you flick between them.

Ctrl + T - I've been using this one for a while, lets you start typing to find a class/file/method and jump right into it

Ctrl + End/Home - Jump to the start or the end of the open file. Just using Home or End will take you to the end of the current line

Ctrl + Shift + P - In VS code this opens the command pallet, where you can run various command from. I use this a lot if i copy a file in to change the language mode and format the text

Ctrl + Left/Right - Use this to skip words whole words to the left and right. If you also combine it with Shift you can select the words as well

Alt + Enter - This was a bit of a game changer as well. In Visual Studio when you get the dreaded red squiggle under something, place the cursor over the word in question and this keypress will open up the quick actions menu to let you fix it, or give you hints on what to do

Those are the main ones I've started using, and I do feel like its making me code a lot quicker, not quite coding at the speed of thought, but faster than asthmatic ant with some heavy shopping like i was before.

Knocking it up a notch

As i said before, I did try VIM for a couple of days, but just couldn't get used to it. I was a bit annoyed with myself as there's a lot to like. One of the main functions was to be able to easily delete or change a word. I found myself used the CW and DD commands all the time.

So thats obviously not going to work in the normal world of Visual Studio, but I did find there was a couple of shortcut keys to delete the word to the left/right of the cursor, and to delete the current line. By default these were bound to some keys already, but it made more sense (at least in my head) to bind them to alternate keys that mirrored VIM.

So, with that in mind, i fired up the keyboard shortcut settings in VS code (Ctrl+K Ctrl + S), found the commands I needed and re-mapped them to some new keys, like so

Delete word to left, command deleteWordLeft new binding Ctrl+D Ctrl + R
Delete word to right, command deleteWordRight new binding Ctrl+D Ctrl + W
Delete line, command Delete Line new binding Ctrl+D Ctrl + D

If I come across any others of use, or update my prefs with something else VIM like i'll update this post

Related Links

Visual Studio Code Key Bindings

Here you will find the complete list of key bindings for Visual Studio Code and how to change them.

Visual Studio Code

VSCodeVim/Vim

:star: Vim for Visual Studio Code. Contribute to VSCodeVim/Vim development by creating an account on GitHub.

GitHubVSCodeVim