How to Install Visual Studio Code on Raspberry Pi

Microsoft has a version of Visual Studio Code which will run on the Raspberry Pi OS — formerly known as Raspbian. You can even download it from the APT (Advanced Packaging Tool). And it’s simply 2 lines of code to install:

sudo apt update
sudo apt install code

Afterward, you can launch it from the Programming menu in the GUI or by typing code in the terminal.

And the really nice thing about VS Code being in the APT is that you can update it like any other package on your Pi:

sudo apt update
sudo apt upgrade code

How to get the last element in a JavaScript Array

Let’s say you have an array of numbers (but it could be an array of anything really):

const myNumbers = [1,2,3,4,5]

You want the last number in the array but don’t care how many elements are in the array. The simplest way to get the last number in the array is to get the element who’s position is the same as the length of the array minus 1. The minus 1 is because arrays are zero based, so the first element is accessed like so:

const selectedNumber = myNumbers[0]

Therefore, the easiest way to get the last element from an array without knowing how many elements are in the array is like this:

const lastNumber = myNumbers[myNumbers.length - 1]

Vue.JS — Error when clicking link, but works on second click

Had a not so obvious issue pop up recently in a Vue.JS app I’ve been working on for a while now. I have a table of members and if you click the member name, you get redirected to their profile page. There is a click event on the name link so it will store the profile id then use the router to push the new route. The issue is that when you click the link, you get the following error:

Navigation console error

BUT if you click the link a second time you get redirected to the profile page as expected. This error is basically saying you can’t navigate to the same page you are on. Which is not what I was trying to do. So I was confused.

Turns out everything was working properly in my code I just didn’t account for it all. Here is my original link:

<a href="#" @click="individualStoreKeyAndRedirect(data)">{{ data.value }}</a>

The trouble is the href=”#” is firing before my @click event fires. So, Vue’s router thinks I’m trying to go to the same page. To make the behavior what I wanted, I had to prevent that from firing and just fire my @click event.

Thankfully, Vue makes it pretty easy. Just add .prevent to your @click event. My new link looks like this:

<a href="#" @click.prevent="individualStoreKeyAndRedirect(data)">{{ data.value }}</a>

And now everything works the way I wanted and no console error!

VS Code equivalent to Visual Studio’s Ctrl+m Ctrl+o

Sometimes, when you have a long file, it’s convenient to fold/collapse all the code regions so you can get a big picture of your file. In Visual Studio (the full blown IDE from Microsoft), it’s a simple keyboard shortcut combination

Ctrl+m Ctrl+o

Thankfully, Visual Studio Code has something similar. To fold ALL regions use

Ctrl+k Ctrl+0

Then just use the following to unfold the code file

Ctrl+k Ctrl+j

The nice thing about this is that all the sub regions are folded as well. So you can simply open one region and all the items inside are still folded.

Reference: https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_keyboard-reference-sheets

Copy Multiple Items in Visual Studio 2019

As a developer, I have to copy and paste. A lot! Sometimes I need to copy several items from different locations and then paste them into the same file. This can be very tedious with the traditional Ctrl+C then Ctrl+V process. To help remedy this, I use Comfort Clipboard Pro, a very powerful clipboard manager. I realize for some this may be a bit of overkill or they don’t wish to spend the money on a solution.

Thankfully, Visual Studio 2019 has a feature which can help. Simply copy several items in a row using your preferred method — from the file menu or with a key command. Then place your cursor where you wish for the copied items to be pasted. Next, go to Edit in the file menu and select the Show Clipboard History option (alternately you can press Ctrl+Shift+Insert).

Select Show Clipboard History

This will display a popup list of the things you’ve just copied. Click one of the items in the list.

Displays list of clipboard items

The item you selected will be pasted into your file where your cursor currently sits.

Pasted item from clipboard

That’s it! Quick. Simple. It didn’t require any additional software. And it didn’t cost you anything. Hope that helps!

Copy Visual Studio 2017 configuration settings to Visual Studio 2019

Visual Studio 2019
Visual Studio 2019

Visual Studio 2019 shipped on April 1st. And one of the nice things about it is you can have it installed side-by-side with other version — like Visual Studio 2017. Most developers have spent some time selecting which features of Visual Studio they need installed. A nice addition to the new Visual Studio Installer is you can export your configurations from one version and import into another. So, if you’ve just installed 2019 and wish for it to be configured like your 2017 version, now you can! And it’s pretty straight forward.

Launch the Visual Studio Installer.

Click the Modify button next to your Visual Studio 2017 installation.
This will show you the current configuration. You can just close this modal if you don’t wish to make any changes.
Click the More drop down and then select Export configuration from your 2017 installation.
Choose a location on your system where you wish to save the configuration file.
You will then see all the current settings and give you one last change to make changes. Then click the Export button.
A confirmation message will display when exporting is successful.
Next, click the More drop down for your 2019 installation then click Import configuration.
Locate your configuration file you just exported.
It will display the configuration options which will be imported giving you a chance to make any changes. Then click the Modify button to make any changes to your 2019 installation.

And that’s it! The installer will download and install any needed components based on your older configuration file.

Stop browser from filling in form fields with the autocomplete feature

To be helpful, browsers will cache information you enter in a form field. Then when you comeback and start typing, the same information will pop up near the field so you can click it to have it auto-entered for you. While this is useful, there are times you don’t want this behavior — like a one-time PIN number or CVC code for credit card payment.

Thankfully, there is an easy fix. On either the form itself or the specific fields you wish to stop this behavior, you can add the autocomplete property and set the value to “off“.

autocomplete="off"

On the form itself

<form method="post" action="/form" autocomplete="off">
     ...
</form>

or

On just an input field

<form method="post" action="/form">
  ...
  <div>
    <label for="ssn">Social Security Number</label>
    <input type="text" id="ssn" name="ssn" autocomplete="off">
  </div>
</form>

This accomplishes 2 things. It tells the browser not to save the data for use later. And it stops the browser from caching the data in session history.

This will work with most modern browsers….with one exception. Most modern browsers will not comply with the autocomplete=”off” for login fields; whether on the form or a field itself. It has to do with the way browsers handle password saving/creating internally. So just keep that in mind.

Browser compatibility

Data on support for the input-autocomplete-onoff feature across the major browsers from caniuse.com

For more information:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

How to check which version of .Net Core you have installed.

Open a command prompt and enter the version command.

dotnet --version
dotnet version

This should return a version number. If you get something like the message below, .Net Core is not installed.

'dotnet' is not recognized as an internal or external command,
operable program or batch file.

You can also issue the info command to get a lot more information about your environment.

dotnet --info
dotnet info

If you want to actually look at the different .Net SDKs which you have installed, they can be found here on a Windows machine:

C:\Program Files\dotnet\sdk

JavaScript — Get the Currently Focused Element

In JavaScript, the currently active element is said to have Focus, which means it’s the element being acted upon. Like a form field in which you are typing is said to have Focus.

You can get the currently focused element with a simple reference on the Dom:

var currentElement = document.activeElement

This will return the element which has focus, or null if there is no focused element. It will let you have access to the whole element. You can get to any properties on that element like the Id or Name. The CodePen below is a simple example of using the document.activeElement

Example

See the Pen Get Focused Element by Chris (@cgreenws) on CodePen.

For more information:
https://www.w3schools.com/jsref/prop_document_activeelement.asp
or
https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement