Category Archives: programming

javascript development with vim

Leave a reply

Vim is great as a lightweight editor for JavaScript programming. But pretty soon I end up missing some more advanced features like syntax checks and code completion. Syntax highlighting only takes you so far.

Recently I was working on a Node.JS project, so I thought I’d find me some plugins for Vim to get those more advanced development features. Vim is super extensible with its massive plugin ecosystem, but sometimes it can take some tinkering to get things to work. After a bit of searching and trying things out, I managed to get code completion working for JavaScript code, and have basic syntax checking active.

I found that the CoC plugin, in combination with some of its extensions work perfectly.

First you need to install the CoC plugin. This plugin is more of a framework to get code completion and VSCode-like features in Vim. So you can use this for other languages too, like Python, Rust, Java, PowerShell, C#, etc. You need Node installed for this to work, but if you’re working with JavaScript, you most likely have that installed already.

Once you have the plugin set up, you then add CoC extensions for the languages you want to use. For JS this turns out to be the TypeScript server plugin, which gives your JS & Typescript support, including JSX and TSX. I also added the JSON plugin.

To add the CoC extensions, open Vim and install the extensions using:

:CocInstall coc-json coc-tsserver

That’s about it. Now if you open up a .js file, you should be getting JS code completion. If you mess up some code, you’ll get some error indications in the margins, telling you something is not quite right with your code.
Handy stuff!

Yep. There’s clearly something wrong with that code.
Helpful code completion info right there.

A good way to find a list of more CoC extensions is through VimAwesome. There’s something in there for everyone it seems.

extend visual studio with simple scripts

Leave a reply

There’s this neat feature in Visual Studio called External Tools that’s underrated. What it does is allow you to run any external tool and pass in stuff from Visual Studio and do something cool with that. For example the current file in your editor, or the currently selected text.

This means that you can write a PowerShell script that gets some input from the command line, and for example edit a file (the current file in VS), or search for a substring (selected text) in other files, or a database.

I’ve used this to do a complex number of find-replaces on the current file in a single run. I also use this to quickly find the source code of a stored procedure that’s used in code, by selecting the stored procedure’s name and running the script.

How do you set this up?
In Visual Studio, in the menu click Tools, then External Tools.
There you click Add and give the thing a title.
The command can be a bit tricky, but the easiest thing is to use a .cmd script, like test.cmd.


Then you create this cmd file, and make sure it’s in your path. You can also use the full path to the script for your command instead.
Now pick your arguments from the arrow at the right of the Arguments input box. I’m using ItemFileName here, but there’s plenty of options.

You’re all set.

As a test script you can use this gem:

@echo off
echo ** Command line parameters **
echo %*
pause

If you want to wrap a more advanced PowerShell script, you can use this:

@powershell.exe -nologo -noprofile -file c:\tools\do-something-awesome.ps1 %*

If you run this from a file now, you’ll see the passed in parameters in the script’s output. Like this:

With this technique you can easily and quickly extend your Visual Studio setup to do some mundane tasks a lot faster, using PowerShell, Node.js, Python or whatever your favorite scripting language is.

publish a static website to Azure using GitHub actions

Leave a reply

Last post I talked about setting up a serverless website on Azure using BLOB storage. What I didn’t go into is how to publish files to that site automatically. Yes, you can use the BLOB explorer to manually upload your files but seriously, who wants to do that kind of boring task if you can let computers do that for you.

Instead, what I do to publish this excellent programming guidelines website is the following:

  • I make my changes locally and test it.
  • I commit & push my changes to the master branch of my git repository.
  • A GitHub action kicks in and published the site to the Azure BLOB container.

How sweet is that? Pretty sweet, I know. How do you set this up? Well let me take you through the steps my friend, and automated Git deployment will soon be yours to enjoy as well.

  • You need to create a Git repository on GitHub.
    Now that you can create unlimited private repositories, you don’t even have to expose it to the public, which is nice.
  • Clone the repo locally, and create a source/ directory in it. This is where the source code will go, and that’s what we’ll push to the Azure BLOB container. Any other files you don’t want published go in the root, or in other folders in the root of your repository.
  • Copy your source code into the source/ folder, or create a simple index.html file for testing the publishing action.
  • Go to your repository page on the GitHub site, and click the Actions tab at the top.
  • Click New Workflow, choose “set up a workflow yourself”.
  • It will now create a YAML file for you containing your workflow code.
  • Paste the content for your YAML file listed below. Notice the “source” folder in there? That indicates what folder will be copied to Azure.
    In case you run into trouble, you can dig in to the Azure Storage Action setup yourself, but it should do the trick.
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps: 
    - uses: actions/checkout@v1
    - uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '3.0.100'
    - uses: lauchacarro/Azure-Storage-Action@v1.0
      with:
        enabled-static-website: 'true'
        folder: 'source'
        index-document: 'index.html'
        error-document: '404.html' 
        connection-string: ${{ secrets.CONNECTION_STRING }}
  • Last step is to set up that CONNECTION_STRING secret. This is the connection string to your Azure storage container. You can set the secret from your GitHub repository Settings tab, under Secrets.
    Click New Secret, then use the name CONNECTION_STRING and paste the access key value from your Azure storage account.

You’re all set up!
To test your publishing flow, all you need to do now is push a commit to your master branch, and see the GitHub action kick in and do its thing.
You should see your site appear in a few seconds. Sweet!

Update: recently I found out the workflow broke because of a bug in the latest version of the action. To bypass this I now fixed the version in my workflow YAML file to v1.0, which still works. It’s probably a good idea to avoid this kind of breaking changes by fixing the version of any action you use in your GitHub actions anyway. It will avoid those annoying issues where things work one day, and don’t the next.

how to host a serverless static website on azure

Leave a reply

For my little gfpg project I wanted to put a simple static website online without having to set up and maintain a web server. I read about going serverless with a static site using S3 on AWS, but I wanted to try that on Azure instead. BLOB storage seemed the obvious alternative to S3, but it took some searching around and finding the right documentation on MSDN to get it all up and running.

If you’re on a similar quest to publish some static content to Azure BLOB storage as a serverless website, this short guide will help you along.

  1. First of all we need to create an Azure BLOB storage account for the site. The most important part is to choose a general-purpose v2 Standard storage account, for the account kind. This is the only type that supports hosting a static website. Guess who didn’t do that.
  2. Next thing is to enable static hosting of your files. This will create a $web folder in your storage account, which will be the root folder of your website. It’s that simple.
  3. Copy your files into the $web folder using the Storage explorer blade in the Storage account menu, or the Storage explorer app. You can already test your site using the Azure endpoint.
The Storage explorer is a quick and easy way to upload and manage your files in the BLOB storage account.

You can stop here if this is a personal project and you don’t need HTTPS support or a custom domain. In my case, I did want to go all the way, so here’s how to get that working as well.

  1. Get a domain name. Make it sassy ;). Make sure your domain registrar allows you to edit the CNAME records for your domain. This is pretty standard, but not all cheap web hosters allow this and you need it later on to hook up your domain to Azure.
  2. Set up an Azure CDN endpoint for your static site. I picked the Microsoft CDN option which is the most basic one, so you don’t need any accounts with a third party CDN provider.
  3. Now you can map your custom domain to your Azure CDN endpoint using a CNAME record.
  4. Create an HTTPS certificate for your site on Azure with just a few clicks. I was afraid this was going to be hard but it’s so damn easy it’s beautiful. There really is no excuse anymore to let your site just sit there on HTTP these days.
  5. Last thing to do is set up some caching rules for the CDN. We don’t want to be hitting the “slow” BLOB storage all the time and use the faster CDN instead. Depending on the option you chose for the CDN this will differ, but if you picked the Microsoft one you have to use the Standard rules engine to set your caching rules. If you picked Akamai or Verizon, you can use CDN caching rules instead.
    For a simple setup on the Microsoft CDN, go to the CDN settings Rules engine page, and set a global cache expiration rule to override and an expiration you like.
    After a few minutes you’ll see the cache header appear in your HTTP requests.
  6. Here you can also create a rule to redirect HTTP traffic to HTTPS, so people don’t accidentally hit the insecure version.

One more tip on the CDN. You can also purge the CDN cache after you pushed an update to your site to apply the changes, before your CDN cache expires. This is handy if you’ve set a rather big expiration time, because you don’t expect the site to change very often.

From the CDN account, you can purge content on a specific path, or everything at once.