Using Workspaces

I'm a big fan of Visual Studio Code's workspaces. In the past, I've used them to separate my work into different projects and applications or different parts of an application (like server-side vs client-side). At the moment we are wrapping up a release at my job so I am often jumping between various tickets. It occurred to me this morning that I could create a new workspace for each ticket. The reason this is helpful is because sometimes I may need these 4 files open for one ticket and a different 5 files open for a different ticket. So instead of keeping them all open and jumping around, I can have just the files I need open for that particular ticket to avoid confusion.

So then the thought occurred to me, what if I could do the same with Chrome? Fortunately, there is an extension for that. Now I can open my application and all my reference material in one workspace and a different set of tabs in another workspace.

Simple. Efficient. I like that.

Find This Not That in jQuery

Today at work, I came across a jQuery find statement that was selecting a bunch of different elements but I needed to excluded a single class from the selection. Of course, I hit Google and Stack Overflow for an answer but nothing was quite exactly what I needed. I found the solution and also learned something else about jQuery in the process. So here is what I came up with.

The solution was to chain a filter call to the find statement using the not selector.

Here is a contrived example on CodePen. In this example, I am selecting all buttons except for the btn-danger and btn-warning classes:

var myButtons = $('#main')
     .find('button')
     .filter(':not(".btn-danger,.btn-warning")');

Something I noticed in the console is that there is an object created called prevObject. This object contains the matched elements before the filter is applied which could be useful.

Using the VS Code Integrated Terminal with Remote Hosts

I am in the process of writing some server-side scripts on a remote server. There are three things that would make it easier:

1. If I could write the code directly to the server from VS Code
2. If the integrated terminal in VS Code would automatically log me into that server
3. If I could easily toggle between the code window and the terminal window

I am going to describe how to do all of those things.

Writing Code Directly to the Server in VS Code

To write code directly to the server, I am using an SFTP extension I found in the VS Code Marketplace. The extension I am using is simply called sftp.

To configure it, you open the command palette (Cmd+Shift+P) and select SFTP: Config. This will generate a file called sftp.json within the .vscode directory of your workspace. You can check out the full config options, but basically you just need to specify the host, username, and remote path. So that my code is automatically saved to the server, I set the uploadOnSave option to true in the sftp.json file.

And so that I don't have to log in every time, I am using the privateKeyPath option as well. I won't go into the details here of how to set up SSH for auto login without a password but it is definitely a time saver.

Automatically Logging into the Remote Server

The next thing I wanted to accomplish was automatically logging into the remote server in the integrated terminal. To do that I need to update my workspace settings.

To start I select Code ▶ Preferences ▶ Settings to open the Workspace Settings. Then within the settings, I add some JSON to tell it to call the ssh command with an argument of the server name.

Also, because I like to color code my terminal windows, I found the workbench.colorCustomizations setting which allows me to set a value for terminal.background.

For this change to take effect, I have to restart VS Code. A security feature prompts me to make sure this is what I really want to do. This only happens the first time.

I have to restart VS Code one more time. This time when I open the terminal, it automatically logs me into the remote server so that I can test my scripts.

Toggling Between the Code Window and the Terminal Window

While I like having the terminal window integrated into my IDE, I don't like having to use the mouse to click back and forth between the two windows. Fortunately, someone on Stack Overflow had already solved that problem.

This time I go to Code ▶ Preferences ▶ Keyboard Shortcuts. To make the change, I first have to click on the keybindings.json link:

Then I can paste in the code for my settings.

Now after I save my code, I simply press Ctrl+` to switch to the terminal window, test my code, and then press Ctrl+` again to return back to my code.

Changing Chrome Policies for Testing

I recently ran into a situation where I was pretty sure that a group policy was breaking functionality on my intranet app, but I needed a way to test that theory. After some research, I finally figured out a way to do this.

I am working on an Oracle Virtual Box VM of Windows 7. Because it's a VM on my laptop, I have complete control over the operating system. To set the policy, I used the Windows Registry Editor regedit.

Within Computer\HKEY_CURRENT_USER\Software\Policies, I created a new key called Google. Then within Google, I created a new key called Chrome.

From there, I just needed to add policies one by one until I figured out which one was breaking my app. The link at https://www.chromium.org/administrators/policy-list-3 provides a full list of policies. After saving a policy, I would restart Chrome and the new policy would be enabled. Sure enough, I found the culprit. By toggling this policy and restarting Chrome I could verify that the application worked and then broke with each change of the policy.

Stopping a page redirect to look at JavaScript console

I am currently assisting another developer troubleshoot an issue he's having. In the code, there is a JavaScript function call tied to the onclick event of the HTML link. Because the JavaScript code is failing, the page is redirecting before I have a change to look at the console log to see what the error is. One solution is to use a breakpoint in the code and that's what I'll ultimately do. But I found this great hack.

window.addEventListener("beforeunload", function() { debugger; }, false)

By running this code in the console first, it will pause execution and allow me to see the error in the console.

Rollback with CFTRANSACTION

You may be surprised to find out that software documentation is not always clear or complete. Shocking, I know. Even when it is, sometimes I just have to see things in action for myself. This is one of those cases.

A question came up today at work about the <cftransaction> tag. (Yes, we still use ColdFusion. There are dozens of us. Dozens!) The question was if the tag would automatically rollback changes or if you needed to explicitly type <cftransaction action="rollback"> to rollback the changes. I have always assumed the latter.

So here is my test case. First I created 2 test tables in the database for testing each with a test record.

CREATE TABLE test_table_1 (
  tt1_record_id NUMBER(3) NOT NULL,
  tt1_text VARCHAR2(100),
  CONSTRAINT pk_test_table_1 PRIMARY KEY (tt1_record_id)
);

CREATE TABLE test_table_2 (
  tt2_record_id NUMBER(3) NOT NULL,
  tt2_text VARCHAR2(100),
  CONSTRAINT pk_test_table_2 PRIMARY KEY (tt2_record_id)
);

INSERT INTO test_table_1 (
  tt1_record_id,
  tt1_text
)
VALUES (
  1,
  'Blue'
);

INSERT INTO test_table_2 (
  tt2_record_id,
  tt2_text
)
VALUES (
  1,
  'Triangle'
);

And now the ColdFusion code. This block of code first outputs the text from the database. Then it updates the first table while intentionally failing to update the second table. Lastly, it displays the text from the database.

<cfquery name="variables.qryBefore" datasource="#application.dsn#">
SELECT
  tt1_text, tt2_text
FROM
  test_table_1,
  test_table_2
WHERE
  tt1_record_id = tt2_record_id
</cfquery>

<p>
    <cfoutput>
        Before: 
        #variables.qryBefore.tt1_text#
        #variables.qryBefore.tt2_text#
    </cfoutput>
</p>

<cftry>
    <cftransaction>
        <cfquery name="variables.qryUpdate1" datasource="#application.dsn#">
            UPDATE
                test_table_1
            SET
                tt1_text = 'Red'
            WHERE
                tt1_record_id = 1
        </cfquery>

        <cfquery name="variables.qryUpdate2" datasource="#application.dsn#">
            UPDATE
                test_table_2
            SET
                tt2_text = 'Square'
            WHERE
                foo = bar
        </cfquery>
    </cftransaction>
    <cfcatch type="any">
        <p>
            Database update failed.  Changes should have been rolled back.
        </p>
    </cfcatch>
</cftry>

<cfquery name="variables.qryAfter" datasource="#application.dsn#">
SELECT
  tt1_text, tt2_text
FROM
  test_table_1,
  test_table_2
WHERE
  tt1_record_id = tt2_record_id
</cfquery>

<p>
    <cfoutput>
        After: 
        #variables.qryAfter.tt1_text#
        #variables.qryAfter.tt2_text#
    </cfoutput>
</p>

The database values remained the same. The first table was updated but when the second table failed to update, the changes were rolled back. I could have added <cftransaction action="rollback"> to the <cfcatch> block and gotten the same result.

So why use the rollback command then? You may only want to rollback to a certain savepoint. Another use case I have found for it is unit testing. In my test, I want to execute the entire method even the database code. However, before I leave the <cftransaction> block, I rollback my changes:

<cfif this.testing>
 <cftransaction action="rollback" />
</cfif>

Clipboard Managers

I do a lot of copying and pasting. A lot. One of the things that often happens is that I copy a piece of information, paste it, copy something else, paste it, then need to go back to that previous information I copied. Or maybe I need to copy two (or more) pieces of information from one source before switching to the other source. The best way to handle this is with a clipboard manager. These tools allow you to keep a history of everything you have copied (up to a limit) and the refer back to them. Here are a couple that I have used in my job:

ClipMenu for MacOX (Updated 12/06/18 with new link)

Ditto for Windows