VueJS GistPad Interactive Playground

Recently I installed a VS Code extension called GistPad which from the marketplace docs says:

GistPad is a Visual Studio Code extension that allows you to manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local.

It is a great extension and I am using Gists way more now.

Install

To install launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install vsls-contrib.gistfs

The marketplace docs are a great place to start reading up about it.

GistPad Interactive Playgrounds

Another neat feature is the interactive playgrounds which again from the marketplace docs explain :

If you're building web applications, and want to create a quick playground environment in order to experiment with HTML, CSS or JavaScript (or Sass/SCSS, Less, Pug and TypeScript), you can right-click the Your Gists node and select New Playground or New Secret Playground. This will create a new gist, seeded with an HTML, CSS and JavaScript file, and then provide you with a live preview Webview, so that you can iterate on the code and visually see how it behaves.

I am a big fan of VueJS so I decided to spin up a new interactive playground choosing VueJS from the menu that appears.

There is a nice hello world style template that you can use to get started with.

UK Police Data

Rather than displaying weather data or random data, I decided to use crime data for Oxfordshire from Data.Police.UK which seemed an interesting dataset to play around with.

I started by reading the docs and looking the example request which takes pairs of lat/long coordinates to describe an area:

https://data.police.uk/api/crimes-street/all-crime?poly=52.268,0.543:52.794,0.238:52.130,0.478&date=2017-01

I then found this site which allowed me to draw an area and then get those lat/lon coordinates.

Then looking at the sample JSON response back from the API I then had enough to get started on my VueJS GistPad Interactive Playground:

[
    {
        "category": "anti-social-behaviour",
        "location_type": "Force",
        "location": {
            "latitude": "52.640961",
            "street": {
                "id": 884343,
                "name": "On or near Wharf Street North"
            },
            "longitude": "-1.126371"
        },
        "context": "",
        "outcome_status": null,
        "persistent_id": "",
        "id": 54164419,
        "location_subtype": "",
        "month": "2017-01"
    },
    {
        "category": "anti-social-behaviour",
        "location_type": "Force",
        "location": {
            "latitude": "52.633888",
            "street": {
                "id": 883425,
                "name": "On or near Peacock Lane"
            },
            "longitude": "-1.138924"
        },
        "context": "",
        "outcome_status": null,
        "persistent_id": "",
        "id": 54165316,
        "location_subtype": "",
        "month": "2017-01"
    },
    ...
]

VueJS GistPad Interactive Playground

Right-clicking in the GistPad tab in VSCode showed me a menu allowing me to create either a public or private interactive playground.

The template is plenty to get started with.

It gives you 3 files to edit and a preview pane that refreshes whenever you make a change which is an excellent developer inner loop.

So after some trial and error, these were my 3 files all associated with a GitHub Gist

The end result

The GistPad toolbar has an icon that allows you to open a console to view the output of your console.log statements and I soon had a working version.

If you would like to see my Police Data sample try this link:

https://gist.github.com/solrevdev/41a7adb028bb10c741153f58b36d01fe

All in all, it’s an excellent experience.

If VueJS isn’t your thing then react is an option and typescript versions of both these frameworks are available and it’s open for more templates to be submitted to them.

Success 🎉