Don’t Make This Code Review Mistake

By Dan Bader / December 22, 2016

Ever introduced code reviews to an existing code base?

It can be awesome, or pure hell –

On that nice Vancouver morning I sat down with a fresh cup of coffee, ready to dig in and give some feedback on a fix we wanted to ship before the end of the sprint.

When I loaded up the first set of changes into my trusty Sublime Text, my eyes nearly fell out 👀

This was a serious “can’t see the forest for the trees” type of situation:

The formatting for this code was All. Over. The. Place.

There was no consistency whatsoever in how the code was indented, how braces were positioned… even the spacing between operators inside expressions was seemingly randomized: value +=10*  othervalue

Ugh.

It just seemed so sloppy! And the inconsistent formatting made it really hard to see what the code did, what the intention behind it was.

It felt like my brain was 90% occupied with parsing out the code, instead of being able to focus on the bigger picture and to hunt for actual bugs.

I must’ve spent at least an hour cleaning up the formatting, before I was able to give any substantial feedback on these changes. It was the most tedious code review of my dev career.

My busywork was of little value to the company, too.

They paid me a software engineer’s salary for nudging around braces and juggling whitespace…

That same day I pulled the whole team together to discuss the mandatory use of a code style checker before code reviews.

And guess what? It worked out great.

Most developers on the team were using Sublime Text so we all installed the SublimeLinter package. It’s the most popular code linting framework for Sublime Text and I like it for its focus, simplicity, and performance.

A code linter is a program that analyses your source code for potential errors. Code linters are great at finding “mechanical” issues like syntax errors, structural problems, such as the use of undefined variables, and also best practice or code style violations.

SublimeLinter let’s you integrate code linting feedback into your editing environment.

Setting up SublimeLinter gives you immediate feedback on your code right when you type it:

When you install SublimeLinter it doesn’t actually include any linter engines. It’s more like a “meta linter” that lets you integrate various command-line linter binaries like Flake8 (Python) or JSHint (JavaScript) under one roof.

The linter binaries do the real work. And that way, SublimeLinter can support more than just one programming language. If you’re doing any kind of full-stack web development, for example, you could install code linters for JavaScript, CSS, Ruby, Go, and Python.

SublimeLinter will then pick the right code linter to run on each file you’re editing. Any errors or warnings found by these separate linters would all be integrated with the same look and feel into your Sublime Text editor window by SublimeLinter.

And because we were using command line tools through SublimeLinter we were able to set up the same set of code style checks on our CI build server very easily. That way no badly formatted code could slip through the cracks ever again.

It made the whole team more productive. And it was great for morale: No more time wasted on nudging braces or juggling whitespace 🙂

Additional Resources & Links

Here are a couple of extra links to help you get set up with SublimeLinter. I listed the most common linter binaries and linter plugins so you can get started right away:

Why you should do most of your text editing in Sublime Text

By Dan Bader / December 15, 2016

When 15-year old me decided to become the world’s greatest guitarist my ingenious battle plan looked like this:

I’m just going to practice all the genres that I like at the same time. 🎸

That’ll give me maximum exposure and I’ll be able to rock it out in no time.

So, off I went and got practice books and magazine lessons for blues, jazz, and metal at the same time. I might’ve even thrown in some Pink Floyd solos for good measure.

Without even knowing how to fret a power chord properly I dove into lessons for these wildly differing styles…

…and a month later I had made exactly ZERO progress and was ready to give up the guitar altogether. 😞

Looking back I know now what guaranteed this failure: practicing all these different styles of music at the same time confused my brain and mixed up my muscle memory.

All this context switching didn’t help. It just added overhead and made sure I wasted otherwise productive time.

Years later I discovered I was about to make the same mistake with my development setup:

I caught myself using 5 different editors to write text in 5 different contexts –

I used Sublime Text to write code, my Git commits I wrote in Vim, my notes in Evernote, and my blog posts in Scrivener.

And this “editor proliferation” had the same effect that trying to learn how to play blues, jazz, and metal at the same time had: I lost a ton of productive time to multitasking.

Wonder how I reclaimed all this time lost to useless context-switching?

I decided to double down on ONE tool and to do as much of my writing as possible in one editor, Sublime Text.

By sticking to just one tool for most of my writing I’d have a chance to fully master it and shake off the useless context switches.

Sublime Text is a great choice for this because it’s so malleable. With it’s vast plugin library Sublime can be made into a flexible tool that can handles most of your text editing work.

Now I still use Sublime to write code, but I also write my Git commit messages in it, as well as my random notes, to-dos, and blog posts.

Let me give you a couple of pointers on how to replicate this setup:

For writing Git commit messages I set Sublime as my Git editor and installed the Git Commit Message Syntax package to get syntax highlighting for my commit messages.

For to-do lists and managing all kinds of personal and business-related projects I’m using the PlainTasks package. PlainTasks is a full-featured task management plugin that reminds me of Emacs’s Org mode. Keeping my to-dos in plaintext files has the added benefit that they’re easy to back up and sync across all of my devices.

For note taking I started out by simply writing plaintext .txt files in Sublime and storing them in a folder that I sync across devices with Dropbox. Lately I started using the PlainNotes package which adds shortcuts for creating and browsing existing notes directly within Sublime.

For blog posts and other long-from writing I found the amazing MarkdownEditing package. It adds a nice color scheme for Markdown files and improves Sublime’s syntax highlighting and Markdown editing features. I like to combine it with the Markdown Preview package to preview and read Markdown-formatted text with Sublime Text.

In summary, I’d like to encourage you to try and cut back on the number of different text editors you use day to day. It’s better to master just one tool like Sublime Text, before branching out and adding other text editing apps to the mix.

It’s too easy to become a “jack of all trades, master of none” (or worse–completely halting your progress). Don’t repeat my mistake by trying to learn blues, jazz, and metal at the same time 🙂

Getting fired for a debug “print” statement?

By Dan Bader / December 8, 2016

Did I ever tell you about that one time I took down the customer portal for a seven figure SaaS business with an accidental debug print statement?

It was easily one of my most uncomfortable moments in my developer career.

I had just joined this team maintaining and building a big Python web app that was the core part of this SaaS company I worked for.

In my first few days on the team I’d worked through some smaller tickets to familiarize myself with the code base. Pretty straightforward web dev stuff: extend a REST API here, sort these query results differently there.

Things were going fine and I felt right on track for demonstrating to my colleagues that I wasn’t a bozo…

Until I pushed this small and unsuspecting deploy to production…

Things looked fine for a moment. Then,

KABLAMO! –

…this spike of “500 Internal Server Error” messages shows up in our monitoring dashboard.

Uh oh.

Turns out my “small and unsuspecting” deploy to production had still contained a debug “print” statement that I forgot to remove.

Everything had worked fine while testing locally and on the staging system.

At the time the company I worked for had partners in Japan. The system used a unicode text encoding to represent text fields like first and last names in the database.

This was all fine and dandy, but when my newly added “print” statement started printing these Japanese names with unicode characters to the logging console on stdout, the Python interpreter freaked out:

The I/O encoding had been set up to use ASCII…and ASCII can’t represent Kanji characters like 大 or 翔.

Because it was a fairly “hot” request handler that contained the print statement, the whole app came crashing down in a hail of “UnicodeDecodeError” errors.

The load balancer decided to take the faulty app instance out of rotation, but of course the exact same thing happened to its twin brother.

A few seconds later the whole system was practically DOWN as core functionality became unreachable for our customers.

After we realized what was going on we quickly used Git to track down the commit where the print statement was added. We removed the offending line and brought the system back up.

I wasn’t fired for that screw-up but boy did I feel embarrassed in front of my team.

And I swore to myself I’d never deploy (or even commit) an accidental “print” statement again.

Some time later I found this great little Sublime Text plugin that can help you avoid this kind of (potentially career-ending) mistake: it’s called GitGutter.

GitGutter shows you which lines of a file were modified compared to the latest commit in Git. Right inside your Sublime Text editor window.

A heads-up display for Sublime Text

The greatest benefit of GitGutter is that it makes you more aware of how you change your code. It adds helpful but unobtrusive Git diff icons to the gutter area (that little margin on the left of the text area).

 gitgutter-example

To give you an example, in the screenshot above you can easily see that lines 96-98 were added (green plus marks). Some lines around line 103 were removed (red arrows), and lines 105-108 were modified (bluish squares).

This allows you to quickly see the state of your file as you are editing it—the extra awareness helps prevent accidentally committing an unwanted change, like a debug “print” statement or an accidental debugger breakpoint.

Selectively roll-back file modifications

gitgutter-rollback

GitGutter has another cool feature that lets you selectively roll-back file modifications right inside Sublime Text. This means you don’t have to switch to another tool, like a Git client, to make changes like that.

Of course you can use the full power of Sublime’s undo and redo functionality with GitGutter to undo and re-apply modifications as you see fit. In the other Git tools I tested, working with file modifications never felt as fluid as it did with GitGutter.

GitGutter is one of the packages that I have installed and activated in my Sublime Text at all times. It’s fast, pretty, and stable. I also like the philosophy behind it—GitGutter has a small footprint. It does one thing only and it does it well. I’m not a fan of ginormous plugins that add a ton of features I never use.

I highly recommend GitGutter if you use Git in your development workflow. You can install GitGutter via Package Control. If you’re not using Git for source control you might want to check out VCS Gutter as an alternative. It’s a fork of GitGutter that supports Mercurial and Subversion.

How to edit opening and closing HTML tags simultaneously with Sublime Text.

By josh / August 28, 2014

When I’m editing HTML, I often find myself wanting to edit pairs of tags, like swapping out a set of <span> tags for a pair of <div> tags, or changing an <ol> to a <ul>.

It’s a pain to edit them separately, and Quick Add Next only works in the simplest of cases (when tags aren’t nested).

If you install the Emmet plugin, you’ll get a sweet shortcut that allows you to edit both tags at once.

Just hit Cmd+Shift+K (on OS X) or Ctrl+Shift+’ (Windows and Linux) to select both tags for editing.

Want more Emmet awesomesauce? Check out the Emmet poweruser tips in this week’s links.

This Week’s Links

Emmet’s Hidden Power Features

Designer Jordan Moore covers four little-known features in Emmet, including a way it can make your site load faster.

Adding PHP build system to Sublime Text 2

Ever wish you could run some PHP code and see the output in Sublime? Steve Claridge can show you how.

6 Ways to Turn Sublime Text Into the Perfect Blogging Tool

David Turnbull writes on SitePoint about his sweet Markdown-based blogging workflow, which is very similar to the way I create this newsletter.

Shameless plug: I’m the editor of SitePoint’s business and marketing channel. If you’d like to write about lessons you’ve learned from your startup (or something more techincal, like your favorite coding tricks), email me at josh.earl@sitepoint.com and I’ll see if I can’t hook you up.

Using Git Inside of Sublime Text to Improve Workflow

The command line is great and all that, but isn’t it nice when you don’t have to switch tools all the time? Chris Sevilleja provides a nice overview of how to integrate Git with Sublime.

Setting Up Sublime Text 3 for Javascript Development

 

Plugins Worth Installing

sublime-text-npm

Once you’ve mastered using Git from Sublime, you can add npm commands as well.

sublime-hacker-typer

You can always tell real hackers in the movies because they can pound out hundreds of lines of flawless code while dinosaurs rip people’s arms off.

Well, this plugin makes you look almost that cool. No dinosaurs, though.

Sublime Text power user tricks (plus how to debug your PHP like a boss)

By josh / August 7, 2014

One of my favorite programming jokes of all time goes something like this:

Some people, when confronted with a problem, think “I know, I’ll use regular expressions.” Now they have two problems.

It’s funny because it’s true.

But … Sometimes the alternative is painful enough that it’s worth figuring out a regular expression that will do the trick.

A few days ago, I got this email from Peter, a newsletter subscriber:

I need to find and replace several hundred of this list items. Each one is custom and each one needs only to be <li>. Here’s what they look like:

<li class="post-284 product type-product status-publish hentry first taxable shipping-taxable purchasable product-type-simple product-cat-8-botanical-wrap-tapers product-cat-beeswax-candles in stock">

It’s from WordPress. Each item starts out custom and ends with various custom classes. I don’t want to manually edit all 270 of them. I will go nucking futs.

Peter

Here’s my response to Peter’s plea:

Hey Peter! That sounds … horrible. 🙂

I think I’ve gotcha covered:

  • Open the Replace panel.
  • Enable Regex mode by clicking the little button on the far right with the *. symbol on it.
  • Enter this regular expression in the Find What field: class="[^>]*
  • Leave the Replace With field empty
  • Hit Replace All.

That regular expression matches the text class= plus all the text up to the closing > character.

It worked, and Peter was able to adapt the regex to remove several other obnoxious bits of HTML as well.

You don’t have to be a regex wizard to use them occasionally for editing tasks like this. Read a few intro-level blog posts to give you an idea of what they’re capable of, then just Google your way through when you have a specific problem to solve.

Sublime’s realtime search highlighting is a big help. You’ll see your results change as you modify the regex.

Add a color picker to Sublime

I’ve been a big fan of GutterColor since I first learned about it several months ago, but there’s a new plugin that picks up where GutterColor left off.

Like GutterColor, ColorHighlighter lets you preview hex colors in your stylesheets by putting colored dots in the gutter of your file. But it also provides inline highlighting of the hex color in your code using the appropriate hue.

And … It lets you launch your system’s color picker with a right click. Sublime users have been clamoring for a built-in color picker, and this looks like a good way to add one.

ColorHighlighter is available for ST2 and ST3. If you want to use the gutter icons, you’ll need to install an external tool.

Want better documentation for Sublime? Here’s your chance.

Sublime’s (lack of) documentation has always been a sore spot.

The team behind the Unofficial Sublime Text Docs has done a lot to improve that, and they’re looking to expand the docs and include better coverage of ST3.

To fund the writing, they need to collect $4,000 by August 9.

They’ve already raised more than $1,000. Think we can put them over the top? If everyone who gets this email gave just $1, we’d raise more than $150,000.

You can donate here:

https://www.bountysource.com/teams/st-undocs/fundraiser

As a bonus, through the end of the week, I’m going to donate $10 from every sale of Sublime Productivity to the Unofficial Sublime Text Docs project.

To become a more efficient developer today and support a great cause, go here:

http://sublimetexttips.com/sublime-productivity

Power user tips, debugging PHP and more

Wes Bos’ Sublime Text Power User slide deck

How to debug your PHP code in Sublime with Xdebug

Best of Sublime Text 3: Features, Plugins and Settings

Sublime Text packages for front-end web development

Sublime Text Tips & Tricks

How to select dash-separated words in you CSS files (plus 7 other tips)

By josh / June 26, 2014

Using dashes to separate words in CSS is a great way to make your stylesheets more readable, but there’s a problem: Sublime treats the hyphenated selector as two separate words, which means you can’t double click to select it. Here’s a fix (courtesy of compscientist).

Check out this gorgeous, Yosemite-inspired replacement icon (OS X only). I really like this one. I don’t have Yosemite installed yet, because my Mac is my daily driver at work for iPhone development, and I don’t want to risk installing a beta on it. But I’m tempted to install this icon anyway… (Side note: Does any other popular app have a cottage industry of people creating replacement icons? There are dozens out there for Sublime…)

Here’s a quick read on creating and using snippets. If you like creating your own snippets, I do a deep dive in Sublime Productivity. Check it out here:

http://sublimeproductivity.com

These days, 4 spaces seems to be the defacto standard for most coders, but sometimes you’ll stumble across a project that uses 2. You may want to “fix” that JavaScript library before checking it in to your repo. This macro makes it easy to toggle back and forth between 2 and 4 spaces. I happened upon it in a Stack Overflow thread that also includes a couple of other suggestions for dealing with the same issue.

This plugin integrates OS X spell checking into Sublime.. Stumbled across it this week but haven’t tried it out myself yet. It’s apparently broken on ST3 beta build 3049.

If you’re relatively new to Sublime, this article includes a list of 11 excellent plugins. Most of these are well known, but it’s probably worth checking out even if you’re a Sublime vet. You might have missed one. 🙂

Along the same lines, here’s a grab-bag of 25 tips. It includes some good keyboard shortcuts and must-have plugins.

Finally, this is a quick walkthrough on using Sublime to do regex search and replace. If you find yourself needing to figure out a regular expression, Sublime’s realtime display of matches is super helpful.

P.S. Want more tips to improve your Sublime workflow? Go here:

http://sublimetexttips.com/newsletter

It’s not a Rick Roll, but here’s the second best way to haze the new guy

By josh / June 13, 2014

I started my technical career during the height of the Rick Roll craze.

And being the new guy (and a temp, to boot), I didn’t exactly get the corner office. Nope, I shared a cube cluster with a rowdy bunch of desktop support guys.

Do you have any idea what it’s like to get sucked into Rick Roll battles when everyone else has admin priveledges on your machine?

If I managed to score a point or two, the backlash was merciless.

One time they set my Internet Explorer home page to the Rick Roll video.

Another time they my login sound to the full-length version of “Never Gonna Give You Up.”

They even made some icons on my desktop that looked like my Excel spreadsheets but were really just another way for me to get my daily dose of Rick Astley.

This experience left a deep impression on me, and I look for every opportunity to pay it forward.

One of my favorite ways to hazy the new Sublime Text fan on your team works like this.

Wait for just the right opportunity. Keep an eye on what he’s doing throughout the day. When you walk by his desk, peek at the minimap. Is he editing a file that at least takes up the full height of his 27″ monitor?

Perfect.

Assume a friendly, welcoming expression, and approach him in a casual, non-threatening way.

As you reach his desk, hold your hand out as if to shake. At the last minute, quickly reach over to his keyboard and punch F5. (That’s assuming he’s using OS X. If he’s using Windows, you’ll want F9).

Then run.

P.S. For more useful (if less cruel) Sublime shortcuts and tips, check out:

http://sublimetexttips.com/newsletter

Using Sublime Text multi-select to insert lists, numbers and GUIDs

By josh / June 11, 2014

On this one project I worked on, we needed to generate dummy product IDs for test runs.

Each product ID needed to be unique, or the test run would go haywire.

What’s that? There’s a programming convention for handling this problem, you say? It’s called a GUID?

Well, maybe. But someone on this project decided that regular GUIDs took up too much disk space, and they devised an ingenious solution: a five-character GUID!

So, yeah…

Conflicts ensued, and they always triggered troubleshooting sessions …

GUIDs are definitely useful.

What if you’re editing some data by hand and need to generate and insert a few GUIDs on the fly?

The Text Pastry plugin (Sublime Text 2 and 3) has you covered.

Text Pastry extends Sublime’s multiple selection feature, adding support for some advanced paste scenarios where you want to insert something different at each cursor point.

For example, you can copy a list of space-delimited words, then insert multiple cursors and paste one word at each insertion point.

Or you can get your cursors positioned and then insert an incrementing number at each one.

And of course, you can use it to generate and insert a different GUID at each cursor, which could be a lifesaver if you’re editing some CSV data by hand.

One feature that’s noteably absent: support for the five-character GUID.

For more useful tips and tricks, join the Sublime Text Tips weekly newsletter.

Prevent copy and paste rage with this simple tweak (part 2)

By josh / June 9, 2014

A few weeks back I wrote a post about the copy_with_empty_selection setting, which allows you to tell Sublime not to copy the current line if you haven’t selected any text.

A lot of readers were happy with the tweak, but reader Carson noticed a downside:

Hey Josh, great tip (and I love all your emails), but one thing I noticed is that this breaks the ability to just ctrl+x or ctrl+c and grab a whole line when your cursor is on a line (not selecting everything). I mean, duh – of course it does, but I use that a lot and ran into it within a few minutes after setting this up. You’re probably already aware of that, but in case you weren’t – well, now you are. 🙂 Keep up the great work, sir.

It is useful to be able to grab the entire line without making a selection first, so I did some experimentation to see if I could find a keyboard shortcut mapping that preserves the ability to use cut and copy on lines of code but prevents you from accidentally overwriting the clipboard when the cursor is on a blank line. (For me, this is the most frustrating part of the copy lines feature.)

Keyboard shortcuts support a context element that allows you to add rules about when the shortcuts should or shouldn’t fire. The following keybinding maps the copy and cut commands (on OS X) to the noop command when the selection is empty and the text that proceeds and follows the cursor contains only white space:

[
    { 
        "keys": ["super+c"], "command": "noop", "context":
        [
            { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
            { "key": "preceding_text", "operator": "regex_match", "operand": "^\\s*$", "match_all": true },
            { "key": "following_text", "operator": "regex_match", "operand": "^\\s*$", "match_all": true }
        ]
    },
    { 
        "keys": ["super+x"], "command": "noop", "context":
        [
            { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
            { "key": "preceding_text", "operator": "regex_match", "operand": "^\\s*$", "match_all": true },
            { "key": "following_text", "operator": "regex_match", "operand": "^\\s*$", "match_all": true }
        ]
    }
]

If you’re on Windows or Linux, you’ll want to replace super with ctrl.

With this keybinding in place, you can delete the copy_with_empty_selection override from your preferences file and the copy and cut shortcuts will allow you to grab the contents of the current line without making a selection. But it will ignore the copy and cut commands if you’re on a blank line.

Sublime’s keyboard shortcut mappings are extremely flexible. To learn more about how you can make use of advanced features in Sublime, go here:

http://sublimetexttips.com/newsletter

Josh Earl

How to learn any keyboard shortcut in Sublime Text

By josh / June 7, 2014

Sublime Text has keyboard shortcuts for almost everything, but it’s sometimes hard to track them down. Here a few strategies that will help you uncover the shortcuts for all of your favorite features.

Dedicate a few minutes to browsing through Sublime’s menus.

Looking at the menus when you’re not already on a mission to find something specific is a great way to discover new features. And in many cases, the keyboard shortcuts are listed right next to the command, which is handy when you forget a shortcut you don’t use very often.

Now pretend the menus don’t exist.

Get comfortable using the Command Palette for everything. The Command Palette is Sublime’s equivalent of an Easy Button—you can use it to perform almost any command without reaching for the mouse, even if you can’t remember the keyboard shortcut. Using it gets you out of the habit of reaching for the mouse all the time, and it’s still usually faster than using the menus.

And as you enter commands, take note: In many cases the keyboard shortcuts are listed right next to the name of the command.

When you can’t find a shortcut in the menus, it’s time to dig.

Open the default keybindings file for your operating system by launching the Command Palette and entering keybindings default. This is the master file where Sublime defines all of its default keyboard shortcuts.

It’s not always obvious what the shortcuts are mapped to because the shortcuts use the Sublime API terms for commands, but you can often find what you’re looking for. For example, the Distraction Free Mode shortcut, which I was trying to remember while writing this email, is Command+Shift+Ctrl+F on my Mac. If you search for “distraction” in the keybindings file, you’ll see that this shortcut is bound to the command toggle_distraction_free. Clear enough.

Shortcuts for plugins are a little trickier.

Most won’t show up in the Command Palette or application menus. But since all keyboard shortcuts are defined in easily readable JSON-formatted files , you can uncover them with a little detective work. Open the Command Palette and type browse packages to open the Packages folder, then hunt around for the name of the plugin you’re interested in. Once you find the folder, look for the keybinding file, which will have a sublime-keymap extension.

Many plugins put a link to the keybindings file under the Preferences | Package Settings menu, which is a lot more convenient than hunting through folders. If your favorite plugin doesn’t include a menu entry for its keyboard shortcuts, consider creating the entry yourself and submitting a pull request to the plugin’s owner.

P.S. Want to improve your mastery of Sublime Text? Start here:

http://sublimetexttips.com/newsletter

Where should you keep your Sublime Text projects?

By josh / June 6, 2014

Reader Matt S. wrote me recently because he’s been procrastinating on migrating to a new computer, partly because he isn’t sure how best to transfer his Sublime Text preferences and plugins.

This also got him wondering about where he should be keeping his Sublime project files:

I tend to keep .sublime-project/.sublime-workspace files close (in the file system) to the project they pertain to… this might be ill-advised? I don’t know, maybe better to keep them all in a single directory? ~/.sublime-projects??

Do folks keep them in the project’s source repo? I haven’t actually done that… not sure how I feel about it.

When I first started using Sublime projects, I didn’t like the idea of keeping them in the project root directory either. Wouldn’t it be better to keep all of my projects in a single folder? Then I could easily open any project from a central location.

It turned into a bit of a mess, especially because I was syncing between multiple machines. Adding folders to the projects became a pain, because I’d have to stop and figure out an appropriate relative path…

Sublime projects are really meant to be housed alongside the project’s code files. Says the official Sublime documentation:

Projects in Sublime Text 2 are made up of two files: the sublime-project file, which contains the project definition, and the sublime-workspace file, which contains user specific data, such as the open files and the modifications to each.

As a general rule, the sublime-project file would be checked into version control, while the sublime-workspace file would not.

For multi-developer projects, this makes it easier to get the code building on your machine–project files can include special build tasks. You can also include project-specific preferences, like using two spaces for indentation instead of four.

Life got easier when I quit trying to fight The Man and use projects as they were intended to be used.

For more about how to use Sublime projects, go here:

http://sublimetexttips.com/newsletter

How to quickly test URLs embedded in your code and text files

By josh / June 5, 2014

Why does it always happen at the worst possible time?

Several months ago I wrote a blog post about my experience self-publishing and marketing Sublime Productivity.

A few hours after publishing it, one of my coworkers pinged me on HipChat: My post was on the front page of Hacker News!

I logged in to Google Analytics, and I was getting thousands of hits on the post.

Then I got an email: “Hey, the link to your book’s page is broken.”

Gah! Dozens of visitors were clicking my link and getting nothing but a 404.

It’s really easy to make mistakes when you’re copying and pasting URLs. You grab the wrong one but don’t notice. You miss the last couple of characters when you select the text.

It’s always a good idea to test every URL you use, whether it’s a GitHub repo link in a code comment or a link in a Markdown file.

But copying and pasting links back into your browser is such a pain…

The Clickable URLs plugin addresses this issue by turning URLs into hyperlinks that open in the browser of your choice.

It even includes a handy Open All URLs command that you can use to quickly test every link in that blog post you’re writing …

Clickable URLs is available in Package Control for both Sublime Text 2 and 3.

To get more tips like this one delivered straight to your inbox, join the Sublime Text Tips newsletter:

http://sublimetexttips.com/newsletter

Instant filler text for your mockups and wireframes

By josh / June 4, 2014

Aren’t filler headlines fun to write?

They’re even more entertaining when you haven’t slept in 24 hours.

When I edited the student newspaper in college, my fellow editors and I would pull an all-nighter every Thursday to get the weekly edition “put to bed.”

We’d compete to see who could come up with the most hilarious fake headlines for the stories we were editing. After about 18 hours of work and several 22 oz. cups of Mountain Dew, we’d come up with some pretty epic stuff. Or at least it seemed that way …

One of my lamer efforts was: “Men’s basketball team not so good this year.” (I think I was still nursing my first Mountain Dew when I wrote that one.)

Unfortunately, our bleary copy editing eyes overlooked that one in the final proof read …

I learned what had happened when the assistant men’s basketball coach stormed into my office, slapped a pile of papers down on my desk and demanded to know why we printed that headline during recruiting weekend.

Yup, all of the promising high school players the basketball team was courting were on campus.

I learned my lesson from that: Don’t use clever “fake” headlines in mockups and designs, unless I like the idea of going toe-to-toe with red-faced men much larger than me …

At the time, I didn’t know about Lorem Ipsum text, the design industry’s standard for filling out a layout so you can see how it’ll look with text.

Using Lorem Ipsum rather than your own witty filler is A Very Good Idea.

And naturally Sublime comes with a snippet that makes it a snap to insert.

Just type lorem and hit the Tab key, and you’ll get a full paragraph of nonsensical (and non-embarrassing) filler:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If you like the idea of not having to type filler but still want to retain the possibility of having to explain yourself, check out the HipsterIpsum plugin, which will allow you to insert more socially relevant text like this:

Food truck gluten-free banksy, fap occupy bespoke whatever mustache. Occupy kogi kale chips chillwave, odd future typewriter iphone twee truffaut viral ethical artisan put a bird on it single-origin coffee banh mi. Master cleanse brunch occupy trust fund marfa yr.

If you’d like to Occupy Sublime as your odd future typewriter, I have just the thing to help you with your master cleanse:

http://sublimetexttips.com/newsletter

How to get even the trickiest relative paths right–every time

By josh / June 3, 2014

It’s got to be the most frustrating problem in programming.

You add a new file to your program, maybe a whizbang jQuery plugin.

Then you start coding away, incorporating it into your site.

But when you go to test it … nothing. It silently fails.

You double check your syntax, looks OK.

No errors in the console.

What the … ?

After 20 minutes of reading Stack Overflow posts and checking Github issues, you get a flash of inspiration …

Yep, that’s it. Wrong path. File wasn’t even getting included on the page.

It’s happened to me a hundred times. I can never remember whether I need to use /my_folder? Or maybe ../my_folder? Or just my_folder?

This has bitten me so many times that my first step whenever I link in a new file is to do some kind of “hello world” test, either literally writing out “hello world” (if it’s a JavaScript file) or maybe changing the background color of the page to red (if it’s CSS).

This week I stumbled across an awesome Sublime plugin that eliminates this mistake entirely. It’s called FuzzyFilePath.

With this plugin installed, you can just start typing the name of your file in your document, and you’ll get an autocomplete list of available files, which you can filter with fuzzy matching.

Using a post-processor like Sass or Compass? FuzzyFilePath has you covered, allowing you exclude certain file extensions or folders from the list of suggestions.

FuzzyFilePath is available in Package Control. Unfortunately it only supports Sublime Text 3 at the moment.

P.S. Is there a problem in your workflow that trips you up regularly? It could be great fodder for your own plugin.

Creating one is not that difficult, even if you’ve never written a plugin before and don’t know a bit of Python.

For more about writing your own plugins and achieving Sublime mastery, sign up for the Sublime Text Tips newsletter.

Rot your brain in no time flat

By josh / June 2, 2014

Does autocomplete promote brain rot?

There’s a longstanding debate over whether code completion features in editors are more harmful than they are helpful.

When I first started coding professionally, I found this feature incredibly intrusive.

Every time I’d type a few characters, my IDE (usually Visual Studio) would flash a menu at me, whether I wanted it or not. Frankly, the flickering was nauseating.

But once I realized how helpful autocomplete could be, I started to depend on it.

Now it’s hard to imagine doing much coding without some assistance from autocomplete.

Am I a less productive for not having memorized the names of more of the functions available in jQuery?

Maybe. I’d rather delegate as much of that type of work to my tools as I can, though, and save brain cycles for the harder work of writing code that I’ll still be able to read three months from now…

If you’re also fan of autocomplete in Sublime, you may have noticed an ever-so-slight delay before the autocomplete list appears.

That slight hesitation (it’s 50 milliseconds, if you’re keeping track at home) before the autocomplete list appears is controlled by a preference.

If you’d like to reduce or eliminate the lag, just override the auto_complete_delay setting in your preferences file.

I set mine to 0.

What can I say? I’m a programmer. If I’m going to rot my brain, I want to do it as efficiently as possible.

P.S. For more ways to get Sublime to do your thinking for you, check out http://sublimetexttips.com/newsletter.

The one thing in Sublime that you can’t live without …

By josh / May 30, 2014

It hit me like a smack in the face.

Join Lines. One of the very first editor productivity tips I ever learned.

At the time, I think I was using Notepad++.

When I discovered that there was a keyboard shortcut to join two lines of code, removing the hard return and extra whitespace, I couldn’t believe how much time and effort I’d wasted doing it by hand. Usually with the mouse, I’m ashamed to admit…

(Sublime has this same feature, naturally. It’s in the menu under Edit | Line | Join Lines.)

To this day, Join Lines one of my favorite shortcuts.

How about you? I’d like to hear about your favorite Sublime tip.

What’s the one thing in Sublime you can’t live without?

How did you discover it?

What problem does it solve for you?

Do you have any unusual ways of using it?

Just leave a comment now and tell me.

I’ll include my favorite responses in future posts.

P.S. Make sure to sign up for the newsletter so you don’t miss future tips:

http://sublimetexttips.com/newsletter

Make Sublime’s Find double-plus good

By josh / May 29, 2014

When you hit friction in your workflow, you have two choices.

Option 1: Take to Twitter! Gripe and complain.

Option 2: Do something about it. Write a plugin that fixes the problem, then share it with thousands of other developers and earn their gratitude.

I often take the easier Option 1, but plugin author Todd Wolfson took the high road.

Feeling limited by Sublime’s build-in Find feature, he decided to learn him some Python and fix what was broken.

If you’d like to follow Todd’s example, I’ve written a book that’ll help you get started. You can check it out at http://writingsublimeplugins.com.

Here’s what Todd had to say …

#

Tell me a bit about yourself (name, current job, blog, Twitter, etc.).

My name is Todd Wolfson. I am a senior engineer at Uber and an open source enthusiast. My blog is http://twolfson.com, my Twitter is https://twitter.com/twolfsn, and my GitHub is https://github.com/twolfson.

What’s the name of your plugin? What does it do?

I have written a few plugins but the most prominent one is Find++. It adds a few commands to Sublime Text to make searching different file sets more streamlined (e.g. current file, open files, entire project).

How did you get the idea for your plugin?

For years I developed on Windows, making Notepad++ my editor of choice. It allowed me to search open files in a keystroke or a folder in a mouse click. When I moved over to Linux, I picked up Sublime Text. However, switching between these options required multiple mouse clicks, impairing my workflow. To solve this problem, I started development on Find++.

How much time did you spend writing the first version?

The first version took me a very long time. I was a Python novice and the Sublime Text documentation is not straight forward. Most of my time was spent scrounging StackOverflow or digging through other plugin code. In fact, I never got the first revision fully working; it wasn’t until I started at Uber that my Python knowledge expanded and I pumped out the plugin in a weekend.

Did you think building a plugin would be difficult? Was it easier or harder than you thought it would be?

Going into it, I had no idea and knew that I needed to explore the feasibility of what I wanted. It was definitely hard but I learned enough to make future plugins a breeze. Additionally, I found some cool features like Sublime Text has a .tmLanguage for Find in Files (Packages/Default/Find Results.hidden-tmLanguage).

What was the most challenging part of building your plugin?

The hardest part was finding the APIs I wanted to use. There is no expansive documentation for every nook and cranny of Sublime Text (and it doesn’t help that it’s closed source). However, with enough searching, I found what I needed.

What was your favorite part of creating your plugin?

Playing with the finished product. At work, it helped me find the important and relevant parts of a code base, making me 300% more efficient. It removed a constraint that was holding me back and I was thrilled.

Did you learn anything along the way that you wish you’d known when you were starting out?

Plenty; I wish I had understood that Sublime Text is light on internals and heavy on key bindings/commands out of the box. I wish I had known more Python; looking over the source code from 1 year ago, I see a lot of room for improvement.

Did your plugin grow or change as you built it? Did you have to modify your plans based on what the Sublime plugin APIs could do?

The original concept was that I would have to override Find in Files functionality. After reviewing the APIs and seeing what was possible, it became “How do I wrangle the existing functionality?”. After enough exploring, I discovered a way that worked for me which is what you see today.

What is your favorite plugin?

Quick File Creator, hands down. It adds a shortcut to create a new file via directory listing (same prompt used in Find++) which removes friction from creating abstractions and features.

What resources did you use to learn about Sublime Text’s API?

#

Todd’s Find++ is available in Package Control for Sublime Text 2 and 3.

P.S. For more about how to write your own plugins and achieve Sublime mastery, check out:

http://sublimetexttips.com/newsletter

Save yourself some embarassment with this Sublime Text plugin

By josh / May 28, 2014

My first job out of college had nothing to do with programming.

I worked at my alma mater in the public relations department as a writer and proofreader. The irony here is that, prior to college, I hated writing–and I was a terrible speller.

What could go wrong?

The PR department frequently sent out mass mailings to college alumni. No matter how hard we tried, a few typos would occasionally slip by. Usually no one noticed.

But …

They definitely noticed the one time, when we misspelled my boss’s title.

Bad enough.

But it got worse.

His title: “Director of Public Relations.”

We left out the L. Yup, that one.

He took it well.

“When you make a mistake in this business,” my boss used to say, “you can take comfort in the fact that you’ve printed and mailed thousands of copies.”

Spell checking can’t save you from every mistake like this, but it’ll catch a lot of them.

Sublime has a basic spell checker built right into it, but it’s turned off by default. (It doesn’t make sense to see red squiggly lines all over your code, but it can be very helpful when you’re writing a blog post.)

You can quickly toggle spell checking in a particular file by pressing F6. It’ll stay enabled on that file until you close it.

If you want even more robust spell checking, you can install the Google Spell Check plugin from Package Control.

Google Spell Check will look up a selected word on Google and automatically replace it with Goole’s recommended spelling. This is especially useful for words that aren’t in standard dictionaries, like company names.

You can also check entire phrases, like, say, a job title, and Google will identify and fix misspellings based on the context.

Would have saved us a lot of embarrassment back in the day.

For more ways to save yourself from yourself, join the Sublime Text Tips newsletter. I can’t guarantee it’ll be free of spelling errors, but there’s still lots of useful info:

http://sublimettexttips.com/newsletter

Every Sublime Text shortcut, right at your fingertips

By josh / May 27, 2014

Rejection hurts.

As part of creating Writing Sublime Plugins, I went through the process of building my own keyboard mappings plugin and submitting it to Package Control.

I was excited to get my plugin out there. But then my pull request was denied.

What? That’s a thing? At the time I didn’t realize that Package Control has a small team of curators who review each submission. (That’s why we don’t have 359 tip calculator plugins …)

The reason I got rejected was that my plugin was too similar to several existing keyboard shortcut plugins. And the others were much better.

One of those was written by Sublime Text Tips subscriber Miro Hibler.

It’s called simply Keymaps, and it’s awesome.

With the Keymaps plugin installed, you can hit a key combo and bring up a quick panel with a filterable list of mapped shortcuts. Once you find the shortcut you want, you can run the command the shortcut is mapped to by hitting Enter.

Keymaps also includes a cheatsheet feature that lets you see all of the active keyboard shortcuts for your Sublime installation–including ones added by plugins that you have installed.

Keymaps is available in Package Control for Sublime Text 2 and 3.

P.S. For more awesome plugin recommendations, go here:

http://sublimetexttips.com/newsletter

How to print code from Sublime Text

By josh / May 26, 2014

Sometimes it’s nice to be able to print code.

You know, like on paper, with ink and stuff.

In my last job, one of my assignments was restyling an off-the-shelf customer portal-type website. The company wanted to rebrand the site to match its main website, so they had their design team work up some Photoshop comps.

I was the lucky guy charged with making the designer’s vision a reality.

Sounds straightforward, right?

There was a catch.

I couldn’t touch any of the existing HTML. The devs who built the site chose to lock all of the markup away in compiled binaries. I couldn’t so much as add a single CSS class to even one tag.

I was going to have to work all of my magic with CSS. That made it super critical to understand the existing markup.

The first thing I did when I started working on the project was print out the entire home page–about 10 pages worth–and go through it with a pen and highlighter until I could see exactly how it was structured.

Priting out the markup helped me spot elements in the design that weren’t doable and saved me hours of frustration later on.

So yeah, printing can be pretty useful.

Unfortunately, as everyone knows, you can’t print from Sublime.

Only that’s not really true. There are several plugins that make it possible with a clever workaround.

My favorite so far is ExportHTML.

This plugin allows you to convert the current file to syntax-highlighted HTML, then send it to a web browser for easy printing. (It even opens the print dialog for you… )

This might seem like a clunky workaround, but it actually has some advantages. The plugin is more configurable than a built-in print function would be, allowing you to enable or disable line numbers, for example. You can even specify your own syntax highlighting color scheme to control how the code prints.

ExportHTML is available in Package Control, and it supports both Sublime Text 2 and 3.

P.S. For more ways to improve your Sublime workflow, check out http://sublimetexttips.com/newsletter.

1 2 3 6
Page 1 of 6