Terrence Dorsey

Writer. Editor. Nerd.

Sublime Text 3 Setup

I recently had to setup up Sublime Text 3 all over from scratch due to reasons of not planning ahead. It seemed prudent to write the steps all down for future reference and put the whole thing where I wouldn't loose it. Like on my blog.

Nothing fancy, but it works for my purposes.

Start out by installing Package Control, the package manager for ST2 and ST3.

Open the command palette with CMD+Shift+P (Ctrl+Shift+P on Windows) and run Package Control: Install Package to find and install packages. See the Package Control Usage page for instructions on the process. Generally I like to search for packages on the Package Control site first so I can check for version compatibility, dependency gotchas and evidence of abandonware.

Markdown Extended is my preferred Markdown implementation. I actually set up ST3 to ignore the default Markdown package as you can see in the preferences below.

I'm using Monokai Extended as the theme just for Markdown Extended. Again, see the preferences JSON below. There was some monkey business involved in getting this set up, unfortunately: I had to use PackageResourceViewer to extract Monokai Extended into my /Packages folder, then point to that .tmTheme file (again, see below). This works better on my work machine, so I'll have to double-check that setup and report back any further information. For now it's good enough to get working.

I'm also using Colorcoder for semantic code coloring. It looks like Ruby support is installed by default now. Previously I had to use a workaround discussed in this issue on GitHub.

When installed you can now just go to View > Syntax > Colorcoder > Ruby (Colorcode). Colorcoder also has built-in support for C++, Coffeescript, Go, Lua and Python.

Pretty JSON is a good package for formatting and minifying JSON. I find it helpful, along with JSON Formatter for Chrome.

I don't need to do diffs often, but when I do, Sublimerge: The professional diff and merge tool for Sublime Text 2 and 3 is the way to go. Buy it and support a developer who makes a really nice, useful tool.

As mentioned earlier, I'm using Monokai Extended as my Markdown-specific theme. Colorcoder applies semantic coloring, but it does so in conjunction with your existing theme setting. For general coding, I'm using PlasticCodeWrap, which I grabbed from the terrific tmTheme Editor by Allen Bargi.

And that's pretty much it for my ST3 setup. My work setup has SublimeLinter 3 installed, but I don't end up using it much.

Keybindings

I also don't do much in the way of fancy keybindings. However, here are two that I've found useful.

[ { "keys": ["super+k", "super+t"], "command": "title_case" }, { "keys": ["ctrl+alt+super+m"], "command": "set_file_type", "args":{ "syntax" : "Packages/Markdown Extended/Syntaxes/Markdown Extended.tmLanguage" } }, { "keys": ["ctrl+alt+super+t"], "command": "set_file_type", "args":{ "syntax" : "Packages/Text/Plain Text.tmLanguage" } } ]

The first keybinding creates a shortcut for Title Case, which doesn't have a default keybinding. The shortcut is CMD+K, then CMD+T, which follows the same pattern as the Upper Case and Lower Case bindings.

The second keybinding toggles between text and Markdown syntaxes for the current file. Mostly this is handy for .txt files that contain Markdown. I noticed, however, that this must be a keybinding I originally created for ST2. Package locations have moved around a bit since then. I had to unpack the Markdown Extended package with PackageResourceViewer and point the keybinding to the unpacked tmLanguage file. There must be a better way.

Preferences

Here's my current Markdown Extended.sublime-settings. This is where I set the a default theme for the syntax that's different from the general theme.

{ "color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme", "margin": 100, "wrap_width": 80 }

And here are my general user preferences. I use Inconsolata at a sane size for mature eyes on large or Retina displays. Tabs are two spaces as the goddess intended. You can also see here that I ignore the default Markdown package.

{ "color_scheme": "Packages/Colorcoder/PlasticCodeWrap (Colorcoded).tmTheme", "font_face": "Inconsolata", "font_size": 17, "tab_size": 2, "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true, "ignored_packages": [ "Vintage", "Markdown" ], "original_color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme" }

I'm not obsessive about fixed-width fonts. Check out Dan Benjamin's Top 10 Programming Fonts and follow-up posts for some excellent suggestions. Adobe's Source Code Pro is nice if you don't mind having Adobe software on your system.

That's about it for setup. The magic is in the writing and the coding.

#

Toolbox: Web Development Tools

My October column at Visual Studio Magazine follows on last month with 14 Tools and Extensions for Web App Development, with a focus on extensions for Visual Studio 2013 (and 14, when available).

There's some cool stuff here, from WebEssentials to CSS wrangling tools Node.js and a number of useful testing tools. I hope you find them useful.

#

Toolbox: Documenting Web APIs

My September column at Visual Studio Magazine covers Web API Documentation Tools — some tools and frameworks that make getting from your web service codebase to useful API documentation relatively painless.

I know documentation is not a favorite task for many developers, but it's really crucial for acceptance and ease of use for your customers. You don't have to write the Great American Novel, and these tools do most of the heavy lifting for you.

#

Toolbox: Semantic Highlighting

My August column at Visual Studio Magazine covers a recent obsession: Semantic Code Highlighting. You'll get a brief history of syntax highlighting, along with some examples of various kinds of code coloring, then I dive into some new tools that let you employ semantic highlighting in your own coding environment. I highly recommend it.

#

My Web Perf Book For O'Reilly

Head over to HTTP Archive and check out their trends graphs. Notice anything? That's right, web pages keep getting bigger and more complicated. The problem here is that — particularly in e-commmerce — consumers of your site expect it to load and become interactive quickly.

Turns out, the problems involved and solutions needed to fix them depend, mostly, on straightforward, Web Dev 101-level knowledge and technology. I recently wrote a short e-book on the subject for O'Reilly, Web Page Size, Speed, and Performance (free, registration required). There's also an accompanying blog post on O'Reilly Radar, It's time for a web page diet.

Slimming down web sites is not necessarily a matter of learning new and sophisticated programming techniques. Rather, getting back to basics and focusing on correct implementation of web development essentials — HTML, CSS and JavaScript — may be all it takes to make sure your own web sites are slim, speedy and responsive.

Interesting side note: mobile web users (and probably app users as well) expect faster interaction than on the desktop and are more likely to ditch an action if it's slow. Think about the implications of that complication on your app development plans.

#

Toolbox: HTTP Debugging Tools

In my July column for Visual Studio Magazine, HTTP Debugging Tools: Buy, Borrow or Build Your Own Tools?, I take a look at some of the popular current offerings: Wireshark, Fiddler, Charles and HttpWatch. Each represents a slightly different set of features at various price points, from free to enterprise subscription.

I also had a chance to talk with Eric Lawrence and Karl von Randow, developers of Fiddler and Charles, respectively, about the experience of building these apps.

#

Markdown Links with Template

In Dr. Drang's recent blog post, Quicker Markdown linking with TextExpander, the good Doctor takes a five-step, TextExpander-powered workflow for creating Markdown-flavored links created by David Sparks (of Mac Power Users fame and notoriety) and improves it with a new, streamlined TextExpander snippet fueled by 18 lines of AppleScript.

The Dr. Drang version programmatically retrieves the URL of the current page in either Safari or Chrome and creates a Markdown link with it. The upside of this method is that you can create a Markdown link without having to switch between apps. The downside is that the web page has to be in the currently selected tab in either Safari or Chrome and you have to supply the link text.

It's a neat solution. In theory it saves you a context swap between editor and browser, and Dr. Drang's script is also an interesting starting point for much deeper customization. But I'd like to point out what may be an even better option.

Template Extension

The Template extension for Chrome is a highly customizable utility for extracting data from a web page to the clipboard in a single action.

The key feature is Template's built-in templating language the enables you to create custom actions that can extract just about anything directly associated with a web page or browser: page URL and title text, meta information in the page, links for all current tabs in the browser and a whole lot more. Check out the Guide for details about all of the template tags and operations you can use.

You can execute any of the templates set up in the extension via a toolbar menu, a right-click context menu or, optionally, a user configurable, template-specific keyboard shortcut.

I've only touched the surface of what Template can do, but it hugely simplified many aspects of my work as a technical writer, particularly when it comes to capturing research notes or sharing links. Template has become one of those must-have, first install tools, alongside Alfred, Sublime Text 3 and TextExpander.

I'll give you a few examples of Template in action just to give you an idea of what's possible.

Using Template

The simplest template I use regularly just grabs the title of a web page and the URL, something I might grab to paste into an email or Tweet. The template tags are simply {title} {url} and it returns simple strings like so:

Bash $PS1 Generator 2.0 https://www.kirsle.net/wizards/ps1.html

A similar one creates a simple Markdown link using the [{title}]({url}) tags. The results look like this:

[Bash $PS1 Generator 2.0](https://www.kirsle.net/wizards/ps1.html)

Template includes a built-in {selectionMarkdown} tag that takes any text you've selected from the page and does some simple Markdown conversion of elements such as links, emphasis, strong and so on. Here's an example:

Still, [as Marvin and Tammi say](https://www.youtube.com/watch?v=svAs-6MiqxE&feature=kp), ain't nothing like the real thing, baby.

I haven't tested this extensively to see what breaks the encoding, but it meets my limited expectations.

There's also a {selection} tag that just grabs the selected text. I use this, along with the title, URL and a blockquote prefix, for research notes with an attribution.

> {selection} From: [{title}]({url})

So I just select some text, invoke the Template action, then paste:

This works, but… blech. There’s a better way. From: Quicker Markdown linking with TextExpander - All this

There are some limitations here.

First, it requires Chrome. That's fine for me, but you may prefer another browser. (I keep Firefox around just for those moments when I need TableTools2, the Firefox extension that Sorts, Searches, Summarizes, Filters, Copies, Charts, Rearranges, Combines and Compares HTML Tables!)

Second, it requires going to the browser tab I want to copy from, which is a context switch specifically avoided by Dr. Drang's script. I find this an acceptable compromise — generally I'm already looking at the tab when I want to grab a link or other data from it, then switching over to the editor in which I want to use the results. Your mileage may vary.

I've used all of, what... four of the built-in tags here, and none of the available operators. There's just a ton of potential in Template. It's in no way a replacement for TextExpander, but it is another incredibly handy arrow in the quiver.

And now that I think about it, some pretty interesting things could be done with Template and TextExpander together to extract elements of a page, place them on the clipboard, then paste them with additional formatting or cursor placement via a snippet and some script. Hmmm....

#

Toolbox: Code Editing and Collaboration Tools

My May column is up at Visual Studio Magazine, 25+ Tools for Cross-Platform Code Editing and Collaboration. I take a look at code editing and collaboration software that offer a familiar environment across multiple operating systems. Most are browser-based coding tools, and I was surprised how polished and sophisticated these tools have become.

Lots of fiddles. Lots and lots of fiddles.

#

New VSMag Columns: Nuget, Git and Mercurial

Somehow in all the recent excitement I missed the publication of my March and April columns over at Visual Studio Magazine.

6 Top .NET Package- and Dependency-Management Tools in March covered some background on why package management tools are great and a quick overview of some popular tools for Windows. Nuget, obviously, gets most of the attention, but I also highlighted OpenWrap, NPanday, Chocolatey NuGet, Chewie and Ninite.

To be perfectly honest, I think these tools all need work to catch up with the likes of apt-get, homebrew, and the like on Linux and Mac. However, I can't imagine life without package managers and applaud any effort to refine tools like this on Windows.

Source Code Control with Git and Mercurial in April covered resources for using the popular distributed source code control and collaboration tools Git and Mercurial on Windows. Many of these links come from my own "how do you do that again?" archive because, well, I regularly forget how to do much beyond cloning, adding, committing and pushing. Merge conflicts? Oh my...

#

Toolbox - An Update on Windows Azure Tools

My February column is up over at Visual Studio Magazine and it includes 43 Great Windows Azure Development Resources . I hope you find it helpful.

A lot has happened since I wrote my first Windows Azure Development Resources column for MSDN Magazine back in 2010. The Azure team is doing great work and they should be proud.

#

More articles...