vue-devtools Chrome Extension in Firefox

When I wrote this post in March, only a Chrome vue-devtools extension was available. Using the Chrome Store Foxified add-on, this post documents installing the vue-devtools Chrome extension into Firefox for debugging Vue.js applications. However, as of June 20, an official Firefox Addon is available.

Vue.js (@vuejs) tweeted at 1:22 AM on Tue, Jun 20, 2017:
vue-devtools is now officially available as a Firefox Addon
DevTools extension for debugging Vue.js applications


I’m using the Firefox Developer Edition for this install. It should also work with Firefox and Aurora (Firefox Developer Edition) for Android.

Install the Chrome Store Foxified add-on. The Mozilla WebExtensions cross-browser API supports a growing number of Chrome extensions and this add-on facilitates installing them in Firefox.

You will need to be signed into with your Firefox account to install the add-on normally. Search for vue-devtools at the Chrome Web Store.

Select the Add to Firefox button.

In the Vue.js devtools dialog, Select Just Sign and Download.

Foxified - Vue.js devtools sign and download dialog. The Google Chrome extension has been fetched and converted into Firefox  format. Would you like to install the addon normally or temporarily?

Another Vue.js devtools dialog appears after the add-on is processed. select Save Signed Addon To File.

Foxified - Vue.js devtools sign and download dialog. All process complete. Choose from any of the actions below. Note: WebExtensions API is not yet complete by Mozilla so all extensions may not work yet.

Navigate to the Firefox Add-ons manager, about:addons and select Extensions from the sidebar.

Add-ons Manager

Open the Tools for all add-ons dropdown gear next to the search all ad-ons input. Select Install Add-on From File. Browse for the .xpi file that was downloaded.

Add-ons Manager - Tools for all add-ons

Restart Firefox to begin using the vue-devtools.

Javascript Frameworks

After discovering yet another interesting Javascript framework for the web application development recently (Vue.js), I decided to put together this short list of some the emerging and more popular frameworks out there today for building user interfaces.


Mithril is a light-weight robust MVC framework with no dependencies, a small API and small learning curve. Mithril implements a virtual DOM tree similar to React.js, however Mithril’s uncompiled templates run natively in the browser and compile into static Javascript data structures. Mithril.js was initially released in March, 2014 by Leo Horie. Source available at

File Version Size
mithril.min.js 0.2.2-rc.1 19 kb

Vue.js is a library for building interactive web interfaces and its focus is on the view layer only. Vue.js extensions such as vue-router and vue-resource are available for inclusion into the application as needed. The Vue.js API is simple and easy to adapt compared to other frameworks. Vue.js was initially released in July, 2014 by Evan You. Source available at

File Version Size
vue.min.js 1.0.13 70 kb

Riot.js – A React-like user interface micro-library. Compare Riot.js with React and Polymer. Source available at

File Version Size
riot.min.js 2.3.12 19.2 kb

Polymer is a framework for creating and rendering custom web components. Web Components are the future of the web and Google has created the Polymer library set of polyfills for developers to dive into. Source available at


AngularJS a framework by Google that binds HTML (views) to Javascript objects (models). AngularJS usage rivals that of BackboneJS, according to JavaScript analytics service Libscore, AngularJS is used on over 10,000 websites including The Weather Channel, Lego, Intel, Sprint and ABC News. AngularJS was initially released in September 2009 by Misko Hevery. Source available at

File Version Size
angular.min.js 1.4.8 145 kb

Ember.js is a framework based on the model-view-controller (MVC) pattern and follows Convention over Configuration (CoC). Ember has a large API that covers traditional MVC patterns and a broad range of helper utilities. Ember 2.0 has a brand new high performance rendering engine named Glimmer, and server-side rendering is provided with FastBoot. After Handlebars in 2010, on December 8, 2011, Yehuda Katz released Ember.js. Source available at

File Version Size
ember.min.js 2.2.0 435 kb

React.js is the framework that powers Facebook and Instagram’s user interface and is one of the fastest growing JavaScript frameworks today. Features include one-way data flow and a virtual-DOM using an in-memory data structure cache process so only applicable nodes on the client browser’s DOM are updated for high performance complex user interfaces. React.js was created by Jordan Walke, a ‎Software Engineer at Facebook and was initially released in May, 2013 by Facebook and Instagram. Source available at

File Version Size
react.min.js 0.14.6 133 kb
react-dom.min.js 0.14.6 1 kb
Total 134 kb

Backbone.js is a light weight framework that provides a RESTful JSON interface for data models, views, collections, and events. Backbone.js is used on over 12,000 websites according to Libscore including Linkedin, Pinterest, ESPN, Walmart, Target and Best Buy. Backbone.js was initially released on October 13, 2010 by Jeremy Ashkenas. Source available at

File Version Size
backbone-min.js 1.2.3 22.5 kb
underscore-min.js 1.8.3 16.0 kb
Total 38.5 kb

Microsoft Releases Free Code Editor – Visual Studio Code

Yesterday, Microsoft released Visual Studio Code, a free code editor for building and debugging modern web and cloud applications. Microsoft’s new code editor joins Sublime Text, Atom and Brackets for developers using a regular code editor instead of a full IDE like Visual Studio or Eclipse. Downloads are available for OS X, Linux And Windows platforms. This lightweight and fast editor is built on Google’s Chromium engine and includes git integration, IntelliSense code completion, syntax highlighting, bracket matching, customizable keyboard shortcuts and debugging tools. More info available at Scott Hanselman’s blog post, Introducing Visual Studio Code for Windows, Mac, and Linux. For a list of code editors see my Code Editors page.

Visual Studio Code – Editing Sass Project
Visual Studio Code – Editing Sass Project

AngularJS v2:

At ng-conf 2015 last month it was announced that AngularJS 1.X will continue to reside at and Angular 2.0 will be hosted at The new version of Angular is not a major update, it is a complete rewrite. In February, Brad Green announced that Angular 2 was officially Alpha in this First look at App Development in Angular2 video.

During the ng-conf 2015 keynote, Brad and Igor talked about some of the big work that is being done on Angular 1 is work that will be shared in Angular 2, including:

  • New Router that focuses on mobile and large complex apps.
  • New Internationalization (i18n) module
  • Better Performance
Angular 2

Compass on Windows

This post documents my latest compass install on Windows which should be simple enough. I ran into a minor issue and was getting an error:

$ gem install compass
ERROR:  Error installing compass:
        The 'ffi' native gem requires installed build tools.

How to install the build tools

Go to the same place that has the RubyInstaller for Windows, and select Downloads. Download the Development Kit (build tools) that corresponds with your version of Ruby. If you need to install Ruby (required), it is recommended that you use the Ruby 1.9.3 installers. I noticed that a newer version of the Ruby 1.9.3 installers were available, might as well get the updates. To summarize, here are the two packages I downloaded for my Windows 8.1 machine:

Install or update Ruby using the Ruby 1.9.3-p550 RubyInstallers before installing the DevKit. Check your installed version as follows:

C:\>ruby --version
ruby 1.9.3p550 (2014-10-27) [i386-mingw32]

Important – during Ruby Setup, make sure “Add Ruby executables to your PATH.” is selected:

Setup - RubyInstallers
Setup – Ruby 1.9.3

After extracting the DevKit to C:\RubyDevKit, run these these commands:

Adding the DevKit to PATH...

C:\RubyDevKit>ruby dk.rb init
[INFO] found RubyInstaller v1.9.3 at C:/Ruby193

Initialization complete! Please review and modify the auto-generated
'config.yml' file to ensure it contains the root directories to all
of the installed Rubies you want enhanced by the DevKit.

C:\RubyDevKit>ruby dk.rb install
[INFO] Updating convenience notice gem override for 'C:/Ruby193'
[INFO] Installing 'C:/Ruby193/lib/ruby/site_ruby/devkit.rb'
Test the DevKit install
bash-3.1$ gcc --version
gcc.exe (tdm-1) 4.5.2
Copyright (C) 2010 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO

bash-3.1$ exit

Install Compass

$ gem install compass
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Fetching: rb-inotify-0.9.5.gem (100%)
Fetching: compass-1.0.1.gem (100%)
    Compass is charityware. If you love it, please donate on our behalf at http:
// Thanks!
Successfully installed ffi-1.9.6
Successfully installed rb-inotify-0.9.5
Successfully installed compass-1.0.1
3 gems installed
Installing ri documentation for ffi-1.9.6...
Installing ri documentation for rb-inotify-0.9.5...
Installing ri documentation for compass-1.0.1...
Installing RDoc documentation for ffi-1.9.6...
Installing RDoc documentation for rb-inotify-0.9.5...
Installing RDoc documentation for compass-1.0.1...

XAMPP Windows Setup SSL

In an earlier post, I documented my XAMPP Windows Setup for myself and anyone else would find it useful. Now I am adding SSL to the virtual host configuration and this post will document that process.

XAMPP Configuration

# virtual hosts
NameVirtualHost *:8080
NameVirtualHost *:443

<VirtualHost *:8080>
  DocumentRoot C:/xampp/htdocs
  ServerName localhost

# For htaccess rewrites to work AllowOverride
# needs to be set to All instead of None

<VirtualHost *:443>
  DocumentRoot "C:/xampp/htdocs/mysite"
  SSLEngine on
  SSLCertificateFile "conf/ssl.crt/server.crt"
  SSLCertificateKeyFile "conf/ssl.key/server.key"
  <Directory "C:/xampp/htdocs/mysite">
    Options Indexes MultiViews FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all

<VirtualHost *:8080>
  DocumentRoot "C:/xampp/htdocs/mysite"
  SetEnv APPLICATION_ENV development
  <Directory "C:/xampp/htdocs/mysite">
    Options Indexes MultiViews FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all

Magento Development Environment


Requirements Test

Does your server meet the requirements for Magento?

Install Sample Data

Before installing Magento, download and install sample data and media.
  1. Using phpMyAdmin, import the sample data sql file “magento_sample_data_for_1.6.0.0.sql” into an empty magento database.
  2. Copy the contents of the sample “media” folder into the media folder of your Magento installation.

Admin login fails without error message on localhost

On or near line 104 of /var/www/magento/app/code/core/Mage/Core/Model/Session/Abstract/Varien.php
/* this is commented out for locahost development versions so admin can login

if (isset($cookieParams['domain'])) {
	$cookieParams['domain'] = $cookie->getDomain();
Add write permissions to:


DotNetNuke 7 Module Templates

I wanted to stick with the environment setup I have been using which is a host name of dnn7 or dnndev. Working in IIS and modifying my host file is not an issue for me. If you are looking for a way to create a new module directly within the DotNetNuke CMS environment, you could give this extension a try: DNN Module Creator.

Download Source Code for Christoc’s DotNetNuke Module Development Template at

This post is based on the DotNetNuke 7 Project Templates V2.0 for VS2012, Thu Jan 24, 2013. Newer 2.x versions of this template project may have somewhat different node or node block keys in the csproj files for the environment variables we are modifying in this guide. The premise is still the same and this information should be enough to help make the changes as needed.

You will need this to modify and rebuild the source: Microsoft Visual Studio 2012 SDK Filename: vssdk_full.exe

    Modified these two template project files
  • CSharp-Template.csproj
  • CSharp-DAL2-Template.csproj
    In these two nodes
  • WebProjectProperties/IISUrl
  • WebProjectProperties/IISAppRootUrl




WITH ———————

  <DevelopmentServerPort />
  <DevelopmentServerVPath />

I don’t use the Visual Basic templates so I left those projects AS IS

I needed to also update the MSBuildTasks version numbers in the templates. For the version of MSBuildTasks I installed today from nuget using the Package Manager Console in Visual Studio [code][/code]PM> Install-Package MSBuildTasks[code][/code] Opened Template Solution DNNTemplates.sln Searched Entire Solution Find in Files MSBuildTasks. Replace with MSBuildTasks. SAVE ALL / REBUILD SOLUTION


Windows 8 Shortcut Keys

I installed Windows 8 on my 2009 SONY VAIO FW series laptop today. Here are a few keyboard shortcuts I found useful.
  • Windows Key + C – Charms
  • Windows Key + D – Desktop
  • Windows Key + F – Search Files
  • Windows Key + I – Settings
  • Windows Key + K – Devices
  • Windows Key + P – Projector options
  • Windows Key + Q – Search Applications
  • Windows Key + R – Run
  • Windows Key + X – Administrator tools
  • Windows Key + Enter – Narrator

Smart Snap

  • Windows Key + Right or Left Arrow
    Moves the open window to the left or right half of the screen.
Additionally, if you are on the metro screen, and there is not a search input shown, just start typing and one will appear with your query. Tapping the Windows key will cycle you through open screens as well. The ever faithful Alt + F4 (close) and Alt + Tab (cycle windows/apps) shortcuts are indispensable… Ctrl + Tab is handy as well.

Improved Font Rendering in Fedora 15 / Gnome 3

  1. Checkout this blog article at Subpixel Hinting and Other Enhancements for Freetype & Fedora 15 RPM Packages
  2. Per the infinality article, install the infinality-settings package
  3. Edit /etc/X11/.Xresources to read:
    Xft.autohint: 0
    Xft.lcdfilter:  lcddefault
    Xft.hintstyle:  hintfull
    Xft.hinting: 1
    Xft.antialias: 1
    Xft.dpi: 96
    Xft.rgba: rgb
  4. Install Windows fonts. To do this, I copied all the .ttf fonts from my mounted Windows 7 device (/mnt/ntfs/Windows/Fonts) to /usr/share/fonts.

C# String Utils

Documenting a few simple string utils I created for an app recently

Be sure to resolve usings as needed

public static string SingleSpace(string str)
	//replaces multiple spaces with one.
	RegexOptions options = RegexOptions.None;
	Regex regex = new Regex(@"[ ]{2,}", options);
	str = regex.Replace(str, @" ");
	return str;

public static string SlashFlip(string source, int direction)
	string returnVal = null;
	if (direction == 0) //back
		returnVal = source.Replace(@"/", @"\");
	else if (direction == 1) //forward
		returnVal = source.Replace(@"\", @"/");
	return returnVal;

public static string SlashTrim(string str)
	if (str.IndexOf(@"/") == 0 || str.IndexOf(@"\") == 0) //first char
		str = str.Substring(1, str.Length - 1);
	if (str.IndexOf(@"/") == str.Length || str.IndexOf(@"\") == str.Length) //last char
		str = str.Substring(str.Length, 1);
	return str;

public static string IdXml(string[] idArray)
	string returnXml = null;
	List ids = new List(); //list of id's for the XmlSerializer
	foreach (string id in idArray)
	//create Xml doc from list to pass id's into sproc as a single param
	XmlSerializer xs = new XmlSerializer(typeof(List));
	MemoryStream ms = new MemoryStream();
	xs.Serialize(ms, ids);
	returnXml = UTF8Encoding.UTF8.GetString(ms.ToArray());

	return returnXml;

public static string StripDomain(string userIdentityName)
	//remove domain name and back slash if present
	int i = userIdentityName.IndexOf(@"\");
	if (i > -1) userIdentityName = userIdentityName.Remove(0, i + 1);
	return userIdentityName;

MVC 3 RSS Reader


public class Feed
	public string Title { get; set; }
	public string Link { get; set; }
	public string Description { get; set; }


public ActionResult Index()

	XDocument feedXML = XDocument.Load("");

	//select out a collection of anonymous types from RSS feed
	var feedCollection = from rss in feedXML.Descendants("item")
				select new Feed
					Title = rss.Element("title").Value,
					Link = rss.Element("link").Value,
					Description = rss.Element("description").Value

    return View(feedCollection);


@model IEnumerable<RssReader.Models.Feed> 
	ViewBag.Title = "Index";


@foreach (var item in Model)


Ubuntu keyboard shortcuts

GNOME desktop

Ctrl + Alt + F1 = Switch to the first virtual terminal
Ctrl + Alt + F2(F3)(F4)(F5)(F6) = Select the different virtual terminals
Ctrl + Alt + F7 = Restore back to the current terminal session with X
Ctrl + Alt + Backspace = Restart GNOME
Alt + Tab = Switch between open programs
Ctrl + Alt + L = Lock the screen.
Alt + F1 = opens the Applications menu
Alt + F2 = opens the Run Application dialog box.
Alt + F3 = opens the Deskbar Applet
Alt + F4 = closes the current window.
Alt + F5 = unmaximizes the current window.
Alt + F7 = move the current window
Alt + F8 = resizes the current window.
Alt + F9 = minimizes the current window.
Alt + F10 =  maximizes the current window.
Alt + Space = opens the window menu.
Ctrl + Alt + + = Switch to next X resolution
Ctrl + Alt + - = Switch to previous X resolution
Ctrl + Alt + Left/Right = move to the next/previous workspace


Ctrl + A = Move cursor to beginning of line
Ctrl + E = Move cursor to end of line
Ctrl + C = kills the current process.
Ctrl + Z = sends the current process to the background.
Ctrl + D = logs you out.
Ctrl + R = finds the last command matching the entered letters.
Enter a letter, followed by Tab + Tab = lists the available commands beginning with those letters.
Ctrl + U = deletes the current line.
Ctrl + K = deletes the command from the cursor right.
Ctrl + W = deletes the word before the cursor.
Ctrl + L = clears the terminal output
Shift + Ctrl + C = copy the highlighted command to the clipboard.
Shift + Ctrl + V (or Shift + Insert) = pastes the contents of the clipboard.
Alt + F = moves forward one word.
Alt + B = moves backward one word.
Arrow Up/Down = browse command history
Shift + PageUp / PageDown = Scroll terminal output


Alt + Tab = switch between open windows
Win + Tab = switch between open windows with Shift Switcher or Ring Switcher effect
Win + E = Expo, show all workspace
Ctrl + Alt + Down = Film Effect
Ctrl + Alt + Left mouse button = Rotate Desktop Cube
Alt + Shift + Up = Scale Windows
Ctrl + Alt + D = Show Desktop
Win + Left mouse button = take screenshot on selected area
Win + Mousewheel = Zoom In/Out
Alt + Mousewheel = Transparent Window
Alt + F8 = Resize Window
Alt + F7 = Move Window
Win + P = Add Helper
F9 = show widget layer
Shift + F9 = show water effects
Win + Shift + Left mouse button = Fire Effects
Win + Shift + C = Clear Fire Effects
Win + Left mouse button = Annotate: Draw
Win + 1 = Start annotation
Win + 3 = End annotation
Win + S = selects windows for grouping
Win + T = Group Windows together
Win + U = Ungroup Windows
Win + Left/Right = Flip Windows


Shift + Ctrl + N = Create New Folder
Ctrl + T = Delete selected file(s) to trash
Alt + ENTER = Show File/Folder Properties
Ctrl + 1 = Toggle View As Icons
Ctrl + 2 = Toggle View As List
Shift + Right = Open Directory (Only in List View)
Shift + Left = Close Directory (Only in List View)
Ctrl + S = Select Pattern
F2 = Rename File
Ctrl + A = Select all files and folders
Ctrl + W = Close Window
Ctrl + Shift + W = Close All Nautilus Windows
Ctrl + R = Reload Nautilus Window
Alt + Up = Open parent directory
Alt + Left = Back
Alt + Right = Forward
Alt + Home = go to Home folder
Ctrl + L = go to location bar
F9 = Show sidepane
Ctrl + H = Show Hidden Files
Ctrl + + = Zoom In
Ctrl + - = Zoom Out
Ctrl + 0 = Normal Size

(For those who want to configure your own keyboard shortcuts, you can do it at System->Preferences->Keyboard Shortcuts.)

Use fstab (Linux) to mount a Windows partition

# in terminal, get a partition list 
# to get the path to the one you
# want to mount

 fdisk -l

# then create the target/mount path  

mkdir -p /mnt/win

# Open etc/fstab with a text editor
# and append the following

# mount windows ntfs
/dev/sda1 /mnt/win ntfs-3g defaults 0 0

# Save fstab and restart linux
# open /mnt/win to see windows files 

ISO Date Time

Useful javascript for converting an iso DateTime string into a javacript Date object. The Date.prototype.setISO8601 function is from

Converted Date Time:

Fiddle with this

function isoToDateTime(value) {
	var output = '';
	if (value != '0001-01-01T00:00:00') {
		var d = new Date();
		//desired output format: 5/17/2011 8:34:56 AM - below does not return local time
		output = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear() + " " + setClockTime(d)
	return output;

function setClockTime(d)
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();
	var suffix = "AM";
	if (h > 11) {suffix = "PM";}
	if (h > 12) {h = h - 12;}
	if (h == 0) {h = 12;}
	if (h < 10) {h = "0" + h;}
	if (m < 10) {m = "0" + m;}
	if (s < 10) {s = "0" + s;}
	return h + ":" + m + ":" + s + " " + suffix;

//convert an ISO8601 date string into a js date object
Date.prototype.setISO8601 = function(dString){
var regexp = /(\d\d\d\d)(-)?(\d\d)(-)?(\d\d)(T)?(\d\d)(:)?(\d\d)(:)?(\d\d)(\.\d+)?(Z|([+-])(\d\d)(:)?(\d\d))/;
if (dString.toString().match(new RegExp(regexp))) {
	var regexp = /(\d\d\d\d)(-)?(\d\d)(-)?(\d\d)(T)?(\d\d)(:)?(\d\d)(:)?(\d\d)(\.\d+)?(Z|([+-])(\d\d)(:)?(\d\d))/;
	if (dString.toString().match(new RegExp(regexp))) {
		var d = dString.match(new RegExp(regexp));
		var offset = 0;
		this.setUTCMonth(parseInt(d[3],10) - 1);
		if (d[12]) {
			this.setUTCMilliseconds(parseFloat(d[12]) * 1000);
		else {
		if (d[13] != 'Z') {
			offset = (d[15] * 60) + parseInt(d[17],10);
			offset *= ((d[14] == '-') ? -1 : 1);
			this.setTime(this.getTime() - offset * 60 * 1000);
	else {
		return this;

MVC 3 Razor on a Shared .NET Host

Required: ** Get using Web Platform Installer

Add Deployable Dependencies

The following steps are needed to deploy the MVC3 and Razor libraries to the shared server for the application to run. This is a new feature you get when you update your Visual Studio to SP1.

To get your MVC project running on the host, prepare it by right clicking on it in the solution explorer and select Add Deployable Dependencies.

Then you will get a dialog to select the dependencies you want to include when you deploy the web app. Select both ASP.NET MVC and ASP.NET Web pages with Razor syntax.

Knowledge Base > WinHost > IIS7 > Using the Microsoft IIS 7.0 Manager