Copy Code button with feedback when code has been successfully copied.

Here is a Pen of a combination textarea/button that gives the user feedback when code has been copied. (Uses the d3.js library for the animation) The animation is unique each time.

Copy Code feedback button

The world's simplest AngularJS tab control

Here is a very simple tab control - created using AngularJS - with literally just one line of javascript code - a scope variable bound to the page.

I had originally scoured the web for a bootstrap or other tab control available, but after playing around with some HTML & Angular, I came up with this simple, functional control: 1 line of JS, 2 css selectors and 4 divs.

See the Pen World's simplest AngularJS tab control by Dan Shultz (@danshultz11) on CodePen.

Visual Studio TACO - Cordova WebView containing jQuery

If you're using Visual Studio Tools for Apache Cordova (TACO), you may notice a problem if you want to display an external webpage using the Cordova WebView, if the external page uses jQuery. Once you build and start debugging your app, as soon as you try to display the external page, an exception will be thrown in the jquery.js file used by the external page.

Before we look at what the problem is, here's a quick review of displaying external web pages in a Cordova app:

• Whitelist the page/domain in config.xml in the Domain Access section under the Common tab

• In JavaScript, call window.open(whitelistedUrl)

The good news about this problem, is it's not really a problem - except when you're debugging. After failing every time I tried testing opening the new window, I swapped in the non-minified jquery file (in the external page) to take a look at where we were failing. It ends up in the jquery file itself, it does a try-catch that should throw an error for all non-gecko browsers, then swallows the error:

try {
 matches.call( div, "[test!='']:sizzle" );
 rbuggyMatches.push( "!=", pseudos );
} catch ( e ) {}

...But it ends up that even though this error is swallowed, The Visual Studio TACO debugger stops the processing at the point where the error is thrown, and even if you continue processing, it usually won't display the page. Even though this code is executed on any page on the www containing jquery, when those pages are pulled into a Cordova WebView using Visual Studio TACO debugging, processing stops and the app appears to error out for no reason.

But if you run your app in Release Mode, you'll see that the page gets pulled into the Cordova WebView just fine, now that the debugger doesn't halt on the swallowed error. So the answer is that you can't debug past the point where you pull an external page into a Cordova WebView. You'll need to test that part in release mode, and if there are any problems, you can debug the page using Chrome Dev Tools on the site itself.

If this is unacceptable, another alternative would be to look into using the Cordova InAppBrowser plugin, which has no problem with external jQuery files, but the downside is that it does pop up a new browser window.

First Take on Visual Studio Tools for Apache Cordova (TACO)

I installed the Visual Studio Tools for Apache Cordova last week to see how feasible it would be to use with an existing PhoneGap Android codebase.

I still haven't gotten to the point of publishing to Google Play yet (next post), but I thought I'd share a few of the pain points/errors I've encountered during setup and steps to resolve them:

(Note that these are specific to Android)

1) "Could not create the Java Virtual Machine" error

This is a memory issue with the JVM. The recommendation is to set your _JAVA_OPTIONS TO -Xmx512M
Full instructions

2) Error DEP10201 (No device found)

The Android emulator is a slow klunky experience. When you graduate to using your personal device to debug, you'll need to set up USB debugging. First, make sure USB debugging is enabled on your phone. On some Android phones, you first have to go to Apps..Settings..About Phone, then tap 7 times on the Build Number to enable Developer Options.
Full instructions on how to enable USB debugging on an Android phone

After enabling USB debugging on your device you will then need to install a USB driver for debugging.

So now that we're set up to test and debug on our phone, we'll look at some of the TACO nuances and the deployment process next week - hopefully with an app successfully deployed to Google Play.

JavaScript Variable Hoisting

One of the little known nuances of JavaScript, is that the interpreter organizes functions and variables per scope by declaring them at the beginning of the scoping container, regardless of their order in the written script. Here's an example:
function showVariableValues() { console.log("x=" + x);//x is undefined var x = 1; console.log("x=" + x);//x is 1 console.log("y=" + y);//error } showVariableValues();
Displays:

x=undefined
x=1
Uncaught ReferenceError: y is not defined

In the above example, we're logging the value of variables x and y before they are declared, however, x has a value of

undefined

whereas y throws an error. So what's the difference? Neither variable has been declared when we are accessing them. Why do we only get an error when referencing y?

The reason is that the JavaScript interpreter reorganizes the declaration of ALL varibles within a scope to the top of the scope - in our case our scope is the function

showVariableValues()

. So in reality, our above code will be reorganized as shown below:
function showVariableValues() { var x;//declaration was hoisted by JS console.log("x=" + x);//x is undefined x = 1;//initialization stays in same spot console.log("x=" + x);//x is 1 console.log("y=" + y);//error } showVariableValues();
Notice that the declaration of var x has been "hoisted" to the top of the scope, but only the declaration. The initialization of the variable remains in its original spot. Once this variable was declared, JavaScript set its value to

undefined

- the JavaScript default. So that's why when we write the value of x, it's value is

undefined

, whereas y just throws an error because it has not been declared.

So the lesson is: always declare your variables at the beginning of their scope - if you don't, JavaScript will reorganize your code for you. If you think about it, you could probably come up with scenarios with much more confusing results than this simple example.