Dirty rugby match

Vue router dirty checking before navigation

Ever filled up a form with a bunch of information and then accidentally navigated away and lost all data? Well, that’s frustrating. However, as a developer, it might be tricky to implement such functionality. This post is a practical guide to implementing is dirty checking using Vue, Vue Router and Typescript. TL;DR Code is available on GitHub. Expected behavior In a Vue app with Vue Router, when a user modifies data in a form and any navigation to another route occurs, the user should be notified and have the ability to cancel navigation. ...

January 11, 2020 · 2 min · LPains

Simple concurrency tester

You probably know how hard it is to purposefully cause a concurrency issue so you can test your code in these edge scenarios. I ran into this issue not too long ago and found that my favorite web service tester Postman doesn’t support sending multiple messages concurrently. I’m sure there are plenty of tools out there that do a great job, but for the simplest possible way you can use a combination of cURL and scripting. Here is an example using Windows, cURL and cmd script. ...

September 6, 2019 · 1 min · LPains

Simple Vue directive for hotkeys

I’m a fan of hotkeys and I use them for a lot of things. In fact, I believe that 80% of the commands I use in my IDEs (Visual Studio and Visual Studio Code mostly) I use via hotkeys. Nothing is better than CTRL + p in VS Code or CTRL + k + d in VS. Anyway, while a lot of users really don’t care about that, those that have data entry intensive use cases will probably appreciate some forethought in hotkeys in the apps they use. ...

July 26, 2019 · 2 min · LPains

Tips and tricks for vue with typescript

I’ve been working on a vue project with typescript for almost a year now. Along the way, we found a few little things that I would like to share. Everything shown here is buried in vue’s documentation somewhere, you may need to dig a little, but it is all there. Note that all examples below use single file components and typescript 3. The project was created using vuecli 3. #1 typing $store and $refs in vue component When using the $store or $refs in a component, there is no typing available due to how vue wire the component together. You can, however, use regular typescript typing in the component class. The only catch is that since vue is assigning values to the properties you create, you need to use the ! operator in the property. This signals the transpiler that this property is going to be set and no warnings need to be issued. Additionally, this approach allows you to easily call methods from imported components which is sweet. ...

June 23, 2019 · 3 min · LPains

TFVC to git import alternative

On [Migrating from TFS + TFVC to VSTS + git]({{ site.baseurl }}{% link _posts/2018-7-15-migrating-from-tfs-to-vsts-git.md %}) post I showed how to export your TFVC repository, or a part of it, to a git repository using git-tfs tool. Today, I found an alternative totally by chance and it might be just what you needed to finally move to git. TFS 2018 and Azure DevOps offers an option called Import Repository located at Code in TFS or Repos Azure DevOps. This option will import or create a git repository from another host such as github or a local TFVC repository. While Microsoft does caution against importing history from TFVC into your new git repository, they actually provide an option to import up to 180 days of history. ...

February 13, 2019 · 1 min · LPains