Posts

Sublime Text on steroids

December 12th, 2013

During the past years I’ve found myself trying many text and code editors; from established players like Textmate and Vim to new promising ones like Kod and others. In my opinion Sublime is currently the best code editor out there — it’s a robust combination of simplicity, extensibility, customization, and raw power for the veteran programmer.

The default installation of Sublime Text is good enough for the average user or a newbie programmer. The possibilities through third-party packages, though, are endless. They can totally transform a simple Sublime installation to a full-blown coding powerhouse. Here’s a list of my favorite packages and a small walkthrough of how to customize Sublime Text to fit your needs.

Overview

The gist is this: you have to download Package Control, a package manager that makes it extremely simple to find, install and keep packages up-to-date, then find and install the packages you want. You can customize Sublime through its text-based preferences (they seem daunting in the beginning but they’re so powerful and easy; worry not.) I’ll guide you through setting up a theme, customizing how Sublime Text looks and installing a few packages in an OS X installation.1

Package Control

First of all, we need to install Package Control. This is very easy. Open Sublime and type Control + ` to show the console. Then, if you’re using Sublime Text 22 paste the following command and hit enter:

import urllib2,os; pf='Package Control.sublime-package';
ipp = sublime.installed_packages_path(); os.makedirs( ipp )
if not os.path.exists(ipp) else None;
urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( )));
open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen
('http://sublime.wbond.net/'+pf.replace(' ','%20')).read());
print( 'Please restart Sublime Text to finish installation')

 
Restart Sublime Text. Now you have Package Control installed and can harness the power of packages.

User Preferences

Go to your User Preferences by typing Cmd + ,. Add the following lines inside the {} brackets:

{
//other commands
"default_encoding": "UTF-8",
"word_wrap": true,
"tab_size": 2,
"translate_tabs_to_spaces": true
}

 
The code above will ensure your files are always written in UTF-8 encoding, wrapped inside the window chrome however you resize it, and indenting with tabs of a size of 2 spaces.

Use a comma after each command only if it’s not the last item in your list. Save the file with Cmd + S and you’re done.

Visuals

I recommend hiding tabs. They’re kind of ugly anyway and take useful screen estate. The sidebar is powerful enough for fast file switching either by utilizing the default OS X combination of Cmd + Shift + { (or }) or Cmd + 1/2/3/…, or by utilizing Sublime’s built-in fuzzy search — type Cmd + T with several files open and then navigate to the one you want either by typing its name or using the arrow keys. Another great and fast keyboard navigation trick is Cmd + P; then in the bar type :X, where X is the number of the line you want to go.

In the View menu you should check the Show Status Bar option.

Tomorrow Theme

There are many themes out there catering every need and style. The one I like the most is called Tomorrow and is available for almost every major text editor. In order to install Tomorrow in Sublime Text type Cmd + Shift + P to open Package Control. Then type Install, find the Install Packages, select it and then type Tomorrow — it’ll show you the Tomorrow Color Schemes package. Hit enter and install it.

Then navigate to Preferences ➝ Color Scheme ➝ Tomorrow Color Schemes and select the one you like the most. I prefer the Tomorrow Night version. It looks like this:

Sublime Text

Git

There’s a great Git package for Sublime Text called, umm, Git. Do the usual process (Cmd + Shift + PInstall ➝ type Git) and install the package. Then, for instance, you can utilize the very cool diff viewer in a file right within Sublime Text by typing Cmd + Shift + PDiff. Piece of cake.

DocBlockr

DocBlockr automates the documentation process. Just type /** and then Tab and it does all the documentation lookup for you based on a method’s context. For example, if your method looks like public function awesome(Array $rad){} it will return above it this:

/**
* [awesome description]
* @param Array $rad [description]
* @return [type] [description]
*/

 
Install it by Cmd + Shift + PInstall ➝ type DocBlockr and hit enter.

Alignment

Alignment is a great tool for properly aligning code. If you’re a sucker for preppy code like me and with a light OCD this package works wonders. You can install it by Cmd + Shift + PInstall ➝ type Alignment. When a messy piece of code appears, select it and type Cmd + Control + A.

LaTeXTools

If you’re writing in LaTeX then this package is for you. It allows you to write LaTeX in Sublime, export and live preview it as PDF. First install the MacTex package from here (it’s a 2.3Gb file), then install LaTeXTools by Cmd + Shift + PInstall ➝ type Latextools. In order to fully customize LaTeXTools and the live PDF preview via Skim Reader, please refer to LaTeXTools’ documentation.

Print to HTML

Sublime Text doesn’t support printing files yet but there’s a package for that. It’s called Print to HTML. It prints your code in a code-highlighted HTML file which you open with a browser and print it either as a PDF or on dead trees. Install it by Cmd + Shift + PInstall ➝ type Print, find it in the list and hit enter.

Markdown

Sublime has fully served all my code and text needs but one: writing in Markdown. Nowadays I write almost all my documents3 in Markdown using Mou. I used to use iA Writer but Mou’s features like Copy HTML (export your Markdown document in vanilla HTML ready to paste in a WordPress editor for instance), export as PDF, and an amazing live preview made me switch.

Sublime supports Markdown code highlighting out of the box but it’s fairly limited and, unfortunately, there are no additional features. There are a few Markdown packages I tried with the best of them being Markdown Editing. You can install it by Cmd + Shift + PInstall ➝ type MarkdownEditing.

Although MarkdownEditing supports export to HTML, it’s not vanilla. Moreover, I haven’t automated my Markdown process in Sublime yet, ergo I’m sticking with Mou. But you can definitely give Markdown a try in Sublime.

More Sublime reading


  1. For Windows users: it’s essentially the same process with different keyboard combinations.
  2. As of writing this, the latest stable Sublime Text version is 2.0.2.
  3. For instance this post or even school/academic papers. Although regarding school papers I’ve started experimenting with LaTeX and looks quite cool. I still love Markdown’s simplicity, though.

OS X Minimalism

December 9th, 2013

I was talking with my friend Zac the other day and he sent me a screenshot of his dock. What I found intriguing was the fact that his dock was completely free of clutter and didn’t look at all anything like your typical dock flotsam.

Since its inception Mac OS X was a minimalist OS — it introduced bona fide and groundbreaking UX and human-computer interaction paradigms (this continued later with iOS), kept only the absolute essential elements on the screen, and above all, helped the user do his job and be productive.

I used to keep a relatively sane dock as well but Zac’s system was clearly a lot better so I figured out I’d experiment more with this approach and will see if it works better than the other. (Spoiler: it does.)

Dock

First of all, I cleaned up my dock. Anything I don’t really use every day had to go. Now I have a dock of 5 apps in the iMac (6 in the Macbook; I use Sparrow there) excluding the Finder and Trash 1. This is how it looks like:

Dock

I use Spotlight as an application launcher. Somehow all the Alfred-like apps never got me interested since Spotlight just does the job and is fast enough. option + space to fire up Spotlight and then I type either one or two letters from the name of the app I want to open. Xc for Xcode, P for Plex, Ph for Photoshop and so on and so forth.

Finder

I rarely search for folders or files through Spotlight — I have my file system organized quite well and am really fast on navigating the Finder with keyboard shortcuts and without using the mouse at all. I’ve also built a custom keyboard shortcut script so I can access my Dropbox folder instantly.

A typical Finder access looks like this: click on Finder icon on the dock, open up Dropbox instantly through cmd + shift + v or type Doc, Dow or gi to navigate the pointer to my Documents, Downloads or git folder respectively (or any other folder I might need to), cmd + o to open the folder; then it’s the same letter-typing and cmd + o process as mentioned until I find the specific file.

Visual Clutter

For instance, desktop icons. I prefer no desktop icons at all. That’s what Windows are for, not a Macintosh. Something which is also quite useful is to check on your notifications and eliminate the ones you don’t need like in iOS.

There’s also visual clutter inside apps you use. In this case the axiom I go by is “remove everything that doesn’t have to be there.” In Safari, for example, this means no bookmarks bar (easily accessible via cmd + shift + b) and no tab bar (it shows up automatically anyway when open tabs > 1). 2

Safari

Similarly Finder’s sidebar is also stripped off of every non-essential option. I only left AirDrop, Desktop, my home folder, Dropbox, and Downloads shortcuts.

OS X Finder

Apps like Sublime Text

In other 3rd-party apps it really is up to you and the app itself on how minimal you’ll go — what to remove and what to leave as is. Sometimes, some things are useful however they look like.

Other apps, like Sublime Text and iTerm, because of their customizable nature are meant to be adjusted into a more minimalist look and feel. Personally, I hide the tabs in Sublime Text (they take up uneccessary screen estate and are ugly) and keep a bare bones installation with a custom theme and some useful packages. 3 In iTerm, I’ve made it semi-transparent to ease the multitasking.

Sublime Text

iTerm

Menu Bar

I try to keep the menu bar in order, too. There are so many apps that try to own some screen estate by claiming a spot in the menu bar in order to ‘notify’ you of something or provide easy access to a certain option. I keep apps in the menu bar only if I can’t remove them from there. For example Bowtie which sits in the lower left corner of the screen normally uses a menu bar icon.

Bowtie

Not on my watch. Or Growl (which I still use for a few apps which don’t support Notification Center integration yet).

Menubar

My menu bar consists of Dropbox, Droplr, Plex, LogMeIn, F.lux, and system icons. Surprisingly, I’ve never used Bartender either.

Desktop

(Click for full-size desktop screenshot.)

Overall so far the system not only looks better but also operates a bit faster. I think I’m more productive since visual distractions either by apps on the dock or in-app clutter are eliminated. Visual stimuli are less, hence brain RAM is freed up. I can only recommend going minimal in OS X.


  1. Funny note: I have an OCD with the Trash. I always empty it — even with one file inside.
  2. Regarding Safari extensions I suggest using 1Password (never type a password again; way safer!) and Evernote. I also use the Instapaper one and iCloud for tab sharing.
  3. I’ll write a post about Sublime Text soon.

→ On VisionMobile’s ‘HTML5 vs. Native’ research

December 7th, 2013

→ On VisionMobile’s ‘HTML5 vs. Native’ research

Last April, the fine folks of VisionMobile—the leading research company on the apps economy and mobile business models—asked mobile app developers what stops them from using HTML5. It was a big research whose results are extremely interesting. I was fortunate enough to take part in the survey because of 4sqwifi and to be quoted on my opinion.

If you’re a mobile developer, a product or a C-level manager in a mobile/consumer web startup I  recommend paying attention to VisionMobile’s research.

→ Guest post for TEDx Athens

November 28th, 2013

→ Guest post for TEDx Athens

TEDxAthens is one of the few truly good things that happen back in the motherland (Greece) and the guys invited me to write a guest post about tips for maximizing your TEDx experience (it’s in Greek.) Unfortunately this year I can’t join the now two-days gig in Athens.