DEV Community: Brandon Brown

The Best VSCode Extensions for Web Development in 2020

Brandon Brown — Mon, 13 Jul 2020 07:00:00 +0000

I’ve been using Visual Studio Code (VSCode for short) as my editor of choice for what feels like a very long time. Ever since I first set eyes on the project the project and the community has intrigued me.

My primary use case for VSCode is web development and over the years I’ve amassed a very finely tuned environment and extensions list that comes with me to every computer I use. What follows is a list of the best VSCode extensions that I have installed and personally used, along with an explanation of the value each extension provides.

Settings Sync

The number one extension you need to install after you’ve installed VSCode. Settings Sync allows you to sync your VSCode settings to a private GitHub gist so that you always have your setup backed up.

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Note: There is going to be a built-in “Settings Sync” eventually so this project may become unmaintained in time, however for right now it works amazingly.

Project Manager

The second most important extension if you work on multiple repositories or projects. Project Manager gives you a menu where you can quickly move between projects.

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

File Icons

The stock file icons are kinda meh, so add some pizzazz to Explorer sidebar with the File Icons extension.

https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons

Open In Browser

If you work with HTML files a lot, this one is for you: simply open the command palette and type “open in browser” to open your HTML file in your default web browser.

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

Tomorrow Theme Kit

Theme your editor with one of the best syntax and colour schemes.

https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme-TomorrowKit

File Size

Adds a simple file size indicator to the status bar for the current file. This should really be baked into the editor by default.

https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize

Word count

Adds a simple word count indicator to the status bar for the current file that updates as you type. Another extension that should really be built-in.

https://marketplace.visualstudio.com/items?itemName=ms-vscode.wordcount

Duplicate Action

I can’t believe this isn’t built-in… but this extension adds a “Duplicate” action to the right-click context in the sidebar.

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate

SSH

If you frequently ssh into machines, this extension allows you to connect to a remote host over ssh directly in VSCode! This is handy when editing config files where you don’t want to be forced to use an unconfigured version of nano or vim on the server.

https://marketplace.visualstudio.com/items?itemName=chrmarti.ssh

Excel Viewer

Sometimes you just need a better way to view tabular data.

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

GitHub Pull Requests

Manage your GitHub Pull Requests directly within VSCode.

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

Regex tester

Inline regex testing within VSCode.

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

Emojisense

You’ve likely used the “colon-word-colon” format for emoji in many pieces of software, now you can use that same familiar emoji format within VSCode.

https://marketplace.visualstudio.com/items?itemName=bierner.emojisense

Run On Save

Need to run some arbitrary code whenever you save a file? RunOnSave is the extension for you.

https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave

SVG Viewer

Sometimes you just need to view what an SVG renders like instead of editing the code of said SVG.

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Bracket Pair Colorizer 2

Sometimes code gets hairy, deeply nested, and overall visually difficult to grok. Fortunately, Bracket Pair Colorizer can help with making sense of your “eight-level-deep if-statement mixed with ten functions and callbacks”.

Make sure you install v2 as it comes with a significant speed improvement as it uses the built-in VSCode bracket parsing engine.

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2.

Toggle

Need to toggle different settings in VSCode based on a keyboard shortcut? Now you can do that. I personally used this extension to toggle my environments for “coding for work and pleasure” and “teaching code to a class of students” which changes my window zoom level and the theme for my editor.

https://marketplace.visualstudio.com/items?itemName=rebornix.toggle

Code Spell Checker

A spell checker for code and other documents in VSCode.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Open in GitHub

Also works for BitBuckethttps://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github

Prettier

The defacto code formatter supporting a wide variety of languages.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Document This

Called from the command palette, Document This will automatically document the outermost function under your cursor.

https://marketplace.visualstudio.com/items?itemName=joelday.docthis

Better Comments

Adds better syntax highlighting to specific content within comments.

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Markdownlint

Format your Markdown files using a linting library with standard and sane defaults based on a combination of Markdown and CommonMark markup languages.

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

Version Lens

Used in your package.json files, this extension allows you to view and even update to the current latest version of an npm package, as well as the next package supported by it’s version string.

https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

How to setup XAMPP-VM in MacOS

Brandon Brown — Mon, 29 Jun 2020 07:00:00 +0000

If you’re someone just getting started with web development and you’re leveling up your learning to include PHP and other server-side languages, and you have an Apple Mac product of some kind running macOS 10.15, it’s very likely that you’ve ran into a wall trying to get your first index.php file to run. You could just open the Terminal.app and type php index.php which would run your file through the built-in php interpreter, but let’s say you want to view it in your web browser; how do you do that? Well, this is where XAMPP comes in.

XAMPP is a suite of tools delivered to you as a single package that you download and install on your computer. Bundled inside it is Apache (a web server), MariaDB (an open source MySQL-compliant database server), PHP(a server-side programming language), and Perl (a programming language that many people love). The XAMPP project is a great tool to use for developing websites as it is cross-platform (Windows and Linux packages are available for it too) and allows you to build your project before you move on to other more advanced ways of serving your content (like using other macOS tools, or even configuring a Docker-based setup).

The newer version of XAMPP for macOS is called XAMPP-VM. Unfortunately the documentation for XAMPP-VM is a little lacking for beginners, so in this post I intend to fill in the gaps of knowledge. Note: It is expected that you understand the basics of how to configure an Apache server before moving on to the rest of this post.

Installation

The first step to getting XAMPP-VM installed can be done one of two ways:

Install XAMPP-VM by downloading it directly from the website, opening the DMG file, and dragging the XAMPP.app file to the Applications folder.

Download and install it with homebrew (much easier).

brew install xampp-vm

Once installed, run XAMPP.app from the Applications folder. You should be presented with the application containing some buttons and an empty “status” area. First thing you want to do is click the Start button here; this fires up the VM and gets the server running so we can complete the rest of the configuration. Next you want to click on the Volumes tab at the top, then Mount, then Explore once the Mount button is greyed out.

If you clicked Explore, Finder should open to the location where the XAMPP server config is available to browse. Click on the etc folder here, then go to the next section.

Apache

There’s a few tweaks you need to make to the Apache config before moving forward:

Main config `httpd.conf`

Find and edit the httpd.conf file in the etc folder, and uncomment the line containing #Include etc/extra/httpd-vhosts.conf by removing the #. This will allow us to configure Apache using VirtualHosts without having to edit the main Apache config file anymore.

VirtualHosts `httpd-vhosts.conf`

From the etc folder click on the extra folder and then open the httpd-vhosts.conf file in your editor. You should be presented with a file containing two dummy entries, feel free to delete the last entry and edit the first one to match the example below:

<VirtualHost *:80>
  DocumentRoot "/opt/lampp/htdocs/testfolder"
  ServerName testserver
</VirtualHost>

In Finder, create a new folder called testfolder inside the htdocs folder that sides beside the etc folder we’ve been doing our edits in.

Hosts file `/etc/hosts`

Open the /etc/hosts file and add a new entry like so:

127.0.0.1 testserver

Make sure the value you used in the vhosts config file matches the server name in the hosts file (in this case we use testserver).

Testing in a browser

Open your browser and navigate to http://testserver:8080. You should be presented with an index file listing page that should be blank. If yes, you’ve successfully configured Apache to server your PHP files! Now all you need to do is start writing your PHP files inside the /opt/lampp/htdocs/testfolder folder and you should be able to view them in your browser.

Developing a PHP application in XAMPP-VM

The core piece of this post is this: all development work needs to happen inside of the mounted lampp folder. This means you can’t symlink your Dropbox folder or any other folder from your local drive into the XAMPP-VM drive, but instead have to copy-paste your work from elsewhere in, or work from directly inside the VM drive. The XAMPP blog has a great post covering this.

The reason for this: When you clicked the Mount button above, this triggered XAMPP.app to “mount a network drive” and symlinked it in Finder so you could access it easily. When you “Unmount” the drive or shut down the VM, you can no-longer access your server content because it resides within the mounted network drive.

How to use a DSLR or mirrorless camera as a webcam on MacOS

Brandon Brown — Wed, 26 Feb 2020 08:00:00 +0000

This post contains affiliated links and I would really appreciate it if you purchased any of the devices/items mentioned in this post through their respective link, if it makes financial sense to do so. 😄

In this post I’m going to show you how you can turn a drab-looking webcam video feed into one that will have people you know talking. The solution that I propose could be used for a multitude of reasons, like: remote conferencing, “talking head” style video tutorials, and even live-streaming on Twitch or other platforms. The possibilities are up to you as a creator of content and how you choose to use it. Minus the green screen, I basically have all the parts to run my own Twitch channel, minus the skill and the audience… 😅

Over the years and having worked semi-remote at a few companies, I’ve migrated from built-in camera and mic for meetings, to using an external webcam to better display my face and surroundings, then later incorporating an external microphone for better audio. Once I reached a happy medium, I didn’t really tweak my setup. Before I started on this journey, my initial setup included:

a Logitech C920 webcam
an Audio-Technica AT2005USB USB microphone (which was purchased back in 2015 for a failed podcast)

This setup worked for me, but the I noticed on particularly bright days that the webcam video quality would get washed out. This is mostly due to my desk being directly in front of a window due to space constraints in my home office. After living with this for some time and tweaking the Logitech camera settings a bit to try and make it slightly better, I decided that upgrading my camera was the only option and necessary to improving the video quality any further.

My original setup, with just the Logitech C920, looked something like this image:

and with a new camera and some dimmable bi-colour LED lights and diffusers, I turned it into this:

Instantly, a few things happened:

the white balance in the image was no-longer shifted to an odd temperature
the quality of the image drastically improved
using a camera lens with a low aperture creates a softer background, allowing the viewer to focus on me and not what’s behind me

My Current Setup

My current setup is running macOS 10.14.6 Mojave on a MacBook Pro 15” 2018 (supplied by my employer), so your mileage may vary using another machine/operating system. As far as where I learned any of this, I owe a lot to a video from one of my favourite YouTubers DSLRVideoShooter, this post by Matt Stauffer, and the setup that Kent C. Dodds uses.

It also helps that I was already interested in videography and identify as an amateur photographer, so I understand the importance of light in a scene, the quality of the glass on the camera, and the capabilities of the camera sensor.

Parts list

Below is a list of parts I’ve compiled based on my Amazon order history for this project. I bought everything roughly around the same time to put this all together.

DSLR or mirrorless camera
Elgato Cam Link 4K — used to connect the camera to the MacBook/computer, acting as a USB webcam interface
Dual monitor desktop mount — used to hold up my monitors, at a great price
Single monitor desktop mount — used as a somewhat free-standing camera mount that can swing around the desk with relative ease rather than remaining a fixed position forever
Some 3/8-inch and 1/4-inch tripod screws — used to attach the monopod extension to the single monitor mount arm
some screw/nut washers — to give some height to the tripod screw so the threading doesn’t go too far inside the monopod extension
Monopod extension pole — attaches to the single monitor mount arm with a screw from above
Mini ball head — goes on top of the monopod extension pole
Dimmable bi-colour LED lights and diffusers — used to provide nice soft lighting

A DSLR or Mirrorless Camera

For this project, I used a Lumix G85 mirrorless camera which I already had for videography, but you can find other cameras that will also work so long as they have an HDMI output. You’ll also want to pick a fairly light (in weight) camera as large bodies with bulky lenses will potentially cause unnecessary strain on the parts holding it up, and you don’t want them falling randomly in the middle of the night onto the floor from this height.

A large factor in the decision to purchase a camera is whether or not it has HDMI-out, and also whether it offers a “clean” HDMI feed. You may also need an adapter from HDMI to mini- or micro-HDMI for your camera. Another factor is whether you want to use a battery or purchase a “dummy battery” for it and have the camera powered from an electrical outlet.

Once you’re able to connect an HDMI cable to your camera somehow, be it through an adapter or a dongle, move onto the next section.

Elgato Cam Link 4K

The one piece of tech that allows us to use the camera like a webcam is the Elgato Cam Link 4K which I picked up recently. It’s a bit pricey, but the functionality is what makes this a great buy: virtually any HDMI signal you plug in to the Cam Link will show up in your settings as if it were a USB webcam 🤯 with no extra software required.

The way it works in practice: plug the HDMI cable coming from your camera into the HDMI port on the back end of the Cam Link 4K, then plug the USB end into your computer. In my case I need a USB 3.x to USB Type-C adapter for this.

Caveat : I’ve seen some chatter around the internet about the Cam Link 4K not working unless it is plugged into a USB 3.x powered USB hub, or directly into a USB 3.x port. My own personal experience can corroborate that the Cam Link does not work when plugged into a USB 2.0 port or hub and requires you to have it directly plugged into a 3.x USB port.

I was able to get it to work reliably when plugged into the USB 3.x port on the back of my Dell U2718Q monitor and have the USB upstream cable connected directly to a USB 3.x port on my MacBook.

Testing the video

In order to test that the camera is working with the Cam Link 4K, open up Quicktime and create a “New Movie Recording” (File > New Movie Recording). This should open up a recording window which might show your Facetime camera by default, or whatever your default webcam is set to. If your camera is turned on, connected to the Cam Link 4K which is connected to you computer, then you should be able to select it as the “Camera” that Quicktime will use.

Mounting the camera for the best angle

Generally speaking, getting the camera at or slightly above your eye line provides the best angle for remote meetings. This means we need to get the camera on top of, or above, the main screen you will be viewing. I have a dual-monitor setup so this meant getting the camera above my main monitor. To do this I employed the used of my single monitor desktop mount and removed the VESA mount from it. I then removed the mount that the VESA plat attaches to leaving a hole in the arm large enough to get a screw through and attach the monopod extension pole. Here is a video describing very similarly how it is done (without having to drill a larger hole as my monopod extension arm had a 1/4-20 thread and the screw for it fit through the hole without modification).

Though I already had a set of friction arm mounts and used one temporarily to mount the camera while waiting for parts to arrive, this 11-inch adjustable articulating friction arm is the preferred purchase now should you choose to use this instead of the monopod extension mount.

Lighting

Lighting is one of the most important aspects to achieving great video quality. I probably didn’t have to splurge and upgrade from the Logitech C920 because if I had a better control of my lighting, the camera sensor wouldn’t have to work so hard. A well-lit “scene” can be what makes or breaks it for your camera, and better lighting will always produce a better result, no matter the camera you use.

The LED lights and diffusers that are used in this post were purchased previously and came with their own stands, AC adapters and cables, but not the diffusers (which I purchased later). If I were ordering them now, I would purchase some Elgato Key Lights. Alternatively, you could attempt to make your own.

Getting better audio

Up until now, if you’re the kind of person who doesn’t have a need for an external computer monitor to supplement your MacBook screen, you’ve probably relied on your built-in microphone, or even used the built-in microphone on your external webcam (if you have one). Achieving better audio involves ditching those built-in devices and using an external microphone.

Something like a plug and play lavalier microphone which plugs into the mic port on your camera (if it has one) or the headphone port on your MacBook. You could even get a USB microphone like this dynamic XLR & USB-c microphone, or this dynamic USB microphone, which plug directly into a USB port.

Any of these choices will significantly increas the quality of your voice! These microphones will make it easier for participants to hear you and can even produce some praise from them over how good your voice sounds. Marco Arment has a great article covering a wide variety of microphones that he has personally tested and provided feedback on for podcasting but all of which would work here.

You’re not limited to microphones either, you could simply purchase a USB wired headset and call it a day. For some, this might be more convenient than a dedicated microphone as well as you can wear it while having your hands free to type, and wherever you move your head it won’t affect the direction of your voice into the mic.

Setup Sonarr and Radarr to notify via SMS with Twilio Runtime

Brandon Brown — Tue, 10 Apr 2018 07:00:00 +0000

So you read my post on setting up the ultimate media server for movies and tv shows and you’re in awe over how amazing a feeling it is to automate something that is such a pain to manage manually. You might also wonder what it would be like to get notifications when episodes or movies are downloaded. I came up with a rather non-obvious solution that might pique your interest: getting download, etc. notifications via text message.

One of the somewhat buried features of Sonarr and Radarr is the ability to notify you when episodes or movies have been grabbed, downloaded, upgraded, and renamed. There are a few options for these: email, twitter DMs, various push notification services, and webhooks, to name a few. Email notifications work in a pinch but you can’t customize the content, and some of the various push notifications are cost prohibitive for a project like this. What that leaves you with is using webhooks to notify you, but how does one even begin to utilize this feature?

Enter Twilio

Twilio is a developer-centric platform for integrating programmable voice and SMS into your products and projects. If you haven’t yet, create a Twilio account and buy a local phone number to use for Programmable SMS. If you’ve got an account and a phone number already, great!

Twilio Runtime Functions

Over the last few years Twilio has really expanded their services, one of which is providing a “serverless” environment like AWS Lambda hosted on their platform called Functions.

Twilio Functions is a serverless environment to empower developers like you to quickly and easily create production-grade event-driven applications that scale with your business.

Twilio Functions is a very inexpensive solution, so much so that at the time of writing your first 10K invocations are free, then $0.0001/invocation thereafter. I’d be very surprised if you went over the 10K free tier within a year for this project. You do pay $0.0075 CAD (at the time of writing) per SMS sent plus $1 CAD/month for each phone number you send from, however the overall cost is negligible in the long run.

Below is a summarization of how the flow works:

NOTE: I don’t think that Twilio Runtime was designed to work in the way I’m proposing it be used. In the future this method may not work as mentioned here so your mileage may vary.

Create a new Runtime Function

At this point head over to the Runtime Functions console page. From there, create a new Function, then select Blank Template.

Once in the Function editor, set the Function Name and set the Path to whatever endpoint you want to use (for this post I use /notifier) to execute your function.

Take a look at the code editor on the page as this is where your handler will be written to deal with an incoming webhook request and send a text message. Since this handler is a serverless function, you’ll be writing it in Javascript.

Example

A very basic handler that returns a 200 OK on request and logs out the context and event objects looks like this:

exports.handler = function(context, event, callback) {
  console.log('Got the message')
  console.log(context)
  console.log(event)

  // Providing neither error or response will result in a 200 OK
  callback()
}

Configuration and Handler Setup

You can configure your Runtime Functions to include a pre-initialized Twilio client in the context object, the npm package dependencies, and even environment variables available to the handler. You’ll want to take a look at the Function execution docs to learn all of the details about how to construct your handler, as well as some examples to get you started.

What I eventually came up to handle webhook events from Sonarr and Radarr in one handler is below. You can take this chunk of code and paste it verbatim into your Function editor and click Save to get started quickly, but try to reason about it before you blindly copy-paste code from the internet 🙂.

const get = require('lodash/get')

const EVENT_DOWNLOAD = 'Download'
const EVENT_UPGRADE = 'Upgrade'

const getMovieMessage = event => {
  const {eventType, movie, release} = event

  let message = `Radarr: `
  switch(eventType) {
    case EVENT_DOWNLOAD:
      message += `${movie.title} is ready to watch in ${release.quality}`
      break
    case EVENT_UPGRADE:
      message += `${movie.title} has upgraded to ${release.quality}`
      break
    default:
      message += `Message for '${eventType}' event is not defined`
      break
  }

  return message
}

const getTVShowMessage = event => {
  const {eventType, episodes, series} = event

  let epTitles = []
  episodes.forEach(episode => {
    const {title, seasonNumber, episodeNumber} = episode
    epTitles.push(`${title} (S${seasonNumber}E${episodeNumber})`)
  })

  let message = `Sonarr: `
  switch(eventType) {
    case EVENT_DOWNLOAD:
      message += `${series.title} has episodes '${epTitles.join(', ')}' ready to watch`
      break
    case EVENT_UPGRADE:
      message += `${series.title} have upgraded episodes '${epTitles.join(', ')}' ready to watch`
      break
    default:
      message += `Message for '${eventType}' event is not defined`
      break
  }

  return message
}

exports.handler = function(context, event, callback) {
  console.log('Got the message! Parsing now...')

  const eventType = get(event, 'eventType', null)
  if (eventType === null) {
    // Probably not a request we care about, just 200 OK
    callback()
  }

  const client = context.getTwilioClient()
  let messageBody

  // Check if we're parsing a Radarr or Sonarr event
  const movie = get(event, 'movie', null)
  if (movie !== null) {
    // Radarr event
    messageBody = getMovieMessage(event)
  } else {
    // Sonarr event
    messageBody = getTVShowMessage(event)
  }

  console.log('Parsed and built the message, sending a text.')

  client.messages.create({
    to: process.env.TO_NUM,
    from: process.env.FROM_NUM,
    body: messageBody
  }, function (err, res) {
    console.log("We're done!")
    callback()
  })
}

Testing The Function Endpoint

Below are some test commands I used to simulate a webhook hitting my Function. When you’ve got your function setup and deployed, you can test it out by copying your personal Runtime HTTP url from the Function page and replacing https://secret-runtime-slug.twil.io/notifier in the below examples:

# Single TV show episode
echo '{"episodes":[{"id":123,"episodeNumber":1,"seasonNumber":1,"title":"Test title","qualityVersion":0}],"eventType":"Test","series":{"id":1,"title":"Test Title","path":"C:\\testpath","tvdbId":1234}}' \
  | http POST https://secret-runtime-slug.twil.io/notifier

# Multiple TV show episodes
echo '{"episodes":[{"id":123,"episodeNumber":1,"seasonNumber":1,"title":"Test title","qualityVersion":0},{"id":456,"episodeNumber":9,"seasonNumber":4,"title":"Another test title","qualityVersion":0},{"id":789,"episodeNumber":23,"seasonNumber":10,"title":"Yet another test title","qualityVersion":0}],"eventType":"Test","series":{"id":1,"title":"Test Title","path":"C:\\testpath","tvdbId":1234}}' \
  | http POST https://secret-runtime-slug.twil.io/notifier

# Movie
echo '{"remoteMovie":{"tmdbId":1234,"imdbId":"5678","title":"Test title","year":1970},"release":{"quality":"Test Quality","qualityVersion":1,"releaseGroup":"Test Group","releaseTitle":"Test Title","indexer":"Test Indexer","size":9999999},"eventType":"Test","movie":{"id":1,"title":"Test Title","releaseDate":"1970-01-01","folderPath":"C:\\testpath"}}' \
  | http POST https://secret-runtime-slug.twil.io/notifier

Note: I’m using httpie where http is used. The payloads used for these test calls are ripped straight from the data that both Sonarr and Radarr send when configuring a webhook notification in their respective app UI so you can use them as-is instead of using the “Test” button in their UI.

Below is a screenshot of what it looks like when receiving a text in  Messages:

As you can see, I can receive these notification messages on not only my phone but also my Mac! This ensures that at least one of my devices will receive a notification somewhere but at minimum I’ll get them on my phone.

How To Setup A Windows 10 Application Network Killswitch

Brandon Brown — Fri, 12 Jan 2018 08:00:00 +0000

A more appropriate title for this could be: How to setup Windows 10 firewall rules to kill network traffic to an application when it disconnects from your VPN connection, for whatever reason.

If you’re concerned with privacy and you’re using a VPN connection on your computer to browse the internet, you’re likely wanting to protect your downloading habits from prying eyes among other things. In a previous post I documented the ultimate automated media setup and covered a bit on setting up a VPN to ensure you’re safe from your ISP and other 3rd-party snoopers. In this post I want to show you how to setup an application in Windows 10 to kill network activity only for that application using just the Windows Firewall and some straight-forward inbound/outbound rules.

To begin, you’ll want to ensure that your main network interface has a “Private” network profile and your VPN network interface has a “Public” network profile. If these profiles don’t match what you’re seeing in the Network and Sharing Center in Windows, don’t worry as this is something you’ll be changing. If you can’t modify these profiles, you might have to move on and try something else as I have yet to find another solution.

Setting up the network adapter profiles

Find and open the “Local Security Policy” application by using the search in the start menu. In the left sidebar “Security Settings” list find “Network List Manager Policies” and click on it. In the right side of the window find your regular network interface adapter (it’ll be the one that isn’t your VPN adapter most likely, and not the one that says “All Networks”.) Double-click to open your adapter properties, then go to the “Network Location” tab. Ensure that the Location type is set to “Private” and the User Permissions is set to “User cannot change location”. Do this again for your VPN adapter but ensure that the Location type is “Public” instead.

Now you can go about setting up the Windows Firewall rules.

Setting up the Windows Firewall rules

Find and open the “Windows Firewall” application by using the search in the start menu again. You’ll want to delete any rules you have for the application you want to have a killswitch setup for in both “Inbound” and Outbound rule sets. Usually applications setup any networking rules the first time they are run after being installed and they try to make a connection to your network.

Once you’ve done that, start with setting up a new “Inbound” rule (the properties of the “Outbound” rule will be the exact same.)

Select “Program”, then “Next”.

On the second page, you’ll want to insert the path to your application or find it using the browse button. Once you find and select it, click “Next” again.

On the third page make sure you check the “Block the connection” option, then click Next.

On the fourth page, un-check the “Public” profile, then click “Next”.

On the final page, give it a name (something akin to “Block <application name>” is fine) then click “Finish”.

Complete the above for the “Outbound” rule following the exact same rule creation steps.

Once both rules have been create, go back to “Inbound” rules and find the rule you created first. Open Properties on that rule by either right-clicking or selecting the rule and selecting Properties in the far right sidebar. From here select the “Scope” tab, in the “Local IP address” area select “These IP Addresses” option, then click Add. Insert your static IP here or you can insert your IP subnet range (192.168.0.0/16, etc) if you’re not using a static IP. Once completed, click OK then OK again.

Repeat these firewall rule steps again but for the “Outbound” rule you created.

Testing the solution

You’re almost done! Connect to your VPN server then open the application that you’re intending to block network access for. Make the application can perform some network activity such as downloading or accessing remote resources beforehand. You’ll notice that when the application is running and the VPN is connected that all is well and everything operates normally. You can test that your setup is correct by disconnecting your VPN in the middle of the application generating network traffic. What you should see is an immediate shutdown of any network activity from the application, or a gradual slowdown over the course of a minute coming to a complete halt eventually.

If all of the above is correct, you’re done now! You can feel good knowing that if your VPN connection is interrupted or disconnected for whatever reason, applications you’ve enabled these rules for will not attempt to connect to the internet until the connection is restored.

Getting started with Homebridge on a Raspberry Pi Zero W

Brandon Brown — Wed, 22 Nov 2017 08:00:00 +0000

This post is a continuation of my original post guiding you through setting up a headless Raspberry Pi Zero W on macOS. Immediately after I wrote that post, not much happened with my rPi and it sat unplugged for a few months while I mulled over a project to put it to use for. Over the coming months however I have been increasingly interested in home automation exclusively with HomeKit. I got to wondering, “I should be able to control all the connected devices in my home using just the Home app running iOS 11 on my iPhone 7 Plus and not these other inferior apps!”.

While doing research for home automation, I stumbled on homebridge and it dawned on me that to use my rPi just for it. After getting everything installed and setup a few times (wiping the SD card between installs and retrying), I came to realize how surprisingly easy it is to setup! In this post I’m going to show you how to get your own rPi running homebridge, and even recommend some plugins to use to make it useful.

To start, I began taking inventory of all the things in my house I could add to homebridge to use with HomeKit. I had initially planned on only integrating my 2016 Samsung Smart TV and Playstation 4 in some fashion, but once I got everything installed and running I purchased a few TP-Link HS100 smart wifi plugs. The wifi plugs were on sale at my local BestBuy for $20/ea which is 50% off the normal price 😱 I couldn’t say no, plus I’d had my eye on them already since research into homebridge plugins yielded them to have very good support with the system regardless of not being supported at all by HomeKit.

Install node and homebridge

Start by installing node with npm from here (don’t install from apt-get because the package in the PPA is incredibly out of date). An alternative to npm would be to use yarn, but that route remains untested to my knowledge.

Once node is installed, go ahead and install homebridge. Installing it is as simple as installing a global npm package!

npm install -g homebridge

Running homebridge

You can experiment with running homebridge from the cli once installed by just calling the executable. It’ll look for config in /home/<user>/.homebridge so feel free to add a basic config file there for testing.

The ideal way to use homebridge, however, is running it as a service in the background with systemd. This allows homebridge to auto-run on startup and doesn’t require a shell being open on your computer. One caveat I found with this setup, though easily solvable, is that the path to the homebridge executable is unknown to the required homebridge system user you have to create while seting it up. Its not documented anywhere, but can be fixed by adding the node bin path to the user. You can do this by creating a new file in /etc/profile.d and making it executable

sudo touch /etc/profile.d/node.sh
sudo chmod +x /etc/profile.d/node.sh

where the contents are

export PATH=$PATH:/opt/nodejs/bin

What this does is add /opt/nodejs/bin to the PATH environment variable of every user profile. This means the system user homebridge can now run the homebridge exectuable normally without a full path to its location. The alternative is to specify the full path of the executable when calling it.

Configuring homebridge

At this point, reboot the pi for the system user to pick up the path to the homebridge executable and start it up. You won’t have any configuration setup for homebridge to use (unless you jumped ahead to here 😉) and it will complain about this. You can see the live stream of logs for the homebridge service with

sudo journalctl -u homebridge -f

Create the file /var/lib/homebridge/config.json and fill it with the the following starter configuration

{
  "bridge": {
    "name": "Homebridge",
    "username": "1A:2B:3C:4D:5E:6F",
    "port": 45525,
    "pin": "937-19-468"
  },
  "description": "SmartHome with Homebridge",
  "accessories": [...],
  "platforms": [...]
}

Notes

Use this tool to generate a random username value in the configuration
Replace ... with the plugins that you desire once you confirm homebridge can run on it’s own

After you’ve made all your changes, ensure that the homebridge user has ownership of the /var/lib/homebridge folder with

sudo chown -R homebridge /var/lib/homebridge

NOTE This step is very crucial because if the homebridge executable can’t write it’s various caches to the folder, things might blow up on you!

Extending homebridge

Homebridge by itself isn’t very useful you’ll find, and where it really shines is its community-backed plugin system. Just doing a search on npmjs.com for homebridge-plugin yields a few hundred plugins to choose from. Sort by popularity and the first few pages are full of good plugins.

Here’s a list of the ones I’m using/recommending:

https://www.npmjs.com/package/homebridge-cmdswitch2
- 👆 In combination with https://github.com/dhleong/ps4-waker
https://www.npmjs.com/package/homebridge-samsungsmarttv
- My ongoing fork (waiting for iOS 11 to support the Speaker service properly in the Home app, they’re part of the HomeKit spec just not implemented at the time of writing)
https://www.npmjs.com/package/homebridge-tplink-smarthome (Support for switches, bulbs, and plugs)

Using homebridge with the iOS 11 Home app

The moment you’ve probably been waiting for: setting Homebridge and “accessories” (connected devices) up in iOS Home is very straight forward. The in-app documentation is very easy to follow, and if you’re running the homebridge cli tool from a terminal (not the service-based system user), you can just scan the QR code that is generated when you run homebridge with the Home app. The alternate Home setup method is that you’ll have to enter the pin you configured in the config.json file intead.

Below is a video of the end product and how well it works with the iOS 11 Home app. The video starts out showing how the different devices are triggered in the app (and how some devices have to be interfaced with, particularly my smart TV and PS4 there is some latency which I can go into in detail later) followed by show how to interface with devices through Home Scenes using Siri.

Hmm, your browser doesn't seem to support HTML5 video.

Raspberry Pi Zero W headless setup on macOS

Brandon Brown — Thu, 11 May 2017 07:00:00 +0000

Recently I acquired a RaspberryPi Zero W, a few years after I regretted selling my RaspberryPi B board back in 2013. The following is an account of the trials and tribulations I endured to get it connected to the internet!

This setup requires no monitor, or external keyboard, not even the OTG USB cable that I bought because I thought I needed it.

Prerequisites

If you’re reading this you’re probably here to learn how to get a rPi Zero W running Raspbian and connected wirelessly to the internet. To do that, there’s a few things you’ll need:

A copy of the Raspbian Jessie Lite image
An 8GB+ MicroSD card (and some way to plug it into your computer in order to flash an image to it)
A micro USB cable (to plug the rPi into your computer temporarily)
A 2.4Ghz wifi access point (the rPi Zero W doesn’t support 5Ghz which I learned the hard way 😞 )

If you have all of these things, great! If not, order all the parts quickly on BuyAPi and continue as if you have them in hand.

Preparing the SD card

I’ve ran these commands on macOS, so your mileage may vary on Windows/Linux. Plug the SD Card into your computer and once it is mounted you’ll want to unmount it from the terminal to flash it.

To unmount the drive and prep it for writing the image, run the following:

sudo df -h # Use the output of this to determine <diskname> in the next command
sudo diskutil unmount /dev/<diskname>

If the previous command completed, you have a drive that you can copy the Raspbian image to!

Writing the image to the SD card

Run the command below to start writing the image to the SD card:

sudo dd bs=1m if=/path/to/raspbian-jessie-lite.img of=/dev/rdisk2
# Where disk2 is the number of the disk from earlier

The command above should only take a few minutes depending on the size of the SD card. After it completes you’ll need to do a few things.

Start by opening your terminal and running touch /Volumes/boot/ssh. The existence of this empty file in the root of the drive will enable SSH on first boot when we connect it with the USB cable.

Next, append dtoverlay=dwc2 to the end of the /Volumes/boot/config.txt file on a new line.

Finally, open /Volumes/boot/cmdline.txt and insert modules-load=dwc2,g_ether after the rootwait entry following the same space-delimited pattern as the rest of the file.

Once you’ve completed the steps outlined above, unmount the drive again from the terminal and plug it into the rPi and connect the power USB cable to the board.

First boot into the OS

Give the rPi about 60s to boot up and then connect the other USB cable from the OTG port to your computer.

Once connected, open System Preferences -> Network and you’ll notice there is a new RNDIS/Ethernet Gadget network adapter added in the list. It will probably show up with a 169... IP address so you’ll need to head to System Preferences -> Sharing now to enable “Internet Sharing” for the RNDIS/Ethernet Gadget adapter.

Make sure you check the correct boxes as illustrated below:

Once you have local network access to the rPi, you can ssh in with:

ssh pi@raspberrypi.local

SSH into the RaspberryPi

Once you’re ssh’d into the rPi, you can setup the wifi so that being connected via USB is nolonger required.

In order to get the right configuration for your wifi, run the wpa_passphrase utility with your SSID and it will ask for your password:

wpa_passphrase "SSID HERE"
# You will be prompted to enter your password.
# The utility should generate something like:
# network={
# ssid="SSID"
# #psk="PASSWORD"
# psk=...
# }

NOTE : If you have a custom wifi setup that isn’t WPA2-PSK/TKIP encrypted network, you will need to do some research into the config values for wpa_supplicant!

Copy the output of the command above into the /etc/wpa_supplicant/wpa_supplicant.conf file and overwrite whats in the network={...} section.

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

After pasting the output, save and exit the file. wpa_supplicant should pick up on the changes to the file and connect to the wifi automatically.

You can confirm that your rPi has connected to your wifi by running sudo ifconfig wlan0 on the rPi in your SSH session. In the output, look for inet addr:... which should display an ip address. If this looks correct, then your rPi is connected to your DHCP server/router.

The other option is by checking in the GUI of the router itself in your browser to see if the router issued an IP address to the rPi.

Update the system

Once you’re connected to the wifi, the first thing you should do is update apt-get and upgrade Raspbian as there are undoubtedly some security packages between the image creation and the time you install it on your rPi.

sudo apt-get update -y
sudo apt-get upgrade -y
sudo apt-get dist-upgrade -y

Once you’d completed the above steps, you should now have a functioning RaspberryPi Zero W connected to the internet and ssh’able!

Optional things to do after setup

Setup an MOTD
Install oh-my-zsh
Install nodejs

Resources

Getting started with Pebble SDK and Rocky.js

Brandon Brown — Wed, 02 Nov 2016 07:00:00 +0000

Last updated: January 6th 2017

A month after publishing this post, Pebble was acquired by Fitbit and if you haven’t seen my reaction on Twitter, I’ll have you know that I’m not very happy about it. Fitbit has vowed to ensure all active Pebble devices will stay running through 2017, however with all things I am skeptical.

From Dec 8th 2016 on, here be dragons.

————

tl;dr : I built and published my first watchface using RockyJS, available on the Pebble app store! I wouldn’t mind if you went there gave it a big ole’ ❤ 😁

The source is also available on github.

I owned a Fitbit Charge HR, but I grew out of it. Wanting something else, the Pebble Time device seemed to fit my checklist of “wants and needs”. The hackability of the Pebble, the community, and the ecosystem are what drew me to it. I wasn’t a fan of the original device using a black and white e-ink display, but when the colour e-ink display was announced I became invested.

After getting my Pebble, I started looking up what I can do to develop for it. While reading through the documentation, I realized I’d rather not learn C language to write apps. The C apps do use a tiny bit of Javascript to glue it to the phone’s app using PebbleKit, but that’s a small chunk of code. Fortunately, you can use RockyJS to write watchfaces completely in Javascript. RockyJS is a developing framework for building embedded Javascript watchapps. As of the most recent major Pebble firmware update, there is now an embedded engine that runs Javascript on the device. This allows RockyJS-built watchapps to run natively on the Pebble watch without compiling to C.

Prerequisites

The only prerequisites you need to start developing RockyJS watchfaces are a slight knowledge of Javascript, and the Canvas API. Everything else you need to know is an added bonus and you’ll see why in the next few sections.

The basic concept behind RockyJS is thus: it abstracts the concept of the canvas away from you (because you’re rendering to a fixed screen size), and instead provides you with a context object to work with that is populated with the API methods available. From the context object you then call drawing commands like ctx.arc, ctx.rect, etc.

As you can see in the example below RockyJS is event-based, so it is most performant when rendering when certain events fire such as minutechange or hourchange (on the minute and top of the hour.)

// The draw event is called when the watchface is initialized
rocky.on('draw', function (event) {
  // The draw event contains the context object that you use to draw to
  var ctx = event.context
  // Do stuff with the ctx object at this point
  ...
})

// When the minutechange event fires (every minute on the minute)
// request that rocky draws to the screen
rocky.on('minutechange', function (event) {
  rocky.requestDraw()
})

Getting started

There are a few routes you can take to develop watchfaces:

CloudPebble

If you’re getting started, CloudPebble is a great place to begin. It’s currently the only Pebble IDE/editor with emulator support built-in for every Pebble SDK and platform. You can even connect your physical Pebble device to your CloudPebble account and push the project build to your watch in real time.

Setting up CloudPebble support in the iOS Pebble app goes like so:

Once you have the Developer mode turned on, the CloudPebble Connection will remain “waiting” until you connect it to your CloudPebble account and push your first project through your phone to your Pebble device.

To do this, head over to CloudPebble and create an account. Once set up, you can create a new project. Ensure the Project Type is set as Rocky.js. Now you can start coding in the editor!

When you’ve got a project going and it builds correctly in the emulator, you can deploy the build file to your Pebble device. Go to Compilation in the sidebar, then ensure that Phone is selected instead of Emulator. If you’ve configured all of this correctly, you should be able to click Install and Run. Watch your pebble device as it loads your watchface then displays it!

Local Development

Pebble has an SDK that you can download with brew by running:

brew update && brew upgrade pebble-sdk && pebble sdk install latest

By allowing devs to develop locally using the SDK, you can do the same things that CloudPebble offers but on your local computer. The SDK ships with an emulator and allows you to deploy to your physical Pebble device as well. There is also a chance for you to build out your own build steps/processes and use pEmulator in the browser.

Installing your watchface on a physical Pebble device is simple:

pebble build
pebble install [--phone <IP ADDR>]

Bugs & issues

There are a few bugs/issues using RockyJS for watchfaces as of this writing:

Unsupported web APIs and not all canvas rendering context methods are avilable for use in a RockyJS watchface, check here for API parity
Can’t write true “apps”, only watchface apps are supported right now
Using ECMAScript right now is a no-go, transpiling might work but I haven’t tested it

Resources

There’s not a lot of resources out there for RockyJS development quite yet, so the pickings are a bit slim. However, here are some of the resources I have found incredibly useful:

The community is a great place to join up and learn from - https://developer.pebble.com/community/online/
RockyJS watchface tutorial
Develop locally with an in-browser Pebble device emulator (not a real emulator though) called pEmulator

Developing Simple JSON APIs on Surge

Brandon Brown — Wed, 02 Mar 2016 08:00:00 +0000

Earlier this morning I read a post authored by another Surge user Raymond Camden on how one could leverage Jekyll to build JSON files to construct rudimentary read-only JSON APIs. It occurred to me that I had accomplished this recently on my own site with the check-in map page, thus inspiring me to start writing about it!

Let me state up front that the title of this post is also kind of loaded, and by saying API I mean just the Read part of the CRUD (Create Read Update Delete) model. This site is hosted on Surge which is a static-site hosting platform. Due to the nature of Surge and static sites, there is no "backend" to utilize a sripting language, so we're left with figuring out ways of authoring read-only JSON APIs. This is where Surge, being massively distributed across a powerful CDN, shines at serving JSON files that are cached and easily consumable. With all of this in mind, theoretically, one could build a static API backed by automated deploy scripts and it would be fairly scalable to a point.

Raymond talks about building JSON with {% for … %} loops in Jekyll or by powering it with JSON files in the _data folder. These are Jekyll-specific methods and by any account is a completely legit way to do it. When implementing my "API" I started from a different slightly different angle because I was involving another 3rd-party API to power my own. The decision I inevitably landed on was to build my "API" as a Gulp task which would be part of my build/deploy process, then leverage the Foursquare API to power my own "API" pre-deploy.

Initially, I had wanted to do all the work in the browser on the front-end when deciding to start this project. This meant the map data fetching would be async in the browser and there would be no backend, primarily because Surge doesn't provide one. The problem I ran into however was that the Foursquare API doesn't support front-end publishable API keys like MapBox does. In order to get data from the service you need an OAuth token, and anyone who's been on the internet for any length of time knows front-end based OAuth is non-existent. This would have posed a security loophole had I gone down that road of publishing my secret key on the Internet.

Faced with this hurdle, I had to rethink the implementation of data fetching from the Foursquare API and how it was going to happen on the front-end. It later dawned on me that one could just provide a prebuilt JSON file with the all of the data needed to power the map marker locations. Bingo!

The Gulp task was a pain in the ass to get going but with time I got it correct. It turns out calling HTTP endpoints with paged requests synchronously then writing to a file asynchronously is kind of a big pain. Below is the code I eventually rolled with, commented for better readability:

// gulp_tasks/tasks/foursquare.js

import {
    writeFile,
    closeSync,
    openSync,
    mkdirSync,
    existsSync
} from 'fs'
import gulp from 'gulp'
import gutil from 'gulp-util'
import request from 'sync-request'

// Get the Foursquare OAuth token that we've previously acquired from the API
const FOURSQUARE_OAUTH_TOKEN = process.env.FOURSQUARE_OAUTH_TOKEN

// Set the API Base URL, straight forward
const API_BASE_URL = "https://api.foursquare.com/v2/users/self/checkins"

// Give the API a unique URL (the docs demonstrate this, though I'm not sure why)
// https://developer.foursquare.com/overview/auth
const API_ENDPOINT = `${API_BASE_URL}?oauth_token=${FOURSQUARE_OAUTH_TOKEN}&v=${Date.now()}`

const buildJSON = (buildPath, callback) => {
  let checkinItems = {}
  let folderPath = `${buildPath}/api`
  let filePath = `${folderPath}/foursquare.json`
  let errorMsg = '✗ Request to Foursquare failed'
  let successMsg = '✓ Hitting Foursquare API:'

  // Get Swarm checkins synchronously
  let res = request('GET', API_ENDPOINT)
  let data = JSON.parse(res.getBody('utf8'))
  if (data.meta.code !== 200) {
    gutil.log(gutil.colors.red(errorMsg))
    return
  }

  // Create the `api` directory if it doesn't already exist
  if (!existsSync(folderPath)) {
    mkdirSync(folderPath)
  }

  // Foursquare says you can only retrieve a max of 250 items per response, so we go with that
  let maxApiCheckins = 250

  // We want to use the total checkin count to use with paginatation math
  let totalApiCheckins = data.response.checkins.count

  // Get the total (ceiling) pages we can call to the api
  let totalApiCheckinPages = Math.ceil(totalApiCheckins / maxApiCheckins)

  // Start the paging offset at 0
  let checkinOffset = 0

  // Get the checkins and page through them
  let i = 0
  while (i < totalApiCheckinPages) {
    // Build the paging URL to use with the API call
    let API_URL = `${API_ENDPOINT}&limit=${maxApiCheckins}&offset=${checkinOffset}`
    gutil.log(gutil.colors.green(successMsg, API_URL))
    let result = request('GET', API_URL)
    let checkinData = JSON.parse(result.getBody('utf8'))
    if (checkinData.meta.code !== 200) {
      gutil.log(gutil.colors.red(errorMsg))
      return
    }

    // Build a giant object of Venue ID => Venue + Checkins Array
    for (let checkin of checkinData.response.checkins.items) {
      let venue = checkin.venue

      if (!checkinItems.hasOwnProperty(venue.id)) {
        checkinItems[venue.id] = {
          'venue': venue,
          'checkins': []
        }
      }

      checkinItems[venue.id]['checkins'].push(checkin)
    }

    // Sort dates of checkins, descending by date
    for (let venueId in checkinItems) {
      checkinItems[venueId]['checkins'].sort(function(a, b) {
        a = new Date(a.createdAt);
        b = new Date(b.createdAt);
        return a>b ? -1 : a<b ? 1 : 0;
      })
    }

    // Bump the offset to use for paging the API
    checkinOffset += maxApiCheckins
    i++
  }

  // Write the JSON data to the file finally
  let jsonData = JSON.stringify(checkinItems)
  writeFile(filePath, jsonData, 'UTF-8', callback)
}

// Tasks to generate the Foursquare JSON data file
gulp.task('foursquare:dev', (cb) => {
  buildJSON('./build_dev', cb)
})

gulp.task('foursquare:prod', (cb) => {
  buildJSON('./build_prod', cb)
})

Output in my terminal looks something like this when the task is running:

[11:30:08] Starting 'foursquare:dev'…
[11:30:09] ✓ Hitting Foursquare API: https://api.foursquare.com/v2/users/self/checkins?oauth_token=OAUTHTOKEN&v=1456947006694&limit=250&offset=0
[11:30:11] ✓ Hitting Foursquare API: https://api.foursquare.com/v2/users/self/checkins?oauth_token=OAUTHTOKEN&v=1456947006694&limit=250&offset=250
[11:30:14] ✓ Hitting Foursquare API: https://api.foursquare.com/v2/users/self/checkins?oauth_token=OAUTHTOKEN&v=1456947006694&limit=250&offset=500
[11:30:16] ✓ Hitting Foursquare API: https://api.foursquare.com/v2/users/self/checkins?oauth_token=OAUTHTOKEN&v=1456947006694&limit=250&offset=750
[11:30:18] ✓ Hitting Foursquare API: https://api.foursquare.com/v2/users/self/checkins?oauth_token=OAUTHTOKEN&v=1456947006694&limit=250&offset=1000
[11:30:19] Finished 'foursquare:dev' after 10 s

The gist of the Gulp task is basically:

Create a temporary file to write the JSON data to
Get the total count of check-ins so we can page the API in the subsequent requests
Page over the API, building an object that looks like

…
{
  "Venue ID": {
    "venue:" "Venue object",
    "checkins:" ["Array of check-in objects for this venue"]
  }
}
…

Sort the venue check-ins by the date, descending in time
Write the final compiled object data to the JSON file

Once I was able to build the JSON file and have it output to my local build folder, I started on building the front-end map page. I won't go into details about how I implemented that section because it's in plain un-obfuscated JS inlined in the page on Github. You can view the source here and the JSON file that exists on my site (forewarning, the JSON file is pretty big and your browser might crash like mine did).

I'm constantly updating the look and feel of the Check-Ins page so check back periodically for updates 😁.

DEV Community: Brandon Brown

The Best VSCode Extensions for Web Development in 2020

Settings Sync

Project Manager

File Icons

Open In Browser

Tomorrow Theme Kit

File Size

Word count

Duplicate Action

SSH

Excel Viewer

GitHub Pull Requests

Regex tester

Emojisense

Run On Save

SVG Viewer

Bracket Pair Colorizer 2

Toggle

Code Spell Checker

Open in GitHub

Prettier

Document This

Better Comments

Markdownlint

Version Lens

How to setup XAMPP-VM in MacOS

Installation

Apache

Main config httpd.conf

VirtualHosts httpd-vhosts.conf

Hosts file /etc/hosts

Testing in a browser

Developing a PHP application in XAMPP-VM

How to use a DSLR or mirrorless camera as a webcam on MacOS

My Current Setup

Parts list

A DSLR or Mirrorless Camera

Elgato Cam Link 4K

Testing the video

Mounting the camera for the best angle

Lighting

Getting better audio

Setup Sonarr and Radarr to notify via SMS with Twilio Runtime

Enter Twilio

Twilio Runtime Functions

Create a new Runtime Function

Example

Configuration and Handler Setup

Testing The Function Endpoint

How To Setup A Windows 10 Application Network Killswitch

Setting up the network adapter profiles

Setting up the Windows Firewall rules

Testing the solution

Getting started with Homebridge on a Raspberry Pi Zero W

Install node and homebridge

Running homebridge

Configuring homebridge

Notes

Extending homebridge

Using homebridge with the iOS 11 Home app

Raspberry Pi Zero W headless setup on macOS

Prerequisites

Preparing the SD card

Writing the image to the SD card

First boot into the OS

SSH into the RaspberryPi

Update the system

Optional things to do after setup

Resources

Getting started with Pebble SDK and Rocky.js

Prerequisites

Getting started

CloudPebble

Local Development

Bugs & issues

Resources

Developing Simple JSON APIs on Surge

Main config `httpd.conf`

VirtualHosts `httpd-vhosts.conf`

Hosts file `/etc/hosts`